:root{--bg: #f8fafc;--fg: #0f172a;--muted: #475569;--accent-x: #2563eb;--accent-o: #dc2626;--border: #cbd5e1;--lb-border: #94a3b8;--lb-border-active: #2563eb;--lb-bg: #ffffff;--lb-bg-done: #f1f5f9;--lb-glow: rgba(37, 99, 235, .18);--cell-bg: #ffffff;--cell-bg-pressed: #e2e8f0;--win-bg: #fef9c3;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .08);--radius: 8px;--lb-radius: 12px;--gap-outer: 6px;--gap-inner: 2px}@media (prefers-color-scheme: dark){:root{--bg: #0f172a;--fg: #f1f5f9;--muted: #94a3b8;--accent-x: #60a5fa;--accent-o: #f87171;--border: #334155;--lb-border: #475569;--lb-border-active: #60a5fa;--lb-bg: #1e293b;--lb-bg-done: #0b1220;--lb-glow: rgba(96, 165, 250, .22);--cell-bg: #1e293b;--cell-bg-pressed: #334155;--win-bg: #422006;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .4)}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.4;overscroll-behavior:contain}body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.app{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:560px;margin:0 auto;padding:.75rem .75rem 1.5rem;min-height:100dvh}.header{text-align:center;width:100%}.title{margin:0 0 .25rem;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.status{margin:.25rem 0 0;font-size:.95rem;color:var(--muted);min-height:1.4em}.status.win{font-weight:700}.status.win.win-x{color:var(--accent-x)}.status.win.win-o{color:var(--accent-o)}.status.draw{color:var(--muted);font-weight:600}.moves-counter{margin:.25rem 0 0;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}.uttt-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--gap-outer);width:100%;aspect-ratio:1;max-width:520px;padding:8px;background:var(--lb-border);border-radius:calc(var(--lb-radius) + 4px)}.lb{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--gap-inner);padding:4px;background:var(--lb-bg);border:2px solid var(--lb-border);border-radius:var(--lb-radius);transition:box-shadow .18s ease,border-color .18s ease,background .18s ease}.lb-active{border-color:var(--lb-border-active);box-shadow:0 0 0 3px var(--lb-glow)}.lb-forced{border-color:var(--lb-border-active);border-width:3px}.lb-clickable{cursor:pointer}.lb-done{background:var(--lb-bg-done);opacity:.92}.lb-done-x{color:var(--accent-x)}.lb-done-o{color:var(--accent-o)}.lb-done-draw{color:var(--muted)}.lb-winning{box-shadow:0 0 0 4px var(--win-bg),0 0 24px var(--lb-glow);animation:lb-pulse .6s ease-out}@keyframes lb-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.lb-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:clamp(2.5rem,9vw,4rem);font-weight:800;opacity:.18;pointer-events:none;-webkit-user-select:none;user-select:none}.lb-badge.mark-x{color:var(--accent-x)}.lb-badge.mark-o{color:var(--accent-o)}.lb-badge-draw{color:var(--muted)}.uttt-cell{background:var(--cell-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);font-size:clamp(1.1rem,3.6vw,1.6rem);font-weight:700;color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .12s ease,transform .08s ease,color .12s ease;user-select:none;-webkit-user-select:none;min-height:32px;min-width:32px}.uttt-cell:disabled{cursor:default}.uttt-cell.mark-x{color:var(--accent-x)}.uttt-cell.mark-o{color:var(--accent-o)}.uttt-cell.marked{animation:pop .18s ease-out}@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.uttt-cell.last{background:var(--lb-glow);border-color:var(--lb-border-active)}.lb-clickable .uttt-cell:not(:disabled):active{transform:scale(.95);background:var(--cell-bg-pressed)}@media (hover: hover){.lb-clickable .uttt-cell:not(:disabled):hover{background:var(--cell-bg-pressed)}}.uttt-controls{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:520px}.mode-toggle,.difficulty-toggle{display:flex;gap:.25rem;background:var(--lb-bg);border:2px solid var(--border);border-radius:var(--lb-radius);padding:.25rem}.mode-btn{flex:1;background:transparent;border:none;padding:.6rem .4rem;font-size:.9rem;font-weight:600;color:var(--muted);border-radius:calc(var(--lb-radius) - 4px);cursor:pointer;min-height:44px;transition:background-color .12s ease,color .12s ease}.mode-btn.active{background:var(--fg);color:var(--bg)}.difficulty-toggle .mode-btn{font-size:.78rem;padding:.5rem .25rem}.action-row{display:flex;gap:.5rem}.reset-btn{flex:1;background:transparent;border:2px solid var(--border);border-radius:var(--lb-radius);padding:.7rem 1rem;font-size:.95rem;font-weight:600;color:var(--muted);cursor:pointer;min-height:48px}.reset-btn:active{background:var(--cell-bg-pressed);color:var(--fg)}.reset-btn:disabled{opacity:.45;cursor:not-allowed}.legend{width:100%;max-width:520px;background:var(--lb-bg);border:2px solid var(--border);border-radius:var(--lb-radius);padding:.5rem .75rem;font-size:.85rem;color:var(--muted)}.legend summary{cursor:pointer;font-weight:600;color:var(--fg);padding:.25rem 0}.legend ul{margin:.5rem 0 0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.35rem}.legend code{background:var(--cell-bg-pressed);padding:.05rem .3rem;border-radius:4px;font-size:.85em}@media (max-width: 360px){.title{font-size:1.25rem}.status{font-size:.85rem}.uttt-cell{font-size:1rem}.gap-outer{--gap-outer: 4px}}