/* クォッカのクラフトライフの画面スタイル。参加画面はクォッカ路線の他ゲームと揃えつつ、
   土・草を思わせる緑〜茶系にしている。ゲーム画面はキャンバス全画面+HUDのオーバーレイ。 */

:root {
  --green: #4f8a3d;
  --green-soft: #dff0d0;
  --cream: #fffdf7;
  --text: #4a4030;
  --text-muted: #8d8272;
  --danger: #d9534f;
  --earth: #8a5a3b;
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

body {
  /* ドラッグ操作でボタンや見出しの文字が青く選択されるのを防ぐ(2026-08-18
     「画面内の文字が選択状態になるときがある、ならないようにして」)。 */
  -webkit-user-select: none;
  user-select: none;

  margin: 0;
  padding: 0;
  font-family: "M PLUS Rounded 1c", -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, #f3f9ea 0%, #fffdf7 55%, #fbf3e2 100%);
  min-height: 100vh;
  line-height: 1.7;
  overscroll-behavior: none;
}

.hidden {
  display: none !important;
}

/* 遊んでいる間はページ自体を動かさない(2026-08-18「スマホだと上の部分が…見きれてる」)。
   参加画面は縦に長くスクロールできるので、下までスクロールしたまま始めると、
   そのぶん左上のHUDが画面の外に残ってしまう。ゲーム画面ではフッターも位置固定なので、
   スクロールできる必要がない。 */
body:has(#game-screen:not(.hidden)) {
  overflow: hidden;
  height: 100dvh;
}

/* iPhoneのノッチ・ダイナミックアイランド・ホームバーぶんの余白(2026-08-18)。
   viewport-fit=cover で画面のふちまで描いているので、ふちに置くものはこのぶん
   内側へ寄せないと、ステータスバーの下に隠れて見えなくなる。
   ノッチの無い端末や、対応していないブラウザでは 0px になる(見た目は今までどおり)。 */
:root {
  /* --safe-top は既定でノッチ(env)ぶんだけ。JS(ui.js)が動く前・visualViewportが
     無い環境向けのフォールバック。
     【2026-08-19】以前は calc(env(safe-area-inset-top, 0px) + var(--vv-extra-top)) と
     いう形で、ノッチ(env)とJSが書き換える変数(var)を1つのcalc()の中で組み合わせて
     いたが、これがノッチの無いiPadでは問題なく、ノッチのあるiPhoneでだけ「座標や
     設定ボタンがおかしい」につながっていた(「ipadは問題なかった、iphoneだけ
     なおってなさそう」)。env()の値が0でないときにだけ再現する=envとvarをcalc()内で
     混ぜる組み合わせ自体を疑い、JS側でenv()の実測値とvisualViewportのぶんを両方
     数値として読み取ってから合算し、--safe-top には計算済みのpx値をそのまま
     書き込むようにした(calc()もvar()もJS側の計算には使わない。styles.css参照)。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* レイアウト上の下端のうち、実際には見えていない高さ(2026-08-19、iPhoneのChrome)。
     JS(ui.js)が visual viewport から実測して入れる。--footer-space の定義で使う。 */
  --vv-extra-bottom: 0px;
}

/* --- 参加画面 -------------------------------------------------------------- */

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上下左右はノッチ・ホームバーぶんを足す(2026-08-18、iPhone対策)。 */
  padding: calc(28px + var(--safe-top)) calc(16px + var(--safe-right)) calc(90px + var(--safe-bottom)) calc(16px + var(--safe-left));
  min-height: 100vh;
}

.panel {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 2px solid var(--green-soft);
  border-radius: 22px;
  padding: 26px 22px 20px;
  box-shadow: 0 10px 30px rgba(79, 138, 61, 0.12);
  text-align: center;
}

h1 {
  font-size: 20px;
  font-weight: 800;
  color: var(--green);
  margin: 0 0 8px;
}

.sparkle {
  font-size: 16px;
}

.hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: 6px 0 12px;
}

.link-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rules-link,
.link-row .home-link,
.share-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 2px solid var(--green-soft);
  border-radius: 999px;
  background: #ffffff;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.rules-link:hover,
.link-row .home-link:hover,
.share-button:hover {
  border-color: var(--green);
  background: var(--green-soft);
}

label {
  display: block;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 10px 2px 4px;
}

input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--green-soft);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--cream);
}

.zone-hint {
  margin-top: 14px;
  margin-bottom: 6px;
}

/* 装備の並べ替え(2026-08-19「袋の中のアイテム(装備)をドラッグで順番入れ替え
   できるように」)。つかんで動かせることが分かるように、指の形と持ち手を出す。 */
.chest-item.reorderable {
  cursor: grab;
  touch-action: none; /* 指で動かすとき、ブラウザのスクロールに取られないように */
}

.chest-item.reorderable::before {
  content: "⠿";
  margin-right: 4px;
  opacity: 0.45;
  font-weight: 800;
}

.chest-item.dragging {
  cursor: grabbing;
  opacity: 0.75;
  outline: 2px dashed var(--green);
}

/* 世界えらび(2026-08-19)。今は1つだけだが、増えたときも並ぶように枠で組む。 */
.world-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.world-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border: 2px solid var(--green-soft);
  border-radius: 12px;
  background: var(--cream);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

.world-btn.selected {
  border-color: var(--green);
  background: #eaf7e6;
}

.world-btn .world-name { font-weight: 800; }
.world-btn .world-count { font-size: 13px; font-weight: 700; }
.world-btn .world-state { font-size: 12px; opacity: 0.75; }

/* 満員(2026-08-19)。押しても入れないので、色を落として理由が分かるようにする。 */
.world-btn.full {
  opacity: 0.6;
  border-style: dashed;
}

.zone-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.zone-btn {
  padding: 10px 4px;
  border: 2px solid var(--green-soft);
  border-radius: 12px;
  background: var(--cream);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.zone-btn.selected {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}

.primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: var(--green);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  margin-top: 4px;
}

.primary:disabled {
  opacity: 0.6;
}

.ghost {
  border: 2px solid var(--green-soft);
  background: #ffffff;
  color: var(--text);
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
}

.ghost.small {
  padding: 6px 12px;
  font-size: 12px;
}

.join-error {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fdecea;
  color: var(--danger);
  font-size: 12px;
}

/* --- ゲーム画面 ------------------------------------------------------------ */

#game-screen {
  padding: 0;
  /* 100dvh = いま実際に見えている高さ(スマホのURLバーぶんを含まない)。
     対応していないブラウザ向けに 100vh も残す(2026-08-18)。 */
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: #000;
  /* 2026-08-10、「スマホでズームになっちゃうのとスクロールしちゃう」への対応。
     htmlには touch-action: manipulation を指定していて、これは実は
     パン・ピンチズームを"許可する"値(禁止するのは二本指タップでのズームだけ)。
     canvas自体はtouchstart/touchmoveでpreventDefault()しているので平気だったが、
     操作ボタンや箱・作るパネルなど、canvas以外の場所を触ったときは素通りしていた。
     touch-actionは祖先との「積集合」で効くので、ここでnoneにしておけば、
     ゲーム画面内のどの要素を触ってもブラウザ標準のズーム・パン・スクロールは起きない
     (参加画面は今までどおりmanipulationのまま、通常のスクロールができる)。 */
  touch-action: none;
  /* ゲーム中に出すフッターの高さぶん。下段のホットバー・スマホの操作ボタンは
     この変数を bottom の calc() に足し込んで、フッターと重ならないよう底上げする
     (2026-08-10、「ゲーム中の画面にフッターがない」への対応)。
     【2026-08-18】30pxだと、実際のフッター(9px文字1行、実測約21px)との差が
     約9pxもあり、「フッターと体力ゲージ(を含む下段一式)の間の余白が大きすぎる」
     という指摘につながっていた。24pxに詰める(それでも3pxの余裕は残す)。 */
  /* 【2026-08-19】iPhoneのChromeで「上は直ったが今度はアイテム欄(下)が見えない」。
     Chrome(iOS)の下のツールバーは、ページのレイアウト上の高さ(100dvh)には
     入っているのに、実際に見えている範囲(visual viewport)からははみ出すことがある。
     その「レイアウトの下端のうち、見えていない高さ」をJS(ui.js)が実測して
     --vv-extra-bottom に入れる。下端に置くもの(ホットバー・体力・操作ボタン)は
     どれもこの --footer-space を bottom の calc() に足し込んでいるので、
     ここに含めておけば全部まとめて見える位置まで持ち上がる。
     JSが動く前・visualViewportが無い環境では0pxのまま(今までどおり)。 */
  --footer-space: calc(24px + var(--vv-extra-bottom, 0px));
}

#view-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  cursor: crosshair;
}

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 画面左上のひとかたまり(座標の行 + アナウンス)。
   【2026-08-18】座標・名前・🦘・☆が増えて、狭い画面では1行に収まらなくなった。
   以前はアナウンスを「上から52px」と決め打ちで置いていたため、行が折り返すと
   重なって読めなくなっていた(「スマホだと左上のいろいろが表示しきれてない」)。
   縦並びの箱にまとめて、中身の高さに合わせて自然に下へ流れるようにしている。 */
.hud-left {
  /* 2026-08-19「なぜ右側(.top-right-stack)は表示できていて左側だけ崩れるのか」。
     両方とも同じ --safe-top を使っているのに、こちらだけ position: absolute
     だったのが違いだった。fixed はブラウザ自身がビジュアルビューポート(キーボードの
     開閉・iOS26のDynamic Island関連の既知バグでのズレ)に追従して位置を保証して
     くれるが、absoluteにはその保証が無く、JSが計算した --safe-top の値をそのまま
     信じるしかない。実際に効いていた右側(.top-right-stack)に合わせてfixedにした。
     以前入れていた transform: translateZ(0)(実機で検証できないまま入れた対症療法)
     は、position を直したことで不要と判断し外した。 */
  position: fixed;
  top: calc(10px + var(--safe-top));
  left: calc(10px + var(--safe-left));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100vw - 20px);
}

/* 左上の1行ぶん(1行目=座標と名前、2行目=世界にいる数と☆)。
   2026-08-18「座標 名前 / ワールド匹数 成果 / メッセージ にしよう」で2行に分けた。 */
.hud-row {
  position: relative; /* ☆と数の一覧を、その行の真下にぶら下げる */
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}

/* 数の左に出すクォッカの顔(シリーズ共通の絵柄。2026-08-18)。 */
.quokka-icon {
  display: block;
  width: 15px;
  height: 15px;
}

.quokka-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.player-name {
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffd166; /* アナウンスの名前と同じ山吹色 */
  font-size: 12px;
  font-weight: 700;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 今この世界にいるクォッカの数(2026-08-18)。野良クォッカも含む。
   押すと名前の一覧が開くので、☆と同じく HUD の上でも操作できるようにする。 */
.online-count {
  pointer-events: auto;
  padding: 4px 10px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.online-count:hover,
.online-count:focus-visible {
  background: rgba(0, 0, 0, 0.65);
}

/* 一覧の中の「遊んでいる人 / 野良クォッカ」の見出し。 */
.found-list .online-group {
  margin: 6px 0 2px;
  color: #ffe9a8;
  font-weight: 700;
}

.found-list ul {
  margin: 0;
  padding-left: 1.2em;
}

/* スマイルポイント(2026-08-18)。 */
.smile-points {
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffd7e4;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* めずらしいたてものの数。HUDは pointer-events:none なので、ここだけ操作できるようにする。 */
.found-star {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffe9a8;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.found-star:hover,
.found-star:focus-visible {
  background: rgba(0, 0, 0, 0.65);
}

.found-list {
  /* 一列の下にぶら下げる。中身が増えても座標の行は動かさない。 */
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  /* 名前が折り返して読みづらかったので広げた(2026-08-18「プレイヤーリストが狭い」)。 */
  min-width: 210px;
  max-width: min(88vw, 460px);
  z-index: 2;
}

/* 一覧の名前(2026-08-18)。いま笑うとポイントが入る相手は明るく、
   さっき笑ったばかりの相手(60分は入らない)は暗くする。 */
.found-list .smile-ready {
  color: #ffe08a;
  font-weight: 700;
}

.found-list .smile-waiting {
  color: #9aa0a6;
}

.found-list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.found-list h3 {
  margin: 0 0 4px;
  font-size: 12px;
  color: #ffe9a8;
}

.found-list ol {
  margin: 0;
  padding-left: 1.2em;
}

.found-list .found-empty {
  color: #d8d8d8;
}

.coords {
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}


/* --- 全体アナウンス(2026-08-18) ---------------------------------------------
   座標のすぐ下。新しい知らせが上に積まれ、しばらくすると消える。 */
.announce {
  /* 位置は .hud-left にまかせる(2026-08-18。決め打ちの top をやめた)。 */
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(52vw, 420px);
}

.announce-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 1.4;
  animation: announce-in 0.25s ease-out;
  /* 中身は「時刻 名前」と「メッセージ」の2かたまり(2026-08-18)。
     広い画面では横に並び、幅が足りなければメッセージが次の行へ回る。
     同じ行へ押し込むと、狭い画面では1〜2文字ずつ縦に並んでしまうため。 */
  flex-wrap: wrap;
}

/* 「時刻 名前」。ここは何があっても途中で折り返さない。 */
.announce-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: none;
  white-space: nowrap;
}

/* いつの知らせか(mm/dd HH:MM。2026-08-18)。数字は幅をそろえて読みやすく。 */
.announce-time {
  flex: none;
  color: #b9c6d4;
  font-variant-numeric: tabular-nums;
}

.announce-name {
  flex: none;
  font-weight: 700;
  color: #ffd166; /* 名前は建造物の「?」と同じ山吹色 */
}

.announce-text {
  color: #fff;
  /* 本文はできるだけ横に伸ばす。これ以上狭くなるなら、行ごと下へ送る。 */
  flex: 1 1 auto;
  min-width: 9em;
  overflow-wrap: anywhere;
}

@keyframes announce-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .announce-line { animation: none; }
}

.crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

/* 3D酔い軽減の「画面のふちを暗くする」(2026-08-18)。
   動いている/見まわしているあいだだけ濃くする。濃さはJSがopacityで変える。
   canvasには描かない(描くとそのcanvasの描画が遅い経路に落ちることがあるため)。 */
.motion-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.8) 100%);
}

/* 3D酔い軽減の目印(2026-08-18)。細い十字と小さな輪。景色と一緒に動かないので、
   見まわしても位置が変わらない。じゃまにならないよう薄めにしている。 */
.center-anchor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.center-anchor::before,
.center-anchor::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.32);
}

.center-anchor::before {
  top: 50%;
  left: -18px;
  width: 110px;
  height: 2px;
  margin-top: -1px;
}

.center-anchor::after {
  left: 50%;
  top: -18px;
  height: 110px;
  width: 2px;
  margin-left: -1px;
}

.target-hint {
  position: absolute;
  top: calc(50% + 22px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- 体力メーター ------------------------------------------------------------ */

.health {
  /* 左上からアイテム欄(ホットバー)の真上へ移動(2026-08-18「体力ゲージはアイテム欄の上にする」)。 */
  position: absolute;
  left: 50%;
  bottom: calc(66px + var(--footer-space, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.health-bar {
  display: block;
  width: 92px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.health-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #7ed957;
  transition: width 0.3s;
}

.health-fill.mid { background: #ffcf4d; }
.health-fill.low { background: #ef7f68; }

.health-value {
  min-width: 22px;
  text-align: right;
}

/* --- 箱の中身 ---------------------------------------------------------------- */

.chest-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--cream, #fffdf7);
  color: var(--text, #4a3b2a);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.chest-panel-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
  text-align: center;
}

.chest-columns {
  display: flex;
  gap: 10px;
}

.chest-side {
  flex: 1;
  min-width: 0;
}

.chest-side-title {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.chest-side-title small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #8a7a66);
}

.chest-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
  max-height: 220px;
  overflow-y: auto;
}

.chest-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 2px solid var(--green-soft, #cdeab5);
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}

.chest-swatch {
  /* ベタ塗りの四角から、icons.jsが描く形のあるアイコン画像になった(2026-08-18)。 */
  width: 20px;
  height: 20px;
  flex: none;
}

.chest-item-name { flex: 1; text-align: left; }
.chest-item-count { color: var(--text-muted, #8a7a66); }

.chest-empty {
  margin: 0;
  padding: 8px 0;
  font-size: 11px;
  color: var(--text-muted, #8a7a66);
}

.bag-kinds {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
}

/* ぜんぶしまう(2026-08-18)。持ち物リストの下に敷く。 */
.chest-store-all {
  width: 100%;
  margin-top: 6px;
  padding: 7px 4px;
  border-radius: 10px;
  border: none;
  background: #7cb342;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* 箱の「まとめて動かす」(スマホ用のShift代わり。2026-08-18)。 */
.chest-bulk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}

.chest-bulk input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.chest-note {
  margin: 10px 0 8px;
  font-size: 10px;
  color: var(--text-muted, #8a7a66);
}

/* 短いお知らせ(「持ち物を選んでね」など)。数秒で自動的に消える。 */
.toast {
  position: absolute;
  left: 50%;
  top: calc(50% + 60px);
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.player-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.player-arrow {
  position: absolute;
  /* 2026-08-18「もっと画面の中央から端にずらしていい」で -140 → -250。 */
  top: -250px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #ffcf4d;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
  transform-origin: 0 250px;
}

/* 大きな建造物の方角(2026-08-18)。プレイヤーの矢印より外側の円に「?」を出す。 */
.structure-arrow {
  position: absolute;
  /* 2026-08-18「?はもっと画面の中央から端にずらしていい」で -172 → -300。
     プレイヤーの矢印(-140)よりさらに外側の円に出る。 */
  top: -300px;
  left: 0;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(30, 22, 12, 0.6);
  /* 色は建造物の種類ごとにJS側(ui.jsのSTRUCTURE_MARKER_COLORS)で差し替える(2026-08-18)。 */
  border: 2px solid #ffe9a8;
  color: #ffe9a8;
  font-size: 13px;
  font-weight: 800;
  transform-origin: 11px 300px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

/* 切断の全画面案内(2026-08-18)。 */
.disconnect-banner {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 10, 0.8);
}

.disconnect-box {
  background: #fffdf6;
  color: #4a3b2a;
  border-radius: 16px;
  padding: 22px 26px;
  text-align: center;
  max-width: 84vw;
}

.disconnect-title { font-weight: 800; margin-bottom: 8px; }

.disconnect-hint { font-size: 13px; margin-bottom: 14px; line-height: 1.6; }

.disconnect-reload {
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  background: #7cb342;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* 選択中アイテムの名前(2026-08-18)。ホットバーのすぐ上に小さく出す。 */
.held-label {
  /* 体力ゲージがホットバーの真上に来たので、その上に重ならない高さへ(2026-08-18)。 */
  position: absolute;
  left: 50%;
  bottom: calc(98px + var(--footer-space, 0px));
  transform: translateX(-50%);
  background: rgba(20, 16, 10, 0.75);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.hotbar {
  position: absolute;
  left: 50%;
  bottom: calc(14px + var(--footer-space, 0px));
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

.hotbar-slot {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotbar-slot.selected {
  border-color: #ffcf4d;
}

/* まだ何も入っていない枠(2026-08-19「何ももっていなくてもブランクで9個まで
   最初から画面に枠を表示していてほしい」)。押しても何も起きない飾りなので、
   指・カーソルを素通りさせ、中身のある枠より control 的に見えないよう薄くする。 */
.hotbar-slot.empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.2);
  cursor: default;
  pointer-events: none;
}

.hotbar-slot.empty .slot-key {
  opacity: 0.5;
}

.slot-swatch {
  /* ベタ塗りの四角から、icons.jsが描く形のあるアイコン画像になった(2026-08-18)。 */
  width: 28px;
  height: 28px;
  display: block;
}

.slot-count {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 10px;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 0 3px #000;
}

/* 対応する数字キー(1〜9)のヒント。PCで「どのキーを押せばこのアイテムを選べるか」が
   一目で分かるように、スロットの左上に小さく出す。 */
.slot-key {
  position: absolute;
  left: 3px;
  top: 2px;
  font-size: 10px;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 0 3px #000;
}

.craft-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, 84vw);
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(20, 16, 10, 0.92);
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  pointer-events: auto;
}

.craft-panel-title {
  font-weight: 800;
  margin-bottom: 10px;
}

/* 作るメニューの種類タブ(2026-08-18)。 */
.craft-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

/* ベッドの合言葉(2026-08-18)。読み間違えないよう大きく出す。 */
.bed-phrase {
  margin: 4px 0 10px;
  padding: 12px;
  border-radius: 12px;
  border: 2px dashed var(--green-soft, #cdeab5);
  background: #fff;
  color: var(--text, #4a3b2a);
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.08em;
  /* 選んでコピーできるように(画面全体では文字選択を切っているので、ここだけ戻す) */
  -webkit-user-select: text;
  user-select: text;
}

.bed-phrase-hint {
  margin: 4px 2px 12px;
  font-size: 11px;
}

/* 看板に書くメニュー(2026-08-18)。器は箱と同じパネルを使い回す。 */
.sign-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.sign-line {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 2px solid var(--green-soft, #cdeab5);
  background: #fff;
  color: var(--text, #4a3b2a);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

.sign-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sign-save {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: var(--green, #4f8a3d);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

/* 作るメニューのタブ。2026-08-18「クラフトメニューも箱みたいなUIにする」で器が
   明るい箱のパネルになったので、タブも明るい下地に合わせた。 */
.craft-tab {
  flex: 1;
  padding: 7px 4px;
  border-radius: 10px;
  border: 2px solid var(--green-soft, #cdeab5);
  background: #fff;
  color: var(--text, #4a3b2a);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.craft-tab.active {
  background: #7cb342;
  border-color: #7cb342;
  color: #fff;
}

/* 作るメニューは大きさを固定する(2026-08-18「項目を変えたらウィンドウサイズが変わるのが
   嫌なのでもっと広げて固定に」)。タブを切り替えても枠が動かないよう、幅も一覧の高さも
   決め打ちにして、あふれるぶんだけ中でスクロールさせる。 */
/* 【2026-08-18 追記】「袋も作るとおなじウィンドウサイズ」。中身の数で枠が動くのは
   袋や箱でも同じなので、同じ幅・同じ高さにそろえる。 */
#craft-panel,
#bag-panel,
#chest-panel {
  width: min(620px, calc(100vw - 24px));
}

#craft-list,
#craft-locked,
#bag-contents,
#bag-equipment,
#chest-contents,
#chest-inventory {
  height: min(46vh, 330px);
  max-height: none;
}

/* レシピ1つぶんは箱の中身のボタン(.chest-item)と同じ形。名前の下に材料を小さく出し、
   足りない材料だけ赤くする。 */
.craft-item-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.craft-item-inputs {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #8a7a66);
}

.craft-item-inputs .lack {
  color: var(--danger, #d9534f);
}

.chest-item:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ズームのシークバー(2026-08-18)。開始画面と設定パネルの両方で使う。 */
.zoom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.zoom-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.zoom-side {
  font-size: 11px;
  opacity: 0.85;
  white-space: nowrap;
}

/* 操作説明(2026-08-18)。タイトルに戻るの下のボタンと、押すと出るウィンドウ。
   ウィンドウの器は作るメニュー(.craft-panel)を使い回す。 */
.help-button {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* あそびかた(2026-08-18)。操作説明のすぐ下に並べる。中身はリンクだがボタンと同じ見た目。 */
.guide-button {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  display: inline-block;
}

/* 操作説明の中身(2026-08-18「もっと絵をつけてわかりやすくして」)。
   文字だけの箇条書きをやめ、左にキー/マウスの絵、右に説明の2列にした。
   絵はインラインSVGとキーキャップ風のspanで描いていて、画像ファイルは増やしていない。 */
#help-panel {
  width: min(420px, 92vw);
}

.help-section {
  margin: 12px 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffd166;
}

.help-section:first-of-type {
  margin-top: 4px;
}

.help-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.help-fig {
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.45;
}

.help-sub {
  font-size: 11.5px;
  opacity: 0.8;
}

/* マウスの絵。黄色く塗った部分(hs-hl)が「どこを押すか」を表す。 */
.help-svg {
  width: 30px;
  height: 42px;
}

.hs-body {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
}

.hs-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.hs-wheel {
  fill: rgba(255, 255, 255, 0.55);
}

.hs-hl {
  fill: #ffd166;
  stroke: none;
}

/* キーキャップ風の表示。図の欄でも文中でも同じ見た目で使う。 */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.key-lg {
  min-width: 32px;
  padding: 7px 8px;
  font-size: 14px;
}

.key-wide {
  min-width: 44px;
}

.key-cross {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.key-row {
  display: flex;
  gap: 3px;
}

/* --- 画質の選択 -------------------------------------------------------------- */

.quality-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.quality-btn {
  flex: 1 1 auto;
  min-width: 74px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 2px solid var(--green-soft, #cdeab5);
  background: #fff;
  color: var(--text, #4a3b2a);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.quality-btn.selected {
  border-color: var(--green, #5aa832);
  background: rgba(126, 217, 87, 0.18);
}

.quality-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--text-muted, #8a7a66);
}

.quality-current {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--text-muted, #8a7a66);
}

/* 遊んでいる途中に開く設定パネル */
.settings-panel {
  /* 参加画面でもゲーム中でも同じ場所に出す(2026-08-18に画面の外へ移したので、
     どこを基準にしても画面の右上に来るよう fixed にしている)。 */
  position: fixed;
  top: calc(52px + var(--safe-top));
  right: calc(10px + var(--safe-right));
  /* 右上のボタン(z-index:31)より前に出す。開いているあいだはボタンに重なってよい。 */
  z-index: 33;
  width: min(300px, calc(100vw - 20px));
  /* 中身が増えて画面に収まらなくなったので、パネルの中でスクロールする
     (2026-08-18「設定メニューがおおすぎて下までみれない」)。
     画面の高さから、上の余白と下の余白を引いたぶんまで。 */
  max-height: calc(100dvh - 52px - var(--safe-top) - var(--safe-bottom) - var(--footer-space, 24px) - 16px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* パネルの端まで来たときに、後ろのページごと動いてしまわないように。 */
  overscroll-behavior: contain;
  /* ゲーム画面は touch-action: none なので、そのままでは指でスクロールできない。 */
  touch-action: pan-y;
  /* いちばん下(「閉じる」)まで指が届くよう、下だけ余白を厚めにする(2026-08-18)。 */
  padding: 14px 16px 18px;
  border-radius: 14px;
  background: var(--cream, #fffdf7);
  color: var(--text, #4a3b2a);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.settings-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* 右上のボタンをまとめて置く箱(2026-08-18)。画面のふちからの位置だけで決めるので、
   幅の狭い端末でも、iPadの横画面でも、はみ出したり重なったりしない。
   箱そのものは指を通し(pointer-events: none)、中のボタンだけが押せる。 */
.top-right-stack {
  position: fixed;
  top: calc(10px + var(--safe-top));
  right: calc(10px + var(--safe-right));
  z-index: 31;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100vw - 20px);
  pointer-events: none;
}

.top-right-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-right-stack button,
.top-right-stack a {
  pointer-events: auto;
}

/* 参加画面では、ゲーム中だけのボタンを隠す(2026-08-18に画面の外へ出したため)。 */
body.on-join .leave-button,
body.on-join .help-button,
body.on-join .guide-button {
  display: none;
}

/* スマホ用の「?」は、指の端末だけに出す(2026-08-18に右上の箱へ移したため、
   .touch-controls の一括非表示が効かなくなった)。 */
.touch-help {
  display: none;
}

.settings-button {
  /* 参加画面とゲーム中で同じ右上に出す(2026-08-18「ゲーム開始画面の設定、ゲーム中画面と
     同じく右上に設定ボタンを用意してそっちでできるようにして」)。
     位置は上の .top-right-stack が決める。 */
  width: 34px;
  height: 30px;
  /* 絵文字を字として置くと行の基準線に沿ってしまい、ボタンの中心からずれる
     (2026-08-18にクォッカシリーズ全体で直したのと同じ)。中身を中央に置く。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.leave-button {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  /* 押すと文言が「戻る? もう一度押す」に変わって横に伸びるので、はじめから
     長いほうの幅を確保しておく(2026-08-18「戻るを押したあと表示がかぶる」)。
     確保しないと、左どなりの「⚙」に重なって押せなくなる。 */
  width: 150px;
  text-align: center;
  white-space: nowrap;
}

/* 1回目に押したときの聞き返し(2026-08-18)。他のクォッカ作品と同じやり方で、
   このゲームの色(桃色)に合わせている。 */
.leave-button.confirming {
  background: #e85d84;
  border-color: #ffd7e4;
  color: #fff;
  font-weight: 700;
}

/* 「横向きにすると遊びやすくなります」の案内は、出しっぱなしで邪魔になるため
   2026-08-18に廃止した(「消していい」)。遊び方のページには今までどおり書いてある。 */

.touch-controls,
.touch-guide {
  display: none;
}

/* タッチ端末(ポインターが「粗い」= 指)だけ、PC操作の案内を隠してボタンを出す。
   【2026-08-10】「スマホだと操作が分かりづらい」という指摘を受けて全面的に見直した。
   ・左half=移動、右half=見まわす、という役割分担を画面上に見えるようにする
   ・ボタンは全部右側にまとめ、文字を入れて大きくする(以前は左右に散らばっていて、
     移動のドラッグ範囲とボタンが重なって見え、何がどこにあるのか分からなかった) */
@media (pointer: coarse) {
  .help-button {
    display: none; /* スマホは「?」ボタン→スマホ用の説明がある */
  }
  /* 操作説明は消えるが、あそびかたはスマホでも開ける(位置は .top-right-stack が決める)。 */
  .touch-controls {
    display: block;
    pointer-events: none;
  }

  /* 移動スティック。触っていないときは左下に薄く置いておき、
     「ここを触れば動ける」と分かるようにする。触ると指の位置に移動して濃くなる。 */
  .touch-stick {
    position: absolute;
    left: 82px;
    bottom: calc(86px + var(--footer-space, 0px));
    width: 122px;
    height: 122px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.25);
    transform: translate(-50%, 50%);
    opacity: 0.5;
    transition: opacity 0.15s;
  }
  .touch-stick.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.75);
    transition: none;
  }
  .touch-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.85);
    transform: translate(-50%, -50%);
  }

  /* どちら側が何をする場所か、小さく書いておく。 */
  .touch-zone-label {
    position: absolute;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
  }
  .touch-zone-move {
    left: 82px;
    bottom: calc(14px + var(--footer-space, 0px));
    transform: translateX(-50%);
  }
  .touch-zone-look {
    right: 14px;
    /* 右上のボタンの箱(.top-right-stack)の下に出す。箱は「⚙+タイトルに戻る」の段と
       「遊び方」の段で高さ約76px。ノッチぶんも足して重ならないようにする
       (2026-08-18「ipad縦にしても『遊び方』とドラッグで～が被って表示される」)。 */
    top: calc(100px + var(--safe-top));
  }

  .touch-btn {
    position: absolute;
    pointer-events: auto;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    -webkit-tap-highlight-color: transparent;
  }
  .touch-btn small {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.85;
  }
  .touch-btn:active {
    transform: scale(0.94);
  }

  /* 右下に「壊す・置く」を大きく。その上にジャンプ・走る。 */
  .touch-break {
    right: 16px;
    bottom: calc(92px + var(--footer-space, 0px));
    width: 78px;
    height: 78px;
    background: rgba(214, 78, 70, 0.55);
  }
  .touch-place {
    right: 104px;
    bottom: calc(100px + var(--footer-space, 0px));
    width: 70px;
    height: 70px;
    background: rgba(60, 130, 210, 0.55);
  }
  .touch-jump {
    right: 20px;
    bottom: calc(182px + var(--footer-space, 0px));
    width: 66px;
    height: 66px;
  }
  .touch-run {
    right: 100px;
    bottom: calc(184px + var(--footer-space, 0px));
    width: 58px;
    height: 58px;
    font-size: 12px;
  }
  .touch-run.active {
    background: rgba(255, 207, 77, 0.8);
    color: #3d2c00;
    text-shadow: none;
  }
  .touch-craft {
    right: 172px;
    bottom: calc(96px + var(--footer-space, 0px));
    width: 62px;
    height: 62px;
    font-size: 15px;
  }

  .touch-chest {
    right: 240px;
    bottom: calc(100px + var(--footer-space, 0px));
    width: 58px;
    height: 58px;
    font-size: 14px;
  }
  /* にっこり(2026-08-18)。「食べる」を外して空いた場所へ移した
     (端に小さく置いていたら気づかれなかったため)。 */
  .touch-smile {
    right: 172px;
    bottom: calc(166px + var(--footer-space, 0px));
    width: 58px;
    height: 58px;
    font-size: 14px;
  }
  /* 「タイトルに戻る」「⚙」の左に並べる(重ならないように) */
  .touch-help {
    /* 位置は .top-right-stack が決める(2026-08-18に箱へ入れた)。 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    line-height: 1;
    font-size: 15px;
  }

  /* 操作説明 */
  .touch-guide {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 40;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.72);
  }
  .touch-guide.hidden {
    display: none !important;
  }
  .touch-guide-box {
    max-width: 420px;
    max-height: 100%;
    overflow-y: auto;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--cream, #fffdf7);
    color: var(--text, #4a3b2a);
    text-align: center;
  }
  .touch-guide-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 12px;
  }
  .touch-guide-zones {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
  }
  .touch-guide-zone {
    flex: 1;
    padding: 10px 6px;
    border-radius: 12px;
    background: rgba(126, 217, 87, 0.16);
    font-size: 12px;
    line-height: 1.5;
  }
  .touch-guide-zone span {
    display: block;
    font-size: 22px;
    margin-bottom: 4px;
  }
  /* 基本操作のカード(2026-08-18「文字ばかりで分かりづらい、絵や表を使って
     簡素に」)。実物のボタンと同じ絵文字を使い、キャプションは1行だけにする。 */
  .touch-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 0 0 10px;
  }
  .touch-guide-card {
    padding: 8px 2px;
    border-radius: 10px;
    background: rgba(126, 217, 87, 0.12);
    font-size: 11px;
    line-height: 1.4;
  }
  .touch-guide-card span {
    display: block;
    font-size: 20px;
    margin-bottom: 2px;
  }
  /* 「置く」ボタンが対象で変わる一覧(2026-08-18)。長い一文だと読みづらいので表にした。 */
  .touch-guide-table {
    width: 100%;
    margin: 0 0 10px;
    border-collapse: collapse;
    font-size: 12px;
  }
  .touch-guide-table td {
    padding: 4px 6px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap;
  }
  .touch-guide-table td:last-child {
    text-align: right;
    font-weight: 700;
    color: #b03a5f;
  }
  .touch-guide-note {
    margin: 0 0 10px;
    font-size: 11px;
    color: var(--text-muted, #8a7a66);
  }
}

/* --- フッター --------------------------------------------------------------- */

.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  background: rgba(255, 253, 247, 0.92);
  border-top: 1px solid var(--green-soft);
  backdrop-filter: blur(2px);
}

/* 【2026-08-10 追記】「ゲーム中の画面にフッターがない」という指摘を受けて、
   遊んでいる間も出すようにした(他のクォッカ作品はどれも遊んでいる間もフッターが出ている)。
   以前は一人称の画面いっぱいに表示するために丸ごと隠していたが、それだと利用規約や
   バージョンにたどり着く手段がゲーム中は無くなってしまっていた。
   ゲーム中は場所を取らないよう、うんと小さく・薄くして最下段に敷く。
   下段のホットバー・スマホの操作ボタンは、フッターの高さぶんだけ底上げする
   (var(--footer-space)、下の各セレクタで calc() に足し込んでいる)。 */
body:has(#game-screen:not(.hidden)) .site-footer {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px 8px;
  /* 下のふち(iPhoneのホームバーなど)ぶんは、フッター自身の余白で受ける(2026-08-18)。
     ここを操作ボタンの底上げ(--footer-space)に足すと、Androidの横画面で
     ボタンが浮きすぎてしまった。 */
  padding: 3px 10px calc(3px + var(--safe-bottom));
  font-size: 9px;
  background: rgba(20, 16, 10, 0.55);
  border-top-color: rgba(255, 255, 255, 0.15);
}
body:has(#game-screen:not(.hidden)) .site-footer a,
body:has(#game-screen:not(.hidden)) .copyright {
  color: rgba(255, 255, 255, 0.75);
}
/* 2行ぶんの縦幅を占領しないよう、1行にまとめる。 */
body:has(#game-screen:not(.hidden)) .footer-links::after {
  content: "・";
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.4);
}
/* 画面が狭いと、1行にまとめても入りきらずに折り返してしまい、高さの見積もり
   (--footer-space)を超えて操作ボタンと重なってしまう。狭い画面では、遊んでいる間だけ
   利用規約などのリンクを削って、バージョン表示だけの1行に絞る(参加画面では今までどおり)。 */
@media (max-width: 480px) {
  body:has(#game-screen:not(.hidden)) .footer-links {
    display: none;
  }
}

.site-footer a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

.footer-links,
.footer-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 6px;
}

.copyright {
  color: var(--text-muted);
  font-size: 11px;
}

.version-link {
  font-size: 10px;
  color: var(--text-muted);
  text-decoration: none;
}

/* --- 遊び方などのモーダル ----------------------------------------------------- */

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.legal-modal-box {
  position: relative;
  width: min(560px, 92vw);
  height: min(80vh, 720px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.legal-modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  cursor: pointer;
  font-size: 14px;
}

.legal-modal-frame {
  width: 100%;
  height: 100%;
  border: none;
}

/* --- めずらしいたてもの発見数ランキング(2026-08-18。開始画面) ---------------------- */

/* 「はじめる」の下に置いたので、ボタンとの間を少しあける(2026-08-18)。 */
.ranking-title {
  margin-top: 18px;
}

.ranking {
  margin: 0 0 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 13px;
}

.ranking-list {
  margin: 0;
  padding-left: 1.4em;
}

.ranking-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 0;
}

.ranking-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-count {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ranking-empty {
  margin: 0;
  opacity: 0.75;
}

/* --- 画面に出すものの切り替え(2026-08-18) ---------------------------------------- */

.hud-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
  font-size: 13px;
  cursor: pointer;
}

.hud-toggle input {
  width: 16px;
  height: 16px;
  /* 【重要】親がflexなので、文が長くて2行に折り返す項目では、チェックボックスが
     flexの縮みで押しつぶされて他より小さく見えていた(2026-08-18「チェックボックスの
     大きさがまばら」)。縮ませず、いつも16pxのままにする。 */
  flex: 0 0 16px;
  cursor: pointer;
}

/* --- 音の設定(2026-08-17。設定パネル内に統合。右上の独立ボタンは廃止) ------------- */

.sound-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.sound-mute-btn {
  width: 30px;
  height: 30px;
  font-size: 14px;
  background: #f3f3f0;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  cursor: pointer;
}

.sound-row-label {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  width: 46px;
  text-align: left;
}

.sound-volume {
  width: 92px;
  accent-color: #4fae3e;
}

.sound-credit {
  color: inherit;
}

/* 文字の選択はゲーム全体で無効だが、入力欄だけは選択・編集できないと困る(2026-08-18)。 */
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* --- 狭い画面(スマホ)ぶんの調整 --------------------------------------------------
   【2026-08-18】スクリーンショットでの指摘:
     ・アナウンスが「この / 世界 / にや / って / きた」と縦1列に潰れる
     ・右上のボタン(タイトルに戻る・遊び方・⚙)が左上の並びや案内文と重なって押せない
   前者は、この調整をファイルの前のほうに置いていたため、後ろにある通常の指定に
   上書きされていたのが原因(CSSは同じ強さなら後ろ勝ち)。ここ(いちばん後ろ)へ移した。
   後者は、左上の幅を右のボタンのぶんだけ空け、右のボタンを縦に積み直して直した。 */
@media (max-width: 560px) {
  /* 左上は、右上のボタンにかからない幅までにする。 */
  .hud-left {
    gap: 6px;
    max-width: calc(100vw - 118px);
  }
  .hud-row {
    gap: 4px;
  }
  .coords,
  .player-name,
  .online-count,
  .found-star {
    padding: 3px 7px;
    font-size: 11px;
  }
  .player-name {
    max-width: 34vw;
  }
  .announce {
    max-width: 100%;
  }
  .announce-line {
    padding: 3px 8px;
    font-size: 11px;
    /* スマホでは「時刻 名前」と「メッセージ」をきっちり2行に分ける
       (2026-08-18「時刻 名前 / メッセージ みたいな」)。 */
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .announce-text {
    min-width: 0;
  }
  /* 右上のボタンは .top-right-stack が縦に積むので、ここでの位置指定は要らない
     (2026-08-18にまとめた)。狭い画面では「タイトルに戻る」を少し短くする。 */
  .leave-button {
    width: 128px;
  }
  /* 「ドラッグで見まわす」の案内は、右上のボタンの箱の下へ(タッチ端末の指定と同じ)。 */
  .touch-zone-look {
    top: calc(100px + var(--safe-top));
  }
  /* 設定パネルも、積んだボタンの下から出す。中でスクロールする高さも合わせる。 */
  .settings-panel {
    top: calc(118px + var(--safe-top));
    max-height: calc(100dvh - 118px - var(--safe-top) - var(--safe-bottom) - var(--footer-space, 24px) - 16px);
  }
}


/* --- 狭い画面のホットバー(2026-08-19) ---------------------------------------
   空の枠も含めて常に9個出すようにしたので、44px×9+すき間=444pxとなり、
   幅400px前後のスマホでは画面からはみ出してしまう。狭い画面では枠とすき間を
   詰めて、9個が必ず収まるようにする。
     幅393px: 36×9 + 4×8 = 356px(使える幅373pxに収まる)
     幅360px: 32×9 + 3×8 = 312px(使える幅340pxに収まる) */
@media (max-width: 560px) {
  .hotbar {
    gap: 4px;
  }
  .hotbar-slot {
    width: 36px;
    height: 36px;
  }
  .slot-swatch {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 400px) {
  .hotbar {
    gap: 3px;
  }
  .hotbar-slot {
    width: 32px;
    height: 32px;
  }
  .slot-swatch {
    width: 22px;
    height: 22px;
  }
}

/* --- 横向き(画面の高さが低い)端末の操作ボタン(2026-08-18) ---------------------
   「スマホ・iPad・iPhoneの横画面で操作ボタンが上のほうに来る」への対応。
   縦画面の積み方(下段92px・上段182px)は、高さ390px前後の横画面では
   画面の半分あたりまで届いてしまう。低い画面では、ボタンもホットバーも
   ひとまわり小さくして、下へ寄せる。 */
@media (pointer: coarse) and (max-height: 520px) {
  .hotbar-slot {
    width: 36px;
    height: 36px;
  }
  .touch-break {
    right: 14px;
    bottom: calc(50px + var(--footer-space, 0px));
    width: 60px;
    height: 60px;
  }
  .touch-place {
    right: 88px;
    bottom: calc(52px + var(--footer-space, 0px));
    width: 54px;
    height: 54px;
  }
  .touch-craft {
    right: 152px;
    bottom: calc(52px + var(--footer-space, 0px));
    width: 50px;
    height: 50px;
  }
  .touch-chest {
    right: 212px;
    bottom: calc(52px + var(--footer-space, 0px));
    width: 48px;
    height: 48px;
  }
  .touch-jump {
    right: 18px;
    bottom: calc(108px + var(--footer-space, 0px));
    width: 52px;
    height: 52px;
  }
  .touch-run {
    right: 84px;
    bottom: calc(108px + var(--footer-space, 0px));
    width: 48px;
    height: 48px;
  }
  .touch-smile {
    right: 144px;
    bottom: calc(108px + var(--footer-space, 0px));
    width: 48px;
    height: 48px;
  }
  /* 案内の文字も、ボタンにかからない位置へ。 */
  .touch-zone-move {
    bottom: calc(10px + var(--footer-space, 0px));
  }
  .touch-zone-look {
    top: calc(92px + var(--safe-top));
  }
}