@import"https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;600;700&display=swap";:root{color-scheme:only light;font-family:Manrope,system-ui,sans-serif;background-color:#0f1615;color:#eef2f1;--accent: #38b2ac;--accent-strong: #2f855a;--panel: rgba(17, 27, 26, .86);--panel-border: rgba(255, 255, 255, .08);--board: #11211d;--cell: #1b342f;--cell-border: rgba(255, 255, 255, .08);--hint: rgba(255, 255, 255, .35);--best: #f6ad55;--shadow: 0 20px 50px rgba(0, 0, 0, .35)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,rgba(56,178,172,.2),transparent 55%),radial-gradient(circle at 20% 20%,rgba(246,173,85,.12),transparent 40%),#0f1615}#root{min-height:100vh}.app{display:flex;flex-direction:column;gap:32px;padding:32px 6vw 64px}.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:center}.eyebrow{font-family:Space Grotesk,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12px;opacity:.7;margin-bottom:12px}h1{font-family:Space Grotesk,sans-serif;font-size:clamp(28px,4vw,42px);margin:0 0 12px}.subtext{max-width:560px;opacity:.85;line-height:1.6;margin:0}.hero-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:20px;display:grid;gap:16px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.control{display:grid;gap:6px}label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.7}select{background:#0f201c;color:inherit;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;font-size:14px}.score{display:flex;justify-content:space-between;gap:12px;font-weight:600}.status{margin:0;font-size:14px;line-height:1.4}.reset{border:none;background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#051413;font-weight:700;padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.reset:hover{transform:translateY(-2px);box-shadow:0 10px 20px #38b2ac40}.main{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(260px,.8fr);gap:32px}.board-wrapper{display:grid;gap:16px}.board{background:var(--board);border-radius:24px;padding:18px;display:grid;grid-template-columns:repeat(8,minmax(36px,1fr));gap:6px;box-shadow:var(--shadow)}.cell{position:relative;aspect-ratio:1;border-radius:14px;background:var(--cell);border:1px solid var(--cell-border);cursor:pointer;padding:0;display:grid;place-items:center;transition:transform .15s ease,border .2s ease}.cell.valid:hover{transform:translateY(-2px);border-color:#f6ad5580}.cell.last{outline:2px solid rgba(56,178,172,.6)}.disc{width:72%;height:72%;border-radius:50%;box-shadow:inset 0 6px 10px #ffffff29,0 12px 16px #00000059;animation:drop .25s ease}.disc.black{background:radial-gradient(circle at 30% 30%,#4f5e5b,#0a0f0f 70%)}.disc.white{background:radial-gradient(circle at 30% 30%,#fff,#c7d1cf 70%)}@keyframes drop{0%{transform:scale(.4);opacity:.2}to{transform:scale(1);opacity:1}}.hint{width:18%;height:18%;border-radius:50%;background:var(--hint)}.best-marker{width:22%;height:22%;border-radius:6px;border:2px solid var(--best);box-shadow:0 0 10px #f6ad5580}.cell.best{border-color:#f6ad5599}.legend{display:flex;gap:12px;flex-wrap:wrap}.chip{display:flex;align-items:center;gap:8px;background:#ffffff0f;padding:8px 12px;border-radius:999px;font-size:13px}.dot{width:14px;height:14px;border-radius:50%;display:inline-block}.dot.black{background:#0a0f0f;border:1px solid rgba(255,255,255,.2)}.dot.white{background:#f1f5f4}.side-panel{display:grid;gap:18px}.panel-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:18px;box-shadow:var(--shadow)}.panel-card h2{font-family:Space Grotesk,sans-serif;margin:0 0 8px;font-size:18px}.hint-text{margin:0 0 8px;line-height:1.5;opacity:.9}.reason{margin:0 0 8px;font-size:13px;line-height:1.5;color:#ffffffb3}.best-coord{font-size:14px;color:var(--best)}.tips{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;opacity:.9}@media (max-width: 980px){.main{grid-template-columns:1fr}}@media (max-width: 640px){.app{padding:24px 6vw 40px}.board{padding:12px;gap:4px}.cell{border-radius:10px}.hero-panel{padding:16px}}