/**
 * 🎮 Meax ゲーム共通UI（テンプレ）— Material Design 3 Expressive
 *
 * 使い方・部品の一覧は notes/mx_game_ui_template.md。雛形は notes/mx_game_ui_template.html。
 * ルールは notes/meax-design-rules.md（Meax は MD3 Expressive に準拠する）。
 *
 * - 色は MD3 トークン（--primary / --surface / --on-surface …）。標準は紫、ユーザーが設定で選んだ色に従う。
 *   ダークはOSの設定に従う。色を直書きしない（盤面の中のゲームの絵だけは自由）。
 * - 形は大きめの角丸、押すと角が変わる「ばね」の動き。区切りは枠線ではなく色の面。
 * - アイコンは Material Symbols（<span class="icon">arrow_back</span>）。
 * - トークンは meax-md3-tokens.css（meax-app/scripts/gen-md3-tokens.mjs が src/themes から生成）。
 *   <html> のテーマクラスは game-ui.js が付ける。
 */
@import url('/_shared/meax-md3-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400..900&family=Noto+Sans+JP:wght@400;500;700;800;900&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400..700,0..1,0&display=block');

:root {
  /* 動き（ばね）と角丸 */
  --spring-fast: cubic-bezier(.42, 1.67, .21, .9);
  --spring: cubic-bezier(.38, 1.21, .22, 1);
  --emph: cubic-bezier(.2, 0, 0, 1);
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 28px; --r-full: 999px;
  color-scheme: light dark;

  /* 意味の色（正解・注意・情報）。MD3 に無い役割は「カスタムカラー」として、テーマ色に調和する固定色を持つ */
  --g-ok: #386a20;             --g-on-ok: #ffffff;
  --g-ok-container: #b8f397;   --g-on-ok-container: #082100;
  --g-star: #b88700;           --g-on-star: #ffffff;
  --g-star-container: #ffdea0; --g-on-star-container: #261a00;
  --g-info: #006687;           --g-on-info: #ffffff;
  --g-info-container: #c3e8ff; --g-on-info-container: #001e2c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --g-ok: #9dd67f;             --g-on-ok: #0b3900;
    --g-ok-container: #1f5106;   --g-on-ok-container: #b8f397;
    --g-star: #f1c14e;           --g-on-star: #402d00;
    --g-star-container: #5c4300; --g-on-star-container: #ffdea0;
    --g-info: #76d1ff;           --g-on-info: #003549;
    --g-info-container: #004d67; --g-on-info-container: #c3e8ff;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Roboto Flex', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  background: var(--surface);
  color: var(--on-surface);
  min-height: 100vh;
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }

/* ---- アイコン（Material Symbols） ---- */
.icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle; flex: none;
}
.icon.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.icon.spin { animation: g-spin 1s linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }

/* ---- 画面の幅（スマホ縦を基準にした1カラム） ---- */
.g-wrap   { max-width: 28rem; margin: 0 auto; padding: 0 1rem 2.5rem; }

/* ---- ヘッダー：戻る／タイトル／（あそびかた）／ランキング ---- */
.g-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 0; min-height: 4rem; }
.g-title  { font-weight: 800; font-size: 1.25rem; line-height: 1.25; text-align: center; color: var(--on-surface); margin: 0; letter-spacing: -.005em; }
.g-title small { display: block; font-size: 11px; font-weight: 600; color: var(--on-surface-variant); }
.g-icons  { display: flex; gap: .25rem; }
.g-icon-btn {
  width: 48px; height: 48px; border-radius: var(--r-full); border: 0; padding: 0;
  background: var(--surface-container-high); color: var(--on-surface-variant);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-radius 260ms var(--spring-fast), transform 260ms var(--spring-fast), background-color 160ms;
}
.g-icon-btn:hover { background: var(--surface-container-highest); }
.g-icon-btn:active { border-radius: var(--r-m); transform: scale(.94); }
.g-icon-spacer { width: 48px; height: 48px; }

/* ---- カード・成績 ---- */
.g-card  { background: var(--surface-container); border-radius: var(--r-xl); padding: 1.25rem; margin-bottom: .75rem; }
.g-stats { display: grid; gap: .25rem; text-align: center; margin-bottom: .75rem; }
.g-stats.c2 { grid-template-columns: repeat(2, 1fr); }
.g-stats.c3 { grid-template-columns: repeat(3, 1fr); }
.g-stats.c4 { grid-template-columns: repeat(4, 1fr); }
/* つながった成績ボックス：端だけ大きく丸く、間は小さく（セグメント） */
.g-stat  { background: var(--surface-container-high); border-radius: var(--r-xs); padding: .625rem .25rem; min-width: 0; }
.g-stat:first-child { border-radius: var(--r-xl) var(--r-xs) var(--r-xs) var(--r-xl); }
.g-stat:last-child  { border-radius: var(--r-xs) var(--r-xl) var(--r-xl) var(--r-xs); }
.g-stat:only-child  { border-radius: var(--r-xl); }
.g-stat small { display: block; font-size: 11px; font-weight: 600; color: var(--on-surface-variant); }
.g-stat b     { display: block; font-weight: 800; color: var(--on-surface); line-height: 1.3; font-variant-numeric: tabular-nums; }
.g-stat b.hl  { color: var(--primary); }
.g-label { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: .25rem; }
.g-note  { text-align: center; font-size: 12px; font-weight: 500; color: var(--on-surface-variant); line-height: 1.7; }

/* ---- ボタン（押すと角が変わる） ---- */
.g-btn, .g-btn-sub {
  display: block; width: 100%; font-family: inherit; font-weight: 700; cursor: pointer; text-align: center;
  transition: border-radius 300ms var(--spring-fast), transform 300ms var(--spring-fast), background-color 160ms;
}
.g-btn:active, .g-btn-sub:active { border-radius: var(--r-l); transform: scale(.97); }
.g-btn     { height: 56px; padding: 0 1.5rem; border-radius: var(--r-full); border: 0; background: var(--primary); color: var(--on-primary); font-size: 1.0625rem; }
.g-btn:disabled { background: color-mix(in srgb, var(--on-surface) 12%, transparent); color: color-mix(in srgb, var(--on-surface) 38%, transparent); cursor: default; }
.g-btn-sub { padding: .875rem; border-radius: var(--r-full); border: 0; background: var(--secondary-container); color: var(--on-secondary-container); font-size: .9375rem; }
.g-btn-sub.pink, .g-btn-sub.primary { background: var(--primary); color: var(--on-primary); }
.g-btn-sub:disabled { opacity: .38; cursor: default; }
.g-link    { background: none; border: 0; font-family: inherit; font-size: .8125rem; font-weight: 700; color: var(--primary); padding: .625rem; cursor: pointer; border-radius: var(--r-full); }
.g-grid2   { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .5rem; }

/* ---- 盤面（ゲームの中身を入れる箱） ---- */
.g-stage   { position: relative; background: var(--surface-container-lowest); border-radius: var(--r-xl); overflow: hidden; }
.g-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent); text-align: center; padding: 1rem; z-index: 5;
}
.g-gauge   { height: 12px; border-radius: var(--r-full); background: var(--surface-container-highest); overflow: hidden; }
.g-gauge > i { display: block; height: 100%; border-radius: var(--r-full); background: var(--primary); transition: width .1s linear; }

/* ---- 共通の小さな部品（キーパッド・モード切替・進み具合の点） ---- */
.g-keys   { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .75rem; }
.g-key {
  border: 0; border-radius: var(--r-l); padding: .875rem 0; font-family: inherit; font-size: 1.125rem; font-weight: 700;
  background: var(--surface-container-high); color: var(--on-surface); cursor: pointer; touch-action: manipulation;
  transition: border-radius 260ms var(--spring-fast), transform 260ms var(--spring-fast), background-color 160ms;
}
.g-key:active { border-radius: var(--r-full); transform: scale(.95); background: var(--primary-container); }
.g-key:disabled { opacity: .38; }
.g-key.right { background: var(--g-ok); color: var(--g-on-ok); opacity: 1; }
.g-key.wrong { background: var(--error); color: var(--on-error); opacity: 1; }
.g-seg    { display: flex; gap: 2px; margin-bottom: .5rem; }
.g-seg > button {
  flex: 1; border: 0; padding: .625rem .5rem; font-family: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
  background: var(--surface-container-high); color: var(--on-surface-variant); border-radius: var(--r-xs);
  transition: border-radius 280ms var(--spring-fast), background-color 180ms, color 180ms;
}
.g-seg > button:first-child { border-radius: var(--r-full) var(--r-xs) var(--r-xs) var(--r-full); }
.g-seg > button:last-child  { border-radius: var(--r-xs) var(--r-full) var(--r-full) var(--r-xs); }
.g-seg > button.on { background: var(--primary); color: var(--on-primary); border-radius: var(--r-full); }
.g-dots   { display: flex; gap: .375rem; justify-content: center; flex-wrap: wrap; margin-bottom: .75rem; }
.g-dots > i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-container-highest); display: block; }
.g-dots > i.now  { background: var(--primary); }
.g-dots > i.on, .g-dots > i.done { background: var(--g-ok); }
.g-dots > i.miss { background: var(--error); }

/* ---- 結果画面 ---- */
.g-result-emoji { font-size: 3.75rem; line-height: 1; margin-bottom: .25rem; }
.g-result-title { font-weight: 800; font-size: 1.5rem; line-height: 1.3; color: var(--on-surface); margin: 0; }
.g-result-score { font-weight: 900; font-size: 3.25rem; color: var(--primary); margin: .5rem 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.g-result-score span { font-size: 1.125rem; font-weight: 700; }
.g-result-sub   { font-size: .8125rem; font-weight: 600; color: var(--on-surface-variant); margin-bottom: 1rem; }

/* ---- モーダル（あそびかた・ランキング・ショップ） ---- */
.g-modal-bg { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--scrim) 40%, transparent); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.g-modal    { background: var(--surface-container-high); color: var(--on-surface); width: 100%; max-width: 24rem; border-radius: var(--r-xl); padding: 1.5rem;
              box-shadow: 0 8px 24px rgba(0,0,0,.2); max-height: 90vh; overflow-y: auto; animation: g-pop .4s var(--spring); }
.g-modal h2 { font-weight: 800; font-size: 1.375rem; line-height: 1.3; color: var(--on-surface); text-align: center; margin: 0 0 1rem; }
.g-modal ul { font-size: .875rem; font-weight: 500; color: var(--on-surface-variant); line-height: 1.7; padding: 0; margin: 0; list-style: none; }
.g-modal li + li { margin-top: .5rem; }
.g-modal .g-btn-close { display: block; width: 100%; margin-top: 1.25rem; height: 48px; border-radius: var(--r-full); border: 0;
                        background: var(--primary); color: var(--on-primary); font-family: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer;
                        transition: border-radius 300ms var(--spring-fast), transform 300ms var(--spring-fast); }
.g-modal .g-btn-close:active { border-radius: var(--r-l); transform: scale(.97); }
.g-rank-list { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.g-rank-row  { display: flex; align-items: center; justify-content: space-between; background: var(--surface-container); border-radius: var(--r-xs); padding: .625rem .875rem; }
.g-rank-row:first-child { border-radius: var(--r-l) var(--r-l) var(--r-xs) var(--r-xs); }
.g-rank-row:last-child  { border-radius: var(--r-xs) var(--r-xs) var(--r-l) var(--r-l); }
.g-rank-row:only-child  { border-radius: var(--r-l); }
.g-rank-row .who { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.g-rank-row .no  { width: 1.75rem; text-align: center; font-weight: 800; font-size: .8125rem; color: var(--on-surface-variant); }
.g-rank-row .nm  { font-weight: 600; font-size: .875rem; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-rank-row .pt  { font-weight: 800; font-size: .9375rem; color: var(--primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-empty    { text-align: center; padding: 1.5rem 0; font-weight: 500; font-size: .875rem; color: var(--on-surface-variant); }

/* ---- トースト（スナックバー） ---- */
.g-toast {
  position: fixed; left: 50%; top: 5rem; transform: translateX(-50%); z-index: 60; background: var(--inverse-surface); color: var(--inverse-on-surface);
  font-weight: 600; font-size: .875rem; padding: .75rem 1.125rem; border-radius: var(--r-s); box-shadow: 0 6px 18px rgba(0,0,0,.25);
  max-width: 90vw; text-align: center;
}

/* ---- 動き ---- */
.pop { animation: g-pop .4s var(--spring); }
@keyframes g-pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.g-count-pop { animation: g-countPop .9s var(--emph); }
@keyframes g-countPop { 0% { transform: scale(2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}