.ap-col{display:flex;flex-direction:column;gap:10px;width:min(820px,96%)}
.ap-time{height:10px;background:rgba(255,255,255,.6);border-radius:99px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(120,80,40,.2)}
#ap-bar{height:100%;width:100%;background:linear-gradient(90deg,#e2724a,#f0b43a);border-radius:99px;transition:width .1s linear}
#ap-wrap{position:relative;background:#f4fbe9;border-radius:14px;padding:8px;box-shadow:0 8px 18px rgba(70,40,10,.22)}
#ap-board{position:relative;display:grid;gap:1px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
.ap{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;transition:transform .2s,opacity .2s}
.ap-svg{position:absolute;inset:0;width:100%;height:100%}
.ap b{position:relative;color:#fff;font-weight:800;font-size:clamp(11px,2.1vw,17px);margin-top:12%;text-shadow:0 1px 1px rgba(0,0,0,.35);pointer-events:none}
.ap.on{transform:scale(1.12)}
.ap.on .ap-svg path:nth-child(3){fill:#ff6a55}
.ap.gone{opacity:0;transform:scale(.3);pointer-events:none}
.plain .ap-svg{display:none}
.plain .ap{background:#fff;border-radius:6px;box-shadow:inset 0 0 0 1px #d9d0bd}
.plain .ap b{color:#262320;text-shadow:none;margin-top:0}
.plain .ap.on{background:#ffe0d6}
.ap-sel{position:absolute;border:2px solid #2f6f6a;background:rgba(47,111,106,.12);border-radius:4px;pointer-events:none;z-index:2}
.ap-sel.ok{border-color:#2f9e44;background:rgba(47,158,68,.2)}
.ap-sel.bad{border-color:#d63a30;background:rgba(214,58,48,.1)}
#ap-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(244,251,233,.72);border-radius:14px;z-index:3;text-align:center;padding:16px}
#ap-start p{margin:0;font-weight:700;font-size:16px}
#ap-start button{font-size:18px;padding:12px 28px}
.wait #ap-board{filter:blur(2px)}
.ap-best{font-size:22px;font-weight:800;margin:4px 0 8px}
.ap-sel::after{content:attr(data-sum);position:absolute;right:-8px;top:-12px;background:#2f6f6a;color:#fff;font-weight:800;font-size:13px;border-radius:99px;padding:2px 8px;min-width:12px;text-align:center}
.ap-sel.ok::after{background:#2f9e44}.ap-sel.bad::after{background:#d63a30}
.ap-sel[data-sum=""]::after{display:none}