:root{--bg: #0f1724;--card: #0b1220;--tile: #e6ecf2;--accent: #4f46e5;--gap: 12px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:linear-gradient(180deg,#071029,#0b1220);color:var(--tile);display:flex;align-items:center;justify-content:center;padding:24px}header{width:100%;max-width:520px;margin-bottom:18px;text-align:center}header h1{margin:.25rem 0;font-size:1.6rem}.subtitle{margin:0;color:#e6ecf2cc;font-size:.9rem}.game{background:#ffffff05;padding:20px;border-radius:12px;display:flex;flex-direction:column;gap:16px;align-items:center}.board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--gap);width:min(420px,90vw);aspect-ratio:1/1;padding:var(--gap);background:linear-gradient(180deg,#ffffff05,#ffffff03);border-radius:10px;position:relative}.tile{background:var(--tile);color:#092029;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.6rem;border-radius:8px;-webkit-user-select:none;user-select:none;box-shadow:0 6px 18px #02061780;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}.tile.blank{background:transparent;box-shadow:inset 0 0 0 2px var(--accent)}.tile.dragging{opacity:.6;transform:scale(.98)}.tile.invalid{animation:shake .26s ease}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-8px)}50%{transform:translate(6px)}75%{transform:translate(-4px)}to{transform:translate(0)}}.controls{display:flex;gap:10px}.hint-box{min-width:220px;max-width:320px;background:#ffffff0f;color:var(--tile);border:1px solid rgba(255,255,255,.08);padding:10px 12px;border-radius:8px;box-shadow:0 6px 18px #02061780;transform-origin:top right;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;font-size:.95rem;align-self:center}.hint-box.visible{opacity:1;pointer-events:auto;transform:translateY(-6px) scale(1)}.hint-box.hide{opacity:0;transform:translateY(0) scale(.98)}.hint-box .close{float:right;background:transparent;border:none;color:#e6ecf2b3;font-size:.9rem;cursor:pointer}button{background:#000;border:3px solid var(--accent);padding:8px 12px;border-radius:8px;color:var(--tile);cursor:pointer}button:active{transform:translateY(1px)}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .32s}.overlay.visible{pointer-events:auto;opacity:1;background:#020617bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.win-card{background:#ffffff0f;padding:28px;border-radius:12px;text-align:center;box-shadow:0 10px 40px #030817b3;transform:translateY(-6px);border:1px solid rgba(255,255,255,.08)}.win-card h2{margin:0 0 8px}.win-actions{margin-top:12px}.board.won{outline:4px solid rgba(79,70,229,.25);box-shadow:0 8px 40px #4f46e514}.board.won .tile{animation:pop .7s ease both}@keyframes pop{0%{transform:translateY(0) scale(1) rotate(0)}30%{transform:translateY(-8px) scale(1.02) rotate(-2deg)}60%{transform:translateY(6px) scale(.99) rotate(2deg)}to{transform:translateY(0) scale(1) rotate(0)}}@media(max-width:600px){body{display:block}}@media(prefers-reduced-motion:reduce){.tile,.board,.win-card{transition:none;animation:none}}