:root{--stage-w:670px;--stage-h:1191px;--board-left:192px;--board-top:192px;--board-w:270px;--board-h:205px;--grid-color:#000;--x-color:#1d4ed8;--o-color:#e11d2e;--font:'Poppins','Segoe UI',sans-serif;--page-bg:#e9ebf0;--fg:#16181d;--muted:#6b7280;--card-bg:rgba(255,255,255,.85);--card-border:#d7dae1;--card-active-bg:rgba(238,242,255,.9);--card-active-border:#1d4ed8;--btn-bg:#16181d;--btn-fg:#fff;--btn-bg-hover:#2c2f36;--overlay-bg:rgba(10,11,15,.55);--panel-bg:#fff;--input-bg:#f2f3f6;--input-border:#d7dae1}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font);background:var(--page-bg);display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;overflow:hidden}.game-container{position:relative;width:var(--stage-w);height:var(--stage-h);flex:0 0 var(--stage-w);color:var(--fg);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);background-image:url(background.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;background-color:var(--page-bg);transform-origin:center center;transform:scale(var(--scale,1));transition:transform .1s ease-out}.game-header{position:absolute;top:40px;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center}.game-header h1{margin:0;font-size:28px;font-weight:700;letter-spacing:.5px}.player-info-container{position:absolute;top:108px;left:0;width:100%;display:flex;justify-content:center;gap:24px}.player-card{width:190px;padding:10px 12px;border-radius:12px;background:var(--card-bg);border:1px solid var(--card-border);text-align:center;transition:background .15s ease,border-color .15s ease}.player-card p{margin:0;font-size:14px;font-weight:600;color:var(--muted)}.player-card[data-my-turn=true]{background:var(--card-active-bg);border-color:var(--card-active-border)}.player-card[data-my-turn=true] p{color:var(--fg)}#p1name{color:var(--x-color)!important}#p2name{color:var(--o-color)!important}.player-card:not([data-my-turn=true]) p{opacity:.55}#game-status{position:absolute;top:160px;left:0;width:100%;text-align:center;font-size:15px;font-weight:600;color:var(--muted);min-height:20px}.board-container{position:absolute;top:var(--board-top);left:var(--board-left);width:var(--board-w);height:var(--board-h)}#board{width:100%;height:100%;border-collapse:collapse;table-layout:fixed;background:0 0}#board td{border:2.5px solid var(--grid-color);width:33.3333%;height:33.3333%;text-align:center;vertical-align:middle;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0}#board td .mark{display:inline-block;font-size:34px;font-weight:700;line-height:1}#board td .mark.x{color:var(--x-color)}#board td .mark.o{color:var(--o-color)}#board td.win-cell{background:rgba(255,214,10,.35)}#board td:not(.filled):hover{background:rgba(0,0,0,.08)}.controls-container{position:absolute;top:450px;left:0;width:100%;display:flex;justify-content:center;gap:16px}.control-btn{font-family:var(--font);font-size:14px;font-weight:600;padding:12px 22px;border-radius:10px;border:none;background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;transition:background .15s ease,transform .1s ease}.control-btn:hover{background:var(--btn-bg-hover)}.control-btn:active{transform:scale(.97)}.overlay{position:fixed;inset:0;background:var(--overlay-bg);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .15s ease;z-index:20}.overlay.active{opacity:1;visibility:visible}.settings-panel{position:relative;width:320px;max-width:90vw;background:var(--panel-bg);color:var(--fg);border-radius:16px;padding:28px 24px 24px}.settings-panel h2{margin:0 0 18px;font-size:19px}.setting-group{margin-bottom:18px}.setting-group h3{margin:0 0 8px;font-size:14px;color:var(--muted)}.setting-group label{display:block;font-size:12px;margin-bottom:4px;color:var(--muted)}.setting-group input[type=text]{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--fg);font-family:var(--font);font-size:14px;margin-bottom:10px}.ai-toggle{display:flex;align-items:center;gap:8px}.ai-toggle label{margin:0;font-size:13px;color:var(--fg)}.apply-btn{width:100%;margin-top:4px}.close-btn{position:absolute;top:10px;right:14px;background:0 0;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}.close-btn:hover{color:var(--fg)}