*{box-sizing:border-box}
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#171717;background:#f5f5f3}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0,#fff 0,#f5f5f3 42%,#ecece8 100%)}
button{font:inherit;-webkit-tap-highlight-color:transparent}
.shell{width:min(920px,calc(100% - 32px));margin:0 auto;padding:54px 0 80px}
header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:28px}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;margin:0 0 8px;color:#737373}
h1{font-size:clamp(34px,6vw,62px);letter-spacing:-.055em;line-height:.95;margin:0}
.sub{color:#686868;margin:14px 0 0}
.status{display:flex;align-items:center;gap:8px;font-size:13px;color:#666;background:#fff;border:1px solid #deded9;border-radius:999px;padding:9px 13px}
#dot{width:8px;height:8px;border-radius:50%;background:#aaa}
.panel{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border:1px solid #deded9;border-radius:24px;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.06)}
.hidden{display:none!important}
.games{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.game-card{text-align:left;border:1px solid #deded9;background:#fafafa;border-radius:18px;padding:24px;cursor:pointer;transition:.18s transform,.18s border-color,.18s box-shadow;color:inherit}
.game-card:hover{transform:translateY(-2px);border-color:#aaa;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.game-card .icon{display:block;font-size:28px;letter-spacing:.08em;margin-bottom:28px}
.game-card strong{display:block;font-size:22px}
.game-card small{display:block;margin-top:5px;color:#777}
.server-stat{margin-top:18px;font-size:13px;color:#777}
.spinner{width:42px;height:42px;border:4px solid #e5e5e5;border-top-color:#222;border-radius:50%;animation:spin .8s linear infinite;margin:16px auto 24px}
@keyframes spin{to{transform:rotate(360deg)}}
#waiting{text-align:center;padding:50px 24px}
button.secondary{border:1px solid #ccc;background:white;border-radius:11px;padding:10px 16px;cursor:pointer}
.game-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.game-head h2{margin:0}
.game-head p{margin:5px 0 0;color:#777;font-size:14px}
.badge{background:#ececec;border-radius:999px;padding:8px 12px;font-size:13px;white-space:nowrap}
.badge.active{font-weight:750;background:#e8f6ec}
.board{display:grid;margin:0 auto;max-width:700px;aspect-ratio:1;border:1px solid #bbb;background:#e7c98b;user-select:none;touch-action:manipulation}
.board.ttt{grid-template-columns:repeat(3,1fr);max-width:500px;background:#fff}
.board.gomoku{grid-template-columns:repeat(15,1fr)}
.cell{position:relative;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0;min-width:0;min-height:0}
.board.locked .cell{cursor:default}
.ttt .cell{border-right:1px solid #ddd;border-bottom:1px solid #ddd;font-size:clamp(48px,12vw,100px);font-weight:300}
.ttt .cell:nth-child(3n){border-right:0}
.ttt .cell:nth-last-child(-n+3){border-bottom:0}
.board.gomoku{border:0;padding:0;background:#e7c98b;box-shadow:0 0 0 1px #b28e53;}
.gomoku .cell::before,.gomoku .cell::after{content:"";position:absolute;background:rgba(80,55,20,.55);pointer-events:none}
.gomoku .cell::before{height:1px;left:0;right:0;top:50%}
.gomoku .cell::after{width:1px;top:0;bottom:0;left:50%}
.gomoku .cell:nth-child(15n+1)::before{left:50%}
.gomoku .cell:nth-child(15n)::before{right:50%}
.gomoku .cell:nth-child(-n+15)::after{top:50%}
.gomoku .cell:nth-last-child(-n+15)::after{bottom:50%}
.gomoku .stone{z-index:1;width:78%;height:78%;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.stone.black{background:#202020}
.stone.white{background:#f7f7f2;border:1px solid #aaa}
.cell.selected::selection{background:transparent}
.ttt .cell.selected{background:#eef6e9}
.gomoku .cell.selected .preview{display:block}
.gomoku .cell.selected::selection{background:transparent}
.gomoku .cell.selected{background:radial-gradient(circle at center,rgba(30,30,30,.34) 0 30%,transparent 32%)}
.game-actions,.request-panel{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:16px auto}
.request-panel{padding:12px;border:1px solid #d7d7d0;border-radius:12px;background:#f8f8f5}
button.primary{border:0;background:#202020;color:white;border-radius:11px;padding:11px 17px;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.message{text-align:center;min-height:26px;font-weight:650;margin:18px 0 10px}
#back{display:block;margin:0 auto}
@media(max-width:640px){
  .shell{width:min(100% - 20px,920px);padding:24px 0 44px}
  .games{grid-template-columns:1fr}
  header{display:block}
  .status{margin-top:18px;width:max-content}
  .panel{padding:16px;border-radius:20px}
  .game-head{align-items:flex-start}
}
.header-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.math-pick{margin-top:22px;border-top:1px solid #e3e3df;padding-top:12px}
.math-pick h2{margin:8px 0}.math-pick p{color:#666;margin:0 0 12px}
.level-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.level-buttons .game-card{padding:16px}.level-buttons .game-card strong{font-size:18px}
.game-actions{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;justify-items:start;width:100%}
.game-actions #confirmMove{grid-column:3;justify-self:end;white-space:nowrap}
.board{width:min(100%,500px,calc(100dvh - 290px));min-width:0;max-height:500px}
.board.gomoku{width:min(100%,700px,calc(100dvh - 290px));max-height:700px}
.math-play{text-align:center;min-height:230px}.math-play h3{font-size:clamp(21px,4vw,32px)}
.math-play input{width:min(150px,45vw);font:inherit;padding:10px;border:1px solid #bbb;border-radius:8px}
.math-play form{display:flex;gap:9px;justify-content:center}
#mathClock{color:#9d3a17;font-weight:750;margin-top:10px}
#authDialog{border:1px solid #ddd;border-radius:18px;padding:26px;width:min(420px,calc(100% - 30px));box-shadow:0 25px 80px #0003}
#authDialog::backdrop{background:#0006}
#authDialog label{display:block;margin:12px 0}
#authDialog label input{display:block;width:100%;padding:10px;margin-top:5px;border:1px solid #aaa;border-radius:8px}
.auth-actions{display:flex;gap:7px;flex-wrap:wrap}
#authError{color:#b00020;min-height:20px}
@media(max-width:640px){.level-buttons{grid-template-columns:1fr}.level-buttons .game-card{padding:12px}.header-right{justify-content:flex-start;margin-top:12px}.board,.board.gomoku{width:min(100%,calc(100dvh - 270px));max-height:none}.game-actions{gap:5px}.game-actions button{font-size:12px;padding:9px 7px}.game-actions #confirmMove{padding:9px 12px}}
@media(max-height:650px){.shell{padding-top:12px}.shell header{margin-bottom:10px}.game-head{margin-bottom:7px}.board,.board.gomoku{width:min(100%,calc(100dvh - 245px))}.message{margin:7px 0}}