:root{--fld-c0:#d64b45;--fld-c1:#2f83bf;--fld-c2:#d99a2b;--fld-c3:#3f9a56;--fld-c4:#8f57cf;--fld-c5:#cf5aa0}.dark{--fld-c0:#e8756f;--fld-c1:#57a6de;--fld-c2:#e6b955;--fld-c3:#5cbd76;--fld-c4:#b585e6;--fld-c5:#e17fbd}.fld-game{flex-direction:column;align-items:center;gap:14px;width:100%;padding-top:8px;display:flex}.fld-statbar{gap:22px;display:flex}.fld-stat{flex-direction:column;align-items:center;line-height:1;display:flex}.fld-stat-value{font-family:var(--font-mono);color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:20px;font-weight:800}.fld-stat-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:3px;font-size:10px;font-weight:600}.fld-board{grid-template-columns:repeat(var(--fld-size,8), 1fr);border-radius:var(--hub-classic-radius,4px);background:var(--bg-secondary);box-sizing:border-box;gap:2px;width:100%;max-width:min(92vw,340px);padding:6px;display:grid}.fld-cell{aspect-ratio:1;z-index:0;border-radius:3px;transition:background-color .34s cubic-bezier(.22,.61,.36,1),box-shadow .28s,filter .28s,transform .28s;position:relative;transform:scale(1)}.fld-cell--owned{z-index:1;filter:brightness(1.06)saturate(1.08);box-shadow:inset 0 0 0 1.5px #ffffff8c, 0 0 0 1px color-mix(in srgb, var(--text-primary) 18%, transparent)}.dark .fld-cell--owned{filter:brightness(1.1)saturate(1.05);box-shadow:inset 0 0 0 1.5px #ffffff47,0 0 0 1px #ffffff38}.fld-cell--origin:after{content:"";pointer-events:none;background:#ffffffb3;border-radius:50%;width:22%;height:22%;position:absolute;top:18%;left:18%;box-shadow:0 0 0 1px #00000040}.dark .fld-cell--origin:after{background:#ffffff8c}.fld-cell--joining{animation:.45s cubic-bezier(.22,.61,.36,1) both fld-join}@keyframes fld-join{0%{filter:brightness(1.35);transform:scale(.86)}55%{filter:brightness(1.12);transform:scale(1.06)}to{filter:brightness(1.06)saturate(1.08);transform:scale(1)}}.fld-board{transition:box-shadow .24s,transform .24s}.fld-board--done{box-shadow:0 0 0 2px color-mix(in srgb, var(--mix-accent-flood) 60%, transparent)}.fld-board--won{box-shadow:0 0 0 2px var(--mix-accent-flood), 0 0 18px color-mix(in srgb, var(--mix-accent-flood) 45%, transparent);animation:.4s fld-win}@keyframes fld-win{0%{transform:scale(1)}45%{transform:scale(1.03)}to{transform:scale(1)}}.fld-board--lost{box-shadow:0 0 0 2px color-mix(in srgb, var(--color-slot-wrong-text,#d33) 65%, transparent);animation:.34s fld-lose}@keyframes fld-lose{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.fld-cell--c0{background:var(--fld-c0)}.fld-cell--c1{background:var(--fld-c1)}.fld-cell--c2{background:var(--fld-c2)}.fld-cell--c3{background:var(--fld-c3)}.fld-cell--c4{background:var(--fld-c4)}.fld-cell--c5{background:var(--fld-c5)}@media (prefers-reduced-motion:reduce){.fld-cell{transition:none;transition-delay:0s!important;animation:none!important}.fld-cell--joining{animation:none}.fld-board,.fld-board--won,.fld-board--lost{transition:none;animation:none}}.fld-swatches{grid-template-columns:repeat(6,1fr);gap:8px;width:100%;max-width:min(92vw,340px);display:grid}.fld-swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:50%;padding:0;transition:transform .1s}.fld-swatch:active:not(:disabled){transform:scale(.9)}.fld-swatch--current{border-color:var(--text-primary);cursor:default}.fld-swatch:disabled:not(.fld-swatch--current){opacity:.5;cursor:default}.fld-swatch--c0{background:var(--fld-c0)}.fld-swatch--c1{background:var(--fld-c1)}.fld-swatch--c2{background:var(--fld-c2)}.fld-swatch--c3{background:var(--fld-c3)}.fld-swatch--c4{background:var(--fld-c4)}.fld-swatch--c5{background:var(--fld-c5)}.fld-hint{color:var(--text-muted);text-align:center;margin:0;font-size:12px}.fld-result{flex-direction:column;align-items:center;gap:10px;width:100%;max-width:min(92vw,340px);display:flex}.fld-result-line{color:var(--text-primary);text-align:center;margin:0;font-size:15px;font-weight:700}.fld-replay-line{max-width:min(92vw,340px)}.fld-result-avg{color:var(--text-secondary);text-align:center;margin:0;font-size:13px;font-weight:600}.fld-full-btn{width:100%;max-width:min(92vw,340px)}
