/* ===== Gamekit 공통 셸 (모든 게임 공용) ===== */
.gk-screen{
  --gk-bg:#0a0e14; --gk-panel:#111722; --gk-panel2:#0d131c;
  --gk-line:#1d2838; --gk-accent:#22d3ee; --gk-accent2:#f59e0b;
  --gk-danger:#ef4444; --gk-text:#cdd8e6; --gk-muted:#5f7186;
  --gk-up:#1a2433; --gk-up2:#222f42; --gk-down:#0c121b;
  position:fixed; inset:0; z-index:2147483000; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(34,211,238,.07), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(245,158,11,.06), transparent 55%),
    var(--gk-bg);
  color:var(--gk-text);
  font-family:"IBM Plex Sans KR", system-ui, sans-serif;
  -webkit-tap-highlight-color:transparent;
}
body.gk-locked{overflow:hidden !important;}
.gk-screen *{box-sizing:border-box;}
.gk-screen button{font-family:inherit; cursor:pointer; border:none; color:var(--gk-text); background:transparent;}
.gk-wrap{max-width:760px; margin:0 auto; padding:8px 14px 48px;}

/* 탑바 */
.gk-topbar{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:rgba(10,14,20,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--gk-line);}
.gk-close{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; text-decoration:none; font-size:20px; line-height:1;
  background:var(--gk-panel2); border:1px solid var(--gk-line); color:var(--gk-text); transition:.15s;}
.gk-close:hover{border-color:var(--gk-danger); color:var(--gk-danger);}
.gk-brand{font-family:"Chakra Petch",sans-serif; font-weight:700; letter-spacing:.12em; font-size:15px; color:var(--gk-muted);}
.gk-lang{display:flex; gap:2px; background:var(--gk-panel2); border:1px solid var(--gk-line); border-radius:11px; padding:3px;}
.gk-lang button{padding:6px 11px; border-radius:8px; font-size:13px; font-weight:600;
  font-family:"Chakra Petch",sans-serif; color:var(--gk-muted); transition:.15s;}
.gk-lang button.active{background:var(--gk-up2); color:var(--gk-accent);}
.gk-lang button:hover{color:var(--gk-text);}

/* 헤더 */
.gk-head{text-align:center; margin:8px 0 18px;}
.gk-head h1{font-family:"Chakra Petch", sans-serif; font-weight:700; letter-spacing:.04em;
  font-size:clamp(26px,6vw,40px); margin:0; line-height:1;
  background:linear-gradient(90deg,var(--gk-accent),#a5f3fc 40%,var(--gk-accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.gk-sub{color:var(--gk-muted); font-size:13px; margin-top:6px;}

/* 도움말 버튼 */
.gk-helpbar{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px;}
.gk-help-btn{display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:9px 16px; border-radius:11px; font-size:14px; font-weight:600;
  border:1px solid var(--gk-line); background:var(--gk-panel2); color:var(--gk-text); transition:.15s; cursor:pointer;}
.gk-help-btn:hover{border-color:var(--gk-accent); color:var(--gk-accent);}
.gk-help-btn.primary{background:linear-gradient(180deg,#16384a,#0e2733);
  border-color:rgba(34,211,238,.45); color:var(--gk-accent); box-shadow:0 0 20px rgba(34,211,238,.12);}

/* 난이도 세그먼트 / 토글 버튼 (공용) */
.gk-seg{display:flex; background:var(--gk-panel2); border:1px solid var(--gk-line); border-radius:12px; padding:4px; gap:2px;}
.gk-seg button{padding:8px 14px; border-radius:9px; font-size:14px; font-weight:600;
  font-family:"Chakra Petch", sans-serif; transition:.15s; color:var(--gk-muted);}
.gk-seg button.active{background:linear-gradient(180deg,var(--gk-up2),var(--gk-up)); color:var(--gk-accent);
  box-shadow:0 0 0 1px rgba(34,211,238,.25), 0 4px 14px rgba(0,0,0,.4);}
.gk-seg button:hover{color:var(--gk-text);}

/* HUD */
.gk-hud{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  background:linear-gradient(180deg,var(--gk-panel),var(--gk-panel2));
  border:1px solid var(--gk-line); border-radius:16px; padding:12px 18px; margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);}
.gk-stat{font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:26px; letter-spacing:.05em;
  display:flex; align-items:center; gap:8px;}
.gk-stat.right{justify-self:end;}
.gk-stat.amber{color:var(--gk-accent2);} .gk-stat.cyan{color:var(--gk-accent);}
.gk-stat .ico{font-size:18px; opacity:.85;}
.gk-face{width:50px; height:50px; border-radius:14px;
  background:linear-gradient(180deg,var(--gk-up2),var(--gk-down));
  border:1px solid var(--gk-line); font-size:24px;
  display:flex; align-items:center; justify-content:center; transition:.12s; box-shadow:0 4px 12px rgba(0,0,0,.4);}
.gk-face:active{transform:scale(.92);}

/* 메시지 */
.gk-msg{text-align:center; margin-top:16px; min-height:24px;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:17px;}
.gk-msg.win{color:var(--gk-accent);} .gk-msg.lose{color:var(--gk-danger);}
.gk-hint{text-align:center; color:var(--gk-muted); font-size:12px; margin-top:20px; line-height:1.7;}
.gk-hint b{color:var(--gk-text); font-weight:600;}

/* 학습 모드 코치 패널 */
.gk-coach{background:linear-gradient(180deg,#0f2230,#0c1922);
  border:1px solid rgba(34,211,238,.3); border-radius:16px; padding:14px 16px; margin-bottom:14px;
  box-shadow:0 0 28px rgba(34,211,238,.1);}
.gk-coach .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.gk-coach .step{font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:13px; color:var(--gk-accent); letter-spacing:.06em;}
.gk-coach .exit{font-size:12px; color:var(--gk-muted); padding:3px 8px; border-radius:7px;}
.gk-coach .exit:hover{color:var(--gk-text);}
.gk-coach .cmsg{font-size:15px; line-height:1.6; color:var(--gk-text); min-height:24px;}
.gk-coach .cmsg b{color:var(--gk-accent);}
.gk-coach .cmsg.good{color:var(--gk-accent);}
.gk-coach .btns{display:flex; gap:8px; justify-content:flex-end; margin-top:10px;}
.gk-coach .next{padding:8px 16px; border-radius:10px; font-weight:600; font-size:14px; font-family:"Chakra Petch",sans-serif;
  background:linear-gradient(180deg,#16384a,#0e2733); border:1px solid rgba(34,211,238,.45); color:var(--gk-accent);}

/* 리더보드 */
.gk-lb-wrap{margin-top:34px;}
.gk-lb-title{text-align:center; font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:18px;
  color:var(--gk-accent); letter-spacing:.02em; margin:0 0 14px;}
.gk-lb-tabs{display:flex; gap:2px; justify-content:center; margin-bottom:12px;
  background:var(--gk-panel2); border:1px solid var(--gk-line); border-radius:11px; padding:4px; width:max-content; margin-left:auto; margin-right:auto;}
.gk-lb-tabs button{padding:6px 16px; border-radius:8px; font-size:13px; font-weight:600;
  font-family:"Chakra Petch",sans-serif; color:var(--gk-muted); transition:.15s;}
.gk-lb-tabs button.active{background:var(--gk-up); color:var(--gk-accent2);}
.gk-lb{list-style:none; margin:0 auto; padding:0; max-width:420px;
  background:var(--gk-panel2); border:1px solid var(--gk-line); border-radius:14px; overflow:hidden;}
.gk-lb li{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--gk-line); font-size:15px;}
.gk-lb li:last-child{border-bottom:none;}
.gk-lb li.empty{color:var(--gk-muted); font-size:13px; justify-content:center; padding:22px 16px;}
.gk-lb .rk{font-family:"Chakra Petch",sans-serif; font-weight:700; color:var(--gk-muted); width:24px;}
.gk-lb li:nth-child(1) .rk{color:#ffd54f;} .gk-lb li:nth-child(2) .rk{color:#cfd8e3;} .gk-lb li:nth-child(3) .rk{color:#e0a06a;}
.gk-lb .nm{flex:1; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gk-lb .sc{font-family:"Chakra Petch",sans-serif; font-weight:700; color:var(--gk-accent);}

/* 학습 모드 타겟 하이라이트(범용) */
.gk-screen .hint-target{outline:2px solid var(--gk-accent); outline-offset:-2px; animation:gkpulse 1.1s ease-in-out infinite;}
@keyframes gkpulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.5);} 50%{box-shadow:0 0 0 6px rgba(34,211,238,0);}}