/* Party Games styles (standalone). */
:root{
  --stage:#0b1a4a;        /* deep studio blue */
  --stage-2:#16307f;      /* lighter blue for gradients */
  --panel:#0a1340;        /* console panels */
  --panel-2:#13205c;
  --ink:#f3f1e6;          /* warm white text */
  --ink-dim:#b7bfe0;
  --gold:#f5b921;         /* reveal gold */
  --gold-2:#ffd85c;
  --red:#e8382b;          /* strike red */
  --green:#39c66b;        /* award green */
  --line:rgba(243,241,230,.14);
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'Nunito','Segoe UI',system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--stage);color:var(--ink);font:500 16px/1.4 var(--body)}
*{box-sizing:border-box}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px}
.hidden{display:none!important}
h1,h2,h3{text-wrap:balance;margin:0}
.display{font-family:var(--display);letter-spacing:.02em;font-weight:400}
.btn.blue{background:#2f63e0}
input[type=text],input[type=number],select,textarea{background:#060c2a;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;min-width:0}
.btn{background:#24409a;color:var(--ink);border:0;border-radius:9px;padding:9px 14px;font-weight:800;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.gold{background:var(--gold);color:#2b1d00}
.btn.red{background:var(--red)}
.btn.green{background:var(--green);color:#03240f}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.big{padding:16px;font-size:18px;font-family:var(--display);letter-spacing:.06em;font-weight:400}
.msg{font-size:13px;color:var(--ink-dim)}
.playTop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.playTop .display{font-size:24px;color:var(--gold);margin-right:auto}
.playTop .who{font-weight:800;color:var(--ink)}
.playCard{background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px}
.playCard h2{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
.playNote{margin:0;color:var(--ink-dim)}
.codeBig{font-family:'Doto','Press Start 2P',var(--display);font-weight:900;font-size:clamp(40px,12vw,60px);text-align:center;letter-spacing:.3em;padding:10px 0 10px .3em;text-transform:uppercase;color:#fff;background:#060c2a;border:3px solid #6f8ae6;border-radius:14px;width:100%}
.copyright{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(6px,env(safe-area-inset-bottom,0px));z-index:30;pointer-events:none;font:600 11px/1 var(--body);letter-spacing:.06em;color:rgba(207,224,255,.55);white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.spInput{width:100%;padding:12px 14px;border-radius:12px;font:700 18px/1.2 var(--body),sans-serif;background:#071812;color:#fff;border:1px solid rgba(255,255,255,.25)}
.spScores{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spKeys{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:12px 0}
.spK{aspect-ratio:1/1.05;border-radius:10px;border:none;font-family:var(--display);font-size:clamp(20px,6vw,28px);background:#fffdf4;color:#1b1b28;box-shadow:0 4px 0 #b8a77a;cursor:pointer;padding:0;transition:transform .08s}
.spK:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #b8a77a}
.spK:disabled{cursor:default}
.spK:disabled:not(.hit):not(.miss){opacity:.55}
.spK.hit{background:#3ddc84;color:#06200f;box-shadow:0 4px 0 #1f8a51}
.spK.miss{background:#e8382b;color:#fff;box-shadow:0 4px 0 #8a1510}
.spWord{display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:5px;margin:8px 0}
.spS{aspect-ratio:3/4;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.35);border-bottom:4px solid #9fe3bf;font-family:var(--display);font-size:clamp(20px,7vw,36px);color:#fff}
.spS.on{background:#fffdf4;color:#1b1b28;border-bottom-color:#b8a77a}
.spS.missed{color:#ff9d92}
.spS.pop{animation:spPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes spPop{0%{transform:scale(.4) rotateX(90deg)}100%{transform:scale(1)}}
.spFx{text-align:center;font-weight:800;min-height:1.4em;opacity:0}
.spFx.go{animation:spFx 2.2s ease}
.spFx.good{color:#3ddc84}.spFx.bad{color:#ff9d92}
@keyframes spFx{0%{opacity:0;transform:translateY(6px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
@keyframes spPulse{50%{box-shadow:0 0 0 3px #fff6c8,0 0 46px rgba(255,215,94,.9)}}
.spKeys.locked .spK:not(.hit):not(.miss):not(.elim){opacity:.45}
.spK.spy{background:repeating-linear-gradient(45deg,#e8382b 0 6px,#c42a1f 6px 12px)}
.spK.elim{background:#6b6f78;color:#d8dbe2;box-shadow:0 4px 0 #3e4148}
.spInfo{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.spChip{padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(159,227,191,.5);font-size:13px;font-weight:700}
.spChip.bad{border-color:#ff9d92;color:#ffd0ca}
.spPerk{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#123a2b;color:#fff;cursor:pointer;font:inherit}
.spPerk b{font-size:17px}.spPerk span{grid-column:1;font-size:13px;color:#cfe7dc}.spPerk i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:900;color:#ffe48a}
.spPerk:disabled{opacity:.45;cursor:default}
.spPerk:active:not(:disabled){transform:scale(.98)}
.spFx.info{color:#9fd3ff}
@keyframes spWin{0%{transform:scale(.3) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
/* ================= Party Games (phone to phone, never scrolls) ================= */
#party{height:var(--vvh,100dvh);overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#5b2aa8,#170734 70%);color:#fff;font-size:calc(16px * var(--ptk,1));
  padding:max(8px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
.ptInner{max-width:560px;margin:0 auto;height:100%}
.ptLobby{height:100%;display:flex;flex-direction:column;gap:.6em;overflow:hidden}
.ptLobby .playCard{padding:.8em 1em}.ptLobby h2{font-size:1.15em;margin:0 0 .4em}
.ptLobby .codeBig{font-size:2.2em;padding:.2em}
.ptRoom{height:100%;display:flex;flex-direction:column;gap:.45em}
.ptHead{flex:none;display:grid;gap:.35em}
.ptTitle{font-family:var(--display);font-size:1.5em;letter-spacing:.03em;color:#ffd75e;text-align:center;line-height:1.05}
.ptTitle small{display:block;font-family:var(--body),sans-serif;font-size:.5em;color:#d6c6ff;font-weight:800;letter-spacing:.02em}
.ptTurn{text-align:center;font-family:var(--display);font-size:1.45em;padding:.25em .4em;border-radius:12px;background:rgba(0,0,0,.35);color:#d6c6ff;border:2px dashed rgba(255,255,255,.2)}
.ptTurn.mine{background:linear-gradient(180deg,#ffe48a,#f5b921);color:#3a2600;border:none;box-shadow:0 0 22px rgba(255,215,94,.55);animation:spPulse 1.4s ease-in-out infinite}
.ptClock{font-variant-numeric:tabular-nums}.ptClock.low{color:#c4140a}
.ptScore{display:flex;flex-wrap:wrap;gap:.3em;justify-content:center}
.ptScore span{padding:.2em .6em;border-radius:999px;background:rgba(0,0,0,.3);font-size:.8em;font-weight:800}
.ptScore span.me{background:#3b1d7a;border:1px solid #b89cff}.ptScore span.up{box-shadow:0 0 0 2px #ffd75e}
.ptScore b{color:#ffd75e}
.ptFx{flex:none;text-align:center;font-weight:800;font-size:.9em;min-height:1.2em;opacity:0}
.ptFx.go{animation:spFx 2.4s ease}.ptFx.good{color:#7dffb0}.ptFx.bad{color:#ff9d92}
.ptMain{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.45em}
.ptForm,.ptFoot{flex:none;display:grid;gap:.4em}
.ptFoot{justify-items:center}
.ptFoot .btn.gold,.ptFoot .ptActs{width:100%}
.ptCard{padding:.6em .8em;border-radius:14px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12)}
.ptCard.center,.center{text-align:center}
.ptCard p{margin:.15em 0}
.ptCard h2{font-size:1.1em;margin:0 0 .4em}
.ptCard.imp{border-color:#ff9d92;background:rgba(120,20,30,.4)}
.ptBig{font-weight:900;font-size:1.15em}
.ptWord{font-family:var(--display);font-size:2.2em;line-height:1.05;color:#ffd75e;letter-spacing:.03em;overflow-wrap:anywhere}
.ptWord.ghost{letter-spacing:.12em}
.ptScene{font-size:1.1em;font-weight:800;line-height:1.25}
.ptCode{font-family:var(--display);font-size:3.2em;letter-spacing:.16em;color:#ffd75e;line-height:1}
.ptQR{width:8.5em;height:8.5em;margin:.3em auto;padding:.4em;background:#fff;border-radius:10px}.ptQR svg{width:100%;height:100%;display:block}
.ptPlayers{display:flex;flex-wrap:wrap;gap:.3em;justify-content:center;margin-top:.3em}
.ptPlayers span{padding:.25em .6em;border-radius:999px;background:#3b1d7a;font-weight:800;font-size:.85em}.ptPlayers span.me{box-shadow:0 0 0 2px #ffd75e}
.ptGames{display:grid;grid-template-columns:1fr 1fr;gap:.35em}
.ptG{display:grid;gap:.1em;text-align:left;padding:.45em .55em;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#2a1258;color:#fff;font:inherit;cursor:pointer}
.ptG b{font-size:.92em}.ptG span{font-size:.68em;color:#d6c6ff;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ptG i{font-style:normal;font-size:.68em;color:#ffd75e;font-weight:800}
.ptG.on{background:#ffd75e;color:#2a1258;border-color:#fff}.ptG.on span,.ptG.on i{color:#4a2a00}.ptG.no{opacity:.5}
.ptOpts{display:grid;gap:.35em}
.ptOpts.grid{grid-template-columns:1fr 1fr}
.ptOpt{display:grid;gap:.15em;text-align:left;padding:.55em .7em;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#2a1258;color:#fff;font:inherit;font-weight:700;line-height:1.25;cursor:pointer}
button.ptOpt:active:not(:disabled){transform:scale(.98)}
.ptOpt small{font-size:.75em;color:#d6c6ff;font-weight:700}
.ptOpt.on{background:#ffd75e;color:#2a1258}.ptOpt:disabled:not(.on){opacity:.6;cursor:default}
.ptOpt.real{background:#14532d;border-color:#3ddc84}.ptOpt.lie{background:#5a1414;border-color:#e8382b}
.ptAB{display:grid;grid-template-columns:1fr 1fr;gap:.5em}.ptAB .ptOpt{text-align:center;font-size:1.1em;padding:1em .5em}
.ptRow{display:flex;gap:.4em;align-items:center}.ptRow input{flex:1;min-width:0}
#party input:not([type=radio]),#party textarea{padding:.6em .7em;border-radius:10px;font:700 1em/1.2 var(--body),sans-serif;background:#12062b;color:#fff;border:1px solid rgba(255,255,255,.25);width:100%;resize:none}
#party .ptCard textarea{margin-bottom:.4em}
.ptFacts{display:grid;gap:.35em}.ptFacts label{display:flex;gap:.4em;align-items:center}.ptFacts label span{white-space:nowrap;font-size:.8em;font-weight:800;color:#ffd0ca}
.ptClues{display:flex;flex-wrap:wrap;gap:.3em;justify-content:center}.ptClues span{display:grid;padding:.25em .6em;border-radius:10px;background:#3b1d7a;font-weight:900;text-align:center}.ptClues small{font-size:.65em;color:#d6c6ff;font-weight:700}
.ptTiles{display:flex;gap:.3em;justify-content:center}.ptTiles span{width:2.1em;height:2.4em;display:grid;place-items:center;border-radius:8px;background:#fffdf4;color:#1b1b28;font-family:var(--display);font-size:1.4em;box-shadow:0 3px 0 #b8a77a}
.ptWords{display:flex;flex-wrap:wrap;gap:.3em;justify-content:center;align-content:flex-start;overflow:hidden}
.ptWords span{padding:.2em .5em;border-radius:8px;background:#3b1d7a;font-weight:800;font-size:.9em}.ptWords.sm span{font-size:.75em}.ptWords span.u{background:#ffd75e;color:#2a1258}
.ptResults{display:grid;gap:.35em}
.ptGhosts{display:flex;flex-wrap:wrap;gap:.35em;justify-content:center}
.ptGhosts span{display:grid;justify-items:center;padding:.25em .5em;border-radius:10px;background:rgba(0,0,0,.3)}.ptGhosts span.up{box-shadow:0 0 0 2px #ffd75e}.ptGhosts span.out{opacity:.4}
.ptGhosts small{font-size:.7em;font-weight:800}.ptGhosts b i{font-style:normal;font-family:var(--display);font-size:.95em;color:rgba(255,255,255,.25);margin:0 .05em}.ptGhosts b i.on{color:#ff6a5a}
.ptKeys{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3em}
.ptKeys .spK{aspect-ratio:auto;height:2.3em;font-size:1.15em;border-radius:8px}
.ptSplit{display:grid;gap:.5em}.ptSplit>div{padding:.5em .7em;border-radius:12px;background:rgba(0,0,0,.3)}.ptSplit>div.win{box-shadow:0 0 0 2px #ffd75e}
.ptSplit .bar{height:.7em;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;margin:.3em 0}.ptSplit .bar i{display:block;height:100%;background:#ffd75e}
.ptSplit small{font-size:.75em;color:#d6c6ff}
.bsGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin:0 auto;padding:3px;border-radius:8px;background:#0b2a4a}
.bsGrid.target{width:min(100%,calc((var(--vvh,100dvh) - 15em) * .62))}
.bsGrid.mine{width:min(70%,calc((var(--vvh,100dvh) - 15em) * .38))}
.bsGrid>*{aspect-ratio:1;border-radius:3px;background:#174a7a;border:none;padding:0;position:relative}
.bsGrid.target.live>button{background:#2e6fb0;cursor:crosshair}.bsGrid.target.live>button:active{background:#ffd75e}
.bsGrid .ship{background:#8a95a5}.bsGrid .hit{background:#e8382b}.bsGrid .sunk{background:#7a0f0b}
.bsGrid .miss::after{content:"";position:absolute;inset:35%;border-radius:50%;background:#cfe7ff}
.ptActs{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.ptFinal .ptFinalT{font-family:var(--display);font-size:2.2em;color:#ffd75e;line-height:1.05}
.ptFinal.win .ptFinalT{text-shadow:0 0 24px rgba(255,215,94,.8);animation:spWin .8s cubic-bezier(.2,1.5,.4,1)}
.ptRank{list-style:none;padding:0;margin:.4em 0 0;display:grid;gap:.25em}
.ptRank li{display:flex;justify-content:space-between;padding:.3em .7em;border-radius:10px;background:rgba(0,0,0,.3);font-weight:800}.ptRank li.me{background:#3b1d7a}.ptRank li b{color:#ffd75e}
#ptConn{flex:none;margin:0;font-size:.7em;text-align:center}#ptConn:empty{display:none}
.ptTapped{filter:brightness(1.3)}
#party .btn.sm{padding:.35em .9em;font-size:.8em}

.ptRoomCard{display:flex;gap:.8em;align-items:center;justify-content:center;text-align:center}
.ptRoomCard .ptQR{width:6.5em;height:6.5em;margin:0;flex:none}
.ptRoomCard .btn{margin-top:.3em}
.ptG{grid-template-columns:1fr auto;align-items:center}
.ptBlurb{margin:.45em 0 0;text-align:center;font-size:.85em}
/* Battleship grids are sized from the space left on screen, so both boards always fit */
.ptMain{container-type:size}
.bsGrid.target{width:min(100cqw,55cqh)}
.bsGrid.mine{width:min(60cqw,24cqh)}
.ptMain .playNote{margin:.1em 0}
/* Letter Duel inside Party Games */
.ldKeys{gap:.28em}.ldKeys .spK{height:2.2em}
.ldKeys.locked .spK:not(.hit):not(.miss):not(.elim){opacity:.45}
.ldWord{display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:.25em;margin:.2em 0}
.ldWord .spS{aspect-ratio:auto;height:2.4em;font-size:1.5em;height:1.7em}
.ldInfo{display:flex;flex-wrap:wrap;gap:.3em;justify-content:center}.ldInfo .spChip{font-size:.75em;padding:.25em .6em}
.ldRp{font-size:.8em}
.ldSpend{display:grid;gap:.3em}.ldSpend .spPerk{padding:.4em .6em}.ldSpend .spPerk b{font-size:.95em}.ldSpend .spPerk span{font-size:.75em}
.ptFx.info{color:#9fd3ff}