/* 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 */
  /* OFFICIAL BAND NINJA GEAR (shared/bandninja.js: earned in class, opened by a belt code): Band Ninja's own belt
     colors, exactly as the portal shows them, + a darker edge for each (-d) */
  --bn-white:#F5F5F5; --bn-white-d:#b9b9b9; --bn-yellow:#FFF176; --bn-yellow-d:#c9b93f; --bn-orange:#FFB74D; --bn-orange-d:#c7832a;
  --bn-green:#81C784; --bn-green-d:#4c9150; --bn-blue:#64B5F6; --bn-blue-d:#3179bd; --bn-purple:#BA68C8; --bn-purple-d:#83408f;
  --bn-red:#E57373; --bn-red-d:#ad4545; --bn-brown:#A1887F; --bn-brown-d:#6d564e; --bn-black:#616161; --bn-black-d:#2e2e2e;
  --bn-diamond:#4DD0E1; --bn-diamond-d:#2393a3; --bn-gold:#ffd54f;
  --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; --sensei-bokken:#e6c796; --sensei-bokken-2:#a8783f;
  /* 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-metal:#8c95a6; --anim-metal-dark:#4a5060; --anim-tusk:#efe6d2; --anim-coat:#231d3a; --anim-brass:#d9a834; --anim-silver:#c9d2de;
  /* Showtime Malfunction's SPECIAL MACHINES (characters.js) and the oil drop, the hold ring, the jump-scare darkness */
  --anim-tin:#9aa7b4; --anim-tin-2:#e0503c; --anim-tank:#55624a; --anim-tank-2:#8a9a6e; --anim-plate:#b7bfc9;
  --anim-lurker:#3f5a78; --anim-lurker-2:#8fb3cf; --anim-doll:#b0607a; --anim-doll-2:#f0d6c4; --anim-doll-b:#5c7fb0;
  --anim-jester:#7a3e9c; --anim-jester-2:#e2b53c; --anim-sprocket:#8a6a3c; --anim-sprocket-2:#c9a15a;
  --anim-blackout:#2b2d3a; --anim-blackout-2:#555a70; --anim-ollie:#4d6b73; --anim-ollie-2:#c7b37a; --anim-oil:#1c1a14; --anim-oil-hi:#6f8a95;
  --anim-hold:#52c8ff; --anim-stitch:#d8cfb8; --scare-dark:#030106;
  /* 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;
  /* SEASONAL LOOKS (season-look.js, arcade.css "SEASONAL LOOKS"): the few colors the other tokens don't have
     (a chalkboard, stage curtains, autumn orange, a boardwalk) */
  --sl-chalk:#0d2820; --sl-chalk-2:#17392e; --sl-curtain:#5a0a1d; --sl-curtain-2:#8c1530; --sl-orange:#ff8a3d; --sl-orange-ink:#c9501c; --sl-boards:#3b2616;
  /* Rhythm Dojo, the BAMBOO DOJO: jade green + gold. The neon taiko drum (warm wood body, hide head, iron bands, gold
     studs and rim), its bamboo-jade neon (bluer than --green, so the green "on time" result never looks like the theme),
     and the rhythm sheet's feedback colors (dark enough to read on the light --screen: on time, early/late/short,
     missed/extra, the syllable sounding now = a deep teal jade, apart from --rd-ok's green) */
  --rd-body:#8a5a2e; --rd-body-2:#5a3819; --rd-head:#f1e3c4; --rd-head-2:#d8c39a; --rd-iron:#2a1c10; --rd-stud:#e8c264; --rd-stand:#3a2317;
  --rd-night:#06140f; --rd-jade:#2fe0b0; --rd-jade-hi:#a9f5de; --rd-jade-ink:#00735f;
  --rd-ok:#0a7d3b; --rd-near:#a35f00; --rd-bad:#c0392b; --rd-lit:#00735f;
  /* Scale Trainer: the audition room (a music stand, the judges' table under warm lamps) and the score marks
     (clean / fixed / missed on the light staff and the score sheet: dark enough on --screen, AA) */
  --sa-wall:#140f1f; --sa-wall-2:#1d1530; --sa-wood:#4a3020; --sa-wood-2:#2a1a12; --sa-cloth:#1f3a5c; --sa-cloth-2:#16283f;
  --sa-lamp:#ffcf7a; --sa-stand:#9aa3b8; --sa-sheet:#f4f1e6; --sa-chair:#2b2238;
  --sa-ok:#0a7d3b; --sa-fix:#a35f00; --sa-bad:#c0392b; --sa-cur:#1257c4; --sa-guide:#00a3a3;
  --sa-ok-lt:#4dff88; --sa-fix-lt:#ffab2e; --sa-bad-lt:#ff6b6b; --sa-none:#3a3350;
  --sa-tap:#8f1fb0; --sa-bar:#c9c3b3; --sa-bar-acc:#7d7690; --sa-bar-lit:#ffd23f;   /* the fingering card: the tapped note's ring (on the light staff), the mallet bars */
  /* Tune Up (note-checker/): the Tuner's evening sky, the balloon and the landing island; the Metronome's stage */
  --tu-sky-a:#1b1446; --tu-sky-b:#3a2466; --tu-sky-c:#6b3a6e; --tu-cloud:#cdbfe8;
  --tu-env-1:#ff5aa8; --tu-env-2:#ffe14d; --tu-env-line:#2a1036; --tu-rope:#e8d9b8; --tu-wicker:#a8743c; --tu-wicker-2:#6f4a22;
  --tu-moss:#5fd88a; --tu-rock:#5a4a6e; --tu-rock-2:#3b2f4d; --tu-flag:#ffe14d; --tu-stage:#2a1a3e; --tu-stage-edge:#ffb43d;
  /* THE RUDIMENT TRAINER (rudiment-trainer/): a drumline practice room. A marching snare's white shell, silver rims and
     gold hoops, a gum-rubber practice pad, wooden sticks; the night behind them */
  --rt-shell:#eef0f4; --rt-rim:#c3cad6; --rt-rim-2:#7d8698; --rt-gold:#e9b949; --rt-gold-2:#9a7322; --rt-pad:#2f343d; --rt-gum:#4a515e;
  --rt-stick:#d9b27c; --rt-stick-tip:#f3e1bf; --rt-night:#0b0d18; --rt-night-2:#161a2c;
  /* PEDAL POINT (pedal-point/): a concert stage at night. Copper kettles with calfskin-white heads, chrome hoops and
     struts, a warm spotlight, the dark wooden stage and the red curtain behind */
  --pp-copper:#c8733a; --pp-copper-2:#8a4520; --pp-copper-hi:#f0a868; --pp-head:#efe6d2; --pp-head-2:#cfc3a8; --pp-chrome:#c9d0dc;
  --pp-chrome-2:#6d7686; --pp-spot:#ffe1a0; --pp-stage:#2a1c16; --pp-stage-2:#170f0c; --pp-curtain:#5a1424; --pp-night:#0d0a12; --pp-night-2:#1a1220;
  /* SLIDE QUEST (slide-quest/): a trombone under a warm spotlight on a dark blue stage at night. Brass gold for the bell
     and the outer slide, chrome for the inner slide tubes, the glow of a sounding bell */
  --sq-brass:#e2b04a; --sq-brass-2:#9a6a1c; --sq-brass-hi:#ffe08a; --sq-chrome:#cfd6e2; --sq-chrome-2:#6d7686; --sq-mark:#9fe8ff;
  --sq-spot:#ffe1a0; --sq-glow:#ffd27a; --sq-stage:#18202e; --sq-stage-2:#0c1018; --sq-night:#0a0d14; --sq-night-2:#151b2a; --sq-curtain:#1d2b4a;
  /* PERFECT PITCH (perfect-pitch/): a band room at night under a tuner's green glow. Silver keys and brass slides,
     the LIGHTER exposed tube (or cork) a pulled-out joint shows, the black wood of a clarinet, the reed, and the
     judge buttons' sharp (pink) and flat (blue) */
  --p2-night:#0c0a14; --p2-night-2:#1a1528; --p2-wall:#221b33; --p2-floor:#171220; --p2-stand:#3b3554; --p2-glow:#7dffb0; --p2-glow-2:#3fae74;
  --p2-soft:#ffb84d; --p2-brass:#e2b04a; --p2-brass-2:#9a6a1c; --p2-brass-hi:#ffe08a; --p2-silver:#d4dae6; --p2-silver-2:#7a8396;
  --p2-exposed:#f6f2de; --p2-cork:#c89a64; --p2-cork-2:#8f6a3e; --p2-wood:#26222c; --p2-rubber:#18161c; --p2-reed:#e8cf8e;
  --p2-sharp:#ff6fae; --p2-flat:#6fd8ff;
  /* the five tempo levels (rudiment-trainer/rudiments.js TIERS): fills and borders on the dark floor */
  --tier-bronze:#d0894c; --tier-silver:#c9d2de; --tier-gold:#ffd24d; --tier-platinum:#b6e3ee; --tier-diamond:#6ff3ff;
  /* THE RUDIMENT PLAYER (shared/rudiment-player.js light()): the stroke sounding now (its head and its sticking letter) */
  --rp-now:var(--yellow);
  /* 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;
  /* Arcade Quest, Episode 2, the Showtime Stage: the theater (damask walls, red carpet, gold trim, bulbs, velvet), the
     old stage speaker, and the Showtime Band as pixel NPCs (their felt follows Showtime Malfunction's --anim-* colors) */
  --q-stage-wall:#5c1828; --q-stage-wall-d:#3a0e1a; --q-stage-wall-l:#7e2c3e; --q-stage-trim:#e0ac48; --q-stage-trim-d:#8f6322;
  --q-stage-carpet:#7a1c30; --q-stage-carpet-d:#561223; --q-stage-carpet-l:#a83a50; --q-stage-runner:#d7a23e;
  --q-stage-board:#9a6a3e; --q-stage-board-d:#6a4526; --q-stage-board-l:#c08a55;
  --q-stage-velvet:#b8233c; --q-stage-velvet-d:#7a1428; --q-stage-velvet-l:#e2526a;
  --q-stage-bulb:#fff1b0; --q-stage-bulb-off:#6d5a3a; --q-stage-glow:#ffcf5a; --q-stage-stripe:#e8394f;
  --q-stage-mirror:#9fcde4; --q-stage-mirror-l:#e6f6ff; --q-stage-glass:#2a3c6a; --q-stage-pop:#fff4c8; --q-stage-pop-d:#e2c56c;
  --q-stage-speaker:#2b2631; --q-stage-grille:#141118; --q-stage-glow-red:#ff3048; --q-stage-eye:#ff4a5a; --q-stage-eye-ok:#6ad8ff; --q-stage-coat:#24203a;
  --q-stage-moose:var(--anim-moose); --q-stage-moose-d:#4a2c18; --q-stage-moose-l:var(--anim-moose-2); --q-stage-antler:#e8d3a0;
  --q-stage-owl:var(--anim-owl); --q-stage-owl-d:#5a3a26; --q-stage-owl-l:var(--anim-owl-2);
  --q-stage-walrus:var(--anim-walrus); --q-stage-walrus-d:#564a40; --q-stage-walrus-l:var(--anim-walrus-2); --q-stage-tusk:var(--anim-tusk);
  --q-stage-gator:var(--anim-gator); --q-stage-gator-d:#2a5631; --q-stage-gator-l:var(--anim-gator-2); --q-stage-drum:var(--anim-drum); --q-stage-drumhead:var(--anim-drumhead);
  --q-stage-pit:#2e2632; --q-stage-pit-d:#1d1722; --q-stage-red-lit:#d8283e;
  --q-stage-raccoon:var(--anim-raccoon); --q-stage-raccoon-d:#45474f; --q-stage-raccoon-l:var(--anim-raccoon-2); --q-stage-mask:#2a2b31;
  --q-stage-duct:#4a5260; --q-stage-duct-d:#2c323c; --q-stage-duct-l:#7a8494; --q-stage-catwalk:#56606e; --q-stage-catwalk-d:#343b46;
  /* Arcade Quest: INSTRUMENT TIERS (the portraits' tints, the battle HUD's badge) and the NOTE SHARDS (the placeholder icon) */
  --q-gear-rust:#c4622d; --q-gear-rust-d:#7a3518; --q-gear-rust-l:#e09a5c; --q-gear-dia:#5fd4f0; --q-gear-dia-d:#2a7f9e; --q-gear-dia-l:#d4fbff;
  --q-gear-shadow:#2c2640; --q-gear-shard:#c9a6ff; --q-gear-shard-d:#7a52d6; --q-gear-shard-l:#f3e9ff;
  /* 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;
  --sw-chrome:#c9ced8; --sw-tread:#2a2436; --sw-plate:#f4ecff; --sw-plate-ink:#150b26; --sw-gold:#ffd54f; --sw-flame-1:#ff6a2a; --sw-flame-2:#ffe14d;
  /* Sustain Speedway's TIMES OF DAY (levels.js `time`: sustain-speedway/scenery.js) and its roadside scenery */
  --sw-dawn-top:#1d2552; --sw-dawn-mid:#7a5a9e; --sw-dawn-low:#ffb38a; --sw-noon-top:#2a78d6; --sw-noon-mid:#6fb3ee; --sw-noon-low:#ffe2a8;
  --sw-noon-ground:#3a2414; --sw-sand:#c98a4b; --sw-neon-top:#05020f; --sw-neon-mid:#1b0640; --sw-neon-low:#6a1a9a; --sw-golden-low:#ffa94d;
  --sw-teacher-gold:#ffc83d;
  /* THE GARAGE's paints (sustain-speedway levels.js SPEEDWAY_GARAGE.paints) */
  --sw-paint-black:#15131c; --sw-paint-matte:#23212a; --sw-paint-silver:#b9c0cc; --sw-paint-gold:#e0b43c; --sw-paint-teal:#1fb5a6;
  --sw-paint-navy:#23408f; --sw-paint-maroon:#8e2440; --sw-paint-forest:#2f7a45; --sw-paint-sky:#7cc8ff; --sw-paint-lavender:#b79cff;
  --sw-paint-coral:#ff7f6b; --sw-paint-mint:#8ff0c4; --sw-paint-bronze:#b8763c; --sw-paint-graphite:#4a4d58; --sw-pearl:#f2e9ff; --sw-rim-light:#e8e2ff; --sw-lamp:#ffe6a3; --sw-lamp-pole:#3b3350; --sw-smoke:#cfc8dc; --sw-fog:#a99cc4; --sw-haze:#ffe2a8;
  --sw-palm:#1f5e3a; --sw-pine:#123a2c; --sw-trunk:#5a3a24; --sw-cactus:#2f7a45; --sw-rock:#5a3d52; --sw-buoy:#ff6b3d;
  --sw-crowd-1:#ff8fc8; --sw-crowd-2:#8ff0ff; --sw-crowd-3:#ffe98a; --sw-stand:#2b1d44;
  --sw-snow:#f4f8ff; --sw-petal:#ffb3d6; --sw-leaf:#e0772b; --sw-bat:#140820; --sw-pumpkin:#ff8a1f; --sw-pumpkin-eye:#ffe14d;
  /* Music Highway: the night highway (canvas colors are read from these) and one card color per note letter */
  --mh-sky:#1a0838; --mh-road:#12061f; --mh-lane:#8a5cff; --mh-sun1:#ffd166; --mh-sun2:#ff3fa4;
  --mh-c:#ff5a6e; --mh-d:#ff9a3c; --mh-e:#ffe14d; --mh-f:#4dff88; --mh-g:#3ae8ff; --mh-a:#5b8cff; --mh-b:#c77dff;
  --mh-gold:#c98a12; --mh-miss:#c0392b;
  /* Music Highway's FINAL BOSS: the bumblebees (the swarm over the road, the intro card, the locked card's silhouette) */
  --mh-bee:#ffd23f; --mh-bee-stripe:#1a1206; --mh-bee-wing:#e9f7ff; --mh-bee-sil:#5b4a7a;
  /* Music Highway's synthwave sunset (the game's backdrop and its menu scene share it: bg-scenes.js S.sunset) */
  --mh-sky-top:#10052a; --mh-sky-mid:#4a1370; --mh-sky-low:#ff4f9a; --mh-ground:#0b0318; --mh-mtn:#170629; --mh-mtn-line:#ff3fa4;
  --mh-grid:#3ae8ff; --mh-grid-2:#ff3fa4; --mh-gate:#e9f7ff; --mh-panel:#07020f;
  /* Keys to the City: the neon city (the skyline keyboard, the Chopsticks and Fork signs, the Mayor) */
  --kt-night:#0d0a24; --kt-night-2:#1b1245; --kt-street:#f3ead6; --kt-street-2:#d9cba9; --kt-lane:#b9a57a;
  --kt-bldg:#171529; --kt-bldg-2:#2a2550; --kt-win-off:#3b3566; --kt-win-on:#ffd970; --kt-glow:#ffe58a;
  --kt-good:#7dffb0; --kt-bad:#ff6b6b; --kt-answer:#ffcf4a; --kt-chop:#3ae8ff; --kt-fork:#ff7ad9; --kt-lamp:#ffd166;
  --kt-fur:#f2a65a; --kt-fur-d:#b86e2c; --kt-hat:#1c1830; --kt-sash:#e0343f; --kt-gold:#ffcf4a; --kt-gold-d:#b8860b;
  /* BLOCKTAVE (blocktave/): a neon, stage-lit block world. Sky (day / night), the ground, the music blocks' glows,
     building blocks, creatures (Night Clams, Sour Wisps, Rushers) */
  --bt-sky-day:#2c3f8f; --bt-sky-day-2:#8c4fb8; --bt-sky-night:#070514; --bt-sky-night-2:#1a1040; --bt-star:#e9e4ff; --bt-beam:#fff3c4;
  --bt-dirt:#3a2436; --bt-dirt-2:#6b3d5c; --bt-moss:#5dffd0; --bt-moss-2:#1f6f67; --bt-sand:#d9b98a; --bt-sand-2:#a8845a;
  --bt-clay:#8a3e2c; --bt-clay-2:#b7583c; --bt-slate:#2a2f4d; --bt-slate-2:#46507d; --bt-bedrock:#0c0b18;
  --bt-water:#2b78d6; --bt-water-hi:#9fd4ff; --bt-leaf:#1c6b4a; --bt-leaf-hi:#6dffbe; --bt-reed:#8fd46a;
  --bt-cork:#c99a63; --bt-cork-2:#8a6038; --bt-maple:#9a4b2e; --bt-maple-2:#6a2f1c; --bt-felt:#6e4fb8; --bt-felt-2:#b8a4ff;
  --bt-rawhide:#e8d3a4; --bt-rawhide-2:#b99d68;
  --bt-tone:#3ae8ff; --bt-brass:#ffc23a; --bt-scale:#ff5fd2; --bt-spring:#c38bff; --bt-sustain:#5d8dff; --bt-sustain-hi:#d0ddff;
  --bt-rhythm:#5dff86; --bt-rest:#f4f1ff; --bt-silver:#d7dcee; --bt-pearl:#fff1fb;
  --bt-plank:#b3713a; --bt-plank-2:#7b4620; --bt-panel:#4a4c62; --bt-panel-2:#6e7195; --bt-brick:#8f1f3a; --bt-brick-mortar:#e9b94a;
  --bt-stage:#15121f; --bt-stage-2:#2a2438; --bt-stage-edge:#ffd166; --bt-door-window:#9fe8ff; --bt-glass:#bfe9ff; --bt-glass-edge:#dff6ff;
  --bt-lamp:#fff0a8; --bt-locker:#3b6fa8; --bt-locker-2:#223f63; --bt-screen:#f4f1e6; --bt-composer:#1d1740; --bt-powered:#ffd166;
  --bt-snack:#ff8a4d; --bt-bag:#6e4fb8;
  --bt-wood:#6b3e1f; --bt-wood-hi:#a8693a; --bt-wood-dark:#3f220f; --bt-wood-ink:#fff1dc; --bt-slot-bg:#2b1a0e;
  --bt-clam:#f2a0c8; --bt-clam-2:#8a3a66; --bt-wisp:#c8ff5d; --bt-rusher:#ff8a3a; --bt-ink:#18203a; --bt-bubble:#f4f1e6;
  --bt-mine:#5dffd0; --bt-build:#ffd166; --bt-far:#ff6b6b; --bt-heart:#ff6b9a;
  --bt-torch:#7ff6ff; --bt-torch-core:#f4ffff; --bt-torch-tint:#9fffe8; --bt-torch-handle:#2b2236;   /* Blocktave's Neon Torch */
  --bt-courage:#ffb347; --bt-courage-core:#fff1b8; --bt-courage-low:#b98cff;   /* Blocktave's Courage meter (a little flame) */
  /* Blocktave's Chapter 6 ores and gear */
  --bt-rumble:#6a3cc8; --bt-rumble-2:#2a1650; --bt-treble:#c9f1ff; --bt-treble-2:#7fc8ff; --bt-geode:#8d8478; --bt-geode-2:#ff9ff0;
  --bt-key:#ffcf4a; --bt-key-2:#8a5a00; --bt-coral:#ff7aa8; --bt-coral-2:#ffd1e1; --bt-amber:#f29a2e; --bt-amber-2:#7a3e05;
  --bt-zipper:#7cf7ff; --bt-zipper-2:#1b6f86; --bt-hp:#5dff9a; --bt-hp-bg:#18203a; --bt-dmg:#fff3a8;   /* the Rey Update: the Zipper, HP bars, calm damage */
  --bt-power:#ffd84d; --bt-power-off:#3a2f5c; --bt-fire:#ff9a3d; --bt-fire-2:#ffd36b; --bt-wind:#c9f6ff; --bt-water:#4fb8ff; --bt-water-2:#bfe8ff; --bt-bolt:#b8a4ff; --bt-bolt-2:#f2edff; --bt-king:#8a90c9; --bt-king-2:#3b3f6e; --bt-king-3:#c9cdf5; --bt-king-glow:#ff7ad9; --bt-beam:#ff8ae0; --bt-wire:#ff9f5a; --bt-core:#7af5ff; --bt-tramp:#f1e3c4; --bt-tramp-rim:#b9b9c8; --bt-sign:#f4f1e6; --bt-organ:#5a2f1a; --bt-organ-pipe:#e8c76a; --bt-coral-glow:#5fffe0;
  /* Blocktave's parallax backdrop (blocktave/backdrop.js): muted, darker than the world in front of it */
  --bt-marsh-far:#3d2c6b; --bt-marsh-far-2:#5a4590; --bt-marsh-mist:#c9b8ff; --bt-marsh-moon:#f1e9ff; --bt-marsh-water:#a8d8ff;
  --bt-marsh-mid:#1f4a46; --bt-marsh-cat:#5a3a26; --bt-marsh-near:#0d2224; --bt-firefly:#f6ff9e;
  --bt-brass-far:#5e4220; --bt-brass-far-2:#9a6d2a; --bt-brass-mid:#41291a; --bt-brass-mid-hi:#d29a45; --bt-brass-near:#1d120b; --bt-brass-glint:#ffd27a;
  --bt-canyon-far:#8a3a28; --bt-canyon-far-2:#b0603a; --bt-canyon-far-3:#64271c; --bt-canyon-mid:#4e2018; --bt-canyon-rim:#e9a066;
  --bt-canyon-near:#220e0a; --bt-canyon-brush:#c9a46a; --bt-dust:#f5d9b0;
  --bt-cave-rock:#221e3d; --bt-cave-rock-2:#2a2549; --bt-cave-strata:#433c6e; --bt-clef-hint:#cfd6ff; --bt-bg-night:#070a2e;
  --anim-chrome:#d9e1ec; --anim-crack:#262b36; --anim-emergency:#ff2a2a;
  --anim-eye-bad:#ff3d3d; --anim-eye-good:#52c8ff; --anim-drum:#b8322f; --anim-drumhead:#ece6d6; --anim-baton:#5a3a22;
  --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-rd-jade:0 0 4px rgba(47,224,176,.9),0 0 14px rgba(47,224,176,.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;
  /* THE PRIZE COUNTER (shared/prizes.css): the pegboard wall, the wooden shelves and counter, the paper price tags,
     the glass case and the warm lights */
  --pz-peg:#2a1d18; --pz-peg-hole:#140d0b; --pz-wood:#6b3f22; --pz-wood-2:#8a5530; --pz-wood-hi:#b5773f;
  --pz-paper:#f3e6c4; --pz-paper-ink:#3b2410; --pz-glass:#8fe9ff; --pz-warm:#ffb347; --pz-bot:#9aa3c7; --pz-bot-2:#5d6690;

  /* 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-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,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-practice{border-color:var(--green);background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--green) 22%,transparent) 0 6px,transparent 6px 12px),color-mix(in srgb,var(--yellow) 8%,transparent);box-shadow:0 0 0 1px var(--yellow) inset,var(--glow-green,0 0 6px var(--green))}
.av-plate-ladder{border-color:var(--yellow);background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--tu-wicker) 40%,transparent) 0 3px,transparent 3px 14px),color-mix(in srgb,var(--yellow) 10%,transparent);box-shadow:0 0 0 1px var(--tu-wicker-2) inset}
.av-plate-cbready{border-color:var(--yellow);background:repeating-linear-gradient(180deg,transparent 0 4px,color-mix(in srgb,var(--cyan) 22%,transparent) 4px 5px),color-mix(in srgb,var(--cyan) 8%,transparent);box-shadow:0 0 0 1px var(--cyan) inset}
.av-plate-sbready{border-color:var(--yellow);background:repeating-linear-gradient(180deg,transparent 0 4px,color-mix(in srgb,var(--purple) 26%,transparent) 4px 5px),color-mix(in srgb,var(--yellow) 12%,transparent);box-shadow:0 0 0 1px var(--purple) inset,var(--glow-yellow)}
.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)}
/* WEEKLY CHAMPIONS (shared/leaderboard.js): gold, a small laurel each side */
.av-plate-champion{white-space:nowrap;border-color:var(--yellow);background:linear-gradient(180deg,color-mix(in srgb,var(--yellow) 34%,transparent),color-mix(in srgb,var(--amber) 18%,transparent));box-shadow:0 0 0 1px var(--amber-ink) inset,var(--glow-yellow)}
.av-plate-champion::before,.av-plate-champion::after{content:"\2766";color:var(--green-hi);margin:0 4px;font-size:.85em}
.av-plate-champion::after{display:inline-block;transform:scaleX(-1)}
.av-plate-notes::before,.av-plate-notes::after{content:"♪";color:var(--pink-hi);margin:0 4px}
/* seasonal event plates (shared/seasons.js) */
.av-plate-hearts{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 14%,transparent)}
/* the seasonal shop's candy heart (Friendship Week): a rounded pastel candy with a little heart each side */
.av-plate-candyheart{border-color:var(--pink-hi);border-radius:999px;background:color-mix(in srgb,var(--pink-hi) 34%,transparent)}
.av-plate-candyheart::before,.av-plate-candyheart::after{content:"♥";color:var(--red-hi);margin:0 4px}
.av-plate-hearts::before,.av-plate-hearts::after{content:"♥";color:var(--pink-hi);margin:0 4px}
.av-plate-blossom{border-color:var(--pink-hi);border-style:dotted;background:linear-gradient(180deg,color-mix(in srgb,var(--pink-hi) 18%,transparent),color-mix(in srgb,var(--green) 12%,transparent))}
.av-plate-blossom::before{content:"✿";color:var(--pink-hi);margin-right:4px}
/* Spooky Season's bonus: candy corn (white tip, amber middle, orange base), soft enough for the name to read on it */
.av-plate-candycorn{border-color:var(--amber);border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,color-mix(in srgb,var(--white-hi) 30%,transparent) 0 30%,color-mix(in srgb,var(--amber) 36%,transparent) 30% 66%,color-mix(in srgb,var(--av-orange) 50%,transparent) 66%);box-shadow:0 0 0 1px var(--av-orange-d) inset}
.av-plate-ghostwhisperer{position:relative;border-color:var(--purple-hi);color:var(--white-hi);background:linear-gradient(180deg,color-mix(in srgb,var(--white-hi) 30%,transparent),color-mix(in srgb,var(--purple-hi) 28%,transparent));box-shadow:0 0 6px color-mix(in srgb,var(--purple-hi) 50%,transparent)}
/* its wisp: a faint curl rising from the top-right corner, drifting slowly (still under reduced motion / Motion off) */
.av-plate-ghostwhisperer::after{content:"";position:absolute;right:-7px;top:-11px;width:13px;height:13px;border:2px solid transparent;border-top-color:color-mix(in srgb,var(--white-hi) 80%,transparent);border-left-color:color-mix(in srgb,var(--purple-hi) 70%,transparent);border-radius:50%;transform:rotate(20deg);opacity:.7;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.av-plate-ghostwhisperer::after{animation:av-wisp 7s ease-in-out infinite}}
@keyframes av-wisp{0%,100%{transform:translateY(0) rotate(20deg);opacity:.55}50%{transform:translateY(-2px) rotate(-10deg);opacity:.85}}
/* ARCADE QUEST EPISODE 2: "Encore!" = a theater marquee (a row of warm bulbs along the top and bottom edges, steady);
   Showstopper = red velvet, a gold border and a small gold star at the corner */
.av-plate-encore{border-color:var(--q-stage-glow);color:var(--white-hi);background:radial-gradient(circle,var(--q-stage-bulb) 0 1.2px,transparent 1.6px) 0 1px/7px 100% repeat-x,radial-gradient(circle,var(--q-stage-bulb) 0 1.2px,transparent 1.6px) 0 calc(100% - 1px)/7px 100% repeat-x,linear-gradient(180deg,var(--q-stage-wall-d),color-mix(in srgb,var(--q-stage-velvet-d) 70%,transparent));background-size:7px 4px,7px 4px,auto;box-shadow:0 0 5px color-mix(in srgb,var(--q-stage-glow) 45%,transparent)}
.av-plate-showstopper{position:relative;border:2px solid var(--q-gold);color:var(--white-hi);background:linear-gradient(180deg,var(--q-stage-velvet),var(--q-stage-velvet-d))}
.av-plate-showstopper::after{content:"★";position:absolute;right:-7px;top:-9px;font-size:12px;line-height:1;color:var(--q-gold);text-shadow:0 0 3px var(--q-stage-velvet-d);pointer-events:none}
.av-plate-sunset{border-color:var(--amber);background:linear-gradient(0deg,color-mix(in srgb,var(--cyan) 26%,transparent),color-mix(in srgb,var(--amber) 30%,transparent) 55%,color-mix(in srgb,var(--pink) 24%,transparent))}
[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)}
/* OFFICIAL BAND NINJA GEAR: a belt-colored frame, doubled, with the belt's knot at the bottom (Band Ninja's own colors) */
[class*="av-plate-bn-"]{position:relative;border:4px double var(--pb);background:color-mix(in srgb,var(--pb) 14%,transparent)}
[class*="av-plate-bn-"]::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:8px;margin-left:-6px;border-radius:2px;background:var(--pb);box-shadow:0 0 0 1px var(--deep)}
.av-plate-bn-white{--pb:var(--bn-white)}.av-plate-bn-yellow{--pb:var(--bn-yellow)}.av-plate-bn-orange{--pb:var(--bn-orange)}.av-plate-bn-green{--pb:var(--bn-green)}
.av-plate-bn-blue{--pb:var(--bn-blue)}.av-plate-bn-purple{--pb:var(--bn-purple)}.av-plate-bn-red{--pb:var(--bn-red)}.av-plate-bn-brown{--pb:var(--bn-brown)}
.av-plate-bn-black{--pb:var(--bn-black)}.av-plate-bn-diamond{--pb:var(--bn-diamond);box-shadow:0 0 7px var(--bn-diamond)}
.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;display:inline-block;font-size:clamp(22px,4.6vw,30px)}
.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}
/* LEGENDARY (the Grandmaster's Aura): a gold card with a diamond edge; the item's picture in a gold-and-diamond frame.
   Still: no blinking, no moving shine (nothing may flash) */
.sk-unlock.sk-legendary{border-color:var(--bn-gold);box-shadow:0 0 0 2px var(--bn-diamond),0 0 18px var(--bn-gold),0 0 30px color-mix(in srgb,var(--bn-diamond) 45%,transparent)}
.sk-legendary .sk-u-title{color:var(--bn-gold);text-shadow:0 0 8px var(--bn-gold),0 0 18px var(--bn-diamond)}
.sk-u-legend .sk-u-pic{border:3px solid var(--bn-gold);box-shadow:inset 0 0 0 2px var(--bn-diamond),0 0 14px var(--bn-gold)}
.sk-u-badge,.lk-legend-tag,.avc-legend-tag{display:inline-block;padding:1px 8px;border-radius:999px;background:linear-gradient(90deg,var(--bn-gold),var(--bn-diamond));
  color:var(--deep);font:700 11px var(--text);letter-spacing:.08em;text-transform:uppercase}
.sk-u-foot{margin:8px 0 0!important;font-size:14px}
.sk-u-lead{margin:0 0 10px!important;font-size:15px;text-align:center;text-wrap:balance;color:var(--purple-hi)}
.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 SETTINGS button (every top bar; shared/sfx.js mountControls): a speaker showing sound on/off; it opens the
   shared Settings panel (shared/ui-kit.js) ---------- */
.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:44px;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 12px;min-width:44px;min-height:44px;justify-content:center}
@media (max-width:640px){.snd-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.snd-open .snd-ico{width:22px;height:22px}

/* ---------- buttons: shared/ui-kit.css (.btn .btn-primary .btn-secondary .btn-danger .btn-small .btn-big) ---------- */

/* ---------- 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:max(20px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(6,4,13,.88);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.overlay>*{margin-block:auto;min-width:0;max-width:100%}
/* EVERY WINDOW FITS A 360 px PHONE: the overlay's one column is the screen's width minus its padding, never wider
   (an auto grid column grows to its longest word or widest row, and a .panel's width:min(…,100%) then follows it off
   the screen); its window never gets wider than that column. Content that can't shrink then shows up as too wide in
   tests/phone-width.spec.js instead of silently widening the window. */
.overlay{grid-template-columns:minmax(0,1fr)}
.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}

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

/* ---------- BACKUP / RESTORE (shared/backup.js) ---------- */
.bk-overlay{z-index:80;align-items:start;overflow-y:auto}   /* BACKUP / RESTORE: above Settings (70) and the leaderboard (70), below yes/no (90) and toasts (95); UI.layer lifts it above anything else open */
.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-last{margin:0 0 6px;text-align:center;font-size:14px;font-weight:700;color:var(--text-lo)}
.bk-tip b{color:var(--text-hi)}
.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-demo{margin:8px 0 0;font-weight:700;color:var(--amber)}
.ed-over .ed-top-h{margin-top:14px}
.ed-over .ed-list{max-width:440px;margin:0 auto}
.ed-over .ui-newbest{font-size:20px}

/* ---------- 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 Sensei's wooden practice sword (Note Ninja's 'ready' / 'strike' poses) */
.ss-arm{fill:none;stroke:var(--sensei-robe-2);stroke-width:9;stroke-linecap:round}
.ss-bokken{fill:none;stroke:var(--sensei-bokken);stroke-width:5;stroke-linecap:round}
.ss-grip{fill:none;stroke:var(--sensei-bokken-2);stroke-width:5.5;stroke-linecap:round}
.ss-swoosh{fill:none;stroke:var(--white-hi);stroke-width:3;stroke-linecap:round;opacity:.55}

/* ---------- THE ANSWER PAD (shared/answer-pad.js: Note Ninja's layout, used by Dojo Duel, Keys to the City, Blocktave) ----------
   --pad = the pad's neon color (a token); big thumb-sized buttons in one row. `.sp` = THE SPELLED PAD (one button per
   note of the set, "B♭ C D E♭ F"): --cols buttons a row (answer-pad.js: one row while each gets 48 px, else two),
   the last row centered */
.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}
.apad-accs.apad-ghost{visibility:hidden}
.apad.sp .apad-letters{display:flex;flex-wrap:wrap;justify-content:center}
.apad.sp .apad-letter{flex:0 0 calc((100% - (var(--cols,7) - 1) * 6px) / var(--cols,7));min-width:48px;white-space:nowrap}

/* ---------- 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))}

/* ---------- 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{white-space:nowrap}      /* the look: .ui-section (shared/ui-kit.css) */
.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}
/* a Band Ninja link asked for a belt that isn't open yet (level-select.js bnNote) */
.ls-bn{margin:0 0 10px;padding:8px 12px;border-left:4px solid var(--yellow);border-radius:8px;background:color-mix(in srgb,var(--yellow) 10%,transparent);color:var(--text-hi);font-weight:700;font-size:15px;line-height:1.35}
.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%} }
/* THE TIP under START (its first 3 showings): small and quiet, its own line at the row's right; smaller on phones */
.ls-tip{flex-basis:100%;margin:-4px 2px 0;text-align:right;color:var(--text-lo);font-size:12.5px;font-weight:700;line-height:1.2}
@media (max-width:560px){ .ls-tip{margin-top:-2px;font-size:11px} }
/* an element beside START (LevelSelect.show({beside})): to its left, as tall as START; START keeps the row's width on phones */
.ls-go.ls-has-beside{gap:10px;flex-wrap:nowrap}
.ls-beside{flex:none;min-height:58px;align-self:stretch}
@media (max-width:560px){ .ls-go.ls-has-beside .ls-start,.ls-go.ls-has-beside .ls-need{width:auto;flex:1 1 auto;min-width:0} }
/* a selected level: the chosen note set's look (lit border, glow) + a check */
.ls-card{position:relative;touch-action:manipulation;min-width:0}       /* a double tap starts the level: never a zoom on iPad; min-width 0: a long word never widens its grid column past a phone screen */
.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}
/* 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 FIGHTING AVATAR (shared/avatar-fight.js: Button Masher's fighter) ----------
   .avf = the pose canvas (crisp pixels) + the effect's still pictures in a square around the figure + the pet in its
   corner. The game sizes and places .avf (its aspect ratio is --avf-ar). The blast: three neon arcs in the instrument
   family's color (--avf-c); the game moves it. No blur filters, nothing flashes. */
.avf{position:relative;display:block;aspect-ratio:var(--avf-ar);pointer-events:none}
.avf-cv{position:absolute;inset:0;width:100%;height:100%;z-index:2;image-rendering:pixelated;image-rendering:crisp-edges}
.avf-fx{position:absolute;top:0;left:50%;height:100%;width:auto;aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.avf-fx-b{z-index:1}.avf-fx-f{z-index:3}
.avf-pet{position:absolute;left:0;bottom:2%;width:calc(100% * 10 / 44);aspect-ratio:1;z-index:4}
.avf-pet canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.avf-pet.cheer{animation:avf-hop .5s ease-out 2}
.avf-pet.worry{animation:avf-shiver .25s ease-in-out 4}
@keyframes avf-hop{50%{transform:translateY(-40%)}}
@keyframes avf-shiver{25%{transform:translateX(-7%) rotate(-5deg)}75%{transform:translateX(7%) rotate(5deg)}}
.avf-still{display:inline-block;aspect-ratio:var(--avf-ar)}
.avf-still .avf-img{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.avf-blast{position:absolute;display:block;width:56px;height:56px;margin:-28px 0 0 -12px;pointer-events:none}
.avf-blast b{position:absolute;inset:0;border:4px solid transparent;border-right-color:var(--avf-c);border-radius:50%;opacity:.95}
.avf-blast b:nth-child(2){inset:18%;opacity:.8}
.avf-blast b:nth-child(3){inset:36%;opacity:.65}
@media (prefers-reduced-motion:reduce){.avf-pet.cheer,.avf-pet.worry{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}
/* the LOCKER entry: its count, and "2 new"; the badge's NEW dot (something earned since the Locker was last opened) */
.sk-u-more{display:flex;justify-content:center;margin-top:10px}
.avb-lk-n{font-size:13px;font-weight:700;color:var(--text-lo)}
.avb-lk-new{margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--pink);color:var(--deep);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.avb-tk{flex:none;width:22px;text-align:center;font-size:18px;line-height:1}
.avb-tk .tk-ic{display:block;margin:0 auto}
.avb-btn{position:relative}
.avb-dot{position:absolute;top:2px;left:30px;width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px var(--deep),0 0 8px var(--pink)}
.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} }
/* phones: the menu spans the screen (16 px from each edge) just under the badge instead of hanging off its right edge
   (as wide as its longest label, it ran 84 px off a 390 px screen's left edge); long labels wrap */
@media (max-width:640px){ .avb-menu{position:fixed;top:auto;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));width:auto;min-width:0;margin-top:8px}
  .avb-item{min-width:0;overflow-wrap:anywhere} }
/* 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}

/* ---------- THE AVATAR CODE panels (shared/avatar-code.js: SHARE TO BAND NINJA, LOAD AVATAR CODE); above the creator ---------- */
.acode-ov{z-index:90}
.acode{max-width:460px;width:100%}
.acode h2{margin:0 0 10px;font-family:var(--display);color:var(--yellow);font-size:22px}
.acode-lbl{display:block;margin:0 0 6px;color:var(--text-hi);font-weight:700}
.acode-in{width:100%;box-sizing:border-box;padding:12px;border:2px solid var(--cyan);border-radius:10px;background:var(--deep);color:var(--text-hi);font:700 clamp(11px,3vw,13.5px)/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:0}
.acode-in:focus{outline:3px solid var(--yellow);outline-offset:2px}
.acode-say{margin:10px 0 0;color:var(--text-hi)}
.acode-msg{min-height:1.3em;margin:6px 0 0;color:var(--text-lo);font-weight:700}
.acode .acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}

/* ---------- THE APP (shared/app.js): update banner, install help, "Bring your progress" ----------
   SAFE AREAS: the installed app runs full screen (the iPad status bar is see-through: black-translucent), so every
   screen keeps its content inside env(safe-area-inset-*): .wrap and .overlay above, the floor's bars (arcade.css),
   Arcade Quest's .q-wrap, Dojo Duel's .duel, the leaderboard. A new full-screen layout must do the same. */
.app-update{position:fixed;z-index:95;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  max-width:calc(100% - 32px);min-height:48px;padding:10px 20px;border-radius:999px;border:2px solid var(--cyan);background:var(--floor-2);
  color:var(--text-hi);font:700 16px/1.25 var(--text);box-shadow:var(--glow-cyan),0 10px 30px rgba(0,0,0,.5);cursor:pointer;touch-action:manipulation}
.app-update:hover,.app-update:focus-visible{background:var(--floor-3);outline:none}
.app-update:disabled{opacity:.8;cursor:default}
html.in-play .app-update{visibility:hidden;pointer-events:none}   /* never over a game in progress: it's back on the next menu */
.app-overlay{z-index:90}
.app-panel{max-width:520px;width:100%;text-align:left}
.app-panel h2{text-align:center;font-family:var(--display);font-weight:400;color:var(--cyan)}
.app-lead,.app-note{color:var(--text-lo);font-size:15px;line-height:1.45}
.app-note{margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--deep);border:1px solid var(--floor-3)}
.app-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.app-steps li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;color:var(--text-hi)}
.app-pic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--deep);border:2px solid var(--cyan-ink);color:var(--cyan-hi)}
.app-pic svg{width:30px;height:30px}
.app-pic-icon{background-size:cover;background-position:center;border-color:var(--pink)}
.app-steps-small li{grid-template-columns:34px 1fr}
.app-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--deep);border:2px solid var(--yellow);color:var(--yellow);font-weight:700}
.app-panel .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* THE RUDIMENT PLAYER's highlight (RudimentPlayer.light): the sounding stroke's head and sticking letter on the rhythm staff */
svg.rs .rp-now{color:var(--rp-now);filter:drop-shadow(0 0 4px var(--rp-now))}