.setup { display: grid; gap: 10px; margin-bottom: 14px; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lbl { width: 60px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pbars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.pbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); }
.pbar.turn { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent), var(--shadow); }
.pbar .mark { font: 900 1.5rem/1 var(--font); width: 28px; text-align: center; }
.pbar .mark.x, .cell.x, .sub .big.x { color: #5b9bff; }
.pbar .mark.o, .cell.o, .sub .big.o { color: #ff6f8a; }
.pbar .nm { font-weight: 700; font-size: 0.9rem; }
.pbar .nm small { display: block; font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.pbar b { margin-left: auto; font-size: 1.4rem; font-variant-numeric: tabular-nums; }

.ub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-width: 560px; margin: 0 auto; padding: 10px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sub { position: relative; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 5px; border-radius: 10px; background: var(--surface); border: 2px solid var(--line); transition: box-shadow 0.15s, border-color 0.15s; }
.sub.active { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.sub.done .cell { opacity: 0.18; }
.sub .big { position: absolute; inset: 0; display: none; place-items: center; font: 900 clamp(3rem, 14vw, 6.5rem)/1 var(--font); pointer-events: none; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.sub.won1 .big, .sub.won2 .big { display: grid; }
.sub.drawn::after { content: "–"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 2.4rem/1 var(--font); color: var(--muted); pointer-events: none; }
.sub.line { box-shadow: 0 0 0 3px #2fbf71, 0 0 18px rgba(47, 191, 113, 0.5); }
.cell { min-width: 0; overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: var(--surface-2); font: 800 clamp(0.8rem, 4vw, 1.7rem)/1 var(--font); cursor: default; touch-action: manipulation; }
.cell.playable { cursor: pointer; background: color-mix(in srgb, var(--gold) 14%, var(--surface-2)); }
.cell.playable:hover, .cell.playable:focus-visible { background: color-mix(in srgb, var(--gold) 38%, var(--surface-2)); outline: none; }
.cell.last { box-shadow: inset 0 0 0 2px #ffd65a; }
.cell.best { box-shadow: inset 0 0 0 3px #2fbf71; animation: ubpulse 0.9s ease-in-out infinite; }
@keyframes ubpulse { 50% { opacity: 0.55; } }
html[data-saver="on"] .cell.best { animation: none; }
.tools { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.rules { margin: 18px auto 0; max-width: 560px; }
.rules summary { cursor: pointer; font-weight: 800; }
.rules ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.6; }
:root:not([data-theme="dark"]) .pbar .mark.x { color: #2f6fdc; }
:root:not([data-theme="dark"]) .pbar .mark.o { color: #d6345a; }