/* Streak Cup — flame orange on deep night-blue; scoreboard type.
   Layout: single 560px column, sticky bottom tab bar on every screen. */
:root {
  --bg: #eef0f6;
  --surface: #ffffff;
  --surface-2: #e3e7f1;
  --ink: #161b33;
  --muted: #5d6580;
  --line: #d6dbe8;
  --accent: #ff5b2e;
  --accent-2: #e2361b;
  --gold: #f2b705;
  --ok: #138a5b;
  --err: #c62d2d;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1122;
    --surface: #181c33;
    --surface-2: #252a47;
    --ink: #eef0fa;
    --muted: #9aa2c0;
    --line: #2c3253;
    --accent: #ff6a3d;
    --accent-2: #ff4422;
    --gold: #ffc83a;
    --ok: #3ccf8e;
    --err: #ff6b6b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: var(--display); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent-2); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.center { text-align: center; }
.eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---------- frame */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px max(16px, calc((100% - 560px) / 2));
  background: var(--ink); color: var(--surface);
}
@media (prefers-color-scheme: dark) { .top { background: #070914; color: var(--ink); } }
.brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font: 800 1.15rem var(--display); }
.who { font-size: 0.875rem; opacity: 0.75; }
.flame { width: 22px; height: 22px; background: var(--accent); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; clip-path: path("M11 0C14 5 20 8 20 14a9 9 0 0 1-18 0c0-3 2-5 3-6 0 3 2 5 3 5 0-5-1-9 3-13z"); }
.flame.big { width: 56px; height: 56px; clip-path: path("M28 0C36 12 52 20 52 36a24 24 0 0 1-48 0c0-8 4-13 8-16 0 8 4 13 8 13 0-13-3-23 12-33z"); }

.wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 24px; display: grid; gap: 16px; }
.hello { display: grid; gap: 4px; padding-top: 4px; }

.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: center;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabs a {
  flex: 1; max-width: 100px; display: grid; justify-items: center; gap: 2px;
  padding: 6px 2px; border-radius: 12px;
  color: var(--muted); text-decoration: none; font-size: 0.72rem; font-weight: 600;
}
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs a.on { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- surfaces */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; display: grid; gap: 12px;
}
.card.is-done { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.card.empty { text-align: center; color: var(--muted); padding: 28px 18px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.flash { padding: 12px 14px; border-radius: 12px; font-weight: 600; background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.flash.err { background: color-mix(in srgb, var(--err) 12%, var(--surface)); color: var(--err); }
.flash.info { background: var(--surface-2); color: var(--ink); }

/* ---------- controls */
.btn {
  appearance: none; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  display: inline-block; padding: 11px 18px; border-radius: 12px;
  background: var(--ink); color: var(--surface); font: 700 1rem var(--body);
}
.btn.big { width: 100%; padding: 15px 18px; font-size: 1.05rem; }
.btn.accent { background: var(--accent); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.small { padding: 7px 12px; font-size: 0.875rem; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--accent-2); text-decoration: underline; }
.link.danger { color: var(--err); }

label { font-weight: 600; font-size: 0.9rem; }
input, textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px;
}
input[type="file"] { padding: 9px; }
textarea { resize: vertical; }
.stack { display: grid; gap: 8px; }
.stack .btn { margin-top: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two > div { display: grid; gap: 8px; }
.inline { display: flex; align-items: center; gap: 10px; }
.inline label { white-space: nowrap; }
.inline-form { display: inline; }

.seg { display: flex; background: var(--surface-2); border-radius: 14px; padding: 4px; gap: 4px; }
.seg a { flex: 1; text-align: center; padding: 9px; border-radius: 10px; text-decoration: none; font-weight: 700; color: var(--muted); }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }

/* ---------- today */
.streak { display: grid; justify-items: center; min-width: 72px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-2); }
.streak .num { font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.streak .lbl { font-size: 0.75rem; font-weight: 700; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dot { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--muted); position: relative; }
.dot.ci { background: var(--accent); color: #fff; }
.dot.cd::after { content: ""; position: absolute; right: 0; top: 0; width: 28%; height: 28%; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); }
.dot.today { outline: 2px solid var(--ink); outline-offset: 2px; }
.ch-title { font-size: 1.5rem; }
.challenge { border-top: 5px solid var(--accent); }
.done-box { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.done-box strong { color: var(--ok); }
.proof { border-radius: 10px; max-height: 240px; object-fit: cover; }
.prize { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 22%, var(--surface)); font-weight: 700; }
.prize span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* ---------- spin */
.wheel-card { justify-items: center; }
.wheel-wrap { position: relative; width: min(100%, 360px); aspect-ratio: 1; }
#wheel { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 8px var(--ink), 0 10px 30px rgb(0 0 0 / 0.18); will-change: transform; }
.pointer { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 32px solid var(--gold); filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.3)); }
.hub { position: absolute; inset: 0; margin: auto; width: 27%; height: 27%; border-radius: 50%; border: 5px solid var(--surface); background: var(--ink); color: var(--surface); font: 800 1.1rem var(--display); letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 0.3); }
.hub:disabled { opacity: 0.85; cursor: not-allowed; background: var(--muted); }
.spin-info { display: grid; gap: 8px; justify-items: center; text-align: center; width: 100%; }
.spins-left { display: flex; align-items: center; gap: 6px; }
.tok { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.tok.used { background: var(--surface-2); }
.spins-left strong { margin-left: 6px; }
.result { font-size: 1.05rem; min-height: 1.6em; }
.result strong { color: var(--accent-2); font-family: var(--display); font-size: 1.3rem; }
.spin-log { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.spin-log li { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); font-size: 0.85rem; font-weight: 600; }

/* ---------- ranking */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board > li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.board .pos { font: 800 1.2rem var(--display); text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.board .name { font-weight: 700; display: grid; min-width: 0; overflow-wrap: anywhere; }
.board .name em { font-style: normal; color: var(--accent-2); font-weight: 600; }
.board small { font-weight: 500; color: var(--muted); font-size: 0.8rem; }
.board .pts { font: 800 1.35rem var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.board .pts small { margin-left: 3px; }
.board .p1 { border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.board .p1 .pos { color: #9a7300; }
.board .p2 .pos, .board .p3 .pos { color: var(--ink); }
.board .me { box-shadow: inset 4px 0 0 var(--accent); }

/* ---------- winners */
.winners { display: grid; gap: 12px; }
.win.latest { border: 2px solid var(--gold); }
.win.latest h2 { font-size: 1.75rem; }
.win.me h2 { color: var(--accent-2); }

/* ---------- me */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 2px; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.stat .num { font: 800 1.6rem/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-h { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.cal-d { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: 0.78rem; font-weight: 600; background: var(--surface-2); color: var(--muted); position: relative; }
.cal-d.ci { background: var(--accent); color: #fff; }
.cal-d.cd::after { content: ""; position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.cal-d.today { outline: 2px solid var(--ink); }
.cal-d.future { opacity: 0.35; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.legend .cal-d { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.legend .cal-d.cd::after { right: 1px; top: 1px; width: 5px; height: 5px; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; }
.hist li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.hist li:first-child { border-top: 0; }
.hist small { display: block; color: var(--muted); }
.hist .pts { font: 800 1.1rem var(--display); color: var(--ok); }

/* ---------- auth */
.auth { display: grid; gap: 16px; padding-top: 12px; }
.auth-hero { display: grid; justify-items: center; text-align: center; gap: 8px; }
.auth-hero p { max-width: 36ch; }

/* ---------- admin */
.winner-now { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 20%, var(--surface)); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.draw-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.draw-bar select { width: auto; }
.admin-board > li { grid-template-columns: 32px 1fr auto auto; }
.admin-board > li.chosen { border: 2px solid var(--gold); }
.admin-board > li.flash-row { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.admin-board > li.drawn { background: color-mix(in srgb, var(--gold) 30%, var(--surface)); border: 2px solid var(--gold); }
details summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--accent-2); margin-top: 4px; }
.proofs { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; font-weight: 500; font-size: 0.85rem; }
.proofs img { max-height: 140px; border-radius: 8px; margin-top: 4px; }
.sched { list-style: none; margin: 0; padding: 0; display: grid; }
.sched li { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.sched li.today .d { color: var(--accent-2); }
.sched .d { font-weight: 700; }
.sched .act { display: flex; gap: 10px; font-size: 0.85rem; }
.tag { font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.tag.set { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-2); }

@media (max-width: 400px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .admin-board > li { grid-template-columns: 28px 1fr auto; }
  .admin-board .pick { grid-column: 2 / -1; }
  .sched li { grid-template-columns: 1fr auto; }
  .sched .t { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- admin: players */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link-stat { text-decoration: none; }
.live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.players { list-style: none; margin: 0; padding: 0; display: grid; }
.players li { display: grid; grid-template-columns: 12px 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.players li:first-child { border-top: 0; }
.players .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--line); }
.players li.on .dot { background: var(--ok); border-color: var(--ok); }
.players .pname { display: grid; min-width: 0; overflow-wrap: anywhere; }
.players .pname small { color: var(--muted); font-size: 0.8rem; }
.players li.on .pname small { color: var(--ok); font-weight: 600; }
.players .ppts { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.players .ppts small { color: var(--muted); font-size: 0.72rem; }
@media (max-width: 460px) {
  .players li { grid-template-columns: 12px 1fr auto; }
  .players .ppts:nth-of-type(4) { display: none; }
  .players form { grid-column: 2 / -1; }
}
.players .pname .tag { justify-self: start; }
.players .pact { display: grid; gap: 4px; justify-items: end; }
label.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
@media (max-width: 460px) { .players .pact { grid-column: 2 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; gap: 14px; } }


/* ---------- Instagram draw note */
.draw-note { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.draw-note p { font-size: 0.92rem; }
.btn.insta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.btn.insta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- admin: quiz answers + event banner */
.ans-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.ans-row input[type="radio"] { width: 22px; height: 22px; accent-color: var(--ok); }
.event-banner { padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, var(--accent), var(--gold)); color: #1a1300; font-weight: 800; }
.announce { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent); }

/* ---------- giveaway card */
.giveaway { border: 2px solid #dd2a7b; background: linear-gradient(160deg, color-mix(in srgb, #f58529 10%, var(--surface)), var(--surface) 60%); }
.giveaway h2 { font-size: 1.4rem; }

/* ---------- prize icon picker (admin) */
.icon-pick { border: 0; padding: 0; margin: 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.icon-pick legend { font-weight: 700; margin-bottom: 6px; }
.icon-pick label { cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick span { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 0.8rem; text-align: center; background: var(--surface); }
.icon-pick b { font-size: 1.6rem; line-height: 1.1; font-weight: 400; }
.icon-pick input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-weight: 700; }
.icon-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.device-rule { display: grid; gap: 6px; justify-items: start; margin: 12px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.device-rule p { margin: 0; }
.device-rule label.check { display: flex; align-items: center; gap: 10px; width: auto; font-size: 1rem; }
.device-rule label.check input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); }