/* =========================================================
   ぼくのゲームランド 共通UI (common.css)
   すべてのゲームと メニュー(index.html)が これを読みこむ。
   見た目を かえたいときは、ここを なおせば ぜんぶに はんえいされる。

   ゲームごとの テーマ色は、各ページで --g-accent を うわがきする:
     :root { --g-accent: #3b82f6; }
   つかいかたの サンプルは docs/ui-guide.md
   ========================================================= */

:root {
  --g-font: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --g-accent: #43a047;               /* タイトルの色・わくの色(ゲームごとに かえる) */
  --g-text: #222;
  --g-green: #43a047;
  --g-blue: #1e88e5;
  --g-red: #e53935;
  --g-yellow: #f9a825;
  --g-orange: #fb8c00;
  --g-gray: #757575;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

/* ===== 大きなメッセージ(タイトル・ゲームオーバー・クリア など) =====
   ゲーム画面を おおう もの(親は position: relative か absolute にする) */
.g-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.55);
  pointer-events: auto;
  font-family: var(--g-font); color: var(--g-text);
}
.g-modal {
  width: 100%; max-width: 340px; max-height: 100%; overflow-y: auto; text-align: center;
  background: #fff; border: 4px solid var(--g-accent); border-radius: 24px; padding: 22px 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,.5);
}
.g-modal.is-over { border-color: var(--g-red); }
.g-modal.is-win  { border-color: var(--g-yellow); background: #fffde7; }

/* ===== 文字 ===== */
.g-title  { margin: 0 0 6px; font-size: 30px; font-weight: 900; color: var(--g-accent); letter-spacing: .03em; }
.g-title.lg { font-size: 42px; }
.g-h2     { margin: 0 0 10px; font-size: 26px; font-weight: 900; }
.is-over .g-h2 { color: var(--g-red); }
.is-win  .g-h2 { color: var(--g-yellow); }
.g-sub    { margin: 6px 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: #374151; }
.g-sub.big { font-size: 22px; font-weight: 900; color: var(--g-accent); }
.g-result { margin: 6px 0; font-size: 22px; font-weight: 700; line-height: 1.5; color: #374151; }
.g-best   { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: #6b7280; }
.g-best.record { color: var(--g-yellow); }

/* あそびかたの はこ */
.g-howto  { text-align: left; background: #f3f6f4; border-radius: 12px; padding: 10px 12px; margin: 12px 0; font-size: 14px; font-weight: 700; color: #1f2937; }
.g-howto p { margin: 4px 0; }

/* ===== ボタン(おおきい・まるい) ===== */
.g-btn {
  display: block; width: 100%; margin-top: 14px; padding: 12px 20px;
  border: 0; border-bottom: 4px solid rgba(0,0,0,.25); border-radius: 999px;
  font: inherit; font-size: 20px; font-weight: 900; color: #fff;
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
}
.g-btn:active { transform: translateY(2px) scale(.98); }
.g-btn:disabled { opacity: .45; cursor: default; transform: none; }
.g-btn.sm { display: inline-block; width: auto; margin-top: 0; padding: 10px 14px; font-size: 16px; box-shadow: none; }
.g-green  { background: var(--g-green); }
.g-blue   { background: var(--g-blue); }
.g-red    { background: var(--g-red); }
.g-yellow { background: var(--g-yellow); }
.g-orange { background: var(--g-orange); }
.g-gray   { background: var(--g-gray); }

/* 「← メニューにもどる」(タイトル・ゲームオーバー・クリアの画面に おく) */
.g-link { display: block; margin-top: 14px; font-size: 14px; font-weight: 700; color: #6b7280; text-decoration: underline; }

/* ふわふわ */
.g-float { animation: g-float 3s ease-in-out infinite; }
@keyframes g-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* 画面の左上に おく 小さな「← メニュー」(ゲーム中の画面に おいてよい。なぞって うごかす ゲームでは おかない) */
.g-back { color: #fff; text-decoration: none; background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 900; }

/* キャンバスの上に うかせて おく バージョン(空の色の上でも よめるように 白地・こい文字) */
.g-back.float {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; z-index: 10;
  padding: 6px 12px; background: rgba(255,255,255,.85); color: #333; font-size: 14px;
}