선택 과부하

<div class="stage">
  <div class="pane"><div class="tag">A · 24</div>
    <div class="grid g24" id="g24"></div>
    <div class="cur" id="c1">&#10148;</div>
  </div>
  <div class="pane"><div class="tag">B · 6</div>
    <div class="grid g6" id="g6"></div>
    <div class="cur" id="c2">&#10148;</div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden;padding:26px 8px 10px}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.grid{display:grid;gap:4px;height:100%}
.g24{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)}
.g6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.grid span{border-radius:5px;background:var(--line)}
.g6 span:nth-child(4){background:var(--accent-3)}
.cur{position:absolute;font-size:13px;color:var(--fg);transform:rotate(-45deg)}
#c1{animation:hunt 3.6s ease-in-out infinite}
#c2{animation:pick 1.2s ease-out infinite}
@keyframes hunt{0%,100%{left:10%;top:85%}15%{left:70%;top:20%}30%{left:30%;top:50%}45%{left:80%;top:70%}60%{left:20%;top:20%}75%{left:55%;top:40%}90%{left:10%;top:85%}}
@keyframes pick{0%{left:10%;top:85%}80%,100%{left:60%;top:55%}}

const g24 = document.getElementById('g24');
for (let i = 0; i < 24; i++) g24.appendChild(document.createElement('span'));
const g6 = document.getElementById('g6');
for (let i = 0; i < 6; i++) g6.appendChild(document.createElement('span'));