:root{--cell: 80px;--light: #f1dfc4;--dark: #b68661;--frame: #9a6b4f;--ink: #0f172a;--sel: #3b82f6;--hint: #22c55e;--card: #ffffff}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#eef2ff 0%,transparent 60%),#fafafa;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink)}.game{min-height:100dvh;display:grid;place-items:center;padding:16px}.game-board{display:grid;justify-items:center;background:var(--card);padding:18px;border-radius:16px;border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 24px #0f172a14,0 2px 6px #0f172a0f}.status{display:inline-flex;align-items:center;font-size:18px;font-weight:600;letter-spacing:.2px;color:#0b1324;background:#f1f5f9;border:1px solid rgba(15,23,42,.06);padding:8px 14px;margin:24px;border-radius:999px}.turn-dot{width:.9em;height:.9em;border-radius:999px;box-shadow:inset 0 0 0 1.5px #0f172a99}.turn-dot.dark{background:#111;box-shadow:none}.turn-dot.light{background:#fff}.board{background:var(--frame);padding:6px;border-radius:14px;box-shadow:inset 0 0 0 1px #00000014;overflow:hidden}.board-row{display:flex;padding:0;margin:0}.board-row:first-child .square:first-child{border-top-left-radius:8px}.board-row:first-child .square:last-child{border-top-right-radius:8px}.board-row:last-child .square:first-child{border-bottom-left-radius:8px}.board-row:last-child .square:last-child{border-bottom-right-radius:8px}.square{position:relative;width:var(--cell);height:var(--cell);display:inline-flex;align-items:center;justify-content:center;background:var(--light);font-size:calc(var(--cell) * 1.1);line-height:0;border:0;padding:0;padding-block:0px;margin:0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .8s ease,filter .8s ease}.square--dark{background:var(--dark)}.square:hover{filter:brightness(1.3)}.square--selected{outline:3px solid var(--sel);outline-offset:-3px}.square--hint:after{content:"";position:absolute;inset:0;margin:auto;width:36%;height:36%;border-radius:999px;background:color-mix(in oklab,var(--hint) 78%,transparent);box-shadow:0 0 0 2px color-mix(in oklab,var(--hint) 55%,transparent) inset}.square:focus-visible{outline:3px solid var(--sel);outline-offset:2px}.square .glyph{display:inline-block;line-height:1;transform:translateY(-5%)}@media(max-width:520px){:root{--cell: 64px}}