/* lumibot.si Batch 6: Swap Table, Stardust Workbench, My Star Room. Bright (kid) look by default, Sleek (html.lx-pg) is just darker. */
.b6-mat { display:inline-block; vertical-align:middle; flex:none; filter:drop-shadow(0 0 4px rgba(255,255,255,.25)); }
.b6-art { display:flex; align-items:center; justify-content:center; width:100%; height:100%; line-height:1; pointer-events:none; }
.b6-svg svg { width:100%; height:auto; display:block; overflow:visible; }
.b6-emo { font-size:44px; }

/* ---------- Swap Table ---------- */
.sw-box h2, .wb-box h2, .rm-box h2 { font-size:clamp(22px,3.4vw,30px); margin-bottom:10px; }
.sw-code { font-size:22px; }
.sw-code b { display:inline-block; padding:6px 14px; border-radius:14px; background:rgba(255,216,74,.18); border:2px solid #ffd84a; letter-spacing:.06em; font-size:26px; }
.sw-n { font-size:20px; margin:10px 0; }
.sw-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:10px 0 14px; }
.sw-grid.sw-mini { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.sw-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; border-radius:16px; background:linear-gradient(160deg,var(--g),var(--gd)); color:#fff; text-align:center; min-height:100%; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.sw-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; background:rgba(0,0,0,.25); }
.sw-card b { font-size:16px; line-height:1.2; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.sw-card small { font-size:13px; opacity:.92; line-height:1.25; }
.sw-card small i { font-style:normal; color:#fff6a0; font-weight:800; }
.sw-fin-gold { box-shadow:0 0 0 3px #ffd84a, 0 4px 14px rgba(0,0,0,.35); }
.sw-fin-shiny, .sw-fin-sir, .sw-fin-ir { box-shadow:0 0 0 3px #ff9de2, 0 0 16px rgba(255,157,226,.5); }
.sw-pick { all:unset; cursor:pointer; display:block; border-radius:18px; padding:4px; border:4px solid transparent; transition:transform .12s; }
.sw-pick:hover { transform:translateY(-2px); }
.sw-pick:focus-visible { outline:3px solid #9be8ff; outline-offset:2px; }
.sw-pick.on { border-color:#ffd84a; background:rgba(255,216,74,.18); transform:scale(1.03); }
.sw-step { display:flex; align-items:center; gap:10px; font-size:22px; margin:16px 0 4px; }
.sw-step span { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#ffd84a; color:#2a1d08; font-weight:900; }
.sw-form { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:8px 0; }
.sw-in { font:inherit; font-size:24px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:14px 18px; min-height:64px; border-radius:18px; border:3px solid #9be8ff; background:rgba(0,0,0,.35); color:#fff; flex:1 1 240px; min-width:0; }
.sw-visit { font-size:20px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sw-offers { display:grid; gap:14px; }
.sw-offer { padding:14px; border-radius:18px; background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.14); }
.sw-from { font-size:20px; font-weight:800; margin-bottom:8px; }
.sw-pair { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; max-width:460px; }
.sw-pair small { display:block; text-align:center; font-weight:800; margin-bottom:4px; }
.sw-arrow { font-size:36px; }
.sw-go .lg-btn[disabled] { opacity:.45; }
.sw-confirm .sw-pair { margin:14px auto; }
.sw-foot, .wb-foot { margin:10px 4px 30px; }

/* ---------- Stardust Workbench ---------- */
.wb-mats { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.wb-mat { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:2px solid var(--c); }
.wb-mat b { font-size:22px; min-width:1.4em; }
.wb-mat small { font-size:14px; opacity:.85; }
.wb-sky { position:relative; height:clamp(260px,42vw,380px); border-radius:22px; overflow:hidden; touch-action:manipulation;
  background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px) 0 0/60px 60px,radial-gradient(circle at 70% 60%,#cfe3ff 0 1px,transparent 2px) 0 0/90px 90px,radial-gradient(ellipse at 70% 30%,rgba(201,162,255,.35),transparent 60%),linear-gradient(#0a0f2c,#1b2560); border:3px solid rgba(155,232,255,.4); }
.wb-tw { position:absolute; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; border:0; cursor:pointer; background:radial-gradient(circle,var(--c) 0 22%,transparent 62%); color:#fff; font-size:40px; display:grid; place-items:center; animation:wbtw 1.8s ease-in-out infinite alternate; animation-delay:var(--dl); transition:left .25s, top .25s; }
.wb-tw span { filter:drop-shadow(0 0 8px var(--c)); }
.wb-tw:focus-visible { outline:3px solid #fff; }
.wb-tw.pop { animation:wbpop .4s ease-out, wbtw 1.8s .4s ease-in-out infinite alternate; }
@keyframes wbtw { from { transform:translate(-50%,-50%) scale(.85); opacity:.75; } to { transform:translate(-50%,-50%) scale(1.12); opacity:1; } }
@keyframes wbpop { from { transform:translate(-50%,-50%) scale(.2); } to { transform:translate(-50%,-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .wb-tw, .wb-tw.pop { animation:none; } }
.wb-hint { font-size:20px; font-weight:800; margin:10px 0 2px; min-height:1.6em; }
.wb-tabs { margin-bottom:12px; }
.wb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.wb-rec, .wb-thing { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:14px 10px; border-radius:20px; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.14); }
.wb-rec.wb-found { border-color:#ffd84a; background:rgba(255,216,74,.10); }
.wb-tag { position:absolute; top:8px; right:8px; background:#ffd84a; color:#2a1d08; font-weight:900; font-size:13px; padding:2px 10px; border-radius:999px; }
.wb-ic { width:78px; height:78px; display:grid; place-items:center; }
.wb-ic .b6-emo { font-size:58px; }
.wb-rec b, .wb-thing b { font-size:18px; line-height:1.2; }
.wb-rec small, .wb-thing small { font-size:14px; opacity:.85; }
.wb-costs { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.wb-cost { display:inline-flex; align-items:center; gap:2px; font-weight:800; font-size:16px; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.25); }
.wb-cost.wb-short { opacity:.55; }
.wb-rec .lg-btn, .wb-thing .lg-btn { width:100%; margin-top:auto; }
.wb-rec .lg-btn[aria-disabled="true"] { opacity:.7; }
.wb-mine { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-bottom:12px; }
.wb-h3 { font-size:22px; margin:12px 0 8px; }
.wb-pip .lg-big-emoji .b6-emo { font-size:80px; } .wb-pip .lg-big-emoji .b6-svg { width:110px; margin:auto; }

/* ---------- My Star Room ---------- */
.rm-rooms { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.rm-name { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.rm-stage { position:relative; width:100%; aspect-ratio:4/3; max-height:72vh; border-radius:22px; overflow:hidden; border:4px solid rgba(255,255,255,.25); box-shadow:inset 0 0 40px rgba(0,0,0,.35); touch-action:none; user-select:none; -webkit-user-select:none; container-type:inline-size; }
.rm-wall { position:absolute; inset:0 0 30% 0; }
.rm-floor { position:absolute; inset:70% 0 0 0; box-shadow:inset 0 10px 18px rgba(0,0,0,.35); }
.rm-it { position:absolute; transform:translate(-50%,-50%); border:0; padding:0; background:none; cursor:grab; touch-action:none; aspect-ratio:1; display:grid; place-items:center; border-radius:12px; }
.rm-it .b6-emo { font-size:calc(var(--fs) * 0.82cqw); }
.rm-it:active { cursor:grabbing; }
.rm-it.on { outline:4px dashed #ffd84a; outline-offset:2px; background:rgba(255,216,74,.12); }
.rm-it:focus-visible { outline:4px solid #9be8ff; }
.rm-tools { margin-top:12px; align-items:center; min-height:64px; }
.rm-selname { font-size:20px; }
.rm-pal { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:12px; }
.rm-add { display:flex; flex-direction:column; align-items:center; gap:6px; min-height:120px; padding:10px; border-radius:18px; border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:inherit; font:inherit; cursor:pointer; }
.rm-add .b6-art { height:64px; width:72px; } .rm-add .b6-emo { font-size:50px; }
.rm-add b { font-size:16px; line-height:1.2; }
.rm-add:hover { border-color:#ffd84a; }
.rm-sw { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.rm-swatch { display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:16px; border:3px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:inherit; font:inherit; cursor:pointer; }
.rm-swatch span { display:block; height:70px; border-radius:10px; }
.rm-swatch b { font-size:15px; }
.rm-swatch.on { border-color:#ffd84a; }
.rm-tabs { margin-bottom:12px; }

/* kid look: big chunky friendly */
html:not(.lx-pg) .sw-box, html:not(.lx-pg) .wb-box, html:not(.lx-pg) .rm-box { border-width:3px; }
html:not(.lx-pg) .rm-tools .lg-btn, html:not(.lx-pg) .wb-rec .lg-btn { min-height:60px; font-size:19px; }

/* Sleek (PG): darker and calmer, same layout */
html.lx-pg .sw-card { background:linear-gradient(160deg,#20222b,#14151b); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
html.lx-pg .sw-card b { text-shadow:none; }
html.lx-pg .sw-code b { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
html.lx-pg .sw-pick.on { border-color:#d9c38a; background:rgba(217,195,138,.10); }
html.lx-pg .sw-step span { background:#d9c38a; }
html.lx-pg .sw-in { border-color:rgba(255,255,255,.3); background:#101116; }
html.lx-pg .sw-offer, html.lx-pg .wb-rec, html.lx-pg .wb-thing, html.lx-pg .rm-add, html.lx-pg .rm-swatch, html.lx-pg .wb-mat { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); }
html.lx-pg .wb-rec.wb-found { border-color:rgba(217,195,138,.6); background:rgba(217,195,138,.06); }
html.lx-pg .wb-tag { background:#d9c38a; }
html.lx-pg .wb-sky { background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.8) 0 1px,transparent 2px) 0 0/60px 60px,radial-gradient(circle at 70% 60%,rgba(207,227,255,.6) 0 1px,transparent 2px) 0 0/90px 90px,linear-gradient(#08090f,#14161f); border-color:rgba(255,255,255,.14); }
html.lx-pg .wb-tw { width:64px; height:64px; font-size:32px; }
html.lx-pg .rm-stage { border-color:rgba(255,255,255,.12); border-width:2px; }
html.lx-pg .rm-it.on { outline-color:#d9c38a; }
html.lx-pg .rm-swatch.on { border-color:#d9c38a; }
@media (max-width:520px) { .sw-grid { grid-template-columns:repeat(2,1fr); } .wb-grid, .wb-mine { grid-template-columns:repeat(2,1fr); gap:10px; } .rm-pal { grid-template-columns:repeat(3,1fr); } .rm-sw { grid-template-columns:repeat(2,1fr); } .wb-ic { width:62px; height:62px; } .wb-ic .b6-emo { font-size:46px; } .wb-rec b { font-size:16px; } .b6-emo { font-size:36px; } .wb-tw { width:64px; height:64px; } .wb-mat small { display:none; } }
.rm-tools:has(.rm-selname) { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.rm-tools .rm-selname { grid-column:1/-1; }
.rm-tools .lg-btn { width:auto; margin:0; }
@media (max-width:520px) { .rm-tools:has(.rm-selname) { grid-template-columns:repeat(2,1fr); } .rm-tools .lg-btn { min-height:56px; font-size:17px; padding:8px 6px; } }
.wb-rec .lg-btn, .wb-thing .lg-btn, .rm-tools .lg-btn { padding:0 12px; font-size:20px; min-height:60px; white-space:nowrap; }
.wb-tabs > .lg-btn, .rm-tabs > .lg-btn, .rm-rooms > .lg-btn { flex:0 1 auto; min-height:58px; padding:0 18px; font-size:19px; }
@media (max-width:520px) { .wb-rec .lg-btn, .wb-thing .lg-btn { font-size:17px; padding:0 6px; white-space:normal; } .wb-tabs > .lg-btn, .rm-tabs > .lg-btn, .rm-rooms > .lg-btn { font-size:17px; padding:0 12px; min-height:54px; } }

/* ---------- Constellation Puzzles ---------- */
.cz-count { font-size:20px; margin:4px 0 10px; }
.cz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.cz-tile { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px; border-radius:18px; border:2px solid rgba(255,255,255,.16); background:linear-gradient(#0a0f2c,#1b2560); color:#fff; font:inherit; cursor:pointer; }
.cz-tile svg { width:100%; max-width:130px; aspect-ratio:1; }
.cz-tile b { font-size:18px; } .cz-tile small { font-size:14px; opacity:.85; }
.cz-tile.done { border-color:#ffd84a; }
.cz-st { fill:#fff8d0; filter:drop-shadow(0 0 2px #fff); }
.cz-ln { stroke:#9be8ff; stroke-width:1.6; stroke-linecap:round; filter:drop-shadow(0 0 1.5px #9be8ff); }
.cz-sky { border-radius:22px; overflow:hidden; background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px) 0 0/60px 60px,radial-gradient(circle at 70% 60%,#cfe3ff 0 .8px,transparent 1.6px) 0 0/90px 90px,linear-gradient(#070b24,#16204f); border:3px solid rgba(155,232,255,.35); touch-action:none; max-width:640px; margin:0 auto; }
.cz-svg { display:block; width:100%; height:auto; user-select:none; }
.cz-g { cursor:pointer; outline:none; }
.cz-hit { fill:transparent; }
.cz-g .cz-st { transition:r .15s; }
.cz-g.sel .cz-st { r:5; fill:#ffd84a; }
.cz-g.hint .cz-st { fill:#ff9de2; animation:czh 1s ease-in-out infinite alternate; }
.cz-g:focus-visible .cz-hit { stroke:#9be8ff; stroke-width:.8; }
.cz-g.nope { animation:czn .35s; }
@keyframes czh { from { r:3.4; } to { r:5.4; } }
@keyframes czn { 25% { transform:translateX(-1.2px); } 75% { transform:translateX(1.2px); } }
@media (prefers-reduced-motion: reduce) { .cz-g.hint .cz-st, .cz-g.nope { animation:none; } .cz-g.hint .cz-st { r:5.4; } }
.cz-num { fill:#ffd84a; font-size:4.6px; font-weight:900; paint-order:stroke; stroke:#0a0f2c; stroke-width:1px; }
.cz-left { font-size:20px; font-weight:800; text-align:center; margin:10px 0 0; }
.cz-tools > .lg-btn { flex:1 1 180px; padding:0 14px; font-size:20px; min-height:64px; }
.cz-story .cz-fact { font-size:18px; margin:8px 0; padding:10px 14px; border-radius:14px; background:rgba(155,232,255,.12); }
.cz-story h3 { margin-top:10px; } .cz-tale { font-size:19px; line-height:1.6; }
.cz-story .lg-btn { padding:0 16px; font-size:20px; min-height:64px; }
html.lx-pg .cz-tile, html.lx-pg .cz-sky { background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.7) 0 1px,transparent 2px) 0 0/60px 60px,linear-gradient(#08090f,#14161f); border-color:rgba(255,255,255,.12); }
html.lx-pg .cz-tile.done { border-color:rgba(217,195,138,.7); }
html.lx-pg .cz-ln { stroke:#cfd8e6; filter:none; } html.lx-pg .cz-g.sel .cz-st { fill:#d9c38a; }
@media (max-width:520px) { .cz-grid { grid-template-columns:repeat(2,1fr); } .cz-tools > .lg-btn { font-size:17px; min-height:58px; } }