/* 왼손? 오른손? (act/handside.php) */
#hs-wrap{width:100%;margin:14px auto 0}
#hs-game{position:relative;display:grid;width:100%;overflow:hidden;border-radius:22px;color:#fff;user-select:none;-webkit-user-select:none;background:#0d1330;box-shadow:0 16px 42px rgba(10,15,40,.35)}
#hs-game.good::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 0 5px rgba(74,222,128,.85);border-radius:22px;animation:hs-good .22s ease-out forwards}
@keyframes hs-good{0%{opacity:1}100%{opacity:0}}
#hs-game.dead::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:rgba(244,63,94,.18);border-radius:22px}
#hs-game.shake{animation:hs-shake .3s}
@keyframes hs-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.hs-board{grid-area:1/1;position:relative;min-width:0}
#hs-canvas{display:block;width:100%;height:330px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
/* 점수판은 캔버스 위에 겹치지 않고 그 위 줄에 둔다(겹치면 손가락 끝이 가려짐, 10-08 사용자 지적) */
.hs-hud{display:flex;flex-direction:column;padding:10px 12px 8px;background:rgba(5,8,28,.55)}
.hs-hud-row{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px}
.hs-stat{min-width:0;padding:7px 5px;text-align:center;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(8,12,40,.68);box-shadow:0 5px 15px rgba(0,0,0,.16);backdrop-filter:blur(5px)}
.hs-stat small{display:block;color:#a5b4fc;font-size:.66rem;font-weight:800;letter-spacing:.04em}
.hs-stat strong{display:block;margin-top:1px;font-size:1.16rem;line-height:1.15;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-stat:nth-child(1) strong{color:#fde047}
.hs-stat:nth-child(3) strong{font-size:.92rem;color:#c7d2fe}
.hs-energy-wrap{margin-top:8px;height:14px;border-radius:8px;overflow:hidden;background:rgba(8,12,40,.72);border:1px solid rgba(255,255,255,.16)}
#hs-energy{height:100%;width:100%;border-radius:8px;background:linear-gradient(90deg,#34d399,#fde047);transition:width .09s linear}
#hs-energy.low{background:linear-gradient(90deg,#f43f5e,#fb923c);animation:hs-blink .5s linear infinite}
@keyframes hs-blink{50%{opacity:.55}}
.hs-flash{position:absolute;z-index:7;left:50%;top:30%;transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;padding:9px 18px;border-radius:18px;font-size:1.3rem;font-weight:900;color:#0f172a;background:#fde047;white-space:nowrap}
.hs-flash.show{animation:hs-pop .65s cubic-bezier(.16,1,.3,1)}
@keyframes hs-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}20%,70%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-64%) scale(.95)}}
.hs-verdict{position:absolute;z-index:7;left:50%;bottom:16px;transform:translateX(-50%) scale(.8);opacity:0;pointer-events:none;padding:10px 20px;border-radius:16px;font-size:1.25rem;font-weight:900;white-space:nowrap;transition:transform .18s,opacity .18s}
.hs-verdict.on{opacity:1;transform:translateX(-50%) scale(1)}
.hs-verdict.wrong{background:#f43f5e;color:#fff}
.hs-verdict.tired{background:#fb923c;color:#1f1300}
.hs-verdict.cap{background:#fde047;color:#1f1300}
.hs-controls{display:flex;gap:10px;padding:12px;background:rgba(5,8,28,.55)}
.hs-ctl{flex:1;padding:12px 8px;border:0;border-radius:16px;cursor:pointer;touch-action:manipulation;color:#fff;font-size:1.08rem;font-weight:900;-webkit-tap-highlight-color:transparent;box-shadow:0 6px 0 rgba(0,0,0,.32);user-select:none;-webkit-user-select:none}
.hs-ctl:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.32)}
.hs-ctl small{display:block;font-size:.68rem;font-weight:800;opacity:.78;margin-top:2px}
#hs-left{background:linear-gradient(135deg,#2563eb,#38bdf8)}
#hs-right{background:linear-gradient(135deg,#f43f5e,#fb923c)}
.hs-ctl .hs-key{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.25);font-size:.7rem}
.hs-screen{grid-area:1/1;position:relative;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 18px 20px;box-sizing:border-box;text-align:center;background:radial-gradient(circle at 50% 18%,rgba(99,102,241,.28),transparent 38%),linear-gradient(160deg,rgba(13,19,48,.97),rgba(24,22,66,.97))}
.hs-icon{font-size:2.4rem;line-height:1.1;margin-bottom:4px;filter:drop-shadow(0 9px 15px rgba(0,0,0,.3))}
.hs-screen h2{margin:0 0 6px;font-size:1.6rem;font-weight:900;word-break:keep-all;color:#fff}
.hs-screen p{max-width:420px;margin:0 0 10px;color:#cbd5e1;line-height:1.55;font-size:.92rem;word-break:keep-all}
.hs-screen p b{color:#fde68a}
.hs-demo{display:flex;gap:14px;margin:0 0 12px;justify-content:center}
.hs-demo div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px 5px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.hs-demo canvas{width:84px;height:100px;display:block}
.hs-demo span{font-size:.74rem;font-weight:800;color:#c7d2fe;line-height:1.35}
.hs-demo span b{color:#fde047}
.hs-btn{min-width:190px;padding:14px 30px;border:0;border-radius:30px;cursor:pointer;color:#0f172a;background:linear-gradient(135deg,#a5b4fc,#fde047);font-size:1.08rem;font-weight:900;box-shadow:0 10px 24px rgba(165,180,252,.28)}
.hs-best-line{margin:0 0 10px;color:#a5b4fc;font-size:.86rem;font-weight:800}
.hs-best-line b{color:#fde047}
.hs-result-score{margin:2px 0;font-size:3.4rem;line-height:1;font-weight:900;color:#fde047;text-shadow:0 0 22px rgba(253,224,71,.28)}
.hs-result-score small{font-size:1rem;color:#94a3b8;margin-left:2px}
.hs-grade{margin:5px 0 6px;font-size:1.36rem;font-weight:900;color:#fff}
.hs-detail{margin:0 0 12px;color:#a5f3fc;font-size:.84rem;font-weight:800;line-height:1.5}
.hs-newrecord{display:inline-block;margin:0 0 8px;padding:5px 16px;border-radius:20px;background:rgba(253,224,71,.16);border:1px solid rgba(253,224,71,.5);color:#fde047;font-size:.88rem;font-weight:900;animation:hs-record 1s ease-in-out infinite}
@keyframes hs-record{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.hs-keyhint{margin-top:9px;font-size:.72rem;color:#818cf8}
#hs-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:.84rem;color:var(--muted,#6b7280)}
#hs-meta b{color:var(--primary,#4f8cff)}
.hs-guide{text-align:left;line-height:1.7;margin-top:16px}
.hs-guide h3{font-size:1rem;margin:0 0 6px}
.hs-guide p{font-size:.88rem;margin:0 0 7px}
.hs-guide small{font-size:.78rem;color:var(--muted,#6b7280);display:block}
.hs-guide table{width:100%;border-collapse:collapse;margin:4px 0 8px;font-size:.84rem}
.hs-guide th,.hs-guide td{border:1px solid #e6e8ee;padding:5px 6px;text-align:center}
.hs-guide th{background:#f6f8fc;font-weight:700;color:#4a5668}
@media (max-width:600px){
  #hs-game{border-radius:18px}
  #hs-canvas{height:300px}
  .hs-screen h2{font-size:1.42rem}
  .hs-screen p{font-size:.88rem}
  .hs-result-score{font-size:3.2rem}
  .hs-ctl{font-size:1rem;padding:13px 8px}
  .hs-ctl .hs-key{display:none}
  .hs-keyhint{display:none}
  .hs-demo canvas{width:80px;height:98px}
  .hs-stat strong{font-size:1.04rem}
  .hs-stat:nth-child(3) strong{font-size:.82rem}
}
@media (max-width:380px){
  .hs-demo{gap:8px}
  .hs-demo span{font-size:.68rem}
  .hs-flash{font-size:1.1rem}
}