/* Band Arcade — shared look. Every page loads fonts.css + this file, then its own style.css.
   One committed dark theme: a 1980s arcade floor lit by neon pink, cyan and yellow.
   Every color lives in the tokens below. Change them here and every game follows. */
:root{
  color-scheme:dark;
  /* arcade floor (backgrounds, darkest to lightest) */
  --floor:#0b0716; --floor-2:#161029; --floor-3:#221a3d; --deep:#06040d;
  --floor-lit:#2a2340; --bezel:#2e2650; --led-off:#4a3f6b;   /* lit button, screen bezel, unlit arcade button */
  /* neon lights: titles, borders, glows, short labels. Not for long text. */
  --pink:#ff4fb3; --pink-hi:#ff9ad4; --pink-ink:#c4006e;
  --cyan:#3ae8ff; --cyan-hi:#a6f5ff; --cyan-ink:#007e9c;
  --yellow:#ffe14d; --yellow-hi:#fff2a8; --yellow-ink:#c9a400;
  --red:#ff6b6b; --red-ink:#d0503f;
  /* extra neon tubes for the arcade-floor cabinets */
  --purple:#b86bff; --purple-hi:#dcb8ff; --purple-ink:#7a2fd0;
  --amber:#ffab2e; --amber-hi:#ffd699; --amber-ink:#b86e00;
  --green:#4dff88; --green-hi:#b3ffcc; --green-ink:#00a347;
  --red-hi:#ffb3b3;                                              /* red neon (with --red, --red-ink above) */
  --white:#f4f0ff; --white-hi:#ffffff; --white-ink:#b9b0d6;      /* white neon tube */
  --blue:#4d8dff; --blue-hi:#b8d0ff; --blue-ink:#1f55c9;         /* blue neon tube (Button Masher's player side) */
  /* Note Ninja: belt colors (named in note-ninja/levels.js) and the dojo */
  --belt-white:#f4f1e6; --belt-yellow:#ffd23a; --belt-orange:#ff8a2a; --belt-green:#3fcf6a;
  --belt-blue:#3a7bff; --belt-purple:#a26bff; --belt-red:#e0343f; --belt-brown:#8b5a33; --belt-black:#16121d;
  --belt-diamond:#e6f7ff; --belt-diamond-2:#9fdcff;                /* white with an ice-blue glint */
  --dojo-wood:#2a1a14; --dojo-wood-2:#3a2419; --dojo-paper:#fff4dc; --dojo-paper-dim:#e8d3a8;
  --ninja-gi:#f4f1e6; --ninja-skin:#e8b894; --ninja-hair:#2b1d16; --ninja-band:#e0343f;
  /* Chime Heist: the steel vault, the metal bars of the chime lock, the security terminal, treasure */
  --steel:#1a1d26; --steel-2:#262b38; --steel-3:#3a4152; --rivet:#5a6378;
  --bar-metal:#c9ced8; --bar-metal-2:#8d94a3; --bar-metal-hi:#f2f5fa; --bar-ink:#1b2130;
  --term:#07130d; --term-line:rgba(77,255,136,.18); --treasure-brown:#b07a4a;
  /* Ancient Ninja Scrolls: the mountain temple library at night, its scrolls, and the Sensei */
  --dd-night:#0c0818; --dd-wood:#3a2317; --dd-wood-2:#4a2e1d; --dd-wood-line:#23140c; --dd-paper:#ffd9a0; --dd-lantern:#ff7a3a;   /* Dojo Duel */
  --temple-sky:#0d0a24; --temple-stone:#262235; --temple-stone-2:#34304a; --temple-wood:#3b2419; --temple-mist:rgba(196,186,255,.10);
  --scroll-paper:#fbf1d6; --scroll-paper-2:#ecdcb0; --scroll-rod:#6b3f22; --scroll-seal:#c43a3a;
  --sensei-robe:#2e3170; --sensei-robe-2:#474c9e; --sensei-hair:#efebf7;
  /* Button Masher: the versus arena, the fighter, the fingering keys */
  --arena:#120a26; --arena-grid:rgba(77,141,255,.16);
  --fighter-skin:#e8b894; --fighter-hair:#2b1d16; --fighter-pants:#2e3170; --fighter-shoe:#f4f0ff;
  --key-open:#0e0a1c; --key-rim:#a6f5ff; --key-on:#ffe14d; --key-glow:#4dff88;
  /* instrument portraits (shared/portraits.js): each instrument's signature neon */
  --pt-flute:#e3f6ff; --pt-oboe:#c58bff; --pt-clarinet:#5aa9ff; --pt-basscl:#3ee0b0; --pt-bassoon:#ff9d5c;
  --pt-altosax:#ffd23f; --pt-tenorsax:#ff7ac8; --pt-barisax:#ff5c7a; --pt-trumpet:#fff27a; --pt-horn:#ffb13b;
  --pt-cpu:#b9b0d6; --pt-trombone:#ff7043; --pt-baritonetc:#7dffb0; --pt-euphbc:#c6ff4d; --pt-tuba:#a98bff; --pt-bells:#4de8ff; --pt-snare:#ff6b8b;
  /* Showtime Malfunction: the animatronic house band (worn felt, metal, glowing eyes) and the after-hours arcade */
  --anim-walrus:#7f6f63; --anim-walrus-2:#b9a48c; --anim-owl:#80543a; --anim-owl-2:#d9bf92; --anim-gator:#3e7d47; --anim-gator-2:#9fbe68;
  --anim-raccoon:#6f727e; --anim-raccoon-2:#cfcfd6; --anim-moose:#6e4428; --anim-moose-2:#b08457; --anim-clone:#4f6e5e;
  --anim-metal:#8c95a6; --anim-metal-dark:#4a5060; --anim-tusk:#efe6d2; --anim-coat:#231d3a; --anim-brass:#d9a834; --anim-silver:#c9d2de;
  /* Lost Signal: the radio console (the scope's screen, grid, waveform, radar pings and sweep; static is --ls-static*) */
  --ls-scope:#03110d; --ls-grid:rgba(77,255,136,.22); --ls-wave:#4dff88; --ls-ping:#3ae8ff; --ls-sweep:rgba(58,232,255,.28);
  --ls-panel:#0a1a1f; --ls-static:#5d6b73; --ls-static-2:#27323a;
  /* Vanishing Ink: the Ink Master's parchment scroll (paper, its edge, the rods), black brush ink, the red seal, and the
     Ink Master himself (a friendly old octopus) */
  --vi-paper:#f7ecd2; --vi-paper-2:#e6d3a6; --vi-paper-edge:#b9985c; --vi-rod:#5b3520; --vi-rod-cap:#241509;
  --vi-ink:#0f0c0a; --vi-ink-2:#3b332b; --vi-seal:#c43a3a; --vi-glow:#ff4fb3;
  --vi-master:#7d68d9; --vi-master-2:#a996f0; --vi-master-ink:#3a2a7a; --vi-brow:#f4f0ff; --vi-band:#16121d;
  /* Arcade Quest: the 8-bit palette (sprites.js palettes name these tokens) */
  /* AVATARS (shared/avatar-parts.js): every color a Create Your Player choice can use */
  --av-skin-1:#fde4d0; --av-skin-1-d:#efc4a8; --av-skin-2:#f7d3b4; --av-skin-2-d:#e5b08e; --av-skin-3:#f0c29c; --av-skin-3-d:#dca079; --av-skin-4:#e8b387; --av-skin-4-d:#cf9163; --av-skin-5:#dba06f; --av-skin-5-d:#bf8150; --av-skin-6:#cd8f5d; --av-skin-6-d:#ad7042;
  --av-skin-7:#bb7c4c; --av-skin-7-d:#9a6037; --av-skin-8:#a5683d; --av-skin-8-d:#84502c; --av-skin-9:#8e5634; --av-skin-9-d:#6f4025; --av-skin-10:#76452a; --av-skin-10-d:#5a331e; --av-skin-11:#5f3722; --av-skin-11-d:#462817; --av-skin-12:#482a1a; --av-skin-12-d:#331d11;
  --av-hair-black:#1f1c26; --av-hair-black-d:#0f0d14; --av-hair-black-l:#3d3947; --av-hair-darkbrown:#3d281b; --av-hair-darkbrown-d:#27190f; --av-hair-darkbrown-l:#5c3e2b; --av-hair-brown:#6e4527; --av-hair-brown-d:#4f2f18; --av-hair-brown-l:#935f38;
  --av-hair-auburn:#8f3b1f; --av-hair-auburn-d:#66260f; --av-hair-auburn-l:#b4582f; --av-hair-copper:#c75b21; --av-hair-copper-d:#963f12; --av-hair-copper-l:#e67f40; --av-hair-blonde:#e3bc5c; --av-hair-blonde-d:#b8913a; --av-hair-blonde-l:#f5dc90;
  --av-hair-platinum:#efe5c6; --av-hair-platinum-d:#c9bb95; --av-hair-platinum-l:#fffbec; --av-hair-gray:#9d9ca6; --av-hair-gray-d:#77767f; --av-hair-gray-l:#c6c5cd; --av-hair-white:#ecebf2; --av-hair-white-d:#bdbdc8; --av-hair-white-l:#ffffff;
  --av-hair-pink:#ff62b0; --av-hair-pink-d:#d03b86; --av-hair-pink-l:#ff9fd2; --av-hair-purple:#9d5eff; --av-hair-purple-d:#7137d6; --av-hair-purple-l:#c29dff; --av-hair-blue:#4290ff; --av-hair-blue-d:#2463cf; --av-hair-blue-l:#88b9ff;
  --av-hair-teal:#24c9ba; --av-hair-teal-d:#11978a; --av-hair-teal-l:#70e7dc; --av-hair-green:#44d05e; --av-hair-green-d:#27a33f; --av-hair-green-l:#8aeb9a; --av-hair-orange:#ff8c2c; --av-hair-orange-d:#d6661a; --av-hair-orange-l:#ffb572;
  --av-hair-gold:#f5c542; --av-hair-gold-d:#c9951f; --av-hair-gold-l:#fff1b0; --av-hair-neon:#3dffa0; --av-hair-neon-d:#12b86a; --av-hair-neon-l:#c4ffe4;
  --av-hair-cherry:#ff3b4e; --av-hair-cherry-d:#c81f33; --av-hair-cherry-l:#ff8a96; --av-hair-lavender:#b99cff; --av-hair-lavender-d:#8a6ad8; --av-hair-lavender-l:#ddd0ff;
  --av-hair-sky:#6cc4ff; --av-hair-sky-d:#3f94d6; --av-hair-sky-l:#b8e4ff; --av-hair-mint:#5fe3b1; --av-hair-mint-d:#2fb385; --av-hair-mint-l:#b3f5dc;
  --av-hair-sunny:#ffdf3b; --av-hair-sunny-d:#d6ad16; --av-hair-sunny-l:#fff3a8; --av-hair-magenta:#e0319d; --av-hair-magenta-d:#a8166f; --av-hair-magenta-l:#ff85cc;
  --av-hair-galaxy:#4b2a8f; --av-hair-galaxy-d:#241552; --av-hair-galaxy-l:#ff9bf0; --av-hair-flametip:#e2402a; --av-hair-flametip-d:#9e2415; --av-hair-flametip-l:#ffd23f;
  --av-eye-darkbrown:#2d1b10; --av-eye-brown:#5c361c; --av-eye-hazel:#7c6a28; --av-eye-green:#2e7c46; --av-eye-blue:#2f70c6; --av-eye-gray:#6f7c8c; --av-eye-amber:#a9681c;
  --av-red:#e8394f; --av-red-d:#b3243a; --av-orange:#ff8a2a; --av-orange-d:#cf661a; --av-yellow:#ffd23f; --av-yellow-d:#cfa626; --av-green:#35c46a; --av-green-d:#23954d;
  --av-teal:#1fb5ad; --av-teal-d:#13857f; --av-blue:#3b7bff; --av-blue-d:#2556c4; --av-navy:#2b3872; --av-navy-d:#1b244d; --av-purple:#8a4dff; --av-purple-d:#6431c7;
  --av-pink:#ff5fae; --av-pink-d:#d13b87; --av-maroon:#80233b; --av-maroon-d:#5a1426; --av-forest:#2f6b3a; --av-forest-d:#1f4a27; --av-black:#26242e; --av-black-d:#15131a;
  --av-gray:#8c8c99; --av-gray-d:#696976; --av-white:#eeeef4; --av-white-d:#c3c3cf; --av-denim:#3e609f; --av-denim-d:#2c4676; --av-khaki:#bba16d; --av-khaki-d:#957f51;
  --av-tan:#c9925a; --av-tan-d:#a4723f;
  --av-lavender:#b59bff; --av-lavender-d:#8a6ad8; --av-mint:#62e0b0; --av-mint-d:#33ae83; --av-coral:#ff7a66; --av-coral-d:#d4533f; --av-mustard:#dcae2a; --av-mustard-d:#ab8414;
  --av-cream:#f3e7c9; --av-cream-d:#cdbd97; --av-brown:#7a4a2a; --av-brown-d:#58331b; --av-sky:#7cc6ff; --av-sky-d:#4b98d6; --av-olive:#7a8a3a; --av-olive-d:#58652a;
  --av-gold:#ffcf3f; --av-gold-d:#c9951f; --av-white:#fbf8ff; --av-black:#1b1922; --av-out:#140f1f; --av-lens:#bfe9ff; --av-mouth:#5a1f2c; --av-tongue:#ff7a8e; --av-teeth:#ffffff; --av-tire:#2a2733; --av-rim:#b8c2d6; --av-aid:#d9b99a;
  --q-skin-1:#f6d2b0; --q-skin-2:#e0a878; --q-skin-3:#b0744a; --q-skin-4:#6e4630; --q-hair:#2e1f18; --q-hair-2:#6b3d22;
  --q-out:#140f1f; --q-pants:#2f3c78; --q-shoe:#1d1628; --q-white:#fbf8ff; --q-black:#161222;
  --q-brass:#f0c040; --q-brass-d:#a87a1c; --q-silver:#d8e0ec; --q-silver-d:#7f8ca6; --q-wood:#5b3a24; --q-wood-l:#9a6238; --q-reed:#e8d59a;
  --q-drum:#d8404c; --q-head:#f2ead6; --q-bar-1:#ff5a6a; --q-bar-2:#ff9a3c; --q-bar-3:#ffd84a; --q-bar-4:#6ad46a; --q-bar-5:#4aa8ff; --q-bar-6:#9b6cff;
  --q-green:#76d66a; --q-green-d:#2e7a3a; --q-sour:#c4e84a; --q-sour-d:#6f8c1c; --q-purple:#9d74ff; --q-purple-d:#4f3597; --q-orange:#ff9a3c;
  --q-orange-d:#a8541a; --q-blue:#58b4ff; --q-blue-d:#24578f; --q-grey:#8f93a8; --q-grey-d:#4d5064; --q-paper:#f1e8cc; --q-paper-d:#b9a877;
  --q-red:#ff5a6a; --q-pink:#ff7ec8; --q-cursor:#7ff6ff; --q-gold:#ffe066; --q-floor:#1d1830; --q-floor-2:#2a2342;
  /* Arcade Quest, Ghost Notes Manor: walls, floors, furniture, ghosts, candlelight, fog */
  --q-wall:#3b2a5c; --q-wall-d:#271c40; --q-wall-l:#5a4488; --q-trim:#8a6a3a; --q-trim-d:#553f1f; --q-void:#0c0914;
  --q-plank:#6b4a2e; --q-plank-d:#4a321f; --q-plank-l:#8a6340; --q-carpet:#8c2a44; --q-carpet-d:#5e1a2e; --q-carpet-l:#c2465e;
  --q-tile-a:#d9d2c3; --q-tile-b:#8f8aa3; --q-rug:#43307a; --q-rug-l:#6d52b8; --q-glass:#1b2a5a; --q-moon:#e8f0ff;
  --q-ghost:#e9f1ff; --q-ghost-d:#a9b8e6; --q-ghost-2:#d9ccff; --q-cheek:#ff9ec4; --q-flame:#ffcf4a; --q-flame-d:#ff7a2a;
  --q-fog:#c8c6e8; --q-book-1:#b8433b; --q-book-2:#3f6fb3; --q-book-3:#3f9a5a; --q-book-4:#d6a441; --q-steel:#9aa3b8; --q-steel-d:#5c647a;
  --q-jelly:#7fe0c2; --q-jelly-d:#3a9e84; --q-tea:#f4f0e6; --q-tea-d:#bdb3a0; --q-wisp:#8fe8ff; --q-wisp-d:#3fa7d6;
  /* Sustain Speedway: the synthwave racetrack (canvas colors are read from these) */
  --sw-sky-top:#0c0420; --sw-sky-mid:#3a0b55; --sw-sky-low:#ff5a7a; --sw-dusk-low:#b0348c; --sw-night-low:#2a1060;
  --sw-sun-1:#ffd166; --sw-sun-2:#ff3fa4; --sw-moon:#e8e2ff; --sw-star:#fff4d8;
  --sw-ground:#0a0314; --sw-grid:#ff3fa4; --sw-road:#150b26; --sw-road-2:#1d1133; --sw-lane:#f4ecff;
  --sw-far:#1b0a31; --sw-near:#28104a; --sw-window:#ffcf5a; --sw-water:#0d2346; --sw-tunnel:#040209;
  --sw-tail:#ff2a55; --sw-glass:#23305e; --sw-tire:#07050c; --sw-nitro:#5ef0ff;
  --anim-chrome:#d9e1ec; --anim-crack:#262b36; --anim-emergency:#ff2a2a;
  --anim-eye-bad:#ff3d3d; --anim-eye-good:#52c8ff; --anim-drum:#b8322f; --anim-drumhead:#ece6d6;
  --stage-wood:#3a2418; --stage-curtain:#5a1830; --fluoro:#dff7ff;
  /* text on the floor (all pass WCAG AA on --floor-3 and darker) */
  --text-hi:#f6f2ff; --text-lo:#c3bbe0; --text-dim:#9990bd;
  /* the lit staff "screen": light glass, dark notation */
  --screen:#f4f1e6; --screen-2:#dedacb; --ink:#18203a; --ink-2:#4b5570;
  --line:rgba(195,187,224,.2);
  /* glows: box-/text-shadow only (no blur filters, cheap on iPads and Chromebooks) */
  --glow-pink:0 0 4px rgba(255,79,179,.9),0 0 14px rgba(255,79,179,.45);
  --glow-cyan:0 0 4px rgba(58,232,255,.9),0 0 14px rgba(58,232,255,.4);
  --glow-yellow:0 0 4px rgba(255,225,77,.9),0 0 14px rgba(255,225,77,.4);
  --glow-purple:0 0 4px rgba(184,107,255,.9),0 0 14px rgba(184,107,255,.45);
  --glow-amber:0 0 4px rgba(255,171,46,.9),0 0 14px rgba(255,171,46,.4);
  --glow-green:0 0 4px rgba(77,255,136,.9),0 0 14px rgba(77,255,136,.4);
  --glow-red:0 0 4px rgba(255,107,107,.9),0 0 14px rgba(255,80,80,.45);
  --glow-white:0 0 4px rgba(255,255,255,.9),0 0 14px rgba(230,225,255,.4);
  --glow-blue:0 0 4px rgba(77,141,255,.9),0 0 14px rgba(77,141,255,.45);
  /* cabinet woodwork: side panels, front face, control panel (darkest to lightest) */
  --cab-side:#120c22; --cab-face:#1b1433; --cab-panel:#2a2148; --cab-metal:#6d6590;

  /* older names, kept so every game's style.css follows the theme */
  --night:var(--floor); --night-2:var(--floor-2); --night-3:var(--floor-3);
  --gold:var(--yellow); --gold-hi:var(--yellow-hi); --gold-ink:#c98a12;
  --bone:var(--text-hi); --bone-2:var(--screen-2);
  --mist:var(--text-lo); --mist-2:var(--text-dim); --coral:var(--red); --coral-ink:var(--red-ink);

  --display:"GN Display","Arial Black",Impact,sans-serif;
  --neon-font:"GN Neon",var(--display);     /* arcade sign (home page only) */
  --text:"GN Text","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --music:"GN Music","Noto Music",serif;
  --r:18px;
}
*{box-sizing:border-box}
html{background:var(--floor)}
body{min-height:100vh;min-height:100dvh}
body{
  margin:0;font-family:var(--text);font-size:17px;line-height:1.5;color:var(--text-hi);
  background:
    radial-gradient(800px 420px at 12% -10%, rgba(255,79,179,.16), transparent 70%),
    radial-gradient(800px 460px at 95% 0%, rgba(58,232,255,.12), transparent 70%),
    radial-gradient(900px 400px at 50% 115%, rgba(255,225,77,.07), transparent 70%),
    var(--floor);
  background-repeat:no-repeat;
  -webkit-tap-highlight-color:transparent;
}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow-hi);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
.wrap{max-width:860px;margin:0 auto;padding-inline:max(16px, env(safe-area-inset-left,0px));padding-block:calc(18px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-bottom,0px))}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin:0 0 10px}
.muted{color:var(--text-lo)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;min-height:44px}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-hi);background:var(--deep);border:2px solid var(--pink);border-radius:10px;padding:8px 14px;min-height:44px;text-decoration:none;box-shadow:var(--glow-pink);transition:background .12s, color .12s}
.brand:hover{background:var(--pink);color:var(--deep)}
.brand:active{transform:translateY(1px)}
.topbar-right{display:flex;gap:8px;align-items:center;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-lo);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 6px;min-height:34px;background:rgba(6,4,13,.5);white-space:nowrap;overflow:hidden;max-width:42vw;text-decoration:none}
.chip-name{overflow:hidden;text-overflow:ellipsis}
.chip-pic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--deep);display:grid;place-items:center}
.chip-pic .pt-box{width:24px;height:24px}

/* ---------- portraits (shared/portraits.js): the artwork over its drawn SVG fallback ----------
   The box is square; the image keeps its transparent background and fits inside it (object-fit: contain),
   centered, never stretched or cropped. Until the image has loaded (.pt-ok) only the SVG shows. */
.pt-box{position:relative;isolation:isolate;display:inline-grid;grid-template:100% / 100%;place-items:center;width:100%;aspect-ratio:1;min-height:0;vertical-align:middle}
.pt-box>svg.portrait,.pt-box>.pt-img,.pt-box>.pt-pix{grid-area:1/1;width:100%;height:100%;min-width:0;min-height:0;display:block;position:relative;z-index:2}
.pt-box>.pt-img{object-fit:contain;object-position:center;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}
.pt-box.pt-ok>.pt-img{opacity:1}
.pt-box.pt-ok>svg.portrait{visibility:hidden}

/* ---------- Skins (shared/skins.js) on a portrait ----------
   Layers, bottom to top: .sk-back (backdrop / aura / pixel frame), the Cape, the picture (or the SVG fallback,
   recolored), .sk-fx (sparkles, sweep, shimmer), the accessory. Effects apply to Mat's pictures only: with the SVG
   fallback (no .pt-ok) the skin is just the recolor, and a drawn variant picture (.pt-var-c) replaces the effects.
   Animation: ONLY on the big portrait (.pt-box-big) and never under reduced motion. --sk1/--sk2 = the skin's colors. */
.sk-back,.sk-fx{position:absolute;inset:0;pointer-events:none;display:none}
.sk-back{z-index:0}.sk-fx{z-index:3}
.pt-ok:not(.pt-var-c)>.sk-back,.pt-ok:not(.pt-var-c)>.sk-fx{display:block}
/* rim light: follows the outline of the art */
.pt-ok.sk-rim:not(.pt-var-c):not(.sk-pixel)>.pt-img{filter:drop-shadow(0 0 1.5px var(--sk1)) drop-shadow(0 0 5px var(--sk2))}
.pt-box-chip.pt-ok.sk-rim:not(.pt-var-c)>.pt-img{filter:drop-shadow(0 0 1px var(--sk1))}
/* Sunset Wave: a synthwave sun sliced by stripes, on a horizon */
.sk-bg-horizon>.sk-back{border-radius:12%;overflow:hidden;
  background:linear-gradient(to bottom,transparent 58%,color-mix(in srgb,var(--pink) 55%,transparent) 60%,transparent 61%),
    repeating-linear-gradient(to bottom,transparent 0 5%,color-mix(in srgb,var(--pink) 22%,transparent) 5% 5.8%) 0 100%/100% 38% no-repeat,
    radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--pink) 30%,transparent),transparent 65%)}
.sk-bg-horizon>.sk-back::before{content:"";position:absolute;left:22%;right:22%;top:14%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(var(--yellow),var(--amber) 45%,var(--pink));opacity:.75;
  -webkit-mask:linear-gradient(#000 48%,transparent 48% 53%,#000 53% 62%,transparent 62% 68%,#000 68% 75%,transparent 75%);
  mask:linear-gradient(#000 48%,transparent 48% 53%,#000 53% 62%,transparent 62% 68%,#000 68% 75%,transparent 75%)}
/* Galaxy: stars and a purple nebula */
.sk-bg-galaxy>.sk-back{border-radius:12%;
  background:radial-gradient(circle,var(--white-hi) 0 .6px,transparent 1.2px) 3px 5px/19px 17px,
    radial-gradient(circle,var(--cyan-hi) 0 .7px,transparent 1.3px) 11px 2px/31px 27px,
    radial-gradient(circle,var(--white) 0 1px,transparent 1.6px) 7px 13px/43px 37px,
    radial-gradient(ellipse at 30% 35%,color-mix(in srgb,var(--purple) 55%,transparent),transparent 55%),
    radial-gradient(ellipse at 72% 70%,color-mix(in srgb,var(--pink) 40%,transparent),transparent 55%),
    radial-gradient(circle,color-mix(in srgb,var(--purple-ink) 50%,transparent),transparent 72%)}
/* Flame: fire tongues around the instrument (the SVG is in skins.js) */
.sk-aura-flame>.sk-back{background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--amber) 45%,transparent),transparent 62%)}
.sk-aura{position:absolute;left:-4%;top:0;width:108%;height:102%;opacity:.62}
.sk-tongue{transform-box:fill-box;transform-origin:50% 100%}
/* sparkles (Ice Crystal) */
.sk-sparks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sk-spark{fill:var(--white-hi)}
.sk-sparks g:nth-child(odd) .sk-spark{fill:var(--sk1)}
.pt-box-chip .sk-sparks{display:none}
/* Chrome Gold sweep and Diamond shimmer: painted only on the art (masked by the picture itself) */
.sk-fx-sweep>.sk-fx,.sk-fx-shimmer>.sk-fx{-webkit-mask:var(--sk-src) center/contain no-repeat;mask:var(--sk-src) center/contain no-repeat}
.sk-fx-sweep>.sk-fx{background:linear-gradient(110deg,transparent 38%,color-mix(in srgb,var(--white-hi) 70%,transparent) 48%,color-mix(in srgb,var(--yellow) 40%,transparent) 52%,transparent 62%) 0 0/250% 100%;background-position:60% 0}
.sk-fx-shimmer>.sk-fx{background:linear-gradient(120deg,var(--pink),var(--yellow),var(--green),var(--cyan),var(--purple),var(--pink)) 0 0/300% 300%;mix-blend-mode:color;opacity:.55}
.sk-fx-shimmer>.sk-fx::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 26% 30%,var(--white-hi) 0 1.5%,transparent 3%),radial-gradient(circle at 70% 58%,var(--white-hi) 0 1.2%,transparent 2.6%),radial-gradient(circle at 44% 78%,var(--white-hi) 0 1%,transparent 2.2%)}
/* Racing Stripes: two stripes down the art (masked by the picture itself) */
.sk-fx-stripes>.sk-fx{-webkit-mask:var(--sk-src) center/contain no-repeat;mask:var(--sk-src) center/contain no-repeat;
  background:linear-gradient(90deg,transparent 38%,color-mix(in srgb,var(--white-hi) 75%,transparent) 38% 45%,transparent 45% 55%,color-mix(in srgb,var(--white-hi) 75%,transparent) 55% 62%,transparent 62%)}
/* Animatronic: a brushed-metal sheen on the art (masked by the picture), four bolts, glowing eyes on its face */
.sk-fx-animatronic>.sk-fx{-webkit-mask:var(--sk-src) center/contain no-repeat;mask:var(--sk-src) center/contain no-repeat;
  background:repeating-linear-gradient(100deg,transparent 0 6%,color-mix(in srgb,var(--white-hi) 22%,transparent) 6% 7%),linear-gradient(120deg,transparent 30%,color-mix(in srgb,var(--white-hi) 45%,transparent) 48%,transparent 60%) 0 0/250% 100%;
  background-position:0 0,60% 0;mix-blend-mode:screen}
.sk-bolts{position:absolute;inset:0;z-index:3;width:100%;height:100%;fill:var(--anim-metal);stroke:var(--anim-metal-dark);stroke-width:1;display:none}
.pt-ok:not(.pt-var-c)>.sk-bolts{display:block}
.sk-eyes{z-index:5}
/* Nightmare Animatronic: cracked chrome (masked by the picture), bolts, a few loose wires, one red eye + one blue */
.sk-fx-nightmare>.sk-fx{-webkit-mask:var(--sk-src) center/contain no-repeat;mask:var(--sk-src) center/contain no-repeat;
  background:linear-gradient(160deg,color-mix(in srgb,var(--white-hi) 40%,transparent) 0 18%,transparent 30% 55%,color-mix(in srgb,var(--anim-chrome) 45%,transparent) 64%,transparent 80%),
  repeating-linear-gradient(90deg,transparent 0 9%,color-mix(in srgb,var(--white-hi) 16%,transparent) 9% 10%);mix-blend-mode:screen}
.sk-cracks{position:absolute;inset:0;width:100%;height:100%}
.sk-cracks path{fill:none;stroke:var(--anim-crack);stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pt-box-chip .sk-cracks path{stroke-width:.8}
.pt-box-big .sk-cracks path{stroke-width:2.4}
.sk-fx-nightmare>.sk-bolts{fill:var(--anim-chrome)}
.sk-wires{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:none;fill:none;stroke-width:2.2;stroke-linecap:round}
.pt-ok:not(.pt-var-c)>.sk-wires{display:block}
.sk-wires .w1{stroke:var(--red)}.sk-wires .w2{stroke:var(--yellow)}.sk-wires .w3{stroke:var(--cyan)}
.sk-wires .wtip{fill:var(--anim-chrome);stroke:none}
.pt-box-chip .sk-wires{display:none!important}
.nm-a{fill:var(--anim-eye-bad)}.nm-b{fill:var(--anim-eye-good)}
/* Pixel: the art redrawn tiny and blown up (a canvas, portraits.js), in a chunky 8-bit frame */
.pt-box>.pt-pix{object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
/* THE AVATAR BUST (shared/avatar.js): pixel art in the same .pt-box, so every skin effect works on it too */
.av-box>.pt-img{image-rendering:pixelated;image-rendering:crisp-edges}
/* the avatar's BACKGROUND (shared/avatar-bg.js): under everything in the box (skin backdrops and effects go on top);
   a still frame as the layer's picture, and (the largest one on screen) a canvas that moves over it. The chip size
   (the top-bar badge) is only the background's main color. */
.av-box>.av-bg{position:absolute;inset:0;z-index:0;border-radius:12%;overflow:hidden;background:var(--floor-3) center/cover no-repeat;pointer-events:none}
.av-bg>.av-bg-live{position:absolute;inset:0;width:100%;height:100%;display:block}
.av-bg>.av-bg-live[hidden]{display:none}
.pt-box-chip>.av-bg{border-radius:50%}
/* EFFECTS and ANIMATED ITEMS (shared/avatar-fx.js): the effect's still pictures / live canvases behind (z 1) and in front
   (z 3) of the bust; the live box draws its bust frames in .av-live over the still picture (hidden while it plays) */
.av-box>.av-fx-still,.av-box>.av-fx,.av-box>.av-live{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.av-box>.av-fx-b{z-index:1}.av-box>.av-fx-f{z-index:3}
.av-box>.av-live{z-index:2;image-rendering:pixelated;image-rendering:crisp-edges}
.av-box>[hidden]{display:none}
.av-box.av-anim-body>.av-img{visibility:hidden}
.av-box.av-anim-fx>.av-fx-still{display:none}
.av-box.sk-pixel>.sk-back{display:block}
/* results screens: the player's avatar + name at the top (shared/avatar.js stampResults) */
.av-res{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px!important}
.av-res-pic{width:56px;flex:none}
.av-res-pic .pt-box{width:100%}
.av-res-txt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.15}
.av-res-txt{min-width:0}
.av-res-txt b{text-wrap:balance;overflow-wrap:break-word;font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.02em;color:var(--yellow)}
.av-res-txt small{font-size:13px;color:var(--text-lo)}
/* NAME PLATES (the avatar's 'plate' slot): a frame around the name on results screens, score lists and the creator */
.av-plate{display:inline-block;padding:1px 8px;border-radius:8px;border:2px solid transparent;line-height:1.25;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.av-plate-simple{border-color:var(--text-lo)}
.av-plate-gold{border-color:var(--yellow);background:linear-gradient(180deg,color-mix(in srgb,var(--yellow) 30%,transparent),color-mix(in srgb,var(--amber) 16%,transparent));box-shadow:0 0 0 1px var(--amber-ink) inset}
.av-plate-neon{border-color:var(--cyan);box-shadow:var(--glow-cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.av-plate-flames{border-color:var(--amber);background:linear-gradient(0deg,color-mix(in srgb,var(--red) 45%,transparent),color-mix(in srgb,var(--amber) 22%,transparent) 55%,transparent)}
.av-plate-notes{border-color:var(--pink)}
.av-plate-notes::before,.av-plate-notes::after{content:"♪";color:var(--pink-hi);margin:0 4px}
[class*="av-plate-belt-"]{border-width:2px 2px 2px 8px;border-color:var(--pb)}
.av-plate-belt-white{--pb:var(--belt-white)}.av-plate-belt-yellow{--pb:var(--belt-yellow)}.av-plate-belt-orange{--pb:var(--belt-orange)}.av-plate-belt-green{--pb:var(--belt-green)}
.av-plate-belt-blue{--pb:var(--belt-blue)}.av-plate-belt-purple{--pb:var(--belt-purple)}.av-plate-belt-red{--pb:var(--belt-red)}.av-plate-belt-brown{--pb:var(--belt-brown)}
.av-plate-belt-black{--pb:var(--belt-black);outline:1px solid var(--text-lo);outline-offset:-1px}.av-plate-belt-diamond{--pb:var(--belt-diamond);box-shadow:0 0 6px var(--cyan-hi)}
.pt-pixd>.pt-img{visibility:hidden}
.sk-pixel>.sk-back{inset:5%;border:4px solid var(--sk1);outline:2px solid var(--sk2);outline-offset:2px;border-radius:0}
.pt-box-big.sk-pixel>.sk-back{border-width:7px;outline-width:4px;outline-offset:4px}
.pt-box-chip.sk-pixel>.sk-back{border-width:1px;outline:0}
/* Ghostly: see-through, with a trailing glow */
.pt-ok.sk-ghost:not(.pt-var-c)>.pt-img{opacity:.55;filter:drop-shadow(0 0 3px var(--sk1)) drop-shadow(0 7px 3px color-mix(in srgb,var(--sk2) 70%,transparent))}
/* accessories: placed by Arcade.Skins.ANCHORS (percent of the square), the SVG-fallback numbers until the
   picture loads, then the picture's (or the -full picture's) */
.sk-acc{position:absolute;z-index:4;pointer-events:none;overflow:visible;height:auto;--x:var(--sx);--y:var(--sy);--w:var(--sw);--r:var(--sr);
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1% * var(--acc-k,1));transform:translate(-50%,-50%) rotate(calc(var(--r) * 1deg))}
.pt-ok>.sk-acc{--x:var(--ix);--y:var(--iy);--w:var(--iw);--r:var(--ir)}
.pt-ok.pt-full>.sk-acc{--x:var(--fx);--y:var(--fy);--w:var(--fw);--r:var(--fr)}
.sk-acc-head{transform:translate(-50%,-96%)}
.sk-acc-back{z-index:1;transform:translate(-50%,0)}
.pt-var-a>.sk-acc{display:none}                  /* a drawn accessory variant already wears it */
.pt-box-chip{--acc-k:1.5}
.sk-acc-solo{display:block;width:100%;height:auto;overflow:visible}
/* the UNLOCKED! card (results screens and Select Player's catch-up): the new skin spins in */
.sk-unlock{margin:10px auto;padding:10px 12px;max-width:520px;border-radius:16px;border:2px solid var(--yellow);background:var(--floor-2);box-shadow:var(--glow-yellow);text-align:center}
.sk-u-title{margin:0 0 6px!important;font-family:var(--display);font-size:clamp(24px,5vw,34px);letter-spacing:.06em;color:var(--yellow)!important;
  -webkit-text-stroke:1.5px var(--red-ink);text-shadow:0 3px 0 var(--red-ink),var(--glow-yellow);transform:skewX(-8deg)}
.sk-u-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sk-u-item{display:flex;flex-direction:column;align-items:center;gap:3px;width:150px}
.sk-u-pic{display:grid;place-items:center;width:96px;height:96px;border-radius:14px;background:var(--deep)}
.sk-u-pic .pt-box,.sk-u-pic .sk-acc-solo{width:84px}
.sk-u-plate{display:grid;place-items:center;min-height:70px;font-weight:700;color:var(--text-hi)}
.sk-u-name{font-family:var(--display);font-weight:400;font-size:17px;text-transform:uppercase;color:var(--text-hi)}
.sk-u-item small{font-size:12.5px;line-height:1.25;color:var(--text-lo)}
.sk-u-equip{margin-top:4px}
.sk-u-foot{margin:8px 0 0!important;font-size:14px}
.sk-swatch{display:block;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,var(--sk1),transparent 70%)}
.sk-catchup,.overlay.sk-tall{align-items:start;overflow-y:auto}
.overlay.sk-tall>.panel{margin:auto}
.panel .sk-unlock .sk-u-pic{width:80px;height:80px}.panel .sk-unlock .sk-u-pic .pt-box{width:70px}
.sk-catchup .panel{max-width:640px;width:100%;margin:auto}
@media (max-width:480px){.sk-unlock{padding:8px 6px}.sk-u-list{gap:8px 4px}.sk-u-item{width:128px}.sk-unlock .sk-u-pic,.panel .sk-unlock .sk-u-pic{width:70px;height:70px}.sk-unlock .sk-u-pic .pt-box,.panel .sk-unlock .sk-u-pic .pt-box{width:62px}.sk-u-name{font-size:15px}.sk-u-item small{font-size:11.5px}}
@media (prefers-reduced-motion:no-preference){
  .sk-u-pic{animation:sk-spin-in .9s cubic-bezier(.2,1.3,.4,1) both;animation-delay:.25s}
  .sk-u-item:nth-child(2) .sk-u-pic{animation-delay:.45s}.sk-u-item:nth-child(3) .sk-u-pic{animation-delay:.65s}
}
@keyframes sk-spin-in{0%{transform:scale(.2) rotate(-540deg);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .pt-box-big.sk-aura-flame .sk-tongue{animation:sk-flicker calc(.7s + var(--i) * .07s) ease-in-out infinite alternate}
  .pt-box-big.sk-fx-sparkle .sk-sparks g,.pt-box-big.sk-fx-pixelsparks .sk-sparks g{animation:sk-drift 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.45s)}
  .pt-box-big.sk-fx-pixelsparks .sk-sparks g{animation-timing-function:steps(4)}
  .pt-box-big.sk-fx-sweep>.sk-fx{animation:sk-sweep 2.8s ease-in-out infinite}
  .pt-box-big.sk-fx-animatronic>.sk-fx{animation:sk-sweep 3.6s ease-in-out infinite}
  .pt-box-big .nm-a{animation:nm-swap-a 2.4s steps(1) infinite}.pt-box-big .nm-b{animation:nm-swap-b 2.4s steps(1) infinite}
  .pt-box-big .sk-wires .w1{transform-origin:14% 30%;animation:nm-sway 3.2s ease-in-out infinite alternate}
  .pt-box-big.sk-fx-shimmer>.sk-fx{animation:sk-shimmer 4s linear infinite}
  .pt-box-big.sk-bg-galaxy>.sk-back{animation:sk-stars 24s linear infinite}
  .pt-box-big.sk-ghost>.pt-img,.pt-box-big.sk-ghost>.sk-acc{animation:sk-float 2.6s ease-in-out infinite}
}
@keyframes nm-swap-a{0%,46%{fill:var(--anim-eye-bad)}50%,96%{fill:var(--anim-eye-good)}}
@keyframes nm-swap-b{0%,46%{fill:var(--anim-eye-good)}50%,96%{fill:var(--anim-eye-bad)}}
@keyframes nm-sway{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
@keyframes sk-flicker{from{transform:scaleY(.86) scaleX(1.04)}to{transform:scaleY(1.08) scaleX(.96)}}
@keyframes sk-drift{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-6px);opacity:1}}
@keyframes sk-sweep{0%{background-position:100% 0}70%,100%{background-position:0 0}}
@keyframes sk-shimmer{to{background-position:300% 300%}}
@keyframes sk-stars{to{background-position:19px 22px,-31px 29px,43px -37px,0 0,0 0,0 0}}
@keyframes sk-float{50%{translate:0 -5px}}
a.chip:hover{border-color:var(--cyan);color:var(--text-hi)}

/* ---------- the sound button (every top bar; shared/sfx.js): a speaker that opens SOUND ON/OFF and two sliders ---------- */
.sound-ctl{position:relative;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.snd-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--deep);color:var(--text-lo);border:2px solid var(--floor-3)}
.snd-btn:hover{border-color:var(--cyan-ink);color:var(--text-hi)}
.snd-btn[aria-pressed="true"]{color:var(--cyan-hi);border-color:var(--cyan)}
.snd-btn.muted{opacity:.6}
.snd-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.snd-ico .spk{fill:currentColor;stroke:none}
.snd-btn[aria-pressed="true"] .x,.snd-btn[aria-pressed="false"] .waves{display:none}
.snd-open{padding:6px 10px;min-width:44px;justify-content:center}
.snd-open .snd-ico{width:22px;height:22px}
.snd-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:250px;padding:12px;border-radius:14px;background:var(--floor-2);
  border:2px solid var(--cyan);box-shadow:var(--glow-cyan),0 16px 40px rgba(0,0,0,.6);display:grid;gap:10px;text-align:left}
.snd-pop[hidden]{display:none}
.snd-toggle{justify-content:center;width:100%}
.snd-row{display:grid;grid-template-columns:78px 1fr 42px;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-hi)}
.snd-row input{width:100%;accent-color:var(--cyan);min-height:28px}
.snd-row input:disabled{opacity:.4}
.snd-row output{font-size:13px;color:var(--text-lo);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:0}
.snd-note{margin:0;font-size:12.5px;color:var(--text-lo)}
@media (max-width:420px){.snd-pop{position:fixed;left:12px;right:12px;top:64px;width:auto}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:700;font-size:17px;border:2px solid transparent;min-height:48px;text-decoration:none;transition:transform .12s, background .12s, border-color .12s}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--yellow);color:var(--deep);box-shadow:var(--glow-yellow)}
.btn-gold:hover{background:var(--yellow-hi)}
.btn-ghost{background:transparent;border-color:var(--cyan-ink);color:var(--text-hi)}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.btn-small{min-height:40px;padding:8px 16px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- ghost mascot ---------- */
.ghost .g-body{fill:var(--screen)}
.ghost .g-eye{fill:var(--floor)}
.ghost .g-text{font-family:var(--display),var(--music);font-size:26px;fill:var(--floor)}
.ghost.gold .g-body{fill:var(--yellow)}
.ghost.coral .g-body{fill:var(--red)}
.ghost.coral .g-text,.ghost.coral .g-eye{fill:#2a0f0b}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px)}}

/* ---------- staff card: a lit screen in a neon frame ---------- */
.staff{display:block;width:100%;height:auto}
.stage{position:relative;background:var(--screen);color:var(--ink);border:3px solid var(--cyan);border-radius:var(--r);padding:8px 10px 0;overflow:hidden;box-shadow:0 0 0 4px var(--deep),var(--glow-cyan),inset 0 0 0 2px rgba(255,255,255,.6)}
.stage .cap{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:700;color:var(--ink-2);padding:2px 6px 0}

/* ---------- NOTES × ORDER picker (shared/mode-picker.js), on every note-reading game's level screen ---------- */
.mp{margin:0 0 14px}
.mp-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin-bottom:10px}
.mp-lbl{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-lo);min-width:4.6em}
.mp-notes{display:grid;grid-template-columns:1.25fr repeat(4,1fr) 1.25fr;gap:8px}
.mp-note{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:78px;padding:6px 4px;border-radius:14px;
  border:2px solid var(--floor-3);background:var(--floor-2);color:var(--text-hi)}
.mp-note b{font-family:var(--display),var(--music);font-weight:400;font-size:21px;line-height:1.1}
.mp-note.wide b{font-size:17px}
.mp-note small{font-size:12px;color:var(--text-lo);line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mp-stars{font-size:13px;font-weight:700;color:var(--text-lo);font-variant-numeric:tabular-nums}
.mp-stars span{color:var(--yellow)}
.mp-note:hover{border-color:var(--yellow-ink)}
.mp-note[aria-pressed="true"]{border-color:var(--yellow);background:var(--floor-lit);box-shadow:var(--glow-yellow)}
.mp-order{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:480px}
.mp-ord{min-height:52px;padding:8px 14px;border-radius:14px;border:3px solid var(--floor-3);background:var(--floor-2);color:var(--text-lo);
  font-family:var(--display);font-size:clamp(15px,3vw,19px);letter-spacing:.06em;text-transform:uppercase}
.mp-ord:hover{border-color:var(--cyan-ink);color:var(--text-hi)}
.mp-ord[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan-hi);color:var(--deep);box-shadow:var(--glow-cyan)}
.mp-say{margin:0;padding:8px 12px;border-radius:12px;background:rgba(6,4,13,.55);border:1px solid var(--line);color:var(--text-hi);font-weight:700}
@media (max-width:760px){ .mp-notes{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){
  .mp-row{grid-template-columns:1fr;gap:6px}
  .mp-note{min-height:70px}
  .mp-order{max-width:none}
}
.playing{margin:0 0 10px;color:var(--text-lo)}
.playing b{color:var(--text-hi)}

.demo-help{font-size:14px;color:var(--text-lo);margin:8px 0 0}

/* ---------- stars ---------- */
.stars{letter-spacing:2px;font-size:16px;color:var(--text-dim)}
.stars .on{color:var(--yellow);text-shadow:0 0 6px rgba(255,225,77,.6)}

/* ---------- "hearing" pill + mic level bars ---------- */
.hear{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:rgba(6,4,13,.7);border:1px solid var(--line);border-radius:999px;padding:8px 18px;width:max-content;max-width:100%;margin:0 auto}
.hear small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-lo);font-weight:700}
.hear b{font-family:var(--display),var(--music);font-weight:400;font-size:24px;min-width:2.2ch;text-align:center}
.hear b.match{color:var(--yellow);text-shadow:var(--glow-yellow)}
.lvlbars{display:flex;gap:3px;align-items:flex-end;height:18px}
.lvlbars i{width:5px;background:var(--text-dim);border-radius:2px;opacity:.35}
.lvlbars i.on{opacity:1;background:var(--cyan)}

/* ---------- overlays (mic gate, results) ---------- */
/* Every overlay is its own scroll container: a panel taller than the screen scrolls inside it (wheel, trackpad,
   touch swipe, keys once focused), never the page behind it. Short panels stay centered (the auto margins); a tall
   one starts at the top instead of being cut off above it. */
.overlay{position:fixed;inset:0;z-index:20;display:grid;justify-items:center;align-items:start;padding:20px 16px;background:rgba(6,4,13,.88);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.overlay>*{margin-block:auto}
.overlay:focus{outline:none}
.panel{width:min(460px,100%);background:var(--floor-2);border:2px solid var(--pink);border-radius:22px;padding:26px 22px;text-align:center;box-shadow:var(--glow-pink),0 30px 80px rgba(0,0,0,.6)}
.panel h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;margin-bottom:10px;color:var(--pink-hi)}
.panel p{color:var(--text-lo);margin:0 0 12px}
.panel .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.err{color:var(--text-hi)!important;text-align:left;font-size:15px;background:rgba(255,107,107,.1);border:1px solid var(--red);border-radius:12px;padding:10px 12px}
.err ul{margin:6px 0 0;padding-left:20px}

@media (prefers-reduced-motion:reduce){
  .bob{animation:none}
}

/* ---------- BACKUP / RESTORE (shared/backup.js) ---------- */
.snd-backup{display:block;width:100%;margin-top:10px;min-height:40px;border-radius:10px;border:2px solid var(--floor-3);background:var(--deep);color:var(--text-hi);font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.snd-backup:hover,.snd-backup:focus-visible{border-color:var(--cyan);color:var(--cyan-hi)}
.bk-overlay{z-index:60;align-items:start;overflow-y:auto}
.bk-panel{max-width:560px;width:100%;margin:auto;text-align:left}
.bk-panel h2{text-align:center;font-family:var(--display);font-weight:400;color:var(--cyan)}
.bk-panel h3{margin:0 0 8px;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}
.bk-lead,.bk-tip{color:var(--text-lo);font-size:14px;line-height:1.4}
.bk-sec{margin:12px 0;padding:12px;border-radius:14px;background:var(--deep);border:1px solid var(--floor-3)}
.bk-lbl{display:block;margin:10px 0 4px;font-size:13px;font-weight:700;color:var(--text-lo)}
.bk-code,.bk-in{display:block;width:100%;box-sizing:border-box;padding:8px 10px;border-radius:10px;border:2px solid var(--floor-3);background:var(--floor);color:var(--text-hi);
  font:700 15px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;resize:vertical;word-break:break-all}
.bk-in:focus,.bk-code:focus{outline:none;border-color:var(--cyan)}
.bk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.bk-len{font-size:14px;color:var(--text-lo)}
.bk-restore{margin-top:8px}
.bk-quest{margin:12px 0 0;font-size:14px;color:var(--text-lo)}
.bk-qcode{display:inline-block;margin-top:4px;font:700 19px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--yellow);word-break:break-all}
.bk-msg{min-height:1.4em;margin:8px 0 0;font-weight:700;color:var(--text-hi)}
.bk-msg.bad{color:var(--red-hi)}.bk-msg.good{color:var(--green)}
.bk-confirm{margin-top:8px;padding:10px;border-radius:12px;border:2px solid var(--amber)}
.bk-confirm p{margin:0}

/* ---------- ENDLESS MODE (shared/endless.js: Note Storm, Note Ninja) ---------- */
.ed-tile{margin-top:14px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px 22px;align-items:start;padding:16px 18px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--floor-2),var(--deep));border:2px solid var(--pink);box-shadow:var(--glow-pink),inset 0 0 0 1px var(--cyan-ink)}
@media (max-width:700px){.ed-tile{grid-template-columns:1fr}}
.ed-tile-main{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.ed-tile-main .ed-go{grid-column:1/-1;justify-self:start;margin-top:8px}
.ed-inf{font-family:var(--display);font-size:64px;line-height:.9;color:var(--cyan);text-shadow:var(--glow-cyan)}
.ed-title{margin:0;font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-hi);text-shadow:var(--glow-pink)}
.ed-blurb{margin:4px 0 0;color:var(--text-lo);font-size:14px;line-height:1.4}
.ed-set{margin:4px 0 0;color:var(--text-hi);font-size:13px;font-weight:700}
.ed-top-h{margin:0 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-lo);font-weight:700}
.ed-empty{margin:0;color:var(--text-lo);font-size:14px}
.ed-top{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.ed-top li{display:grid;grid-template-columns:1.6em minmax(0,1fr) auto auto;gap:8px;align-items:baseline;padding:4px 8px;border-radius:8px;background:var(--floor-3);font-size:14px;color:var(--text-hi)}
.ed-top li.me{outline:2px solid var(--yellow);background:var(--floor-2)}
.ed-rank{font-family:var(--display);color:var(--cyan)}
.ed-top li:first-child .ed-rank{color:var(--yellow)}
.ed-name{overflow-wrap:break-word;text-wrap:balance}
.ed-score{font-weight:700}
.ed-date{color:var(--text-lo);font-size:12px}
.ed-hearts{letter-spacing:2px;color:var(--text-dim)}
.ed-hearts span{opacity:.35}
.ed-hearts .on{opacity:1;color:var(--pink);text-shadow:var(--glow-pink)}
/* SPEED UP!: one gentle fade in and out (1.2 s), part of the screen only: never a strobe */
.ed-flash{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:5;pointer-events:none;opacity:0;white-space:nowrap;
  font-family:var(--display);font-size:clamp(18px,3.4vw,28px);letter-spacing:.06em;color:var(--yellow);text-shadow:0 2px 0 var(--deep),var(--glow-yellow)}
.ed-flash.go{animation:ed-flash 1.2s ease-out}
@keyframes ed-flash{0%{opacity:0;transform:translate(-50%,6px)}18%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){@keyframes ed-flash{0%,100%{opacity:0}10%,80%{opacity:1}}}
.ed-over .panel{text-align:center}
.ed-kicker{margin:0;font-family:var(--display);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.ed-over h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.04em}
.ed-new{margin:0 0 10px;font-family:var(--display);font-size:18px;color:var(--cyan-hi)}
.ed-new.top{font-size:24px;color:var(--yellow);text-shadow:var(--glow-yellow)}
@media (prefers-reduced-motion:no-preference){.ed-new.top{animation:bob 1.6s ease-in-out infinite}}
.ed-demo{margin:8px 0 0;font-weight:700;color:var(--amber)}
.ed-over .ed-top-h{margin-top:14px}
.ed-over .ed-list{text-align:left;max-width:440px;margin:0 auto}

/* ---------- THE SENSEI (Arcade.senseiSVG, shared/ui.js: Ancient Ninja Scrolls, Dojo Duel) ---------- */
.ss-robe{fill:var(--sensei-robe)} .ss-robe2{fill:var(--sensei-robe-2)} .ss-sleeve{fill:var(--sensei-robe-2)}
.ss-skin{fill:var(--ninja-skin)} .ss-hair{fill:var(--sensei-hair)} .ss-tie{fill:var(--scroll-seal)}
.ss-ink{fill:var(--ink)} .ss-mouth{fill:var(--ink)}
.ss-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.ss-brow{fill:none;stroke:var(--sensei-hair);stroke-width:4;stroke-linecap:round}
.ss-glass{fill:rgba(255,255,255,.18);stroke:var(--ink);stroke-width:1.8}
.ss-scroll{fill:var(--scroll-paper)} .ss-rod{fill:var(--scroll-rod)}

/* ---------- THE ANSWER PAD (shared/answer-pad.js: Note Ninja's layout, used by Dojo Duel) ----------
   --pad = the pad's neon color (a token); big thumb-sized buttons in one row */
.apad{--pad:var(--red);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.apad button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.apad-accs{display:flex;justify-content:center;gap:10px;margin-bottom:8px}
.apad-accs[hidden]{display:none}
.apad-acc{min-width:64px;min-height:44px;border-radius:14px;border:2px solid var(--white-ink);background:var(--deep);color:var(--text-hi);font-family:var(--music);font-size:26px;line-height:1}
.apad-acc[aria-pressed="true"]{background:var(--pad);border-color:var(--text-hi);color:var(--deep)}
.apad-letters{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.apad-letter{min-height:clamp(50px,9vh,76px);padding:0;border-radius:14px;border:2px solid var(--pad);background:var(--deep);color:var(--white-hi);
  font-family:var(--display),var(--music);font-size:clamp(18px,4.2vw,30px);box-shadow:inset 0 -4px 0 rgba(255,255,255,.08)}
.apad-letter:active{transform:translateY(2px);background:var(--floor-3)}
.apad-letter.good{background:var(--yellow);color:var(--deep);border-color:var(--yellow-hi)}
.apad-letter.bad{background:var(--red-ink);border-color:var(--red)}
.apad.locked .apad-letter,.apad.locked .apad-acc{opacity:.4}

/* ---------- MENU BACKGROUNDS (shared/backgrounds.js + bg-scenes.js): a picture or a coded scene behind a game's
   menu screens, a dark readability overlay on top (games.js bg.dim / bg.focus), gone during play (0.4 s fade) ---------- */
.bg-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;background:var(--floor);--bg-edge:45%;--bg-mid:64%}
.bg-layer.on{opacity:1}
html.bg-on body{background:transparent}
.bg-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.bg-img{position:absolute;inset:0;display:none;background:var(--floor) center/cover no-repeat}
.bg-layer.has-img .bg-img{display:block}
.bg-layer.has-img .bg-cv{display:none}
.bg-dim{position:absolute;inset:0;background:radial-gradient(ellipse 75% 65% at 50% 48%,
  color-mix(in srgb,var(--deep) var(--bg-mid),transparent),color-mix(in srgb,var(--deep) var(--bg-edge),transparent))}
/* the MOVING BACKGROUNDS switch in the speaker panel */
.snd-motion{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:15px;color:var(--text-hi);cursor:pointer}
.snd-motion input{width:20px;height:20px;accent-color:var(--cyan)}
.snd-motion small{flex-basis:100%;color:var(--text-lo);font-size:13px}
.snd-motion small:empty{display:none}

/* ---------- PRESS START (shared/press-start.js): every game's title screen, once per page load ---------- */
html.ps-on,html.ps-on body{overflow:hidden}
html.ps-on body>*:not(.ps-screen):not(.bg-layer){visibility:hidden}
html.ps-on #topbar{visibility:visible}
.ps-screen{position:fixed;left:0;right:0;bottom:0;top:var(--ps-top,0px);z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.4vh,22px);padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));cursor:pointer;opacity:1;transition:opacity .4s ease;touch-action:manipulation}
html.ps-wait .ps-screen{opacity:0;transition:none}
.ps-screen.ps-out{opacity:0;pointer-events:none}
.ps-mq{position:relative;width:min(94vw,1100px,calc((100dvh - var(--ps-top,0px)) * 1.7));aspect-ratio:4/1}
.ps-mq canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ps-name{font:400 clamp(34px,8vw,72px) var(--display);color:var(--yellow);text-align:center;margin:0}
.ps-go{font:400 clamp(24px,5vw,44px) var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--yellow-hi);background:none;border:0;padding:6px 18px;
  text-shadow:0 0 18px var(--yellow),0 3px 0 var(--red-ink);cursor:pointer;animation:ps-blink 1.1s ease-in-out infinite;border-radius:12px}
.ps-go:focus{outline:none}   /* the whole screen is the button: any tap or key */
@keyframes ps-blink{0%,100%{opacity:1}50%{opacity:.25}}   /* one slow blink a second, soft: never more than 3 flashes a second */
.ps-hint{margin:0;color:var(--text-hi);font-size:clamp(15px,2.2vw,19px);text-align:center}
.ps-stars{margin:0;color:var(--text-lo);font-size:14px;font-variant-numeric:tabular-nums}
/* the first screen fades in as the title fades out */
html.ps-reveal body>*:not(.ps-screen):not(.bg-layer)>*:not(#topbar){animation:ps-in .4s ease}
@keyframes ps-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .ps-go{animation:none} html.ps-reveal body>*>*{animation:none} }

/* ---------- THE LEVEL SELECT PATTERN (shared/level-select.js): every game's first screen ---------- */
/* ONE heading style for "① SELECT YOUR NOTES" and "② SELECT YOUR LEVEL": the announcer's neon lettering at section size */
.ls-head{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(16px,2.3vw,21px);line-height:1.15;letter-spacing:.04em;text-transform:uppercase;
  font-style:italic;transform:skewX(-8deg);transform-origin:left center;color:var(--yellow);-webkit-text-stroke:.8px var(--red-ink);
  text-shadow:0 2px 0 var(--red-ink),var(--glow-yellow);white-space:nowrap;padding:0 4px}
.ls-head.say{animation:ls-say .6s ease-out}
@keyframes ls-say{35%{transform:skewX(-8deg) scale(1.08)}}
.ls-step{font-style:normal;color:var(--cyan-hi);-webkit-text-stroke:0;text-shadow:var(--glow-cyan)}
.ls-pick{margin:0 0 8px}
/* the heading row: "② SELECT YOUR LEVEL" and START (or the hint); it sticks to the top while the cards scroll under it */
.ls-row{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;
  margin:2px -8px 8px;padding:4px 8px;border-radius:14px;background:color-mix(in srgb,var(--floor) 86%,transparent)}
.ls-go{display:flex;align-items:center;justify-content:flex-end;min-height:58px;margin-left:auto}
.ls-need{margin:0;padding:8px 14px;border:2px dashed var(--floor-3);border-radius:14px;color:var(--text-lo);font-weight:700;font-size:15px}
.ls-start{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:200px;min-height:58px;padding:6px 26px;border-radius:16px;cursor:pointer;
  border:3px solid var(--yellow-hi);background:var(--yellow);color:var(--deep);box-shadow:0 4px 0 var(--red-ink),var(--glow-yellow)}
.ls-start-t{font:400 26px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.ls-start .ls-sum{margin-top:3px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.ls-start:hover{background:var(--yellow-hi)}
.ls-start:active{transform:translateY(2px);box-shadow:0 2px 0 var(--red-ink),var(--glow-yellow)}
.ls-start:focus-visible{outline:4px solid var(--text-hi);outline-offset:3px}
.ls-start.ls-in{animation:ls-in .35s ease-out}
@keyframes ls-in{from{opacity:0;transform:translateX(24px)}}
@media (max-width:560px){ .ls-go{width:100%;margin-left:0} .ls-start,.ls-need{width:100%} }
/* a selected level: the chosen note set's look (lit border, glow) + a check */
.ls-card{position:relative}
.ls-card.ls-sel{border-color:var(--yellow)!important;background:var(--floor-lit);box-shadow:0 0 0 2px var(--yellow),var(--glow-yellow)}
.ls-card.ls-sel::after{content:"✓";position:absolute;top:-10px;right:-8px;z-index:3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--yellow);color:var(--deep);font:700 17px/1 var(--text);box-shadow:0 0 0 3px var(--deep),var(--glow-yellow)}
.ls-card:focus-visible{outline:4px solid var(--text-hi);outline-offset:3px}
/* locked levels: dimmed, a lock and what opens them; tapping one says it for a moment */
.ls-locked{cursor:not-allowed;opacity:.5}
.ls-lock{display:flex;align-items:center;gap:6px;margin-top:6px;grid-column:1/-1;font-size:13px;font-weight:700;color:var(--text-hi);line-height:1.2;text-align:left}
.ls-lock-i{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.ls-lock-i rect{fill:currentColor;fill-opacity:.25}
.ls-toast{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);width:max-content;max-width:92%;padding:8px 12px;border-radius:12px;
  background:var(--deep);border:2px solid var(--yellow);color:var(--text-hi);font-weight:700;font-size:14px;text-align:center;box-shadow:var(--glow-yellow);
  animation:ls-toast 1.8s ease both;pointer-events:none}
.ls-locked .ls-toast{opacity:1}
@keyframes ls-toast{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}
/* the idle hint: a bouncing arrow at what's missing (the level cards, or START) */
.ls-hint{position:absolute;z-index:60;width:44px;height:44px;pointer-events:none;color:var(--yellow);filter:drop-shadow(0 0 6px var(--yellow)) drop-shadow(0 2px 0 var(--red-ink));
  animation:ls-bob .9s ease-in-out infinite}
.ls-hint svg{width:100%;height:100%;fill:currentColor;stroke:var(--deep);stroke-width:2;stroke-linejoin:round}
.ls-hint.down svg{transform:rotate(90deg)}
@keyframes ls-bob{50%{translate:8px 0}}
.ls-hint.down{animation-name:ls-bob-down}
@keyframes ls-bob-down{50%{translate:0 8px}}
/* a setup screen's main button (START MATCH, CONTINUE): lit */
.ls-main{box-shadow:0 0 0 3px var(--yellow),var(--glow-yellow)!important}
/* the note-set staff, half size, right after the picker; on wider screens it sits beside the picker's ORDER row and
   description line (the space they leave on the right), so it never pushes the level cards down */
.ls-notes{position:relative}
.fivecard.ls-mini{width:min(100%,400px);margin:0 0 10px;padding:2px 6px 0}
.fivecard.ls-mini .cap{font-size:11.5px;line-height:1.3;padding:0 4px;gap:6px}
.fivecard.ls-mini .cap>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fivecard.ls-mini .cap>span+span{display:none}                 /* the staff shows the notes; the concert names stay on the big one */
@media (min-width:700px){
  .ls-notes .fivecard.ls-mini{position:absolute;right:0;bottom:1px;width:230px;margin:0}
  .ls-notes .mp-order{max-width:min(480px,calc(100% - 250px))}
  .ls-notes .mp-say{margin-right:242px}
}
@media (prefers-reduced-motion:reduce){ .ls-hint,.ls-start.ls-in,.ls-head.say{animation:none} }

/* ---------- THE AVATAR BADGE (shared/avatar-badge.js): top bar, every screen; hidden during play ---------- */
.avb{position:relative;display:inline-flex}
.avb-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:min(260px,46vw);padding:4px 12px 4px 4px;border-radius:999px;cursor:pointer;
  border:2px solid var(--line);background:rgba(6,4,13,.55);color:var(--text-hi);font:inherit;text-align:left}
.avb-btn:hover,.avb.open .avb-btn{border-color:var(--cyan);background:var(--floor-3)}
.avb-btn:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px}
.avb-pic{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--floor-3);display:grid;place-items:center}
.avb-pic .pt-box{width:36px}
.avb-sil{width:30px;height:30px;fill:var(--text-lo)}
.avb-txt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.avb-name{font-size:13px;font-weight:700;line-height:1.1;text-wrap:balance;overflow-wrap:normal}          /* a long name: two even lines, never cut off */
/* the one-time name-upgrade note (after the name migration), under the badge */
.avb-up{position:absolute;right:0;top:calc(100% + 8px);z-index:74;display:flex;align-items:flex-start;gap:4px;width:max-content;max-width:min(300px,86vw);padding:6px;border-radius:14px;
  background:var(--floor-2);border:2px solid var(--yellow);box-shadow:var(--glow-yellow),0 10px 30px rgba(0,0,0,.55)}
.avb-up::before{content:"";position:absolute;right:26px;top:-8px;border:7px solid transparent;border-top:0;border-bottom:8px solid var(--yellow)}
.avb-up-go{flex:1;min-height:44px;padding:6px 10px;border:0;border-radius:10px;background:none;color:var(--text-hi);font:inherit;font-size:15px;line-height:1.25;text-align:left;cursor:pointer}
.avb-up-go:hover,.avb-up-go:focus-visible{background:var(--floor-lit);outline:2px solid var(--cyan-hi)}
.avb-up-x{flex:none;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--text-lo);font-size:24px;cursor:pointer}
.avb-sub{font-size:12px;color:var(--text-lo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avb-pen{flex:none;width:16px;height:16px;fill:none;stroke:var(--cyan-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.avb-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:75;display:grid;gap:8px;width:max-content;min-width:230px;padding:10px;border-radius:16px;
  background:var(--floor-2);border:2px solid var(--cyan);box-shadow:var(--glow-cyan),0 10px 30px rgba(0,0,0,.55)}
.avb-menu[hidden]{display:none}
.avb-item{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px;border-radius:12px;cursor:pointer;border:2px solid var(--floor-3);background:var(--deep);
  color:var(--text-hi);font:400 17px/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-align:left}
.avb-item svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--cyan-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.avb-item:hover,.avb-item:focus-visible{border-color:var(--yellow);background:var(--floor-lit);outline:none;box-shadow:var(--glow-yellow)}
@media (max-width:640px){ .avb-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .avb-btn{padding-right:10px} }
/* during play (html.in-play: shared/backgrounds.js Bg.menu(false)) the badge can't be tapped by accident */
html.in-play .avb{visibility:hidden;pointer-events:none}

/* ---------- HOLD GUARD (Arcade.holdGuard, ui.js): held on-screen controls never select, call out, highlight or zoom ---------- */
.hold-guard,.hold-guard *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.hold-guard.hold-lock,.hold-guard.hold-lock button{touch-action:none}