:root{--bg: #0e1014;--panel: #171c26;--ink: #ecf0f8;--muted: #8d99b5;--tile: #2b3548;--tile-edge: #3d4a63;--good: #4ade80;--bad: #f87171;--accent: #93c5fd}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1100px 650px at 50% -8%,#1b2436 0%,var(--bg) 62%);color:var(--ink);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}main{max-width:560px;margin:0 auto;padding:36px 20px 48px;text-align:center}h1{margin:0;font-size:34px}h1 span{color:var(--accent)}.sub{margin:6px 0 22px;color:var(--muted)}#board{position:relative;display:grid;gap:8px;margin:0 auto;width:min(86vw,420px);aspect-ratio:1;padding:12px;background:var(--panel);border-radius:16px;border:1px solid rgba(120,140,200,.14);box-shadow:0 20px 60px #00000073}.tile{border:0;border-radius:10px;background:linear-gradient(180deg,var(--tile-edge),var(--tile));color:var(--ink);font-size:clamp(18px,5vw,26px);font-weight:700;cursor:pointer;transition:transform .06s ease,background .15s ease;font-variant-numeric:tabular-nums}.tile:active{transform:scale(.95)}.tile.home{color:var(--good)}.tile.blank{background:transparent;cursor:default;box-shadow:inset 0 0 0 2px #788cc81f}.hud{display:flex;justify-content:space-between;width:min(86vw,420px);margin:12px auto 4px;color:var(--muted);font-size:13px;min-height:20px}#status.win{color:var(--good);font-weight:700}#status.bad{color:var(--bad);font-weight:700}.controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:14px}select,button{font:inherit;border-radius:9px;border:1px solid rgba(120,140,200,.25);background:var(--panel);color:var(--ink);padding:8px 14px;cursor:pointer}button:hover{border-color:var(--accent)}#solve{border-color:var(--good);color:var(--good)}#loyd{border-color:var(--bad);color:var(--bad)}label{color:var(--muted);font-size:13px}label select{margin-left:6px}.note{margin:26px auto 0;max-width:470px;color:var(--muted);font-size:13px;text-align:left}.note strong,.note em{color:var(--ink)}