:root{--bg:var(--tg-theme-bg-color,#1a1a2e);--text:var(--tg-theme-text-color,#fff);--hint:var(--tg-theme-hint-color,#8e8e93);--link:var(--tg-theme-link-color,#64b5f6);--btn:var(--tg-theme-button-color,#5865f2);--btn-text:var(--tg-theme-button-text-color,#fff);--secondary-bg:var(--tg-theme-secondary-bg-color,#16213e);--card-bg:rgba(255,255,255,.06);--border:rgba(255,255,255,.1);--success:#4caf50;--danger:#f44336;--warning:#ff9800;--x-color:#ff6b6b;--o-color:#4ecdc4;--ai-color:#bb86fc;--rematch-color:#ff9800;--undo-color:#64b5f6}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;user-select:none}
.screen{display:none;min-height:100vh;padding:16px;flex-direction:column}.screen.active{display:flex}
.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px}
.loader{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--btn);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn{border:none;border-radius:12px;padding:14px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.btn:active{transform:scale(.97)}
.btn-primary{background:var(--btn);color:var(--btn-text)}.btn-ai{background:linear-gradient(135deg,#7c4dff,#bb86fc);color:#fff}.btn-secondary{background:var(--card-bg);color:var(--text);border:1px solid var(--border)}.btn-danger{background:var(--danger);color:#fff}.btn-large{padding:18px 32px;font-size:18px;width:100%;border-radius:16px}.btn-small{padding:8px 16px;font-size:13px;border-radius:8px}.btn-back{background:none;border:none;color:var(--link);font-size:16px;cursor:pointer;padding:8px 0}
.btn-rematch{background:linear-gradient(135deg,#ff9800,#ff5722);color:#fff;animation:rematchGlow 2s ease-in-out infinite}
@keyframes rematchGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,152,0,.4)}50%{box-shadow:0 0 20px 4px rgba(255,152,0,.3)}}
.btn-accept{background:var(--success);color:#fff;flex:1}.btn-decline{background:var(--card-bg);color:var(--text);border:1px solid var(--border);flex:1}

/* UNDO BUTTON */
.btn-undo{background:rgba(100,181,246,.15);color:var(--undo-color);border:1px solid rgba(100,181,246,.3);position:relative;gap:6px}
.btn-undo:hover{background:rgba(100,181,246,.25)}
.btn-undo:active{transform:scale(.95)}
.btn-undo.disabled{opacity:.3;pointer-events:none}
.btn-undo.waiting{background:rgba(100,181,246,.1);animation:undoPulse 1.5s ease infinite}
@keyframes undoPulse{0%,100%{opacity:.6}50%{opacity:1}}
.undo-badge{background:var(--undo-color);color:#000;font-size:11px;font-weight:700;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.undo-badge.empty{background:var(--danger)}

/* UNDO INCOMING */
.undo-incoming{display:none;align-items:center;gap:8px;padding:10px 14px;background:rgba(100,181,246,.12);border:2px solid var(--undo-color);border-radius:12px;margin-bottom:4px;animation:fadeIn .3s ease;flex-wrap:wrap;justify-content:center}
.undo-incoming.visible{display:flex}
.undo-incoming-text{font-size:14px;font-weight:600;color:var(--undo-color);flex:1;min-width:150px;text-align:center}
.undo-incoming-buttons{display:flex;gap:8px}
.undo-incoming-buttons .btn{padding:6px 14px;font-size:13px;border-radius:8px}
.undo-timer-bar{width:100%;height:3px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:4px}
.undo-timer-fill{height:100%;background:var(--undo-color);border-radius:3px;width:100%;transition:width .3s linear}

/* UNDO TOAST */
.undo-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:rgba(100,181,246,.2);border:2px solid var(--undo-color);border-radius:20px;padding:16px 28px;font-size:18px;font-weight:700;color:var(--undo-color);z-index:2000;pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:undoToast .8s ease forwards}
@keyframes undoToast{0%{transform:translate(-50%,-50%) scale(0);opacity:0}30%{transform:translate(-50%,-50%) scale(1.1);opacity:1}50%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}

.menu-header{display:flex;align-items:center;gap:16px;padding:20px;background:var(--card-bg);border-radius:20px;margin-bottom:20px;border:1px solid var(--border)}.user-avatar{width:60px;height:60px;border-radius:50%;background:var(--btn);display:flex;align-items:center;justify-content:center;font-size:28px}.user-info h2{font-size:20px;margin-bottom:6px}.user-rating{display:flex;gap:10px}.rating-badge,.rank-badge{background:var(--card-bg);padding:4px 10px;border-radius:8px;font-size:14px;border:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}.stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:14px 8px;text-align:center}.stat-value{font-size:22px;font-weight:700;margin-bottom:4px}.stat-label{font-size:11px;color:var(--hint);text-transform:uppercase;letter-spacing:.5px}.menu-buttons{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-bottom:20px}
.difficulty-container{display:flex;flex-direction:column;flex:1;gap:16px}.difficulty-container h2{text-align:center;font-size:24px;margin-top:8px}.difficulty-hint{text-align:center;color:var(--hint);font-size:14px}.difficulty-cards{display:flex;flex-direction:column;gap:12px;margin-top:12px;flex:1;justify-content:center}.diff-card{display:flex;align-items:center;gap:16px;padding:20px;border-radius:16px;border:2px solid var(--border);background:var(--card-bg);cursor:pointer;transition:all .2s;text-align:left}.diff-card:active{transform:scale(.98)}.diff-card.diff-easy:hover{border-color:var(--success);background:rgba(76,175,80,.1)}.diff-card.diff-medium:hover{border-color:var(--warning);background:rgba(255,152,0,.1)}.diff-card.diff-hard:hover{border-color:var(--danger);background:rgba(244,67,54,.1)}.diff-icon{font-size:40px;flex-shrink:0}.diff-info{display:flex;flex-direction:column;gap:4px}.diff-title{font-size:18px;font-weight:700;color:var(--text)}.diff-desc{font-size:13px;color:var(--hint);line-height:1.4}
.searching-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:20px}.searching-animation{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;width:100%;height:100%;border:3px solid var(--btn);border-radius:50%;animation:pulse 2s ease-out infinite;opacity:0}.pulse-ring.delay{animation-delay:1s}@keyframes pulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.5);opacity:0}}.searching-icon{font-size:48px;animation:bounce 1s ease infinite}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.searching-hint{color:var(--hint);font-size:14px}
.game-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0;margin-bottom:4px;gap:6px}.player-info{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:var(--card-bg);border:2px solid transparent;flex:1;min-width:0}.player-info.current-turn{border-color:var(--btn);box-shadow:0 0 12px rgba(88,101,242,.3)}.player-info.is-ai-player{border-color:var(--ai-color)}.player-info.is-ai-player.current-turn{border-color:var(--ai-color);box-shadow:0 0 12px rgba(187,134,252,.3)}.player-mark{font-size:18px;flex-shrink:0}.player-details{display:flex;flex-direction:column;min-width:0;flex:1}.player-details.right{text-align:right;align-items:flex-end}.player-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-rating-small{font-size:10px;color:var(--hint)}.turn-indicator{padding:4px 8px;background:var(--btn);border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0}
.ai-thinking{display:none;align-items:center;justify-content:center;gap:10px;padding:8px 16px;background:rgba(187,134,252,.15);border:1px solid rgba(187,134,252,.3);border-radius:12px;margin-bottom:4px;font-size:14px;color:var(--ai-color)}.ai-thinking.visible{display:flex}.thinking-dots{display:flex;gap:4px}.thinking-dots span{width:8px;height:8px;border-radius:50%;background:var(--ai-color);animation:thinkingBounce 1.2s ease-in-out infinite}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}@keyframes thinkingBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
.player-timer{position:relative;width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.player-timer.hidden{display:none}.timer-svg{width:100%;height:100%;transform:rotate(-90deg)}.timer-bg{fill:none;stroke:var(--border);stroke-width:2.5}.timer-ring{fill:none;stroke:var(--success);stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .3s ease}.timer-ring.time-ok{stroke:var(--success)}.timer-ring.time-warning{stroke:var(--warning)}.timer-ring.time-danger{stroke:var(--danger);animation:timerPulse .5s ease infinite}@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.5}}.timer-text{position:absolute;font-size:13px;font-weight:700;color:var(--text)}.timer-text.time-warning{color:var(--warning)}.timer-text.time-danger{color:var(--danger);animation:timerPulse .5s ease infinite}.player-timer.inactive{opacity:.3}.player-timer.inactive .timer-ring{animation:none}
.emoji-bar{display:flex;justify-content:center;gap:4px;padding:6px 0;flex-wrap:wrap}.emoji-btn{width:38px;height:38px;border:none;border-radius:10px;background:var(--card-bg);font-size:20px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;border:1px solid transparent}.emoji-btn:hover{background:rgba(255,255,255,.12);border-color:var(--border)}.emoji-btn:active{transform:scale(.85)}.emoji-btn.on-cooldown{opacity:.3;pointer-events:none}.emoji-btn.flash{animation:emojiFlash .3s ease}@keyframes emojiFlash{0%{background:var(--card-bg)}50%{background:rgba(255,255,255,.25);transform:scale(1.15)}100%{background:var(--card-bg);transform:scale(1)}}
.emoji-float-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.emoji-float{position:absolute;font-size:48px;animation:emojiFloat 2s ease-out forwards;pointer-events:none;z-index:1001;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}@keyframes emojiFloat{0%{opacity:1;transform:scale(.3) translateY(0)}20%{opacity:1;transform:scale(1.2) translateY(-20px)}40%{transform:scale(1) translateY(-60px)}100%{opacity:0;transform:scale(.8) translateY(-180px)}}.emoji-bubble{position:absolute;font-size:28px;background:var(--card-bg);border:2px solid var(--border);border-radius:16px;padding:6px 10px;animation:emojiBubble 2.5s ease-out forwards;pointer-events:none;z-index:1002;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.emoji-bubble.side-left{left:16px;top:70px}.emoji-bubble.side-right{right:16px;top:70px}@keyframes emojiBubble{0%{opacity:0;transform:scale(0) translateY(10px)}10%{opacity:1;transform:scale(1.2)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.8) translateY(-20px)}}
.board-container{display:flex;justify-content:center;align-items:center;flex:1;padding:2px 0}.board{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:100%;max-width:min(90vw,500px);aspect-ratio:1;background:var(--border);border-radius:12px;overflow:hidden;border:2px solid var(--border)}.cell{background:var(--secondary-bg);display:flex;align-items:center;justify-content:center;font-size:min(5vw,24px);font-weight:700;cursor:pointer;transition:all .15s;aspect-ratio:1}.cell:hover:not(.taken){background:rgba(88,101,242,.15)}.cell:active:not(.taken){transform:scale(.9)}.cell.taken{cursor:default}.cell.x{color:var(--x-color)}.cell.o{color:var(--o-color)}.cell.last-move{background:rgba(88,101,242,.2)}.cell.win-cell{background:rgba(76,175,80,.3);animation:winPulse .6s ease}@keyframes winPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
.game-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 0;gap:6px}.moves-counter{font-size:14px;color:var(--hint)}
.result-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;text-align:center}.result-icon{font-size:72px;animation:resultBounce .6s ease}@keyframes resultBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}.result-container h2{font-size:28px}.result-container>p{color:var(--hint);font-size:16px}.result-rating{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:14px 28px;font-size:18px}.rating-change-positive{color:var(--success);font-weight:700}.rating-change-negative{color:var(--danger);font-weight:700}
.rematch-section{width:100%;max-width:320px;margin:4px 0}.rematch-section .btn-rematch{width:100%}.rematch-waiting{display:none;flex-direction:column;align-items:center;gap:10px;padding:16px;background:rgba(255,152,0,.1);border:1px solid rgba(255,152,0,.3);border-radius:16px;animation:fadeIn .3s ease}.rematch-waiting.visible{display:flex}.rematch-waiting-anim{display:flex;align-items:center;gap:8px}.mini-loader{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--rematch-color);border-radius:50%;animation:spin .8s linear infinite}.rematch-waiting span{color:var(--rematch-color);font-size:14px;font-weight:600}.rematch-incoming{display:none;flex-direction:column;gap:12px;padding:16px;background:rgba(255,152,0,.12);border:2px solid var(--rematch-color);border-radius:16px;animation:rematchIncoming .5s ease}.rematch-incoming.visible{display:flex}@keyframes rematchIncoming{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}.rematch-incoming-text{display:flex;align-items:center;gap:8px;justify-content:center;font-size:15px}.rematch-incoming-icon{font-size:24px;animation:spin 2s linear infinite}.rematch-incoming-buttons{display:flex;gap:10px}.rematch-incoming-buttons .btn{padding:12px;font-size:15px;border-radius:12px}.rematch-timer-bar{width:100%;height:4px;background:var(--border);border-radius:4px;overflow:hidden}.rematch-timer-fill{height:100%;background:var(--rematch-color);border-radius:4px;width:100%;transition:width .5s linear}.rematch-status{display:none;text-align:center;padding:12px;border-radius:12px;font-size:14px;font-weight:600;animation:fadeIn .3s ease}.rematch-status.visible{display:block}.rematch-status.declined{background:rgba(244,67,54,.1);color:var(--danger);border:1px solid rgba(244,67,54,.3)}.rematch-status.expired{background:rgba(255,152,0,.1);color:var(--warning);border:1px solid rgba(255,152,0,.3)}.result-buttons{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:8px;max-width:320px}
.leaderboard-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.leaderboard-header h2{flex:1;text-align:center;padding-right:60px}.leaderboard-list{flex:1;overflow-y:auto}.lb-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;margin-bottom:8px}.lb-item.highlight{border-color:var(--btn);background:rgba(88,101,242,.1)}.lb-rank{font-size:18px;font-weight:700;min-width:32px;text-align:center}.lb-info{flex:1;min-width:0}.lb-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-stats{font-size:12px;color:var(--hint);margin-top:2px}.lb-rating{font-size:18px;font-weight:700;color:var(--warning)}
.fade-in{animation:fadeIn .3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media(max-height:700px){.screen{padding:8px}.menu-header{padding:12px;margin-bottom:12px}.stats-grid{margin-bottom:16px}.stat-card{padding:10px 6px}.stat-value{font-size:18px}.game-header{margin-bottom:2px}.cell{font-size:min(4vw,20px)}.player-timer{width:34px;height:34px}.timer-text{font-size:11px}.player-info{padding:4px 6px;gap:4px}.player-name{font-size:11px}.emoji-btn{width:32px;height:32px;font-size:17px}.emoji-bar{gap:3px;padding:4px 0}.emoji-float{font-size:36px}.emoji-bubble{font-size:22px;padding:4px 8px}.result-icon{font-size:60px}.result-container{gap:8px}}
@media(max-width:360px){.stats-grid{grid-template-columns:repeat(2,1fr)}.player-timer{width:30px;height:30px}.timer-text{font-size:10px}.emoji-btn{width:30px;height:30px;font-size:16px}}