:root{--ink: #1a1410;--paper: #f6f0e8;--muted: #6b5d52;--felt: #2d4a3e;--felt-light: #3a5f50;--accent-x: #e8a838;--accent-o: #5ec4e8;--glow: rgba(232, 168, 56, .35);--radius: 18px;--shadow: 0 20px 50px rgba(10, 8, 6, .35);font-family:Outfit,system-ui,sans-serif;color:var(--paper)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--ink);overflow-x:hidden}.backdrop{position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,#4a6741 0%,transparent 55%),radial-gradient(circle at 80% 90%,#3d2a1f 0%,transparent 40%),linear-gradient(165deg,#1a1410,#12100e);z-index:-1}.shell{max-width:26rem;margin:0 auto;padding:2rem 1.25rem 3rem;text-align:center}.hero .eyebrow{margin:0;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:#a89888}.hero h1{margin:.35rem 0 0;font-family:Fraunces,Georgia,serif;font-size:clamp(2rem,6vw,2.6rem);font-weight:700;letter-spacing:-.02em}.lede{margin:.5rem 0 0;color:#c4b5a5;font-size:.95rem}.controls{margin-top:1.75rem}.opponent-controls{margin-top:1.25rem}.difficulty{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem;font-size:.85rem;color:#a89888}.difficulty.hidden{display:none}.difficulty select{font:inherit;font-weight:600;color:var(--paper);background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.4rem .85rem;cursor:pointer}.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.35rem;background:#ffffff0f;border-radius:999px;border:1px solid rgba(255,255,255,.08)}.mode{border:none;border-radius:999px;padding:.65rem .75rem;font:inherit;font-weight:600;font-size:.9rem;color:#d8cdc0;background:transparent;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}.mode-hint{display:block;font-size:.65rem;font-weight:500;opacity:.75;margin-top:.15rem}.mode.active{background:linear-gradient(180deg,#f0e6d8,#dccfbe);color:var(--ink);box-shadow:0 4px 14px #00000040}.mode-blurb{margin:.85rem 0 0;font-size:.82rem;line-height:1.45;color:#a89888;min-height:2.6em}.turn{margin:1.25rem 0 .75rem;font-size:1.05rem;font-weight:600}.turn .mark-x{color:var(--accent-x)}.turn .mark-o{color:var(--accent-o)}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;padding:1rem;background:linear-gradient(145deg,var(--felt-light),var(--felt));border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow),inset 0 1px #ffffff1f}.cell{aspect-ratio:1;border:none;border-radius:var(--radius);background:linear-gradient(180deg,#faf6f0,#ebe3d6);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px #c9bfb0,0 8px 20px #00000026;transition:transform .12s ease,box-shadow .12s ease}.cell .mark{font-family:Fraunces,Georgia,serif;font-size:clamp(2rem,10vw,2.75rem);font-weight:700;line-height:1;pointer-events:none}.cell:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px #c9bfb0,0 12px 24px #0003}.cell:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #c9bfb0}.cell:disabled{cursor:default}.cell .mark.mark-x{color:#c47f12;text-shadow:0 0 24px var(--glow)}.cell .mark.mark-o{color:#1a8fb8;text-shadow:0 0 24px rgba(94,196,232,.4)}.cell .mark.pop{animation:pop .28s cubic-bezier(.34,1.4,.64,1)}.cell .mark.vanish{animation:vanish .35s ease forwards}@keyframes pop{0%{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes vanish{to{transform:scale(.5);opacity:0;filter:blur(4px)}}.actions{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:1.25rem}.btn{font:inherit;font-weight:600;border-radius:999px;padding:.65rem 1.35rem;cursor:pointer;border:none}.btn.ghost{background:transparent;color:#c4b5a5;border:1px solid rgba(255,255,255,.15)}.btn.ghost:hover{border-color:#ffffff59;color:var(--paper)}.btn.primary{background:linear-gradient(180deg,#f0e6d8,#dccfbe);color:var(--ink);width:100%;margin-top:.5rem}.sound-toggle{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#a89888;cursor:pointer}.result-dialog{border:none;padding:0;background:transparent;max-width:22rem;width:calc(100% - 2rem)}.result-dialog::backdrop{background:#080605b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.result-card{background:linear-gradient(160deg,#2a2420,#1a1410);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:1.75rem 1.5rem;box-shadow:var(--shadow);text-align:center}.result-eyebrow{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#a89888}.result-dialog h2{margin:.4rem 0 0;font-family:Fraunces,Georgia,serif;font-size:1.75rem}.result-body{margin:.5rem 0 1rem;color:#c4b5a5;line-height:1.5}