/* ノリモノパズル（/norimono/）ページ専用スタイル */

.norimono-page {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background-color: #fdf4e3;
  background-image:
    linear-gradient(rgba(240, 180, 90, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 180, 90, 0.13) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #23384d;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 14px 0 40px;
}
.norimono-page *,
.norimono-page *::before,
.norimono-page *::after { box-sizing: border-box; }
.norimono-page h1, .norimono-page p, .norimono-page ol, .norimono-page ul, .norimono-page li,
.norimono-page button, .norimono-page input, .norimono-page select { margin: 0; padding: 0; }
.norimono-page button { font-family: inherit; }
.norimono-page ol, .norimono-page ul { list-style: none; }

.game-wrap {
  width: 100%;
  max-width: 480px;
  padding: 10px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ロゴはPCだけ出す（スマホは縦幅を稼ぐため非表示） */
.gm-logo { display: none; }
/* デスクトップ（769px以上）：ゲーム自体を一回り大きく＋左右に装飾 */
/* デスクトップ 3カラムレイアウト（900px以上）：
 * 左：ミニランク大 ／ 中央：ゲーム ／ 右：スコア大＋NEXT円環大 */
/* 大画面デスクトップ：さらに大きく */
/* ───── ヘッダー：スチール看板 ───── */
.gm-head { width: 92%; margin-bottom: 8px; }
.gm-plate {
  background: linear-gradient(180deg, #5db1f5 0%, #3a8fdd 55%, #2f7fd0 100%);
  background-color: #3a8fdd;
  border-radius: 8px 8px 0 0;
  padding: 10px 14px 8px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(35,56,77,.3);
  position: relative;
}
/* リベット（鋲） */
.gm-plate::before, .gm-plate::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d7dee6, #7d8b9b 60%, #55636f);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.gm-plate::before { left: 9px; }
.gm-plate::after { right: 9px; }
.gm-plate h1 {
  font-size: 20px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
}
.gm-sub { font-size: 11px; color: #e3f2ff; margin-top: 2px; letter-spacing: 1px; }

/* 危険ストライプ（イエロー×ブラック） */
.gm-hazard {
  height: 10px;
  border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(
    -45deg,
    #f7c600 0 12px,
    #2b2b2b 12px 24px
  );
  box-shadow: 0 2px 4px rgba(35,56,77,.25);
}

/* ───── スコア列：デジタルカウンター ───── */
.gm-status {
  width: 92%;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 8px;
}
.gm-panel {
  flex: 1;
  background: #fff;
  border: 2px solid #f0e3c9;
  border-radius: 10px;
  padding: 5px 8px 6px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(180, 140, 70, .18);
}
.gm-label {
  display: block;
  font-size: 9px;
  color: #a3937a;
  letter-spacing: 2px;
  font-weight: 700;
}
.gm-num {
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: "SF Mono", Menlo, monospace;
  color: #ff8c1a;
  text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255, 140, 26, .3);
}
.gm-panel:last-child .gm-num { color: #1d7ceb; text-shadow: 0 1px 0 #fff, 0 0 8px rgba(29, 124, 235, .3); }

/* NEXTパネル：中で薄い縞が流れてコンベア感だけ残す */
.gm-panel-next {
  position: relative;
  overflow: hidden;
}
.gm-panel-next::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -60deg,
    rgba(47, 127, 208, .07) 0 8px,
    transparent 8px 16px
  );
  animation: convScroll 1.1s linear infinite;
  pointer-events: none;
}
.gm-next-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
  position: relative;
}
.gm-next-arrow {
  font-size: 12px;
  color: #e0b64e;
  font-weight: 900;
}
/* ───── トップバー（ミニランク｜スコア｜ネクスト円環）─────
 * スコア/NEXTは本家風にパネル廃止・背景に直乗せ。
 * ミニランキングだけ白パネルでアクセント。 */
.gm-top {
  width: 96%;
  display: flex;
  align-items: flex-start;   /* 上揃えにして短いパネル上の余白を詰める */
  gap: 4px;
  margin-bottom: 0;
}

/* 常時ミニランキング（左上に控えめに）
 * 名前＋（県名）＋スコアを1行に収めるためスコア/NEXT より少し広めに取る */
.gm-minirank {
  flex: 1.5;
  min-width: 0;
  background: #fff;
  border: 1.5px solid #f0e3c9;
  border-radius: 8px;
  padding: 3px 6px;
  box-shadow: 0 1px 3px rgba(180, 140, 70, .15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.gm-minirank::before, .gm-minirank::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #efe3c8, #c2ab7e 60%, #96814f);
  box-shadow: inset 0 -1px 1px rgba(90, 70, 30, .4);
}
.gm-minirank::before { left: 4px; }
.gm-minirank::after { right: 4px; }
.gm-minirank-title {
  font-size: 8px;
  font-weight: 800;
  color: #a3937a;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
#mini-rank {
  list-style: none;
  margin: 0;
  padding: 0;
}
#mini-rank li {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  line-height: 1.5;
  overflow: hidden;
}
/* ニックネーム＋県名は左詰め、スコアを右端に。
 * 名前は残り幅を全部使う（flex:1）→スコアを右に押しやりつつ、はみ出したら name が省略される */
#mini-rank .mr-name {
  color: #23384d;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 県名は名前の後ろに小さめ・グレー */
#mini-rank .mr-pref {
  font-size: 0.72em;
  color: #8a9aa8;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-left: 1px;
}
/* 順位（🥇や4位）のセル：内容に応じた幅にして、名前の左に余計な空白ができないようにする */
#mini-rank .mr-pos {
  flex-shrink: 0;
  text-align: left;
}
#mini-rank .mr-score {
  font-weight: 800;
  color: #1d7ceb;
  font-variant-numeric: tabular-nums;
}
.gm-minirank .gm-chase {
  width: 100%;
  min-height: 12px;
  font-size: 8px;
  margin: 2px 0 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* スコア（本家風：背景枠なし・テキスト直乗せ） */
.gm-scorebox {
  flex: 1;
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gm-slabel {
  font-size: 10px;
  font-weight: 800;
  color: #7a6647;
  letter-spacing: 2px;
}
.gm-scorebox .gm-num {
  font-size: 32px;
  line-height: 1;
  margin-top: 2px;
}
.gm-best {
  font-size: 10px;
  color: #a3937a;
  margin-top: 2px;
  font-weight: 700;
}
.gm-best span {
  font-weight: 800;
  color: #1d7ceb;
  font-variant-numeric: tabular-nums;
}

/* ネクスト（円環UI＋ラベルを上部に半透明で被せる） */
.gm-nextbox {
  flex: 0 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-top: -2px;
  position: relative;
}

.gm-wheel-label {
  font-size: 8px;
  font-weight: 900;
  color: #4a3b00;
  background: linear-gradient(180deg, #ffd94a, #f7c600);
  border: 1px solid #d9a900;
  border-radius: 4px;
  padding: 1px 6px;
  box-shadow: 0 1px 2px rgba(150, 110, 0, .3);
  letter-spacing: 1px;
}
/* 円環：中心に次の乗り物・周囲に進化順11個 */
.gm-wheel {
  position: relative;
  width: 72px;
  height: 72px;
}
.gm-wheel-center {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px !important;
  height: 32px !important;
}
.wheel-item {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(35,56,77,.2);
}
.wheel-item img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}
.wheel-item.wheel-last {
  box-shadow: 0 0 5px rgba(255,107,53,.65);
}

/* ───── NEXTバブル ───── */
@keyframes convScroll {
  from { background-position: 0 0; }
  to   { background-position: -32px 0; }
}
.gm-conv-bubble {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f2f7fb 55%, #dfe9f2 100%);
  border: 2px solid #8fa5b8;   /* 縁色はJSがレベルカラーで上書き */
  box-shadow: 0 1px 3px rgba(180, 140, 70, .3), inset 0 1px 2px rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gm-conv-bubble img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}
.gm-conv-bubble-far {
  width: 26px;
  height: 26px;
  opacity: 0.7;
}
.gm-conv-bubble img.pop { animation: nextPop .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes nextPop {
  from { transform: scale(.3); }
  to   { transform: scale(1); }
}
/* ───── トップ10チェイスバナー ───── */
.gm-chase {
  width: 92%;
  min-height: 22px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #b8860b;
  text-shadow: 0 1px 0 #fff;
}
.gm-chase.pulse { animation: chasePulse 1s ease-in-out infinite; }
@keyframes chasePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.gm-chase.in { color: #d4380d; }

/* トップ10入りの祝賀テキスト */
.gm-topin {
  position: absolute;
  top: 36%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  color: #ffb400;
  -webkit-text-stroke: 1.5px #7a4c00;
  text-shadow: 0 3px 0 #fff, 0 0 24px rgba(255, 180, 0, .8);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.gm-topin.show { animation: topinPop 1.8s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes topinPop {
  0%   { opacity: 0; transform: scale(.2) rotate(-8deg); }
  15%  { opacity: 1; transform: scale(1.25) rotate(3deg); }
  30%  { transform: scale(1) rotate(0); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* ───── ステージ：金属フレーム ───── */
.gm-stage { position: relative; }
.gm-frame {
  padding: 3px;
  border-radius: 12px;
  background: linear-gradient(160deg, #e4ebf1 0%, #bcc8d3 45%, #d4dde5 65%, #a9b6c2 100%);
  background-color: #c4cfd9;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 5px 14px rgba(180, 140, 70, .28);
  position: relative;
}
/* フレーム四隅のリベット */
.gm-frame::before, .gm-frame::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e6ecf2, #7d8b9b 60%, #4d5a66);
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
  z-index: 2;
}
.gm-frame::before { top: 6px; left: 6px; }
.gm-frame::after { top: 6px; right: 6px; }
#game {
  display: block;
  border-radius: 8px;
  background: transparent;   /* クレーンゾーンはフレームの金属地が透ける（箱の外） */
}

/* コンボ表示（サイズ・色はJSが連鎖数で上書き）
 * 2段構成：メイン「COMBO ×3」+ サブ「×6 bonus」で倍率の熱狂を可視化 */
.gm-combo {
  position: absolute;
  top: 24%;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  line-height: 1;
  letter-spacing: 0.02em;
  z-index: 6;
}
.gm-combo .gm-combo-main {
  display: block;
  font-size: inherit;
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.15));
}
.gm-combo .gm-combo-mult {
  display: block;
  font-size: 0.42em;
  margin-top: 6px;
  font-weight: 800;
  letter-spacing: 0.15em;
  opacity: 0.9;
  -webkit-text-stroke: 1.5px #fff;
  paint-order: stroke fill;
}
/* 熱度カラー階段 */
.gm-combo-yellow  { color: #ffc400; }
.gm-combo-amber   { color: #ff9500; }
.gm-combo-orange  { color: #ff6b35; }
.gm-combo-red     { color: #ff2e2e; text-shadow: 0 0 24px rgba(255,60,60,.55); }
.gm-combo-magenta { color: #ff2e8b; text-shadow: 0 0 30px rgba(255,60,150,.65); }
.gm-combo-rainbow .gm-combo-main {
  background: linear-gradient(90deg, #ff2e2e, #ff9500, #ffc400, #37c56b, #1d7ceb, #8b5cf6, #ff2e8b);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2.5px #fff;
  filter: drop-shadow(0 0 20px rgba(255,180,60,.7));
  animation: comboRainbowShift .8s linear infinite;
  background-size: 200% 100%;
}
@keyframes comboRainbowShift {
  from { background-position: 0% 0%; }
  to   { background-position: 200% 0%; }
}
.gm-combo.show { animation: comboPop 1s cubic-bezier(.2, 1.6, .3, 1); }
.gm-combo.gm-combo-shake.show { animation: comboPop 1s cubic-bezier(.2, 1.6, .3, 1), comboShake .09s 6; }
@keyframes comboPop {
  0%   { opacity: 0; transform: scale(.3) rotate(-6deg); }
  18%  { opacity: 1; transform: scale(1.35) rotate(3deg); }
  32%  { transform: scale(.9) rotate(-1deg); }
  45%  { transform: scale(1.08) rotate(1deg); }
  60%  { transform: scale(1) rotate(0); opacity: 1; }
  100% { opacity: 0; transform: scale(1) rotate(0) translateY(-14px); }
}
@keyframes comboShake {
  0%,100% { transform: translate(0,0) scale(1); }
  25%     { transform: translate(-3px,1px) scale(1.02); }
  50%     { transform: translate(3px,-1px) scale(.98); }
  75%     { transform: translate(-2px,-1px) scale(1.02); }
}

/* 危険時のブルブル（残り1.5秒からは激しく） */
@keyframes gmShake {
  0%   { transform: translate(1px, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-2px, 0); }
  100% { transform: translate(1px, 1px); }
}
.gm-stage.shake .gm-frame { animation: gmShake .16s infinite; }
.gm-stage.shake-hard .gm-frame { animation: gmShake .07s infinite; }
/* 合体の瞬間のパンチ（1回だけ強く揺れる） */
.gm-stage.punch .gm-frame { animation: gmShake .13s ease-in-out 2; }

/* 危険サイン：本家スイカ準拠、数字カウントダウンなし・盤面フレームが赤く点滅で伝える */
.gm-stage.danger .gm-frame {
  animation: dangerPulse .55s ease-in-out infinite;
}
.gm-stage.danger.shake .gm-frame,
.gm-stage.danger.shake-hard .gm-frame {
  /* 揺れも同時にかけたいので、shake系がある時はコンビ用の別アニメ */
  animation:
    gmShake .16s infinite,
    dangerPulse .55s ease-in-out infinite;
}
.gm-stage.danger.shake-hard .gm-frame {
  animation:
    gmShake .07s infinite,
    dangerPulse .35s ease-in-out infinite;
}
@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 40, 0), inset 0 0 0 0 rgba(255, 60, 40, 0); }
  50%      { box-shadow: 0 0 24px 6px rgba(255, 60, 40, .7), inset 0 0 24px 4px rgba(255, 60, 40, .45); }
}

/* ゲームオーバー時のフラッシュ（デフォルト：熱い橙〜赤） */
.gm-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle, rgba(255,240,180,.95) 0%, rgba(255,120,40,.75) 55%, rgba(255,40,40,.4) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  --flash-color: #ff8c00;
  --flash-intensity: 0.4;
}
.gm-flash.show { animation: flashFade .7s ease-out forwards; }
/* 上位合体・新ティア到達で乗り物色のフラッシュに差し替え（軽め・短め） */
.gm-flash.show.color {
  background: radial-gradient(circle, var(--flash-color) 0%, var(--flash-color) 30%, transparent 75%);
  animation: flashColorFade .5s ease-out forwards;
}
@keyframes flashFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes flashColorFade {
  0%   { opacity: 0; }
  20%  { opacity: var(--flash-intensity); }
  100% { opacity: 0; }
}

/* あふれ警告 */
.gm-warn {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: #e02020;
  text-shadow: 0 1px 0 #fff;
  pointer-events: none;
  animation: warnBlink .5s steps(2) infinite;
}
.gm-warn[hidden] { display: none; }
@keyframes warnBlink {
  0% { opacity: 1; }
  100% { opacity: .25; }
}

/* ───── ゲームオーバー・ランキング・ルール共通モーダル ─────
 * fixed でビューポート全体を覆う（盤面幅に縛られず、細長い折返しを防ぐ） */
.gm-over {
  position: fixed;
  inset: 0;
  background: rgba(61, 74, 88, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.gm-over[hidden] { display: none; }
.gm-over-box {
  background: #fff;
  border-radius: 14px;
  border-top: 8px solid;
  border-image: repeating-linear-gradient(-45deg, #f7c600 0 10px, #2b2b2b 10px 20px) 8;
  padding: 24px 24px 26px;
  text-align: center;
  width: 100%;
  max-width: 400px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: popIn .28s ease-out;
}
/* 派手に伸縮するとPCで巨大な箱がびよんびよんして違和感が出るので、
 * ふわっと下から出して等倍で止まるだけのシンプルな出現に */
@keyframes popIn {
  from { transform: translateY(12px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}
.gm-over-title { font-size: 20px; font-weight: 800; margin-bottom: 14px !important; }
.gm-over-score { font-size: 15px; margin-bottom: 10px !important; }
.gm-over-score span { font-size: 26px; font-weight: 800; color: #0f6cd6; }
.gm-over-best { font-size: 13px; color: #ff7b00; font-weight: 700; margin-bottom: 10px !important; }
.gm-rank-msg { margin-top: 6px !important; }

/* ───── ボタン ─────
 * <a>と<button>で共通のベース。inline-flex + line-height:1 で、要素種別による
 * ベースライン差を吸収して文字を必ずボタン中央に載せる（<a>だけ上に浮く問題対策）。 */
.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  vertical-align: middle;
}
.gm-btn-main {
  background: linear-gradient(180deg, #1d7ceb, #0f6cd6);
  color: #fff;
  width: 100%;
  margin: 20px 0 0 !important;
  padding: 13px 18px !important;
  font-size: 15px;
  box-shadow: 0 3px 0 #0a56ac;
}
/* 未登録状態のときは「もう一回あそぶ」を控えめに（誤タップ防止）
 * 主動線＝ランキング登録ボタン、副動線＝これ、という視覚バランスに */
.gm-pending-registration #retry {
  background: #f2f6fa !important;
  color: #5b7690 !important;
  border: 1.5px solid #b9c4cf;
  box-shadow: 0 2px 0 #b9c4cf !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  margin-top: 24px !important;
}
.gm-btn-main:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a56ac; }
/* シェアはサブ動線：主動線（もう一回あそぶ）と大きさ・強度で差をつける */
.gm-share { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.gm-btn-share {
  background: #23384d;
  color: #fff;
  font-size: 12px;
  padding: 8px 16px !important;
  flex: 0 1 auto;
  max-width: 220px;
}
.gm-btn-line { background: #06c755; box-shadow: 0 2px 0 #04a344; }
.gm-btn-line:active { transform: translateY(1px); box-shadow: 0 1px 0 #04a344; }

/* ───── ランキング ───── */
.gm-rank-entry { margin: 12px 0 14px !important; padding-bottom: 8px !important; border-bottom: 1px dashed #eee6d0; }
.gm-rank-entry input {
  width: 100%;
  border: 1.5px solid #b9c4cf;
  border-radius: 8px;
  padding: 9px 12px !important;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  margin-bottom: 8px !important;
  background: #f8fafc;
}
.gm-rank-entry input:focus { outline: 2px solid #0f6cd6; border-color: #0f6cd6; }
/* 登録済みニックネームは読み取り専用（変更不可の視覚化） */
.gm-input-locked {
  background: #eef1f5 !important;
  color: #7a8a9a !important;
  cursor: not-allowed;
  font-weight: 700;
}
.gm-rank-entry select {
  width: 100%;
  border: 1.5px solid #b9c4cf;
  border-radius: 8px;
  padding: 8px 10px !important;
  font-size: 13px;
  font-family: inherit;
  color: #23384d;
  background: #f8fafc;
  margin-bottom: 8px !important;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}
.gm-rank-entry select:focus { outline: 2px solid #0f6cd6; border-color: #0f6cd6; }

/* 全国／県内タブ */
.gm-rank-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 6px 0 2px;
}
.gm-rank-tab {
  border: 1.5px solid #b9c4cf;
  background: #f2f6fa;
  color: #5b7690;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 24px;
  cursor: pointer;
  font-family: inherit;
  min-width: 88px;
}
.gm-rank-tab.active {
  background: linear-gradient(180deg, #1d7ceb, #0f6cd6);
  border-color: #0f6cd6;
  color: #fff;
}
.gm-rank-empty {
  font-size: 12px;
  color: #5b7690;
  padding: 14px 4px;
}
.gm-btn-rank {
  background: linear-gradient(180deg, #ffd23f, #f7c600);
  color: #4a3b00;
  width: 100%;
  padding: 11px 18px !important;
  box-shadow: 0 3px 0 #c9a100;
}
.gm-btn-rank:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9a100; }
.gm-rank-msg { font-size: 11px; color: #e02020; margin-top: 6px; min-height: 14px; font-weight: 700; }
.gm-rank-list {
  list-style: none;
  margin: 14px 0 8px;
  text-align: left;
  max-height: 220px;
  overflow-y: auto;
}
.gm-rank-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-size: 13px;
  border-bottom: 1px dashed #dde6ee;
}
.gm-rank-list .rk-pos { font-weight: 800; width: 30px; color: #5b7690; flex-shrink: 0; }
.gm-rank-list li:nth-child(1) .rk-pos { color: #d4a017; font-size: 15px; }
.gm-rank-list li:nth-child(2) .rk-pos { color: #8fa5b8; font-size: 14px; }
.gm-rank-list li:nth-child(3) .rk-pos { color: #b5651d; font-size: 14px; }
.gm-rank-list .rk-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-rank-list .rk-score { font-weight: 700; font-variant-numeric: tabular-nums; color: #0f6cd6; }
.gm-rank-list li.rk-me { background: #fff6d6; border-radius: 6px; }
.gm-rank-month { font-size: 11px; color: #5b7690; margin: -4px 0 4px; }
/* あなたの順位バー */
.gm-myrank {
  font-size: 12px;
  font-weight: 800;
  color: #0f6cd6;
  background: #eef5ff;
  border: 1px solid #cfe3fa;
  border-radius: 8px;
  padding: 11px 8px !important;
  margin: 14px 0 4px !important;
}
.gm-myrank[hidden] { display: none; }

/* ───── ステージ下のハザードバー（床ストライプの移設先） ───── */
.gm-hazbar {
  width: 96%;
  height: 4px;
  margin-top: 2px;
  border-radius: 3px;
  background: repeating-linear-gradient(-45deg, #f7c600 0 10px, #2b2b2b 10px 20px);
  box-shadow: 0 2px 4px rgba(180, 140, 70, .3);
}

/* ───── ルール説明モーダル（ふわっと表示） ───── */
.gm-rules-box { animation: fadeUp .32s ease-out; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.gm-rules-list {
  text-align: left;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 8px 0 12px;
  padding-left: 18px;
}
.gm-rules-list li { margin-bottom: 7px; }
.gm-rules-list b { color: #0f6cd6; }
/* サブ項目（「落とす方法は2つ」の①②など）：一段控えめに */
.rule-sublist {
  list-style: none;
  padding-left: 8px;
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #4a5b6d;
}
.rule-sublist li { margin-bottom: 2px; }

/* ルール内の合体デモ（🛴＋🛴→🚲） */
.rule-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 6px 0 4px;
  font-weight: 800;
  color: #a3937a;
}
.rule-demo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  background: radial-gradient(circle at 32% 28%, #fff, #eef3f8);
  border: 1.5px solid #cfdbe6;
  border-radius: 50%;
  padding: 2px;
}

/* ルール内の進化順一覧（🛴›🚲›…›🚀）：折返しOKでコンパクトに */
.rule-evo-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 3px;
  margin: 6px 0 2px;
  padding: 6px 4px;
  background: #f6f1e5;
  border-radius: 8px;
}
.rule-evo-chain img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: radial-gradient(circle at 32% 28%, #fff, #eef3f8);
  border: 2px solid #cfdbe6;   /* インラインでレベル色に上書きされる */
  border-radius: 50%;
  padding: 1px;
  box-shadow: 0 1px 2px rgba(35,56,77,.15);
}
.rule-evo-arrow {
  font-size: 11px;
  color: #a3937a;
  font-weight: 700;
  line-height: 1;
}


/* ───── ゲーム専用ページ（スタンドアロン）───── */
body.norimono-standalone {
  margin: 0;
  overflow: hidden;
  height: 100dvh;
  overscroll-behavior: none;
}
body.norimono-standalone .norimono-page {
  width: 100%;
  margin: 0;
  min-height: 100dvh;
  padding: 2px 0 0;
}

/* もどるリンク（/games/ へ）。.game-wrap の先頭に置く */
.gm-back {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 4px 2%;
  font-size: 11px;
  font-weight: 700;
  color: #5b7690;
  background: rgba(255, 255, 255, .85);
  border: 1px solid #e3d9c5;
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(180, 140, 70, .2);
}

/* ───── 1画面フィット：小さい端末のUI圧縮 ───── */
.gm-compact .gm-label, .gm-compact .gm-slabel { font-size: 9px; }
.gm-compact .gm-num { font-size: 22px; }
.gm-compact .gm-minirank-title { font-size: 7px; }
.gm-compact #mini-rank li { font-size: 8px; }
.gm-compact .gm-minirank .gm-chase { font-size: 7px; }
.gm-compact .gm-best { font-size: 9px; }
.gm-compact .gm-nextbox .gm-next-big { width: 38px; height: 38px; }
.gm-compact .gm-next-belt { width: 42px; }
.gm-compact .gm-wheel-label { font-size: 8px; padding: 1px 7px; }
.gm-compact .gm-evo { padding: 4px 4px; }
.gm-compact .evo-item { transform: scale(.82); margin: -2px -1px; }
.gm-compact .gm-btn-sub { font-size: 11px; padding: 6px 12px; }
.gm-compact .gm-btn-icon { width: 34px; height: 34px; font-size: 14px; }
.gm-compact .gm-foot { margin-top: 8px; gap: 6px; }
.gm-compact .gm-hazbar { margin-top: 6px; height: 6px; }
.gm-compact .gm-top { margin-bottom: 6px; }

/* ───── ホーム画面追加のおすすめ（ゲームオーバー画面内・スリム1行）───── */
.gm-a2hs-hint {
  display: block;
  margin-top: 18px;
  padding: 10px 12px;
  background: #fffbe6;
  border: 1px dashed #f7c600;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #4a3b00;
  text-align: center;
  text-decoration: none;
}
.gm-a2hs-hint b { color: #1d7ceb; margin-left: 4px; }
.gm-a2hs-hint:active { opacity: .7; }

/* ゲームオーバー画面下の「もどる」導線：主動線ではないので控えめリンクに */
.gm-back-link {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  color: #5b7690;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed #b9c4cf;
}
.gm-back-link:active { opacity: .6; }
.gm-a2hs-title {
  font-weight: 800;
  color: #23384d;
  margin-bottom: 3px !important;
}
.gm-a2hs-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px;
  line-height: 1.6;
}
.gm-a2hs-list li::before { content: '・'; }
.gm-a2hs-link {
  display: inline-block;
  margin-top: 4px;
  color: #1d7ceb;
  font-weight: 700;
  text-decoration: none;
}
.gm-a2hs-link:active { opacity: .7; }

/* ───── フッター ───── */
/* 5ボタンを1行に収めるためスマホでは gap も padding も詰める（折り返し防止） */
.gm-foot {
  margin-top: 12px;
  text-align: center;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0 6px;
}
.gm-foot .gm-btn-sub { font-size: 12px; padding: 7px 10px; }
.gm-foot .gm-btn-back { font-size: 11px; padding: 7px 9px; }
.gm-foot .gm-btn-icon { width: 36px; height: 36px; padding: 0; }
.gm-foot .gm-evo { width: 100%; }
.gm-btn-sub {
  background: linear-gradient(180deg, #f8fafc, #dde6ee);
  color: #23384d;
  border: 1px solid #b9c4cf;
  font-size: 12px;
  padding: 8px 16px;
  box-shadow: 0 2px 0 #b9c4cf;
}
.gm-btn-sub:active { transform: translateY(1px); box-shadow: 0 1px 0 #b9c4cf; }
/* サイトに戻るナビ用ボタン（ゲーム内アクションと区別） */
.gm-btn-back {
  background: linear-gradient(180deg, #6b7a8a, #556575);
  color: #fff;
  font-size: 12px;
  padding: 8px 14px;
  box-shadow: 0 2px 0 #3d4a58;
  border: none;
}
.gm-btn-back:active { transform: translateY(1px); box-shadow: 0 1px 0 #3d4a58; }
/* アイコンだけの丸ボタン（サウンド切替） */
.gm-btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ───── 進化表（下段の白パネル・工場レーン風）───── */
.gm-evo {
  margin-top: 10px;
  width: 96%;
  background: #fff;
  border: 2px solid #f0e3c9;
  border-radius: 12px;
  padding: 8px 5px;
  box-shadow: 0 2px 5px rgba(180, 140, 70, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
/* パネル内をうっすら流れる縞（コンベア感） */
.gm-evo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -60deg,
    rgba(240, 180, 90, .07) 0 8px,
    transparent 8px 16px
  );
  animation: convScroll 1.4s linear infinite;
  pointer-events: none;
}
.evo-item {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f4f8fb 60%, #e3ecf4 100%);
  border: 1.5px solid;   /* 色はJSがレベルカラーを指定 */
  box-shadow: 0 1px 3px rgba(35,56,77,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.evo-item img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}
.evo-item.evo-last {
  border-width: 2px;
  box-shadow: 0 0 8px rgba(255,107,53,.55), 0 1px 3px rgba(35,56,77,.3);
}
.evo-arrow {
  font-size: 7px;
  color: #90a4b8;
  margin: 0 1px;
  flex-shrink: 0;
}


/* ═════ メディアクエリ（レスポンシブ）ここに集約 ═════ */

@media (min-width: 769px) {
  .game-wrap { max-width: 600px; padding: 20px 0 30px; }
  /* 左右の空きスペースにうっすら歯車模様（工場の壁っぽさ） */
  .norimono-page {
    background-image:
      radial-gradient(rgba(240, 180, 90, 0.18) 2px, transparent 3px),
      linear-gradient(rgba(240, 180, 90, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(240, 180, 90, 0.08) 1px, transparent 1px);
    background-size: 80px 80px, 24px 24px, 24px 24px;
  }
}


@media (min-width: 900px) {
  .game-wrap {
    /* 左右カラム幅 + 中央は盤面幅ぴったり(auto)にして、左右のカラムを中央に寄せる。
     * これで工具箱・ハザードバーの実幅と左右カラムが近づく。 */
    /* 左右カラムを均等に +20px 拡大：左右差分（30px）は保つので、盤面(stage)の中心位置は
     * ロゴ含めた見え方も変わらないまま、全体の横幅だけ広がる */
    max-width: 1180px !important;
    display: grid;
    grid-template-columns: 270px auto 240px;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "logo logo  logo"
      "rank stage score"
      "rank stage next"
      ".    haz   ."
      ".    foot  .";
    gap: 4px 14px;
    justify-content: center;
    align-items: start;
    padding: 4px 0 10px;
  }
  /* ロゴはヘッダー扱い：全カラムぶちぬきの1行として上に配置。中央寄せ。
   * 画像ロード前でも min-height を確保して fit 計算がずれないようにする */
  .gm-logo {
    grid-area: logo;
    display: block;
    text-align: center;
    margin: 0 auto;
    min-height: 108px;
    line-height: 0;
  }
  .gm-logo img { display: block; max-height: 108px; width: auto; margin: 0 auto; }
  .gm-top { display: contents !important; }
  .gm-minirank {
    grid-area: rank;
    width: 100% !important;
    flex: initial !important;
    padding: 14px 14px !important;
    font-size: 13px;
    align-self: stretch;
    justify-content: flex-start !important;
  }
  .gm-minirank-title { font-size: 12px; margin-bottom: 8px; }
  .gm-minirank #mini-rank li { font-size: 13px; line-height: 2; padding: 3px 4px; border-bottom: 1px dashed #eee6d0; }
  .gm-minirank .gm-chase { font-size: 11px; margin-top: 6px; text-align: center; padding: 3px 0; }
  .gm-scorebox {
    grid-area: score;
    width: 100% !important;
    flex: initial !important;
    align-items: center;
    padding: 14px 8px !important;
    background: #fff;
    border: 1.5px solid #f0e3c9;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(180, 140, 70, .15);
  }
  .gm-slabel { font-size: 12px; letter-spacing: 3px; }
  .gm-scorebox .gm-num { font-size: 44px; margin-top: 4px; }
  .gm-best { font-size: 12px; margin-top: 6px; }
  .gm-nextbox {
    grid-area: next;
    width: 100% !important;
    flex: initial !important;
    align-items: center;
    padding: 12px 8px !important;
    background: #fff;
    border: 1.5px solid #f0e3c9;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(180, 140, 70, .15);
    margin-top: 0;
  }
  .gm-wheel { width: 180px !important; height: 180px !important; }
  .gm-wheel-center { width: 76px !important; height: 76px !important; }
  .gm-stage { grid-area: stage; justify-self: center; }
  .gm-hazbar { grid-area: haz; width: 100%; margin-top: 4px; height: 6px; }
  .gm-foot { grid-area: foot; width: 100%; margin-top: 4px; gap: 12px; }
  .gm-foot .gm-btn-sub { font-size: 14px; padding: 10px 18px; }
  .gm-foot .gm-btn-back { font-size: 13px; padding: 10px 16px; }
  .gm-foot .gm-btn-icon { width: 44px; height: 44px; font-size: 16px; }

  /* PC版のモーダルはスマホサイズだと文字も要素も小さくて読みにくい。
   * 幅・書体・パディングを一段大きくして「読みやすい」に振り切る */
  .gm-over-box {
    max-width: 560px;
    padding: 28px 32px 30px;
    border-radius: 18px;
  }
  .gm-over-title { font-size: 26px; margin-bottom: 14px; }
  .gm-over-score { font-size: 18px; margin-bottom: 8px; }
  .gm-over-score span { font-size: 34px; }
  .gm-over-best { font-size: 15px; margin-bottom: 10px; }
  .gm-rules-list { font-size: 14px; line-height: 1.7; padding-left: 22px; }
  .gm-rules-list li { margin-bottom: 10px; }
  .rule-sublist { font-size: 13px; line-height: 1.7; }
  .rule-demo img { width: 38px; height: 38px; }
  .rule-evo-chain { padding: 10px 6px; gap: 4px 5px; }
  .rule-evo-chain img { width: 30px; height: 30px; border-width: 2px; padding: 2px; }
  .rule-evo-arrow { font-size: 13px; }
  .gm-rank-list { max-height: 320px; margin: 14px 0 8px; }
  .gm-rank-list li { font-size: 15px; padding: 9px 12px; gap: 10px; }
  .gm-rank-list .rk-pos { width: 40px; }
  .gm-rank-list li:nth-child(1) .rk-pos { font-size: 17px; }
  .gm-rank-list li:nth-child(2) .rk-pos,
  .gm-rank-list li:nth-child(3) .rk-pos { font-size: 16px; }
  .gm-rank-month { font-size: 13px; margin: -2px 0 6px; }
  .gm-rank-tabs { margin: 8px 0 4px; gap: 8px; }
  .gm-rank-tab { font-size: 15px; padding: 9px 30px; min-width: 110px; }
  .gm-myrank { font-size: 14px; padding: 10px 10px; margin: 10px 0 6px; }
  .gm-rank-empty { font-size: 14px; padding: 20px 8px; }
  .gm-rank-entry input { font-size: 15px; padding: 11px 14px; margin-bottom: 10px; }
  .gm-rank-entry select { font-size: 14px; padding: 10px 12px; margin-bottom: 10px; }
  .gm-btn-rank { font-size: 16px; padding: 12px 20px; }
  .gm-btn-main { font-size: 17px; padding: 15px 22px; margin: 16px 0 0; }
  .gm-btn-share { font-size: 13px; padding: 10px 18px; max-width: 260px; }
  .gm-a2hs-hint { font-size: 12.5px; margin-top: 16px; padding: 10px 14px; }
}

@media (min-width: 1200px) {
  .game-wrap { max-width: 1240px !important; grid-template-columns: 260px auto 260px; }
  .gm-wheel { width: 210px !important; height: 210px !important; }
  .gm-wheel-center { width: 88px !important; height: 88px !important; }
  /* 1200px以上ではロゴをさらに大きく（余白が広いので） */
  .gm-logo { min-height: 128px; }
  .gm-logo img { max-height: 128px; }
}

/* WP埋込時のみ：PCではロゴを追加してゲーム自体が縦に長くなったので、
 * 縦中央寄せをやめて上詰めに戻し、上余白は最小限に。下は自然に伸びるだけ。
 * .norimono-page はWPページテンプレート専用クラスなので、プロトタイプ単体表示には影響しない */
@media (min-width: 900px) {
  .norimono-page {
    align-items: flex-start !important;
    min-height: 0;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }
}