.cf{user-select:none;touch-action:manipulation;gap:1rem;display:grid}.cf__hud{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.cf__stats{color:var(--muted);flex-wrap:wrap;gap:.75rem 1.15rem;font-size:.92rem;display:flex}.cf__stats strong{color:var(--text);font-variant-numeric:tabular-nums}.cf__color{align-items:center;gap:.45rem;font-size:.92rem;font-weight:700;display:flex}.cf__swatch{border:2px solid #ffffff40;border-radius:50%;width:1.1rem;height:1.1rem}.cf__actions,.cf__accessible-actions{flex-wrap:wrap;justify-content:center;gap:.55rem;display:flex}.cf__visual[hidden],.cf__stage[hidden],.cf__accessible[hidden],.cf__accessible-result[hidden]{display:none}.cf__visual{justify-items:center;gap:.75rem;display:grid}.cf__hint{color:var(--muted);text-align:center;max-width:32rem;margin:0 auto;font-size:.85rem}.cf__round-picker{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2,#161b18);gap:.45rem;width:min(100%,28rem);margin-inline:auto;padding:.65rem .85rem;display:grid}.cf__round-picker[hidden]{display:none}.cf__round-picker-label{color:var(--text);text-align:center;margin:0;font-size:.88rem;font-weight:700}.cf__round-picker-name{color:var(--muted);font-weight:400}.cf__round-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;display:grid}.cf__round-choice{border:2px solid var(--line);background:var(--panel,#1a1f1c);min-height:48px;color:var(--text);cursor:pointer;border-radius:.65rem;justify-content:center;align-items:center;gap:.35rem;padding:.4rem .3rem;font-size:.8rem;font-weight:600;transition:border-color .12s,transform .12s;display:flex}.cf__round-choice:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.cf__round-choice:disabled{opacity:.4;cursor:default}.cf__round-swatch{border-radius:50%;flex-shrink:0;width:.85rem;height:.85rem}.cf__round-choice--green .cf__round-swatch{background:#0f9d58}.cf__round-choice--blue .cf__round-swatch{background:#3b82f6}.cf__round-choice--amber .cf__round-swatch{background:#f59e0b}.cf__round-choice--rose .cf__round-swatch{background:#f43f5e}.cf__stage{width:min(100%,22rem);margin:0 auto;position:relative}.cf__grid{background:var(--panel-2,#161b18);border:1px solid var(--line);border-radius:.6rem;grid-template-columns:repeat(5,1fr);gap:.35rem;padding:.5rem;display:grid}.cf__tile{aspect-ratio:1;border:2px solid var(--line);background:var(--panel,#1a1f1c);cursor:default;border-radius:.4rem;justify-content:center;align-items:center;min-width:0;min-height:0;padding:0;font-size:clamp(.9rem,3vw,1.3rem);font-weight:700;transition:transform .15s,border-color .15s,background .15s;display:flex}.cf__tile--active{background:var(--tile-color,var(--panel));color:#04130e;border-color:color-mix(in srgb, var(--tile-color) 60%, transparent)}.cf__tile--adjacent{cursor:pointer;border-color:var(--accent,#12b66a);box-shadow:0 0 0 1px var(--accent,#12b66a)}.cf__tile--adjacent:hover{transform:scale(1.06)}.cf__tile--adjacent:active{transform:scale(.96)}.cf__tile--player{background:var(--tile-color,#0f9d58);color:#04130e;box-shadow:0 0 12px color-mix(in srgb, var(--tile-color) 40%, transparent);border-color:#fff6}.cf__tile--empty{background:0 0;border-color:#0000}.cf__tile-symbol{font-size:1.1em;font-weight:800}.cf__tile-letter{font-weight:700}.cf__overlay{text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2,#161b18);z-index:2;place-content:center;gap:.75rem;padding:1.5rem;display:grid;position:absolute;inset:0}.cf__overlay:not(.is-open){display:none}.cf__overlay h2{color:var(--accent,#12b66a);margin:0}.cf__overlay p{color:var(--muted)}.cf__accessible{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2,#161b18);text-align:center;gap:.85rem;padding:1.25rem;display:grid}.cf__accessible h2{margin:0;font-size:1.15rem}.cf__accessible-state{gap:.35rem;font-size:.92rem;display:grid}.cf__accessible-result{border-top:1px solid var(--line);gap:.65rem;padding-top:.65rem;display:grid}@media (prefers-reduced-motion:reduce){.cf__tile{transition:none}.cf__tile--adjacent:hover,.cf__tile--adjacent:active,.cf__round-choice:hover:not(:disabled){transform:none}}@media (forced-colors:active){.cf__tile--adjacent{box-shadow:none;border-color:highlight}.cf__tile--player,.cf__round-choice{border-color:canvastext}}@media (width<=22rem){.cf__round-choices{grid-template-columns:repeat(2,1fr)}}