#radio-win{ transition: width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1); }
#radio-win.rhythm-mode{
  width:780px !important;
}
/* Hide stuff we don't need while jamming */
#radio-win.rhythm-mode #scene{ height:430px !important; }
#radio-win.rhythm-mode #vizwrap{ display:none; }
#radio-win.rhythm-mode #ov{ display:none; }
#radio-win.rhythm-mode #tbdg{ display:none; }
#radio-win.rhythm-mode #mqwrap,
#radio-win.rhythm-mode #npcard,
#radio-win.rhythm-mode .crow,
#radio-win.rhythm-mode #urlrow,
#radio-win.rhythm-mode #radio-term{ display:none; }
#radio-win.rhythm-mode #sc{ opacity:0.18; }

/* Rhythm overlay — fills the scene */
#rg-stage{
  position:absolute; inset:0; z-index:5;
  display:none;
  font-family:'Share Tech Mono', monospace;
  background:
    linear-gradient(90deg,rgba(167,139,250,.08),transparent 28%,transparent 72%,rgba(88,219,255,.07)),
    radial-gradient(ellipse at 50% 28%, rgba(88,219,255,0.12) 0%, transparent 62%), #030207;
  overflow:hidden;
  user-select:none;
}
#rg-stage.on{ display:block; }
#rg-stage::after{
  content:"";position:absolute;inset:0;z-index:12;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.42;
}

/* Subtle dance-floor grid */
#rg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(88,219,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,219,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  perspective: 600px;
  transform: rotateX(55deg) translateZ(-100px) translateY(40%);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent 0%, black 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 60%);
  animation: rgGridScroll 1.6s linear infinite;
  opacity:0.6;
}
@keyframes rgGridScroll{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 40px, 0 0; }
}

/* Lights array along top */
#rg-lights{
  position:absolute; top:8px; left:0; right:0; height:14px;
  display:flex; gap:4px; justify-content:center;
  z-index:6;
}

#rg-map-info{
  position:absolute;top:26px;left:50%;z-index:8;
  width:330px;transform:translateX(-50%);text-align:center;pointer-events:none;
  font:8px 'Share Tech Mono',monospace;letter-spacing:1px;color:rgba(255,255,255,.58);
}
#rg-map-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rg-map-title{font-size:10px;color:#fff;letter-spacing:1.6px;text-shadow:0 0 8px var(--rgc,#58dbff)}
#rg-map-meta{margin-top:2px;font-size:7px}
#rg-adaptive{display:inline-block!important;width:auto;margin-top:3px;padding:2px 5px;border:1px solid rgba(255,255,255,.18);color:#ffe66a;background:rgba(0,0,0,.34)}
#rg-stage[data-difficulty="4"] #rg-adaptive{color:#ff9f6e;border-color:rgba(255,159,110,.42)}
#rg-stage[data-difficulty="5"] #rg-adaptive{color:#ff6ea8;border-color:rgba(255,110,168,.55);text-shadow:0 0 8px rgba(255,110,168,.65)}
#rg-section{display:inline-block!important;width:auto;margin-top:3px;padding:2px 5px;border:1px solid color-mix(in srgb,var(--rgc,#58dbff) 42%,transparent);color:var(--rgc,#58dbff)}
.rg-bulb{
  width:10px; height:10px; border-radius:50%;
  background:#1a1d28;
  box-shadow: inset 0 0 0 1px #2a2d38;
  transition: background .12s, box-shadow .12s, transform .12s;
}
.rg-bulb.on{
  background: var(--rgc, #58dbff);
  box-shadow: 0 0 14px var(--rgc, #58dbff), 0 0 4px #fff, inset 0 0 4px #fff;
  transform: scale(1.4);
}

/* Lane highway */
#rg-track{
  position:absolute;
  left:50%; top:18px; bottom:0;
  width:280px;
  transform: translateX(-50%);
  display:flex;
  z-index:7;
}
.rg-lane{
  flex:1;
  position:relative;
  border-left:1px solid rgba(88,219,255,0.10);
  border-right:1px solid rgba(88,219,255,0.10);
  background: linear-gradient(180deg, rgba(88,219,255,0.02), rgba(88,219,255,0.07));
  overflow:hidden;
}
.rg-lane.flash{ background: linear-gradient(180deg, rgba(255,255,255,0.0), var(--rgc-flash, rgba(88,219,255,0.35))); }
/* Receptors at the bottom — where you press */
.rg-receptor{
  position:absolute; left:50%; bottom:60px;
  transform: translateX(-50%);
  width:46px; height:46px;
  border:2px solid rgba(255,255,255,0.35);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:rgba(255,255,255,0.55);
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  transition: transform .08s, border-color .08s, background .08s, color .08s;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
  z-index:2;
}
.rg-receptor.held{
  transform: translateX(-50%) scale(0.9);
  border-color: var(--rgc, #58dbff);
  color: var(--rgc, #58dbff);
  background: rgba(88,219,255,0.18);
  box-shadow: 0 0 14px var(--rgc, #58dbff), inset 0 0 8px var(--rgc, #58dbff);
}
.rg-receptor.hit{
  border-color: #fff;
  background: var(--rgc, #58dbff);
  color: #000;
}
/* Falling note */
.rg-note{
  position:absolute; left:50%;
  transform: translateX(-50%);
  width:42px; height:42px;
  border:2px solid var(--rgc, #58dbff);
  background: linear-gradient(180deg, var(--rgc-2, #58dbff), var(--rgc, #1a8fbf));
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:#000;
  font-size:20px; font-weight:700;
  box-shadow: 0 0 10px var(--rgc, #58dbff), inset 0 1px 0 rgba(255,255,255,0.5);
  z-index:1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.rg-note.kick{border-color:#ff6b72;background:linear-gradient(180deg,#ff9b83,#d83c58);box-shadow:0 0 12px #ff536d}
.rg-note.snare{border-color:#f5c344;background:linear-gradient(180deg,#ffe88b,#d89a24);box-shadow:0 0 12px #f5c344}
.rg-note.hat{border-color:#80f7ff;background:linear-gradient(180deg,#c6fbff,#42cbdc);box-shadow:0 0 12px #58dbff}
.rg-note.melody{border-color:#c8a8ff;background:linear-gradient(180deg,#e5d6ff,#956be3);box-shadow:0 0 12px #a78bfa}
.rg-note::after{position:absolute;right:2px;bottom:0;font-size:6px;line-height:1;color:rgba(0,0,0,.65);content:attr(data-instrument);text-transform:uppercase}
.rg-note.miss{ filter: grayscale(1) brightness(0.5); transition: opacity .3s; opacity:0; }
.rg-note.hit{ animation: rgNoteHit .25s forwards; }
.rg-note.hold{
  border-radius:6px 6px 0 0;
  box-shadow: 0 0 14px var(--rgc, #58dbff), inset 0 1px 0 rgba(255,255,255,0.6);
}
.rg-note.holding{ box-shadow: 0 0 22px #fff, 0 0 14px var(--rgc, #58dbff); }
.rg-hold-tail{
  position:absolute; left:50%;
  transform: translateX(-50%);
  width:30px;
  background: linear-gradient(180deg, var(--rgc, #58dbff), var(--rgc-2, #58dbff));
  opacity:0.55;
  z-index:0;
  border-radius:0;
  box-shadow: 0 0 10px var(--rgc, #58dbff);
}
.rg-hold-tail.miss{ filter: grayscale(1) brightness(0.4); opacity:0.2; }
.rg-hold-tail.done{ opacity:0; transition: opacity .25s; }
.rg-hold-tail.kick{background:linear-gradient(180deg,#ff6b72,#d83c58)}
.rg-hold-tail.snare{background:linear-gradient(180deg,#f5c344,#d89a24)}
.rg-hold-tail.hat{background:linear-gradient(180deg,#80f7ff,#42cbdc)}
.rg-hold-tail.melody{background:linear-gradient(180deg,#c8a8ff,#956be3)}
@keyframes rgNoteHit{
  0%   { transform: translateX(-50%) scale(1);   opacity:1; }
  100% { transform: translateX(-50%) scale(1.6); opacity:0; }
}

/* Splash ring on hit */
.rg-splash{
  position:absolute; left:50%; bottom:38px;
  width:56px; height:56px;
  transform: translateX(-50%);
  border:2px solid var(--rgc, #58dbff);
  border-radius:50%;
  pointer-events:none;
  animation: rgSplash .4s ease-out forwards;
}
@keyframes rgSplash{
  0%   { transform: translateX(-50%) scale(0.5); opacity:1; }
  100% { transform: translateX(-50%) scale(2.2); opacity:0; }
}

/* Hit text */
.rg-hittext{
  position:absolute; left:50%;
  transform: translateX(-50%);
  font-family:'JetBrains Mono', monospace;
  font-weight:800;
  font-size:18px;
  letter-spacing:2px;
  pointer-events:none;
  animation: rgHitText 0.7s cubic-bezier(.2,1,.2,1) forwards;
  z-index:8;
  text-shadow: 0 0 8px currentColor, 0 2px 0 rgba(0,0,0,0.6);
}
.rg-hittext.perfect{ color:#fff; }
.rg-hittext.good   { color:#58ffb7; }
.rg-hittext.ok     { color:#f5c344; }
.rg-hittext.miss   { color:#ff3d3d; }
@keyframes rgHitText{
  0%   { transform: translateX(-50%) translateY(0)    scale(0.6); opacity:0; }
  20%  { transform: translateX(-50%) translateY(-6px) scale(1.15); opacity:1; }
  80%  { opacity:1; }
  100% { transform: translateX(-50%) translateY(-30px) scale(1); opacity:0; }
}

/* Pixie cat dancer — directional poses replace the old ASCII mascot. */
#rg-cat-zone{
  position:absolute;
  left:18px;bottom:42px;width:205px;height:260px;
  z-index:7;
  pointer-events:none;
  transform-origin: 50% 100%;
  display:flex;align-items:flex-end;justify-content:center;
}
#rg-cat-glow{
  position:absolute;left:50%;bottom:8px;width:150px;height:30px;transform:translateX(-50%);
  border-radius:50%;background:var(--rgc,#58dbff);opacity:.16;filter:blur(13px);
}
#rg-cat-dancer{
  position:relative;z-index:2;display:block;max-width:190px;max-height:235px;
  image-rendering:pixelated;object-fit:contain;transform-origin:50% 88%;
  filter:drop-shadow(0 8px 0 rgba(0,0,0,.28)) drop-shadow(0 0 9px var(--rgc,#58dbff));
  transition:filter .08s;
}
#rg-stage.entering #rg-cat-dancer{opacity:0}
#rg-stage.entering #rg-track,#rg-stage.entering #rg-hud,#rg-stage.entering #rg-health-wrap{opacity:.18}
#rg-stage.entering #rg-cat-zone::before{
  content:"";position:absolute;left:50%;bottom:24px;width:116px;height:42px;transform:translateX(-50%);
  border:2px solid var(--rgc,#58dbff);border-radius:50%;box-shadow:0 0 20px var(--rgc,#58dbff),inset 0 0 18px var(--rgc,#58dbff);
  animation:rgPortal .5s steps(4,end) infinite;
}
#rg-stage.paused #rg-track{filter:grayscale(.8);opacity:.46}
#rg-resume-audio{
  display:none;position:absolute;z-index:25;left:50%;top:52%;transform:translate(-50%,-50%);
  padding:10px 16px;border:1px solid #ffdd66;background:rgba(4,7,13,.94);color:#ffdd66;
  font:700 11px/1 var(--mono,monospace);letter-spacing:1px;cursor:pointer;
  box-shadow:0 0 0 2px rgba(255,221,102,.12),0 0 24px rgba(255,221,102,.2);
}
#rg-stage.paused:not(.entering) #rg-resume-audio{display:block}
#rg-resume-audio:hover,#rg-resume-audio:focus-visible{background:#ffdd66;color:#080a10;outline:none}
@keyframes rgPortal{50%{transform:translateX(-50%) scale(1.14,.82);opacity:.45}}
#rg-cat-dancer[data-pose="left"]{transform:translateX(-14px) rotate(-4deg)}
#rg-cat-dancer[data-pose="right"]{transform:translateX(14px) rotate(4deg)}
#rg-cat-dancer[data-pose="down"]{transform:translateY(14px) scale(1.06,.9)}
#rg-cat-dancer[data-pose="up"]{transform:translateY(-15px) scale(.94,1.08)}
#rg-cat-dancer[data-pose="miss"]{filter:grayscale(.8) drop-shadow(0 0 10px #ff3d3d)}
#rg-cat-callout{
  position:absolute;left:12px;bottom:0;z-index:3;padding:3px 6px;
  border:1px solid color-mix(in srgb,var(--rgc,#58dbff) 50%,transparent);
  background:rgba(3,2,7,.84);color:var(--rgc,#58dbff);
  font:8px 'Share Tech Mono',monospace;letter-spacing:1.2px;
}
#rg-cat-zone.beat{animation:rgBeat .16s ease-out}
@keyframes rgBeat{
  0%   { transform: scale(1)   translateY(0); }
  40%  { transform: scale(1.045,.96) translateY(-7px); }
  100% { transform: scale(1)   translateY(0); }
}

/* HUD */
#rg-hud{
  position:absolute;
  top:24px; right:14px;
  z-index:8;
  text-align:right;
  font-family:'JetBrains Mono', monospace;
  pointer-events:none;
}
#rg-hud .lab{
  font-size:9px; letter-spacing:2px;
  color: rgba(255,255,255,0.45);
  text-transform:uppercase;
}
#rg-hud .val{
  font-size:22px; font-weight:700;
  color:#fff;
  text-shadow: 0 0 10px var(--rgc, #58dbff);
  font-variant-numeric: tabular-nums;
}
#rg-hud #rg-combo{
  font-size:34px; color: var(--rgc, #58dbff);
  font-weight:800;
  text-shadow: 0 0 14px var(--rgc, #58dbff);
}
#rg-hud .fade{
  animation: rgPunch .25s;
}
@keyframes rgPunch{
  0%   { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Health bar */
#rg-health-wrap{
  position:absolute;
  left:14px; top:30px; width:160px;
  z-index:8;
  font-family:'JetBrains Mono', monospace;
  pointer-events:none;
}
#rg-health-wrap .lab{
  font-size:9px; letter-spacing:2px; color:rgba(255,255,255,0.45);
  margin-bottom:4px;
}
#rg-health-bar{
  height:8px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  position:relative;
  overflow:hidden;
}
.rg-meter{height:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden}
#rg-diff-indicator{position:absolute;inset:0;right:auto;width:0;background:linear-gradient(90deg,#58dbff,#f5c344);box-shadow:0 0 8px #f5c344;transition:width .4s ease}
#rg-health-fill{
  position:absolute; inset:0; right:auto;
  width:50%;
  background: linear-gradient(90deg, var(--rgc-2,#58dbff), var(--rgc,#58dbff));
  box-shadow: 0 0 10px var(--rgc, #58dbff);
  transition: width .15s;
}

/* Bottom ribbon — track + key hints */
#rg-ribbon{
  position:absolute; left:0; right:0; bottom:0;
  height:42px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.85));
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 18px;
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:1px;
  color: rgba(255,255,255,0.6);
  z-index:9;
  pointer-events:none;
}
#rg-ribbon .keys{ color:var(--rgc, #58dbff); letter-spacing:3px; font-weight:700; }
#rg-ribbon .quit{ pointer-events:auto; cursor:pointer; }
#rg-ribbon .quit:hover{ color:#fff; }

/* Big banners (READY/GO/RESULTS) */
#rg-banner{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
  font-family:'JetBrains Mono', monospace;
  font-weight:800;
  font-size:64px;
  letter-spacing:8px;
  color: var(--rgc, #58dbff);
  text-shadow: 0 0 20px var(--rgc, #58dbff), 0 0 4px #fff;
  pointer-events:none;
  opacity:0;
}
#rg-banner.show{ animation: rgBanner 1.0s ease-out; }
@keyframes rgBanner{
  0%   { opacity:0; transform: scale(0.4); letter-spacing:30px; }
  20%  { opacity:1; transform: scale(1.1); letter-spacing:8px; }
  80%  { opacity:1; transform: scale(1); }
  100% { opacity:0; transform: scale(0.95); }
}

/* Results card */
#rg-results{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  z-index:11;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
}
#rg-results.show{ display:flex; }
#rg-results .card{
  width:min(380px,calc(100% - 20px));
  background: linear-gradient(180deg, #0d0a1b, #07050f);
  border:1px solid var(--rgc, #58dbff);
  box-shadow: 0 0 40px var(--rgc, rgba(88,219,255,0.5));
  padding:22px 28px;
  font-family:'JetBrains Mono', monospace;
  color:#fff;
}
#rg-results h3{
  font-size:11px; letter-spacing:5px;
  color: var(--rgc, #58dbff);
  margin-bottom:14px;
  text-align:center;
}
#rg-results .grade{
  font-size:96px; font-weight:900;
  text-align:center;
  color: var(--rgc, #58dbff);
  text-shadow: 0 0 30px currentColor;
  line-height:1;
  margin: 6px 0 14px;
}
#rg-results .row{
  display:flex; justify-content:space-between;
  font-size:11px; padding:5px 0;
  border-bottom:1px dashed rgba(255,255,255,0.1);
  letter-spacing:1px;
}
#rg-results .row:last-child{ border:none; }
#rg-results .row .v{ color: var(--rgc, #58dbff); font-weight:700; }
#rg-results .actions{
  display:flex; gap:8px; margin-top:14px;
}
#rg-results button{
  flex:1;
  background:transparent;
  border:1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:2px;
  padding:8px 0;
  cursor:pointer;
  transition: all .12s;
}
#rg-results button:hover{
  border-color: var(--rgc, #58dbff);
  color: var(--rgc, #58dbff);
  background: rgba(88,219,255,0.06);
}

/* Vibe button when game is active */
#vibe-btn.rhythm-on{
  border-color: var(--rgc, #58dbff) !important;
  color: var(--rgc, #58dbff) !important;
  background: rgba(88,219,255,0.16) !important;
  box-shadow: 0 0 14px var(--rgc, #58dbff) !important;
}

/* Screen shake on miss */
#radio-win.rhythm-shake #scene{ animation: rgShake 0.18s; }
@keyframes rgShake{
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-4px, 2px); }
  50%  { transform: translate(3px, -3px); }
  75%  { transform: translate(-2px, 2px); }
  100% { transform: translate(0,0); }
}

@media (max-width:620px){
  #rg-track{width:210px;left:58%;}
  .rg-receptor{width:38px;height:38px;font-size:17px}
  .rg-note{width:35px;height:35px;font-size:16px}
  #rg-cat-zone{left:3px;bottom:40px;width:108px;height:170px}
  #rg-cat-dancer{max-width:105px;max-height:155px}
  #rg-cat-callout{font-size:6px;letter-spacing:.5px;left:2px}
  #rg-health-wrap{left:8px;top:27px;width:105px}
  #rg-hud{right:8px}
  #rg-hud .val{font-size:17px}
  #rg-hud #rg-combo{font-size:26px}
  #rg-ribbon{padding:0 8px;font-size:8px}
  #rg-banner{font-size:38px;letter-spacing:4px}
  #rg-map-info{width:220px;top:23px}
  #rg-map-meta{display:none!important}
}