:root{
  --bg-0:#07090a;
  --bg-1:#0b0f0d;
  --surface:#121613;
  --surface-2:#181d19;
  --border:#242b25;
  --text:#eef2ee;
  --text-dim:#8b968d;
  --accent:#19df70;
  --accent-dim:#179d52;
  --accent-glow:rgba(25,223,112,.45);
  --accent-bg:#0d1b11;
  --bg-tint:#060f08;
  --accent-rgb:25,223,112;

  --boost:#ffb020;
  --danger:#ff5a5a;
  --success:#2fd66b;

  --easy:#2fd66b;
  --easy-bg:#123420;
  --medium:#d6b23f;
  --medium-bg:#332c14;
  --hard:#d67f3f;
  --hard-bg:#33200f;
  --expert:#d65f5f;
  --expert-bg:#331515;
  --impossible:#a15fe0;
  --impossible-bg:#241533;

  --radius:16px;
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{overflow-x:hidden;}
body{
  min-height:100vh;
  min-height:100dvh;          /* dodges the iOS/Android URL-bar resize jump */
  background:var(--bg-tint);
  color:var(--text);
  font-family:"Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  position:relative;
  overflow-x:hidden;
  transition:background-color .4s ease;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

/* Kill the 300ms double-tap delay and stop iOS zooming the page on inputs. */
button, .era-chip, .pill-btn, .guess-chip, .switch,
.custom-album-tile, .footer-btn, .option-row, input, select, textarea{
  touch-action:manipulation;
}
input, select, textarea{font-size:16px;}

/* ================================================================
   VOLUMETRIC STAGE SPOTLIGHT
   Authentic overhead theatrical spotlight matching Image 1:
   - Light emanates from high above the ceiling for natural perspective
   - Seamless top origin without harsh lens hotspots
   - Multi-layer atmospheric volumetric mist
   - Central luminous core shaft with smooth quadratic falloff
   - Soft elliptical stage ground reflection pool
   - Audio-reactive beat flashing via CSS custom properties
   ================================================================ */
/* ================================================================
   VOLUMETRIC STAGE SPOTLIGHT - CONIC APEX PROJECTION
   - 100% clip-path free: zero hard geometric diagonal edges!
   - Projected from high virtual apex (--beam-apex: -1220px)
   - Dual-cone setup: wide ambient spill + central conical beam
   - Vertical mask-image falloff
   - Stage vignette darkening sides and focusing center
   - Audio beat reactivity seamlessly scales the beam and pulse flare
   ================================================================ */
.stage-spotlight{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
  --beam-apex:-1220px;
  --beam:var(--accent);
  --beam-tint:color-mix(in srgb, var(--beam) 34%, #edf2ee);
  --stage:var(--accent-bg);
}

.stage-spotlight > *, .spotlight-lamp > *{
  position:absolute;
}

.spotlight-lamp{
  position:absolute;
  inset:0;
}

/* Background warming column in the center */
.spotlight-column{
  --stage-core:304px;
  --stage-falloff:240px;
  --stage-center:color-mix(in srgb, var(--stage) 38%, #090b0a);
  inset:0;
  background:linear-gradient(
    to right,
    transparent calc(50% - var(--stage-core) - var(--stage-falloff)),
    var(--stage-center) calc(50% - var(--stage-core)),
    var(--stage-center) calc(50% + var(--stage-core)),
    transparent calc(50% + var(--stage-core) + var(--stage-falloff))
  );
  filter:blur(22px);
  opacity:calc(0.78 + var(--beam-intensity, 0) * 0.15);
  transition:opacity .1s ease-out;
}

/* Soft top ceiling glow */
.spotlight-glow{
  width:900px;
  height:600px;
  top:-300px;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--beam-tint) 16%, transparent) 0%,
    color-mix(in srgb, var(--beam-tint) 7%, transparent) 42%,
    transparent 74%
  );
  filter:blur(28px);
  opacity:calc(0.76 + var(--beam-flash, 0) * 0.25);
  transition:opacity .06s ease-out;
}

/* Wide ambient cone spill - velvety atmospheric outer haze with ultra-soft falloff */
.spotlight-spill{
  inset:0;
  background:conic-gradient(
    from 158deg at 50% var(--beam-apex),
    transparent 0deg,
    color-mix(in srgb, var(--beam-tint) 0.8%, transparent) 4deg,
    color-mix(in srgb, var(--beam-tint) 2.2%, transparent) 22deg,
    color-mix(in srgb, var(--beam-tint) 0.8%, transparent) 40deg,
    transparent 44deg
  );
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.6) 55%,
    transparent 96%
  );
  -webkit-mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.6) 55%,
    transparent 96%
  );
  filter:blur(34px);
  opacity:calc(0.88 + var(--beam-intensity, 0) * 0.15);
  transition:opacity .08s ease-out;
}

/* Primary conical light beam - noticeable foreground presence, blended falloff */
.spotlight-beam{
  inset:0;
  background:conic-gradient(
    from 166deg at 50% var(--beam-apex),
    transparent 0deg,
    color-mix(in srgb, var(--beam-tint) 1.2%, transparent) 1deg,
    color-mix(in srgb, var(--beam-tint) 3.6%, transparent) 4deg,
    color-mix(in srgb, var(--beam-tint) 6.4%, transparent) 9deg,
    color-mix(in srgb, var(--beam-tint) 9.2%, transparent) 14deg,
    color-mix(in srgb, var(--beam-tint) 6.4%, transparent) 19deg,
    color-mix(in srgb, var(--beam-tint) 3.6%, transparent) 24deg,
    color-mix(in srgb, var(--beam-tint) 1.2%, transparent) 27deg,
    transparent 28deg
  );
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.65) 55%,
    transparent 96%
  );
  -webkit-mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.65) 55%,
    transparent 96%
  );
  filter:blur(22px);
  opacity:calc(0.82 + var(--beam-intensity, 0) * 0.18 + var(--beam-flash, 0) * 0.26);
  transition:opacity .06s ease-out;
}

/* Audio-reactive beat pulse flare */
.spotlight-flare{
  inset:0;
  background:
    radial-gradient(
      56% 44% at 50% 32%,
      color-mix(in srgb, var(--beam-tint) 14%, transparent) 0%,
      transparent 70%
    ),
    conic-gradient(
      from 166deg at 50% var(--beam-apex),
      transparent 0deg,
      color-mix(in srgb, var(--beam-tint) 2.2%, transparent) 3deg,
      color-mix(in srgb, var(--beam-tint) 8.5%, transparent) 14deg,
      color-mix(in srgb, var(--beam-tint) 2.2%, transparent) 25deg,
      transparent 28deg
    );
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, transparent 85%);
  filter:blur(24px);
  opacity:calc(var(--beam-flash, 0) * 0.48);
  transition:opacity .05s ease-out;
}

/* Stage floor reflection pool */
.spotlight-floor-pool{
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(72vw, 920px);
  height:240px;
  border-radius:50%;
  background:radial-gradient(
    ellipse at 50% 65%,
    color-mix(in srgb, var(--beam-tint) 10%, transparent) 0%,
    color-mix(in srgb, var(--beam-tint) 3%, transparent) 45%,
    transparent 72%
  );
  filter:blur(52px);
  opacity:calc(0.38 + var(--beam-intensity, 0) * 0.15 + var(--beam-flash, 0) * 0.18);
  transition:opacity .06s ease-out;
}

/* Side vignette darkening overlay */
.spotlight-vignette{
  inset:0;
  background:radial-gradient(
    138% 112% at 50% 8%,
    transparent 45%,
    rgba(0,0,0,.35) 76%,
    rgba(0,0,0,.68) 100%
  );
}

body.is-playing{
  --beam-intensity: 0.32;
}

body.reduce-motion .stage-spotlight *{
  transition:none !important;
  animation:none !important;
}

.app-shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 220px;
  gap:28px;
  max-width:1400px;
  margin:0 auto;
  padding:50px 28px 60px;
  padding-left:max(28px, env(safe-area-inset-left));
  padding-right:max(28px, env(safe-area-inset-right));
}

/* ---------------- side panels ---------------- */
.side-panel{display:flex;flex-direction:column;gap:6px;}
.panel-title{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);margin:18px 0 10px;font-weight:700;
}
.panel-title:first-child{margin-top:0;}


.reroll-btn{
  display:flex;align-items:center;gap:8px;
  background:rgba(var(--accent-rgb), 0.06);
  border:1px solid rgba(var(--accent-rgb), 0.12);
  border-radius:10px;color:var(--text-dim);
  font-size:.88rem;font-weight:600;cursor:pointer;padding:8px 14px;width:fit-content;
  transition:all .2s ease;
}
.reroll-btn[hidden]{display:none;}
.reroll-btn:hover{
  background:rgba(var(--accent-rgb), 0.14);
  color:var(--accent);
  border-color:rgba(var(--accent-rgb), 0.28);
}
.reroll-btn svg{width:16px;height:16px;fill:currentColor;}

.option-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;}
.option-row{
  display:flex;align-items:center;gap:8px;
  background:rgba(var(--accent-rgb), 0.04);
  border:1px solid rgba(var(--accent-rgb), 0.09);
  color:var(--text-dim);
  font-size:.88rem;padding:11px 14px;cursor:pointer;text-align:left;border-radius:12px;
  transition:all .2s ease;
}
.option-row svg{width:15px;height:15px;fill:currentColor;flex:none;}
.option-row:hover{
  background:rgba(var(--accent-rgb), 0.08);
  color:var(--text);
  border-color:rgba(var(--accent-rgb), 0.18);
}
.option-row.pill{
  background:rgba(var(--accent-rgb), 0.05);
  border:1px solid rgba(var(--accent-rgb), 0.1);
  padding:11px 14px;
}
/* Match on .active alone as well: this styling used to require .pill, so a
   button that was genuinely selected but missing that class showed no
   feedback at all and read as unclickable. */
.option-row.active,
.option-row.pill.active{
  color:var(--accent);
  border-color:rgba(var(--accent-rgb), 0.28);
  background:rgba(var(--accent-rgb), 0.13);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb), 0.14);
  font-weight:600;
}
.toggle-row{
  justify-content:space-between;
  cursor:default;
  background:rgba(var(--accent-rgb), 0.05);
  border:1px solid rgba(var(--accent-rgb), 0.1);
  border-radius:12px;
  padding:11px 14px;
}

.switch{
  width:38px;height:22px;border-radius:999px;border:none;
  background:rgba(255,255,255,0.1);position:relative;cursor:pointer;flex:none;transition:.15s;
}
.switch-knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:.15s;
}
.switch[aria-checked="true"]{background:rgba(var(--accent-rgb), 0.35);}
.switch[aria-checked="true"] .switch-knob{left:18px;background:var(--accent);}

.guess-after-pill{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  background:rgba(var(--accent-rgb), 0.04);
  border:1px solid rgba(var(--accent-rgb), 0.08);
  border-radius:12px;padding:8px;
}
.guess-chip{
  text-align:center;padding:8px 0;border-radius:8px;font-size:.85rem;font-weight:700;
  background:rgba(var(--accent-rgb), 0.06);
  color:rgba(var(--accent-rgb), 0.45);
  border:1px solid rgba(var(--accent-rgb), 0.1);
  cursor:default;
  transition:all .2s ease;
}
.guess-chip.unlocked{
  background:rgba(var(--accent-rgb), 0.14);
  color:var(--accent);
  border-color:rgba(var(--accent-rgb), 0.28);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb), 0.14);
  cursor:pointer;
}
.guess-chip.unlocked:hover{
  background:rgba(var(--accent-rgb), 0.22);
  border-color:rgba(var(--accent-rgb), 0.45);
}

/* ---------------- volume (0-200%, 100% dead-centre) ---------------- */
.volume-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.volume-header .panel-title{margin:0;}
.volume-val{
  font-size:.82rem;font-weight:700;color:var(--text-dim);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  transition:color .18s ease;
}
.volume-val.boosted{color:var(--boost);}

.volume-row{
  position:relative;
  padding:8px 2px 6px;
}
/* centre detent marker sitting under the 100% point of the track */
.volume-row::after{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  width:2px;
  height:8px;
  margin-left:-1px;
  border-radius:1px;
  background:rgba(255,255,255,.22);
  pointer-events:none;
}
.volume-scale{
  display:flex;
  justify-content:space-between;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(255,255,255,.28);
  padding:0 1px;
  margin-top:-2px;
  user-select:none;
  -webkit-user-select:none;
}

#volume-slider{
  --vol-pct:50%;    /* thumb / fill position across the whole 0-200 range */
  --vol-norm:50%;   /* portion of that fill that is <= 100% (un-boosted)  */
  -webkit-appearance:none;appearance:none;
  display:block;
  width:100%;
  height:22px;              /* tall, finger-friendly hit area */
  margin:0;
  padding:0;
  background:transparent;
  outline:none;
  cursor:pointer;
  touch-action:pan-y;       /* let vertical page scrolling still work */
}
#volume-slider:focus-visible{outline:none;}

/* --- track --- */
#volume-slider::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), 0.16);
  background:linear-gradient(to right,
    var(--accent) 0, var(--accent) var(--vol-norm),
    var(--boost) var(--vol-norm), var(--boost) var(--vol-pct),
    rgba(var(--accent-rgb), 0.13) var(--vol-pct), rgba(var(--accent-rgb), 0.13) 100%);
  transition:background .1s linear;
}
#volume-slider::-moz-range-track{
  height:8px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), 0.16);
  background:linear-gradient(to right,
    var(--accent) 0, var(--accent) var(--vol-norm),
    var(--boost) var(--vol-norm), var(--boost) var(--vol-pct),
    rgba(var(--accent-rgb), 0.13) var(--vol-pct), rgba(var(--accent-rgb), 0.13) 100%);
}

/* --- thumb --- */
#volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:#fff;
  border:none;
  margin-top:-6px;   /* centres an 18px thumb on the 8px track (+1px border) */
  box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 2px 8px -2px rgba(0,0,0,.7);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease;
}
#volume-slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:none;
  box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 2px 8px -2px rgba(0,0,0,.7);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease;
}
#volume-slider:active::-webkit-slider-thumb{transform:scale(1.15);}
#volume-slider:active::-moz-range-thumb{transform:scale(1.15);}
#volume-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 0 6px var(--accent-glow);}
#volume-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 0 6px var(--accent-glow);}

#volume-slider.boosted::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 12px -1px var(--boost);}
#volume-slider.boosted::-moz-range-thumb{box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 12px -1px var(--boost);}

.ui-options-toggle{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(var(--accent-rgb), 0.05);
  border:1px solid rgba(var(--accent-rgb), 0.1);
  border-radius:12px;
  padding:12px 14px;color:var(--text);font-size:.88rem;font-weight:600;cursor:pointer;margin-top:8px;
  transition:all .2s ease;
}
.ui-options-toggle:hover{
  background:rgba(var(--accent-rgb), 0.09);
  border-color:rgba(var(--accent-rgb), 0.2);
}
.ui-options-toggle svg{width:16px;height:16px;fill:var(--text-dim);transition:.15s;}
.ui-options-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.new-tag{
  background:var(--accent);color:#08130c;font-size:.62rem;font-weight:800;
  padding:2px 6px;border-radius:6px;margin-left:6px;vertical-align:middle;
}
.ui-options-panel{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.ui-options-panel[hidden]{display:none;}

/* ---------------- center panel ---------------- */
.center-panel{text-align:center;min-width:0;}
.app-title{
  font-size:2rem;font-weight:800;letter-spacing:-.01em;margin:0 0 22px;
  color:var(--text-dim);
}
.app-title em{font-style:normal;color:var(--text);}

.era-nav{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:18px;}
.era-arrow{
  background:transparent;border:none;color:var(--text-dim);font-size:1.4rem;
  cursor:pointer;line-height:1;padding:4px 8px;
}
.era-arrow:hover{color:var(--text);}
.era-chip-track{
  position:relative;
  display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;max-width:460px;
  scroll-behavior:smooth;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}
.era-chip-track.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}
.era-chip-track::-webkit-scrollbar{display:none;}
.era-chip{
  background:transparent;border:none;color:var(--text-dim);font-size:.95rem;
  white-space:nowrap;cursor:pointer;padding:4px 2px;font-weight:600;
  transition:color .15s ease, transform .15s ease;
  flex:none;
  user-select:none;
}
.era-chip-track.is-dragging .era-chip{
  cursor:grabbing;
}
.era-chip:hover{color:var(--text);}
.era-chip.selected{color:var(--text);font-weight:800;}
.era-chip[data-era="custom"]{
  color:#ff70b5;
  font-weight:700;
}
.era-chip[data-era="custom"]:hover{
  color:#ff4da6;
}
.era-chip[data-era="custom"].selected{
  color:#ff4da6;
  text-shadow:0 0 16px rgba(255,77,166,.65);
}

.difficulty-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}
.difficulty-pills[hidden]{display:none;}

/* Difficulty buttons show respective colors even when NOT selected */
.pill-btn{
  padding:10px 20px;border-radius:999px;
  font-weight:700;font-size:.9rem;cursor:pointer;
  transition:all .18s ease;
}

.pill-btn[data-diff="easy"]{
  background:rgba(25, 223, 112, 0.095);
  color:#39e887;
  border:1px solid rgba(25, 223, 112, 0.22);
}
.pill-btn[data-diff="easy"]:hover{
  background:rgba(25, 223, 112, 0.18);
  border-color:rgba(25, 223, 112, 0.45);
}
.pill-btn[data-diff="easy"].selected{
  background:#19df70;
  color:#08130c;
  border-color:#19df70;
  box-shadow:0 0 20px -2px rgba(25, 223, 112, 0.55);
}

.pill-btn[data-diff="medium"]{
  background:rgba(255, 202, 18, 0.095);
  color:#ffd234;
  border:1px solid rgba(255, 202, 18, 0.22);
}
.pill-btn[data-diff="medium"]:hover{
  background:rgba(255, 202, 18, 0.18);
  border-color:rgba(255, 202, 18, 0.45);
}
.pill-btn[data-diff="medium"].selected{
  background:#ffca12;
  color:#221a04;
  border-color:#ffca12;
  box-shadow:0 0 20px -2px rgba(255, 202, 18, 0.55);
}

.pill-btn[data-diff="hard"]{
  background:rgba(255, 117, 23, 0.095);
  color:#ff8631;
  border:1px solid rgba(255, 117, 23, 0.22);
}
.pill-btn[data-diff="hard"]:hover{
  background:rgba(255, 117, 23, 0.18);
  border-color:rgba(255, 117, 23, 0.45);
}
.pill-btn[data-diff="hard"].selected{
  background:#ff7517;
  color:#241102;
  border-color:#ff7517;
  box-shadow:0 0 20px -2px rgba(255, 117, 23, 0.55);
}

.pill-btn[data-diff="expert"]{
  background:rgba(240, 68, 68, 0.095);
  color:#f66464;
  border:1px solid rgba(240, 68, 68, 0.22);
}
.pill-btn[data-diff="expert"]:hover{
  background:rgba(240, 68, 68, 0.18);
  border-color:rgba(240, 68, 68, 0.45);
}
.pill-btn[data-diff="expert"].selected{
  background:#f04444;
  color:#240808;
  border-color:#f04444;
  box-shadow:0 0 20px -2px rgba(240, 68, 68, 0.55);
}

.pill-btn[data-diff="impossible"]{
  background:rgba(151, 72, 221, 0.095);
  color:#ae67ed;
  border:1px solid rgba(151, 72, 221, 0.22);
}
.pill-btn[data-diff="impossible"]:hover{
  background:rgba(151, 72, 221, 0.18);
  border-color:rgba(151, 72, 221, 0.45);
}
.pill-btn[data-diff="impossible"].selected{
  background:#9748dd;
  color:#170a24;
  border-color:#9748dd;
  box-shadow:0 0 20px -2px rgba(151, 72, 221, 0.55);
}

.custom-panel{max-width:460px;margin:0 auto 26px;}
.custom-search-wrap{position:relative;margin-bottom:14px;}
.custom-search-wrap input[type=text]{
  width:100%;padding:14px 16px 14px 44px;border-radius:14px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;
}
.custom-search-wrap input[type=text]:focus{outline:none;border-color:var(--accent-dim);}
.custom-search-wrap .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);}
.custom-album-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.custom-album-tile{
  cursor:pointer;border-radius:12px;overflow:hidden;border:2px solid transparent;
  background:var(--surface);transition:.15s;text-align:left;
}
.custom-album-tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--surface-2);}
.custom-album-tile .album-name{font-size:.76rem;padding:6px 8px;color:var(--text-dim);line-height:1.25;}
.custom-album-tile:hover{border-color:var(--accent-dim);}
.custom-album-tile.selected{border-color:var(--accent);}
.custom-album-tile.all-songs{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-weight:700;color:var(--accent);background:var(--accent-bg);}

/* The whole pack bar is one button - tap anywhere on it to pick a
   different artist or album. Every box in the chain gets min-width:0 so a
   long pack name ellipsises instead of pushing the page sideways. */
.custom-active-bar{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:520px;
  min-width:0;
  background:rgba(var(--accent-rgb), 0.08);
  border:1px solid rgba(var(--accent-rgb), 0.22);
  border-radius:999px;
  padding:9px 16px 9px 12px;
  margin:0 auto 26px;
  color:var(--text);
  font:inherit;
  font-size:.9rem;
  text-align:left;
  cursor:pointer;
  box-shadow:0 4px 16px -4px rgba(0,0,0,.4);
  animation:revealPop .25s cubic-bezier(.16,1,.3,1);
  transition:background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.custom-active-bar[hidden]{display:none;}
.custom-active-bar:hover{
  background:rgba(var(--accent-rgb), 0.15);
  border-color:var(--accent);
}
.custom-active-bar:active{transform:scale(.985);}
.custom-active-bar:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}

.custom-active-badge{
  flex:none;
  background:var(--accent);
  color:#08130c;
  font-size:.65rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:4px 8px;
  border-radius:6px;
}
.custom-active-title{
  flex:1 1 auto;
  min-width:0;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.custom-change-hint{
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-dim);
  font-size:.78rem;
  font-weight:700;
  transition:color .15s ease;
}
.custom-active-bar:hover .custom-change-hint{color:var(--accent);}
.custom-change-hint svg{width:14px;height:14px;fill:currentColor;flex:none;}

.songbar-wrap{position:relative;max-width:520px;margin:0 auto 30px;}
.songbar{
  position:relative;height:10px;
  /* the empty part of the bar carries the difficulty colour too, just far
     darker - a neutral grey track looked wrong against orange or purple */
  background:color-mix(in srgb, var(--accent) 15%, #080b09);
  border-radius:999px;overflow:hidden;
  border:1px solid rgba(var(--accent-rgb), 0.22);
  transition:background-color .3s ease, border-color .3s ease;
}
.songbar-fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:var(--accent-dim);opacity:.6;transition:width .25s ease, background-color .3s ease;
}
.songbar-progress{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:var(--accent);box-shadow:0 0 10px var(--accent-glow);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.songbar-marks{position:absolute;inset:0;pointer-events:none;}
.songbar-mark{position:absolute;top:0;bottom:0;width:2px;background:rgba(0,0,0,.45);}
.tick-label{
  position:absolute;top:100%;left:0%;transform:translateX(-50%);margin-top:8px;
  color:var(--accent);font-size:.8rem;font-weight:700;font-family:monospace;
  white-space:nowrap;transition:left .25s ease, color .3s ease;
}
.tick-caret{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:6px solid var(--accent);
  transition:border-bottom-color .3s ease;
}

.disc-wrap{position:relative;width:150px;height:150px;margin:60px auto 30px;overflow:visible;z-index:1;}

/* Singular beat pulse ring radiating outward to the beat when playing */
.beat-ring{
  position:absolute;
  inset:0;
  margin:auto;
  width:96px;
  height:96px;
  border-radius:50%;
  border:2.5px solid var(--accent);
  box-shadow:0 0 14px var(--accent);
  pointer-events:none;
  opacity:0;
  transform:scale(1);
  box-sizing:border-box;
  z-index:0;
  transition:border-color .3s ease, box-shadow .3s ease;
}

body.is-playing:not(.reduce-motion) .beat-ring{
  animation:beat-ring-pulse 0.92s cubic-bezier(0.12, 0.72, 0.3, 1) infinite;
}

@keyframes beat-ring-pulse{
  0%{
    transform:scale(0.96);
    opacity:0.92;
  }
  35%{
    opacity:0.72;
  }
  100%{
    transform:scale(1.68);
    opacity:0;
  }
}

.play-btn{
  position:absolute;inset:0;margin:auto;width:96px;height:96px;border-radius:50%;
  background:var(--accent);
  border:none;color:#08130c;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:1;
  transition:transform .15s, background-color .3s ease;
}
.play-btn:hover{transform:scale(1.04);}
.play-btn:active{transform:scale(.94);}
.play-btn svg{
  position:absolute;left:50%;top:50%;
  width:34px;height:34px;fill:#08130c;
  transition:opacity .2s ease, transform .2s ease;
}
.play-btn .icon-play{transform:translate(-46%,-50%) scale(1);opacity:1;}
.play-btn .icon-pause{transform:translate(-50%,-50%) scale(.6);opacity:0;}
.play-btn.is-playing .icon-play{transform:translate(-46%,-50%) scale(.6);opacity:0;}
.play-btn.is-playing .icon-pause{transform:translate(-50%,-50%) scale(1);opacity:1;}
.play-duration{
  position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);
  color:var(--accent);font-weight:800;font-size:1.3rem;font-family:monospace;white-space:nowrap;
}

#guess-form{
  display:flex;gap:12px;max-width:560px;margin:0 auto;align-items:stretch;
}
.guess-wrap{position:relative;flex:1;display:flex;align-items:center;}
.search-icon{width:18px;height:18px;fill:var(--text-dim);position:absolute;left:16px;pointer-events:none;}
.guess-wrap input[type=text]{
  width:100%;padding:15px 16px 15px 44px;border-radius:14px;
  border:1px solid rgba(var(--accent-rgb), 0.15);
  background:rgba(var(--accent-rgb), 0.05);
  color:var(--text);font-size:1rem;
  transition:background-color .3s ease, border-color .3s ease;
}
.guess-wrap input[type=text]:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(var(--accent-rgb), 0.09);
}
.guess-wrap input[type=text]:disabled{opacity:.5;}

.skip-btn{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:0 20px;border-radius:14px;
  border:1px solid rgba(var(--accent-rgb), 0.15);
  background:rgba(var(--accent-rgb), 0.06);
  color:var(--accent);font-weight:700;font-size:.95rem;cursor:pointer;
  transition:all .2s ease;
}
.skip-btn svg{width:16px;height:16px;fill:currentColor;}
.skip-btn:hover:not(:disabled){
  background:rgba(var(--accent-rgb), 0.14);
  border-color:var(--accent);
}
.skip-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Opens upward: the guess field sits low on the page, so a list dropping
   downward ran off the bottom on phones. */
/* Default: drop DOWN. Only the guess field (which sits low on the page) flips
   upward - the custom-artist and multiplayer pack searches are near the top,
   where opening upward runs straight off the screen. */
.suggest-list{
  position:absolute;left:0;right:0;top:calc(100% + 10px);
  background:color-mix(in srgb, var(--surface-2) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(var(--accent-rgb), 0.18);
  border-radius:16px;
  max-height:min(46vh, 340px);overflow-y:auto;z-index:30;display:none;text-align:left;
  box-shadow:0 18px 50px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.35);
  padding:6px;
  transform-origin:50% 0;
}

/* the guess box is the one that opens upward */
#guess-suggest-list{
  top:auto;
  bottom:calc(100% + 10px);
  box-shadow:0 -18px 50px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.35);
  transform-origin:50% 100%;
}
.suggest-list.open{
  display:block;
  animation:suggestPop .18s cubic-bezier(.16,1,.3,1);
}
@keyframes suggestPop{
  from{opacity:0;transform:translateY(-10px) scale(.97);}
  to{opacity:1;transform:none;}
}
#guess-suggest-list.open{animation:suggestPopUp .18s cubic-bezier(.16,1,.3,1);}
@keyframes suggestPopUp{
  from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:none;}
}
body.reduce-motion .suggest-list.open{animation:none;}
@media (prefers-reduced-motion:reduce){
  .suggest-list.open{animation:none;}
}

/* dim the page behind the open guess list so it reads as a popover */
body.suggest-open .app-shell > .side-panel,
body.suggest-open .era-nav,
body.suggest-open .difficulty-pills,
body.suggest-open .songbar-wrap,
body.suggest-open .disc-wrap{
  transition:opacity .18s ease, filter .18s ease;
  opacity:.35;
  filter:blur(1.5px);
}
.suggest-item{
  display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  border-radius:10px;transition:background-color .12s ease;
}
.suggest-item:hover, .suggest-item.active{background:rgba(255,255,255,.07);}
.suggest-item .s-title{font-weight:700;font-size:.98rem;color:var(--text);line-height:1.3;}
.suggest-item .s-sub{color:var(--text-dim);font-size:.82rem;margin-top:2px;}
.suggest-empty{padding:16px 14px;color:var(--text-dim);font-size:.85rem;text-align:left;}

.status-line{color:var(--text-dim);font-size:.85rem;min-height:1.2em;margin-top:16px;}
.status-line.error{color:var(--expert);}

.ghost-btn{
  background:transparent;border:1px solid var(--border);color:var(--text-dim);
  padding:9px 16px;border-radius:999px;font-size:.85rem;cursor:pointer;
}
.ghost-btn:hover{border-color:var(--accent-dim);color:var(--text);}

/* ================================================================
   REVEAL SCREEN (MATCHING IMAGE 2)
   - Dark stage modal card with soft backdrop blur
   - High quality rounded album artwork
   - Accent-themed eyebrow "IT WAS _" (coral-red on lost, green on won)
   - Large bold white title and muted artist · album
   - Dedicated "Listen on Deezer ↗" pill button
   - Stamped & tilted result badge (e.g. "LOST!" / "WON!")
   - Pill action buttons ("Challenge your friend", "Next")
   ================================================================ */
/* keep the stage lit while the card is up */
body.revealing .stage-spotlight{
  opacity:1;
  z-index:49;   /* above the hidden shell, still under the reveal card */
}

body.revealing .app-shell{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}

.reveal-overlay{
  position:fixed;inset:0;z-index:50;
  /* Translucent, not solid: the stage spotlight lives at z-index 0 and the
     song plays over this screen, so letting the beam through keeps it pulsing
     to the beat behind the card. A vertical gradient keeps the lower half
     dark enough for the buttons to stay readable. */
  /* a loss stays calm and dark; the win screen lightens this right up so the
     beam can punch through (see body.revealing-win below) */
  background:linear-gradient(
    to bottom,
    rgba(8,11,9,.62) 0%,
    rgba(8,11,9,.80) 40%,
    rgba(8,11,9,.93) 100%
  );
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:revealFadeIn .22s ease;
}
.reveal-overlay[hidden]{display:none;}
@keyframes revealFadeIn{from{opacity:0;}to{opacity:1;}}

.reveal-modal{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  max-width:380px;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:none;
  animation:revealPop .3s cubic-bezier(.16,1,.3,1);
}
@keyframes revealPop{from{opacity:0;transform:scale(.94) translateY(6px);}to{opacity:1;transform:none;}}

.reveal-modal img{
  width:175px;
  height:175px;
  border-radius:18px;
  object-fit:cover;
  display:block;
  box-shadow:0 16px 36px -8px rgba(0,0,0,.85);
  margin:0 auto 22px;
  background:#19201b;
}

.reveal-eyebrow{
  margin:0 0 6px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.26em;
  color:#f24e4e;
  text-transform:uppercase;
  transition:color .2s ease;
}
.reveal-modal.won .reveal-eyebrow{color:#2fd66b;}
.reveal-modal.lost .reveal-eyebrow{color:#f24e4e;}

.eyebrow-underscore{
  display:inline-block;
  margin-left:1px;
}

.reveal-modal h2{
  margin:0 0 6px;
  font-size:1.85rem;
  font-weight:800;
  color:#ffffff;
  letter-spacing:-.02em;
  line-height:1.2;
}

#reveal-artist-sub{
  margin:0 0 20px;
  color:#8b978e;
  font-size:.95rem;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
}
.meta-dot{
  color:rgba(255,255,255,.28);
  margin:0 2px;
}
.reveal-year{
  color:#b2bcb5;
  font-weight:600;
}

.deezer-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 20px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), 0.22);
  background:rgba(var(--accent-rgb), 0.08);
  color:var(--text);
  text-decoration:none;
  font-size:.88rem;
  font-weight:600;
  margin-bottom:22px;
  transition:all .15s ease;
}
.deezer-btn:hover{
  border-color:var(--accent);
  background:rgba(var(--accent-rgb), 0.18);
  color:#ffffff;
  transform:translateY(-1px);
}
.deezer-btn svg{
  width:13px;
  height:13px;
  fill:currentColor;
  transition:transform .15s ease;
}
.deezer-btn:hover svg{
  transform:translate(1px, -1px);
}
.deezer-btn[hidden]{display:none;}

.result-badge-wrap{
  margin-bottom:26px;
  display:flex;
  justify-content:center;
}

.result-badge{
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  padding:7px 22px;
  border-radius:999px;
  border:2.5px solid #f24e4e;
  color:#f24e4e;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  transform:rotate(-5deg);
  box-shadow:0 0 16px rgba(242,78,78,.45), inset 0 0 8px rgba(242,78,78,.16);
  transition:all .2s ease;
}
.result-badge.won{
  border-color:#2fd66b;
  color:#2fd66b;
  box-shadow:0 0 16px rgba(47,214,107,.45), inset 0 0 8px rgba(47,214,107,.16);
  transform:rotate(-4deg);
}

.reveal-footer{
  display:flex;
  gap:12px;
  width:100%;
}
.footer-btn{
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), 0.28);
  background:rgba(var(--accent-rgb), 0.12);
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
  padding:12px 18px;
  transition:all .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--accent);
}
.footer-btn:hover{
  background:rgba(var(--accent-rgb), 0.22);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.footer-btn svg{
  width:15px;
  height:15px;
  fill:currentColor;
  flex:none;
}
.footer-btn.challenge-btn{
  flex:1.25;
}
.footer-btn.next-btn{
  flex:1;
}

/* ================================================================
   RESPONSIVE / TOUCH
   ================================================================ */

/* On touch devices :hover sticks after a tap, so drop the hover-only
   flourishes and give everything a pressed state instead. */
@media (hover:none){
  .play-btn:hover{transform:none;}
  .deezer-btn:hover{transform:none;}
  .footer-btn:hover{transform:none;}
  .custom-album-tile:hover{border-color:transparent;}
  .custom-album-tile.selected{border-color:var(--accent);}
  .era-chip:hover{color:var(--text-dim);}
  .era-chip.selected{color:var(--text);}
  .era-chip-track{cursor:default;}

  .pill-btn:active, .guess-chip.unlocked:active,
  .option-row:active, .footer-btn:active,
  .reroll-btn:active, .skip-btn:active, .custom-change-btn:active{
    filter:brightness(1.25);
  }
  .custom-album-tile:active{border-color:var(--accent-dim);}
}

/* ---------------- tablet / narrow desktop ---------------- */
@media (max-width:980px){
  .app-shell{
    grid-template-columns:1fr;
    max-width:560px;
    gap:20px;
    padding-top:34px;
    padding-bottom:calc(48px + env(safe-area-inset-bottom));
  }
  .side-panel{order:2;}
  .left-panel{order:2;}
  .center-panel{order:1;}
  .right-panel{order:3;}
  /* the disc's children are absolutely positioned, so park the duration
     label under the button instead of letting it sit on top of it */
  .play-duration{
    left:50%;
    top:100%;
    transform:translateX(-50%);
    margin-top:14px;
    text-align:center;
  }
  .disc-wrap{margin:44px auto 46px;}

  /* the left panel is just profile + reroll: lay it out on one line.
     The multiplayer scoreboard is the exception - it needs the full width,
     so it wraps onto its own row underneath. */
  .left-panel{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .left-panel .mp-scoreboard{flex:1 0 100%;margin-top:4px;}
  .left-panel .mp-scoreboard .panel-title{margin-top:0;}
}

/* ---------------- phones ---------------- */
@media (max-width:560px){
  :root{--radius:14px;--gutter:16px;}

  .app-shell{
    gap:16px;
    padding:20px var(--gutter) calc(40px + env(safe-area-inset-bottom));
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }

  .app-title{font-size:1.5rem;margin-bottom:16px;}

  /* era strip: swipe it, the arrows only waste width on a phone */
  .era-nav{gap:0;margin:0 calc(var(--gutter) * -1) 14px;padding:0 var(--gutter);}
  .era-arrow{display:none;}
  .era-chip-track{
    max-width:none;
    width:100%;
    gap:18px;
    padding:2px 2px 6px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .era-chip{
    padding:8px 2px;          /* taller tap target */
    scroll-snap-align:center;
    font-size:1rem;
  }

  .difficulty-pills{gap:8px;margin-bottom:20px;}
  .pill-btn{padding:9px 15px;font-size:.85rem;}

  /* songbar: keep the bar looking thin but make the seek target
     finger-sized via transparent top/bottom borders */
  .songbar-wrap{margin-bottom:26px;}
  .songbar{
    height:22px;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    background-clip:padding-box;
  }
  .tick-label{font-size:.75rem;margin-top:2px;}

  .disc-wrap{width:132px;height:132px;margin:26px auto 44px;}
  .play-btn{width:104px;height:104px;}
  .beat-ring{width:104px;height:104px;}
  .play-btn svg{width:38px;height:38px;}
  .play-duration{font-size:1.15rem;margin-top:12px;}

  /* guess row stacks so the input keeps full width */
  #guess-form{flex-direction:column;gap:10px;}
  .guess-wrap input[type=text]{padding:14px 14px 14px 42px;}
  .skip-btn{justify-content:center;padding:13px 20px;}
  .suggest-list{max-height:46vh;}
  .suggest-item{padding:13px 12px;}

  .custom-panel{margin-bottom:20px;}
  .custom-album-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .custom-album-tile .album-name{font-size:.68rem;padding:5px 6px;}
  .custom-active-bar{
    padding:9px 14px 9px 10px;
    margin-bottom:20px;
  }
  /* the swap icon carries the meaning once space gets tight; the button
     still has an aria-label so nothing is lost for screen readers */
  .custom-change-hint .custom-change-label{display:none;}

  /* right panel: two-up so the settings are not one long scroll */
  .panel-title{margin:14px 0 8px;}
  .right-panel .option-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .right-panel .option-list .toggle-row{grid-column:1 / -1;}
  .option-row{padding:12px 12px;font-size:.84rem;}
  .guess-after-pill{grid-template-columns:repeat(5,1fr);gap:6px;}
  .guess-chip{padding:10px 0;font-size:.78rem;}
  .switch{width:44px;height:26px;}
  .switch-knob{width:22px;height:22px;}
  .switch[aria-checked="true"] .switch-knob{left:20px;}
  .ui-options-panel .option-row{grid-column:1 / -1;}

  /* volume gets a chunkier thumb for fingers */
  #volume-slider{height:28px;}
  #volume-slider::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8px;}
  #volume-slider::-moz-range-thumb{width:22px;height:22px;}

  /* reveal screen */
  .reveal-overlay{padding:20px 16px calc(20px + env(safe-area-inset-bottom));}
  .reveal-modal img{width:150px;height:150px;margin-bottom:18px;}
  .reveal-modal h2{font-size:1.45rem;}
  #reveal-artist-sub{font-size:.86rem;margin-bottom:16px;}
  .result-badge-wrap{margin-bottom:20px;}
  .reveal-footer{flex-direction:column;gap:10px;}
  .footer-btn{width:100%;padding:14px 18px;}
  .footer-btn.challenge-btn, .footer-btn.next-btn{flex:none;}

  /* the spotlight is a big blurred composite and costs a lot on phone
     GPUs - trim the heaviest layers down */
  .spotlight-glow{width:600px;height:420px;top:-220px;}
  .spotlight-column{--stage-core:190px;--stage-falloff:150px;}
}

/* ---------------- small phones ---------------- */
@media (max-width:380px){
  :root{--gutter:12px;}
  .app-title{font-size:1.32rem;}
  .pill-btn{padding:8px 12px;font-size:.8rem;}
  .difficulty-pills{gap:6px;}
  .disc-wrap{width:118px;height:118px;margin-bottom:40px;}
  .play-btn, .beat-ring{width:96px;height:96px;}
  .guess-after-pill{gap:4px;padding:6px;}
  .guess-chip{font-size:.72rem;padding:9px 0;}
  .custom-album-grid{grid-template-columns:repeat(2,1fr);}
  .reveal-modal h2{font-size:1.28rem;}
}

/* ---------------- phone in landscape: reclaim vertical space ---------------- */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .app-shell{padding-top:14px;gap:12px;}
  .app-title{font-size:1.2rem;margin-bottom:10px;}
  .disc-wrap{width:96px;height:96px;margin:16px auto 38px;}
  .play-btn, .beat-ring{width:80px;height:80px;}
  .play-btn svg{width:30px;height:30px;}
  .difficulty-pills{margin-bottom:14px;}
  .songbar-wrap{margin-bottom:20px;}
  .reveal-modal img{width:110px;height:110px;margin-bottom:12px;}
  .reveal-modal h2{font-size:1.2rem;}
  .result-badge-wrap{margin-bottom:14px;}
  .suggest-list{max-height:38vh;}
}

@media (prefers-reduced-motion:reduce){
  .stage-spotlight *{animation:none !important;transition:none !important;}
  .beat-ring{animation:none !important;opacity:0 !important;}
}


/* ================================================================
   MULTIPLAYER
   Same accent-variable vocabulary as the rest of the app, so the
   blue "multiplayer" theme recolours all of this for free.
   ================================================================ */

/* the era chip that opens it */
.era-chip[data-era="multiplayer"]{color:#6ecbff;font-weight:700;}
.era-chip[data-era="multiplayer"]:hover{color:#37b6ff;}
.era-chip[data-era="multiplayer"].selected{
  color:#37b6ff;text-shadow:0 0 16px rgba(55,182,255,.65);
}

.mp-panel{max-width:460px;margin:0 auto 24px;text-align:left;}
.mp-panel[hidden]{display:none;}

/* ---------------- setup: create / join ---------------- */
.mp-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  background:rgba(var(--accent-rgb), 0.05);
  border:1px solid rgba(var(--accent-rgb), 0.12);
  border-radius:14px;padding:5px;margin-bottom:16px;
}
.mp-tab{
  border:none;background:transparent;border-radius:10px;
  color:var(--text-dim);font:inherit;font-size:.86rem;font-weight:700;
  padding:10px 8px;cursor:pointer;transition:all .15s ease;
}
.mp-tab:hover{color:var(--text);}
.mp-tab.active{background:rgba(var(--accent-rgb), 0.16);color:var(--accent);}

.mp-tabpane[hidden]{display:none;}

.mp-field{display:block;margin-bottom:12px;}
.mp-field > span{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;
}
.mp-field input[type=text], .mp-field select{
  width:100%;padding:13px 14px;border-radius:12px;
  border:1px solid rgba(var(--accent-rgb), 0.16);
  background:rgba(var(--accent-rgb), 0.05);
  color:var(--text);font:inherit;font-size:1rem;
  transition:border-color .15s ease, background-color .15s ease;
}
.mp-field select{
  cursor:pointer;
  /* The dropdown list itself is painted by the OS, not by us. Without
     color-scheme:dark the browser draws a white popup and then uses our light
     `color` for the option text - white on white, unreadable. This makes the
     native popup dark, and the explicit option colours below cover the
     browsers that ignore color-scheme. */
  color-scheme:dark;
  /* native arrow disappears against the dark fill in some browsers */
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b968d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
  padding-right:34px;
}
.mp-field select option{
  background-color:#141a20;
  color:#eef2ee;
}
.mp-field select option:checked{
  background-color:rgba(var(--accent-rgb), 0.28);
  color:#ffffff;
}
.mp-field input[type=text]:focus, .mp-field select:focus{
  outline:none;border-color:var(--accent);background:rgba(var(--accent-rgb), 0.09);
}
.mp-field input:disabled, .mp-field select:disabled{opacity:.45;cursor:not-allowed;}

#mp-join-code{
  letter-spacing:.32em;font-weight:800;font-size:1.15rem;text-transform:uppercase;
}

.mp-primary{
  width:100%;padding:14px 18px;border-radius:12px;
  border:1px solid var(--accent);
  background:var(--accent);color:#06131c;
  font:inherit;font-size:.95rem;font-weight:800;cursor:pointer;
  transition:filter .15s ease, transform .12s ease, opacity .15s ease;
}
.mp-primary:hover:not(:disabled){filter:brightness(1.08);}
.mp-primary:active:not(:disabled){transform:scale(.985);}
.mp-primary:disabled{opacity:.55;cursor:progress;}

.mp-ghost{
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), 0.22);
  background:rgba(var(--accent-rgb), 0.08);
  color:var(--text-dim);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  transition:all .15s ease;white-space:nowrap;
}
.mp-ghost:hover{border-color:var(--accent);color:var(--accent);}
.mp-ghost.danger:hover{border-color:var(--danger);color:var(--danger);}
.mp-ghost[hidden]{display:none;}

.mp-error{
  margin:12px 0 0;padding:10px 12px;border-radius:10px;
  background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.3);
  color:var(--danger);font-size:.85rem;
}
.mp-error[hidden]{display:none;}

/* ---------------- lobby ---------------- */
.mp-lobby[hidden]{display:none;}
.mp-room-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid rgba(var(--accent-rgb), 0.14);
}
.mp-room-id{min-width:0;flex:1;}
.mp-room-title{
  width:100%;background:transparent;border:1px solid transparent;border-radius:8px;
  color:var(--text);font:inherit;font-size:1.15rem;font-weight:800;
  padding:4px 6px;margin:0 0 2px -6px;
}
.mp-room-title:hover:not([readonly]){border-color:rgba(var(--accent-rgb), 0.2);}
.mp-room-title:focus{outline:none;border-color:var(--accent);background:rgba(var(--accent-rgb), 0.06);}
.mp-room-title[readonly]{cursor:default;}
.mp-room-sub{font-size:.78rem;color:var(--text-dim);padding-left:0;}
.mp-room-sub b{
  color:var(--accent);font-weight:800;letter-spacing:.22em;font-family:monospace;font-size:.95rem;
}
.mp-room-actions{display:flex;gap:6px;flex:none;}

.mp-setting-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;
}
.mp-setting-grid .mp-field:last-child{grid-column:1 / -1;}
.mp-host-settings[hidden]{display:none;}

.mp-pack-row{
  display:flex;align-items:center;gap:10px;
  margin:4px 0 14px;
}
.mp-pack-label{
  flex:1;min-width:0;font-size:.82rem;color:var(--text-dim);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mp-pack-picker{
  border:1px solid rgba(var(--accent-rgb), 0.14);
  border-radius:14px;padding:12px;margin-bottom:14px;
  background:rgba(0,0,0,.2);
}
.mp-pack-picker[hidden]{display:none;}
.mp-pack-picker .custom-album-grid{max-height:260px;overflow-y:auto;}
.mp-pack-loading{
  grid-column:1 / -1;padding:16px 4px;color:var(--text-dim);font-size:.85rem;text-align:center;
}

.mp-guest-note{
  margin:0;padding:16px;border-radius:12px;text-align:center;
  background:rgba(var(--accent-rgb), 0.06);
  border:1px dashed rgba(var(--accent-rgb), 0.24);
  color:var(--text-dim);font-size:.88rem;
}
.mp-guest-note[hidden]{display:none;}

/* ---------------- in-game chrome ---------------- */
.mp-banner{
  max-width:520px;margin:0 auto 18px;padding:10px 16px;border-radius:999px;
  background:rgba(var(--accent-rgb), 0.08);
  border:1px solid rgba(var(--accent-rgb), 0.2);
  color:var(--text-dim);font-size:.86rem;font-weight:600;
}
.mp-banner[hidden]{display:none;}
.mp-banner.good{
  background:rgba(47,214,107,.1);border-color:rgba(47,214,107,.32);color:#5fe093;
}
.mp-banner.warn{
  background:rgba(255,202,18,.09);border-color:rgba(255,202,18,.3);color:#ffd75e;
}
.mp-banner.error{
  background:rgba(255,90,90,.1);border-color:rgba(255,90,90,.32);color:#ff8080;
}

.mp-round-label{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.mp-round-label[hidden]{display:none;}

/* ---------------- scoreboard ---------------- */
.mp-scoreboard[hidden]{display:none;}
.mp-scoreboard{margin-top:18px;}
.mp-score-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.mp-score-row{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;border-radius:10px;
  background:rgba(var(--accent-rgb), 0.05);
  border:1px solid rgba(var(--accent-rgb), 0.1);
  font-size:.85rem;color:var(--text-dim);
  transition:all .2s ease;
}
.mp-score-row.is-you{
  background:rgba(var(--accent-rgb), 0.14);
  border-color:rgba(var(--accent-rgb), 0.3);
  color:var(--text);
}
.mp-score-row.is-away{opacity:.4;}
.mp-score-rank{
  flex:none;width:16px;text-align:center;font-weight:800;font-size:.75rem;
  color:rgba(var(--accent-rgb), 0.6);
}
.mp-score-name{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;
}
.mp-host-tag{
  margin-left:6px;padding:1px 5px;border-radius:4px;
  background:rgba(var(--accent-rgb), 0.22);color:var(--accent);
  font-size:.55rem;font-weight:800;letter-spacing:.08em;vertical-align:middle;
}
.mp-score-points{flex:none;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.mp-score-mark{flex:none;width:8px;height:8px;border-radius:50%;}
.mp-mark-correct{background:var(--success);box-shadow:0 0 8px var(--success);}
.mp-mark-out{background:var(--danger);}
.mp-mark-guessing{
  background:var(--accent);
  animation:mpPulse 1.1s ease-in-out infinite;
}
@keyframes mpPulse{0%,100%{opacity:.3;}50%{opacity:1;}}
body.reduce-motion .mp-mark-guessing{animation:none;opacity:.8;}

/* ---------------- round result overlay ---------------- */
.mp-result-overlay{
  position:fixed;inset:0;z-index:60;
  background:linear-gradient(
    to bottom,
    rgba(7,10,12,.62) 0%,
    rgba(7,10,12,.80) 40%,
    rgba(7,10,12,.93) 100%
  );
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
  animation:revealFadeIn .22s ease;
  overflow-y:auto;
}
.mp-result-overlay[hidden]{display:none;}
.mp-result-modal{
  width:100%;max-width:400px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  animation:revealPop .3s cubic-bezier(.16,1,.3,1);
}
.mp-result-modal img{
  width:150px;height:150px;border-radius:18px;object-fit:cover;
  box-shadow:0 16px 36px -8px rgba(0,0,0,.85);
  margin:0 auto 18px;background:#19201b;
}
.mp-result-eyebrow{
  margin:0 0 6px;font-size:.74rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent);
}
.mp-result-modal h2{
  margin:0 0 6px;font-size:1.6rem;font-weight:800;color:#fff;
  letter-spacing:-.02em;line-height:1.2;
}
.mp-result-sub{margin:0 0 22px;color:#8b978e;font-size:.9rem;}

.mp-result-rows{
  width:100%;display:flex;flex-direction:column;gap:6px;margin-bottom:22px;
}
.mp-result-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:12px;
  background:rgba(var(--accent-rgb), 0.06);
  border:1px solid rgba(var(--accent-rgb), 0.12);
  font-size:.9rem;color:var(--text-dim);
}
.mp-result-row.is-you{
  background:rgba(var(--accent-rgb), 0.16);
  border-color:rgba(var(--accent-rgb), 0.34);
  color:var(--text);
}
.mp-result-rank{
  flex:none;width:18px;font-weight:800;font-size:.78rem;
  color:rgba(var(--accent-rgb), 0.65);
}
.mp-result-name{
  flex:1;min-width:0;text-align:left;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mp-gain{flex:none;font-weight:800;color:var(--success);font-variant-numeric:tabular-nums;}
.mp-gain.zero{color:rgba(255,255,255,.25);}
.mp-result-total{
  flex:none;min-width:38px;text-align:right;
  font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;
}
.mp-result-wait{
  margin:0;color:var(--text-dim);font-size:.85rem;
}
.mp-result-wait[hidden], #mp-next-btn[hidden]{display:none;}

/* ---------------- phones ---------------- */
@media (max-width:560px){
  .mp-panel{margin-bottom:18px;}
  .mp-setting-grid{grid-template-columns:1fr;}
  .mp-room-head{flex-direction:column;align-items:stretch;gap:10px;}
  .mp-room-actions{justify-content:flex-end;}
  .mp-scoreboard{margin-top:14px;}
  .mp-banner{font-size:.8rem;padding:9px 14px;}
  .mp-result-modal img{width:126px;height:126px;margin-bottom:14px;}
  .mp-result-modal h2{font-size:1.32rem;}
  .mp-result-rows{margin-bottom:18px;}
  .mp-pack-picker .custom-album-grid{max-height:220px;}
}

/* While the multiplayer lobby is open there is no round to play yet, so the
   solo game's transport controls would just be dead furniture. */
/* In multiplayer, everything that belongs to a live round stays hidden until
   one is running - that covers the create/join screen, the lobby and the gaps
   between rounds, not just the lobby. */
body.mp-mode:not(.mp-playing) .songbar-wrap,
body.mp-mode:not(.mp-playing) .disc-wrap,
body.mp-mode:not(.mp-playing) #guess-form,
body.mp-mode:not(.mp-playing) .status-line,
body.mp-mode:not(.mp-playing) .round-only-settings{
  display:none;
}

/* Escape hatches that stay reachable during a multiplayer game. */
.mp-game-bar{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:0 auto 18px;
}
.mp-game-bar[hidden]{display:none;}

.mp-result-actions{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;
}
.mp-result-actions .mp-ghost{background:transparent;}

/* ================================================================
   WIN SEQUENCE
   Only ever runs on a correct guess. The stage light tightens onto the
   play button for a beat, everything else dims out, and the reveal lands
   as the beam blows out to white.
   ================================================================ */
body.win-focus{
  --beam-intensity: 1;
  --beam-flash: 1;
}

/* narrow the cone and drive it bright - the "focus" moment */
body.win-focus .spotlight-beam{
  animation:winBeamFocus .95s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes winBeamFocus{
  0%   { filter:blur(22px) brightness(1);    transform:scaleX(1); }
  45%  { filter:blur(10px) brightness(1.5);  transform:scaleX(.42); }
  75%  { filter:blur(8px)  brightness(1.9);  transform:scaleX(.34); }
  100% { filter:blur(26px) brightness(2.6);  transform:scaleX(1.25); }
}
body.win-focus .spotlight-beam,
body.win-focus .spotlight-flare,
body.win-focus .spotlight-glow{
  transform-origin:50% 0;
}

body.win-focus .spotlight-flare{
  animation:winFlarePop .95s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes winFlarePop{
  0%   { opacity:.2; transform:scale(1); }
  50%  { opacity:.9; transform:scale(.8); }
  100% { opacity:1;  transform:scale(1.6); }
}

/* the pool of light on the floor tightens with the beam */
body.win-focus .spotlight-floor-pool{
  animation:winPoolFocus .95s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes winPoolFocus{
  0%   { transform:translateX(-50%) scaleX(1)   scaleY(1);   opacity:.5; }
  50%  { transform:translateX(-50%) scaleX(.45) scaleY(.7);  opacity:1; }
  100% { transform:translateX(-50%) scaleX(1.4) scaleY(1.3); opacity:.9; }
}

/* everything but the disc recedes while the light narrows */
body.win-focus .app-shell > .side-panel,
body.win-focus .era-nav,
body.win-focus .difficulty-pills,
body.win-focus .songbar-wrap,
body.win-focus #guess-form,
body.win-focus .mp-banner,
body.win-focus .mp-round-label,
body.win-focus .mp-game-bar{
  transition:opacity .45s ease, filter .45s ease;
  opacity:.12;
  filter:blur(2px);
  pointer-events:none;
}
body.win-focus .disc-wrap{
  animation:winDiscPulse .95s cubic-bezier(.3,0,.2,1) forwards;
}
@keyframes winDiscPulse{
  0%   { transform:scale(1); }
  40%  { transform:scale(1.12); }
  100% { transform:scale(.86); opacity:0; }
}

/* white bloom right as the card arrives */
.win-flash{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 38%, #fff 0%, rgba(255,255,255,.35) 35%, transparent 72%);
  opacity:0;
}
.win-flash.go{animation:winFlash .7s ease-out forwards;}
@keyframes winFlash{
  0%{opacity:0;} 18%{opacity:.85;} 100%{opacity:0;}
}

/* confetti sits above the reveal card so it rains over the artwork */
#confetti-canvas{
  position:fixed;inset:0;z-index:120;pointer-events:none;
}

/* the revealed card gets a small celebratory lift on a win */
.reveal-modal.won img{animation:winArtPop .5s cubic-bezier(.16,1,.3,1);}
@keyframes winArtPop{
  0%{transform:scale(.82) rotate(-4deg);opacity:0;}
  100%{transform:none;opacity:1;}
}
.reveal-modal.won .result-badge{animation:winBadgeStamp .45s cubic-bezier(.16,1,.3,1) .12s backwards;}
@keyframes winBadgeStamp{
  0%{transform:scale(2.1) rotate(-16deg);opacity:0;}
  60%{transform:scale(.94) rotate(-4deg);opacity:1;}
  100%{transform:rotate(-4deg);opacity:1;}
}

/* respect the motion switch and the OS setting: straight to the reveal */
body.reduce-motion.win-focus .spotlight-beam,
body.reduce-motion.win-focus .spotlight-flare,
body.reduce-motion.win-focus .spotlight-floor-pool,
body.reduce-motion.win-focus .disc-wrap{animation:none !important;}
@media (prefers-reduced-motion:reduce){
  body.win-focus .spotlight-beam,
  body.win-focus .spotlight-flare,
  body.win-focus .spotlight-floor-pool,
  body.win-focus .disc-wrap,
  .win-flash.go,
  .reveal-modal.won img,
  .reveal-modal.won .result-badge{animation:none !important;}
}

/* "GUESSED AT 0.1s" is a lot longer than "WON!" - shrink it rather than let
   the pill overflow the card on narrow screens. */
@media (max-width:380px){
  .result-badge{font-size:.92rem;padding:7px 16px;letter-spacing:.03em;}
}

/* keep the seconds unit lowercase inside the uppercased badge */
.badge-secs{text-transform:none;}

/* ---------------- typing spinner ---------------- */
.search-spinner{
  position:absolute;right:16px;top:50%;
  width:16px;height:16px;margin-top:-8px;
  border-radius:50%;
  border:2px solid rgba(var(--accent-rgb), 0.25);
  border-top-color:var(--accent);
  animation:searchSpin .7s linear infinite;
  pointer-events:none;
}
.search-spinner[hidden]{display:none;}
@keyframes searchSpin{to{transform:rotate(360deg);}}
body.reduce-motion .search-spinner{animation:none;border-top-color:rgba(var(--accent-rgb), 0.6);}
@media (prefers-reduced-motion:reduce){
  .search-spinner{animation:none;}
}
/* leave room for it so long titles don't slide under the spinner */
.guess-wrap input[type=text]{padding-right:42px;}

/* ---------------- action button: Guess / Skip / Give up ---------------- */
.skip-btn .guess-icon{display:none;}
.skip-btn[data-state="guess"] .skip-icon{display:none;}
.skip-btn[data-state="guess"] .guess-icon{display:inline-block;}
.skip-btn[data-state="guess"]{
  background:rgba(var(--accent-rgb), 0.18);
  border-color:var(--accent);
  color:var(--accent);
}
.skip-btn[data-state="giveup"]{
  border-color:rgba(var(--accent-rgb), 0.4);
}
.skip-label{white-space:nowrap;}

/* ================================================================
   REVEAL STAGE LIGHT
   The win sequence ends on a tight, bright cone and that is the look
   worth keeping, so the reveal screen holds it instead of falling back
   to the wide ambient beam. Coming from a win it continues seamlessly;
   coming from a loss it eases in as the card lands.
   ================================================================ */
body.revealing-win .spotlight-beam,
body.revealing-win .spotlight-flare,
body.revealing-win .spotlight-glow{
  transform-origin:50% 0;
}

body.revealing-win{
  /* drive the beam's own opacity/intensity maths near the top of its range */
  --beam-intensity:0.9;
}

body.revealing-win .spotlight-beam{
  transform:scaleX(.5);
  filter:blur(11px) brightness(4.6) saturate(1.35);
  /* opacity keeps its fast easing so the beat pulse still reads */
  transition:transform .55s cubic-bezier(.4,0,.2,1),
             filter .55s ease,
             opacity .06s ease-out;
}

body.revealing-win .spotlight-glow{
  transform:scale(.6);
  opacity:calc(1.5 + var(--beam-flash, 0) * 0.4);
  filter:blur(24px) brightness(1.7);
  transition:transform .55s cubic-bezier(.4,0,.2,1), opacity .06s ease-out;
}

body.revealing-win .spotlight-flare{
  transform:scale(1.25);
  opacity:calc(0.6 + var(--beam-flash, 0) * 0.7);
  transition:transform .55s ease, opacity .06s ease-out;
}

body.revealing-win .spotlight-floor-pool{
  transform:translateX(-50%) scaleX(.62) scaleY(1.35);
  opacity:calc(1 + var(--beam-flash, 0) * 0.35);
  transition:transform .55s cubic-bezier(.4,0,.2,1), opacity .1s ease-out;
}

/* pull the warm column in so the sides go properly dark around the cone */
body.revealing-win .spotlight-column{
  --stage-core:190px;
  --stage-falloff:150px;
  opacity:calc(0.9 + var(--beam-intensity, 0) * 0.15);
}

/* deepen the corners so the cone reads as a cone */
body.revealing-win .spotlight-vignette{
  background:radial-gradient(
    104% 86% at 50% 4%,
    transparent 30%,
    rgba(0,0,0,.55) 66%,
    rgba(0,0,0,.88) 100%
  );
}

body.reduce-motion.revealing .stage-spotlight *{transition:none !important;}
@media (prefers-reduced-motion:reduce){
  body.revealing .stage-spotlight *{transition:none !important;}
}

/* the artwork needs a touch more lift now the stage behind it is brighter */
body.revealing .reveal-modal img,
body.revealing .mp-result-modal img{
  box-shadow:0 20px 44px -10px rgba(0,0,0,.92);
}
body.revealing .reveal-modal h2,
body.revealing .mp-result-modal h2{
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}

/* A crisp core down the middle of the cone. The blurred conic beam alone
   reads as haze; this gives it an actual visible shaft. */
body.revealing-win .stage-spotlight::after{
  content:"";
  position:absolute;
  left:50%;
  top:-6%;
  width:min(52vw, 620px);
  height:106%;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--accent) 26%, transparent) 0%,
      color-mix(in srgb, var(--accent) 13%, transparent) 30%,
      color-mix(in srgb, var(--accent) 5%, transparent) 62%,
      transparent 88%
    );
  clip-path:polygon(41% 0%, 59% 0%, 84% 100%, 16% 100%);
  filter:blur(26px);
  opacity:calc(0.55 + var(--beam-flash, 0) * 0.45);
  transition:opacity .08s ease-out;
}
body.reduce-motion.revealing-win .stage-spotlight::after{transition:none;}

/* on a win, open the scrim right up so the beam can carry the screen */
body.revealing-win .reveal-overlay{
  background:linear-gradient(
    to bottom,
    rgba(8,11,9,.02) 0%,
    rgba(8,11,9,.24) 28%,
    rgba(8,11,9,.70) 60%,
    rgba(8,11,9,.93) 100%
  );
}
body.revealing-win .mp-result-overlay{
  background:linear-gradient(
    to bottom,
    rgba(7,10,12,.02) 0%,
    rgba(7,10,12,.24) 28%,
    rgba(7,10,12,.70) 60%,
    rgba(7,10,12,.93) 100%
  );
}

/* ================================================================
   FOREGROUND WIN BEAM
   Above the card, not behind it. mix-blend-mode:screen only ever
   lightens, so the artwork stays fully readable and simply looks lit.
   ================================================================ */
.reveal-beam{
  position:fixed;inset:0;z-index:65;
  pointer-events:none;
  display:none;
  mix-blend-mode:screen;
}
body.revealing-win .reveal-beam{
  display:block;
  animation:revealBeamIn .55s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes revealBeamIn{
  from{opacity:0;transform:scaleY(.86);}
  to{opacity:1;transform:none;}
}
.reveal-beam > i{position:absolute;display:block;left:50%;transform:translateX(-50%);}

/* One cone, no clip-paths. clip-path gives every layer a hard edge that only
   half-dissolves under blur, which is what produced the visible stripes. A
   conic-gradient fades out by angle instead, so the sides have no edge at all
   and the whole thing reads as a single shaft of light. */
.reveal-beam-cone{
  --apex:-560px;
  left:0;right:0;top:0;bottom:0;
  width:100%;height:100%;
  transform:none;
  background:conic-gradient(
    from 157deg at 50% var(--apex),
    transparent 0deg,
    color-mix(in srgb, var(--accent) 3%, transparent) 4deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 8deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 13deg,
    color-mix(in srgb, var(--accent) 34%, transparent) 19deg,
    color-mix(in srgb, var(--accent) 38%, #ffffff 6%) 23deg,
    color-mix(in srgb, var(--accent) 34%, transparent) 27deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 33deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 38deg,
    color-mix(in srgb, var(--accent) 3%, transparent) 42deg,
    transparent 46deg
  );
  /* fade along its length so it dissipates rather than stopping dead */
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.88) 34%,
    rgba(0,0,0,.55) 64%,
    rgba(0,0,0,.2) 86%,
    transparent 100%
  );
  -webkit-mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.88) 34%,
    rgba(0,0,0,.55) 64%,
    rgba(0,0,0,.2) 86%,
    transparent 100%
  );
  filter:blur(38px);
  opacity:calc(.78 + var(--beam-flash, 0) * .4);
  transition:opacity .08s ease-out;
}

/* the lamp itself - a soft radial with no edge, so it melts into the cone */
.reveal-beam-top{
  top:-30%;width:min(78vw, 900px);height:56%;
  background:radial-gradient(
    50% 50% at 50% 66%,
    rgba(255,255,255,.30) 0%,
    color-mix(in srgb, var(--accent) 34%, transparent) 30%,
    color-mix(in srgb, var(--accent) 12%, transparent) 54%,
    transparent 76%
  );
  filter:blur(46px);
  opacity:calc(.62 + var(--beam-flash, 0) * .45);
  transition:opacity .08s ease-out;
}

body.reduce-motion .reveal-beam{animation:none !important;}
body.reduce-motion .reveal-beam > i{transition:none !important;}
@media (prefers-reduced-motion:reduce){
  body.revealing-win .reveal-beam{animation:none;}
  .reveal-beam > i{transition:none;}
}

/* phones: keep the cone proportionate to a narrow screen */
@media (max-width:560px){
  .reveal-beam-cone{--apex:-360px;filter:blur(26px);}
  .reveal-beam-top{width:120vw;filter:blur(34px);}
}

/* The beam blends over everything above it, which washed the album art out.
   Punch a soft hole where the card sits so the artwork stays readable while
   the light still spills around it. */
body.revealing-win .reveal-modal img,
body.revealing-win .mp-result-modal img{
  position:relative;
  z-index:66;
  isolation:isolate;
}

/* ---------------- per-round difficulty ---------------- */
.mp-round-diff{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin:-8px 0 14px;
}
.mp-round-diff[hidden]{display:none;}
.mp-round-diff .mp-bonus{
  margin-left:8px;
  padding:2px 7px;border-radius:6px;
  background:rgba(var(--accent-rgb), 0.18);
  color:var(--accent);
  font-size:.68rem;letter-spacing:.04em;
}

.mp-next-difficulty{
  width:100%;margin:0 0 12px;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.mp-next-difficulty[hidden]{display:none;}
.mp-diff-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.mp-diff-pill{
  padding:7px 12px;border-radius:999px;
  font-size:.76rem;font-weight:700;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text-dim);
  transition:all .15s ease;
}
.mp-diff-pill:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
.mp-diff-pill .mp-pill-mult{opacity:.7;font-size:.68rem;margin-left:4px;}
.mp-diff-pill[data-diff="easy"].selected{background:rgba(25,223,112,.2);border-color:#19df70;color:#39e887;}
.mp-diff-pill[data-diff="medium"].selected{background:rgba(255,202,18,.2);border-color:#ffca12;color:#ffd75e;}
.mp-diff-pill[data-diff="hard"].selected{background:rgba(255,117,23,.2);border-color:#ff7517;color:#ff9a54;}
.mp-diff-pill[data-diff="expert"].selected{background:rgba(240,68,68,.2);border-color:#f04444;color:#ff7b7b;}
.mp-diff-pill[data-diff="impossible"].selected{background:rgba(151,72,221,.2);border-color:#9748dd;color:#b985ea;}

@media (max-width:560px){
  .mp-diff-pill{padding:6px 9px;font-size:.7rem;}
}


/* per-player round breakdown on the result card */
.mp-result-row{flex-wrap:wrap;}
.mp-result-meta{
  /* 100% + a 28px margin is 28px wider than the row, which pushed the buttons
     out past its right edge on narrow screens. */
  flex:1 0 calc(100% - 28px);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:4px 0 0 28px;
  font-size:.74rem;color:var(--text-dim);font-weight:600;
}
.mp-result-song{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.mp-tier-tag{
  padding:2px 7px;border-radius:5px;font-size:.62rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;flex:none;
}
.mp-tier-tag[data-diff="easy"]{background:rgba(25,223,112,.18);color:#39e887;}
.mp-tier-tag[data-diff="medium"]{background:rgba(255,202,18,.18);color:#ffd75e;}
.mp-tier-tag[data-diff="hard"]{background:rgba(255,117,23,.18);color:#ff9a54;}
.mp-tier-tag[data-diff="expert"]{background:rgba(240,68,68,.18);color:#ff7b7b;}
.mp-tier-tag[data-diff="impossible"]{background:rgba(151,72,221,.18);color:#b985ea;}
.mp-result-time{color:var(--accent);font-weight:800;flex:none;}
.mp-result-missed{color:rgba(255,255,255,.3);flex:none;}

/* the in-round tier switcher sits with the other game chrome */
.mp-live-difficulty{margin:0 auto 16px;}
.mp-live-difficulty[hidden]{display:none;}

/* ---------------- tries left ---------------- */
.tries-left{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:0 4px;
  color:var(--text-dim);
  font-size:.72rem;font-weight:800;letter-spacing:.06em;
  white-space:nowrap;
}
.tries-left[hidden]{display:none;}
.tries-pips{display:flex;align-items:center;gap:4px;}
.try-pip{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
  transition:background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.try-pip.spent{
  background:rgba(255,255,255,.16);
  box-shadow:none;
}
.tries-left.last{color:var(--danger);}
.tries-left.last .try-pip:not(.spent){
  background:var(--danger);box-shadow:0 0 8px rgba(255,90,90,.6);
}

@media (max-width:560px){
  /* the guess row stacks on phones, so centre the counter under the button */
  .tries-left{justify-content:center;padding-top:2px;}
}

/* ---------------- per-row play / Spotify on the result card ---------------- */
.mp-row-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(var(--accent-rgb), 0.3);
  background:rgba(var(--accent-rgb), 0.12);
  color:var(--accent);
  cursor:pointer;padding:0;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.mp-row-btn:hover{
  background:rgba(var(--accent-rgb), 0.26);
  border-color:var(--accent);
}
.mp-row-btn:active{transform:scale(.92);}
.mp-row-btn svg{width:13px;height:13px;fill:currentColor;}

/* play / pause swap on the row button */
.mp-row-play .i-pause{display:none;}
.mp-row-play.is-playing .i-play{display:none;}
.mp-row-play.is-playing .i-pause{display:block;}
.mp-row-play.is-playing{
  background:var(--accent);
  border-color:var(--accent);
  color:#08130c;
}

.mp-row-spotify{
  background:rgba(30,215,96,.16);
  border-color:rgba(30,215,96,.42);
  color:#1ed760;
}
.mp-row-spotify:hover{
  background:rgba(30,215,96,.3);
  border-color:#1ed760;
}
/* the three waves are cut out of the filled disc */
.mp-row-spotify svg circle{fill:currentColor;}
.mp-row-spotify svg path{
  fill:none;stroke:#08130c;stroke-width:1.9;stroke-linecap:round;
}

/* A tiny flex-basis on the title: without it the title's own width pushes the
   buttons onto a second line instead of letting the title ellipsize. */
.mp-result-meta{gap:7px;}
.mp-result-song{flex:1 1 60px;min-width:0;}

/* the three waves need a touch more room than the play triangle */
.mp-row-spotify svg{width:15px;height:15px;}

@media (max-width:560px){
  .mp-row-btn{width:24px;height:24px;}
  .mp-row-btn svg{width:12px;height:12px;}
  .mp-row-spotify svg{width:14px;height:14px;}
}