@import url(/static/fonts/fonts.css);

/* The look follows the board game: black box, pink neon logo, cyan neon
   frame, square song cards in bright colours with a huge black year, black
   mystery cards with broken neon rings, round black token chips. */
:root {
  --bg: #0b0b0e;
  --panel: #16161b;
  --panel-2: #1e1e25;
  --line: #2c2c36;
  --text: #f4f4f7;
  --muted: #9a9aa8;
  --pink: #ff1f8e;
  --cyan: #19c3f0;
  --yellow: #ffc21a;
  --ok: #3ee08a;
  --bad: #ff4d5e;
  --card: 132px;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(255, 31, 142, .14), transparent 60%),
    radial-gradient(900px 500px at 105% 10%, rgba(25, 195, 240, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 500 16px/1.45 Montserrat, system-ui, sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--cyan); }
h1, h2, h3 { margin: 0 0 .6em; line-height: 1.15; }
h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; }
h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.stack > * + * { margin-top: .8rem; }
.center { text-align: center; }

/* ---------------------------------------------------------------- neon logo */
.logo {
  font-family: 'Tilt Neon', Montserrat, sans-serif;
  color: #ffe6f3;
  letter-spacing: .06em;
  text-shadow: 0 0 2px #fff, 0 0 6px var(--pink), 0 0 14px var(--pink), 0 0 28px var(--pink), 0 0 48px rgba(255, 31, 142, .6);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.logo.big { font-size: clamp(3.4rem, 13vw, 7.5rem); display: block; text-align: center; }
.logo.small { font-size: 1.7rem; }
.tagline {
  display: table;
  margin: 1.1rem auto 0;
  padding: .45rem 1.2rem;
  border: 2px solid #bff3ff;
  border-radius: 10px;
  color: #eafcff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(.8rem, 2.6vw, 1.05rem);
  box-shadow: 0 0 6px var(--cyan), 0 0 18px rgba(25, 195, 240, .55), inset 0 0 8px rgba(25, 195, 240, .5);
  text-shadow: 0 0 6px rgba(25, 195, 240, .9);
}

/* ---------------------------------------------------------------- layout */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 14, .75);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.topbar nav { margin-left: auto; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.topbar nav a, .linkbtn {
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: .9rem;
  padding: .35rem .6rem; border-radius: 8px; background: none; border: 0; cursor: pointer; font-family: inherit;
}
.topbar nav a:hover, .linkbtn:hover { color: var(--text); background: var(--panel-2); }
main { max-width: 1100px; margin: 0 auto; padding: 1.4rem 1rem 4rem; }
main.wide { max-width: none; padding: 1rem 1.2rem 3rem; }
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem;
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.hero { padding: 2.2rem 0 1.8rem; }

/* ---------------------------------------------------------------- forms */
label { display: block; font-weight: 700; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
input, select {
  width: 100%;
  font: inherit; color: var(--text);
  background: #0f0f13; border: 1px solid var(--line); border-radius: 10px;
  padding: .65rem .8rem;
}
input:focus, select:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; }
input[type=checkbox] { width: auto; accent-color: var(--pink); transform: scale(1.2); }
input[type=range] { padding: 0; accent-color: var(--pink); }
.check { display: flex; gap: .6rem; align-items: center; font-weight: 600; color: var(--text); font-size: .95rem; margin: .4rem 0; cursor: pointer; }
.check.disabled { opacity: .45; cursor: default; }
.code-input { text-transform: uppercase; letter-spacing: .3em; font-weight: 800; font-size: 1.4rem; text-align: center; }
button, .btn {
  font: 800 .95rem Montserrat, sans-serif; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 0; border-radius: 999px; padding: .75rem 1.3rem; cursor: pointer;
  background: var(--panel-2); color: var(--text); text-decoration: none;
  transition: transform .08s, box-shadow .2s, background .2s;
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 0 18px rgba(255, 31, 142, .45); }
.btn-cyan { background: var(--cyan); color: #04212b; box-shadow: 0 0 18px rgba(25, 195, 240, .4); }
.btn-yellow { background: var(--yellow); color: #2a1d00; }
.btn-ghost { background: transparent; border: 1px solid var(--line); }
.btn-small { padding: .4rem .8rem; font-size: .82rem; }
.btn-block { width: 100%; }
.btn-spotify { background: #1ed760; color: #04240f; }

.notice { padding: .7rem .9rem; border-radius: 10px; background: rgba(25, 195, 240, .1); border: 1px solid rgba(25, 195, 240, .35); }
.notice.err { background: rgba(255, 77, 94, .1); border-color: rgba(255, 77, 94, .45); }
.notice.ok { background: rgba(62, 224, 138, .1); border-color: rgba(62, 224, 138, .4); }
.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: #26262f; border: 1px solid var(--line); border-left: 4px solid var(--pink);
  padding: .8rem 1.1rem; border-radius: 10px; z-index: 100; max-width: min(92vw, 560px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: .7rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.pill { font-size: .72rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; background: var(--panel-2); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pill.pink { background: rgba(255, 31, 142, .18); color: #ff8cc4; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; background: #555; flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.copybox { display: flex; gap: .5rem; }
.copybox input { font-family: ui-monospace, monospace; font-size: .85rem; }

/* ---------------------------------------------------------------- song card */
.hcard {
  --c1: #ffd23f; --c2: #f7a823;
  position: relative;
  width: var(--card); aspect-ratio: 1;
  flex: none;
  border-radius: calc(var(--card) * .045);
  background: linear-gradient(140deg, var(--c1), var(--c2));
  color: #111;
  display: flex; flex-direction: column;
  padding: calc(var(--card) * .08);
  box-shadow: 0 2px 0 rgba(255,255,255,.25) inset, 0 8px 18px rgba(0,0,0,.45);
  overflow: hidden;
  user-select: none;
}
.hcard .artist {
  font-weight: 800; font-size: calc(var(--card) * .085); line-height: 1.12;
  text-align: right; margin-left: 18%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hcard .year {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: calc(var(--card) * .3); letter-spacing: -.02em; line-height: 1;
}
.hcard .title {
  font-style: italic; font-weight: 600; font-size: calc(var(--card) * .08); line-height: 1.15;
  margin-right: 18%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hcard.mini { --card: 64px; padding: 6px; }
.hcard.mini .artist, .hcard.mini .title { display: none; }
.hcard.mini .year { font-size: 17px; }
.hcard.new { animation: card-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes card-pop { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }

/* card colours, as on the printed cards */
.cc0 { --c1: #ffd84a; --c2: #f9b11c; }  /* yellow */
.cc1 { --c1: #ffb347; --c2: #f68b1f; }  /* orange */
.cc2 { --c1: #ff6a4a; --c2: #ec1f2d; }  /* red */
.cc3 { --c1: #ff7fbf; --c2: #ef3d8e; }  /* pink */
.cc4 { --c1: #c49bf2; --c2: #8b5cd6; }  /* purple */
.cc5 { --c1: #63c7f7; --c2: #1a95dc; }  /* blue */
.cc6 { --c1: #5fe0d2; --c2: #18b4a9; }  /* teal */
.cc7 { --c1: #9ee28a; --c2: #4fbf5f; }  /* green */
.cc8 { --c1: #c3c98a; --c2: #6f9a72; }  /* olive */
.cc9 { --c1: #ff9466; --c2: #f2582a; }  /* tangerine */

/* mystery card: black with broken neon rings around the code */
.hcard.back {
  background: #121214;
  color: #fff;
  padding: 0;
  align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px #2a2a2f inset, 0 10px 24px rgba(0,0,0,.6);
}
.hcard.back svg.rings { position: absolute; inset: 4%; width: 92%; height: 92%; }
.hcard.back.spin svg.rings .r { animation: spin linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
.hcard.back.spin svg.rings .r1 { animation-duration: 9s; }
.hcard.back.spin svg.rings .r2 { animation-duration: 13s; animation-direction: reverse; }
.hcard.back.spin svg.rings .r3 { animation-duration: 7s; }
.hcard.back.spin svg.rings .r4 { animation-duration: 11s; animation-direction: reverse; }
.hcard.back.spin svg.rings .r5 { animation-duration: 5s; }
@keyframes spin { to { transform: rotate(360deg); } }
.hcard.back .qr {
  position: relative; width: 32%; aspect-ratio: 1; background: #fff; border-radius: 4px; padding: 3%;
  display: flex; align-items: center; justify-content: center;
}
.hcard.back .qr img { width: 100%; height: 100%; display: block; }
.hcard.back .eq { position: relative; display: flex; gap: 6%; align-items: flex-end; width: 30%; height: 26%; }
.hcard.back .eq i { flex: 1; background: #fff; border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.hcard.back .eq i:nth-child(2) { animation-delay: -.3s; } .hcard.back .eq i:nth-child(3) { animation-delay: -.6s; } .hcard.back .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.hcard.back:not(.spin) .eq i { animation-play-state: paused; }
.hcard.ghost { opacity: .9; outline: 3px dashed var(--pink); outline-offset: 4px; }

/* flip on reveal */
.flip { perspective: 900px; }
.flip .inner { position: relative; transform-style: preserve-3d; animation: flip .7s ease-out both; }
.flip .inner > .hcard { backface-visibility: hidden; }
.flip .inner > .hcard.back { position: absolute; inset: 0; transform: rotateY(180deg); }
@keyframes flip { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }

/* ---------------------------------------------------------------- token chip */
.token {
  --t: 26px;
  width: var(--t); height: var(--t); flex: none; display: inline-block; border-radius: 50%;
  background: #121214; box-shadow: 0 0 0 1px #33333a, 0 2px 4px rgba(0,0,0,.6);
  vertical-align: middle;
}
.token svg { width: 100%; height: 100%; display: block; }
.token.big { --t: 44px; }
.tokens { display: inline-flex; align-items: center; }
.tokens .token + .token { margin-left: calc(var(--t) * -.35); }
.tokens .none { color: var(--muted); font-size: .8rem; }

/* ---------------------------------------------------------------- timeline */
.timeline-wrap { overflow-x: auto; padding: 1rem .2rem 1.2rem; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.timeline { display: flex; align-items: center; gap: 0; min-width: min-content; margin: 0 auto; width: max-content; }
.slot {
  position: relative; flex: none;
  width: 22px; height: calc(var(--card) * .9); margin: 0 4px;
  border-radius: 10px; border: 2px dashed transparent;
  display: flex; align-items: center; justify-content: center;
  transition: width .15s, border-color .15s, background .15s;
}
.slot.open { border-color: rgba(255,255,255,.18); cursor: pointer; width: 34px; }
.slot.open::after { content: '+'; color: rgba(255,255,255,.5); font-weight: 900; font-size: 1.4rem; }
.slot.open:hover { border-color: var(--pink); background: rgba(255, 31, 142, .1); }
.slot.chosen { width: auto; border: 0; margin: 0 8px; }
.slot.chosen::after { content: none; }
.slot.chosen.mark-ok { background: none; } .slot.chosen.mark-ok .hcard { outline: 4px solid var(--ok); outline-offset: 3px; }
.slot.chosen.mark-bad { background: none; } .slot.chosen.mark-bad .hcard { outline: 4px solid var(--bad); outline-offset: 3px; }
.slot.taken { width: 40px; border-color: rgba(25,195,240,.5); }
.slot.taken::after { content: none; }
.slot.mark-ok { border-color: var(--ok); background: rgba(62,224,138,.12); }
.slot.mark-bad { border-color: var(--bad); background: rgba(255,77,94,.12); }
.slot .chip { position: absolute; top: -14px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.slot.open.target { border-color: var(--yellow); background: rgba(255, 194, 26, .12); }
.timeline .hcard { margin: 0 2px; }
.timeline-label { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--muted); text-align: center; }
.timeline-arrow { height: 2px; margin: 0 auto; max-width: 100%; background: linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent); }

/* ---------------------------------------------------------------- game table */
.table {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 320px;
}
@media (max-width: 1000px) { .table { grid-template-columns: 1fr; } }
.stage {
  border-radius: 22px; padding: 1.4rem 1rem 1rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, #1a1a20, #121216);
  border: 1px solid var(--line);
  min-height: 60vh;
  display: flex; flex-direction: column; gap: 1rem;
}
.stage .headline { text-align: center; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 900; }
.stage .headline .who { color: var(--pink); text-shadow: 0 0 14px rgba(255, 31, 142, .5); }
.center-card { display: flex; justify-content: center; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.center-card .hcard { --card: min(260px, 52vw); }
.result {
  text-align: center; font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 900; padding: .6rem 1rem; border-radius: 12px;
}
.result.ok { color: var(--ok); text-shadow: 0 0 14px rgba(62,224,138,.4); }
.result.bad { color: var(--bad); }
.result.steal { color: var(--cyan); }
.countdown { height: 6px; border-radius: 999px; background: #2a2a33; overflow: hidden; max-width: 520px; margin: 0 auto; width: 100%; }
.countdown i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--yellow)); transition: width .25s linear; }
.hitster-call {
  font-family: 'Tilt Neon', sans-serif; font-size: clamp(2rem, 6vw, 3.6rem); text-align: center; color: #e6fbff;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--cyan), 0 0 30px var(--cyan);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .65; } }
.scoreboard .player { display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .7rem; align-items: center; padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
.scoreboard .player:last-child { border-bottom: 0; }
.scoreboard .player.active { background: linear-gradient(90deg, rgba(255,31,142,.14), transparent); border-radius: 10px; }
.scoreboard .name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard .count { font-weight: 900; font-size: 1.1rem; }
.scoreboard .bar { grid-column: 1 / -1; height: 5px; background: #2a2a33; border-radius: 999px; overflow: hidden; }
.scoreboard .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.scoreboard .minis { grid-column: 1 / -1; display: flex; gap: 3px; flex-wrap: wrap; }
.scoreboard .minis .hcard { --card: 30px; padding: 0; border-radius: 3px; box-shadow: none; }
.scoreboard .minis .hcard .year { font-size: 9px; font-weight: 900; }
.scoreboard .minis .hcard .artist, .scoreboard .minis .hcard .title { display: none; }
.controls { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.guess { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 640px; margin: 0 auto; width: 100%; }
.guess.with-year { grid-template-columns: 1fr 1fr 110px; }
@media (max-width: 560px) { .guess, .guess.with-year { grid-template-columns: 1fr; } }
.check-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; font-weight: 700; }
.check-row .yes { color: var(--ok); } .check-row .no { color: var(--bad); }
.cover { width: min(180px, 36vw); aspect-ratio: 1; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); object-fit: cover; }
.qrbox { background: #fff; padding: 12px; border-radius: 14px; width: min(260px, 70vw); margin: 0 auto; }
.qrbox img { width: 100%; display: block; }
.roomcode { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: .25em; text-align: center; color: #fff; text-shadow: 0 0 18px rgba(25,195,240,.6); }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.winner { font-family: 'Tilt Neon', sans-serif; font-size: clamp(2.2rem, 7vw, 4.6rem); text-align: center; color: #fff4c9;
  text-shadow: 0 0 4px #fff, 0 0 14px var(--yellow), 0 0 32px var(--yellow); }

/* ---------------------------------------------------------------- phone view */
.phone { max-width: 640px; margin: 0 auto; padding: .8rem .8rem 5rem; }
.phone { --card: 92px; }
.phone .center-card .hcard { --card: min(190px, 50vw); }
.me-bar { display: flex; align-items: center; gap: .8rem; justify-content: space-between; padding: .6rem .9rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.me-bar .count { font-weight: 900; }
.bigcall { font-size: 1.6rem; font-weight: 900; text-align: center; }
.bigcall.pink { color: var(--pink); text-shadow: 0 0 14px rgba(255,31,142,.5); }
.sticky-actions { position: sticky; bottom: 0; padding: .8rem 0; background: linear-gradient(180deg, transparent, var(--bg) 30%); display: grid; gap: .5rem; z-index: 5; }

@media (max-width: 640px) {
  :root { --card: 96px; }
  .topbar { padding: .55rem .8rem; gap: .5rem; }
  .logo.small { font-size: 1.35rem; }
  .topbar nav a, .linkbtn { padding: .3rem .4rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}