/* AHOI! on Google Cast – the same picture as the AirPlay TV (Ahoi/Views/TVRootView.swift), in TV units:
   the stage is 1920×1080 px and scaled to the screen, so it reads the same from the couch on any TV. */

@font-face { font-family: "Archivo"; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: block; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito.woff2) format("woff2"); font-weight: 200 1000; font-display: block; }

:root {
  --canvas: #F4F0E8;
  --surface: #FFFDF9;
  --ink: #0A1020;
  --secondary: #6E6A66;
  --bang: #FFCC00;
  --red: #C71A24;
  --go: #2E8A3E;
  --sea: #D8402B;
  --display: "Archivo", system-ui, sans-serif;
  --rounded: "Nunito", "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--display); color: #fff; -webkit-font-smoothing: antialiased; }

.display { font-family: var(--display); font-stretch: 125%; font-weight: 900; letter-spacing: -0.01em; }
.rounded { font-family: var(--rounded); }

/* ---------- Sea ---------- */
#sea { position: fixed; inset: 0; overflow: hidden; }
#sea-color { position: absolute; inset: 0; background: var(--sea); transition: background-color .7s ease; }
#sea-motif { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; animation: sway 44s ease-in-out infinite alternate; }
#sea-motif path { fill: rgba(0, 0, 0, .18); transition: d .7s ease; }
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob.light { width: 70vh; height: 70vh; left: 30%; top: 10%; background: radial-gradient(circle, rgba(255,255,255,.2), rgba(255,255,255,0) 70%); animation: drift1 31s ease-in-out infinite alternate; }
.blob.dark { width: 55vh; height: 55vh; left: 55%; top: 45%; background: radial-gradient(circle, rgba(0,0,0,.2), rgba(0,0,0,0) 70%); animation: drift2 37s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes drift1 { from { transform: translate(-30vw, -10vh); } to { transform: translate(25vw, 35vh); } }
@keyframes drift2 { from { transform: translate(20vw, -30vh); } to { transform: translate(-35vw, 15vh); } }

/* Embers: the hot cards smoulder. */
#embers { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
#embers.on { opacity: 1; }
#embers i { position: absolute; bottom: -20px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #FFD54A, #FF6A00 60%, rgba(255,80,0,0) 70%); animation: rise linear infinite; }
@keyframes rise { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(var(--dx), -110vh); opacity: 0; } }

/* ---------- Stage ---------- */
#stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; }
#main { position: absolute; inset: 0; }
.scene { position: absolute; inset: 60px 90px; display: flex; flex-direction: column; }
.scene.enter { animation: enter .45s cubic-bezier(.2, .9, .3, 1.1) both; }
.scene.fade-out { animation: fade-out .4s ease both; }
.scene.toss { animation: toss .5s cubic-bezier(.5, 0, .9, .6) both; }
@keyframes enter { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes toss { to { transform: translate(-2000px, 120px) rotate(-12deg); opacity: .9; } }

.top { display: flex; align-items: center; justify-content: space-between; gap: 40px; height: 64px; margin-bottom: 28px; }
.wordmark { font-family: var(--display); font-stretch: 125%; font-weight: 900; color: #fff; }
.top .wordmark { font-size: 40px; }
.head { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Idle ---------- */
.idle { align-items: center; justify-content: center; gap: 56px; text-align: center; }
.idle .wordmark { font-size: 260px; line-height: 1; }
.crew { display: flex; gap: 28px; align-items: flex-start; }
.crew .seat { width: 168px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.crew .seat span { font-size: 30px; font-weight: 700; max-width: 168px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew .more { width: 140px; height: 140px; border-radius: 50%; background: #fff; color: #4238BF; display: grid; place-items: center; font: 800 48px var(--rounded); }
.avatar { border-radius: 50%; background: #fff; display: block; flex: none; }
.hint { font-size: 46px; font-weight: 600; opacity: .92; display: flex; align-items: center; gap: 18px; }
.hint svg { width: 46px; height: 46px; }

/* ---------- Card ---------- */
.pile { position: relative; flex: 1; width: 100%; max-width: 1560px; margin: 0 auto 24px; }
.under { position: absolute; inset: 0; border-radius: 72px; background: var(--surface); }
.under.u1 { opacity: .55; transform: translateY(12px) rotate(1.2deg); }
.under.u2 { opacity: .3; transform: translateY(24px) rotate(-1.6deg); }
.face { position: absolute; inset: 0; border-radius: 72px; background: var(--surface); color: var(--ink); padding: 72px; display: flex; flex-direction: column; transition: opacity .3s; }
.face.hot { box-shadow: 0 0 0 10px #F05A1E, 0 0 90px 20px rgba(255, 140, 0, .75); }
.face .cap { display: flex; align-items: center; gap: 22px; }
.face .flag { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex: none; }
.face .title { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: 34px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.badge-hot { display: flex; align-items: center; gap: 10px; background: var(--red); color: #fff; border-radius: 999px; padding: 16px 26px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 30px; text-transform: uppercase; transform: rotate(4deg); }
.badge-hot svg { width: 30px; height: 30px; }
.face .text { flex: 1; display: flex; align-items: center; font-family: var(--rounded); font-weight: 800; font-size: 100px; line-height: 1.12; margin: 24px 0; overflow: hidden; }
.face .who { display: flex; align-items: center; gap: 22px; font-size: 40px; font-weight: 600; color: var(--secondary); }
.dim .face, .dim .under { opacity: .3; }

.beat { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.beat b { font: 900 560px/1 var(--rounded); text-shadow: 0 16px 40px rgba(0,0,0,.35); animation: beat-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.beat .ring { position: absolute; width: 520px; height: 520px; border: 24px solid #fff; border-radius: 50%; animation: ring .75s ease-out both; }
@keyframes beat-in { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ring { from { transform: scale(.7); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }

.stamp { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.stamp span { display: flex; align-items: center; gap: 30px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 120px; background: var(--red); border: 8px solid #fff; border-radius: 999px; padding: 44px 70px; transform: rotate(-4deg); white-space: nowrap; animation: stamp .45s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes stamp { from { transform: rotate(-4deg) scale(2); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }

.clock { position: absolute; right: -70px; bottom: -50px; width: 230px; height: 230px; border-radius: 50%; padding: 10px; animation: enter .4s both; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock circle { fill: none; stroke-width: 16; }
.clock .track { stroke: rgba(255,255,255,.3); }
.clock .left { stroke: #fff; stroke-linecap: round; }
.clock b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 96px var(--rounded); }

.end { align-items: center; justify-content: center; gap: 24px; }
.end svg { width: 170px; height: 170px; }
.end b { font-size: 130px; }

/* ---------- This or That ---------- */
.board { position: relative; flex: 1; display: flex; gap: 9px; background: #fff; border: 9px solid #fff; border-radius: 72px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 11px 29px rgba(0,0,0,.2); }
.half { position: relative; flex: 1; display: grid; place-items: center; padding: 43px 120px 43px 43px; overflow: hidden; }
.half.b { padding: 43px 43px 43px 120px; }
.half > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.half p { position: relative; font: 800 92px/1.1 var(--rounded); text-align: center; }
.half .shade { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .4s; }
.half.safe .shade { opacity: 1; }
.half .drinks { position: absolute; top: 40px; left: 50%; transform: translateX(-50%) rotate(-4deg); background: #fff; border-radius: 999px; padding: 18px 30px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 30px; text-transform: uppercase; display: none; align-items: center; gap: 12px; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.half.loser .drinks { display: flex; animation: stamp .45s both; }
.half .drinks svg { width: 32px; height: 32px; }
.seam { position: absolute; left: 50%; top: 50%; width: 151px; height: 151px; margin: -75px 0 0 -75px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 44px; transition: transform .3s; }
.seam.counting { transform: scale(1.6); font: 900 96px var(--rounded); }

/* ---------- Closest Guess ---------- */
.reveal { flex-direction: row; align-items: center; gap: 70px; }
.reveal .left { flex: 1; height: 100%; display: flex; flex-direction: column; gap: 24px; justify-content: center; position: relative; }
.reveal .left .wordmark { position: absolute; top: 0; font-size: 40px; }
.reveal .question { font: 700 50px/1.2 var(--rounded); opacity: .92; }
.reveal .answer { display: flex; align-items: baseline; gap: 20px; white-space: nowrap; }
.reveal .answer b { font: 900 170px/1 var(--rounded); font-variant-numeric: tabular-nums; }
.reveal .answer span { font: 800 68px var(--rounded); }
.rows { width: 820px; display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 22px; height: 112px; padding: 0 28px; border-radius: 40px; background: var(--surface); color: var(--ink); animation: row-in .4s cubic-bezier(.2, .9, .3, 1.1) both; }
.row.drinks { background: var(--red); color: #fff; }
.row .place { width: 50px; font: 800 40px var(--rounded); opacity: .6; text-align: center; }
.row .who { flex: 1; min-width: 0; }
.row .who b { display: block; font-size: 42px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .who small { font-size: 30px; font-weight: 500; opacity: .75; }
.row .guess { font: 800 48px var(--rounded); white-space: nowrap; }
.row svg { width: 40px; height: 40px; }
@keyframes row-in { from { transform: scale(.85); transform-origin: top; opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Bottle ---------- */
.bottle { flex-direction: row; align-items: center; gap: 70px; }
.bottle.card, .bottle.choosing { flex-direction: column; align-items: stretch; }
.table { position: relative; height: 100%; aspect-ratio: 1; flex: none; }
.table .disc { position: absolute; inset: 14%; border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 8px rgba(255,255,255,.25); }
.table .chair { position: absolute; width: 170px; margin: -85px 0 0 -85px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .4s cubic-bezier(.2, .9, .3, 1.3); }
.table .chair span { font-size: 28px; font-weight: 700; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0,0,0,.3); }
.table .chair .avatar { box-shadow: 0 0 0 6px #fff; }
.table .chair.picked { transform: scale(1.3); }
.table .chair.picked .avatar { box-shadow: 0 0 0 8px var(--bang), 0 0 40px 10px rgba(255,204,0,.6); }
.table .spinner { position: absolute; left: 50%; top: 50%; width: 120px; height: 400px; margin: -200px 0 0 -60px; transform-origin: 50% 50%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); }
.bottle .headline { flex: 1; display: flex; flex-direction: column; gap: 28px; }
.bottle .headline b { font-size: 92px; line-height: 1.05; }
.bottle .headline p { font-size: 50px; font-weight: 600; opacity: .92; }
.choosing { justify-content: center; gap: 44px; }
.choosing .who { display: flex; align-items: center; gap: 32px; }
.choosing .who b { font-size: 80px; display: block; }
.choosing .who p { font-size: 50px; font-weight: 600; opacity: .92; }
.flags { display: flex; gap: 56px; height: 560px; }
.flagtile { position: relative; flex: 1; border-radius: 72px; overflow: hidden; border: 8px solid #fff; padding: 72px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.flagtile > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.flagtile > * { position: relative; z-index: 1; }
.flagtile b { font-size: 130px; line-height: 1; white-space: nowrap; }
.flagtile p { font-size: 44px; font-weight: 500; opacity: .92; }
.flip { position: relative; flex: 1; width: 100%; max-width: 1560px; margin: 0 auto 24px; perspective: 2400px; animation: pop .5s cubic-bezier(.2, .9, .3, 1.45) both; }
.flip .inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); animation: turn .7s cubic-bezier(.3, .8, .3, 1.05) 1s both; }
.flip .front, .flip .back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .back { transform: rotateY(180deg); display: flex; }
.flip .back .flagtile { flex: 1; }
@keyframes pop { from { transform: scale(.6); } to { transform: none; } }
@keyframes turn { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }

/* ---------- Verdict ---------- */
#verdict { position: fixed; inset: 0; pointer-events: none; }
#verdict > div { position: absolute; inset: 0; display: grid; place-items: center; animation: verdict-in .4s cubic-bezier(.2, .9, .3, 1.2) both; overflow: hidden; }
#verdict .done { background: rgba(0,0,0,.3); }
#verdict .done .mark { display: flex; flex-direction: column; align-items: center; gap: 30px; transform: rotate(-4deg); }
#verdict .done .tick { width: 380px; height: 380px; border-radius: 50%; background: var(--go); border: 12px solid #fff; display: grid; place-items: center; }
#verdict .done .tick svg { width: 200px; height: 200px; }
#verdict .red { background: var(--red); }
#verdict .shout { position: absolute; left: 50%; top: 50%; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 116px; white-space: nowrap; text-shadow: 0 10px 30px rgba(0,0,0,.35); animation: slam .5s cubic-bezier(.2, .9, .3, 1.4) both; }
#verdict .price { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; padding: 0 120px; }
#verdict .price svg { width: 200px; height: 200px; animation: bounce .8s ease both; }
#verdict .price b { font-size: 160px; line-height: 1; }
#verdict .price p { font-size: 54px; font-weight: 600; opacity: .92; }
#verdict .scaled { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; margin: -540px 0 0 -960px; display: grid; place-items: center; }
@keyframes verdict-in { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: none; } }
@keyframes slam { from { transform: translate(-50%, -50%) scale(3); opacity: 0; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); opacity: 1; } }
@keyframes bounce { 0% { transform: scale(.4); } 50% { transform: scale(1.2); } 100% { transform: none; } }

#burst { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }