@layer components{.screen.fir-stage{--lime:#ccff3d;--tomato:#ff5b3a;--iris:#a592ff;padding:12px 12px max(14px, env(safe-area-inset-bottom));color:#fff;-webkit-user-select:none;user-select:none;background:radial-gradient(110% 80% at 50% 10%,#23264a 0%,#14152a 55%,#0b0c18 100%);align-items:center;gap:10px;container-type:size}.fir-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;width:min(100%,620px);display:flex}.fir-foes{background:#ffffff12;border-radius:14px;gap:3px;padding:3px;display:flex;box-shadow:inset 0 0 0 1.5px #ffffff14}.fir-foe{color:#ffffffb3;border-radius:11px;height:40px;padding:0 13px;font-size:14px;font-weight:650;transition:background .16s,color .16s}.fir-foe.is-on{color:#0d0d0f;background:var(--rn);box-shadow:inset 0 -2px #465c0066}.fir-foe:focus-visible{outline:2px solid var(--rn);outline-offset:2px}@media (hover:hover){.fir-foe:not(.is-on):hover{color:#fff;background:#ffffff14}}.fir-tally{color:#ffffff8c;align-items:center;gap:7px;font-size:13px;display:flex}.fir-tally b{font-family:var(--font-display), var(--font-sans);color:#fff;font-size:24px;font-weight:800}.fir-dot{border-radius:50%;width:14px;height:14px;display:inline-block;box-shadow:inset 0 -2px #00000040}.fir-dot.is-1{background:var(--lime)}.fir-dot.is-2{background:var(--tomato)}.fir-dot.is-3{background:var(--iris)}.fir-status{align-items:center;gap:9px;min-height:28px;font-size:16px;font-weight:650;display:flex}.fir-status.is-over{font-family:var(--font-display), var(--font-sans);letter-spacing:-.03em;animation:pop .38s var(--ease-pop) both;font-size:26px;font-weight:800}.fir-dots{gap:3px;display:inline-flex}.fir-dots i{background:currentColor;border-radius:50%;width:5px;height:5px;animation:.9s ease-in-out infinite fir-type}.fir-dots i:nth-child(2){animation-delay:.12s}.fir-dots i:nth-child(3){animation-delay:.24s}@keyframes fir-type{30%{opacity:1;translate:0 -4px}0%,60%,to{opacity:.45}}.fir-wrap{flex:1;place-items:center;width:100%;min-height:0;display:grid}.fir-play{--cell:min(calc((100cqi - 24px) / 7.3), calc((100cqb - 200px) / 7.4), 78px);width:calc(var(--cell) * 7.3)}.fir-aim{height:calc(var(--cell) * 1.05);margin:0 calc(var(--cell) * .15);position:relative}.fir-board{isolation:isolate;height:calc(var(--cell) * 6.3);padding:calc(var(--cell) * .15);border-radius:calc(var(--cell) * .32);touch-action:none;cursor:default;position:relative}.fir-board.is-yours{cursor:pointer}.fir-discs,.fir-face{inset:calc(var(--cell) * .15);position:absolute}.fir-discs{z-index:1}.fir-face{z-index:2;pointer-events:none;grid-template-columns:repeat(7,1fr);display:grid}.fir-board:before{content:"";z-index:0;border-radius:inherit;background:#00000059;position:absolute;inset:0;box-shadow:0 24px 48px -12px #0009}.fir-board:after{content:"";z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 calc(var(--cell) * .15) #3352e8, inset 0 2px 0 calc(var(--cell) * .15) #4f6cff, inset 0 -4px 0 calc(var(--cell) * .15) #1f37b8;position:absolute;inset:0}.fir-col{background:radial-gradient(circle at 50% calc(var(--cell) * .5), transparent calc(var(--cell) * .36), #00000047 calc(var(--cell) * .37), transparent calc(var(--cell) * .41)) 0 0 / 100% var(--cell), radial-gradient(circle at 50% calc(var(--cell) * .5), transparent calc(var(--cell) * .385), #3352e8 calc(var(--cell) * .395)) 0 0 / 100% var(--cell);transition:filter .16s}.fir-col.is-aim{filter:brightness(1.18)}.fir-col.is-nope{animation:.26s fir-nope}@keyframes fir-nope{25%{translate:0 -3px}75%{translate:0 3px}}.fir-disc{top:calc(var(--r) * var(--cell) + var(--cell) * .08);left:calc(var(--c) * var(--cell) + var(--cell) * .08);width:calc(var(--cell) * .84);height:calc(var(--cell) * .84);background:radial-gradient(circle at 38% 32%, #ffffff8c, transparent 42%), var(--dc);box-shadow:inset 0 0 0 calc(var(--cell) * .1) #0000001a, inset 0 0 0 calc(var(--cell) * .13) #ffffff2e, inset 0 calc(var(--cell) * -.06) 0 #00000038;border-radius:50%;transition:opacity .3s,filter .3s;position:absolute}.fir-disc.is-1{--dc:var(--lime)}.fir-disc.is-2{--dc:var(--tomato)}.fir-disc.is-3{--dc:var(--iris)}.fir-disc.is-new{animation:fir-fall calc(.22s + var(--fall) * 45ms) both}@keyframes fir-fall{0%{translate:0 calc(var(--fall) * var(--cell) * -1 - var(--cell) * 1.1);animation-timing-function:cubic-bezier(.5,0,1,1)}70%{animation-timing-function:cubic-bezier(0,0,.4,1);translate:0}84%{translate:0 calc(var(--cell) * -.14);animation-timing-function:cubic-bezier(.6,0,1,1)}to{translate:0}}.fir-board.is-over .fir-disc:not(.is-win){opacity:.5;filter:saturate(.6)}.fir-disc.is-win{animation:.9s ease-in-out .38s infinite alternate fir-win}@keyframes fir-win{to{box-shadow:0 0 0 3px #fff, 0 0 24px var(--dc);scale:1.08}}.fir-ghost{top:calc(var(--cell) * .12);left:calc(var(--c) * var(--cell) + var(--cell) * .08);opacity:.85;transition:left .12s var(--ease-out);animation:1.2s ease-in-out infinite alternate fir-hover}@keyframes fir-hover{to{translate:0 calc(var(--cell) * .08)}}.fir-line{z-index:3;inset:calc(var(--cell) * .15);width:calc(100% - var(--cell) * .3);height:calc(100% - var(--cell) * .3);pointer-events:none;position:absolute;overflow:visible}.fir-line line{stroke:#fff;stroke-width:.13px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;filter:drop-shadow(0 0 .1px #00000080);animation:fir-draw .42s .36s var(--ease-out) forwards;opacity:.9}@keyframes fir-draw{to{stroke-dashoffset:0}}.fir-board .confetti{top:10%}.fir-bottom{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;width:min(100%,620px);min-height:52px;display:flex}.fir-key{--key:#ffffff1a;--key-ink:#fff;--edge:#00000052;height:46px;box-shadow:inset 0 -3px 0 var(--edge), inset 0 0 0 1.5px #ffffff24;gap:6px;padding:0 16px;font-size:14.5px}.fir-key svg{width:18px;height:18px}.fir-said{color:#ffffffb8;flex:220px;max-width:40ch;font-size:14.5px;line-height:1.35}.fir-again{animation:pop .38s var(--ease-pop) .5s both}@media (prefers-reduced-motion:reduce){.fir-disc.is-new,.fir-disc.is-win,.fir-ghost,.fir-col.is-nope,.fir-status.is-over,.fir-again,.fir-dots i{animation:none}.fir-disc.is-win{box-shadow:0 0 0 3px #fff}.fir-line line{stroke-dashoffset:0;animation:none}}}
