@font-face{font-family:DM;src:url('/assets/dm.woff2');font-display:swap}
@font-face{font-family:Caveat;src:url('/assets/caveat.ttf');font-display:swap;font-weight:700}
*{box-sizing:border-box} :root,[data-theme=blue]{--bg:#244fbe;--ink:#fffae8;--surface:#2047a7;--accent:#ffcb51;--button-ink:#20346d;--grid:#ffffff16;--water:#eaf0fb;--line:#9cafd0;--board-ink:#20346d;--fold-light:#fff9df;--fold-mid:#9acbfa;--fold-accent:#ffcc50;--fold-shade:#d4def5;--hit:#bd344f;--soft-border:#ffffff40;--premium-crown:#244fbe}
[data-theme=cherry]{--bg:#fff2e3;--ink:#7e2b43;--surface:#fff9ef;--accent:#b83854;--button-ink:#fff9ef;--grid:#b8385416;--water:#fff9ee;--line:#c1afb9;--board-ink:#7e2b43;--fold-light:#fff9ed;--fold-mid:#f2afae;--fold-accent:#d44c68;--fold-shade:#f7ddcc;--hit:#a82b49;--soft-border:#7e2b4333;--premium-crown:#b83854}
body,.theme-preview{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;color:var(--ink)}body{margin:0;font-family:DM,Arial,sans-serif;font-weight:650;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}a{color:inherit}button{min-height:46px;border:1px solid var(--soft-border);border-radius:13px;color:var(--ink);background:var(--surface);font-weight:800;padding:10px 16px}button:active:not(:disabled){transform:translateY(1px)}.primary{background:var(--accent);color:var(--button-ink);border-color:transparent}.quiet{background:transparent}.top{max-width:1040px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px 22px}.brand{font-family:Caveat;font-size:30px;line-height:1;text-decoration:none;font-weight:700}.top nav{display:flex;gap:8px}.icon{width:44px;min-height:44px;padding:5px;border-radius:14px}main{max-width:1040px;padding:0 22px 28px;margin:auto}.home{max-width:440px;margin:auto;text-align:center}.hero-art{width:100%;display:block;max-height:220px}.home h1,.theme-preview h2{font-family:Caveat;font-size:clamp(40px,7vw,54px);line-height:1.04;margin:2px 0 12px}.subtitle{font-size:15px;line-height:1.5;max-width:340px;margin:0 auto 22px}.field{display:flex;flex-direction:column;gap:9px;margin:22px 0;text-align:center}.field label,.label{font-size:14px;font-weight:850}input{width:100%;min-height:48px;border:1px solid var(--soft-border);border-radius:12px;padding:10px 14px;background:var(--water);color:var(--board-ink);text-align:center;font-weight:750;font-size:17px}.choices{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.choices button{min-width:42px;padding:8px 10px}.choices button[aria-pressed=true]{background:var(--accent);color:var(--button-ink)}.home>.primary{width:100%;margin:15px 0 0}.home>.secondary{width:100%;margin-top:10px}.note{font-size:13px;line-height:1.5;text-align:center;opacity:.9;font-weight:750}.pro-card{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;border:1px solid var(--soft-border);background:var(--surface);border-radius:18px;padding:17px;margin-top:25px}.pro-card strong{display:block;font-size:17px;margin-bottom:4px}.pro-card span{font-size:13px;font-weight:750}.pro-card>div{min-width:0;flex:1}.pro-card button{flex:0 0 auto;width:auto;margin:0;white-space:nowrap}.room-head{text-align:center;margin:6px 0 17px}.room-head h1{font-family:Caveat;font-size:38px;margin:4px 0}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:850}.room-head p{font-size:14px;line-height:1.5;margin:6px 0}.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start;max-width:940px;margin:auto}.board-card{min-width:0}.board-top{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:42px;margin-bottom:8px;font-size:15px;font-weight:850}.timer{border:1px solid var(--soft-border);border-radius:50px;padding:7px 12px;font-size:13px;white-space:nowrap}.board-wrap{position:relative;margin:auto;width:100%;max-width:530px;padding:22px 0 0 22px}.letters{position:absolute;left:22px;right:0;top:0;display:grid;grid-template-columns:repeat(10,1fr);text-align:center;height:22px;align-items:center;font-size:12px;font-weight:850}.numbers{position:absolute;left:0;top:22px;bottom:0;width:22px;display:grid;grid-template-rows:repeat(10,1fr);align-items:center;text-align:center;font-size:12px;font-weight:850}.board-inner{position:relative;aspect-ratio:1;background:var(--water);border:1px solid var(--board-ink);border-radius:3px;overflow:hidden}.cells{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));height:100%;width:100%}.cell{border:0;border-radius:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;min-width:0;min-height:0;background:transparent;color:var(--board-ink);position:relative;display:grid;place-items:center;font-size:clamp(14px,3vw,23px);opacity:1!important}.cell:nth-child(10n){border-right:0}.cell:nth-child(n+91){border-bottom:0}.cell:active{transform:none!important}.cell:disabled{cursor:default}.cell:focus-visible{outline:2px solid var(--board-ink);outline-offset:-3px;z-index:4}.cell.pending:after{content:'';width:32%;aspect-ratio:1;border-radius:50%;background:var(--board-ink);box-shadow:0 0 0 3px var(--water),0 0 0 4px var(--board-ink);z-index:3}.cell.miss:after{content:'';width:13%;aspect-ratio:1;border-radius:50%;background:var(--board-ink);opacity:.4;z-index:3}.cell.hit:after{content:'×';font-size:1.4em;line-height:1;color:var(--hit);font-weight:900;z-index:3;text-shadow:0 0 2px var(--water)}.cell.fresh.hit:after{animation:splash .5s ease-out}.boat-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.boat{stroke:var(--board-ink);stroke-width:.45;stroke-linejoin:round}.legend{display:flex;justify-content:center;gap:18px;font-size:12px;font-weight:850;margin:14px 0}.rivals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:16px 0}.rival{padding:7px 4px;min-width:0;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:70px}.rival strong{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.rival span{font-size:11px;font-weight:750}.rival[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px}.rival.eliminated{opacity:.6}.avatar{display:inline-grid;place-items:center;border-radius:50%;background:var(--water);color:var(--board-ink);width:26px;height:26px;font-size:12px;font-style:normal;font-weight:900}.controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}.controls>*{flex:1}.fire{width:100%;margin-top:2px}.status{text-align:center;font-size:14px;line-height:1.5;margin:12px 0;min-height:21px;font-weight:800}.selected-count{font-variant-numeric:tabular-nums}.side-card{background:var(--surface);border:1px solid var(--soft-border);border-radius:18px;padding:18px;margin-bottom:16px}.side-card h2{text-align:center;font-family:Caveat;font-size:29px;margin:0 0 13px}.crew{list-style:none;padding:0;margin:0;display:grid;gap:12px}.crew li{display:flex;align-items:center;gap:9px;min-width:0}.crew .who{flex:1;min-width:0}.who strong{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis}.who small{font-size:12px;font-weight:750;display:block;opacity:.85;margin-top:3px}.crew .score{font-size:15px;font-weight:850}.watching{opacity:.65}.side-actions{display:flex;flex-direction:column;gap:9px}.boat-choices{display:flex;gap:7px;justify-content:center;margin:12px 0;flex-wrap:wrap}.boat-choices button{min-width:42px;padding:7px;font-size:12px}.boat-choices [aria-pressed=true]{background:var(--accent);color:var(--button-ink)}.boat-choices svg{width:45px;height:24px;display:block}.boats-note{text-align:center;font-size:13px;line-height:1.4;margin:10px 0}.results{max-width:560px;margin:auto;text-align:center}.results h1{font-family:Caveat;font-size:49px;margin:16px 0}.results .hero-art{height:155px}.result-list{list-style:none;padding:0;display:grid;gap:10px}.result-list li{display:flex;text-align:left;align-items:center;gap:13px;background:var(--surface);padding:16px;border-radius:16px;border:1px solid var(--soft-border)}.result-list .who{flex:1}.result-list .score{font-size:24px;font-weight:850}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.stats div{padding:13px 7px;background:var(--surface);border:1px solid var(--soft-border);border-radius:12px}.stats strong{display:block;font-size:25px}.stats span{font-size:12px;font-weight:850}.result-quote{font-family:Caveat;font-size:27px;line-height:1.2;margin:24px 10px}dialog{color:var(--ink);background:var(--bg);border:1px solid var(--soft-border);border-radius:22px;padding:28px 22px;width:min(480px,calc(100% - 24px));max-height:90dvh}dialog::backdrop{background:#142146b8;backdrop-filter:blur(5px)}dialog h2{font-family:Caveat;font-size:36px;margin:8px 0 15px;text-align:center}dialog p,dialog li{font-size:15px;line-height:1.55}dialog ul{padding-left:20px}dialog .close{position:absolute;right:10px;top:10px;min-height:36px;width:36px;border-radius:50%;padding:3px;font-size:25px;z-index:3}.theme-preview{padding:32px 18px 18px;border-radius:16px;border:1px solid var(--soft-border);text-align:center;margin:14px -5px 0}.theme-preview .hero-art{height:155px}.theme-preview .demo-grid{margin:18px auto;max-width:270px}.theme-preview .primary{width:100%}.theme-toggle{display:flex;justify-content:center;gap:8px}.theme-toggle [aria-pressed=true]{background:var(--accent);color:var(--button-ink)}.theme-preview h2{min-height:86px;font-size:42px}.preview-label{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:850}.info{border:1px solid var(--soft-border);border-radius:12px;padding:12px;font-size:13px;font-weight:750;line-height:1.5}#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#fff9e8;color:#20346d;border:1px solid #20346d44;border-radius:14px;padding:12px 17px;max-width:calc(100% - 30px);width:max-content;z-index:20;box-shadow:0 5px 20px #0002;font-size:14px;font-weight:800;display:none}#toast.show{display:block}.loading{text-align:center;padding:60px 0}.error-panel{text-align:center;max-width:430px;margin:60px auto}.error-panel p{line-height:1.5}button.danger{color:var(--ink);border-color:var(--soft-border)}
@keyframes splash{0%{transform:scale(.4);opacity:.2}65%{transform:scale(1.35)}100%{transform:scale(1)}}
@media(max-width:740px){.top{padding:16px}.brand{font-size:27px}main{padding:0 16px 24px}.home .hero-art{height:180px}.room-grid{display:flex;flex-direction:column;gap:15px}.board-card,.side{width:100%}.side{display:grid;grid-template-columns:1fr;gap:12px}.side-card{margin:0}.crew{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.side-actions{flex-direction:row;flex-wrap:wrap}.side-actions button{flex:1}.room-head{margin:0 0 12px}.room-head h1{font-size:33px}.board-wrap{max-width:510px}.rivals{margin:12px 0}.cell{font-size:19px}.status{margin:10px 0}.board-top{margin-bottom:5px}.pro-card{margin-top:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.rival-summary{display:grid!important;grid-template-columns:22px minmax(0,1fr) 22px;align-items:center;width:100%;gap:2px;min-height:17px}.rival-summary .fired-indicator,.rival-summary .outcome-indicator{font-size:12px;font-weight:900;min-width:22px;text-align:center}.rival-summary strong{font-size:12px}.countdown-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:color-mix(in srgb,var(--water) 94%,transparent);color:var(--board-ink);pointer-events:none}.countdown-overlay>span{font-size:19px;font-weight:900}.countdown-overlay>strong{font-family:Caveat;font-size:85px;line-height:1.1;min-height:94px}.countdown-overlay>small{font-size:13px;font-weight:800}.cell.hit:after{content:'✓';font-size:1.1em}
.rival-summary{grid-template-columns:14px minmax(0,1fr) 14px}.rival-summary .fired-indicator,.rival-summary .outcome-indicator{min-width:14px;font-size:11px}.fire{margin-top:10px}.room-grid{grid-template-columns:minmax(0,530px) 280px;justify-content:center}.side-actions button{min-height:46px}
@media(max-width:740px){.side-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.side-actions button{padding:12px 8px}.room-grid{display:flex}}
@media(max-width:740px){.top{padding:12px 16px}.board-top{min-height:35px}.legend{margin:10px 0}.rivals{gap:7px;margin:10px 0}.rival{padding:4px 3px;gap:3px;min-height:64px}.rival .avatar{width:22px;height:22px;font-size:11px}.status{margin:8px 0}.countdown-overlay>strong{font-size:64px}}
.fire-call{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Caveat;font-size:68px;line-height:1.1;font-weight:700;color:var(--button-ink);background:var(--accent);border-radius:20px;padding:8px 30px;pointer-events:none}.fire-call[hidden]{display:none}
.rivals{display:flex;flex-wrap:wrap;justify-content:center}.rival{flex:0 0 calc((100% - (var(--columns,4) - 1)*7px)/var(--columns,4))}

/* Premium seats and the Pro card share a compact, balanced layout. */
.seat-choices{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.seat-choices button{min-width:0;padding:9px 3px;display:flex;align-items:center;justify-content:center;gap:3px}
.premium-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 16px;background:transparent;border-radius:4px;color:#ffcb51;vertical-align:middle}
.crown{display:block;width:12px;height:11px}
.seat-caption{font-size:12px;font-weight:800;line-height:1.4;opacity:.9}
.pro-card span{line-height:1.45;display:block}
.pro-card strong{line-height:1.25}
.pro-heading{padding:14px 18px 0}
.pro-summary{text-align:center;font-weight:800;margin:0 0 18px}
.theme-toggle button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:10px 12px}
@media(max-width:360px){.theme-toggle{gap:6px}.theme-toggle button{padding:10px 8px;font-size:13px}.theme-preview .hero-art{height:120px}.theme-preview h2{font-size:34px;min-height:71px}}

.top{gap:12px}.top nav{flex-shrink:0}.theme-icon{font-size:25px;line-height:1}
.guide-heading{padding-top:15px}.guide-intro{text-align:center;margin:0 0 18px;font-weight:800}
.play-guide{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.play-guide li{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--soft-border);border-radius:15px;background:var(--surface);padding:12px}
.guide-sketch{display:block;width:78px;height:72px}
.guide-copy h3{font-size:16px;line-height:1.3;margin:0 0 5px;font-weight:850}
.guide-copy p{font-size:13px;line-height:1.4;margin:0;font-weight:750}
.guide-legend{display:flex;gap:13px;font-size:12px;font-weight:800;margin-top:7px}
.guide-rounds{margin:17px 0;text-align:center}.guide-rounds strong{font-size:14px}
.guide-timing{display:flex;gap:7px;align-items:center;justify-content:center;margin:10px 0;color:var(--ink);font-weight:850;font-size:14px}
.guide-timing span{border:1px solid var(--soft-border);background:var(--surface);border-radius:9px;padding:5px 7px;min-width:34px}
.guide-rounds p{font-size:12px;font-weight:800;margin:7px 0 0}.guide-done{width:100%;margin:0}
@media(max-width:360px){.top{gap:8px}.top nav{gap:5px}.top .icon{width:36px;min-height:44px}.top .brand{font-size:24px}.play-guide li{grid-template-columns:62px minmax(0,1fr);gap:9px;padding:10px}.guide-sketch{width:62px;height:64px}.guide-copy h3{font-size:15px}.guide-timing{gap:5px}.guide-timing span{min-width:30px;padding:5px}}

/* Keep the approved yellow crown visible when a Pro seat is selected. */
.seat-choices .pro-seat[aria-pressed=true]{background:var(--surface);color:var(--ink);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* One Pro card: theme preview, both benefits, both plans, one checkout action. */
.pro-offer.theme-preview{margin:12px 0 0;padding:20px 16px 16px;display:grid;gap:16px}
.pro-offer h2{font-size:40px;line-height:1.05;min-height:84px;margin:0}
.pro-offer .offer-intro{font-size:14px;line-height:1.4;margin:0;font-weight:800}
.pro-offer .theme-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pro-offer .theme-toggle button{font-size:13px;padding:9px 6px}
.pro-offer .offer-art{padding:0 12px}
.pro-offer .offer-art .hero-art{height:104px;max-height:104px}
.offer-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offer-benefits strong{display:block;font-size:15px;line-height:1.3;margin-bottom:5px}
.offer-benefits span{display:block;font-size:12px;font-weight:750;line-height:1.4}
.offer-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.offer-plans button{display:grid;align-content:center;gap:7px;padding:13px 6px;border:2px solid var(--soft-border);background:var(--surface);min-width:0}
.offer-plans button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.offer-plans button>span{font-size:12px;font-weight:850}
.offer-plans strong{display:block;font-size:24px;line-height:1.1;white-space:nowrap}
.offer-plans strong span{font-size:12px;margin-left:3px}
.offer-plans small{font-size:11px;font-weight:800}
.pro-offer .offer-subscribe{margin:0;min-height:48px;font-size:16px}
.pro-offer .offer-availability{font-size:12px;line-height:1.4;margin:0;font-weight:800}
.pro-offer .offer-terms{font-size:11px;line-height:1.6;margin:0;font-weight:750}
@media(max-width:360px){.pro-offer.theme-preview{padding:18px 12px 14px;gap:14px}.pro-offer h2{font-size:36px;min-height:76px}.offer-plans strong{font-size:22px}}
/* Keep the same complete offer visible on Home and Results, not just in a dialog. */
.pro-offer h2{font-family:Caveat;font-weight:700}

/* Eight seats in the Pro popup. Crowns identify seats six through eight. */
.offer-crew{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;width:100%;max-width:336px;margin:0 auto}
.offer-player{display:grid;grid-template-rows:18px auto;justify-items:center;gap:4px;min-width:0}
.offer-seat-crown{display:flex;align-items:center;justify-content:center;height:18px}
.offer-player>svg{display:block;width:100%;max-width:34px;aspect-ratio:1;padding:4px;border:1px solid var(--soft-border);border-radius:50%;background:var(--water);color:var(--board-ink)}
.offer-player.extra-seat>svg{border-color:var(--ink)}