:root {
  --brown: #8a5a34;
  --brown-soft: #d9b48f;
  --bg: #fdf6ee;
  --text-muted: #9c8b7a;
}
* { box-sizing: border-box; }
/* スマホ縦画面前提のゲーム。max-width指定が無いと、PCの広い画面で#grid-viewportの
   幅(=セルサイズの計算元)がそのまま巨大になり、岩が数百pxの正方形になって
   ほとんど画面外にはみ出す事故になっていた(セルサイズ = ビューポート幅÷7)。 */
html { display: flex; justify-content: center; background: #d8cdbf; }
body {
  margin: 0;
  width: 100%;
  /* PCでは横が狭すぎるとの指摘を受けて広げた。盤面が巨大にならないよう、セルの
     大きさ自体は main.js が「横幅÷7」と「パネルの高さ÷7」の小さいほうで決め、
     余った横幅は左右に均等な余白(--gx)として配る。 */
  max-width: 560px;
  min-height: 100vh;
  position: relative;
  font-family: "M PLUS Rounded 1c", sans-serif;
  background: var(--bg);
  color: #3a2c1e;
  overscroll-behavior: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.hidden { display: none !important; }

.sound-controls { position: absolute; top: 8px; right: 8px; z-index: 60; display: flex; gap: 4px; }
.mute-btn { border: none; background: #fff; border-radius: 999px; width: 34px; height: 34px; font-size: 16px; }

.site-footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 55;
  background: #fff8ef; border-top: 1px solid var(--brown-soft);
  padding: 6px 10px; font-size: 11px; text-align: center;
}
.footer-links a, .footer-meta a { color: var(--text-muted); text-decoration: none; }
.version-link { border-bottom: 1px dotted currentColor; }
.copyright { color: var(--text-muted); }

/* 参加画面はシリーズ共通のパターン(淡い背景 + 白い角丸カード + ピル型のリンク行 +
   大きな角丸ボタン + カード風ランキング)に揃える。木登りバトル・クレー射撃ライフと
   同じ骨格にしてあり、色だけこのゲームのテーマ(土の茶色)に置き換えている。 */
.screen { min-height: 100vh; padding: 20px 14px 96px; display: flex; align-items: flex-start; justify-content: center; }
#screen-title { background: linear-gradient(#cfe9f5, #f6ece0 60%); }
.panel {
  max-width: 420px; width: 100%; text-align: center; background: #fff;
  border-radius: 20px; padding: 20px 18px; box-shadow: 0 6px 20px rgba(90, 60, 30, .12);
}
/* タイトルのヒーロー枠。描き下ろしのイラストはまだ無いので、ゲームに登場する
   ぽんすけ・ぽかすけの3Dモデルをそのまま並べて「顔」にしている。 */
.hero-row { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 2px; }
.hero-char { width: 104px; height: 104px; display: block; }
.title { font-size: 21px; font-weight: 800; margin: 2px 0 4px; letter-spacing: 1px; }
.lead { font-size: 13px; color: #6b5744; font-weight: 700; margin: 0 0 12px; line-height: 1.6; }

.link-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 14px; }
.rules-link, .link-row .home-link, .share-button {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px;
  border: 2px solid var(--brown-soft); border-radius: 999px; background: #fff;
  color: var(--brown); font-size: 12px; font-weight: 700; text-decoration: none; font-family: inherit;
}
.rules-link:hover, .link-row .home-link:hover, .share-button:hover {
  border-color: var(--brown); background: #fdf3e8;
}

.field { display: block; margin: 12px 0; font-size: 12px; text-align: left; }
.field > span { display: block; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
.field input {
  width: 100%; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--brown-soft);
  font-size: 14px; font-family: inherit; background: #fffdfa; color: inherit;
}

.primary-button {
  width: 100%; padding: 14px; border-radius: 999px; border: none; background: var(--brown);
  color: #fff; font-size: 16px; font-weight: 800; font-family: inherit; margin-top: 10px;
  box-shadow: 0 3px 0 #6f4527;
}
.primary-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #6f4527; }
.secondary-button {
  padding: 10px 16px; border-radius: 999px; border: 2px solid var(--brown-soft);
  background: #fff; color: var(--brown); font-weight: 700; font-family: inherit;
}
.join-error { color: #c0392b; font-size: 12px; margin-top: 6px; }

/* ランキングは最深度/最大所持金の2種類をタブで切り替える(ユーザー指定)。 */

.ranking-tabs { display: flex; gap: 6px; margin-top: 18px; }
.ranking-tab {
  flex: 1; border: 1px solid var(--brown-soft); background: #fff; color: var(--brown);
  border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ranking-tab.is-active { background: var(--brown); color: #fff; border-color: var(--brown); }
.ranking-block { margin-top: 10px; text-align: left; }
.ranking-title { font-size: 13px; font-weight: 800; margin-bottom: 6px; color: var(--brown); }
.ranking-list { list-style: none; padding: 0; margin: 0; font-size: 13px; counter-reset: rank; }
.ranking-list li {
  counter-increment: rank; display: flex; justify-content: space-between; gap: 8px;
  background: #fdf3e8; border-radius: 10px; padding: 7px 12px; margin-bottom: 4px; font-weight: 700;
}
.ranking-list li::before { content: counter(rank) "."; color: var(--brown); margin-right: 6px; }
.ranking-list li .rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 桁数が違っても縦に揃うよう、記録と時間はそれぞれ幅を固定して右寄せにする
   (ユーザー指摘:「最大所持金金額がズレてる」)。 */
.ranking-list li .rank-value { color: var(--brown); min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
/* 記録の横に出す経過時間(ユーザー指定)。 */
.ranking-list li .rank-time { color: var(--text-muted); font-size: 11px; min-width: 3.6em; margin-left: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.ranking-empty { color: var(--text-muted); font-size: 12px; font-weight: 700; }

/* .screenの既定(align-items:center; justify-content:center)は「中身をぐっと真ん中に
   寄せる」タイトル画面向けの設定で、ゲーム画面に効くと#grid-viewportが横幅0まで
   縮んでしまう(cs=0pxになり盤面が消える事故が実際に起きていた)。ゲーム画面は
   幅いっぼいに広げる必要があるので上書きする。 */
/* min-height:100vhのまま(上の.screen由来)だと、内容がその分だけ縦に伸びて
   スクロールが発生し、画面全体が実際のスマホ画面より大きく見える事故になっていた。
   ゲーム画面はちょうど1画面に収める。 */
#screen-game { position: relative; height: 100dvh; min-height: 0; box-sizing: border-box; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px 6px 84px; display: flex; overflow: hidden; }

/* 通知バナー(ユーザー指定:「荷物がいっぱいになったとき、体力が30%未満になった
   ときアナウンス」)。画面上部中央にフェードイン/フェードアウトする。 */
.toast {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 80; background: rgba(20, 15, 10, .88); color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap; max-width: 90%; text-overflow: ellipsis; overflow: hidden;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 地上パート(画面比率 地上3:地下7)。 */
.surface-view {
  background: linear-gradient(#a8d8ea 0%, #a8d8ea 62%, #7fb86a 62%, #6aa858 100%);
}
/* 【重要】茶色い地面は .surface-view の擬似要素として敷く。.ground-scene の
   擬似要素にすると、同じ要素の子である穴やロープの上に乗ってしまい、穴がまったく
   タップできなくなる。 */
.surface-view::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 0;
  background: #8a6a4a; border-top: 4px solid #6f5238;
}
/* 空と地面の境界線(上から62% = 下から38%)を基準線とする。キャラクター・建物は
   bottom:38%指定でそこから上に、カゴの穴・ロープはtop:62%指定でそこから下に
   配置することで「地面の上に立っている」見た目にする(企画メモ)。
   以前はflexで積んでいたが、キャラクターが基準線よりだいぶ上に浮く事故があったため、
   全要素を境界線に直接アンカーする絶対配置に変更した。 */
.ground-scene { position: relative; width: 100%; height: 100%; z-index: 1; }

.ground-char-canvas {
  /* キャラクターはお店の建物より手前に描く(ユーザー指定)。 */
  z-index: 4;
  position: absolute; bottom: 38%; left: 46%; width: 44px; height: 44px; transform: translateX(-50%);
  transition: left .45s ease, opacity .3s, transform .5s ease-in; display: block;
}

/* 換金所・ショップを、それぞれお店の建物だと分かる見た目にする(企画メモ)。
   bottom:38%を基準に建物がそこから上に立つ(=地面の線の上に立って見える)。
   屋根は三角のborderトリックで足す。 */
/* 【重要】建物のタップ範囲は地面の線より上だけにする。穴の当たり判定は線より下に
   寄せてあり、両端の穴と建物で反応が入れ替わる事故を防ぐ(ユーザー指摘:「一番左の穴と
   換金、一番右の穴と店の押したときの判定がたまに意図しない側になる」)。
   あわせて建物を大きくして押しやすくした。 */
.spot.building { position: absolute; bottom: calc(38% + 10px); width: 86px; text-align: center; cursor: pointer; z-index: 2; transform: translateX(-50%); }
/* 換金所は左端の穴と左から2番目の穴の間、ショップは右端の穴と右から2番目の穴の間
   (ユーザー指定。縦位置はそのまま)。穴と同じ --gx/--cs 基準なので、画面幅が変わっても
   穴との位置関係がずれない。 */
.spot.building[data-loc="exchange"] { left: calc(var(--gx, 0px) + var(--cs) * 1); }
.spot.building[data-loc="shop"] { left: calc(var(--gx, 0px) + var(--cs) * 6); }
.spot.building:active { transform: translateX(-50%) scale(.93); }
.building-box {
  position: relative; width: 62px; height: 54px; margin: 0 auto; border-radius: 5px 5px 10px 10px;
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: bold;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.15);
}
.building-box::before {
  content: ""; position: absolute; left: -7px; right: -7px; top: -13px; height: 0;
  border-left: 38px solid transparent; border-right: 38px solid transparent; border-bottom: 15px solid #6f5238;
}
.exchange-box { background: #4a9d6e; }
.shop-box { background: #d9534f; }
.spot-label { font-size: 9px; color: #333; font-weight: bold; background: rgba(255,255,255,.75); border-radius: 6px; padding: 1px 4px; display: inline-block; margin-top: 2px; }

/* カゴの発着口を、地下の横7マスに実際に対応するX座標の7個の穴として見せる
   (企画メモ:「地上の穴と地下の7マスは同じX座標になること」)。各穴はvar(--cs)
   (main.jsが画面幅÷7で更新する、地下グリッドと共通のセルサイズ)を使って計算するので
   横幅が変わっても常に地下の列と一致する。穴はtop:62%(=境界線)を基準にそこから
   少し地面に埋まる位置に置く。
   【タップ判定改善】見た目の点(小さい楕円)はそのままに、実際のタップ判定は
   32x32pxの大きめの当たり判定にする(ユーザー指摘:「タッチ判定が微妙」)。 */
.basket-holes { position: absolute; inset: 0; pointer-events: none; }
/* 穴の当たり判定は地面の線より下に寄せる(見た目の楕円の位置は変えない)。 */
.hole {
  position: absolute; top: 62%; margin-top: 7px; width: 46px; height: 34px;
  transform: translateX(-50%); cursor: pointer; pointer-events: auto;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 0;
}
.hole::before {
  content: ""; width: 36px; height: 17px; border-radius: 50%; background: #4a3420;
  box-shadow: inset 0 4px 5px rgba(0,0,0,.65);
}
.hole[data-col="0"] { left: calc(var(--gx, 0px) + var(--cs) * 0.5); }
.hole[data-col="1"] { left: calc(var(--gx, 0px) + var(--cs) * 1.5); }
.hole[data-col="2"] { left: calc(var(--gx, 0px) + var(--cs) * 2.5); }
.hole[data-col="3"] { left: calc(var(--gx, 0px) + var(--cs) * 3.5); }
.hole[data-col="4"] { left: calc(var(--gx, 0px) + var(--cs) * 4.5); }
.hole[data-col="5"] { left: calc(var(--gx, 0px) + var(--cs) * 5.5); }
.hole[data-col="6"] { left: calc(var(--gx, 0px) + var(--cs) * 6.5); }
.hole:active::before { transform: scale(.85); }
/* ロープ・カゴは「見失わないように」常に不透明で表示し続ける(企画メモ)。
   位置(left)はmain.jsのupdateBasketShaftPosition()がground.basketColに応じて
   var(--cs)基準で更新する。ユーザー指摘:「おろした穴にロープUIを用意してそれを
   タップしたら上げ下げできるように」→ロープ自体もタップ可能にし、当たり判定も
   広げる(見た目の細い線はそのまま、判定は幅28pxの帯)。 */
.basket-rope {
  position: absolute; top: 62%; width: 28px; height: 34px;
  transform: translateX(-50%); transition: left .3s ease; pointer-events: auto; cursor: pointer;
  display: flex; justify-content: center;
}
.basket-rope::before {
  content: ""; width: 2px; height: 100%; background: #8a6a4a;
}
.basket-rope:active { transform: translateX(-50%) scale(.95); }
.basket-cage {
  width: 26px; height: 18px; position: absolute; left: 50%; top: 30px; transform: translateX(-50%);
  border: 3px solid #8a6a4a; border-top: none; border-radius: 0 0 6px 6px; background: rgba(217, 178, 122, .9);
  pointer-events: none; /* クリックは親の#basket-ropeが受け取る */
}

/* ショップ/換金所メニュー: 小さすぎて押しづらいとの指摘のため、文字・ボタンを拡大 */
/* 【重要】#screen-game 直下に置き、地上パネルの外にはみ出して表示する。地上パネルは
   画面の3割しかないので、その中に収めようとすると中身が入りきらず内部スクロールで
   見切れていた(ユーザー指摘)。降りる前のやりとりなので地下側に重なって構わない。 */
/* メニューは空の部分(パネル上部)に出す。中央に大きく出すと、建物や穴が
   ぜんぶ隠れて別の場所へ移動できなくなるため。 */
/* 【重要】上端はメーターの下に合わせる。重なっていると、回復したときに疲労ゲージが
   どれだけ減ったのか見えなかった(ユーザー指摘)。 */
.slot-menu {
  position: absolute; left: 8px; right: 8px; top: 56px;
  z-index: 30; background: rgba(255,255,255,.98);
  max-height: calc(100% - 66px);
  border-radius: 12px; padding: 12px; font-size: 14px; display: flex; flex-direction: column; gap: 7px;
  max-height: calc(100% - 80px); overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.slot-menu h4 { margin: 0 0 4px; font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
.slot-menu .close-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,.08); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; color: #3a2c1e; }
.shop-btn, .action-btn { background: #fff; border: 1px solid #999; border-radius: 8px; padding: 10px; font-size: 14px; text-align: left; line-height: 1.35; }
.shop-btn small { color: #6b5a47; font-size: 11px; }
.shop-btn:disabled, .action-btn:disabled { opacity: .4; }
/* いまのお金で買えるもの/買えないものを背景色で分ける(ユーザー指定)。買えないものも
   押せる(押すと「お金が足りない」と出る)ので、disabledにはせず色だけ変える。 */
.shop-btn.can-buy { background: #eaf7e6; border-color: #7cbf6a; }
.shop-btn.cant-buy { background: #f1ece6; border-color: #cdbfb0; color: #9c8b7a; }
.shop-btn.cant-buy small { color: #a89a8b; }

/* 誰も地下にいなくても地下のグリッドは常に見える(企画メモ:「二人とも上にいても
   地下の状態は見えること」)。ここは画面全体を覆う黒幕ではなく、上部の軽い
   案内バナーに留める。 */
.not-started-overlay {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: none;
  background: rgba(0,0,0,.55); color: #fff; text-align: center; font-size: 12px; padding: 4px 8px;
}
.not-started-overlay.visible { display: block; }
.not-started-overlay .small { font-size: 12px; }
#hud { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; align-items: center; }
/* 名前が長いとHUDが2行になってしまうので、省略して1行に収める。 */
#pill-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { background: #fff; border: 1px solid var(--brown-soft); border-radius: 999px; padding: 2px 7px; font-size: 10px; white-space: nowrap; }
.pill-sub { color: var(--text-muted); font-size: 10px; margin-left: 2px; }
.hud-quit-button { border: none; background: #eee; border-radius: 999px; padding: 2px 8px; font-size: 10px; white-space: nowrap; }

/* セルサイズ(--cs)はmain.jsが「画面幅÷7」で計算してsetする(プロトタイプと同じ方式)。
   grid-template-columnsだと狭い画面で列が折り返し/クリップされる事故があったため、
   固定px幅のflex行に変更した。 */
/* 1匹ぶんの画面(パネル)を上下に2つ並べる(ユーザー指定:「上下で分ける実装で
   すすめる、その分画面の全体サイズを少し小さくする」)。 */
#panels { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }

.panel-slot {
  /* 【重要】position:relative が無いと、.slot-menu(absolute)の基準がこのパネルでは
     なく画面全体になり、overflow:hidden でも切り取られずに隣のパネルまではみ出す。 */
  position: relative;
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  border: 2px solid var(--brown-soft); border-radius: 10px; overflow: hidden; background: #fff;
}
.slot-hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 6px;
  background: #f6ece0; border-bottom: 1px solid var(--brown-soft); font-size: 11px; flex: none;
}
.slot-hud .pill { font-size: 10px; padding: 2px 6px; }
.slot-name { font-weight: 800; font-size: 11px; margin-right: 2px; }
/* 体力(疲労)と容量の横メーター。どちらも右へ伸びるほど危ない、で向きを揃える
   (ユーザー指摘:「体力ゲージが減って容量ゲージが増えるのがわかりづらい」)。 */
.meters {
  flex: none; display: flex; gap: 8px; align-items: center;
  padding: 4px 8px; background: #fff; border-bottom: 1px solid var(--brown-soft);
}
.meter { flex: 1; display: flex; align-items: center; gap: 5px; min-width: 0; }
.meter-label { font-size: 10px; font-weight: 800; color: var(--brown); white-space: nowrap; }
.meter-track {
  flex: 1; height: 9px; min-width: 0; border-radius: 999px;
  background: rgba(0,0,0,.12); overflow: hidden;
}
.meter-fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s ease; }
.drain-note { color: #dc3c3c; font-size: 9px; margin-left: 2px; }
.meter-num { font-size: 10px; color: #6b5a47; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fatigue-fill { background: #dc3c3c; }
.cap-fill { background: #e6b428; }
/* 体力があぶないときは点滅させる(ユーザー指定:「へっていくと点滅するようにして」)。 */
@keyframes meter-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.meter-fill.is-danger { animation: meter-blink .7s ease-in-out infinite; }
/* パネルの本体。地上ビューと地下ビューを重ねて、片方だけ出す。 */
.slot-body { position: relative; flex: 1 1 0; min-height: 0; }
.surface-view, .mine-view { position: absolute; inset: 0; overflow: hidden; }
.surface-view.hidden, .mine-view.hidden { display: none; }
/* 地上と地下の切り替えを、カゴで上下しているように見せる(ユーザー指摘:「地上から
   地下にいくときも画面がスムーズに移動できないかな」)。下へ降りるときは深いほうの
   景色が下から、上へ戻るときは地上が上から入ってくる。 */
@keyframes view-from-below { from { transform: translateY(26%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes view-from-above { from { transform: translateY(-26%); opacity: 0; } to { transform: none; opacity: 1; } }
.mine-view.entering { animation: view-from-below .42s ease-out; }
.surface-view.entering { animation: view-from-above .42s ease-out; }
.mine-view { background: #fdf6f0; }
/* 地下に降りているパネルは、カゴを呼ぶ/乗るボタンを右下に出す。 */
/* 画面下に、いま持っている鉱石の内訳を出す(ユーザー指定)。カゴのボタンと
   ぶつからないよう左側に置き、多いときは横スクロールさせる。 */
.cargo-strip {
  position: absolute; left: 8px; right: 108px; bottom: 6px; z-index: 12;
  display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none;
}
.cargo-strip::-webkit-scrollbar { display: none; }
.cargo-chip {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  background: rgba(255,255,255,.95); border: 1px solid var(--brown-soft);
  border-radius: 999px; padding: 3px 8px; font-size: 11px; color: #3a2c1e;
}
.cargo-chip b { font-size: 12px; }
/* HUD(キャラ名の横)に並べる、持っている鉱石の内訳。他のpillと同じ大きさに揃える。 */
.hud-cargo { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.hud-cargo .cargo-chip { padding: 2px 7px; font-size: 10px; border-color: var(--brown-soft); }
.hud-cargo .cargo-chip b { font-size: 11px; }
.hud-cargo .cargo-empty { font-size: 10px; padding: 2px 7px; background: #fff; border: 1px solid var(--brown-soft); }
/* 換金所のメニュー内では、画面下と同じチップに金額も添えて並べる(ユーザー指定)。 */
.cargo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cargo-chips .cargo-chip { font-size: 13px; padding: 4px 10px; }
.cargo-chips .cargo-chip b { font-size: 14px; }
.chip-price { display: none; }
.cargo-chips .chip-price { display: inline; margin-left: 4px; color: #8a6a4a; font-size: 11px; }
.cargo-empty { font-size: 11px; color: #8a7a68; background: rgba(255,255,255,.8); border-radius: 999px; padding: 3px 8px; }
.ore { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ore-stone { background: #967752; }
.ore-copper { background: #d87a3c; }
.ore-iron { background: #91959c; }
.ore-gold { background: #dcaa2f; }
.ore-diamond { background: #7fd6e0; }
.ore-fossil { background: #d8c7a2; }

/* カゴが降りて来られる列の帯(ユーザー指定の紫)。 */
.reach-strip { position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 11; pointer-events: none; }
.reach-strip i { position: absolute; top: 0; height: 100%; background: transparent; }
.reach-strip i.ok { background: #a03fb0; box-shadow: 0 1px 4px rgba(160,63,176,.5); }

.basket-btn {
  position: absolute; right: 8px; bottom: 6px; z-index: 12;
  border: 1px solid #8a6a4a; background: rgba(255,255,255,.95); color: #4a3420;
  border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.basket-btn.ready { background: #f0c419; border-color: #a98b12; }
.basket-btn:disabled { opacity: .45; }
/* カゴで上下している間は、キャラをカゴのマスの少し上へずらして「カゴに乗っている」
   見た目にする(ユーザー指定)。 */
.mine-player-canvas.riding { z-index: 4; transform: translateY(-24%); }
.grid-row { display: flex; }
.cell {
  width: var(--cs); height: var(--cs); flex: 0 0 var(--cs);
  display: flex; align-items: center; justify-content: center; position: relative;
  font-size: calc(var(--cs) * 0.45); cursor: pointer; box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.35); overflow: hidden;
}
.cell.empty { background: transparent; border-color: transparent; }
/* 道中に落ちている回復アイテム(ユーザー指定:「道中でも触れば回復できるアイテムが
   ほしい」)。触れると消えて体力が回復する。絵文字は使わず、十字マークで描く。 */
/* 絶対に掘れない岩盤(ユーザー指定)。掘れる岩と区別がつくよう、暗く硬そうな色に
   して斜線を入れる。 */
.cell.bedrock {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 4px, transparent 4px 9px),
    linear-gradient(#5d5a56, #3c3a37);
  border-color: rgba(0,0,0,.6); cursor: default;
}

/* 体力の上限が増えるレアアイテム(ユーザー指定)。回復アイテムと区別できる金色。 */
.cell.maxhp-item { background: transparent; border-color: transparent; }
.cell.maxhp-item::after {
  content: ""; position: absolute; left: 50%; bottom: 13%; width: 50%; height: 50%;
  transform: translateX(-50%) rotate(45deg); border-radius: 18%;
  background:
    linear-gradient(#fff, #fff) 50% 50% / 30% 100% no-repeat,
    linear-gradient(#fff, #fff) 50% 50% / 100% 30% no-repeat,
    linear-gradient(135deg, #ffe27a, #dcaa2f 60%, #a97e14);
  box-shadow: 0 0 10px rgba(255, 210, 60, .9), 0 2px 5px rgba(0,0,0,.35);
}
.cell.heal-item { background: transparent; border-color: transparent; }
/* 落ちものは地面(下の岩)に置いてあるように、マスの下端に寄せて描く(ユーザー指定)。 */
.cell.heal-item::after {
  content: ""; position: absolute; left: 50%; bottom: 3%; width: 52%; height: 52%;
  transform: translateX(-50%); border-radius: 22%;
  background:
    linear-gradient(#fff, #fff) 50% 50% / 34% 100% no-repeat,
    linear-gradient(#fff, #fff) 50% 50% / 100% 34% no-repeat,
    #e2504a;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
/* 岩の色。以前はセルごとに独立したradial-gradient(左上にハイライト)を使っていたが、
   境界線を消しても「セルごとにハイライトの位置が繰り返される」せいでタイルが
   並んでいるように見えてしまっていた(ユーザー指摘:「全部つなぎ目ありそう」)。
   単色に変更し、境界線を消したときに本当にひと続きの塊に見えるようにする。 */
.cell.rock-stone { background: #967752; }
.cell.rock-copper { background: #d87a3c; }
.cell.rock-iron { background: #91959c; }
.cell.rock-gold { background: #dcaa2f; }
.cell.rock-diamond { background: #7fd6e0; }
/* 超レアの化石(ユーザー指定)。骨の形を描いて一目で分かるようにする。 */
.cell.rock-fossil { background: #d8c7a2; }
/* 骨の絵は子要素(.fossil-bone)で描く。::before/::after は黄色い枠やひび割れが
   使うため、そちらに奪われて絵が崩れていた(ユーザー指摘:「近づくと絵が壊れる」)。 */
.fossil-bone {
  position: absolute; left: 50%; top: 50%; width: 66%; height: 26%;
  transform: translate(-50%, -50%) rotate(-18deg); pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle, #fffaf0 60%, transparent 64%) 0 0 / 28% 55% no-repeat,
    radial-gradient(circle, #fffaf0 60%, transparent 64%) 0 100% / 28% 55% no-repeat,
    radial-gradient(circle, #fffaf0 60%, transparent 64%) 100% 0 / 28% 55% no-repeat,
    radial-gradient(circle, #fffaf0 60%, transparent 64%) 100% 100% / 28% 55% no-repeat,
    linear-gradient(#fffaf0, #fffaf0) 50% 50% / 76% 40% no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 240, 200, .9));
}
/* 同じ種類の岩が「一度に壊せるかたまり(最大7個)」として同じグループに属する場合は
   隣接面の境界線を透明にし(main.jsが border*Color=transparent を付与)、マス目を
   感じさせない一続きの岩塊に見せる(企画メモ、ユーザー指摘:「いっぺんに壊せる
   箇所は間の線をなくしてつながってるのがわかるようにする」)。 */

/* 耐久値に応じたひび割れ(企画メモ:「削られている岩側にも見た目の変化を入れる」)。 */
.cell.crack-1::after, .cell.crack-2::after, .cell.crack-3::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(102deg, transparent 45%, rgba(20,10,0,.4) 47%, rgba(20,10,0,.4) 49%, transparent 51%);
}
.cell.crack-2::after {
  background-image:
    linear-gradient(102deg, transparent 45%, rgba(20,10,0,.45) 47%, rgba(20,10,0,.45) 49%, transparent 51%),
    linear-gradient(18deg, transparent 58%, rgba(20,10,0,.4) 60%, rgba(20,10,0,.4) 62%, transparent 64%);
}
.cell.crack-3::after {
  background-image:
    linear-gradient(102deg, transparent 40%, rgba(10,5,0,.55) 43%, rgba(10,5,0,.55) 46%, transparent 49%),
    linear-gradient(18deg, transparent 55%, rgba(10,5,0,.5) 58%, rgba(10,5,0,.5) 61%, transparent 64%),
    linear-gradient(-30deg, transparent 65%, rgba(10,5,0,.45) 67%, rgba(10,5,0,.45) 70%, transparent 73%);
  filter: brightness(.88);
}
.cell.player { background: transparent !important; border-color: transparent; }
/* 「どこがタップできるか分かりづらい」への対応。プレイヤーに隣接した操作可能マスを
   ゆらゆらと光らせて目印にする。ただし上方向は歩いて登れなくなったため、main.js側で
   上のマスにはこのクラスを付けない(企画メモ:「上にはカゴにのったときのみ上がれる」)。 */
.cell.reachable { box-shadow: inset 0 0 0 2px rgba(255,241,120,.85); animation: reachable-pulse 1.4s ease-in-out infinite; }
@keyframes reachable-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,241,120,.5); }
  50% { box-shadow: inset 0 0 0 2px rgba(255,241,120,.95); }
}
/* 岩をタップすると繋がった岩がまとめて壊れるので、1マスではなくグループ全体を
   囲んで「ここまで壊れる」と分かるようにする(ユーザー指定)。グループの内側の辺は
   引かず、外周だけをなぞるため、辺ごとに疑似要素で線を引く。 */
.cell.reachable-group { box-shadow: none; animation: reachable-group-pulse 1.4s ease-in-out infinite; }
.cell.reachable-group::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-style: solid; border-color: rgba(255,241,120,.95); border-width: 0;
}
.cell.reachable-group[data-edge-top="on"]::after { border-top-width: 3px; }
.cell.reachable-group[data-edge-bottom="on"]::after { border-bottom-width: 3px; }
.cell.reachable-group[data-edge-left="on"]::after { border-left-width: 3px; }
.cell.reachable-group[data-edge-right="on"]::after { border-right-width: 3px; }
@keyframes reachable-group-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
/* 隣接する岩をタップすると何個いっきに壊れるかを示す小さなバッジ(ユーザー指摘:
   「一度に壊せるくっついてる岩がわかりづらい」。連鎖の上限は7個)。 */
.chain-badge {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 2px;
  background: rgba(0,0,0,.7); color: #fff; font-size: 10px; font-weight: bold; line-height: 15px;
  text-align: center; border-radius: 8px; z-index: 2; pointer-events: none;
}
/* 叩いた岩に残りの耐久を出す(ユーザー指定:「2/5 など」)。 */
.dur-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: calc(var(--cs) * 0.22); font-weight: 800; color: #fff;
  background: rgba(20, 15, 10, .62); border-radius: 999px; padding: 1px 6px;
  pointer-events: none; white-space: nowrap; line-height: 1.3;
}
/* プレイヤーの3Dモデル。.cellの上に絶対配置で重ね、main.jsが座標(--cs基準)を
   更新する。cellそのものはヒットテスト用に残す。高さをセルより少し大きくし、下端
   (足元)をセルの底に接地させることで「地面・岩の上に自然に立っている」見た目にする
   (企画メモ:「浮いたりしないこと」)。 */
.mine-player-canvas { position: absolute; pointer-events: none; z-index: 3; transition: left .12s linear; }
/* 掘削の瞬間のひねり演出(企画メモ:「コードでモデル+ドリルの作画でフォロー」)。 */
@keyframes dig-punch {
  0% { transform: translateX(0) rotate(0deg); }
  30% { transform: translateX(4px) rotate(-8deg); }
  60% { transform: translateX(-3px) rotate(6deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.mine-player-canvas.dig-anim { animation: dig-punch .22s ease; }

/* カゴの地下側マーカー。降下/上昇の間、main.jsがrequestAnimationFrameで毎フレーム
   位置を更新する(企画メモ:「上昇下降はリアルタイムで描写」「カゴを見失わないように」)。
   CSSのtransitionは使わない(JS制御のtop/leftと競合してカクつくため)。 */
/* 地上から地下のカゴまで伸びるロープ(ユーザー指摘)。 */
.mine-rope {
  position: absolute; top: 0; width: 3px; margin-left: -1.5px; z-index: 1; display: none;
  background: linear-gradient(#6f5238, #8a6a4a);
  box-shadow: 0 0 2px rgba(0,0,0,.35);
  pointer-events: none;
}

/* 移動中のカゴの深さ(ユーザー指定)。 */
.mine-basket-marker::after,
.basket-rope::after {
  content: attr(data-depth); position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 4px; white-space: nowrap; pointer-events: none;
  font-size: 11px; font-weight: 800; color: #fff; background: rgba(40, 28, 18, .75);
  border-radius: 999px; padding: 1px 7px;
}
.mine-basket-marker[data-depth=""]::after,
.basket-rope[data-depth=""]::after,
.mine-basket-marker:not([data-depth])::after,
.basket-rope:not([data-depth])::after { display: none; }

.mine-basket-marker {
  position: absolute; z-index: 2; display: none; align-items: center; justify-content: center; pointer-events: none;
}
.mine-basket-marker::before {
  content: ""; width: 70%; height: 55%; border: 3px solid #8a6a4a; border-top: none;
  border-radius: 0 0 6px 6px; background: rgba(217, 178, 122, .9);
}

/* 容量(左)・HP(右)を地下マップ両端の縦バーで常時表示する(ユーザー指摘:
   「容量と体力がわかりづらい」)。数値そのものはHUDのpillにも残す。
   【修正】以前は幅14px・不透明度が高く、盤面の一番端の列にかぶって見えてしまい、
   かつpointer-eventsを制限していなかったのでその列がタップできなくなっていた
   (ユーザー指摘:「なんか悪化した」)。幅をさらに細くし半透明にして、タップは
   必ず下のマスに通すようにする。 */
/* 【変更】盤面の中ではなく画面の両端(#screen-gameのパディング側)に立てる。
   盤面の端の列にかぶらなくなったので、細く半透明にする必要もなくなった。 */

/* 地下でカゴに重なってタップしたときの「積む/乗る」選択メニュー(企画メモ)。 */
.mine-basket-choice {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;
  background: rgba(255,255,255,.97); border-radius: 12px; padding: 12px; display: flex; flex-direction: column;
  gap: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.35); width: 78%; max-width: 260px;
}
.mine-basket-choice .action-btn { text-align: center; font-size: 14px; padding: 10px; }

.dpad { position: absolute; right: 16px; bottom: 100px; display: grid; grid-template-columns: 44px 44px 44px; grid-template-rows: 44px 44px; gap: 4px; }
.dpad-btn { border: none; border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); font-size: 18px; }
.dpad-btn[data-dir="up"] { grid-column: 2; grid-row: 1; }
.dpad-btn[data-dir="left"] { grid-column: 1; grid-row: 2; }
.dpad-btn[data-dir="down"] { grid-column: 2; grid-row: 2; }
.dpad-btn[data-dir="right"] { grid-column: 3; grid-row: 2; }

.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-card { background: #fff; border-radius: 16px; padding: 24px; text-align: center; width: 280px; }
/* 「はじめる」のあとのキャラクター選択 */
.char-select-card { width: 300px; }
.char-select-row { display: flex; gap: 10px; margin: 14px 0; }
.char-pick {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 2px solid var(--brown-soft); border-radius: 14px;
  padding: 8px 6px 10px; font-size: 14px; font-weight: 800; color: var(--brown); cursor: pointer;
}
.char-pick:hover, .char-pick:focus-visible { border-color: var(--brown); background: #fff3e2; }
.char-pick:active { transform: scale(.97); }
.pick-char { width: 100px; height: 110px; display: block; }
.modal-title { font-size: 18px; font-weight: 700; }
.modal-score { margin: 12px 0; font-size: 16px; }
.modal-buttons { display: flex; gap: 8px; flex-direction: column; }

.legal-modal { position: absolute; inset: 0; background: rgba(0,0,0,.6); z-index: 100; }
.legal-modal-box { position: absolute; inset: 4% 5%; background: #fff; border-radius: 12px; overflow: hidden; }
.legal-modal-frame { width: 100%; height: 100%; border: none; }
/* 閉じるボタンはシリーズ共通で「✕」の丸ボタン(ユーザー指摘:「他のゲームは✕で統一」)。 */
.legal-modal-close, .dialog-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.08); cursor: pointer; font-size: 14px; line-height: 1; color: #3a2c1e;
}
.char-select-card { position: relative; }

/* 右上の音ボタン(シリーズ共通の配置)。ゲーム中はHUDの右端と重ならないよう、
   HUD側に右の余白を空けてある。 */
.sound-controls { position: fixed; top: 5px; right: max(6px, calc(50vw - 280px + 6px)); z-index: 60; display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px; max-width: 200px; }
.mute-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
  width: 26px; height: 26px; color: var(--brown); background: #fff;
  border: 2px solid var(--brown-soft); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer;
}
.settings-btn { width: 24px; height: 24px; }
.mute-btn svg { width: 16px; height: 16px; }
.settings-btn svg { width: 13px; height: 13px; }
.mute-btn.hidden { display: none; }
.sound-panel { flex-basis: 100%; padding: 10px 12px; background: #fff; border: 2px solid var(--brown-soft); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.sound-panel.hidden { display: none; }
.sound-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.sound-mute-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--brown-soft); background: #fff; color: var(--brown); cursor: pointer; }
.sound-row-label { min-width: 3.2em; }
/* iPhoneは音量つまみが効かないので隠す(ミュートボタンだけ残す)。 */
.sound-panel.no-volume .sound-volume { display: none; }
.sound-row-label { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.sound-volume { width: 100px; accent-color: var(--brown); }
.sound-credit { color: var(--text-muted); }
#hud { padding-right: 60px; }

/* ゲーム開始直後だけ、地上に「穴をタップしよう」の案内を出す。穴の少し上、空の部分。 */
.dig-hint {
  position: absolute; left: 50%; top: calc(62% - 118px); transform: translateX(-50%);
  z-index: 3; white-space: nowrap; pointer-events: none;
  background: rgba(255,255,255,.95); color: #4a3420; font-weight: 800; font-size: 14px;
  border: 2px solid #8a6a4a; border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15); animation: dig-hint-bob 1.4s ease-in-out infinite;
}
.dig-hint::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #8a6a4a;
}
.dig-hint.hidden { display: none; }
@keyframes dig-hint-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }

/* 各穴の下に出す「その穴から降りられる深さ」。穴と同じ --gx/--cs 基準で横位置を揃える。 */
.hole-depths { position: absolute; left: 0; right: 0; top: calc(62% + 62px); height: 22px; pointer-events: none; z-index: 2; }
.hole-depths span {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 800; color: #fff; background: rgba(40, 26, 14, .45);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.hole-depths span[data-col="0"] { left: calc(var(--gx, 0px) + var(--cs) * 0.5); }
.hole-depths span[data-col="1"] { left: calc(var(--gx, 0px) + var(--cs) * 1.5); }
.hole-depths span[data-col="2"] { left: calc(var(--gx, 0px) + var(--cs) * 2.5); }
.hole-depths span[data-col="3"] { left: calc(var(--gx, 0px) + var(--cs) * 3.5); }
.hole-depths span[data-col="4"] { left: calc(var(--gx, 0px) + var(--cs) * 4.5); }
.hole-depths span[data-col="5"] { left: calc(var(--gx, 0px) + var(--cs) * 5.5); }
.hole-depths span[data-col="6"] { left: calc(var(--gx, 0px) + var(--cs) * 6.5); }

/* 地下にいる間の警告(体力わずか・バッグ満杯)。紫の帯のすぐ下、画面上部の中央。 */
.mine-alerts { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 13; display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; }
.mine-alert { font-size: 13px; font-weight: 800; color: #fff; border-radius: 999px; padding: 4px 14px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: meter-blink 1s ease-in-out infinite; }
.mine-alert.hp { background: #dc3c3c; }
.mine-alert.bag { background: #c9961a; }

/* 触れるとダメージになるもの(ユーザー指定)。回復アイテムと色も形も変えて見分けやすくする。 */
.cell.poison-item, .cell.spike { background: transparent; border-color: transparent; }
.cell.poison-item::after { content: ""; position: absolute; left: 50%; top: 40%; width: 60%; height: 36%; transform: translateX(-50%);
  border-radius: 50% 50% 18% 18%; background:
    radial-gradient(circle, #fff 45%, transparent 50%) 22% 45% / 22% 38% no-repeat,
    radial-gradient(circle, #fff 45%, transparent 50%) 70% 30% / 18% 32% no-repeat,
    radial-gradient(circle, #fff 45%, transparent 50%) 55% 75% / 16% 28% no-repeat,
    linear-gradient(#9b4dca, #6a2c96); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.cell.poison-item::before { content: ""; position: absolute; left: 50%; top: 68%; width: 22%; height: 30%; transform: translateX(-50%);
  border-radius: 30% 30% 45% 45%; background: #f1e6cf; box-shadow: inset -2px 0 0 rgba(0,0,0,.12); }
.cell.spike { background: rgba(120,40,40,.08); }
.cell.spike::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 46%;
  clip-path: polygon(0 100%, 12.5% 0, 25% 100%, 37.5% 0, 50% 100%, 62.5% 0, 75% 100%, 87.5% 0, 100% 100%);
  background: linear-gradient(#dfe3e8, #6f757c); pointer-events: none; }

/* 足場が消えて落ちていく落ちもの(演出用に一時的に重ねる)。着地先のマスはその間隠す。 */
.falling-item { position: absolute; width: var(--cs); height: var(--cs); z-index: 2; pointer-events: none; }
.cell.item-arriving::after, .cell.item-arriving::before { visibility: hidden; }