/* Tic-Tac-Toe / Five-in-a-row — matches the KidSafe Play pastel theme.
   The board is a dense N x N grid of small stones; if it's wider/taller than the
   screen, its wrapper scrolls. --cell controls the stone size. */
.game-page{position:relative;width:min(96vw,480px);margin:0 auto}   /* compact (mobile) by default; board scrolls inside — use the fullscreen button for the big view */
.game-page:fullscreen,.game-page:-webkit-full-screen{width:100vw;height:100vh;max-width:none;overflow:auto;padding:16px;background:radial-gradient(circle at 50% 0%,#cfeeff,#ffe3f1 60%,#fff7d6)}
.game-page:fullscreen .ttt-board-wrap,.game-page:-webkit-full-screen .ttt-board-wrap{max-width:none;max-height:none;overflow:visible}
.game-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.game-thumb{border-radius:16px;flex:none;box-shadow:0 6px 14px rgba(255,150,180,.25)}
.game-head h1{margin:0;font-size:26px;color:#5a4a6a;text-shadow:0 2px 0 #fff}
.game-head .sub{margin:2px 0 0;color:#9a86ad;font-size:14px}

.ttt-modes{display:flex;gap:8px;margin-bottom:14px}
.mode-btn{flex:1;cursor:pointer;font:inherit;font-size:14px;font-weight:800;color:#9a86ad;background:#fff;border:2px solid #ffe1ee;border-radius:999px;padding:9px}
.mode-btn.active{color:#fff;background:linear-gradient(180deg,#ffa9cf,#ff7eb3);border-color:#ff7eb3;box-shadow:0 4px 0 #ef5e98}

.ttt-levels{display:flex;gap:8px;justify-content:center;margin:0 0 14px}
.ttt-levels.hide{display:none}
.level-btn{cursor:pointer;font:inherit;font-size:13px;font-weight:800;color:#9a86ad;background:#fff;border:2px solid #ffe1ee;border-radius:999px;padding:7px 16px}
.level-btn.active{color:#fff;background:linear-gradient(180deg,#9bd0ff,#5fb8ff);border-color:#5fb8ff;box-shadow:0 3px 0 #3a93dd}

.ttt-status{text-align:center;font-weight:800;font-size:18px;color:#5a4a6a;margin:0 0 14px;min-height:24px}

.ttt-hint{text-align:center;color:#9a86ad;font-size:13px;margin:-6px 0 14px}

.ttt-board-wrap{max-width:100%;max-height:74vh;overflow:auto;margin:0 0 18px;padding:10px;border:3px solid #ffe1ee;border-radius:22px;background:#fff7fb;box-shadow:0 8px 18px rgba(255,150,180,.16);-webkit-overflow-scrolling:touch}
.ttt-board{--cell:40px;display:grid;gap:5px;width:max-content;margin:0 auto}
.ttt-cell{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;padding:0;font-weight:900;font-size:calc(var(--cell) * .6);line-height:1;cursor:pointer;color:#5a4a6a;background:#fff;border:2px solid #ffe1ee;border-radius:11px;transition:border-color .12s,background .12s}
.ttt-cell:hover{border-color:#ffc2da}
.ttt-cell.pX{color:#ff6f7d}
.ttt-cell.pO{color:#4ea8f0}
.ttt-cell.last{border-color:#ff9bb3;box-shadow:0 0 0 3px #ffe1ee}
.ttt-cell.win{background:#eafaf0;border-color:#7bd88f;color:#2e8b57}
@media(max-width:520px){.ttt-board{--cell:32px}}

.ttt-score{display:flex;gap:12px;justify-content:center;margin:0 0 16px}
.score-card{flex:1;text-align:center;background:#fff;border:2px solid #ffe1ee;border-radius:18px;padding:12px 8px;box-shadow:0 6px 14px rgba(255,150,180,.14)}
.score-label{display:block;font-size:13px;font-weight:800;color:#9a86ad;margin-bottom:4px}
.score-val{display:block;font-size:28px;font-weight:900;line-height:1}
.score-val.x{color:#ff6f7d}
.score-val.d{color:#f0b429}
.score-val.o{color:#4ea8f0}

.ttt-modal{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(106,90,122,.45);z-index:50}
.ttt-modal[hidden]{display:none}
.ttt-dialog{width:100%;max-width:330px;text-align:center;background:#fff;border:3px solid #ffe1ee;border-radius:24px;padding:26px 24px;box-shadow:0 18px 44px rgba(255,150,180,.4);animation:tttPop .18s ease-out}
@keyframes tttPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.ttt-emoji{font-size:54px;line-height:1;margin-bottom:6px}
.ttt-dialog h2{margin:0 0 4px;font-size:24px;color:#5a4a6a}
.ttt-dialog p{margin:0 0 18px;color:#9a86ad;font-size:15px}
.ttt-dialog-btns{display:flex;gap:10px}
.ttt-dialog-btns .btn{flex:1;margin-top:0}