.fir{display:grid;gap:12px;justify-items:center;padding:clamp(12px,3vw,24px)}
.fir-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,1vw,8px);width:min(100%,520px);padding:clamp(8px,2vw,14px);background:#2A5BD7;border:4px solid #1B1D33;box-shadow:inset 0 -6px 0 #2348B8}
.fir-col{display:grid;gap:clamp(4px,1vw,8px);padding:0;border:0;background:transparent;cursor:pointer}
.fir-col:hover:not(:disabled) .fir-slot:not(.you):not(.cpu){background:#3D4A8F}
.fir-col:disabled{cursor:default}
.fir-col:focus-visible{outline:3px solid #F6C333;outline-offset:2px}
.fir-slot{aspect-ratio:1;border-radius:50%;background:#12142A;box-shadow:inset 0 4px 0 rgba(0,0,0,.4)}
.fir-slot.you{background:#F6C333;box-shadow:inset 0 -5px 0 #C99A1A}
.fir-slot.cpu{background:#FF5A4E;box-shadow:inset 0 -5px 0 #B3261E}
.fir-slot.drop{animation:fir-drop .28s steps(4,end)}
@keyframes fir-drop{from{transform:translateY(-260%)}to{transform:none}}
.fir-slot.win{outline:4px solid #FFFFFF;outline-offset:-4px}
.fir-msg{font-family:var(--body);font-weight:600;color:#F2EEE4;text-align:center;min-height:1.5em}
@media (prefers-reduced-motion:reduce){.fir-slot.drop{animation:none}}