/* World UI: HUD, dialog, panels, theatre, character sheet. Colours follow the current town (--acc, --soft, --ink). */
:root{--acc:#7c5ac7;--soft:#fff;--ink:#2a2040;--font:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#1b1530;font-family:var(--font);color:var(--ink);-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;overflow:hidden}
#c{position:absolute;inset:0;display:block;touch-action:none;cursor:grab;outline:0}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #ffbf3a;outline-offset:2px}

/* HUD */
#hud{position:absolute;left:0;right:0;top:0;padding:max(10px,env(safe-area-inset-top)) 12px 0;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
#hud>*{pointer-events:auto}
#left{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#where{background:rgba(255,255,255,.92);border:2.5px solid var(--acc);border-radius:999px;padding:7px 16px;font-weight:800;font-size:15px;letter-spacing:.01em;box-shadow:0 4px 14px rgba(0,0,0,.18);color:#2a2040}
#target{background:#ffc21a;border:2px solid #8a5a00;border-radius:999px;padding:5px 6px 5px 14px;font-weight:700;font-size:13px;color:#3a2600;display:flex;align-items:center;gap:6px}
#target button{border:0;background:rgba(0,0,0,.15);border-radius:50%;width:22px;height:22px;line-height:20px;font-weight:800;color:#3a2600;padding:0}
#btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#btns>*{background:rgba(255,255,255,.92);border:2.5px solid var(--acc);border-radius:999px;min-width:42px;height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;color:#2a2040;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
#btns>*:hover{transform:translateY(-1px)}
#btns .lab{display:inline}
#emotes{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 54px);right:12px;display:flex;flex-wrap:wrap;gap:6px;max-width:320px;justify-content:flex-end;background:rgba(255,255,255,.94);padding:10px;border-radius:18px;border:2.5px solid var(--acc);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.chip{border:2px solid var(--acc);background:#fff;color:#2a2040;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px}
.chip:hover{background:var(--acc);color:#fff}
#prompt{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(255,255,255,.95);border:2.5px solid var(--acc);color:#2a2040;border-radius:999px;padding:8px 18px;font-weight:700;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none;white-space:nowrap}
body:not(.touch) #prompt::before{content:"E  ";display:inline-block;background:var(--acc);color:#fff;border-radius:6px;padding:0 6px;margin-right:6px}
#banner{position:absolute;left:50%;top:22%;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0}
#banner.go{animation:ban 3.1s ease both}
#banner h1{margin:0;font-size:clamp(28px,6vw,56px);font-weight:900;letter-spacing:-.01em;color:#fff;text-shadow:0 3px 0 var(--acc),0 6px 24px rgba(0,0,0,.4)}
#banner p{margin:6px 0 0;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
@keyframes ban{0%{opacity:0;transform:translate(-50%,14px)}12%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}

/* touch controls */
#stick{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:rgba(255,255,255,.28);border:3px solid rgba(255,255,255,.7);pointer-events:none}
#knob{position:absolute;left:30px;top:30px;width:50px;height:50px;border-radius:50%;background:var(--acc);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35)}
#abtn{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:var(--acc);color:#fff;font-weight:900;font-size:28px;box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:.55;display:none;touch-action:manipulation}
#abtn.on{opacity:1;animation:pop 1.2s ease-in-out infinite}
body.touch #abtn{display:block}
body.touch #prompt{bottom:max(112px,env(safe-area-inset-bottom))}
@keyframes pop{50%{transform:scale(1.08)}}

/* dialog box (zelda style) */
#dlg{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(720px,calc(100% - 24px));background:rgba(255,252,246,.97);border:4px solid var(--acc);border-radius:20px;padding:16px 20px 16px;box-shadow:0 10px 36px rgba(0,0,0,.35);color:#2a2040}
.dark #dlg,.dark .card,.dark #btns>*,.dark #where{background:rgba(10,18,32,.95);color:#dff0ff}
#dname{display:inline-block;background:var(--acc);color:#fff;font-weight:800;border-radius:10px;padding:2px 12px;margin:-32px 0 6px;font-size:14px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.dark #dname{color:#04101e}
#dtext{margin:4px 0 10px;font-size:18px;line-height:1.45;min-height:2.6em}
#dopts{display:flex;flex-wrap:wrap;gap:8px;max-height:36vh;overflow:auto}
.b{background:var(--acc);color:#fff;border:0;border-radius:12px;padding:9px 16px;font-weight:700;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.dark .b{color:#04101e}
.b.ghost{background:transparent;color:inherit;border:2px solid var(--acc);box-shadow:none}
.b.town{background:#fff;color:var(--acc);border:2px solid var(--acc)}
.b:hover{filter:brightness(1.08)}

/* overlays */
.ov{position:absolute;inset:0;display:grid;place-items:center;padding:14px;background:rgba(20,10,40,.5);backdrop-filter:blur(3px);z-index:20}
.card{position:relative;background:#fffaf2;border:4px solid var(--acc);border-radius:24px;padding:24px 24px 22px;width:min(560px,100%);max-height:calc(100% - 20px);overflow:auto;box-shadow:0 14px 50px rgba(0,0,0,.4);color:#2a2040}
.card.wide{width:min(760px,100%)}
.card h2{margin:0 0 6px;font-size:28px;line-height:1.1;font-weight:900;color:var(--acc);padding-right:34px}
.dark .card h2{color:#59dcff}
.card .tx{margin:0 0 16px;font-size:17px;line-height:1.5}
.x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:2px solid var(--acc);background:#fff;color:var(--acc);font-weight:900;font-size:18px;line-height:1;padding:0}
.opts{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left;background:#fff;color:#2a2040;border:2.5px solid var(--acc);border-radius:16px;padding:12px 16px;box-shadow:0 3px 0 rgba(0,0,0,.15);align-items:center}
.dark .opt{background:#0d1a2e;color:#dff0ff}
.opt b{font-size:17px}.opt span{grid-column:1;font-size:14px;opacity:.75}.opt i{grid-row:1/3;grid-column:2;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);text-align:right;max-width:90px;line-height:1.2}
button.opt:hover{transform:translateY(-2px);background:var(--soft)}
.opt.soon{opacity:.6;border-style:dashed;box-shadow:none}

#viewer{padding:0;background:#fff;z-index:30;display:flex;flex-direction:column;place-items:stretch}
.vbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--acc);color:#fff;font-weight:700}
.vbar a,.vbar button{color:#fff;background:rgba(255,255,255,.2);border:0;border-radius:999px;padding:8px 16px;text-decoration:none;font-weight:700}
#vframe{flex:1;width:100%;border:0;background:#fff}

/* theatre */
#theater{background:radial-gradient(120% 90% at 50% 20%,#4a2a66,#150a24);z-index:30}
.stage{position:relative;width:min(1100px,100%);display:flex;flex-direction:column;align-items:center;gap:12px}
.bigscreen{width:100%;aspect-ratio:16/9;max-height:62vh;background:#000;border:10px solid #1d1230;border-radius:12px;box-shadow:0 0 0 3px #d9b24a,0 0 80px rgba(255,210,120,.35);overflow:hidden}
.bigscreen iframe{width:100%;height:100%;border:0;background:#fff}
.curt{position:absolute;top:-14px;width:16%;height:calc(100% + 40px);background:repeating-linear-gradient(90deg,#8f1d3a 0 14px,#b0243f 14px 28px,#7a1630 28px 40px);z-index:1;pointer-events:none;box-shadow:0 0 30px rgba(0,0,0,.5)}
.curt.l{left:-16px;border-radius:0 0 60% 0/0 0 12% 0}.curt.r{right:-16px;border-radius:0 0 0 60%/0 0 0 12%}
.tbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;color:#fff;position:relative;z-index:2}
.tbar p{margin:0;font-weight:600;max-width:36em;text-align:center}
.tbar a,.tbar button{background:#ffd24a;color:#2a1740;border:0;border-radius:999px;padding:10px 20px;font-weight:800;text-decoration:none;font-size:15px}
.tbar button{background:#fff}
.seats{width:110%;height:46px;margin-top:-6px;background:repeating-radial-gradient(ellipse at 50% 200%,#5e1030 0 18px,#7a1630 18px 36px);border-radius:50% 50% 0 0/100% 100% 0 0;opacity:.85}

/* character sheet */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:12px 0}
.catcard{background:#fff;border:3px solid var(--acc);border-radius:20px;padding:12px 14px 16px;text-align:center}
.catcard canvas{width:min(220px,70%);height:auto;aspect-ratio:220/240;display:block;margin:0 auto}
.catcard h3{margin:0;font-size:24px;font-weight:900}.catcard p{margin:2px 0 8px;font-size:14px;opacity:.8}
.exprs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-bottom:10px}
.exprs .chip{padding:3px 9px;font-size:12px}
.how{font-size:14px;line-height:1.5;opacity:1;margin:6px 0 0}
.how kbd{background:#2a2040;color:#fff;border:1px solid #0d0820;border-bottom-width:3px;border-radius:5px;padding:1px 7px;margin:0 1px;font:inherit;font-weight:800;box-shadow:0 1px 0 rgba(255,255,255,.25) inset}
.dark .how kbd{background:#59dcff;color:#04101e;border-color:#0b7fa0}
.how b{font-weight:800}

@media (max-width:640px){
  #btns .lab{display:none}#btns>*{min-width:42px;padding:0 10px}
  #dtext{font-size:16px}.card{padding:20px 16px}.card h2{font-size:23px}
  #where{font-size:13px;padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){#banner.go{animation:none;opacity:1}#abtn.on{animation:none}}
.pimg{width:100%;height:auto;max-height:46vh;object-fit:cover;border-radius:14px;border:3px solid var(--acc);margin:0 0 12px;display:block;background:#0b0418}
#tfall{width:100%;height:100%;display:grid;place-content:center;gap:16px;text-align:center;padding:24px;background:radial-gradient(80% 80% at 50% 40%,#3a2060,#120a24);color:#fff}#tfall[hidden]{display:none}#tfall p{margin:0;font-size:clamp(14px,2.2vw,20px);max-width:28em}#tfall a{justify-self:center;background:#ffd24a;color:#2a1740;border-radius:999px;padding:12px 24px;font-weight:800;text-decoration:none}
#loading{position:absolute;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:6px;background:radial-gradient(90% 80% at 50% 35%,#4a1d6e,#150a28 70%);color:#fff;text-align:center;cursor:pointer}#loading[hidden]{display:none}#loading img{width:min(62vw,300px);height:auto;filter:drop-shadow(0 0 28px rgba(255,63,176,.55))}#loading p{margin:0;font-weight:800;font-size:clamp(18px,3vw,26px);letter-spacing:.04em;text-shadow:0 0 14px #ff3fb0}#loading span{font-size:12px;opacity:.6;letter-spacing:.14em;text-transform:uppercase}
#toast{position:absolute;left:50%;top:max(70px,calc(env(safe-area-inset-top) + 64px));transform:translateX(-50%);z-index:40;max-width:min(92vw,520px);background:var(--acc);color:#fff;border:3px solid #fff;border-radius:16px;padding:10px 18px;font-weight:800;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0}
#toast.go{animation:toast 4.4s ease both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-10px)}8%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
.dark #toast{color:#04101e}
.catcard.locked{background:#2a2142;border-color:#5a4a8c;color:#d8cfee}
.catcard.locked h3{letter-spacing:.2em}.catcard.locked p{opacity:.85}
.lockline{margin-top:6px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12px;opacity:.7}
.catcard.cur{box-shadow:0 0 0 4px var(--acc),0 10px 24px rgba(0,0,0,.25)}
.cats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* gallery: a scrollable grid of photos, tap one to enlarge, arrows or swipe to move on */
.gal{max-height:calc(100% - 10px);display:flex;flex-direction:column}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;overflow:auto;padding:2px;min-height:120px;align-content:start;grid-auto-rows:118px;-webkit-overflow-scrolling:touch}
.ggrid button{padding:0;border:2px solid var(--acc);border-radius:10px;overflow:hidden;background:#0b0418;height:118px;cursor:pointer}
.ggrid img{width:100%;height:100%;object-fit:cover;display:block}
.ggrid button:focus-visible,.ggrid button:hover{outline:3px solid #ffd24a}
.gbig{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1}
.gbig[hidden]{display:none}
.gstage{display:grid;grid-template-columns:44px 1fr 44px;gap:6px;align-items:center;min-height:0;flex:1}
.gstage img{width:100%;max-height:56vh;object-fit:contain;border-radius:12px;background:#0b0418;border:3px solid var(--acc);justify-self:center}
.gstage button{height:56px;border-radius:50%;border:2px solid var(--acc);background:#fff;color:var(--acc);font-size:30px;line-height:1;font-weight:900;cursor:pointer}
.gcap{margin:0;font-size:15px;line-height:1.4;text-align:center}
#glink{display:grid;gap:8px}

/* music player: a small window, closed until the visitor opens it */
.mp{position:absolute;left:12px;bottom:12px;width:min(300px,calc(100% - 24px));z-index:15;background:#fffaf2;color:#2a2040;border:3px solid var(--acc);border-radius:18px;padding:10px 12px 12px;box-shadow:0 8px 28px rgba(0,0,0,.35);font:600 14px system-ui,sans-serif}
.dark .mp{background:#0d1626;color:#dff0ff}
.mp[hidden]{display:none}
.mp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--acc)}
.mp-x{width:28px;height:28px;border-radius:50%;border:2px solid var(--acc);background:transparent;color:var(--acc);font-size:16px;line-height:1;cursor:pointer;padding:0}
.mp select{width:100%;padding:6px 8px;border-radius:10px;border:2px solid var(--acc);background:transparent;color:inherit;font:inherit}
.mp select option{color:#2a2040}
.mp-now{margin:8px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.mp-bar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:12px}
.mp-bar input{width:100%;accent-color:var(--acc)}
.mp-ctl{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.mp-ctl button{width:40px;height:40px;border-radius:50%;border:2px solid var(--acc);background:transparent;color:inherit;font-size:17px;cursor:pointer;padding:0;opacity:.8}
.mp-ctl button.big{width:48px;height:48px;background:var(--acc);color:#fff;opacity:1}
.mp-ctl button.on{background:var(--acc);color:#fff;opacity:1}
.mp-msg{margin-top:6px;font-size:12px;opacity:.85}
#bMusic.playing{outline:3px solid var(--acc)}
@media (max-width:640px){.mp{bottom:86px}}

/* world map: the fixed map of towns, joined by roads; tap a town to teleport */
.mapvp{position:relative;height:min(56vh,440px);overflow:hidden;touch-action:none;cursor:grab;border:2px solid var(--acc);border-radius:14px;margin:6px 0 4px;background:#eef3e6;user-select:none;-webkit-user-select:none}
.dark .mapvp{background:#0b1322}
.mapvp.drag{cursor:grabbing}
.mapgrid{position:absolute;left:0;top:0;transform-origin:0 0;display:grid;gap:0;align-items:stretch;justify-items:stretch;width:max-content;padding:14px}
.mapctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px}
.mapctl button{border:2px solid var(--acc);background:#fff;color:var(--acc);border-radius:999px;padding:6px 14px;font:700 14px system-ui,sans-serif;cursor:pointer;min-height:36px}
.mapctl button:hover,.mapctl button:focus-visible{outline:3px solid #ffd24a}
.mapctl .sq{width:40px;padding:6px 0;font-size:18px;line-height:1}
.mapgrid .town{border:3px solid var(--acc);border-radius:16px;padding:10px 8px;background:#fff;color:#2a2040;text-align:center;cursor:pointer;font:700 14px system-ui,sans-serif;line-height:1.2}
.dark .mapgrid .town{background:#10192b;color:#dff0ff}
.mapgrid .town small{display:block;font-weight:500;font-size:11px;opacity:.75;margin-top:3px;word-break:break-all}
.mapgrid .town:hover,.mapgrid .town:focus-visible{outline:3px solid #ffd24a}
.mapgrid .town.here{background:var(--acc);color:#fff;cursor:default}
.mapgrid .road{background:repeating-linear-gradient(90deg,#c9a46a 0 8px,#e8cf9a 8px 16px);align-self:center;justify-self:center}
.mapgrid .road.h{height:10px;width:100%}
.mapgrid .road.v{width:10px;height:100%;min-height:22px;background:repeating-linear-gradient(0deg,#c9a46a 0 8px,#e8cf9a 8px 16px)}
.mapextra{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mapextra .mapcell{flex:1 1 120px;min-height:80px}

/* chat phrases */
.saygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:52vh;overflow:auto}
.saygrid .b{padding:10px 8px;font-size:14px}
.mapnote{display:block;font-weight:600;font-size:10.5px;margin-top:3px}
.mapdots{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:5px;font:700 9px system-ui,sans-serif}
.mapdots i{width:6px;height:6px;border-radius:50%;background:#2fbf6a;box-shadow:0 0 0 1px #fff,0 0 4px #2fbf6a;display:block}
.mapgrid .town.here .mapdots i{background:#fff6a8;box-shadow:0 0 4px #fff6a8}
.mapdots b{opacity:.8;line-height:6px}
/* each town is one rectangle (title on top, visitor tally inside); neighbours touch with no gap, a tan bar on the shared edge marks a road */
.mapcell{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;border:2px solid var(--acc);background:#fff;cursor:pointer;margin:0 -1px -1px 0}
.dark .mapcell{background:#10192b}
.mapcap{text-align:center;line-height:1.15;color:#fff;background:#0a1a4a;padding:4px 4px 5px;font:800 12px system-ui,sans-serif;overflow-wrap:anywhere}
.mapcap small{display:block;font-weight:500;font-size:10px;opacity:.85;word-break:break-all}
.mapgrid .mapcell .town{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0;min-height:0;padding:4px;border:0;border-radius:0;background:transparent;font-size:11px}
.mapgrid .mapcell .town.here{background:#fff6a8;color:#2a2040}
.mapgrid .mapcell .town small{font-size:10px;margin-top:0}
.mapgrid .mapcell .town .mapdots i{background:#2fbf6a}
.mapcount{font:800 11px system-ui,sans-serif;margin-top:3px}
.mapcell.road-e::after,.mapcell.road-s::before{content:"";position:absolute;z-index:1;background:#c9a46a;border:2px solid #8a6a36;border-radius:3px;pointer-events:none}
.mapcell.road-e::after{right:-8px;top:50%;width:14px;height:12px;margin-top:-6px}
.mapcell.road-s::before{bottom:-8px;left:50%;height:14px;width:12px;margin-left:-6px}
.mapextra .mapcell{margin:0}

/* ---- SynthCraft Radio: a huge 80s boom box (radio.js) ---- */
#radio{background:radial-gradient(ellipse at 50% 30%,rgba(255,63,176,.28),rgba(8,4,24,.92) 70%);overflow:hidden;padding:0}
.rscroll{position:relative;width:100%;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:14px 12px 28px;color:#f6e6ff}
#radio .x{position:absolute;top:12px;right:12px;z-index:3;background:#1a0f2e;border-color:#ff3fb0;color:#ff9ad8}
.rtitle{margin:6px 0 4px;font:900 clamp(19px,5vw,34px)/1.1 "Arial Black",Impact,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ffe27a;text-shadow:0 0 14px #ff3fb0,3px 3px 0 #7a1f6a;text-align:center;padding-right:40px}
.rtitle small{white-space:nowrap;color:#59dcff;font-size:.6em;text-shadow:0 0 12px #2ec4e6}
.rfit{position:relative;margin:6px auto 0;flex:none}
.bb{position:absolute;left:0;top:0;width:900px;height:500px;transform-origin:0 0;font-family:system-ui,sans-serif;color:#dfe3ee}
.bb-ant{position:absolute;right:120px;top:-40px;width:7px;height:150px;background:linear-gradient(90deg,#8e949f,#fff,#8e949f);border-radius:4px;transform:rotate(24deg);transform-origin:50% 100%;top:-50px}
.bb-ant:before{content:"";position:absolute;left:-4px;top:-8px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9aa1ad 60%,#555)}
.bb-handle{position:absolute;left:210px;top:14px;width:480px;height:62px;border-radius:30px 30px 10px 10px;background:linear-gradient(#444a57,#14161c);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 4px 10px rgba(0,0,0,.5);border:4px solid #b9bfcc;border-bottom:0}
.bb-handle span{position:absolute;left:46px;right:46px;top:16px;height:20px;border-radius:12px;background:linear-gradient(#050608,#262a33);box-shadow:inset 0 3px 6px #000}
.bb-body{position:absolute;left:0;top:60px;width:900px;height:430px;border-radius:34px;background:linear-gradient(#4a4f5c 0,#262932 14%,#16181e 60%,#0d0e12);border:6px solid #c9cfdb;box-shadow:0 0 0 3px #5b6070,0 22px 50px rgba(0,0,0,.65),inset 0 4px 0 rgba(255,255,255,.28),inset 0 -10px 24px rgba(0,0,0,.6)}
.bb-stripe{position:absolute;left:300px;right:300px;top:0;height:0}
.bb-body:before{content:"";position:absolute;left:24px;right:24px;top:14px;height:12px;border-radius:6px;background:linear-gradient(90deg,#ff3fb0 0 33%,#ffb02e 33% 66%,#2ec4e6 66%);box-shadow:0 0 12px rgba(255,63,176,.6)}
.bb-body:after{content:"BX-9000  STEREO  RADIO  CASSETTE  RECORDER";position:absolute;left:0;right:0;bottom:12px;text-align:center;font:800 13px/1 system-ui,sans-serif;letter-spacing:.34em;color:#9aa1b0}
.bb-spk{position:absolute;top:44px;width:276px;height:360px;border-radius:26px;background:linear-gradient(#1a1c22,#0a0b0e);box-shadow:inset 0 0 0 4px #333640,inset 0 0 22px #000}
.bb-spk.l{left:20px}.bb-spk.r{right:20px}
.bb-tw{position:absolute;left:104px;top:22px;width:68px;height:68px;border-radius:50%;background:repeating-radial-gradient(circle,#0b0c0f 0 2px,#262932 2px 4px);border:4px solid #8e949f;box-shadow:0 0 0 3px #1c1e24}
.bb-cone{position:absolute;left:23px;top:106px;width:230px;height:230px;border-radius:50%;border:6px solid #8e949f;box-shadow:0 0 0 4px #1c1e24,inset 0 0 18px #000;background:repeating-radial-gradient(circle,#101216 0 3px,#2b2f39 3px 7px);display:grid;place-items:center}
.bb-cone b{width:94px;height:94px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#ddd 0,#7b808c 38%,#25272e 74%);box-shadow:inset 0 0 12px #000,0 0 0 6px #181a1f}
.bb-mid{position:absolute;left:316px;top:44px;width:236px;height:360px;display:flex;flex-direction:column;gap:9px}
.bb-disp{background:#07120d;border:3px solid #5b6070;border-radius:8px;padding:6px 8px 6px;box-shadow:inset 0 0 14px #000}
.bb-led{display:flex;align-items:baseline;gap:8px}
.bb-led span{font:900 38px/1 ui-monospace,Consolas,monospace;color:#2a4a38;letter-spacing:.04em}
.bb-led em{font:800 10px/1.1 system-ui;letter-spacing:.12em;color:#2a4a38;font-style:normal}
.bb-led em.air{margin-left:auto;padding:2px 5px;border-radius:4px;border:1px solid #4a2020;color:#4a2020}
.bb-dial{position:relative;margin-top:6px;height:22px;border-radius:3px;background:repeating-linear-gradient(90deg,#3a5a48 0 1px,transparent 1px 9px),linear-gradient(#10261b,#0a160f);overflow:hidden}
.bb-needle{position:absolute;top:0;bottom:0;left:38%;width:3px;background:#555;box-shadow:0 0 0 #000}
.bb-eq{display:flex;align-items:flex-end;gap:4px;height:54px;padding:6px 8px;background:#0a0b10;border:3px solid #5b6070;border-radius:8px;box-shadow:inset 0 0 12px #000}
.bb-eq i{flex:1;height:10%;border-radius:2px;background:linear-gradient(#ff3fb0,#ffb02e 45%,#2ec4e6);opacity:.35;transform-origin:50% 100%}
.bb-tape{display:flex;align-items:center;justify-content:space-between;gap:4px;height:78px;padding:6px 8px;background:linear-gradient(#0d0f14,#1a1d25);border:3px solid #5b6070;border-radius:8px;box-shadow:inset 0 0 14px #000}
.bb-reel{flex:none;width:46px;height:46px;border-radius:50%;border:5px solid #c9cfdb;background:conic-gradient(#111 0 12%,#c9cfdb 12% 18%,#111 18% 45%,#c9cfdb 45% 51%,#111 51% 78%,#c9cfdb 78% 84%,#111 84%);box-shadow:0 0 0 3px #000}
.bb-label{flex:1;min-width:0;text-align:center;background:#f4ecd2;color:#3a2a1a;border-radius:4px;padding:3px 4px;box-shadow:0 0 0 2px #7a6a4a;transform:rotate(-1deg)}
.bb-label b{display:block;font:900 10px system-ui;letter-spacing:.12em;color:#c0392b}
.bb-label span{display:block;font:800 12px/1.2 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-label small{display:block;white-space:nowrap;font:700 9px ui-monospace,Consolas,monospace;color:#6a5a3a}
.bb-keys{display:flex;gap:5px;margin-top:2px}
.bb-keys button{flex:1;height:44px;border-radius:6px 6px 3px 3px;border:2px solid #000;background:linear-gradient(#9aa1ad,#4d525e);color:#101216;font-size:18px;font-weight:900;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 5px 0 #20232a;padding:0;line-height:1}
.bb-keys button.rec{color:#c0392b}
.bb-keys button:disabled{opacity:.9}
.bb-keys button.lit{background:linear-gradient(#7dffb0,#2fb673);transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 #20232a}
.bb-keys button:not(:disabled){cursor:pointer}
.bb-sw{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px;font:900 14px system-ui;letter-spacing:.14em;color:#c9cfdb}
.bb-sw button{position:relative;width:112px;height:44px;border-radius:24px;border:3px solid #c9cfdb;background:linear-gradient(#2a0d12,#4a1a22);box-shadow:inset 0 3px 8px #000;cursor:pointer;padding:0}
.bb-sw button i{position:absolute;top:3px;left:3px;width:50px;height:32px;border-radius:18px;background:linear-gradient(#f2f4f8,#8e949f);box-shadow:0 3px 0 #222,inset 0 2px 0 #fff;transition:left .18s}
.bb[data-on="1"] .bb-sw button{background:linear-gradient(#0d3a22,#1c7a48)}
.bb[data-on="1"] .bb-sw button i{left:55px}
.bb-sw button:focus-visible{outline:3px solid #ffe27a;outline-offset:3px}
/* on state: everything lights up and moves */
.bb[data-on="1"] .bb-led span{color:#7dffb0;text-shadow:0 0 12px #2fe38a}
.bb[data-on="1"] .bb-led em{color:#7dffb0}
.bb[data-on="1"] .bb-led em.air{color:#ff5a5a;border-color:#ff5a5a;text-shadow:0 0 8px #ff3030;animation:rdblink 1.4s infinite}
.bb[data-on="1"] .bb-needle{background:#ff3030;box-shadow:0 0 8px #ff3030;animation:rdsway 6s ease-in-out infinite alternate}
.bb[data-on="1"] .bb-eq i{opacity:1;animation:rdeq calc(.5s + var(--i) * .07s) ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s)}
.bb[data-on="1"] .bb-reel{animation:rdspin 2.4s linear infinite}
.bb[data-on="1"] .bb-cone{animation:rdthump .42s ease-in-out infinite alternate}
.bb[data-on="1"] .bb-spk{box-shadow:inset 0 0 0 4px #333640,inset 0 0 22px #000,0 0 26px rgba(255,63,176,.55)}
.bb[data-on="1"] .bb-tw{animation:rdthump .21s ease-in-out infinite alternate}
.bb[data-on="1"] .bb-label span{color:#101216}
@keyframes rdblink{50%{opacity:.35}}
@keyframes rdsway{from{left:34%}to{left:42%}}
@keyframes rdeq{from{height:12%}to{height:100%}}
@keyframes rdspin{to{transform:rotate(360deg)}}
@keyframes rdthump{from{transform:scale(1)}to{transform:scale(1.045)}}
.rtext{width:min(640px,100%);margin-top:14px;font-size:16px;line-height:1.5;color:#e8dcff}
.rtext p{margin:0 0 10px}.rtext b{color:#ffe27a}
.rmsg{color:#ff9ad8;min-height:1.2em}
.rpill{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:14;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-radius:99px;background:#1a0f2e;border:2px solid #ff3fb0;color:#ffe27a;font:800 13px system-ui;box-shadow:0 0 16px rgba(255,63,176,.5)}
.rpill[hidden]{display:none}
.rpill button{border:0;border-radius:99px;background:#ff3fb0;color:#fff;font:800 12px system-ui;padding:5px 10px;cursor:pointer}
@media (max-width:640px){.rpill{top:62px}}
@media (prefers-reduced-motion:reduce){.bb *{animation:none!important}}

/* HyperMall name, top left */
#hmbrand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:6px 14px 7px 12px;border-radius:16px;background:rgba(13,5,36,.9);border:2px solid #2f6bff;box-shadow:0 0 16px rgba(47,107,255,.6),inset 0 0 12px rgba(255,47,184,.25);--hm:24px;pointer-events:none}
#hmbrand .hm{margin-bottom:.12em}
#hmbrand small{font:700 10px/1.1 system-ui,sans-serif;letter-spacing:.04em;color:#ff9ad8}
@media (max-width:640px){#hmbrand{--hm:18px;padding:5px 10px 6px 9px}#hmbrand small{font-size:9px}}