/* lumibot.si Batch 11: Music, Quiet Hours, frontier extras. Kid look by default; Sleek look under html.lx-pg (just darker). */
/* Shared popup fix: on phones the × floats so the title wraps around it instead of sitting under it */
@media (max-width:600px) { .lg-modal-in > .lg-x { float:right; position:relative; right:auto; top:auto; margin:-14px -8px 4px 8px; z-index:2; } }

.b11-hero h1 { font-size:clamp(30px,6vw,44px); }
.b11-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.b11-sec h2 { margin-bottom:6px; }
.b11-sec h3 { margin:14px 0 8px; }
.b11-insts { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin:12px 0; }
.b11-inst { min-height:84px; border-radius:20px; border:3px solid color-mix(in srgb,var(--c) 55%,transparent); background:color-mix(in srgb,var(--c) 18%,#0c0c16); color:#fff; font:inherit; font-weight:800; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px; cursor:pointer; }
.b11-inst span { font-size:30px; line-height:1; }
.b11-inst small { font-weight:600; font-size:13px; color:#d9d9e4; text-align:center; }
.b11-inst[aria-pressed="true"] { border-color:var(--c); box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 22px var(--c); }
.b11-inst.locked { opacity:.7; }
.b11-keys, .b11-jl { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.b11-keys .lg-btn[aria-pressed="true"], .b11-jl .lg-btn[aria-pressed="true"], [data-b11m-shelf][aria-pressed="true"] { outline:3px solid #ffe27a; outline-offset:2px; }
.b11-pads { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:14px 0; touch-action:manipulation; }
.b11-pad { aspect-ratio:1; min-height:64px; border-radius:24px; border:none; background:radial-gradient(circle at 40% 35%,#fff 0,var(--c) 38%,color-mix(in srgb,var(--c) 45%,#120a24) 100%); color:#fff; font-size:30px; cursor:pointer; box-shadow:0 6px 0 color-mix(in srgb,var(--c) 40%,#000),0 0 18px color-mix(in srgb,var(--c) 45%,transparent); transition:transform .08s; -webkit-user-select:none; user-select:none; }
.b11-pad span { text-shadow:0 0 8px rgba(255,255,255,.9); color:rgba(255,255,255,.9); }
.b11-pad:active, .b11-pad.hit { transform:translateY(4px) scale(.96); box-shadow:0 2px 0 color-mix(in srgb,var(--c) 40%,#000),0 0 34px var(--c); }
.b11-recing { animation:b11pulse 1.6s ease-in-out infinite; }
@keyframes b11pulse { 50% { box-shadow:0 0 0 6px rgba(255,120,150,.35); } }
.b11-name { background:rgba(255,226,122,.1); border:2px dashed #ffe27a; border-radius:18px; padding:12px; margin:8px 0; }
.b11-tl { list-style:none; display:grid; gap:8px; }
.b11-tl li { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; background:rgba(255,255,255,.06); border-radius:14px; padding:8px 12px; }
.b11-tl li span { display:flex; gap:6px; }
.b11-jam { display:flex; align-items:center; gap:12px; }
.b11-jam .b11-pads { flex:1; }
.b11-pip { font-size:46px; }
.b11-jam.on .b11-pip { animation:b11bob 1s ease-in-out infinite; }
@keyframes b11bob { 50% { transform:translateY(-8px) rotate(-6deg); } }
.b11-boxes { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin:10px 0; }
.b11-mb { border-radius:20px; border:3px solid var(--c); background:linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,#141020),#0b0b14); color:#fff; padding:12px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; text-decoration:none; font:inherit; min-height:120px; cursor:pointer; }
.b11-mb.shadow { border-style:dashed; opacity:.75; background:rgba(255,255,255,.04); }
.b11-mb small { color:#d9d9e4; }
.b11-mbi { font-size:34px; line-height:1; }
.b11-mb .b3-row { justify-content:center; }
[data-b11-wind].b11-cranking .b11-mbi, [data-b11m-wind].hit { animation:b11wind .5s ease-in-out 3; }
@keyframes b11wind { 50% { transform:rotate(-14deg) scale(1.08); } }
.b11-cg { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.b11-cb { border-radius:18px; border:2px solid rgba(159,216,255,.45); background:rgba(10,14,30,.85); color:#fff; font:inherit; padding:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; min-height:120px; }
.b11-cb svg { width:76px; height:76px; fill:#cfe9ff; }
.b11-cb.done { border-color:#ffe27a; }
.b11-cb.done svg { fill:#ffe27a; }
.b11-cb small { color:#ffe27a; }
.b11-cv h3 { text-align:center; }
.b11-csvg { display:block; width:min(100%,440px); margin:0 auto; background:radial-gradient(circle at 50% 40%,#1a1640,#07070e 75%); border-radius:24px; touch-action:manipulation; }
.b11-csvg line { stroke:#ffe27a; stroke-width:1.2; stroke-linecap:round; opacity:.8; }
.b11-cs { cursor:pointer; }
.b11-cs circle { fill:#cfe9ff; }
.b11-cs circle.hit { fill:transparent; }
.b11-cs.lit circle:not(.hit) { fill:#ffe27a; }
.b11-cs.next circle:not(.hit) { fill:#fff; filter:drop-shadow(0 0 3px #fff); animation:b11tw 1.4s ease-in-out infinite; }
.b11-cs.pulse circle:not(.hit) { animation:b11tw .5s ease-in-out 4; }
@keyframes b11tw { 50% { opacity:.45; } }
.b11-stage { display:flex; gap:10px; justify-content:center; align-items:flex-end; min-height:110px; padding:12px; border-radius:20px; background:linear-gradient(#1a1032,#0b0b14); margin:8px 0; flex-wrap:wrap; }
.b11-singer img { width:84px; height:84px; object-fit:contain; border-radius:16px; }
.b11-singer.sing { animation:b11bob .42s ease-in-out infinite; }
.b11-cpick { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; max-height:460px; overflow:auto; padding:4px; }
.b11-cr { border-radius:16px; border:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); color:#fff; font:inherit; padding:6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; min-height:110px; }
.b11-cr img { width:70px; height:70px; object-fit:contain; }
.b11-cr small { font-size:12px; line-height:1.2; text-align:center; }
.b11-cr.on { border-color:#ffe27a; box-shadow:0 0 14px rgba(255,226,122,.55); }
.b11-note { background:rgba(255,179,230,.12); border:2px solid #ffb3e6; border-radius:16px; padding:10px 12px; margin:8px 0; }
.b11-hums { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.b11-hb { min-height:60px; border-radius:16px; border:2px solid var(--c); background:color-mix(in srgb,var(--c) 14%,#0b0b14); color:#fff; font:inherit; font-weight:800; cursor:pointer; display:flex; gap:8px; align-items:center; padding:8px 12px; text-align:left; }
.b11-hb[aria-pressed="true"] { box-shadow:0 0 18px var(--c); }
.b11-galmus { margin-top:14px; }
.b11-juke { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:rgba(255,179,230,.12); border:2px solid rgba(255,179,230,.6); border-radius:18px; padding:10px 14px; margin:10px auto; max-width:1100px; }
.b11-juke span:nth-child(2) { flex:1; min-width:180px; }
.b11-found { text-align:center; }
.b11-big { font-size:64px; display:block; }
.b11-gate { text-align:center; }
/* settings */
[data-b11-set] .lx-seg { margin-bottom:8px; }
/* Faint Signals */
.b11-sig { margin-top:14px; padding:12px; border-radius:20px; background:rgba(201,162,255,.1); border:2px dashed rgba(201,162,255,.6); }
.b11-sigl { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:10px 0; max-width:440px; }
.b11-sigb { aspect-ratio:1; min-height:64px; border-radius:50%; border:3px solid var(--c); background:color-mix(in srgb,var(--c) 22%,#0b0b14); font-size:30px; cursor:pointer; transition:transform .1s; }
.b11-sigb.on { background:var(--c); transform:scale(1.1); box-shadow:0 0 26px var(--c); }
.b11-sigp { display:flex; gap:8px; margin:6px 0; }
.b11-sigp i { width:18px; height:18px; border-radius:50%; border:2px solid #c9a2ff; }
.b11-sigp i.on { background:#c9a2ff; }
.b11-sigr { font-weight:700; min-height:1.4em; }
/* Shy Arrivals */
.b11-arrg, .b11-shgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.b11-ar { border-radius:20px; background:rgba(255,255,255,.05); border:2px solid rgba(168,255,207,.35); padding:10px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.b11-ar.bright { border-color:#a8ffcf; box-shadow:0 0 18px rgba(168,255,207,.4); }
.b11-arimg { display:block; border-radius:16px; padding:4px; background:radial-gradient(circle,rgba(168,255,207,calc(var(--lv)*.45)),transparent 70%); }
.b11-arimg img { width:96px; height:96px; object-fit:contain; transition:filter .6s; }
.b11-arb { display:flex; gap:6px; }
.b11-arb .lg-btn { min-width:48px; min-height:48px; font-size:22px; padding:4px; }
/* Shadow Cards */
.b11-sh { display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:#fff; text-align:center; border-radius:18px; padding:8px; background:rgba(255,255,255,.04); border:2px dashed rgba(201,162,255,.5); }
.b11-sh.found { border-style:solid; border-color:#c9a2ff; }
.b11-shimg { position:relative; display:block; }
.b11-shimg img { width:96px; height:96px; object-fit:contain; }
.b11-sh:not(.found) .b11-shimg img { filter:brightness(0) drop-shadow(0 0 2px #c9a2ff) drop-shadow(0 0 6px #c9a2ff); opacity:.85; }
.b11-shimg b { position:absolute; inset:0; display:grid; place-items:center; font-size:30px; color:#e8d9ff; }
.b11-sh small { font-size:13px; }
/* Frontier packs */
.b11-frgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.b11-frpk { border-radius:20px; border:3px solid hsl(var(--h) 80% 72%); background:linear-gradient(160deg,hsl(var(--h) 60% 28%),#0b0b14); color:#fff; font:inherit; padding:10px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; min-height:150px; }
.b11-wrap { position:relative; width:64px; height:86px; border-radius:10px; background:linear-gradient(135deg,hsl(var(--h) 80% 70%),hsl(calc(var(--h) + 60) 80% 60%)); display:grid; place-items:center; box-shadow:0 0 16px hsl(var(--h) 80% 60%); }
.b11-wrap b { font-size:34px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.4); }
.b11-frpk small { color:#d9d9e4; }
/* Card Vault button in the big card viewer */
.pv-btn.b11-cvb[aria-pressed="true"] { background:#bfe8ff; color:#08131c; }
/* Giant at the Window */
.b11-win { position:relative; height:170px; border-radius:24px 24px 10px 10px; border:8px solid #6b4a32; background:linear-gradient(#18234a,#0b0f24); overflow:hidden; margin:8px 0; box-shadow:inset 0 0 30px rgba(0,0,0,.6); }
.b11-window.night .b11-win { background:linear-gradient(#090c1e,#04050c); }
.b11-win::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:8px; margin-left:-4px; background:#6b4a32; }
.b11-stars { position:absolute; inset:0; background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 70%,#fff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 55% 45%,#fff,transparent); }
.b11-giant { position:absolute; top:22px; width:140px; height:120px; left:-150px; animation:b11drift 38s linear infinite; }
.b11-giant svg { width:100%; height:100%; }
.b11-window.night .b11-giant { left:calc(50% - 70px); animation:b11nap 5s ease-in-out infinite; opacity:.85; }
@keyframes b11drift { to { left:110%; } }
@keyframes b11nap { 50% { transform:translateY(4px) scale(1.02); } }
html.lx-calm .b11-giant { animation:none; left:calc(50% - 70px); }
/* Secret knock */
.b11-knock { margin-top:14px; padding:12px; border-radius:18px; background:rgba(255,226,122,.08); border:2px dashed rgba(255,226,122,.5); text-align:left; }
.b11-kgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin:8px 0; }
.b11-kgrid .lg-btn[aria-pressed="true"] { outline:3px solid #ffe27a; }
/* Buddy notes */
.b11-nl { list-style:none; display:grid; gap:8px; }
.b11-nl li { background:rgba(255,255,255,.06); border-radius:14px; padding:8px 12px; display:flex; flex-direction:column; }
.b11-nl small { color:#bdbdc6; }
/* Singing garden */
.gg-plot.b11-sing { animation:b11sing .5s ease-out; }
@keyframes b11sing { 40% { filter:brightness(1.5) drop-shadow(0 0 10px #ffe9a8); transform:scale(1.04); } }
html.lx-calm .gg-plot.b11-sing, html.lx-calm .b11-singer.sing, html.lx-calm .b11-jam.on .b11-pip, html.lx-calm .b11-recing { animation:none; }

/* ---------- Sleek look (html.lx-pg): darker, flatter ---------- */
html.lx-pg .b11-pad { background:color-mix(in srgb,var(--c) 30%,#101018); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 70%,transparent); border-radius:14px; }
html.lx-pg .b11-pad:active, html.lx-pg .b11-pad.hit { background:color-mix(in srgb,var(--c) 70%,#101018); box-shadow:0 0 18px color-mix(in srgb,var(--c) 60%,transparent); }
html.lx-pg .b11-inst, html.lx-pg .b11-mb, html.lx-pg .b11-hb, html.lx-pg .b11-frpk { background:#111119; border-width:2px; border-radius:14px; }
html.lx-pg .b11-cb, html.lx-pg .b11-cr, html.lx-pg .b11-ar, html.lx-pg .b11-sh, html.lx-pg .b11-tl li, html.lx-pg .b11-nl li { background:#111119; border-radius:12px; }
html.lx-pg .b11-stage, html.lx-pg .b11-csvg { background:#0a0a12; border-radius:14px; }
html.lx-pg .b11-sig, html.lx-pg .b11-knock, html.lx-pg .b11-note, html.lx-pg .b11-name, html.lx-pg .b11-juke { background:#0f0f17; border-style:solid; border-width:1px; border-radius:12px; }
html.lx-pg .b11-sigb { background:#111119; border-width:2px; }
html.lx-pg .b11-wrap { border-radius:6px; box-shadow:none; }
html.lx-pg .b11-win { border-color:#2a2a34; border-radius:12px; }
html.lx-pg .b11-win::after { background:#2a2a34; }