/* ==========================================================================
   부가학습 게임 화면 공통 틀 — 화면 폭 · 게임 이동 줄
   - 게임 8개 화면이 함께 쓴다. 이동 줄 마크업은 /templates/game-nav.html
   - 🔴 화면마다 따로 폭·탭 모양을 두지 않는다. 바꿀 것은 여기서 바꾼다 (2026-09-21 통일)
   - 제목은 사이트 공통 모양 <div class="page-title page-title-margin20"><h1>…</h1></div>
   ========================================================================== */

/* 화면 폭 = 사이트 머리(로고·메뉴) 폭 1200px.
   🔴 min-width:0 · width:100% — 바깥이 flex 인 화면에서 이 칸이 탭 줄 폭만큼 벌어지지 않게 (방 꾸미기 실측) */
.game-wrap {
    max-width: 1200px; width: 100%; min-width: 0;
    box-sizing: border-box; margin-left: auto; margin-right: auto;
}

/* 영문 게임 이름 옆 한글 설명 — <h1>METEOR RUSH <small>운석 요격 타자</small></h1> */
.page-title h1 small {
    font-size: .45em; color: #8794ab; margin-left: 8px;
    white-space: nowrap; vertical-align: middle;
}

/* ── 게임 이동 줄 ─────────────────────────────────────────────
   🔴 항상 **한 줄**이다. 접으면 폰에서 세 줄이 되어 게임판을 밀어낸다.
      넘치면 옆으로 밀고, 넘친 쪽에만 화살표와 흐린 가장자리가 나온다 */
.game-nav-box { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
/* 🔴 스크롤 칸만 줄어든다 — min-width:0 이 없으면 flex 칸이 탭 폭만큼 벌어져 화면을 넘긴다 */
.game-nav-scroll { position: relative; flex: 1 1 auto; min-width: 0; }

/* 내 코인 — 이동 줄 오른쪽 끝 (설계 58 §1) */
.game-nav__coin {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 12px; border-radius: 999px; background: #fff7e0; border: 1px solid #f3d27a;
    color: #8a5a00; font-size: 14px; font-weight: 800; line-height: 1.4; text-decoration: none; white-space: nowrap;
}
.game-nav__coin:hover { background: #ffefc2; color: #8a5a00; text-decoration: none; }
.game-nav__coin[hidden] { display: none; }
.game-nav {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 2px 0;
}
.game-nav::-webkit-scrollbar { height: 0; }
.game-nav a {
    flex: 0 0 auto;
    padding: 8px 14px; border-radius: 999px; background: #eef2f9; color: #4d5566;
    font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap;
}
.game-nav a:hover { background: #dde5f4; color: #4d5566; text-decoration: none; }
.game-nav a.on,
.game-nav a.on:hover { background: #4a7ddb; color: #fff; }
.game-nav .game-nav__back,
.game-nav .game-nav__back:hover { background: #fff; border: 1px solid #d7dbe4; color: #6b7a96; }

/* ── 게임 버튼 (모든 게임 공용) ─────────────────────────────────
   설계 : docs/학습게임_기획/61_설계_게임버튼_통일_20260922.md
   🔴 게임마다 버튼을 따로 만들지 않는다. 모양·크기·눌림·상태는 여기 하나다.
      게임이 정하는 것은 **색 네 개**뿐이다 — 게임 틀(.xx-wrap)에 --gb-* 를 둔다.
   🔴 글자색을 **반드시** 준다. <button> 은 글자색을 물려받지 않는다
      (철자 뱀 「모드 고르기」가 어두운 바탕에 검은 글자로 안 보였다 — 2026-09-22)

   쓰임   gbtn            주 버튼 (시작 · 다시 하기 · 정답 확인 · 사기)
          gbtn--sub       보조 버튼 (모드 고르기 · 게임 목록 · 닫기 · 소리)
          gbtn--pick      고르기 (문제 수 · 주제) — .on 이 고른 것
   크기   gbtn--lg        첫 화면·결과 화면의 큰 버튼 하나
          (없음)          보통
          gbtn--sm        도구줄
   바탕   어두운 판 위에서는 그 판(또는 조상)에 gb-dark 를 붙인다 — 보조·고르기가 밝은 글자로 바뀐다 */
.game-wrap, [data-gamegate] {
    --gb-bg: #5b8ce6; --gb-bg2: #3f6fd0; --gb-fg: #fff; --gb-shade: #2c55a8;   /* 기본 = 이동 줄 파랑 */
    --gb-ring: #1f2d4d;   /* 키보드 초점 테두리 — 밝은 바탕에서 노랑은 안 보인다(대비 1.3:1). 어두운 판은 노랑 */
}
.gb-dark { --gb-ring: #ffd54a; }
.gbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 22px; border: 2px solid transparent; border-radius: 999px;
    font: inherit; font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: .5px;
    white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
    background: linear-gradient(var(--gb-bg), var(--gb-bg2)); color: var(--gb-fg);
    box-shadow: 0 4px 0 var(--gb-shade);
    transition: filter .12s, transform .06s, box-shadow .06s;
}
/* 🔴 display 를 주었으니 hidden 이 먹지 않는다 — 다시 숨긴다 (타자 「자판 열기」가 hidden 으로 켜고 끈다) */
.gbtn[hidden] { display: none; }
/* 🔴 :focus 에는 글자색만 준다 — theme 의 a:focus 가 링크 버튼 글자를 파랗게 바꾼다.
      바탕·밝기는 hover 와 키보드 초점(:focus-visible)에만 — 마우스로 누른 뒤 모양이 남지 않게 */
.gbtn:hover, .gbtn:focus { color: var(--gb-fg); text-decoration: none; }
.gbtn:hover, .gbtn:focus-visible { filter: brightness(1.06); }
.gbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gb-shade); }
.gbtn:focus-visible { outline: 3px solid var(--gb-ring); outline-offset: 3px; }
/* 끈 버튼 — 눌림·밝아짐 없이 흐리게. 그림자 크기는 크기별 값을 그대로 둔다
   🔴 끄는 것은 disabled 로. .is-off 는 모양만이다 — <a class="gbtn is-off"> 는 Tab+Enter 로 여전히 열린다 */
.gbtn[disabled], .gbtn.is-off { opacity: .45; cursor: default; pointer-events: none; }
.gbtn--lg { padding: 14px 44px; font-size: 18px; letter-spacing: 1.5px; box-shadow: 0 5px 0 var(--gb-shade); }
.gbtn--lg:active { box-shadow: 0 2px 0 var(--gb-shade); }
.gbtn--sm { padding: 7px 14px; font-size: 13px; letter-spacing: 0; box-shadow: 0 3px 0 var(--gb-shade); }

/* 보조 · 고르기 — 밝은 바탕 */
.gbtn--sub, .gbtn--pick {
    background: #fff; border-color: #cfdaee; color: #3d4c6b; box-shadow: 0 3px 0 #dbe3f1;
}
.gbtn--sub:hover, .gbtn--sub:focus, .gbtn--pick:hover, .gbtn--pick:focus { color: #3d4c6b; }
.gbtn--sub:hover, .gbtn--sub:focus-visible, .gbtn--pick:hover, .gbtn--pick:focus-visible { background: #f3f6fc; filter: none; }
.gbtn--sub:active, .gbtn--pick:active { box-shadow: 0 1px 0 #dbe3f1; }
/* 고르기는 두 줄(이름 + 「최고 ○○」)이 들어간다 */
.gbtn--pick { border-radius: 14px; flex-direction: column; gap: 2px; padding: 12px 24px; }
.gbtn--pick.on, .gbtn--pick.on:hover { border-color: var(--gb-bg2); background: #eaf0ff; color: #23355c; }

/* 보조 · 고르기 — 어두운 바탕 */
.gb-dark .gbtn--sub, .gb-dark .gbtn--pick {
    background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); color: #eef2fb;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.gb-dark .gbtn--sub:hover, .gb-dark .gbtn--sub:focus,
.gb-dark .gbtn--pick:hover, .gb-dark .gbtn--pick:focus { color: #fff; }
.gb-dark .gbtn--sub:hover, .gb-dark .gbtn--sub:focus-visible,
.gb-dark .gbtn--pick:hover, .gb-dark .gbtn--pick:focus-visible { background: rgba(255, 255, 255, .18); }
.gb-dark .gbtn--pick.on, .gb-dark .gbtn--pick.on:hover { border-color: #ffd54a; background: rgba(255, 213, 74, .16); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .gbtn { transition: none; }
    .gbtn:active { transform: none; }
}

/* 화살표 — 더 있는 쪽에만 보인다 (game-nav.html 이 hidden 을 켜고 끈다) */
.game-nav__arrow {
    position: absolute; top: 0; bottom: 0; z-index: 2;
    width: 56px; border: 0; padding: 0; cursor: pointer;
    display: flex; align-items: center;
    background: transparent;
}
.game-nav__arrow[hidden] { display: none; }
.game-nav__arrow--l { left: 0; justify-content: flex-start;
    background: linear-gradient(to right, #fff 45%, rgba(255, 255, 255, 0)); }
.game-nav__arrow--r { right: 0; justify-content: flex-end;
    background: linear-gradient(to left, #fff 45%, rgba(255, 255, 255, 0)); }
.game-nav__arrow span {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #d7dbe4; box-shadow: 0 2px 6px rgba(40, 60, 100, .15);
    color: #4a7ddb; font-size: 20px; font-weight: 900; line-height: 1;
}
.game-nav__arrow:hover span { background: #4a7ddb; border-color: #4a7ddb; color: #fff; }