:root{--bg: #1a1a2e;--bg-card: #16213e;--text: #e0e0e0;--text-muted: #8888aa;--accent-human: #0f9b58;--accent-ai: #e94560;--accent-valid: #ffc107;--cell-bg: #0f3460;--cell-empty: #1a1a3e;--cell-border: #2a2a5e;--coach-optimal: #0f9b58;--coach-acceptable: #7cb342;--coach-error: #f9a825;--coach-blunder: #e94560}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);height:100dvh;overflow:hidden}.app{max-width:500px;margin:0 auto;padding:calc(.4rem + env(safe-area-inset-top)) calc(.5rem + env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) calc(.5rem + env(safe-area-inset-left));height:100dvh;display:flex;flex-direction:column;gap:.3rem;position:relative}.header{text-align:center}.header h1{font-size:1rem;color:var(--accent-valid);line-height:1.2}.header-info{display:flex;justify-content:center;gap:.75rem;font-size:.7rem;color:var(--text-muted)}.phase-label{font-weight:600;color:var(--text)}.error-count{color:var(--coach-error)}.winrate-bar{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--bg-card)}.winrate-human{background:var(--accent-human);transition:width .3s ease}.winrate-ai{background:var(--accent-ai);transition:width .3s ease}.winrate-labels{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-muted);margin-top:1px}.ai-section{display:flex;flex-direction:column;align-items:center;gap:.1rem}.ai-section .board{width:min(42vw,200px);gap:2px}.ai-section .cell{font-size:clamp(.6rem,2.5vw,.9rem);border-width:1px;border-radius:4px}.player-section{display:flex;flex-direction:column;align-items:center;gap:.15rem}.player-section .board{width:min(62vw,320px);gap:3px}.controls{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.3rem}.controls-row{display:flex;justify-content:center;align-items:center;gap:.5rem;min-height:2.2rem}.board-label{font-size:.65rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.board{display:grid;grid-template-columns:repeat(4,1fr);aspect-ratio:1 / 1}.cell{display:flex;align-items:center;justify-content:center;font-size:clamp(.8rem,3.5vw,1.25rem);font-weight:700;border:2px solid var(--cell-border);border-radius:5px;background:var(--cell-empty);color:var(--text);cursor:default;transition:background .15s,border-color .15s,transform .1s}.cell--hidden{background:var(--bg-card);font-size:clamp(1rem,4vw,1.5rem);color:var(--accent-valid)}.cell--filled{background:var(--cell-bg);animation:cell-shine 1s ease-out}@keyframes cell-shine{0%{transform:scale(.5);opacity:0}15%{transform:scale(1.1);opacity:1}25%{transform:scale(1)}35%,55%,75%{box-shadow:0 0 12px 3px #ffc10799}45%,65%,90%{box-shadow:0 0 4px 1px #ffc10726}to{box-shadow:none}}.cell--valid{border-color:var(--accent-valid);box-shadow:0 0 6px #ffc1074d}.cell--interactive{cursor:pointer}.cell--interactive:hover{background:#ffc10726;transform:scale(1.05)}.cell--interactive:active{transform:scale(.95)}.discard-pile{display:flex;align-items:center;gap:.4rem;padding:.25rem .5rem;background:var(--bg-card);border-radius:6px;min-height:2rem;overflow-x:auto}.discard-pile--empty{visibility:hidden}.discard-label{font-size:.65rem;color:var(--text-muted);white-space:nowrap}.discard-tokens{display:flex;gap:3px;overflow-x:auto}.discard-token{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;background:var(--cell-bg);color:var(--text);border:1px solid var(--cell-border);border-radius:5px;cursor:default;animation:token-shine 1s ease-out}@keyframes token-shine{0%{transform:scale(.5);opacity:0}15%{transform:scale(1.1);opacity:1}25%{transform:scale(1)}35%,55%,75%{box-shadow:0 0 10px 2px #ffc10780}45%,65%,90%{box-shadow:0 0 3px 1px #ffc1071a}to{box-shadow:none}}.discard-token--active{border-color:var(--accent-valid);cursor:pointer}.discard-token--active:hover{background:#ffc10726}.draw-panel{display:flex;justify-content:center;align-items:center;gap:.5rem}.draw-btn{padding:.4rem 1.1rem;font-size:.85rem;font-weight:600;background:var(--accent-human);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.draw-btn:hover{background:#0b7a45}.current-tile{display:flex;align-items:center;gap:.4rem}.current-tile-label{font-size:.7rem;color:var(--text-muted)}.current-tile-value{font-size:1.3rem;font-weight:800;color:var(--accent-valid);background:var(--bg-card);padding:.1rem .4rem;border-radius:6px;border:2px solid var(--accent-valid)}.action-bar{display:flex;justify-content:center}.discard-btn{padding:.35rem .9rem;font-size:.8rem;background:var(--bg-card);color:var(--text);border:1px solid var(--cell-border);border-radius:6px;cursor:pointer;transition:background .15s}.discard-btn:hover:not(:disabled){background:#e9456033;border-color:var(--accent-ai)}.discard-btn:disabled{opacity:.4;cursor:not-allowed}.ai-recap{text-align:center;font-size:.7rem;color:var(--text-muted);padding:.15rem .5rem;min-height:1.1rem}.ai-recap--hidden{visibility:hidden}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:90}.modal-card{background:var(--bg-card);padding:1.25rem;border-radius:12px;max-width:90%;width:380px;border-top:4px solid var(--coach-acceptable)}.modal--acceptable{border-top-color:var(--coach-acceptable)}.modal--error{border-top-color:var(--coach-error)}.modal--blunder{border-top-color:var(--coach-blunder)}.modal-message{font-size:.95rem;margin-bottom:.75rem;line-height:1.4}.modal-explanation{background:#0003;padding:.6rem;border-radius:8px;margin-bottom:.75rem}.modal-best{font-size:.85rem;margin-bottom:.4rem}.modal-detail{font-size:.8rem;color:var(--text-muted);margin-top:.2rem;line-height:1.4}.modal-danger{font-size:.8rem;color:var(--coach-blunder);margin-top:.2rem;font-weight:600}.modal-actions{display:flex;flex-direction:column;gap:.4rem}.modal-btn{padding:.5rem 1rem;font-size:.85rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.modal-btn--change{background:var(--accent-human);color:#fff}.modal-btn--change:hover{background:#0b7a45}.modal-btn--play{background:var(--bg);color:var(--text);border:1px solid var(--cell-border)}.modal-btn--play:hover{background:#ffffff0d}.modal-btn--explain{background:#ffc10726;color:var(--accent-valid)}.modal-btn--explain:hover{background:#ffc10740}.install-banner{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.4rem .75rem;background:var(--bg-card);border:1px solid var(--accent-valid);border-radius:8px;font-size:.75rem;color:var(--text);flex-shrink:0}.install-text{display:flex;align-items:center;gap:.25rem}.install-share-icon{width:1em;height:1em;vertical-align:middle}.install-btn{padding:.3rem .8rem;font-size:.75rem;font-weight:600;background:var(--accent-human);color:#fff;border:none;border-radius:6px;cursor:pointer}.install-btn:hover{background:#0b7a45}.install-close{background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:0 .2rem;line-height:1}.install-close:hover{color:var(--text)}.version{position:absolute;bottom:calc(.3rem + env(safe-area-inset-bottom));right:calc(.4rem + env(safe-area-inset-right));font-size:.55rem;color:var(--cell-border);pointer-events:none}.gameover-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.gameover-card{background:var(--bg-card);padding:1.5rem;border-radius:12px;text-align:center;max-width:90%}.gameover-card h2{font-size:1.3rem;color:var(--accent-valid);margin-bottom:.4rem}.gameover-card p{color:var(--text-muted);margin-bottom:.75rem}.new-game-btn{padding:.6rem 1.5rem;font-size:.95rem;font-weight:600;background:var(--accent-human);color:#fff;border:none;border-radius:8px;cursor:pointer}.new-game-btn:hover{background:#0b7a45}@media(min-width:768px){.app{max-width:600px;padding:.75rem 1rem;gap:.5rem}.header h1{font-size:1.4rem}.header-info{font-size:.85rem}.winrate-bar{height:8px}.winrate-labels{font-size:.75rem}.ai-section .board{width:min(35vw,220px);gap:3px}.ai-section .cell{font-size:1rem}.board-label{font-size:.8rem}.player-section .board{width:min(50vw,340px);gap:4px}.cell{font-size:1.25rem}.discard-token{min-width:34px;height:34px;font-size:.85rem}.current-tile-value{font-size:1.8rem}.controls{min-height:4.5rem}}