:root{--font-family:"Chivo",sans-serif;--color-bg:#1a1a1a;--color-text:#f5f5f5;--color-text-muted:#9ca3af;--color-board-bg:#333;--color-tile-bg:#555;--color-tile-text:#fff;--color-player:#2563eb;--color-player-light:#2563eb26;--color-player-border:#2563eb4d;--color-computer:#dc2626;--color-filler:#9ca3af;--color-neutral:#6b7280;--color-guessed:#9ca3af;--color-empty:#000;--color-key-bg:#4a5568;--color-key-text:#fff;--color-key-shadow:#2d3748;--color-key-pressed-bg:#2d3748;--color-key-pressed-text:#718096;--color-btn-bg:var(--color-player);--color-btn-text:white;--color-btn-hover:#1d4ed8;--color-win-start:#065f46;--color-win-end:#047857;--color-lose-start:#7f1d1d;--color-lose-end:#991b1b;--color-tie-start:#4338ca;--color-tie-end:#6366f1;--color-debug-bg:#1a1a2e;--color-debug-border:#4a4a6a;--color-debug-text:#e0e0e0;--color-debug-accent:#a78bfa;--border-radius:8px;--border-radius-sm:4px;--border-radius-lg:12px}*{box-sizing:border-box}html,body{min-height:100vh;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}#root{justify-content:center;align-items:flex-start;min-height:100vh;padding-top:24px;display:flex}.app{flex-direction:column;align-items:center;width:100%;max-width:600px;padding:20px;display:flex}h1{letter-spacing:-.02em;margin:0 0 24px;font-size:2.5rem;font-weight:700}.debug-panel{background:var(--color-debug-bg);border:1px solid var(--color-debug-border);border-radius:var(--border-radius);color:var(--color-debug-text);z-index:1000;min-width:160px;padding:12px 16px;font-size:13px;position:fixed;bottom:16px;right:16px;box-shadow:0 4px 12px #0000004d}.debug-header{border-bottom:1px solid var(--color-debug-border);color:var(--color-debug-accent);margin-bottom:8px;padding-bottom:8px;font-weight:600}.debug-toggle{cursor:pointer;color:var(--color-debug-text);align-items:center;gap:8px;display:flex}.debug-toggle input{accent-color:var(--color-debug-accent)}.debug-info{border-top:1px solid var(--color-debug-border);color:var(--color-text-muted);margin-top:10px;padding-top:10px;font-size:11px}.debug-info p{margin:4px 0}.board{--tile-size:clamp(24px,8vw,48px);--tile-gap:clamp(2px,.5vw,4px);--tile-font:clamp(14px,3.5vw,20px);--board-padding:clamp(8px,2vw,16px);gap:var(--tile-gap);padding:var(--board-padding);background:var(--color-board-bg);border-radius:var(--border-radius);perspective:1000px;flex-direction:column;display:flex}.row{gap:var(--tile-gap);display:flex}.tile{width:var(--tile-size);height:var(--tile-size);perspective:800px;opacity:0;transform:scale(0)}.tile.tile-enter{animation:.5s cubic-bezier(.34,1.56,.64,1) forwards tileScaleIn}@keyframes tileScaleIn{0%{opacity:0;transform:scale(0)}70%{opacity:.4;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.tile-inner{width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;position:relative}.tile.flipped .tile-inner{transform:rotateY(180deg)}.tile.flipping .tile-inner{animation:.6s ease-in-out forwards tileFlip}@keyframes tileFlip{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.tile-front,.tile-back{backface-visibility:hidden;border-radius:var(--border-radius-sm);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.tile-front{background:var(--color-tile-bg)}.tile-back{background:var(--color-guessed);transform:rotateY(180deg)}.tile-front p,.tile-back p{font-size:var(--tile-font);color:var(--color-tile-text);margin:0;font-weight:600}.tile-back.player-word{background:var(--color-player)}.tile-back.player-word p{color:#fff}.tile-back.computer-word{background:var(--color-computer)}.tile-back.computer-word p{color:#fff}.tile-back.player-word.computer-word{background:linear-gradient(135deg,var(--color-player)50%,var(--color-computer)50%)}.tile-back.neutral{background:var(--color-neutral,#6b7280)}.tile-back.neutral p{color:#fff}.tile-back.filler{background:var(--color-filler)}.tile-back.filler p{color:#fff}.tile-back.guessed{background:var(--color-guessed)}.tile.empty{background:var(--color-empty);perspective:none}.tile.empty .tile-inner,.tile.empty .tile-front,.tile.empty .tile-back{display:none}.turn-indicator{opacity:0;justify-content:center;align-items:center;gap:8px;margin:16px 0 12px;font-size:14px;transition:opacity .4s ease-out,transform .4s ease-out;display:flex;transform:translateY(-10px)}.turn-indicator.animated-in{animation:.4s ease-out forwards turnIndicatorFadeIn}.turn-indicator.fading-out{opacity:0;animation:none;transform:translateY(-10px)}@keyframes turnIndicatorFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.turn-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.turn-indicator.player-turn .turn-dot{background:var(--color-player);box-shadow:0 0 8px var(--color-player)}.turn-indicator.player-turn .turn-text{color:var(--color-text-muted)}.turn-indicator.computer-turn .turn-dot{background:var(--color-computer);box-shadow:0 0 8px var(--color-computer);animation:1s ease-in-out infinite pulse}.turn-indicator.computer-turn .turn-text{color:var(--color-computer)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.game-result{border-radius:var(--border-radius);text-align:center;opacity:0;width:100%;max-width:360px;margin:12px 0;padding:10px 24px;transform:scale(.95)}.game-result.animated-in{animation:.5s cubic-bezier(.34,1.56,.64,1) forwards gameResultFadeIn}@keyframes gameResultFadeIn{0%{opacity:0;transform:scale(.95)}60%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.game-result h2{margin:0 0 4px;font-size:18px;font-weight:700}.game-result p{margin:2px 0;font-size:12px}.game-result.player_wins{background:linear-gradient(135deg,var(--color-win-start),var(--color-win-end));color:#fff}.game-result.computer_wins{background:linear-gradient(135deg,var(--color-lose-start),var(--color-lose-end));color:#fff}.game-result.tie{color:#fff;background:#4a5568}.keyboard{--key-width:clamp(26px,8.5vw,40px);--key-height:clamp(32px,10vw,48px);--key-gap:clamp(3px,1vw,6px);--key-font:clamp(12px,3.5vw,16px);gap:var(--key-gap);flex-direction:column;width:100%;max-width:500px;margin-bottom:20px;transition:opacity .4s ease-out,transform .4s ease-out;display:flex}.keyboard.fading-out{opacity:0;pointer-events:none;transform:translateY(20px)}.keyboard-row{justify-content:center;gap:var(--key-gap);opacity:0;display:flex;transform:translateY(60px)}.keyboard.animated-in .keyboard-row{animation:.5s cubic-bezier(.34,1.56,.64,1) forwards keyboardRowFlyIn}@keyframes keyboardRowFlyIn{0%{opacity:0;transform:translateY(60px)}60%{opacity:1;transform:translateY(-8px)}80%{transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.key{width:var(--key-width);height:var(--key-height);background:var(--color-key-bg);color:var(--color-key-text);font-size:var(--key-font);font-weight:600;font-family:var(--font-family);cursor:pointer;box-shadow:0 2px 0 var(--color-key-shadow);border:none;border-radius:clamp(4px,1vw,6px);justify-content:center;align-items:center;padding:0;transition:background .2s,color .2s,box-shadow .15s,filter .15s;display:flex}.key:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 3px 0 var(--color-key-shadow);transform:translateY(-1px)}.key:active:not(:disabled){box-shadow:0 0 0 var(--color-key-shadow);transform:translateY(2px)}.key.popping{animation:.2s cubic-bezier(.34,1.56,.64,1) keyPop}@keyframes keyPop{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.key.pressed-player,.key.pressed-computer{background:var(--color-key-pressed-bg);color:var(--color-key-pressed-text);box-shadow:none;cursor:default;transform:translateY(2px)}.key.pressed-computer.popping{animation:.5s cubic-bezier(.34,1.56,.64,1) keyPopupComputer}@keyframes keyPopupComputer{0%{transform:scale(1)translateY(0)}35%{transform:scale(1.25)translateY(-30px)}70%{transform:scale(1.1)translateY(-10px)}to{transform:scale(1)translateY(2px)}}.key:disabled{cursor:default}.player-info-row{justify-content:center;align-items:center;gap:12px;margin-bottom:16px;display:flex}.player-info-row.fading-out{opacity:0;transition:opacity .4s ease-out,transform .4s ease-out;transform:translateY(-10px)}.player-info-row .player-words{margin-bottom:0}.player-info-row .timer{flex-shrink:0}.player-words{background:var(--color-player-light);border:1px solid var(--color-player-border);border-radius:var(--border-radius);opacity:0;align-items:center;gap:12px;margin-bottom:16px;padding:10px 16px;display:flex;transform:translateY(-10px)}.player-words.animated-in{animation:.4s ease-out forwards playerWordsFadeIn}@keyframes playerWordsFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.player-words.fading-out{opacity:0;transition:opacity .4s ease-out,transform .4s ease-out;animation:none;transform:translateY(-10px)}.player-words-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:13px}.word-badge{background:var(--color-player);color:#fff;border-radius:var(--border-radius-sm);text-transform:uppercase;letter-spacing:1px;padding:4px 12px;font-size:14px;font-weight:600}.new-game-btn{font-size:16px;font-weight:600;font-family:var(--font-family);background:var(--color-btn-bg);color:var(--color-btn-text);cursor:pointer;border:none;border-radius:6px;padding:12px 24px;transition:background .2s}.new-game-btn:hover{background:var(--color-btn-hover)}.main-menu{flex-direction:column;align-items:center;gap:24px;width:100%;max-width:360px;padding:16px;display:flex}.menu-logo{width:160px;height:auto;margin-bottom:0}.logo-btn{cursor:pointer;background:0 0;border:none;padding:0;transition:transform .15s,opacity .15s}.logo-btn:hover{transform:scale(1.05)}.logo-btn:active{transform:scale(.98)}.game-logo{width:120px;height:auto;margin-bottom:16px;display:block}.menu-section{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.play-section{gap:10px}.menu-btn{width:100%;max-width:240px;font-size:16px;font-weight:600;font-family:var(--font-family);cursor:pointer;border:none;border-radius:8px;padding:14px 24px;transition:transform .15s,box-shadow .15s,background .2s}.menu-btn.primary{background:var(--color-player);color:#fff;box-shadow:0 4px #1d4ed8}.menu-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px #1d4ed8}.menu-btn.primary:active{transform:translateY(2px);box-shadow:0 2px #1d4ed8}.menu-btn.primary.hard{background:var(--color-computer);box-shadow:0 4px #991b1b}.menu-btn.primary.hard:hover{box-shadow:0 6px #991b1b}.menu-btn.primary.hard:active{box-shadow:0 2px #991b1b}.menu-btn.secondary{background:var(--color-key-bg);color:var(--color-text);box-shadow:0 3px 0 var(--color-key-shadow)}.menu-btn.secondary:hover{box-shadow:0 5px 0 var(--color-key-shadow);transform:translateY(-2px)}.menu-btn.secondary:active{box-shadow:0 1px 0 var(--color-key-shadow);transform:translateY(2px)}.menu-btn-row{gap:8px;width:100%;max-width:240px;display:flex}.menu-btn.small{flex:1;padding:12px 16px;font-size:14px}.credits-section{gap:8px;margin-top:16px}.made-by{color:var(--color-text-muted);margin:0;font-size:14px}.made-by a{color:var(--color-player);text-decoration:none}.made-by a:hover{text-decoration:underline}.support-link{color:#fff;background:#e47d36;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-block;box-shadow:0 3px #c2410c}.support-link:hover{transform:translateY(-2px);box-shadow:0 5px #c2410c}.credits{color:var(--color-text-muted);text-align:center;margin:0;font-size:12px}.credits a{color:var(--color-text-muted);text-decoration:underline}.credits a:hover{color:var(--color-text)}.how-to-play{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:320px;display:flex}.how-to-play h2{margin:0;font-size:20px;font-weight:700}.how-to-play-content{background:var(--color-board-bg);border-radius:var(--border-radius);padding:16px;font-size:14px;line-height:1.6}.how-to-play-content p{margin:0 0 12px}.how-to-play-content p:last-child{margin-bottom:0}.color-dot{vertical-align:middle;border-radius:50%;width:12px;height:12px;margin-right:4px;display:inline-block}.color-dot.player{background:var(--color-player)}.color-dot.computer{background:var(--color-computer)}.bookmark-page{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:320px;display:flex}.bookmark-page h2{margin:0;font-size:18px;font-weight:700}.bookmark-content{background:var(--color-board-bg);border-radius:var(--border-radius);width:100%;padding:12px;font-size:13px;line-height:1.5}.bookmark-intro{text-align:center;color:var(--color-text-muted);margin:0 0 16px}.bookmark-section{border-bottom:1px solid var(--color-key-shadow);margin-bottom:10px;padding-bottom:10px}.bookmark-section:last-of-type{border-bottom:none;margin-bottom:12px;padding-bottom:0}.bookmark-section h3{align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:600;display:flex}.platform-icon{font-size:18px}.bookmark-section ol{margin:0;padding-left:20px}.bookmark-section li{margin-bottom:6px}.bookmark-section li:last-child{margin-bottom:0}.icon-hint{color:var(--color-text-muted);font-size:12px}.game-end-actions{border-top:1px solid #fff3;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:10px;padding-top:10px;display:flex}.button-row{gap:8px;width:100%;display:flex}.end-btn{font-size:13px;font-weight:600;font-family:var(--font-family);cursor:pointer;white-space:nowrap;border:none;border-radius:6px;flex:1;padding:8px 12px;transition:transform .15s,opacity .15s}.end-btn.primary{color:#1a1a1a;background:#fff}.end-btn.secondary{color:#fff;background:#fff3}.end-btn:hover{transform:translateY(-1px)}.end-btn:active{transform:translateY(1px)}.game-end-container{flex-direction:column;align-items:center;gap:16px;display:flex}.end-support{padding:8px 16px;font-size:13px}.timer{background:var(--color-board-bg);border-radius:var(--border-radius);justify-content:center;align-items:center;gap:8px;min-width:100px;padding:8px 16px;font-size:14px;font-weight:600;display:flex}.timer.warning{color:#fbbf24}.timer.critical{color:var(--color-computer);animation:.5s ease-in-out infinite timerPulse}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.6}}.timer-icon{font-size:16px}