/* 미니게임 공통 스타일 (css/style.css 위에 덧입힘) */
.g-stage{ padding:6px 22px 26px; text-align:center; }
.g-title{ font-size:26px; line-height:1.3; margin:10px 0 8px; color:var(--ink); }
.g-sub{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; }
.g-stats{ display:flex; gap:8px; margin:0 0 14px; }
.g-stat{ flex:1; background:var(--bg); border-radius:14px; padding:9px 6px; font-size:11.5px; color:var(--ink-faint); font-weight:700; }
.g-stat b{ display:block; font-size:19px; color:var(--ink); margin-top:2px; font-variant-numeric:tabular-nums; }
.g-hint{ min-height:22px; font-size:13.5px; color:var(--ink-soft); font-weight:600; margin:10px 0 0; }
.g-nosel{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* 결과 패널 */
.g-result{ padding:4px 0 0; }
.g-result .g-emoji{ font-size:54px; line-height:1; margin:4px 0 6px; }
.g-result .g-label{ font-size:13px; color:var(--ink-faint); font-weight:700; margin:0; }
.g-result .g-big{ font-size:46px; font-weight:900; color:var(--accent); margin:2px 0; font-variant-numeric:tabular-nums; line-height:1.15; }
.g-result .g-big small{ font-size:18px; font-weight:800; color:var(--ink-soft); margin-left:3px; }
.g-result .g-tier{ display:inline-block; margin:6px 0 10px; padding:7px 16px; border-radius:999px; background:var(--lime); color:var(--lime-ink); font-weight:800; font-size:14px; }
.g-result .g-best{ font-size:13.5px; color:var(--ink-soft); margin:0 0 14px; }
.g-result .g-best b{ color:var(--ink); }
.g-result .g-newbest{ color:var(--accent-dark); font-weight:800; }

/* 반응속도 */
.rx-pad{ height:270px; border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; cursor:pointer; transition:background .08s; padding:0 16px; }
.rx-pad .rx-main{ font-size:26px; font-weight:900; }
.rx-pad .rx-note{ font-size:13.5px; font-weight:600; opacity:.9; }
.rx-idle{ background:#55597A; }
.rx-wait{ background:#E5484D; }
.rx-go{ background:#22B573; }
.rx-early{ background:#E8A100; }
.rx-dots{ display:flex; justify-content:center; gap:8px; margin:0 0 14px; }
.rx-dot{ width:11px; height:11px; border-radius:50%; background:var(--line); }
.rx-dot.on{ background:var(--accent); }

/* 숫자 순서 터치 */
.nt-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:8px; }
.nt-cell{ aspect-ratio:1; border-radius:13px; border:1.5px solid var(--line); background:#fff; font-size:21px; font-weight:800; font-family:inherit; color:var(--ink); cursor:pointer; padding:0; transition:transform .06s; }
.nt-cell:active{ transform:scale(.94); }
.nt-cell.done{ background:var(--lime); border-color:var(--lime); color:var(--lime-ink); opacity:.45; pointer-events:none; }
.nt-cell.wrong{ animation:gshake .28s; border-color:#E5484D; }
@keyframes gshake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

/* 카드 짝 맞추기 */
.mm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:8px; }
.mm-card{ aspect-ratio:1; border-radius:14px; border:0; background:var(--ink); color:#fff; font-size:30px; font-family:inherit; cursor:pointer; padding:0; position:relative; transition:transform .15s, background .15s; }
.mm-card .mm-back{ font-size:22px; font-weight:900; opacity:.55; }
.mm-card .mm-face{ display:none; }
.mm-card.open, .mm-card.matched{ background:#fff; border:1.5px solid var(--line); }
.mm-card.open .mm-back, .mm-card.matched .mm-back{ display:none; }
.mm-card.open .mm-face, .mm-card.matched .mm-face{ display:inline; }
.mm-card.matched{ background:var(--lime); border-color:var(--lime); }
.mm-card:active{ transform:scale(.95); }

/* 색깔 글자 맞추기 */
.st-word{ font-size:64px; font-weight:900; margin:26px 0 22px; line-height:1.1; min-height:72px; }
.st-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.st-opt{ padding:17px 0; border-radius:16px; border:1.5px solid var(--line); background:#fff; font-size:19px; font-weight:800; font-family:inherit; color:var(--ink); cursor:pointer; }
.st-opt:active{ transform:scale(.96); }
.st-flash-ok{ animation:gflashok .25s; }
.st-flash-bad{ animation:gflashbad .25s; }
@keyframes gflashok{ 0%{ background:#c6f1d6; } 100%{ background:#fff; } }
@keyframes gflashbad{ 0%{ background:#ffd0d0; } 100%{ background:#fff; } }
.st-bar{ height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin:0 0 6px; }
.st-bar i{ display:block; height:100%; width:100%; background:var(--accent); transition:width .1s linear; }

/* 10초 클릭 속도 */
.cps-btn{ width:210px; height:210px; border-radius:50%; border:0; background:var(--accent); color:#fff; font-size:26px; font-weight:900; font-family:inherit; box-shadow:0 14px 30px -10px rgba(255,90,60,.6); margin:14px auto 6px; display:block; cursor:pointer; }
.cps-btn:active{ transform:scale(.96); }
.cps-btn.run{ background:#1B1B2F; box-shadow:0 14px 30px -10px rgba(27,27,47,.5); }
.cps-count{ font-size:44px; font-weight:900; font-variant-numeric:tabular-nums; }

/* 게임 목록 */
.games-hero{ padding:8px 4px 0; text-align:center; }
.games-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:760px; margin:0 auto; }
@media (max-width:520px){ .games-grid{ grid-template-columns:1fr; } }
.games-grid .selector-card{ max-width:none; }
.games-nav{ text-align:center; margin:18px 0 0; }
.games-nav a{ color:var(--accent-dark); font-weight:700; text-decoration:none; font-size:14px; }
.games-nav a:hover{ text-decoration:underline; }
.games-grid .selector-card{ align-items:center; text-align:center; text-decoration:none; color:inherit; }
.games-grid .selector-card .sc-icon{ margin:0 auto; }
.games-grid .selector-card .sc-meta{ margin-top:6px; }

/* ===== 게임 화면 크게 ===== */
.app-card.g-card{ max-width:640px; }
.g-card .g-stage{ padding:6px 20px 28px; }
.g-card .g-title{ font-size:30px; }
.g-card .g-stat b{ font-size:22px; }
.g-card .rx-pad{ height:380px; }
.g-card .rx-pad .rx-main{ font-size:32px; }
.g-card .nt-grid{ gap:9px; }
.g-card .nt-cell{ font-size:26px; border-radius:16px; }
.g-card .mm-grid{ gap:11px; }
.g-card .mm-card{ font-size:38px; }
.g-card .st-word{ font-size:84px; margin:40px 0 32px; }
.g-card .st-opt{ padding:22px 0; font-size:22px; }
.g-card .cps-btn{ width:270px; height:270px; font-size:30px; }
.g-card .cps-btn.run{ font-size:48px; }
@media (max-width:480px){
  .page-center{ padding:12px 8px; }
  .g-card .g-stage{ padding:4px 12px 22px; }
  .g-card .rx-pad{ height:330px; }
  .g-card .cps-btn{ width:240px; height:240px; }
}

/* ===== 새 게임 공통 ===== */
.g-area{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; min-height:20px; }
.g-field{ position:relative; width:100%; aspect-ratio:1/1; background:#fff; border:1.5px solid var(--line); border-radius:22px; overflow:hidden; touch-action:manipulation; }
.g-field.tall{ aspect-ratio:3/4; touch-action:none; }
.g-field.flat{ aspect-ratio:auto; min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:14px; box-sizing:border-box; }
.g-target{ position:absolute; border:0; border-radius:50%; background:var(--accent); box-shadow:0 8px 18px -8px rgba(255,90,60,.7); cursor:pointer; padding:0; font-size:26px; line-height:1; touch-action:manipulation; }
.g-target:active{ transform:scale(.9); }
.g-hole-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; }
.g-hole{ aspect-ratio:1; border-radius:50%; border:0; background:#E7D7C1; box-shadow:inset 0 -8px 0 rgba(0,0,0,.12); font-size:44px; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.g-hole span{ transform:scale(0); transition:transform .08s; display:block; }
.g-hole.up span{ transform:scale(1); }
.g-choices{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.g-choice{ padding:20px 8px; border-radius:16px; border:1.5px solid var(--line); background:#fff; font-size:21px; font-weight:800; font-family:inherit; color:var(--ink); cursor:pointer; touch-action:manipulation; }
.g-choice:active{ transform:scale(.96); }
.g-choice.ok{ background:#c6f1d6; } .g-choice.bad{ background:#ffd0d0; }
.g-q{ font-size:46px; font-weight:900; line-height:1.2; margin:14px 0 8px; }
.g-q small{ display:block; font-size:14px; color:var(--ink-faint); font-weight:700; margin-top:4px; }
.g-pad4{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
.g-simon{ aspect-ratio:1.3; border:0; border-radius:22px; opacity:.45; cursor:pointer; transition:opacity .08s, transform .08s; padding:0; }
.g-simon.lit{ opacity:1; transform:scale(1.03); }
.g-grid{ display:grid; gap:7px; width:100%; }
.g-cell{ aspect-ratio:1; border-radius:12px; border:0; background:var(--line); cursor:pointer; padding:0; font-size:26px; font-family:inherit; font-weight:800; color:var(--ink); touch-action:manipulation; display:flex; align-items:center; justify-content:center; }
.g-cell.on{ background:var(--accent); }
.g-cell.lit{ background:var(--lime); }
.g-cell.wrong{ background:#E5484D; }
.g-tile{ aspect-ratio:1; border-radius:16px; border:0; background:var(--ink); color:#fff; font-size:34px; font-weight:900; font-family:inherit; cursor:pointer; padding:0; }
.g-tile.blank{ background:transparent; cursor:default; }
.g-input{ width:100%; box-sizing:border-box; height:56px; border:2px solid var(--line); border-radius:16px; padding:0 16px; font-size:22px; font-family:inherit; font-weight:700; text-align:center; color:var(--ink); background:#fff; }
.g-input:focus{ outline:2px solid var(--accent); }
.g-canvas{ width:100%; display:block; border-radius:22px; background:#fff; border:1.5px solid var(--line); touch-action:none; }
.g-dpad{ display:grid; grid-template-columns:repeat(3,64px); grid-template-rows:repeat(2,52px); gap:6px; justify-content:center; margin-top:4px; }
.g-dpad button{ border:0; border-radius:14px; background:var(--ink); color:#fff; font-size:22px; font-family:inherit; cursor:pointer; touch-action:manipulation; }
.g-dpad .up{ grid-column:2; grid-row:1; } .g-dpad .lf{ grid-column:1; grid-row:2; } .g-dpad .dn{ grid-column:2; grid-row:2; } .g-dpad .rt{ grid-column:3; grid-row:2; }
.g-balloon{ position:absolute; top:100%; width:54px; height:54px; border:0; background:none; font-size:46px; line-height:1; padding:0; cursor:pointer; animation:g-rise linear forwards; touch-action:manipulation; }
@keyframes g-rise{ to{ top:-70px; } }
.g-bar{ position:relative; width:100%; height:64px; border-radius:18px; background:var(--line); overflow:hidden; margin:18px 0; }
.g-bar .zone{ position:absolute; top:0; bottom:0; background:#22B573; opacity:.85; }
.g-bar .mark{ position:absolute; top:0; bottom:0; width:6px; margin-left:-3px; background:var(--ink); }
.g-big-btn{ width:100%; padding:26px 0; border:0; border-radius:20px; background:var(--accent); color:#fff; font-size:26px; font-weight:900; font-family:inherit; cursor:pointer; touch-action:manipulation; }
.g-big-btn:active{ transform:scale(.97); }
.g-big-btn.dark{ background:var(--ink); }
.g-clock{ font-size:72px; font-weight:900; font-variant-numeric:tabular-nums; margin:26px 0 10px; }
.g-circle{ width:200px; height:200px; border-radius:50%; margin:10px auto; }
.g-dots-box{ position:relative; width:100%; aspect-ratio:1.4; background:#fff; border:1.5px solid var(--line); border-radius:22px; }
.g-dot{ position:absolute; width:14px; height:14px; border-radius:50%; background:var(--ink); }
.g-card .g-q{ font-size:54px; }
.games-sec{ font-size:17px; text-align:left; max-width:760px; margin:26px auto 12px; color:var(--ink); }
.g-card .games-grid{ max-width:none; grid-template-columns:repeat(3,1fr); }
@media (max-width:640px){ .g-card .games-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:360px){ .g-card .games-grid{ grid-template-columns:1fr; } }
.g-card .games-grid .selector-card{ padding:16px 12px; }
.g-card .games-grid .sc-desc{ font-size:12px; }