:root {
  --page: #040506;
  --panel: #101314;
  --panel2: #161b1d;
  --line: #2a3236;
  --copper: #cc8244;
  --gold: #e0a456;
  --red: #ff8a7a;
  --t1: #ffffff;
  --t2: #d5d9db;
  --t3: #b9bfc2;
  --t4: #8e979b;
  --head: Montserrat, system-ui, sans-serif;
  --body: Karla, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--t1); font-family: var(--body); -webkit-text-size-adjust: 100%; }
a { color: var(--gold); }
a:hover { color: var(--t1); }
button, input, select { font: inherit; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; font-family: var(--head); font-weight: 800; }
p { margin: 0; }

.c-gold { color: var(--gold); }
.c-red { color: var(--red); }
.center { text-align: center; }
.grow { flex-grow: 1; }
.kicker { font-family: var(--head); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.note { font-size: 13px; line-height: 18px; color: var(--t3); }
.note.dim { font-size: 12px; line-height: 17px; color: var(--t4); }
.body { font-size: 17px; line-height: 25px; color: var(--t2); }
.body-s { font-size: 15px; line-height: 22px; color: var(--t2); }
.panel { background: var(--panel); }

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 1000px; font-family: var(--head); font-size: 10px; font-weight: 700; line-height: 18px; letter-spacing: .039em; text-transform: uppercase; }
.pill--solid { background: var(--copper); color: var(--page); }
.pill--line { padding: 2px 10px; border: 1px solid #5b6468; color: var(--t2); font-weight: 600; }
.pill--white { border: 2px solid #fff; color: #fff; line-height: 16px; padding: 3px 10px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 0; cursor: pointer; font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; border-radius: 0; }
.btn--solid { height: 56px; background: var(--copper); color: var(--page); font-weight: 800; font-size: 17px; }
.btn--solid:hover { background: var(--gold); }
.btn--solid:disabled { opacity: .6; cursor: wait; }
.btn--line { height: 48px; border: 2px solid #fff; background: transparent; color: #fff; font-weight: 700; font-size: 14px; }
.btn--ghost { width: auto; align-self: flex-start; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid #5b6468; background: transparent; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; }

/* --- the app (phone first) --- */

.app { position: relative; background: var(--page); overflow: hidden; }
.topbar { height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1f2629; }
.brand, .logo { display: flex; align-items: baseline; gap: 8px; font-family: var(--head); text-decoration: none; color: inherit; }
.brand span { font-weight: 800; font-size: 20px; letter-spacing: .02em; }
.brand small { font-weight: 600; font-size: 12px; letter-spacing: .06em; color: var(--t3); }
.topbar__r { display: flex; align-items: center; gap: 8px; }
.mute { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mute .ico-off, .muted .mute .ico-on { display: none; }
.muted .mute .ico-off { display: block; }

.screen { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); display: flex; flex-direction: column; }

.sponsorbar { height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--panel2); font-family: var(--head); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #e4e6e7; }
.intro { padding: 18px 20px 0; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.intro h1 { font-size: 48px; line-height: 46px; letter-spacing: -.01em; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend span { font-family: var(--head); font-size: 11px; line-height: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.boardbox { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.boardbox .kicker { color: #e4e6e7; }
.board { display: flex; flex-direction: column; gap: 2px; }
.board__row { display: flex; align-items: center; gap: 2px; }
.board__row b { width: 14px; font-family: var(--head); font-size: 9px; font-weight: 700; color: var(--t3); }
.board__row i { display: block; flex: 1; max-width: 13px; height: 11px; background: #242c30; }
.cta { padding: 14px 20px 10px; display: flex; flex-direction: column; gap: 8px; }
.sponsorstrip { background: var(--panel); padding: 10px 20px 12px; display: flex; flex-direction: column; gap: 8px; }
.sponsorstrip .kicker { font-size: 10px; }
.strip-row { display: flex; gap: 8px; overflow-x: auto; }
.strip-row a, .sponsors__grid a { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--panel2); border: 1px solid var(--line); font-family: var(--head); font-weight: 600; color: var(--t2); text-decoration: none; }
.strip-row a { width: 100px; height: 48px; font-size: 10px; }
.strip-row img { max-width: 84px; max-height: 36px; }

/* play */
.screen--play { height: calc(100vh - 56px); height: calc(100dvh - 56px); }
.hud { height: 56px; flex-shrink: 0; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--panel); }
.hud .kicker { font-size: 10px; }
.hud__score { font-family: var(--head); font-size: 28px; font-weight: 800; color: var(--gold); }
.hud__time { font-family: var(--head); font-size: 28px; font-weight: 800; letter-spacing: .02em; }
.bar { height: 4px; flex-shrink: 0; background: #1f2629; }
.bar div { height: 4px; width: 100%; background: var(--copper); }
.field { position: relative; flex-grow: 1; overflow: hidden; background: #0a0d0e; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.field__hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--head); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5b6468; }
.snow { position: absolute; border-radius: 50%; background: #fff; opacity: .18; }
.item { position: absolute; left: 0; top: 0; width: 60px; height: 60px; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none; will-change: transform; -webkit-tap-highlight-color: transparent; }
.item svg { display: block; pointer-events: none; }
.bauble { position: relative; display: block; width: 60px; height: 60px; pointer-events: none; }
.bauble::before { content: ""; position: absolute; left: 26px; top: 2px; width: 8px; height: 8px; background: var(--gold); }
.bauble img { position: absolute; left: 6px; top: 10px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--copper); background: var(--panel2); object-fit: cover; }
.pop { position: absolute; left: 0; top: 0; font-family: var(--head); font-size: 24px; font-weight: 800; pointer-events: none; }

/* result */
.screen--result { padding: 22px 20px 16px; gap: 14px; }
.bigscore { display: flex; align-items: baseline; gap: 10px; }
.bigscore b { font-family: var(--head); font-weight: 800; font-size: 96px; line-height: 90px; color: var(--gold); }
.bigscore span { font-family: var(--head); font-weight: 700; font-size: 20px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats .panel { padding: 10px 12px; }
.stats b { display: block; font-family: var(--head); font-size: 22px; font-weight: 800; }
.stats span { font-size: 13px; color: var(--t3); }
.hostline { font-size: 15px; color: var(--t2); }
.hostline b { font-family: var(--head); color: #fff; }
.verdict { display: flex; flex-direction: column; gap: 6px; }
.verdict h2 { font-size: 26px; line-height: 30px; }
#toFormBox { display: flex; flex-direction: column; gap: 8px; }
.done-today { display: flex; align-items: center; gap: 10px; padding: 14px; font-size: 15px; line-height: 21px; }
.sotd-mini { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--panel2); font-size: 14px; line-height: 19px; color: var(--t2); }
.sotd-mini strong { color: #fff; }
.sotd-mini a { flex-shrink: 0; font-family: var(--head); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* form */
.screen--form { margin: 0; padding: 14px 20px 16px; gap: 12px; }
.back { align-self: flex-start; height: 36px; padding: 0; border: 0; background: transparent; color: var(--t3); font-family: var(--head); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.screen--form h2 { font-size: 28px; line-height: 32px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld > span { font-family: var(--head); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); }
.fld em { font-style: normal; color: var(--t4); }
.fld input { height: 46px; padding: 0 14px; background: var(--panel); border: 1px solid #4a5357; border-radius: 0; color: #fff; font-size: 17px; }
.fld input:focus { outline: 2px solid var(--copper); outline-offset: -1px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 21px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--copper); }
.err { font-size: 15px; line-height: 20px; color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* done */
.screen--done { padding: 22px 20px 0; gap: 14px; }
.h-done { font-size: 32px; line-height: 36px; }
.ticket { border: 2px dashed var(--copper); background: var(--panel); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ticket__top { display: flex; align-items: center; justify-content: space-between; font-family: var(--head); font-size: 14px; letter-spacing: .04em; }
.ticket__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ticket__grid span { display: block; font-size: 12px; color: var(--t3); }
.ticket__grid div:first-child { grid-column: 1 / -1; }
.ticket__grid b { font-family: var(--head); font-size: 16px; overflow-wrap: anywhere; }
.listen { text-align: center; font-family: var(--head); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.screen--done .sponsorstrip { margin: 0 -20px; }
.screen--closed .intro { padding-bottom: 32px; }

/* rules dialog */
.rules { max-width: 560px; width: calc(100% - 32px); background: var(--panel); color: var(--t1); border: 1px solid var(--line); padding: 24px; }
.rules::backdrop { background: rgba(4, 5, 6, .8); }
.rules h2 { font-size: 22px; margin-bottom: 14px; }
.rules p { margin-bottom: 14px; color: var(--t2); line-height: 22px; }

/* footer */
.foot { padding: 20px 16px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; border-top: 1px solid #1f2629; font-family: var(--head); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); }
.foot nav { display: flex; gap: 24px; }
.foot a { color: var(--t3); text-decoration: none; }
.foot a.c-gold { color: var(--gold); }

.desk { display: none; }

/* --- desktop landing --- */

@media (min-width: 1024px) {
  .desk { display: flex; }
  .strip { height: 48px; padding: 0 clamp(24px, 8vw, 120px); align-items: center; justify-content: space-between; font-family: var(--head); font-weight: 600; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; color: #e4e6e7; }
  .strip a { color: #e4e6e7; text-decoration: none; font-size: 14px; }
  .masthead { height: 120px; padding: 0 clamp(24px, 8vw, 120px); align-items: center; background: #e4e6e7; color: var(--page); }
  .masthead .logo span { font-weight: 800; font-size: 40px; letter-spacing: .01em; }
  .masthead .logo small { font-weight: 700; font-size: 14px; letter-spacing: .06em; }

  .hero { display: flex; gap: clamp(40px, 6vw, 96px); padding: 80px clamp(24px, 8vw, 120px); background: var(--panel2); }
  .hero-copy { flex-grow: 1; flex-direction: column; gap: 30px; }
  .hero-copy .pill { font-size: 11px; padding: 4px 12px; }
  .hero-copy .pill--line { padding: 3px 12px; }
  .hero-copy h1 { font-size: 96px; line-height: 92px; letter-spacing: -.015em; }
  .lead { max-width: 620px; font-size: 22px; line-height: 33px; color: var(--t2); }
  .steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
  .steps li { display: flex; gap: 18px; align-items: flex-start; }
  .steps li > span { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--copper); color: var(--page); font-family: var(--head); font-weight: 800; font-size: 22px; }
  .steps b { font-family: var(--head); font-weight: 700; font-size: 21px; line-height: 26px; }
  .steps p { font-size: 18px; line-height: 27px; color: var(--t3); }
  .sotd { max-width: 620px; background: var(--panel); padding: 24px; display: flex; gap: 24px; align-items: center; }
  .sotd__logo { width: 180px; height: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed #5b6468; font-family: var(--head); font-size: 12px; font-weight: 600; color: var(--t3); text-align: center; }
  .sotd__logo img { max-width: 100%; max-height: 100%; }
  .sotd__logo.has-img { border: 0; }
  .sotd__body { display: flex; flex-direction: column; gap: 8px; }
  .sotd__kicker { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
  .sotd__body p { font-size: 18px; line-height: 26px; color: var(--t2); }
  .sotd__body strong { color: #fff; }
  .sotd__go { font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

  .app { width: 392px; height: 846px; flex-shrink: 0; border: 1px solid var(--line); }
  .screen { min-height: 0; height: 788px; overflow-y: auto; }
  .screen--play { height: min(788px, 100vh); overflow: hidden; }

  .sponsors { flex-direction: column; gap: 32px; padding: 72px clamp(24px, 8vw, 120px); background: var(--panel); }
  .sponsors h2 { font-weight: 600; font-size: 21.4px; line-height: 30px; letter-spacing: .06em; text-transform: uppercase; }
  .sponsors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
  .sponsors__grid a { height: 156px; flex-direction: column; gap: 10px; }
  .sponsors__grid b { font-family: var(--head); font-weight: 700; font-size: 18px; color: #fff; }
  .sponsors__grid img { max-width: 70%; max-height: 72px; }
  .sponsors__grid span { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
  .foot { height: 68px; padding: 0 clamp(24px, 8vw, 120px); font-size: 13px; }
}