/* 플레이그라운드 공용 스타일 — study.css 다음에 로드. 디자인 토큰만 사용 (골드/다크 리터럴 금지) */

/* 상단 바 (게임 페이지: 허브 링크 + 최고 기록) */
.pg-topbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 18px}
.pg-hub-link{font-family:'DM Mono','Noto Sans KR',monospace;font-size:.85rem;padding:10px 18px;border-radius:999px;
  background:var(--bg2);border:1px solid var(--border);color:var(--muted);text-decoration:none;transition:all .2s}
.pg-hub-link:hover{color:var(--cyan);border-color:rgba(var(--ac-rgb),.4)}
.pg-best{font-family:'DM Mono','Noto Sans KR',monospace;font-size:.78rem;color:var(--muted2);margin-left:auto;align-self:center}
.pg-best b{color:var(--cyan)}

/* 허브 게임 카드 */
.pg-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:8px}
.pg-game{display:block;padding:22px 20px;border:1px solid var(--border);border-radius:16px;background:var(--bg2);
  text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s}
.pg-game:hover{border-color:rgba(var(--ac-rgb),.5);transform:translateY(-3px)}
.pg-game .ico{font-size:1.7rem;display:block;margin-bottom:10px}
.pg-game h3{font-size:1.02rem;font-weight:700;margin:0 0 6px;word-break:keep-all}
.pg-game p{font-size:.85rem;color:var(--muted);line-height:1.65;word-break:keep-all;margin:0 0 12px}
.pg-game .rec{font-family:'DM Mono','Noto Sans KR',monospace;font-size:.75rem;color:var(--muted2)}
.pg-game .rec 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:'DM Mono','Noto Sans KR',monospace;font-size:.75rem;letter-spacing:.12em;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),.45)}
.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:'DM Mono','Noto Sans KR',monospace;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:'DM Mono','Noto Sans KR',monospace;font-size:.72rem;letter-spacing:.1em;
  padding:4px 12px;border-radius:999px;background:var(--tag-bg);border:1px solid var(--border);color:var(--muted2);margin-bottom:14px}

/* 타자 */
.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),.6)}
.ty-input.err{border-color:#e05555;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:'DM Mono','Noto Sans KR',monospace;font-size:3.2rem;font-weight:500;color:var(--cyan);line-height:1;margin-bottom:6px}
.sq-count.hot{color:#e05555}
.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:#e05555;color:#e05555}
.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(80,200,120,.55)}
.sq-exp.bad{border-color:rgba(220,80,80,.6)}
.sq-exp .tag{font-weight:700;margin-right:6px}
.sq-exp.good .tag{color:#50c878}
.sq-exp.bad .tag{color:#e05555}

/* GAME START 버튼 */
.pg-start{position:relative;overflow:hidden;font-family:'DM Mono','Noto Sans KR',monospace;font-size:1.02rem;font-weight:500;
  letter-spacing:.24em;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%}}

/* 결과 */
.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}
@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-hub-link,.pg-game,.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,.pg-game:hover{transform:none}}