.game-main{padding:22px 20px 28px}.game-main h1{font-size:27px;text-align:center;margin:0 0 8px}.game-intro{text-align:center;font-size:13px;line-height:1.5;margin:0 0 20px;color:#765e4d}.game-setup fieldset{border:0;padding:0;margin:0 0 17px}.game-setup legend{font-size:14px;font-weight:800;margin-bottom:9px}.choices{display:flex;gap:7px;flex-wrap:wrap}.choice{position:relative;flex:1}.choice input{position:absolute;opacity:0;width:1px;height:1px}.choice span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:9px 8px;border:2px solid #e8ddce;background:#fffdf8;border-radius:14px;text-align:center;font-size:13px;font-weight:700;cursor:pointer}.choice input:checked+span{border-color:var(--blue);background:#e3f5f9;color:var(--blue)}.choice input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;font-size:13px;font-weight:700}.setting-row select{max-width:60%;height:48px;border:1px solid #d9cbbb;border-radius:12px;background:white;padding:0 10px}.game-setup .primary{width:100%;margin-top:12px}.rules-note{font-size:12px;line-height:1.6;color:#765e4d}.players{display:grid;grid-template-columns:1fr 45px 1fr;align-items:center;margin:12px 0}.player{text-align:center;border:2px solid transparent;border-radius:18px;padding:7px;background:#fffdf8}.player.active{border-color:var(--blue);background:#e3f5f9}.player img{width:64px;height:65px;object-fit:contain}.player strong{display:block;font-size:13px}.player .score{font-size:27px;font-weight:900;margin-top:4px}.versus{text-align:center;font-size:12px;font-weight:800}.match-meta{text-align:center;font-size:12px;line-height:1.5;color:#765e4d;margin:8px 0}.status-bubble{min-height:67px;text-align:center;padding:12px;font-size:14px;font-weight:700;margin:14px 0}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:350px;margin:0 auto}.cell{aspect-ratio:1;min-height:0;border-radius:18px;border:2px solid #e5d8c7;box-shadow:0 3px 0 #e5d8c7;background:#fff;font-size:clamp(30px,9vw,46px);font-weight:900;padding:0;line-height:1;color:var(--blue)}.cell[data-mark=O]{color:#a52759}.cell.win{background:#dcf5de;border-color:#719d62}.cell:disabled{cursor:default;opacity:1}.cell:not(:disabled):hover{background:#eaf9fa}.timer-row{display:flex;align-items:center;gap:10px;margin:18px 0 8px;font-size:13px}.timer-row progress{flex:1;min-width:0;height:12px;accent-color:var(--blue)}.game-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.game-actions button{padding:10px 16px;border-radius:13px;background:#e9f2f4;font-weight:700;font-size:13px}.game-actions .primary{background:var(--blue);color:white}.game-main dialog .primary{margin-top:10px}.game-help{margin-top:24px;font-size:13px;line-height:1.6}.game-help summary{cursor:pointer;min-height:48px;display:flex;align-items:center;color:var(--blue);font-weight:800}.paused-board{filter:blur(3px)}.series-result{font-weight:800}.game-header .game-home{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--blue);font-weight:800;font-size:14px}.game-header .game-home img{width:28px;height:28px}.game-header .game-logo{width:145px;height:auto}
/* A single, responsive game surface. */
.tic-page{height:100dvh;overflow:hidden}
.tic-page .phone{display:flex;flex-direction:column;overflow:hidden;height:calc(100dvh - 48px);min-height:0}
.game-header{flex:0 0 62px;height:62px;padding:5px 14px;gap:8px}
.game-header h1{font-size:20px;line-height:1.2;margin:0;letter-spacing:-.5px;white-space:nowrap}
.game-header .game-home{width:44px;min-height:44px;justify-content:center;flex-shrink:0}
.header-tools{display:flex;gap:2px}.header-tools button{min-height:44px;width:40px;padding:0;border-radius:13px;background:#e3f5f9;color:var(--blue);font-weight:900;font-size:22px}
.game-main{flex:1;min-height:0;padding:10px 16px 12px;display:flex;flex-direction:column}
.game-setup{margin:auto 0;overflow-y:auto;min-height:0;padding:2px 3px}
.game-setup fieldset{margin-bottom:10px}.setting-row{margin:9px 0}.rules-note{margin:10px 0;font-size:11px;line-height:1.45}.game-setup .primary{margin-top:6px}
#play{display:flex;flex-direction:column;flex:1;min-height:0;gap:7px}
.players{grid-template-columns:1fr 20px 1fr;margin:0;gap:4px;flex-shrink:0}
.player{display:flex;align-items:center;justify-content:center;padding:5px 3px;gap:5px;border-radius:16px;min-width:0}
.player img{width:52px;height:56px;object-fit:contain}.player-info{min-width:0}.player strong{font-size:12px;white-space:nowrap}
.player-score{display:flex;align-items:center;justify-content:center;gap:9px;height:31px}
.mark-icon{font-size:35px;font-weight:900;line-height:1}.mark-x{color:var(--blue)}.mark-o{color:#a52759}.player .score{font-size:24px;line-height:1;margin:0}
.match-meta{font-size:11px;line-height:1.3;margin:0;min-height:15px}
.status-bubble{min-height:40px;font-size:12px;line-height:1.4;padding:8px 10px;margin:0;flex-shrink:0;border-radius:14px}
.board-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}
.board{width:min(100cqw,100cqh,350px);height:min(100cqw,100cqh,350px);max-width:100%;margin:0;flex-shrink:0;grid-template-rows:repeat(3,1fr);gap:7px}
.cell{font-size:clamp(26px,7vh,48px);border-radius:15px;aspect-ratio:auto}
.timer-row{margin:0;font-size:11px;min-height:20px;flex-shrink:0}
.game-actions{margin:0;gap:8px;flex-shrink:0}.game-actions button{min-height:44px;padding:8px 14px;font-size:12px}
.tic-page dialog{max-height:calc(100dvh - 32px);overflow-y:auto}
#help-modal p{font-size:13px;line-height:1.55}#help-modal h2{margin-bottom:12px}
#result-modal{text-align:center;overflow-x:hidden;padding:25px 22px 22px}
#result-kicker{text-transform:uppercase;font-size:11px;letter-spacing:1.4px;font-weight:800;margin:0 0 8px;color:#786452}
#result-character{width:120px;height:120px;object-fit:contain}
#result-title{font-size:34px;line-height:1.1;color:var(--blue);padding:0;margin:8px 0 12px;overflow-wrap:anywhere}
#result-message{font-size:14px;line-height:1.5;margin:8px 0}#result-score{font-size:17px;font-weight:800;margin:14px 0}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px}
#confetti i{position:absolute;top:-15px;left:var(--x);width:7px;height:12px;border-radius:2px;opacity:0;animation:confetti-fall 1.7s var(--delay) ease-out both}
@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translateY(420px) rotate(var(--turn))}}
@media(max-width:520px){.tic-page .phone{height:100dvh;min-height:0}.game-header{flex-basis:calc(62px + env(safe-area-inset-top));height:calc(62px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}.game-main{padding-bottom:max(10px,env(safe-area-inset-bottom))}}
@media(max-height:620px){.game-header{flex-basis:54px;height:54px}.game-main{padding-top:6px;padding-bottom:6px}#play{gap:4px}.player img{width:40px;height:43px}.player-score{height:26px}.player .score{font-size:21px}.status-bubble{min-height:32px;padding:5px 7px}.game-setup legend{margin-bottom:5px}.setting-row{margin:5px 0}.setting-row select{height:44px}.rules-note{font-size:10px;margin:5px 0}}
@media(orientation:landscape) and (max-height:540px){
 .tic-page .phone{top:8px;bottom:8px;left:5%;width:90%;max-width:none;height:calc(100dvh - 16px)}
 .game-header{justify-content:space-between;flex-basis:48px;height:48px}.game-main{padding:6px 12px}
 #play{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;gap:4px 14px}
 .players{grid-column:1;grid-row:1}.match-meta{grid-column:1;grid-row:2}.status-bubble{grid-column:1;grid-row:3;align-self:center}.timer-row{grid-column:1;grid-row:4}.game-actions{grid-column:1;grid-row:5}.board-stage{grid-column:2;grid-row:1/6;align-self:stretch}
 .game-setup{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;align-items:center}.game-setup fieldset{grid-column:1/-1;margin:0}.game-setup .primary{margin:0}.rules-note{margin:0}
}
/* Illustrated opening, mirrored score, and explicit pause state. */
.game-header{padding-left:9px;padding-right:9px;gap:4px}.game-header h1{font-size:clamp(16px,4.7vw,20px)}.game-header .game-home{width:34px}.header-tools button{width:34px;font-size:18px}.header-tools .share-button{padding:7px}
.game-setup{margin:0;display:flex;flex-direction:column;justify-content:center;gap:0;flex:1}.setup-art{flex-shrink:1;min-height:0;text-align:center;margin:0 0 12px}.setup-art img{width:100%;max-height:180px;object-fit:cover;object-position:center 57%;border-radius:20px;display:block}.setup-art p{font-size:12px;font-weight:700;margin:8px 0 0}.choice span{flex-direction:column;font-size:23px;gap:2px;line-height:1.15;min-height:62px}.choice small{font-size:12px}.game-setup fieldset{flex-shrink:0}.rules-note{margin:6px 0;font-size:10px}
#player-o{flex-direction:row-reverse}#player-o .player-score{flex-direction:row-reverse}.player img{width:52px;height:60px;border-radius:10px}.versus{font-size:17px}
.board-stage{position:relative}#pause-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff9eea6;border-radius:20px}#pause-overlay>span{font-size:32px}#pause-overlay strong{font-size:22px;letter-spacing:2px}#pause-overlay .primary{font-size:14px;min-height:44px}
#confirm .danger{background:#b9334c;color:white}.result-scoreboard{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 5px;border:1px solid #e3d7c8;border-radius:16px;background:#fffdf8}.result-scoreboard>div{display:flex;align-items:center;gap:5px}.result-scoreboard img{width:44px;height:48px;object-fit:contain;border-radius:9px}.result-scoreboard strong{font-size:27px}.result-scoreboard .mark-x,.result-scoreboard .mark-o{font-size:27px}.score-separator{font-size:14px;color:#786452}#result-character{width:auto;max-width:100%;height:140px;border-radius:16px}#result-title{font-size:31px}
@media(max-height:720px){.setup-art img{max-height:120px}.setup-art{margin-bottom:6px}.choice span{min-height:50px;font-size:20px}.setup-art p{font-size:11px;margin-top:4px}.game-setup{justify-content:flex-start}.player img{height:45px;width:43px}}
@media(orientation:landscape) and (max-height:540px){.game-setup{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 12px;align-content:center}.setup-art{grid-column:1;grid-row:1/6;margin:0}.setup-art img{max-height:180px}.game-setup fieldset{grid-column:2/4;grid-row:1}.game-setup .setting-row{grid-column:2/4;margin:0}.game-setup .rules-note{display:none}.game-setup .primary{grid-column:2/4;margin:0}.setting-row select{height:38px}.choice span{min-height:45px;flex-direction:row}.choice small{margin-left:4px}}
.portrait-frame{position:relative;width:52px;height:60px;overflow:hidden;border-radius:50%;flex-shrink:0;background:#e3f5f9}.player .portrait-frame img{position:absolute;width:200%;height:auto;max-width:none;left:-50%;top:-38%;border-radius:0;object-fit:initial}
@media(max-height:720px){.portrait-frame{width:43px;height:45px}}
/* Media must never dictate the size of the game viewport. */
.game-main,.game-setup,.setup-art,#play,.board-stage{min-width:0}
.game-main img{max-width:100%}
.setup-art{width:100%;max-width:100%;overflow:hidden;flex-shrink:0}
.setup-art img{width:100%;height:150px;max-width:100%;max-height:180px;object-fit:cover;object-position:center 55%}
.game-setup{overflow-x:hidden}
@media(max-height:720px){.setup-art img{height:110px!important;max-height:110px!important}}
@media(orientation:landscape) and (max-height:540px){.setup-art img{height:140px!important;max-height:140px!important}}

/* Stable setup: top-aligned options with an always-visible start action. */
#setup.game-setup{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;margin:0;padding:0;overflow:hidden;flex:1;min-height:0}
.setup-content{flex:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:2px 3px 12px;scrollbar-width:thin}
.setup-content>.setup-art{margin-top:0}
.setup-footer{flex:0 0 auto;padding:10px 3px 2px;background:var(--ivory);border-top:1px solid var(--line)}
#setup .setup-footer .primary{width:100%;margin:0;min-height:48px}
@media(orientation:landscape) and (max-height:540px){
 .setup-content{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 12px;align-content:start;align-items:start}
 .setup-content>.setup-art{grid-column:1;grid-row:1/5}
 .setup-content>fieldset{grid-column:2/4;grid-row:1}
 .setup-content>.setting-row{grid-column:2/4}
 .setup-footer{padding-top:5px}
}
.setting-row>.picker-trigger{max-width:62%;min-width:135px}
.player img.score-portrait{width:52px;height:60px;object-fit:contain;border-radius:0;position:static}
.turn-companion{display:none;flex-shrink:0;align-items:center;gap:8px;min-width:0;height:clamp(110px,21dvh,180px)}.turn-companion img{height:calc(100% - 8px);width:116px;object-fit:contain;flex-shrink:0}.turn-companion .bubble{flex:1;font-size:15px;line-height:1.45;padding:12px 13px;min-width:0;border-radius:15px 15px 15px 3px}
@media(max-width:960px){.turn-companion{display:flex}}
@media(max-height:650px){.turn-companion{height:96px}.turn-companion img{height:90px;width:76px}.turn-companion .bubble{font-size:13px;padding:8px 10px}.player img.score-portrait{width:43px;height:45px}}
@media(orientation:landscape) and (max-height:540px){#play{grid-template-rows:auto auto 1fr auto auto auto}.turn-companion{grid-column:1;grid-row:4;height:55px}.turn-companion img{height:52px;width:44px}.timer-row{grid-row:5}.game-actions{grid-row:6}.board-stage{grid-row:1/7}.setting-row>.picker-trigger{min-height:38px;padding:4px 8px}}

/* Keep the action inside the actual visible viewport, including standalone PWA. */
@media(max-width:520px){
 .tic-page .phone{position:fixed;top:0;left:0;bottom:auto;width:100%;max-width:none;margin:0;border:0;border-radius:0;height:var(--tic-viewport-height,100dvh);min-height:0}
 .tic-page .game-main{flex:1 1 0;min-height:0;overflow:hidden;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
 .tic-page #setup{flex:1 1 0;min-height:0}
 .tic-page .setup-content{flex:1 1 0;min-height:0}
 .tic-page .setup-footer{flex-shrink:0}
}

.setup-art img.game-banner{display:block;width:100%;height:auto!important;max-height:none!important;aspect-ratio:2/1;object-fit:contain;object-position:center;border-radius:20px}