@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --bg: #120a2a;
  --bg-2: #1c1240;
  --card: #241852;
  --card-2: #2f2068;
  --line: rgba(255, 255, 255, 0.1);
  --ink: #fbf8ff;
  --mute: #b8acdc;
  --gold: #ffc93c;
  --gold-ink: #2a1a00;
  --money: #2bd98b;
  --a0: #ff4d6d;
  --a1: #3d8bff;
  --a2: #ffb020;
  --a3: #22c47e;
  --r: 18px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  font: 500 18px/1.5 var(--body);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(255, 77, 109, 0.28), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(61, 139, 255, 0.3), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(255, 201, 60, 0.16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
.narrow { max-width: 560px; }
.row { display: flex; gap: 12px; align-items: center; }
.between { justify-content: space-between; }
.wrapflex { flex-wrap: wrap; }
.mute { color: var(--mute); }
.hidden { display: none !important; }

.logo { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.04em; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.logo i { width: 34px; height: 34px; border-radius: 10px; background: conic-gradient(var(--a0) 0 25%, var(--a1) 0 50%, var(--a2) 0 75%, var(--a3) 0); box-shadow: 0 6px 20px rgba(255, 77, 109, 0.35); }

.card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 26px; border-radius: 16px; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.01em;
  background: var(--gold); color: var(--gold-ink); text-decoration: none;
  box-shadow: 0 6px 0 #c48f00, 0 16px 30px -10px rgba(255, 201, 60, 0.5);
  transition: transform 0.15s var(--spring), box-shadow 0.15s, opacity 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c48f00; }
.btn:focus-visible, .chip:focus-visible, .pack:focus-visible, .ans:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn.ghost { background: rgba(255, 255, 255, 0.08); color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset; }
.btn.ghost:active { box-shadow: 0 0 0 1px var(--line) inset; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

input, textarea, select {
  width: 100%; min-height: 56px; padding: 14px 16px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); font-size: 18px;
}
input::placeholder, textarea::placeholder { color: rgba(184, 172, 220, 0.6); }
label { display: block; font-weight: 600; font-size: 17px; margin: 0 0 8px; color: var(--mute); }
.field { margin-bottom: 18px; }

.chip {
  min-height: 52px; min-width: 76px; padding: 0 18px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  font-family: var(--display); font-weight: 800; font-size: 22px;
  transition: transform 0.15s var(--spring), background 0.15s;
}
.chip:hover { transform: translateY(-2px); }
.chip.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }

.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pack {
  text-align: left; cursor: pointer; padding: 18px; border-radius: var(--r); min-height: 132px;
  background: linear-gradient(160deg, var(--card-2), var(--card)); border: 2px solid transparent;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.15s var(--spring), border-color 0.15s;
}
.pack:hover { transform: translateY(-3px); }
.pack.on { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 201, 60, 0.18); }
.pack b { font-family: var(--display); font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; }
.pack .meta { font-size: 16px; color: var(--mute); margin-top: auto; }
.tag { display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); color: var(--mute); align-self: flex-start; }
.tag.creator { background: rgba(43, 217, 139, 0.16); color: var(--money); }

.section-h { font-size: 30px; margin: 34px 0 14px; }

.money { color: var(--money); }
.gold { color: var(--gold); }
.big-num { font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }

/* answer tiles */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ans {
  position: relative; display: flex; align-items: center; gap: 14px; text-align: left;
  min-height: 96px; padding: 18px 20px; border: 0; border-radius: var(--r); cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; color: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.15s var(--spring), opacity 0.25s, filter 0.25s;
}
.ans:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28); }
.ans .shape { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 26px; opacity: 0.9; }
.ans.c0 { background: var(--a0); } .ans.c1 { background: var(--a1); } .ans.c2 { background: var(--a2); } .ans.c3 { background: var(--a3); }
.ans.dim { opacity: 0.25; filter: saturate(0.4); }
.ans.right { outline: 5px solid #fff; outline-offset: 0; }
.ans .tick { margin-left: auto; font-size: 30px; }

.timer { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--a0)); transform-origin: left; }

.players { display: flex; flex-wrap: wrap; gap: 10px; }
.pl { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); font-weight: 700; animation: pop 0.4s var(--spring); }
.pl.paid { background: rgba(43, 217, 139, 0.18); color: #c8ffe4; }
.pl .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mute); }
.pl.paid .dot { background: var(--money); }

.board { display: grid; gap: 10px; }
.board .r { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); font-weight: 700; font-size: 20px; }
.board .r:first-child { background: linear-gradient(90deg, rgba(255, 201, 60, 0.28), rgba(255, 201, 60, 0.06)); }
.board .n { font-family: var(--display); font-size: 24px; color: var(--mute); }
.board .pts { font-family: var(--display); font-size: 24px; }
.board .gain { font-size: 16px; color: var(--money); margin-left: 8px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #fff; color: #1a0f3a; padding: 14px 20px; border-radius: 14px; font-weight: 700; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); z-index: 50; animation: pop 0.3s var(--spring); }

@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop { animation: pop 0.45s var(--spring); }

@media (max-width: 640px) {
  .answers { gap: 10px; }
  .ans { min-height: 120px; font-size: 20px; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 14px; }
  .ans .tick { position: absolute; right: 12px; top: 10px; }
  .section-h { font-size: 26px; }
}