:root{--bg-dark: #121416;--panel-bg: #1a1d20;--tile-bg: #22262a;--tile-border: rgba(255, 255, 255, .08);--tile-hover: #2c3137;--color-x: #7ec8e3;--color-o: #f4ab7c;--text-main: #f0f4f8;--text-muted: #8e98a5;--btn-border: rgba(255, 255, 255, .16);--btn-hover: rgba(255, 255, 255, .08);--accent-green: #4cd964;--accent-red: #ff5555;--font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--panel-bg)}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#7ec8e366}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-family);min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:20px 16px;overflow-x:hidden}#app{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:16px;margin:0 auto}.app-topbar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 2px}.app-title{font-size:1.45rem;font-weight:800;letter-spacing:2.5px;color:var(--text-main);text-transform:uppercase;text-align:left}.icon-btn{background:transparent;border:1px solid var(--btn-border);color:var(--text-main);width:38px;height:38px;border-radius:10px;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:1rem;transition:all .2s cubic-bezier(.16,1,.3,1);touch-action:manipulation;position:relative;overflow:hidden}.icon-btn:hover{background-color:var(--btn-hover);border-color:var(--color-x);box-shadow:0 0 10px #7ec8e326}.icon-btn:active{transform:scale(.92) translateY(1px)}#start-screen-container{width:100%}#game-view-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}.start-screen-card{background:var(--panel-bg);border:1px solid var(--tile-border);border-radius:16px;padding:22px 20px;width:100%;display:flex;flex-direction:column;gap:18px;align-items:flex-start;text-align:left;box-shadow:0 10px 30px #0000004d}.start-welcome{text-align:left;width:100%}.start-welcome h2{font-size:1.15rem;font-weight:700;letter-spacing:.5px;margin-bottom:2px}.start-subtitle{font-size:.8rem;color:var(--text-muted);font-weight:400}.name-prompt-box{width:100%;display:flex;flex-direction:column;gap:6px}.input-label{font-size:.72rem;color:var(--text-muted);letter-spacing:1px;font-weight:700;text-align:left;text-transform:uppercase}.minimal-input{background:var(--tile-bg);border:1px solid var(--tile-border);color:var(--text-main);padding:11px 14px;border-radius:10px;font-size:.92rem;outline:none;width:100%;font-family:var(--font-family);transition:border-color .2s,box-shadow .2s}.minimal-input:focus{border-color:var(--color-x);box-shadow:0 0 10px #7ec8e326}.mode-select-group{width:100%;display:flex;flex-direction:column;gap:8px}.mode-card-option{background:var(--tile-bg);border:1px solid var(--tile-border);border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .2s cubic-bezier(.16,1,.3,1);touch-action:manipulation}.mode-card-option:hover{background:var(--tile-hover);border-color:#fff3}.mode-card-option:active{transform:scale(.97)}.mode-card-option.selected{border-color:var(--color-x);background:#7ec8e314}.mode-card-info h3{font-size:.88rem;font-weight:700;text-align:left}.mode-card-info p{font-size:.74rem;color:var(--text-muted);text-align:left;margin-top:2px}.primary-start-btn{width:100%;padding:13px;font-size:.92rem;font-weight:700;letter-spacing:1.5px;background:var(--tile-bg);border:1px solid var(--color-x);color:var(--color-x);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);touch-action:manipulation}.primary-start-btn:hover{background:#7ec8e326;box-shadow:0 4px 14px #7ec8e340;transform:translateY(-1px)}.primary-start-btn:active{transform:scale(.96) translateY(1px)}#status-header-container{width:100%;display:flex;flex-direction:column;gap:10px}.session-score-bar{background:var(--panel-bg);border:1px solid var(--tile-border);border-radius:12px;padding:10px 16px;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600}.score-player{display:flex;align-items:center;gap:6px}.score-player strong{font-size:1.1rem;font-weight:800}.score-divider{color:var(--text-muted);font-weight:700}.header-status{background:var(--panel-bg);border:1px solid var(--tile-border);border-radius:12px;padding:10px 14px;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:.84rem}.status-main{color:var(--text-main);font-weight:600;text-align:left}.next-vanish-label{color:var(--text-muted);font-weight:400}.next-vanish-label strong{color:var(--color-o);font-weight:700}.timer-badge{font-weight:800;font-size:.88rem;font-family:var(--font-family);background:#ffffff0d;padding:2px 8px;border-radius:6px}#board-view-container{width:100%}.grid-container{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;width:100%;aspect-ratio:1 / 1;margin:0 auto}.grid-tile{background-color:var(--tile-bg);border:1px solid var(--tile-border);border-radius:14px;cursor:pointer;display:flex;justify-content:center;align-items:center;aspect-ratio:1 / 1;width:100%;height:100%;position:relative;transition:all .18s cubic-bezier(.16,1,.3,1);padding:8px;touch-action:manipulation}.grid-tile:hover:not(:disabled){background-color:var(--tile-hover);border-color:#fff3;transform:translateY(-1px)}.grid-tile:active:not(:disabled){transform:scale(.94)}.grid-tile:disabled{cursor:default}.tile-winning{border-color:var(--accent-green)!important;box-shadow:0 0 16px #4cd96466}.tile-vanished-flash{animation:vanishDissolve .4s ease-out}@keyframes vanishDissolve{0%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.2}to{transform:scale(1);opacity:1}}.vanishing-pulse{animation:pulseDim 1.8s infinite ease-in-out}@keyframes pulseDim{0%,to{opacity:.35}50%{opacity:.18}}.symbol-svg{width:100%;height:100%;transition:opacity .3s ease}#controls-container{width:100%}.controls-wrapper{width:100%;display:flex;gap:10px;justify-content:center;align-items:center}.minimal-btn{background:transparent;border:1px solid var(--btn-border);color:var(--text-main);padding:8px 16px;border-radius:8px;font-size:.8rem;font-weight:700;letter-spacing:.8px;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);font-family:var(--font-family);touch-action:manipulation;position:relative;overflow:hidden}.minimal-btn:hover{background-color:var(--btn-hover);border-color:#fff6;transform:translateY(-1px)}.minimal-btn:active{transform:scale(.95) translateY(1px)}.accent-btn{border-color:var(--color-x);color:var(--color-x)}.accent-btn:hover{background:#7ec8e31f}.small-btn{padding:6px 12px;font-size:.78rem}#lobby-container{width:100%}.lobby-card,.lobby-room-info{background:var(--panel-bg);border:1px solid var(--tile-border);border-radius:12px;padding:14px;width:100%;display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left}.lobby-title{font-size:.85rem;letter-spacing:1px;color:var(--text-muted);font-weight:700}.lobby-actions,.join-box{display:flex;gap:8px;align-items:center;width:100%;justify-content:flex-start;flex-wrap:wrap}.players-info{display:flex;gap:16px;align-items:center}.player-tag{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600}.symbol-badge{font-weight:800;padding:2px 6px;border-radius:4px}.symbol-X{color:var(--color-x);background:#7ec8e31f}.symbol-O{color:var(--color-o);background:#f4ab7c1f}.copy-hint{font-size:.7rem;color:var(--text-muted);margin-left:6px;cursor:pointer}.swap-banner{font-size:.8rem;color:var(--color-o);display:flex;align-items:center;gap:8px}.hidden{display:none!important}.modal-container{position:fixed;inset:0;display:none;justify-content:center;align-items:center;z-index:1000;padding:16px}.modal-container.active{display:flex}.modal-backdrop{position:absolute;inset:0;background:#000c;backdrop-filter:blur(6px)}.modal-content{position:relative;background:var(--panel-bg);border:1px solid var(--tile-border);border-radius:16px;width:100%;max-width:380px;padding:22px;z-index:1001;display:flex;flex-direction:column;gap:16px;box-shadow:0 16px 40px #0006}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:1.1rem;font-weight:800;letter-spacing:1px}.close-btn{background:transparent;border:none;color:var(--text-muted);font-size:1.6rem;cursor:pointer;line-height:1}.end-screen-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}.end-icon{font-size:2.8rem}.end-title{font-size:1.45rem;font-weight:800;letter-spacing:1px}.end-subtitle{font-size:.84rem;color:var(--text-muted)}.end-actions{display:flex;gap:8px;width:100%;justify-content:center;margin-top:6px;flex-wrap:wrap}.settings-group{display:flex;flex-direction:column;gap:14px}.setting-row{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;font-weight:600}.toggle-switch{position:relative;display:inline-block;width:42px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--tile-bg);border:1px solid var(--tile-border);transition:.2s;border-radius:24px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:var(--text-muted);transition:.2s;border-radius:50%}input:checked+.slider{background-color:#7ec8e333;border-color:var(--color-x)}input:checked+.slider:before{transform:translate(18px);background-color:var(--color-x)}.table-wrapper{max-height:280px;overflow-y:auto;overflow-x:hidden}.leaderboard-table{width:100%;border-collapse:collapse;font-size:.84rem;text-align:left}.leaderboard-table th,.leaderboard-table td{padding:9px 6px;border-bottom:1px solid var(--tile-border)}.leaderboard-table th{color:var(--text-muted);font-size:.72rem;letter-spacing:1px;font-weight:700}.col-rank{color:var(--color-x);font-weight:700}.col-name{font-weight:600;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-elo{color:var(--accent-green);font-weight:700}.empty-row{text-align:center;color:var(--text-muted);padding:20px!important}.shimmer-line{height:16px;width:100%;background:linear-gradient(90deg,#22262a 25%,#2c3137,#22262a 75%);background-size:200% 100%;animation:shimmer 1.4s infinite ease-in-out;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media (max-width: 360px){#app,#game-view-container{gap:12px}.app-title{font-size:1.25rem;letter-spacing:1.5px}.grid-container{gap:8px}.minimal-btn{padding:7px 10px;font-size:.72rem}}