/* ZX Radio as a tiny handheld: a spinning Triforce that opens a "ZX micro" (Game Boy Micro style) player.
   The old radio bar (linerRadio) keeps running hidden underneath; js/zx-gbradio.js drives this.
   Colours follow the site theme: light = the original grey Game Boy, dark = midnight and gold, Twilight = teal glow. */
body{padding-bottom:0!important;margin-bottom:0!important}   /* the old bar added 58px of margin for itself */
#strm_radio .strm_player{position:fixed!important;left:-10000px!important;bottom:0!important;width:400px!important;opacity:0!important;pointer-events:none!important}

.zgb-root{
  /* dark (default) */
  --gb-body1:#363b49;--gb-body2:#23262f;--gb-body3:#1a1c23;--gb-trim:#c9a24e;--gb-line:rgba(220,180,92,.32);
  --gb-bezel:#111318;--gb-label:#8f96a3;--gb-logo:#dcb45c;
  --gb-pad:#15171c;--gb-pad-arrow:#7d8594;
  --gb-btn1:#e0566a;--gb-btn2:#a3243a;--gb-btn-edge:#5c1220;--gb-btn-text:#ffe9ec;
  --gb-ss:#5a6172;--gb-ss-edge:rgba(255,255,255,.12);--gb-ss-text:#e6c77e;--gb-grill:rgba(0,0,0,.45);
  --gb-scr-bg:linear-gradient(160deg,#1d2433,#10141d);--gb-scr-fg:#f2d58a;
  --gb-glow:rgba(242,213,138,.75);
}
:root[data-theme="light"] .zgb-root{
  /* the original Game Boy: warm grey, maroon buttons, pea-green screen */
  --gb-body1:#d9d6d0;--gb-body2:#c8c4bd;--gb-body3:#b7b2aa;--gb-trim:#9d9890;--gb-line:rgba(70,70,90,.18);
  --gb-bezel:#5f6372;--gb-label:#2e3a7a;--gb-logo:#2e3a7a;
  --gb-pad:#2f3136;--gb-pad-arrow:#8b8f98;
  --gb-btn1:#c23a6c;--gb-btn2:#8e1e4b;--gb-btn-edge:#5a1030;--gb-btn-text:#ffe3ee;
  --gb-ss:#8a8b92;--gb-ss-edge:rgba(0,0,0,.08);--gb-ss-text:#2e3a7a;--gb-grill:rgba(60,60,70,.35);
  --gb-scr-bg:#9bbc0f;--gb-scr-fg:#0f380f;
  --gb-glow:rgba(201,147,43,.7);
}
:root.zx-twilight .zgb-root{
  /* Twilight: near-black, teal glow, orange accents */
  --gb-body1:#1f2a2e;--gb-body2:#141c1f;--gb-body3:#0c1214;--gb-trim:#3fd0c0;--gb-line:rgba(63,208,192,.35);
  --gb-bezel:#060a0b;--gb-label:#7fa9a4;--gb-logo:#ff9d3c;
  --gb-pad:#0a0f11;--gb-pad-arrow:#3fd0c0;
  --gb-btn1:#ffb35c;--gb-btn2:#d9661c;--gb-btn-edge:#7a3208;--gb-btn-text:#2a1204;
  --gb-ss:#2a4f52;--gb-ss-edge:rgba(63,208,192,.55);--gb-ss-text:#7ff5e6;--gb-grill:rgba(63,208,192,.25);
  --gb-scr-bg:linear-gradient(160deg,#0b2326,#061214);--gb-scr-fg:#7ff5e6;
  --gb-glow:rgba(63,208,192,.8);
}

/* the Triforce button: no background, twists back and forth with a soft glow */
.zgb-fab{position:fixed;right:16px;bottom:14px;z-index:99990;width:62px;height:56px;border:0;background:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;perspective:260px;-webkit-tap-highlight-color:transparent}
.zgb-tri{position:relative;display:block;width:54px;height:48px;transform-style:preserve-3d;animation:zgbtwist 7s ease-in-out infinite}
.zgb-fab{animation:zgbglow 3.4s ease-in-out infinite}   /* the glow sits on the button: a filter on the 3D Triforce would flatten it */
.zgb-tri svg{position:absolute;inset:0;width:100%;height:100%;display:block;backface-visibility:visible}
.zgb-tri .zgb-face{transform:translateZ(3px)}
.zgb-tri .zgb-depth{transform:translateZ(-3px)}
.zgb-tri .zgb-depth.d2{transform:translateZ(0)}
.zgb-fab:hover .zgb-tri{animation-duration:4.5s}
.zgb-fab:focus-visible{outline:2px solid var(--gb-glow);outline-offset:2px;border-radius:8px}
.zgb-root.zgb-play .zgb-tri{animation-duration:5.5s}.zgb-root.zgb-play .zgb-fab{animation-duration:2s}
.zgb-fab .zgb-note{position:absolute;top:-6px;right:-2px;width:18px;height:18px;border-radius:50%;background:#dcb45c;color:#3b2d0c;font:900 11px/18px Arial,sans-serif;text-align:center;
  opacity:0;transform:scale(.5);transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.zgb-root.zgb-play .zgb-fab .zgb-note{opacity:1;transform:scale(1)}
@keyframes zgbtwist{0%,100%{transform:rotateX(8deg) rotateY(-34deg)}50%{transform:rotateX(8deg) rotateY(34deg)}}
@keyframes zgbglow{0%,100%{filter:drop-shadow(0 3px 2px rgba(0,0,0,.45)) drop-shadow(0 0 2px var(--gb-glow))}50%{filter:drop-shadow(0 3px 2px rgba(0,0,0,.45)) drop-shadow(0 0 12px var(--gb-glow))}}

/* the handheld */
.zgb{position:fixed;right:16px;bottom:80px;z-index:99991;width:318px;height:150px;border-radius:26px;transform-origin:calc(100% - 31px) calc(100% + 38px);
  transform:scale(.15) translateY(40px);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,1.3,.4,1),opacity .2s;
  background:linear-gradient(180deg,var(--gb-body1),var(--gb-body2) 55%,var(--gb-body3));
  box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.25),inset 0 0 0 2px var(--gb-trim);
  font-family:'Press Start 2P',monospace;user-select:none}
.zgb-open .zgb{transform:none;opacity:1;pointer-events:auto}
.zgb-trim{position:absolute;inset:7px;border-radius:20px;border:1px solid var(--gb-line);pointer-events:none}

/* screen */
.zgb-bezel{position:absolute;left:84px;top:14px;width:150px;height:110px;border-radius:10px 10px 22px 10px;background:var(--gb-bezel);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.zgb-led{position:absolute;left:8px;top:48px;width:5px;height:5px;border-radius:50%;background:#3a2020}
.zgb-on .zgb-led{background:#ff4d3d;box-shadow:0 0 6px #ff4d3d}
.zgb-scr{position:absolute;left:18px;top:9px;width:122px;height:82px;border-radius:2px;overflow:hidden;padding:5px 6px;box-sizing:border-box;
  background:var(--gb-scr-bg);color:var(--gb-scr-fg);font-size:7px;line-height:1.5}
.zgb-scr:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 2px);pointer-events:none}
.zgb.zgb-alt .zgb-scr{background:#9bbc0f;color:#0f380f}
:root[data-theme="light"] .zgb.zgb-alt .zgb-scr{background:linear-gradient(160deg,#1d2433,#10141d);color:#f2d58a}
.zgb-logo{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:italic 800 9px/1 Arial,sans-serif;letter-spacing:.06em;color:var(--gb-label)}
.zgb-logo b{color:var(--gb-logo)}
.zgb-row{display:flex;justify-content:space-between;align-items:center;gap:4px}
.zgb-live{display:flex;align-items:center;gap:3px}.zgb-live i{width:5px;height:5px;background:currentColor;opacity:.35}
.zgb-on .zgb-live i{opacity:1;animation:zgbblink 1s steps(2) infinite}
@keyframes zgbblink{50%{opacity:.2}}
.zgb-mq{position:relative;overflow:hidden;white-space:nowrap;margin:6px 0 2px;height:11px;font-size:8px}
.zgb-mq span{position:absolute;left:0;top:0}
.zgb-mq.run span{animation:zgbmq var(--d,8s) linear infinite}
@keyframes zgbmq{0%,12%{transform:translateX(0)}100%{transform:translateX(var(--x,-100px))}}
.zgb-game{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75;height:11px}
.zgb-eq{display:flex;align-items:flex-end;gap:2px;height:14px;margin:4px 0 3px}
.zgb-eq i{flex:1;height:2px;background:currentColor;opacity:.8}
.zgb-on .zgb-eq i{animation:zgbeq .8s steps(4) infinite}
.zgb-eq i:nth-child(2n){animation-delay:.2s!important}.zgb-eq i:nth-child(3n){animation-delay:.35s!important}.zgb-eq i:nth-child(5n){animation-delay:.5s!important}
@keyframes zgbeq{0%,100%{height:2px}50%{height:14px}}
.zgb-vol{display:flex;gap:1px;align-items:center}.zgb-vol i{width:4px;height:5px;border:1px solid currentColor;box-sizing:border-box}.zgb-vol i.f{background:currentColor}
.zgb-page{display:none}.zgb-page.on{display:block}
.zgb-list{margin:3px 0 0;padding:0;list-style:none}.zgb-list li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}

/* controls */
.zgb button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.zgb-dpad{position:absolute;left:18px;top:40px;width:54px;height:54px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.4))}
.zgb-dpad button{position:absolute;width:18px;height:18px;border:0;padding:0;background:var(--gb-pad)}
.zgb-dpad button:active{filter:brightness(.7)}
.zgb-dpad .u{left:18px;top:0;border-radius:3px 3px 0 0}.zgb-dpad .d{left:18px;top:36px;border-radius:0 0 3px 3px}
.zgb-dpad .l{left:0;top:18px;border-radius:3px 0 0 3px}.zgb-dpad .r{left:36px;top:18px;border-radius:0 3px 3px 0}
.zgb-dpad:after{content:"";position:absolute;left:18px;top:18px;width:18px;height:18px;background:var(--gb-pad);pointer-events:none}
.zgb-dpad button:after{content:"";position:absolute;left:6px;top:6px;border:3px solid transparent;opacity:.8}
.zgb-dpad .u:after{border-bottom-color:var(--gb-pad-arrow);top:3px}.zgb-dpad .d:after{border-top-color:var(--gb-pad-arrow);top:8px}
.zgb-dpad .l:after{border-right-color:var(--gb-pad-arrow);left:3px}.zgb-dpad .r:after{border-left-color:var(--gb-pad-arrow);left:8px}
.zgb-ab{position:absolute;right:13px;top:34px;width:58px;height:56px}
.zgb-ab button{position:absolute;width:27px;height:27px;border-radius:50%;border:0;padding:0;background:radial-gradient(circle at 40% 35%,var(--gb-btn1),var(--gb-btn2));
  box-shadow:0 2px 0 var(--gb-btn-edge),inset 0 -2px 0 rgba(0,0,0,.2);color:var(--gb-btn-text);font-size:8px}
.zgb-ab button:active{transform:translateY(2px);box-shadow:0 0 0 var(--gb-btn-edge)}
.zgb-ab .a{right:0;top:0}.zgb-ab .b{left:0;top:22px}
.zgb-ss{position:absolute;right:16px;bottom:12px;display:flex;gap:8px}
.zgb-ss div{display:flex;flex-direction:column;align-items:center;gap:4px}
.zgb-ss button{width:28px;height:8px;border-radius:4px;border:0;padding:0;background:var(--gb-ss);box-shadow:inset 0 0 0 1px var(--gb-ss-edge),0 1px 0 rgba(0,0,0,.3)}
.zgb-ss button:active{transform:translateY(1px)}
.zgb-ss span{font:700 7px/1 Arial,sans-serif;letter-spacing:.06em;color:var(--gb-ss-text)}
.zgb-grill{position:absolute;left:24px;bottom:18px;display:grid;grid-template-columns:repeat(6,4px);gap:3px}
.zgb-grill i{width:4px;height:4px;border-radius:50%;background:var(--gb-grill)}
/* hover labels */
.zgb-tip{position:absolute;z-index:6;transform:translate(-50%,calc(-100% - 7px));padding:4px 8px;border-radius:6px;background:rgba(10,12,16,.92);color:#f4efe0;
  font:600 11px/1.2 Inter,Arial,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.zgb-tip:after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-bottom:0;border-top-color:rgba(10,12,16,.92)}
.zgb-tip.on{opacity:1}

@media (max-width:420px){.zgb{right:50%;transform-origin:50% calc(100% + 38px);margin-right:-159px}}
@media (prefers-reduced-motion:reduce){.zgb,.zgb-tri{animation:none!important;transition:none!important}}
/* the interactive maps keep their zoom buttons in the bottom-right corner */
body:has(.zx-mapapp) .zgb-fab{right:62px;bottom:10px}body:has(.zx-mapapp) .zgb{right:62px;bottom:76px}