/* into AX 플레이그라운드 공용 스타일 — 자족형(스터디 CSS 미로드). 다크 네이비 팔레트. */
:root{
  --bg:#0f172a; --bg2:#1e293b; --border:#334155;
  --text:#e2e8f0; --muted:#cbd5e1; --muted2:#94a3b8;
  --cyan:#38bdf8; --gold:#fbbf24; --good:#4ade80; --danger:#f87171;
  --on-accent:#0f172a; --tag-bg:rgba(255,255,255,.08); --ac-rgb:56,189,248;
  --mono:'Consolas','Malgun Gothic',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Segoe UI','Malgun Gothic',sans-serif;line-height:1.6;padding:28px 16px 48px}

/* 페이지 컨테이너 */
.pg-page{max-width:760px;margin:0 auto}
.pg-h1{font-size:1.7rem;font-weight:900;margin:14px 0 6px;word-break:keep-all}
.pg-sub{font-size:.92rem;color:var(--muted);margin:0 0 20px;word-break:keep-all}

/* 상단 바 (게임 목록 링크 + 최고 기록) */
.pg-topbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 4px}
.pg-topbar a{font-family:var(--mono);font-size:.85rem;padding:8px 16px;border-radius:999px;
  background:var(--bg2);border:1px solid var(--border);color:var(--muted);text-decoration:none;transition:all .2s}
.pg-topbar a:hover{color:var(--cyan);border-color:rgba(var(--ac-rgb),.5)}
.pg-best{font-family:var(--mono);font-size:.78rem;color:var(--muted2);margin-left:auto;align-self:center}
.pg-best b{color:var(--cyan)}

/* 설정 패널 */
.pg-setup{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--bg2)}
.pg-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pg-row .lbl{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--muted2);flex:0 0 84px}
.pg-opt{font-size:.85rem;padding:8px 15px;border-radius:999px;background:transparent;border:1px solid var(--border);
  color:var(--muted);cursor:pointer;transition:all .15s;word-break:keep-all}
.pg-opt:hover{border-color:rgba(var(--ac-rgb),.5)}
.pg-opt.on{color:var(--on-accent);background:var(--cyan);border-color:var(--cyan);font-weight:700}
.pg-desc{font-size:.85rem;color:var(--muted);line-height:1.7;word-break:keep-all}

/* 진행 HUD·카드 */
.pg-hud{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;color:var(--muted2);margin-bottom:12px}
.pg-hud b{color:var(--cyan)}
.pg-card{border:1px solid var(--border);border-radius:16px;background:var(--bg2);padding:26px 22px;text-align:center}
.pg-chip{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  padding:4px 12px;border-radius:999px;background:var(--tag-bg);border:1px solid var(--border);color:var(--muted2);margin-bottom:14px}

/* GAME START 버튼 */
.pg-start{position:relative;overflow:hidden;font-family:var(--mono);font-size:1.02rem;font-weight:700;
  letter-spacing:.2em;padding:16px 44px 16px 48px;border-radius:999px;border:none;cursor:pointer;color:var(--on-accent);
  background:linear-gradient(135deg,var(--cyan),var(--gold));animation:pgPulse 2.4s ease-out infinite;transition:transform .18s}
.pg-start:hover{transform:scale(1.06)}
.pg-start:active{transform:scale(.97)}
.pg-start::after{content:'';position:absolute;top:0;left:-70%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);
  animation:pgSheen 2.4s ease-in-out infinite}
@keyframes pgPulse{0%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),.5)}70%{box-shadow:0 0 0 16px rgba(var(--ac-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),0)}}
@keyframes pgSheen{0%,50%{left:-70%}88%,100%{left:130%}}

/* 다음/한 판 더 등 리셋 버튼 */
.qz-reset{font-size:.9rem;font-weight:700;padding:11px 22px;border-radius:12px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--border);color:var(--text);transition:all .15s}
.qz-reset:hover{border-color:var(--cyan);color:var(--cyan)}

/* 타자 */
.ty-word{font-size:2rem;font-weight:900;letter-spacing:.04em;word-break:keep-all;line-height:1.4;margin-bottom:8px}
.ty-word .ok{color:var(--cyan)}
.ty-word .todo{color:var(--muted2)}
.ty-word .mask{color:var(--muted2);letter-spacing:.12em}
.ty-desc{font-size:.92rem;color:var(--muted);line-height:1.75;word-break:keep-all;max-width:560px;margin:0 auto 18px}
.ty-input{width:100%;max-width:420px;font-family:inherit;font-size:1.15rem;font-weight:700;text-align:center;
  padding:13px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;
  transition:border-color .15s}
.ty-input:focus{border-color:rgba(var(--ac-rgb),.7)}
.ty-input.err{border-color:var(--danger);animation:tyshake .18s}
@keyframes tyshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ty-reveal{font-size:1.1rem;font-weight:700;color:var(--gold);margin-top:10px}

/* 스피드 퀴즈 */
.sq-count{font-family:var(--mono);font-size:3.2rem;font-weight:500;color:var(--cyan);line-height:1;margin-bottom:6px}
.sq-count.hot{color:var(--danger)}
.sq-bar{height:5px;border-radius:99px;background:var(--tag-bg);overflow:hidden;max-width:340px;margin:0 auto 20px}
.sq-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold));border-radius:99px}
.sq-word{font-size:2.4rem;font-weight:900;word-break:keep-all;line-height:1.35;margin:6px 0 24px}
.sq-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sq-btn{font-size:1rem;font-weight:700;padding:15px 34px;border-radius:14px;cursor:pointer;transition:all .15s;word-break:keep-all}
.sq-btn.yes{background:var(--cyan);border:1px solid var(--cyan);color:var(--on-accent)}
.sq-btn.yes:hover{background:var(--gold);border-color:var(--gold)}
.sq-btn.pass{background:transparent;border:1px solid var(--border);color:var(--muted)}
.sq-btn.pass:hover{border-color:var(--danger);color:var(--danger)}
.sq-exp{max-width:560px;margin:4px auto 0;padding:16px 18px;border-radius:12px;text-align:left;
  font-size:.92rem;line-height:1.75;word-break:keep-all;border:1px solid var(--border);background:var(--bg)}
.sq-exp.good{border-color:rgba(74,222,128,.55)}
.sq-exp.bad{border-color:rgba(248,113,113,.6)}
.sq-exp .tag{font-weight:700;margin-right:6px}
.sq-exp.good .tag{color:var(--good)}
.sq-exp.bad .tag{color:var(--danger)}

/* 결과 */
.pg-result{text-align:center;padding:30px 20px;border:1px solid var(--border);border-radius:16px;background:var(--bg2)}
.pg-result .big{font-size:2.2rem;font-weight:900;color:var(--cyan);margin:6px 0}
.pg-result .sub2{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.pg-miss{text-align:left;max-width:600px;margin:18px auto 0;display:flex;flex-direction:column;gap:10px}
.pg-miss div{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);font-size:.88rem;line-height:1.65;word-break:keep-all}
.pg-miss b{color:var(--gold)}
.pg-actions{display:flex;gap:10px;margin-top:18px;justify-content:center;flex-wrap:wrap}
.pg-hint{font-size:.8rem;color:var(--muted2);margin-top:10px;word-break:keep-all}

/* 뱅크샷 전용 */
.bk-q{border:1px solid var(--border);border-radius:16px 16px 0 0;background:var(--bg2);padding:18px 20px 14px;text-align:center}
.bk-q .q{font-size:1.02rem;font-weight:700;line-height:1.6;word-break:keep-all}
.bk-wrap{position:relative;border:1px solid var(--border);border-top:none;border-radius:0 0 16px 16px;overflow:hidden;background:var(--bg)}
.bk-wrap canvas{display:block;width:100%;touch-action:none;cursor:crosshair}
.bk-exp{margin-top:12px}

@media(max-width:640px){.ty-word{font-size:1.5rem}.sq-word{font-size:1.7rem}.pg-row .lbl{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.pg-topbar a,.pg-opt,.ty-input,.sq-btn,.pg-start{transition:none}
  .ty-input.err,.pg-start{animation:none}.pg-start::after{display:none}.pg-start:hover{transform:none}}