.fiar{--fiar-board: #55607a;--fiar-hole: var(--bg);--fiar-gap: clamp(4px, 1.4vw, 9px);width:100%}:root[data-theme=dark] .fiar{--fiar-board: #3a4560}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .fiar{--fiar-board: #3a4560}}.fiar-banner{display:inline-flex;align-items:center;gap:6px}.fiar-dot{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.15em}.fiar-dot.p1,.fiar-disc.p1{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--p1) 70%,#fff),var(--p1) 55%,color-mix(in srgb,var(--p1) 75%,#000))}.fiar-dot.p2,.fiar-disc.p2{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--p3) 70%,#fff),var(--p3) 55%,color-mix(in srgb,var(--p3) 75%,#000))}.fiar-frame{width:min(520px,100%);display:grid;gap:4px}.fiar-arrows{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--fiar-gap);padding:0 var(--fiar-gap)}.fiar-arrow{appearance:none;border:0;background:transparent;color:var(--muted);font-size:clamp(.9rem,3.5vw,1.2rem);min-height:32px;border-radius:8px;cursor:pointer;opacity:.35;transition:opacity .15s,color .15s}.fiar-arrow:hover:not(:disabled),.fiar-arrow.cursor:not(:disabled){opacity:1}.fiar-arrow.p1:not(:disabled){color:var(--p1)}.fiar-arrow.p2:not(:disabled){color:var(--p3)}.fiar-arrow:disabled{cursor:default;opacity:.12}.fiar-board{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--fiar-gap);padding:var(--fiar-gap);background:linear-gradient(180deg,color-mix(in srgb,var(--fiar-board) 88%,#fff),var(--fiar-board));border-radius:14px;box-shadow:var(--shadow),inset 0 -4px #0000002e;touch-action:manipulation;overflow:hidden}.fiar-cell{position:relative;aspect-ratio:1;border-radius:50%;background:var(--fiar-hole);box-shadow:inset 0 3px 5px #00000047;display:grid;place-items:center}.fiar-cell.playable{cursor:pointer}.fiar-cell.cursor-col{background:color-mix(in srgb,var(--fiar-hole) 88%,var(--accent))}.fiar-cell.landing:after{content:"";width:34%;height:34%;border-radius:50%;opacity:.45}.fiar-cell.landing.p1:after{background:var(--p1)}.fiar-cell.landing.p2:after{background:var(--p3)}.fiar-disc{position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 -3px #00000038,0 1px 2px #0000004d;z-index:1}.fiar-disc:after{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid rgb(255 255 255 / .22)}.fiar-disc.last:before{content:"";position:absolute;left:50%;top:50%;width:18%;height:18%;transform:translate(-50%,-50%);border-radius:50%;background:#ffffffd9}.fiar-disc.drop{animation:fiar-drop calc(.12s + var(--fall) * 55ms) cubic-bezier(.5,0,.9,.6) both}@keyframes fiar-drop{0%{transform:translateY(calc(var(--fall) * -118%))}82%{transform:translateY(0)}91%{transform:translateY(-7%)}to{transform:translateY(0)}}.fiar-cell.win{animation:fiar-pulse .8s .45s ease-in-out infinite alternate;box-shadow:0 0 0 3px var(--hl),0 0 16px var(--hl);z-index:2}@keyframes fiar-pulse{0%{transform:scale(.92)}to{transform:scale(1.04)}}