/* Champion homepage: the arcade homepage, post-party. Fountain on top, the champion announcement
   below; the fountain shoots out the winners' photo, then everyone else's, onto a draggable table. */
:root {
  --cream: #ebd2b4; --orange: #ff5500; --green: #8bc34a;
  --font-title: 'Press Start 2P', monospace; --font-body: 'VT323', monospace;
  --print-w: clamp(58px, calc(6.5vmin + 40px), 138px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { height: 100dvh; position: relative; color: var(--cream); font-family: var(--font-body); overscroll-behavior: none; }

/* ===== the live fountain ===== */
.stage {
  position: absolute; left: 0; right: 0; top: 0; height: 31dvh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 30%, #07090c 0%, #000 70%);
}
.frame { position: relative; width: min(100vw, calc(31dvh * 2034 / 1136)); aspect-ratio: 2034 / 1136; }
.plate, #water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plate { object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* invisible marker: CSS owns where the champion lands per breakpoint; the script reads it */
.hero-spot { position: absolute; visibility: hidden; pointer-events: none; left: 50%; top: 26dvh; height: 38dvh; aspect-ratio: 1 / 1.45; transform: translateX(-50%); }

/* ===== the champion announcement (replaces WHEN / WHERE / BRING …) ===== */
.doc {
  position: absolute; left: 16px; right: 16px; top: 65.5dvh; bottom: 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  text-align: center; opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease;
}
.doc.show { opacity: 1; transform: none; }
.kicker { margin: 0; text-wrap: balance; font-family: var(--font-title); font-size: 8px; letter-spacing: 2px; color: var(--orange); line-height: 1.6; }
.headline { margin: 0; font-weight: normal; font-size: 34px; line-height: .95; color: var(--cream); text-wrap: balance; }
.headline em { font-style: normal; color: var(--orange); }
.facts { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font-size: 17px; line-height: 1.15; text-align: left; max-width: 520px; }
.facts dt {
  background: var(--orange); color: var(--cream); font-family: var(--font-title); font-size: 8px; letter-spacing: 1px;
  padding: 3px 7px; display: flex; align-items: center; justify-content: center;
}
.facts dd { margin: 0; align-self: center; }
.foot { margin: 2px 0 0; font-family: var(--font-title); font-size: 7px; letter-spacing: 2px; opacity: .65; line-height: 2; }
.foot a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(235,210,180,.5); }
.foot a:hover, .foot a:focus-visible { color: var(--orange); border-bottom-color: var(--orange); }
.foot a.mail { font-family: var(--font-body); font-size: 13px; letter-spacing: .3px; color: var(--green); border: 0; }

/* sponsor thank-you ticker along the bottom edge */
.ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; overflow: hidden; border-top: 1px dashed rgba(235,210,180,.25);
  display: flex; align-items: center; opacity: 0; transition: opacity 1s ease .4s; }
.ticker.show { opacity: 1; }
.ticker-run { display: flex; gap: 22px; margin: 0; padding: 0 0 0 22px; list-style: none; white-space: nowrap; animation: tick 70s linear infinite;
  font-family: var(--font-title); font-size: 8px; letter-spacing: 1px; }
.ticker-run li { display: flex; gap: 22px; }
.ticker-run li::after, .ticker-run .thanks::after { content: '★'; color: var(--orange); }
.ticker-run .thanks { color: var(--orange); }
.ticker-run a { color: var(--cream); text-decoration: none; }
.ticker-run a:hover, .ticker-run a:focus-visible { color: var(--orange); }
.ticker:hover .ticker-run { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ===== the table: photos live on a full-bleed layer; only the prints catch the pointer ===== */
.table { position: absolute; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; }
.table > * { pointer-events: auto; position: absolute; left: 0; top: 0; }

/* Instax-mini-style print. Padding derives from --pw — a % padding would resolve against the TABLE's width. */
.print {
  --pw: var(--print-w);
  width: var(--pw);
  padding: calc(var(--pw) * .07) calc(var(--pw) * .07) calc(var(--pw) * .23);
  background: #fbfaf5; border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.34);
  cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: box-shadow .18s ease;
}
.print img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #2a2a2a; pointer-events: none; -webkit-user-drag: none; }
.print.land { --pw: calc(var(--print-w) * 1.25); padding: calc(var(--pw) * .055) calc(var(--pw) * .055) calc(var(--pw) * .17); }
.print.land img { aspect-ratio: 4 / 3; }
.print.held { cursor: grabbing; box-shadow: 0 3px 4px rgba(0,0,0,.2), 0 24px 44px rgba(0,0,0,.5); }
.print .cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; }

/* the champion print: biggest thing on the table, glowing arcade orange */
.print.hero {
  container-type: inline-size;
  padding: calc(var(--pw) * .05) calc(var(--pw) * .05) calc(var(--pw) * .2);
  box-shadow: 0 0 0 2px var(--orange), 0 0 42px rgba(255,85,0,.45), 0 22px 50px rgba(0,0,0,.65);
}
.print.hero.held { box-shadow: 0 0 0 2px var(--orange), 0 0 60px rgba(255,85,0,.55), 0 32px 70px rgba(0,0,0,.7); }
.print.hero .cap { height: calc(var(--pw) * .2); flex-direction: column; gap: 3cqw; }
.print.hero .cap b { font-family: var(--font-title); font-weight: normal; font-size: 6.4cqw; color: var(--orange); letter-spacing: .5cqw; }
.print.hero .cap i { font-family: var(--font-body); font-style: normal; font-size: 8.5cqw; color: #333; line-height: .8; }
.print.hero::after {
  content: '🏆'; position: absolute; top: -5%; right: -7%; width: 20%; aspect-ratio: 1; border-radius: 50%;
  background: var(--orange); display: grid; place-items: center; font-size: 10cqw;
  box-shadow: 0 0 0 3px #000, 0 6px 16px rgba(0,0,0,.6); transform: rotate(12deg);
}

/* tap-to-look-closer */
.table > .table-backdrop {
  inset: 0; z-index: 99000; background: rgba(4, 3, 10, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease; cursor: zoom-out;
}
.table > .table-backdrop.on { opacity: 1; pointer-events: auto; }
.print.inspecting { cursor: zoom-out; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.table > .fx-layer { z-index: 90000; pointer-events: none; }

/* replay the fountain show */
.replay {
  position: fixed; top: 10px; right: 10px; z-index: 100000;
  font: 8px/1 var(--font-title); letter-spacing: 1px; color: var(--cream); cursor: pointer;
  background: rgba(0,0,0,.72); border: 1.5px solid var(--orange); border-radius: 999px; padding: 8px 11px;
  opacity: 0; pointer-events: none; transition: opacity .6s ease, background .18s ease;
}
.replay.show { opacity: 1; pointer-events: auto; }
.replay .ico { font: 700 13px/0 system-ui, -apple-system, sans-serif; vertical-align: -1px; }
.replay:hover, .replay:focus-visible { background: var(--orange); }

/* ===== desktop / landscape: details left, champion right, fountain across the top ===== */
@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
  .stage { height: 46dvh; }
  .frame { width: min(100vw, calc(46dvh * 2034 / 1136)); }
  .hero-spot { left: auto; right: 11vw; top: 37dvh; height: 57dvh; transform: none; }
  .doc { left: 7vw; right: auto; width: min(42vw, 640px); top: 50dvh; bottom: 44px; align-items: flex-start; text-align: left; gap: 12px; }
  .kicker { font-size: 10px; }
  .headline { font-size: clamp(44px, 4.6vw, 72px); }
  .facts { font-size: clamp(17px, 1.55vw, 22px); gap: 7px 14px; }
  .facts dt { font-size: clamp(8px, .7vw, 10px); padding: 4px 10px; }
  .foot { font-size: 8px; }
  .foot a.mail { font-size: 15px; }
  .ticker { height: 30px; }
  .ticker-run { font-size: 9px; }
  .replay { top: 14px; right: 14px; font-size: 9px; }
}
/* short portrait phones (iPhone SE-ish): tighter type, two facts */
@media (max-aspect-ratio: 1/1) and (max-height: 740px) {
  .doc { gap: 6px; }
  .headline { font-size: 29px; }
  .facts { font-size: 15px; gap: 4px 9px; }
  .facts dt:nth-of-type(n+3), .facts dd:nth-of-type(n+3) { display: none; }
}
/* landscape phones: the fountain row is short, so shrink the details to fit beside the champion */
@media (min-aspect-ratio: 1/1) and (max-height: 560px) {
  .doc { top: 47dvh; bottom: 28px; gap: 5px; }
  .kicker { font-size: 7px; }
  .headline { font-size: clamp(24px, 8dvh, 40px); }
  .facts { font-size: 14px; gap: 3px 10px; }
  .facts dt { font-size: 7px; padding: 2px 6px; }
  .facts dt:nth-of-type(n+3), .facts dd:nth-of-type(n+3) { display: none; }
  .foot { display: none; }
  .ticker { height: 22px; } .ticker-run { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .print { transition: none; }
  .ticker-run { animation: none; }
}