.page{width:min(820px,calc(100% - 28px))}
.top{padding:15px 0;min-height:76px}
.game-brand-mark img{width:100%;height:100%;object-fit:contain}
.intro{margin:12px 0 22px}
.intro h1{font-size:clamp(2.3rem,6vw,3.6rem)}
.match-card{padding:20px;border:1px solid var(--border);border-radius:24px;background:#fffdf9;box-shadow:0 8px 30px #310f2f08;margin:0 auto 24px}
.level-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
.level-picker button{display:grid;gap:5px;min-height:64px;padding:10px 5px;border:2px solid #e4dce4;border-radius:14px;background:white;color:#59485a}
.level-picker strong{font-size:1rem}
.level-picker small{font-size:.77rem}
.level-picker [aria-pressed="true"]{background:#efe3fa;border-color:#8624b1;color:#64168e}
.match-status{display:grid;justify-items:center;gap:5px;margin:0 0 12px;text-align:center}
.match-status>span{font-size:.78rem;color:#756477}
.match-status>strong{font-size:1rem;color:#310f2f}
.game-start-row{display:flex;justify-content:center;margin:12px 0 18px}
.game-start-row:has(#start[hidden]):has(#cancel[hidden]){display:none}
.board-wrap{position:relative;width:fit-content;max-width:100%;margin:auto}
.board-viewport{width:min(460px,calc(100vw - 72px),calc(100dvh - 220px));aspect-ratio:1;overflow:auto;overscroll-behavior:contain;touch-action:none;border:2px solid #284c41;border-radius:15px;background:#153d32;scrollbar-width:thin;scrollbar-color:#8caf9e #153d32}
.board{display:grid;grid-template-columns:repeat(var(--size,5),var(--cell-size,50px));grid-auto-rows:var(--cell-size,50px);width:max-content;background:#153d32;padding:0;user-select:none;-webkit-user-select:none}
.board .board-cell{display:grid;place-items:center;width:var(--cell-size);height:var(--cell-size);min-width:0;min-height:0;padding:0;margin:0;border:0;border-right:1px solid #7197896b;border-bottom:1px solid #7197896b;border-radius:0;background:#153d32;color:white;font-family:'Nunito',system-ui,sans-serif;font-size:calc(var(--cell-size)*.74);font-weight:1000;line-height:1;touch-action:none;-webkit-tap-highlight-color:transparent}
.board-cell[data-mark="X"]{color:#ff7970;text-shadow:0 2px #0b211c}
.board-cell[data-mark="O"]{color:#fffdf7}
.board-cell[aria-disabled="false"]:hover{background:#265547}
.board-cell:focus-visible{outline:3px solid #f4d364;outline-offset:-4px;z-index:1;background:#275346}
.board-cell.winning{background:#327b52;box-shadow:inset 0 0 0 2px #a6e99f}
.zoom-controls{display:flex;justify-content:center;align-items:center;gap:7px;margin:10px auto 0}
.zoom-controls button,#cancel{min-width:44px;min-height:44px;border:1px solid #d6c9dc;border-radius:11px;background:#fff;color:#64168e;font-weight:800;padding:8px 12px}
.zoom-controls button:disabled{opacity:.45}
.zoom-controls button:is(#zoom-in,#zoom-out){padding:0;font-size:1.4rem}
.zoom-controls output{min-width:70px;text-align:center;font-size:.76rem;color:#59485a}
.board-help{max-width:48ch;margin:8px auto 0;text-align:center;color:#746377;font-size:.74rem;line-height:1.5}
.message{margin:14px 0 0;text-align:center;color:#59485a;font-size:.85rem;line-height:1.45}
.save-status{margin:7px 0 0;color:#687469;text-align:center;font-size:.74rem;line-height:1.4}
.save-status:empty{display:none}
.terminal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;width:88%;max-width:340px;padding:16px 12px;border:2px solid #8bc997;border-radius:20px;background:#f5fff2f2;color:#226437;box-shadow:0 12px 35px #0b211c65;text-align:center;pointer-events:none}
.terminal strong{font-size:clamp(3.5rem,12vw,6rem);line-height:1;font-weight:1000}
.terminal p{margin:0;font-weight:850;font-size:1.1rem}
.terminal small{font-size:.76rem}
.terminal[data-outcome="loss"]{background:#fff4f0f5;color:#a33535;border-color:#dc8e80}
.terminal[data-outcome="draw"]{background:#f5f2fff5;color:#654b81;border-color:#baabd5}
.match-ranking{display:grid;gap:8px;list-style:none;padding:0}
.match-ranking li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:12px;border-radius:12px;background:#f5f0f7}
.match-ranking li.current{outline:2px solid #8624b1}
.match-ranking small{grid-column:1/-1;font-size:.76rem;color:#756477}
.match-ranking strong{overflow-wrap:anywhere}
.game-result-card small{display:block;color:#756477;font-size:.75rem;margin-bottom:8px}
.game-back,.game-new-player{min-height:44px;align-content:center}
.game-skip-link{position:absolute;left:-10000px;top:0}
.game-skip-link:focus{left:12px;z-index:100;background:white;padding:12px}

html[data-piskvorky-active="true"] #game-view>.intro,html[data-piskvorky-active="true"] .board-help,html[data-piskvorky-active="true"] .page>footer{display:none}
html[data-piskvorky-active="true"] .match-card{margin-bottom:0}
html[data-piskvorky-active="true"] .message{font-size:.75rem;margin-top:9px}

@media(max-width:600px){.page{width:calc(100% - 20px)}
.top{min-height:60px;padding:7px 0;gap:5px}
.game-brand-copy strong{font-size:1.05rem}
.game-brand-copy small{font-size:.65rem}
.header-actions{gap:1px}
#cancel{font-size:.75rem;padding:7px}
.match-card{padding:10px;border-radius:18px}
.intro{margin:10px 0 18px}
.intro p:not(.kicker){font-size:.9rem}
.level-picker{gap:5px}
.level-picker button{min-height:60px}
.level-picker strong{font-size:.9rem}
.level-picker small{font-size:.65rem}
.board-viewport{width:min(calc(100vw - 44px),calc(100dvh - 202px),460px)}
.match-status strong{font-size:.87rem}
.match-status>span{font-size:.72rem}
.match-status{margin-bottom:9px}
.zoom-controls{gap:5px;margin-top:8px}
.zoom-controls button{padding:6px 9px}
.zoom-controls output{min-width:64px}
.terminal{padding:12px 8px}
.terminal p{font-size:1rem}
html[data-piskvorky-active="true"] .match-card{padding:8px}
.game-result-card{padding:16px}
}

@media(prefers-reduced-motion:no-preference){.level-picker button{transition:background-color .15s,border-color .15s}
}


/* Keep the shared START beneath the board, including the next finished match. */
html:is([data-piskvorky-phase="won"],[data-piskvorky-phase="draw"]) .message{display:none}



/* The game's configuration stays in place while its controls are locked. */
.mark-x,.mark-o{display:inline-grid;place-items:center;min-width:1.5em;padding:0 .2em;border-radius:5px;background:#153d32;font-family:'Nunito',system-ui,sans-serif;font-weight:1000;line-height:1.3}
.mark-x{color:#ff7970}
.mark-o{color:#fffdf7}

.level-picker button:disabled{opacity:.58;cursor:default}
.level-picker button:disabled[aria-pressed="true"]{opacity:.85}

html[data-piskvorky-active="true"] #game-view>[data-profile-card]{margin:0 0 8px;padding:6px;border-radius:14px}

html[data-piskvorky-active="true"] [data-profile-card] :is(.game-profile-heading,p,.game-new-player){display:none}

html[data-piskvorky-active="true"] .game-profile-list{display:flex;gap:6px;overflow-x:auto;padding:2px;scrollbar-width:thin}

html[data-piskvorky-active="true"] .game-profile-option{flex:0 0 144px;min-height:48px;padding:5px 8px;grid-template-columns:28px minmax(0,1fr);column-gap:6px}

html[data-piskvorky-active="true"] .game-profile-avatar{width:28px;height:28px}

html[data-piskvorky-active="true"] .game-profile-option strong{font-size:.8rem}

html[data-piskvorky-active="true"] .game-profile-option>span:not([class]){font-size:.64rem}

html[data-piskvorky-active="true"] .match-card{padding:8px}

html[data-piskvorky-active="true"] .level-picker{margin-bottom:8px}

html[data-piskvorky-active="true"] .level-picker button{min-height:48px;padding:6px 3px;gap:3px}

html[data-piskvorky-active="true"] .match-status{gap:3px;margin-bottom:8px}

html[data-piskvorky-active="true"] .board-viewport{width:min(460px,calc(100vw - 44px),max(150px,calc(100dvh - 404px)))}

html[data-piskvorky-active="true"] .game-start-row{margin:10px 0 0}

html[data-piskvorky-active="true"] .message{display:none}

#cancel{min-width:140px;min-height:44px;box-shadow:none;background:#fcfaf6;color:#59485a;border-color:#cbbdce;font-size:.86rem}

@media(max-width:600px){html[data-piskvorky-active="true"] .board-viewport{width:min(calc(100vw - 44px),max(150px,calc(100dvh - 370px)),460px)}
html:is([data-piskvorky-phase="won"],[data-piskvorky-phase="draw"]) .board-viewport{width:min(calc(100vw - 44px),max(150px,calc(100dvh - 400px)),460px)}
}