/* Critter Fever — the retro skin: a late-90s / early-00s console UI (PS1, N64). Loaded after style.css and overrides its look.
   Chunky bevelled boxes (light top-left edge, dark bottom-right), hard drop shadows instead of soft glows, two-tone
   plaque buttons with a bouncing cursor, title bars, a pixel body font and CRT scanlines. */
:root {
  --body: "Pixelify Sans", "Rubik", "Segoe UI", sans-serif;
  --bv-hi: #a996ff; --bv-lo: #1a0b38; --bv-mid: #5a3fc0;
  --pl-top: #4b2fa6; --pl-bot: #34207e;        /* plaque: top half / bottom half */
  --hard: 5px 5px 0 rgba(0,0,0,.9);
}
body { font-family: var(--body); }
#gl.retro { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- CRT: scanlines + a soft vignette over everything (Settings can turn it off) */
body.crt::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,.42) 100%);
}

/* ---------- panels: bevelled boxes with a hard shadow and a faint dither */
.panel {
  border-radius: 3px; border: 4px solid; border-color: var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,0) 2px 4px),
    linear-gradient(180deg, rgba(38,18,84,.96), rgba(16,7,38,.96));
  box-shadow: var(--hard), inset 0 0 0 2px rgba(0,0,0,.35);
  backdrop-filter: none;
}
/* screen title bar: a magenta-to-violet strip across the top of the window */
.panel > .head {
  margin: -22px -22px 16px; padding: 10px 14px;
  background: linear-gradient(90deg, #d23bb8, #6a2bd0 70%, #3a1d8c);
  border-bottom: 4px solid var(--ink2); box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.25);
}
.head h2 { font-size: 24px; white-space: nowrap; }
.head .wallet { background: rgba(0,0,0,.45); }

/* ---------- buttons: two-tone plaques with bevelled edges */
button, .filebtn {
  border-radius: 3px; border: 3px solid; border-color: var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi);
  background: linear-gradient(180deg, var(--pl-top) 0 50%, var(--pl-bot) 50% 100%);
  box-shadow: 3px 3px 0 rgba(0,0,0,.85); transition: none; position: relative;
}
button:hover:not([disabled]), button:focus-visible, .filebtn:hover {
  border-color: #fff6a8 #a66a00 #a66a00 #fff6a8; background: linear-gradient(180deg, #6c48dc 0 50%, #5434bd 50% 100%);
  box-shadow: 3px 3px 0 rgba(0,0,0,.85); transform: none;
}
button:active:not([disabled]) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,.85); }
button.primary, .filebtn.primary {
  border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; background: linear-gradient(180deg, #ffd23b 0 50%, #ff9f1a 50% 100%);
  box-shadow: 4px 4px 0 rgba(0,0,0,.9);
}
button.primary:hover:not([disabled]), button.primary:focus-visible { border-color: #fff #b06a00 #b06a00 #fff; background: linear-gradient(180deg, #ffe680 0 50%, #ffb43a 50% 100%); box-shadow: 4px 4px 0 rgba(0,0,0,.9); }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; }
button.ghost:hover:not([disabled]), button.ghost:focus-visible { background: rgba(0,0,0,.3); border-color: transparent; box-shadow: none; }
button.danger { border-color: #ff9aa6 #6a0d1a #6a0d1a #ff9aa6; background: linear-gradient(180deg, #9a2338 0 50%, #7a1328 50% 100%); color: #fff; }
button.on, .chip.on, .tab.on { border-color: #d6ffb0 #2c6a00 #2c6a00 #d6ffb0; background: linear-gradient(180deg, #4fc21e 0 50%, #2f9a0e 50% 100%); box-shadow: 3px 3px 0 rgba(0,0,0,.85); }
button[disabled] { opacity: .45; }
/* the cursor: a bouncing gold arrow on whatever is highlighted (big menu buttons and list rows) */
@keyframes curs { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(5px, -50%); } }
.mbig:hover::before, .mbig:focus-visible::before, .tray-sub button:hover::before, .tray-sub button:focus-visible::before,
.song:focus-visible::before, .song.sel::before {
  content: "▶"; position: absolute; left: -26px; top: 50%; color: var(--gold); font-size: 20px;
  text-shadow: var(--ol2); animation: curs .5s steps(2) infinite;
}

/* ---------- the ? help button */
button.help { margin-left: auto; min-width: 40px; height: 40px; padding: 0; font-size: 20px; color: var(--gold); flex: none; }
.head button.help { order: 99; }
button.help.corner { position: absolute; right: 22px; top: 18px; z-index: 5; }

/* ---------- inputs: sunken boxes */
input, select {
  border-radius: 2px; border: 3px solid; border-color: var(--bv-lo) var(--bv-hi) var(--bv-hi) var(--bv-lo);
  background: #0b0418; font-family: var(--body);
}
input:focus, select:focus { border-color: #6a4a00 #fff36b #fff36b #6a4a00; }
/* checkboxes + radios: square pixel boxes */
.check input[type=checkbox], .check input[type=radio] {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none; padding: 0;
  border: 3px solid; border-color: var(--bv-lo) var(--bv-hi) var(--bv-hi) var(--bv-lo); background: #0b0418; cursor: pointer; position: relative;
}
.check input[type=radio] { border-radius: 50%; }
.check input:checked { background: var(--lime); box-shadow: inset 0 0 0 3px #0b0418; }
.check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* sliders: a sunken track and a gold block */
input[type=range] { -webkit-appearance: none; appearance: none; height: 14px; padding: 0; border-width: 3px; background: #0b0418; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 24px; border: 3px solid; border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; background: linear-gradient(180deg, #ffd23b 0 50%, #ff9f1a 50%); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 12px; height: 20px; border: 3px solid; border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; background: #ffb43a; border-radius: 0; }

/* ---------- list rows, cards and info boxes: sunken bevel tiles */
.song, .card, .picker, .grid div, .mstats div, .market .mrow, .studio .mine .mrow, .lockbox, .bm-grid, .stats > div {
  border-radius: 2px; border: 3px solid; border-color: var(--bv-lo) #4a3496 #4a3496 var(--bv-lo); background: rgba(5,2,14,.55);
}
.song { background: linear-gradient(180deg, rgba(40,22,90,.85) 0 50%, rgba(30,15,72,.85) 50%); border-color: #6d55d6 var(--bv-lo) var(--bv-lo) #6d55d6; box-shadow: 3px 3px 0 rgba(0,0,0,.7); }
.songlist .list { padding-left: 30px; }
.song.sel { border-color: #ffb3f0 #6a1080 #6a1080 #ffb3f0; background: linear-gradient(180deg, #c03aa8 0 50%, #a02b8e 50%); box-shadow: 3px 3px 0 rgba(0,0,0,.8); }
.picker { padding: 6px 6px 6px 12px; }
.card.owned { border-color: #2c6a00 #8fe060 #8fe060 #2c6a00; }
.cardbtn, .cardbtn:hover:not([disabled]), .cardbtn:focus-visible { background: transparent; border-color: transparent; box-shadow: none; }
.tabs { gap: 6px; }
.tab { font-size: 13px; padding: 7px 12px; }
.diff { padding: 7px 4px; }

/* ---------- toast + loading: dialogue boxes */
.toast { border-radius: 2px; border: 4px solid; border-color: var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi); background: #1c0d44; box-shadow: var(--hard); font-family: var(--body); }
.toast.good { border-color: #d6ffb0 #2c6a00 #2c6a00 #d6ffb0; } .toast.bad { border-color: #ffb3bb #6a0d1a #6a0d1a #ffb3bb; }
.spin { border-radius: 0; border: none; width: 40px; height: 40px; background: conic-gradient(var(--pink) 0 25%, var(--cyan) 0 50%, var(--gold) 0 75%, var(--lime) 0); animation: spin 1s steps(8) infinite; box-shadow: var(--hard); }
::-webkit-scrollbar { width: 14px; } ::-webkit-scrollbar-track { background: rgba(0,0,0,.45); }
::-webkit-scrollbar-thumb { border-radius: 0; border: 3px solid; border-color: var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi); background: var(--pl-top); }

/* ---------- title screen (main menu): giant logo up top, dancers in the middle, a centred menu tray below */
.title-screen { position: absolute; inset: 0; pointer-events: none; }
.title-screen > * { pointer-events: auto; }
.logo.giant { position: absolute; left: 50%; top: 4vh; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; }
.logo.giant span:first-child { font-size: clamp(64px, 12vh, 136px); }
.logo.giant span:last-child { font-size: clamp(80px, 16vh, 184px); }
.ts-wallet { position: absolute; right: 74px; top: 18px; }
.ts-wallet .wallet { border-radius: 2px; border: 3px solid; border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; background: rgba(10,4,24,.85); box-shadow: var(--hard); }
.menu-tray { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 14px; align-items: center; width: min(860px, 92vw); }
.tray-main { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; width: 100%; }
.mbig { flex-direction: column; gap: 4px; padding: 16px 18px; min-height: 104px; }
.mbig b { font-size: 40px; font-weight: normal; line-height: 1; }
.mbig small { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-shadow: var(--ol1); color: #fff; }
.mbig small b { font-size: 14px; font-family: var(--body); font-weight: 700; color: var(--gold); }
/* the Market: the big feature, with a scrolling neon stripe and a stepping HOT! sticker */
/* the stripes are a 40px tile that repeats without a seam (so sliding it one tile along loops perfectly), over a smooth
   blue fade (a hard two-tone split would cut across the stripes) */
@keyframes stripes { from { background-position: 0 0, 0 0; } to { background-position: 40px 0, 0 0; } }
.mbig.mkcard {
  border-color: #b8fbff #0d4a7a #0d4a7a #b8fbff;
  background-image: linear-gradient(-45deg, rgba(255,255,255,.11) 25%, transparent 25% 50%, rgba(255,255,255,.11) 50% 75%, transparent 75%), linear-gradient(180deg, #2ec2ef, #1a86d6 55%, #1468bd);
  background-size: 40px 40px, 100% 100%; background-repeat: repeat, no-repeat;
  animation: stripes 1.2s linear infinite; box-shadow: 4px 4px 0 rgba(0,0,0,.9);
}
.mbig.mkcard b { font-size: 32px; }
.mbig.mkcard:hover:not([disabled]), .mbig.mkcard:focus-visible {
  border-color: #fff #0d4a7a #0d4a7a #fff;
  background-image: linear-gradient(-45deg, rgba(255,255,255,.16) 25%, transparent 25% 50%, rgba(255,255,255,.16) 50% 75%, transparent 75%), linear-gradient(180deg, #58d8ff, #2c97e6 55%, #1f7ad0);
  background-size: 40px 40px, 100% 100%; background-repeat: repeat, no-repeat;
}
@keyframes hot { 0%, 100% { transform: rotate(14deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
.mbig .hot {
  position: absolute; right: -14px; top: -16px; font-size: 16px; padding: 4px 9px; color: #fff; background: var(--red);
  border: 3px solid; border-color: #ffc7cd #6a0d1a #6a0d1a #ffc7cd; box-shadow: 3px 3px 0 #000; text-shadow: var(--ol1);
  animation: hot .6s steps(2) infinite;
}
.tray-sub { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; }
.tray-sub button { padding: 10px 6px; font-size: 16px; }
.title-screen .stats { position: absolute; left: 22px; bottom: 12px; margin: 0; width: 300px; }
.title-screen .stats > div { padding: 6px 4px; }
.title-screen .nowplaying { left: auto; transform: none; right: 22px; bottom: 12px; border-radius: 2px; border: 3px solid; border-color: var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi); background: rgba(10,4,24,.82); font-family: var(--body); }
@media (max-width: 1100px) { .title-screen .stats { display: none; } }
@media (max-height: 760px) { .mbig { min-height: 84px; padding: 10px 14px; } .mbig b { font-size: 32px; } .mbig.mkcard b { font-size: 24px; } .menu-tray { bottom: 84px; gap: 10px; } }

/* ---------- boot + signup */
.signup-panel { border-radius: 3px; }

/* ---------- the tutorial: an RPG text box with DJ Raccoon's portrait */
.tut { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6vh; }
@keyframes tutin { from { transform: translateY(40px); opacity: 0; } }
.tut-box {
  display: flex; gap: 22px; width: min(1080px, 95vw); padding: 22px; animation: tutin .25s steps(5);
  border: 5px solid; border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; background: linear-gradient(180deg, #1d0d48, #0e0526); box-shadow: 7px 7px 0 #000, inset 0 0 0 3px rgba(0,0,0,.5);
}
.tut-face { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tut-face img { width: 176px; height: 176px; image-rendering: pixelated; border: 4px solid; border-color: var(--bv-lo) var(--bv-hi) var(--bv-hi) var(--bv-lo); background: linear-gradient(#3a1d8c, #120530); }
.tut-face span { font-family: var(--head); font-size: 16px; color: var(--gold); text-shadow: var(--ol1); }
.tut-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tut-title { font-family: var(--head); font-size: 28px; color: var(--cyan); text-shadow: var(--ol2); margin-bottom: 8px; }
.tut-text { flex: 1; font-family: var(--body); font-size: 25px; line-height: 1.4; color: #fff; min-height: 140px; cursor: pointer; text-shadow: 2px 2px 0 #000; }
.tut-text b { color: var(--gold); font-weight: 700; }
.tut-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tut-page { font-family: var(--head); font-size: 15px; color: rgba(255,255,255,.6); text-shadow: var(--ol1); }
@keyframes more { 50% { transform: translateY(4px); } }
.tut-more { color: var(--gold); animation: more .5s steps(2) infinite; margin-right: auto; }
.tut.typing .tut-more { visibility: hidden; }
.tut-foot button { font-size: 16px; padding: 10px 18px; }
/* HOW-TO walkthroughs: a pulsing ring round what the page talks about (its shadow dims everything else), the text box
   moving to the top when that's low down, and the menu of guides */
.tut.spot { background: transparent; }
.tut.top { align-items: flex-start; padding: 4vh 0 0; }
.tut-box { position: relative; }
@keyframes ring { 50% { border-color: #fff4b0; } }
.tut-ring { position: fixed; pointer-events: none; border: 4px solid var(--gold); box-shadow: 0 0 0 200vmax rgba(0,0,0,.5), 0 0 18px var(--gold), inset 0 0 12px rgba(255,210,59,.5); animation: ring .5s steps(2) infinite; transition: left .12s steps(3), top .12s steps(3), width .12s steps(3), height .12s steps(3); }
.tut.menu .tut-text { flex: none; min-height: 0; cursor: default; }
.tut.menu .tut-page, .tut.menu .tut-more, .tut.menu .tut-skip { display: none; }
.tut.menu .tut-next { margin-left: auto; }
.tut-choices { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0 2px; }
.tut-choices button { font-size: 16px; padding: 8px 16px; text-align: left; }
.head button.howto { order: 98; margin-left: auto; height: 40px; padding: 0 12px; font-size: 16px; color: var(--gold); flex: none; }
.head button.howto:not([hidden]) ~ button.help { margin-left: 0; } button.howto[hidden] { display: none; }
button.howlink { font-size: 13px; padding: 4px 10px; color: var(--gold); }
/* no rounded pills anywhere: square, bevelled chips and the cash plaque */
.chip, .wallet, .stylebadge { border-radius: 2px; }
.chip { border: 3px solid; border-color: var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi); }
/* ---------- the logo, Mario 64 style: every letter its own colour, a dark outline, a chunky 3D extrusion,
   and the letters bob out of step like a title screen from 1996 */
.logo { line-height: 1; }
.logo span { white-space: nowrap; animation: none; }
.logo span:first-child, .logo span:last-child { text-shadow: none; color: inherit; }
.logo i {
  --c: var(--gold); --d: #8a5a00; --e: .1em;
  display: inline-block; font-style: normal; color: var(--c); margin: 0 .01em;
  text-shadow: var(--ol4),
    .02em .02em 0 var(--d), .04em .04em 0 var(--d), .06em .06em 0 var(--d), .08em .08em 0 var(--d), var(--e) var(--e) 0 var(--d),
    calc(var(--e) + 4px) calc(var(--e) + 4px) 0 var(--ink2), 0 0 .5em rgba(255,79,216,.35);
  animation: bob 1.2s steps(4) infinite;
}
.logo.small i { --e: .08em; text-shadow: var(--ol3), .03em .03em 0 var(--d), .06em .06em 0 var(--d), var(--e) var(--e) 0 var(--d), calc(var(--e) + 3px) calc(var(--e) + 3px) 0 var(--ink2); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-.06em) rotate(3deg); } }
.logo i:nth-child(4n+1) { --c: #ff3b3b; --d: #7a0b12; animation-delay: 0s; }
.logo i:nth-child(4n+2) { --c: #3bd96a; --d: #0b5a24; animation-delay: -.3s; }
.logo i:nth-child(4n+3) { --c: #ffd23b; --d: #8a5a00; animation-delay: -.6s; }
.logo i:nth-child(4n+4) { --c: #3b8bff; --d: #0b2a7a; animation-delay: -.9s; }
.logo span:last-child i:nth-child(4n+1) { --c: #3b8bff; --d: #0b2a7a; }
.logo span:last-child i:nth-child(4n+2) { --c: #ffd23b; --d: #8a5a00; }
.logo span:last-child i:nth-child(4n+3) { --c: #ff3b3b; --d: #7a0b12; }
.logo span:last-child i:nth-child(4n+4) { --c: #3bd96a; --d: #0b5a24; }
/* the pixel face reads best on its own 8px grid: snap the bigger labels to multiples of 8 */
.tut-title { font-size: 32px; } .tut-face span, .tut-page { font-size: 16px; }
button, .filebtn { font-size: 16px; } button.big { font-size: 24px; } button.huge { font-size: 32px; } .tab { font-size: 16px; }
.songinfo .playrow .huge { min-width: 0; margin-top: 0; }
.songinfo .playrow .video { font-size: 16px; padding: 6px 12px; max-width: 150px; white-space: normal; line-height: 1.3; }
/* ---------- the CRITTER FEVER logo: hot pink CRITTER over a fire-coloured FEVER that runs hot (its glow pulses like a
   fever, red to orange to yellow and back), on the same chunky outline + extrusion as above */
.logo span:first-child i:nth-child(n) { --c: #ff5fb4; --d: #8a0f52; --g: rgba(255,95,180,.55); }
.logo span:last-child i:nth-child(1), .logo span:last-child i:nth-child(5) { --c: #ff3b2f; --d: #7a0a0a; --g: rgba(255,59,47,.7); }
.logo span:last-child i:nth-child(2), .logo span:last-child i:nth-child(4) { --c: #ff8a1f; --d: #8a3200; --g: rgba(255,138,31,.7); }
.logo span:last-child i:nth-child(3) { --c: #ffd23b; --d: #8a5a00; --g: rgba(255,210,59,.75); }
.logo i { text-shadow: var(--ol4),
    .02em .02em 0 var(--d), .04em .04em 0 var(--d), .06em .06em 0 var(--d), .08em .08em 0 var(--d), var(--e) var(--e) 0 var(--d),
    calc(var(--e) + 4px) calc(var(--e) + 4px) 0 var(--ink2), 0 0 .4em var(--g); }
@keyframes fever { 0%, 100% { filter: drop-shadow(0 0 .08em rgba(255,70,30,.55)) brightness(1); } 50% { filter: drop-shadow(0 0 .22em rgba(255,150,40,.9)) brightness(1.12); } }
.logo span:last-child { animation: fever 1.1s steps(6) infinite; }
/* CRITTER has seven letters to FEVER's five: a touch smaller so the two lines sit about the same width */
.logo.giant span:first-child { font-size: clamp(52px, 10vh, 116px); }
.logo.giant span:last-child { font-size: clamp(78px, 15.5vh, 178px); }
.boot .logo span:first-child { font-size: clamp(48px, 9vh, 104px); }
.boot .logo span:last-child { font-size: clamp(72px, 14vh, 160px); }
.logo.small span:first-child { font-size: 34px; } .logo.small span:last-child { font-size: 50px; }

/* ---------- CRT while you play: heavier scanlines, a faint RGB shadow mask and a slow rolling refresh band over the
   highway and the HUD (still off with the Settings switch) */
@keyframes crtroll { from { background-position: 0 0, 0 0, 0 -30vh, 0 0; } to { background-position: 0 0, 0 0, 0 130vh, 0 0; } }

body.crt.playing::after {
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.30) 0 2px, rgba(0,0,0,0) 2px 4px),
    repeating-linear-gradient(to right, rgba(255,40,80,.05) 0 1px, rgba(40,255,120,.05) 1px 2px, rgba(60,120,255,.05) 2px 3px),
    linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.05) 6vh, rgba(255,255,255,0) 12vh),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,.5) 100%);
  background-size: auto, auto, 100% 12vh, auto; background-repeat: repeat, repeat, no-repeat, no-repeat;
  animation: crtroll 7s linear infinite;
}
/* the pause menu's master volume: a narrow panel, so a narrower label column */
.pause .slider { grid-template-columns: 64px 1fr 56px; gap: 10px; margin: 4px 0; }
.pause .slider input { width: 100%; min-width: 0; }

/* ---------- bests, gold and leaderboards */
/* each difficulty button shows your best on it; 100% on a difficulty makes its button gold */
.diff .bs { font-style: normal; font-family: var(--body); font-size: 11px; color: rgba(255,255,255,.75); margin-top: 2px; }
@keyframes goldshine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
button.diff.gold, .tab.gold { border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; background: linear-gradient(180deg, #ffd23b 0 50%, #f0a516 50% 100%); color: #3a1c00; animation: goldshine 1.6s steps(4) infinite; }
button.diff.gold b { color: #3a1c00; text-shadow: 1px 1px 0 #fff4b0; }
button.diff.gold small, button.diff.gold .bs { color: #5a2c00; text-shadow: none; }
/* the selected gold one: a paler, brighter gold */
button.diff.gold.on, .tab.gold.on { border-color: #ffffff #c08a10 #c08a10 #ffffff; background: linear-gradient(180deg, #fff3a8 0 50%, #ffd95a 50% 100%); box-shadow: 0 0 14px rgba(255,236,140,.75), 3px 3px 0 rgba(0,0,0,.85); }
/* 100% on Expert turns the song itself gold in the list */
.song.gold { border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; background: linear-gradient(180deg, #e6b422 0 50%, #c98a10 50%); animation: goldshine 1.6s steps(4) infinite; }
.song.gold .t { color: #fff; text-shadow: var(--ol2); } .song.gold .a { color: #3a1c00; }
.song.gold .r { color: #fff4b0; text-shadow: var(--ol2); font-family: var(--head); }
.song.gold.sel { border-color: #ffb3f0 #6a1080 #6a1080 #ffb3f0; }
.fc.gold { color: var(--gold); }
.fcbanner.gold { color: var(--gold); font-size: 20px; line-height: 1.25; text-shadow: var(--ol3), 0 0 22px rgba(255,210,59,.9); }
.c-gold { color: var(--gold); }
/* the leaderboard bar on the song panel */
button.board { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 10px; margin: -4px 0 12px; font-size: 13px; }
button.board .bt { font-family: var(--head); font-size: 13px; color: var(--gold); white-space: nowrap; }
button.board .bl { font-family: var(--body); font-size: 12px; line-height: 1.3; color: rgba(255,255,255,.85); text-align: right; min-width: 0; }
button.board .bl b { color: #fff; }
.results .wrank { font-size: 15px; margin: 4px 0 10px; } .results .wrank b { color: var(--gold); }
/* the leaderboard window */
.lbov { cursor: default; background: rgba(0,0,0,.55); z-index: 50; }
.lbov .panel.lb { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lb .head { display: flex; align-items: center; justify-content: space-between; } .lb .head h2 { margin: 0; font-size: 32px; }
.lb .lbsong { font-size: 15px; } .lb .tabs { display: flex; }
.lb .lblist { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.lbrow { display: grid; grid-template-columns: 52px 1fr auto 110px; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 2px; border: 3px solid; border-color: var(--bv-lo) #4a3496 #4a3496 var(--bv-lo); background: rgba(5,2,14,.55); font-size: 15px; }
.lbrow .rk { font-family: var(--head); color: var(--cyan); } .lbrow .sc { text-align: right; font-family: var(--head); }
.lbrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbrow .pc { color: rgba(255,255,255,.7); font-size: 13px; }
.lbrow.gold .pc { color: var(--gold); }
.lbrow.me { border-color: #ffb3f0 #6a1080 #6a1080 #ffb3f0; background: rgba(192,58,168,.35); }
.lbrow:nth-child(1) .rk { color: var(--gold); }
.lbgap { text-align: center; color: rgba(255,255,255,.5); line-height: 1; }

/* ---------- Duo Dance */
.tray-sub .duo-btn { color: var(--gold); }
.duo-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 26px 30px; font-size: 18px; }
.duo-panel > p { font-size: 17px; line-height: 1.5; margin: 0; }
.duo-panel .head { display: flex; align-items: center; gap: 12px; } .duo-panel h2 { margin: 0; }
.duo-choices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: stretch; }
.duo-choices .mbig { min-height: 200px; min-width: 0; }
.duo-choices .mbig b { font-size: 40px; line-height: 1.1; } .duo-choices .mbig small { font-size: 15px; }
.joinbox { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px 22px; border-radius: 2px; border: 3px solid; border-color: var(--bv-lo) #4a3496 #4a3496 var(--bv-lo); background: rgba(5,2,14,.55); }
.joinbox b { font-family: var(--head); font-size: 28px; color: var(--cyan); } .joinbox small { color: rgba(255,255,255,.7); font-size: 15px; }
.joinbox .row { display: flex; gap: 10px; min-width: 0; } .joinbox input { flex: 1; min-width: 0; width: 100%; font-family: var(--head); font-size: 40px; letter-spacing: 12px; text-align: center; text-transform: uppercase; padding: 10px; }
.joinbox .row button { flex: none; font-size: 20px; padding: 0 22px; }
.duo-lobby { position: absolute; left: 3vw; top: 4vh; bottom: 4vh; display: flex; gap: 18px; width: min(1060px, 74vw); }
.dl-room { flex: 1.2; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.dl-players { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.dl-room .head { display: flex; align-items: center; gap: 10px; } .dl-room h2 { margin: 0; }
.dl-code { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dl-code small { font-family: var(--head); color: var(--cyan); font-size: 12px; }
.dl-code b { font-family: var(--head); font-size: 44px; letter-spacing: 10px; color: var(--gold); text-shadow: var(--ol3), 4px 4px 0 var(--ink2); }
.dl-sec { font-family: var(--head); font-size: 13px; color: var(--pink); margin-top: 6px; letter-spacing: 1px; }
.dl-modes { display: flex; }
.dl-songs { display: flex; flex-direction: column; gap: 6px; max-height: 210px; overflow-y: auto; padding: 2px 4px 2px 30px; }
.dl-songs .song { padding: 6px 10px; }
.dl-pick { font-size: 18px; padding: 6px 0; }
.dl-pick .muted { display: block; margin-top: 4px; }
.dl-sub { font-family: var(--head); font-size: 11px; color: var(--gold); letter-spacing: 1px; margin: 6px 0 0; }
.dl-kind { font-style: normal; font-family: var(--head); font-size: 9px; color: var(--ink2); background: var(--gold); border-radius: 3px; padding: 1px 4px; margin-right: 6px; vertical-align: 1px; }
.dl-card { padding: 12px 14px; border-radius: 2px; border: 3px solid; border-color: var(--bv-lo) #4a3496 #4a3496 var(--bv-lo); background: rgba(5,2,14,.55); display: flex; flex-direction: column; gap: 6px; }
.dl-card.me { border-color: #ffb3f0 #6a1080 #6a1080 #ffb3f0; }
.dl-card small { font-family: var(--head); font-size: 11px; color: var(--cyan); } .dl-card > b { font-size: 20px; }
.dl-ch { color: var(--gold); font-family: var(--head); font-size: 15px; }
.dl-vs { text-align: center; font-family: var(--head); font-size: 34px; color: var(--pink); text-shadow: var(--ol3), 3px 3px 0 var(--ink2); line-height: 1; }
.dl-go { margin-top: auto; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.duo-results { position: absolute; right: 4vw; top: 50%; transform: translateY(-50%); width: min(560px, 92vw); display: flex; flex-direction: column; gap: 12px; text-align: center; }
.dr-head { font-family: var(--head); font-size: 54px; line-height: 1; text-shadow: var(--ol3), 5px 5px 0 var(--ink2); }
.dr-head.good { color: var(--gold); } .dr-head.bad { color: var(--red); }
.dr-team small { font-family: var(--head); color: var(--cyan); font-size: 12px; display: block; } .dr-team b { font-family: var(--head); font-size: 36px; }
.dr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dr-col { padding: 12px; border-radius: 2px; border: 3px solid; border-color: var(--bv-lo) #4a3496 #4a3496 var(--bv-lo); background: rgba(5,2,14,.55); display: flex; flex-direction: column; gap: 4px; }
.dr-col.won { border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; box-shadow: 0 0 18px rgba(255,210,59,.5); }
.dr-col small { font-family: var(--head); font-size: 11px; color: var(--cyan); } .dr-col .nm { font-size: 18px; }
.dr-col .sc { font-family: var(--head); font-size: 28px; } .dr-col .bad { color: var(--red); }
.duo-results .row { display: flex; gap: 10px; justify-content: center; }
.duoleave .panel { gap: 10px; }
@media (max-width: 900px) { .duo-choices { grid-template-columns: 1fr; } .duo-lobby { flex-direction: column; width: auto; right: 3vw; overflow-y: auto; } }
/* Duo Dance: wagers and pauses */
.dl-wager { padding: 10px 12px; border-radius: 2px; border: 3px solid; border-color: #fff4b0 #9a5a00 #9a5a00 #fff4b0; background: rgba(40,24,0,.55); display: flex; flex-direction: column; gap: 6px; }
.dl-wager .dl-sec { margin-top: 0; color: var(--gold); }
.dl-wrow { display: flex; gap: 8px; align-items: center; }
.dl-wrow input { width: 110px; font-family: var(--head); font-size: 22px; text-align: right; padding: 4px 8px; }
.dl-dollar { font-family: var(--head); font-size: 22px; color: var(--gold); }
.dl-won { font-size: 15px; } .dl-won b { color: var(--gold); font-family: var(--head); } .dl-won.hot { color: #fff; animation: goldshine 1s steps(4) infinite; }
.dl-won.on { color: var(--lime); }
button.small { font-size: 12px; padding: 4px 8px; align-self: flex-start; }
.dr-wager { font-family: var(--head); font-size: 20px; padding: 8px; border-radius: 2px; background: rgba(0,0,0,.4); }
.dr-wager.good { color: var(--gold); text-shadow: 0 0 14px rgba(255,210,59,.7); } .dr-wager.bad { color: var(--red); }
.duopause, .duoleave { z-index: 60; }
.duopause .panel, .duoleave .panel { width: 380px; }
.dp-clock { font-family: var(--head); font-size: 56px; color: #fff; text-shadow: var(--ol3), 4px 4px 0 var(--ink2); }
.dp-clock.out { color: var(--red); animation: goldshine .6s steps(2) infinite; }
.duoleave button small { font-family: var(--body); font-size: 11px; opacity: .8; }

/* ---------- the Critter Fever title art: low-res animated frames, scaled up crisp (no smoothing) like a 90s console */
.title-art, .logo-art { display: block; image-rendering: pixelated; image-rendering: crisp-edges; user-select: none; pointer-events: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.screen-boot .title-art { height: min(66vh, 64vw); width: auto; max-width: 92vw; }
.logo-art.giant { position: absolute; left: 50%; top: 2vh; transform: translateX(-50%); height: clamp(150px, 38vh, 380px); width: auto; }
.logo-art.small { height: 120px; width: auto; margin: 0 auto 6px; }
@media (max-height: 760px) { .logo-art.giant { height: clamp(130px, 34vh, 300px); } }

/* before the title: one press to let the sound out (browsers keep a page silent until then) */
.screen-boot .boot.gate { background: rgba(4, 2, 12, .92); gap: 18px; }
.boot .gate-msg { font-family: var(--head); font-size: clamp(20px, 3.2vh, 30px); color: var(--gold); text-shadow: var(--ol3), 3px 4px 0 var(--ink2); animation: blink 1.2s steps(2) infinite; text-align: center; padding: 0 16px; }

/* the Shed Studios intro movie, before the title */
.screen-boot .boot.intro { background: #000; gap: 0; }
.intro-movie { width: 100vw; height: 100vh; object-fit: contain; background: #000; display: block; }

/* the title arriving after the intro: black, the title pops in, then the club fades in behind it */
.boot.title-in .boot-black { position: absolute; inset: 0; background: #000; animation: bootfade 1.8s ease-in-out .75s both; pointer-events: none; }
.boot.title-in .title-art { position: relative; animation: titlepop .6s cubic-bezier(.18, 1.7, .45, 1) both; }
.boot.title-in .hint { position: relative; animation: bootfade 1s ease 2.2s both reverse; }
@keyframes bootfade { from { opacity: 1; } to { opacity: 0; } }
@keyframes titlepop { 0% { transform: scale(.2); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* testing a chart: just the highway on black (the club canvas is hidden and not drawn) */
body.bare-play #gl { visibility: hidden; }