/* ================= HOME (matches reference) ================= */
.hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10) 0 2px, transparent 3px) 0 0 / 46px 46px,
    linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  padding: 48px 16px 56px; text-align: center; color: var(--white);
}
.slogan { margin: 22px auto 0; font: 700 clamp(18px, 4.2vw, 26px)/1.25 var(--slab); max-width: 640px; }
.slogan em { font-style: normal; color: var(--gold); }
.home-main, .admin-main { max-width: 680px; margin: -28px auto 0; padding: 0 16px 56px; position: relative; }
.card { background: var(--white); border: 4px solid var(--navy); box-shadow: 10px 10px 0 var(--navy); padding: 28px 24px 24px; }
.card h2 { margin: 0 0 4px; font: 400 clamp(30px, 7vw, 44px)/1 var(--display); text-transform: uppercase; color: var(--navy); letter-spacing: 0.02em; }
.card .sub { margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.45; }
textarea { min-height: 150px; resize: vertical; font-size: 20px; }
.meta-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 20px; font-size: 14px; color: var(--muted); }
.count { font-weight: 800; font-variant-numeric: tabular-nums; }
.count.warn { color: var(--red); }
.name-row { margin-bottom: 24px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.actions .btn { flex: 1 1 auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { color: var(--red); font-weight: 600; margin: 14px 0 0; min-height: 1.2em; }
.thanks { text-align: center; padding: 12px 0 4px; }
.thanks .big-check { width: 84px; height: 84px; margin: 0 auto 16px; display: grid; place-items: center; background: var(--red); color: var(--white); font: 400 52px/1 var(--display); border: 4px solid var(--navy); transform: rotate(-4deg); }
.thanks p { color: var(--muted); font-size: 17px; line-height: 1.5; margin: 8px 0 22px; }
.pledges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; text-align: center; }
.pledges li { background: var(--navy); color: var(--white); padding: 16px 10px; font: 400 17px/1.15 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.pledges li span { display: block; color: var(--gold); font-size: 13px; letter-spacing: 0.3em; margin-bottom: 6px; }
@media (max-width: 520px) { .pledges { grid-template-columns: 1fr; } }
.live-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; background: var(--gold); color: var(--navy-deep); padding: 12px 16px; text-decoration: none; text-align: center; font: 400 20px/1.1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 3px solid var(--navy); }
.live-banner:hover { filter: brightness(1.05); }
.live-banner .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--red); flex: none; animation: live-pulse 1.4s infinite; }
.live-banner .go { background: var(--red); color: var(--white); padding: 7px 12px 6px; font-size: 16px; }
@keyframes live-pulse { 50% { opacity: 0.35; } }
.home-footer { text-align: center; padding: 8px 16px 40px; color: var(--navy); }
.home-footer .links { margin-top: 14px; font-size: 13px; color: var(--muted); }
.home-footer .links a { color: var(--muted); }

/* ================= BILLBOARD ================= */
#view-display { --u: 1vh; position: fixed; inset: 0; background: var(--white); overflow: hidden; }
@supports (height: 1dvh) { #view-display { --u: 1dvh; } }
#view-display .stage { height: calc(100 * var(--u)); width: 100vw; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: calc(10 * var(--u)) minmax(0,1fr) calc(23 * var(--u)); }
.topbar { background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; border-bottom: calc(0.6 * var(--u)) solid var(--white); gap: 2vw; }
.topbar .brand { font: 400 calc(5.2 * var(--u))/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.topbar .brand .stars { font-size: calc(3.4 * var(--u)); vertical-align: calc(0.6 * var(--u)); letter-spacing: 0.25em; }
.live { display: flex; align-items: center; gap: calc(1.2 * var(--u)); font: 400 calc(3.4 * var(--u))/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.live .dot { width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(200,16,46,0.35); animation: pulse 1.6s infinite; }
.live.offline .dot { background: #888; animation: none; box-shadow: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 calc(1.2 * var(--u)) rgba(200,16,46,0); } }
.arena { position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%23ffffff' fill-opacity='0.07' d='M60 18l9.4 28.9h30.4L75.2 64.8l9.4 28.9L60 75.8 35.4 93.7l9.4-28.9L20.2 46.9h30.4z'/%3E%3C/svg%3E") 0 0 / calc(15 * var(--u)) calc(15 * var(--u)), radial-gradient(ellipse at 50% 40%, #e0193a 0%, var(--red) 45%, var(--red-deep) 100%); display: grid; grid-template-rows: minmax(0,1fr); place-items: center; padding: calc(3.5 * var(--u)) 6vw; overflow: hidden; }
.board-card { position: relative; width: min(100%, calc(150 * var(--u))); height: 100%; background: var(--white); border: calc(0.8 * var(--u)) solid var(--navy); box-shadow: calc(1.8 * var(--u)) calc(1.8 * var(--u)) 0 var(--navy-deep); display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-height: 0; padding: calc(3.2 * var(--u)) calc(4 * var(--u)) calc(2.6 * var(--u)); transition: transform 0.55s cubic-bezier(.2,.9,.3,1.2), opacity 0.4s; }
.board-card.out { transform: translateY(calc(6 * var(--u))) rotate(-1.5deg) scale(0.96); opacity: 0; }
.board-card.in-start { transform: translateY(calc(-6 * var(--u))) rotate(1.5deg) scale(0.96); opacity: 0; transition: none; }
.badge { position: absolute; top: calc(-2.6 * var(--u)); right: calc(4 * var(--u)); background: var(--gold); color: var(--navy-deep); font: 400 calc(3.6 * var(--u))/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; padding: calc(1.1 * var(--u)) calc(2 * var(--u)); border: calc(0.5 * var(--u)) solid var(--navy); transform: rotate(3deg); animation: wobble 1.2s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(-2deg) scale(1.06); } }
.who { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.avatar { width: calc(8 * var(--u)); height: calc(8 * var(--u)); flex: none; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font-size: calc(4.6 * var(--u)); border: calc(0.45 * var(--u)) solid var(--red); }
.who .name { font: 800 calc(3.6 * var(--u))/1.1 var(--body); color: var(--ink); display: flex; align-items: center; gap: calc(1 * var(--u)); }
.who .check { display: inline-grid; place-items: center; width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: var(--red); color: var(--white); font: 800 calc(1.9 * var(--u))/1 var(--body); }
.who .handle { font: 500 calc(2.6 * var(--u))/1.2 var(--body); color: var(--muted); margin-top: calc(0.4 * var(--u)); }
.text-wrap { position: relative; overflow: hidden; display: flex; align-items: center; margin: calc(1.6 * var(--u)) 0; }
.text { margin: 0; width: 100%; font-family: var(--body); font-weight: 800; line-height: 1.18; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.text.empty { font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--navy); text-align: center; letter-spacing: 0.02em; }
.card-foot { display: flex; justify-content: space-between; align-items: center; border-top: calc(0.25 * var(--u)) solid #dfe3ec; padding-top: calc(1.6 * var(--u)); font: 500 calc(2.4 * var(--u))/1 var(--body); color: var(--muted); }
.card-foot .tally { font: 400 calc(2.8 * var(--u))/1 var(--display); color: var(--red); letter-spacing: 0.1em; }
.progress { position: absolute; left: 0; bottom: 0; height: calc(0.8 * var(--u)); background: var(--red); width: 0; }
.bottom { background: var(--white); border-top: calc(1 * var(--u)) solid var(--navy); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 3vw; padding: 0 3vw 0 4vw; }
.bottom::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(1.6 * var(--u)); background: repeating-linear-gradient(90deg, var(--red) 0 calc(4 * var(--u)), var(--white) calc(4 * var(--u)) calc(8 * var(--u))); }
.cta { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-top: calc(1.6 * var(--u)); }
.cta .kicker { font: 400 calc(3.6 * var(--u))/1 var(--display); letter-spacing: 0.2em; color: var(--red); text-transform: uppercase; }
.domain { font: 400 min(calc(11.5 * var(--u)), 9vw)/1 var(--display); color: var(--navy); letter-spacing: 0.01em; white-space: nowrap; margin-top: calc(0.8 * var(--u)); }
.domain .red { color: var(--red); }
.notice { margin-top: calc(0.6 * var(--u)); font: 600 calc(2 * var(--u))/1.1 var(--body); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-box { display: flex; align-items: center; gap: calc(2 * var(--u)); padding-top: calc(1.6 * var(--u)); }
.qr-label { font: 400 calc(3.2 * var(--u))/1.05 var(--display); color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; text-align: right; }
.qr-label span { color: var(--red); }
#qr { background: var(--white); padding: calc(1 * var(--u)); border: calc(0.6 * var(--u)) solid var(--navy); width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
#qr canvas, #qr img { width: 100% !important; height: 100% !important; display: block; }
.board-exit { position: fixed; top: calc(11.5 * var(--u)); right: 12px; background: rgba(6,26,66,0.85); color: #fff; text-decoration: none; font: 600 13px/1 var(--body); padding: 9px 12px; opacity: 0; transition: opacity .3s; }
#view-display:hover .board-exit, .board-exit:focus { opacity: 1; }
@media (max-aspect-ratio: 1/1) {
  #view-display .stage { grid-template-rows: calc(8 * var(--u)) minmax(0,1fr) calc(20 * var(--u)); }
  .topbar .brand { font-size: 5vw; } .topbar .brand .stars { display: none; } .live { font-size: 3.6vw; }
  .who .name { font-size: 4.6vw; } .who .handle { font-size: 3.4vw; } .avatar { width: 10vw; height: 10vw; font-size: 5vw; }
  .card-foot { font-size: 3vw; } .card-foot .tally { font-size: 3.4vw; }
  .cta .kicker { font-size: 3.6vw; } .notice { font-size: 2.2vw; } .qr-label { display: none; }
  #qr { width: calc(14 * var(--u)); height: calc(14 * var(--u)); max-width: 28vw; max-height: 28vw; }
}

/* ================= ADMIN ================= */
.admin-head { background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%); color: #fff; padding: 22px 16px 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; max-width: none; }
.admin-brand { font: 400 clamp(26px, 5vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.admin-brand span { color: var(--gold); }
.admin-nav { display: flex; gap: 16px; align-items: center; font-weight: 600; font-size: 15px; }
.admin-nav a { color: #fff; }
.admin-nav .btn.ghost { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.admin-main { max-width: 860px; }
#admin-panel { display: grid; gap: 28px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats div { background: var(--navy); color: #fff; padding: 14px; text-align: center; }
.stats b { display: block; font: 400 38px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.stats span { font: 400 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.tabs { display: flex; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.tab { appearance: none; border: 2px solid var(--navy); background: #fff; color: var(--navy); font: 400 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.tab b { font-weight: 400; background: var(--red); color: #fff; padding: 2px 7px; margin-left: 6px; }
.tab.active { background: var(--navy); color: #fff; }
.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.queue li { border: 2px solid #dfe3ec; padding: 14px 14px 12px; display: grid; gap: 10px; }
.queue .q-text { font: 700 19px/1.35 var(--body); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.queue .q-meta { font-size: 13px; color: var(--muted); }
.queue .q-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.queue .empty { text-align: center; color: var(--muted); border-style: dashed; padding: 28px 14px; font-size: 16px; }
.btn.small.gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 3px 0 #b88a1c; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .settings-grid { grid-template-columns: 1fr; } .stats b { font-size: 30px; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--navy-deep); color: #fff; padding: 12px 18px; font: 600 15px/1.2 var(--body); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }