/* めてお村の画面の共通の決まり（村・畑・市場。2026-10-03 見直し）
   - 絵（ドット）は --u（画面の倍率）で、文字と窓とボタンは --k で大きさを決める。--k は「本文が読める大きさ」より小さくならない（layout.js が決める）
   - 窓（会話・店・確認・結果・参加・畑）は、ゲーム画面の大きさに縛られず、画面全体に対して置く。横幅はどの窓も同じ決まり
   - スマホ（操作ボタンが出ている時）は、文字の表示をゲーム画面の上の帯へ、よく押すボタンを下の帯へ出す（親指の届く所）
   - 窓の決まり（2026-10-06 ユーザー制定。新しく作る窓は必ず守る。詳しくは docs/web-town-plan.md §5.0）
     ・幅は最低幅を決めたうえで、中身に合わせて伸び縮みする（文字を勝手に改行させない。画面より広くはしない）
     ・見出しの帯を必ず付ける（何の窓か・何の一覧かが分かる題と、線で中身と区切る）
     ・スクロールバーは下の共通部品を使う（窓の中ならどこでも自動で効く） */

/* 共通部品: 窓の中のスクロールバー（地は窓の焦げ茶、つまみは枠のくすんだ金。2026-10-06） */
.win, .win * { scrollbar-width: thin; scrollbar-color: #8a6e48 #120d08; }
.win::-webkit-scrollbar, .win *::-webkit-scrollbar { width: 8px; height: 8px; }
.win::-webkit-scrollbar-track, .win *::-webkit-scrollbar-track { background: #120d08; border-left: 1px solid #4a3a28; }
.win::-webkit-scrollbar-thumb, .win *::-webkit-scrollbar-thumb { background: #8a6e48; border: 1px solid #c8b088; border-radius: 2px; }
.win::-webkit-scrollbar-thumb:hover, .win *::-webkit-scrollbar-thumb:hover { background: #a8885a; }

:root { --k: 3px; --st: 0px; --sb: 100vh; --sh: 100vh; --cx: 50vw; --sw: 100vw; }
html, body { font-family: "DotGothic16", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif; font-weight: 400; }

/* 文字と部品は --k で（中の calc(var(--u) * …) がそのまま --k になる） */
.hud, #hud-h, #h-wbox, #h-drops, #snd, #sortie, #combo, #banner, #respawn, #farm-open, .plaque, .nametag, .pop,
#msg, #shop, #confirm, .shop-toast, #join, #result, #farm { --u: var(--k); }

/* ---------- 窓: 画面全体に対して置く。横幅は全部同じ（店の窓と同じ） ---------- */
#msg, #shop, #confirm, .shop-toast, #join, #result, #farm {
  position: fixed; left: var(--cx); transform: translateX(-50%);
  width: min(calc(100vw - 16px), calc(var(--k) * 220), max(calc(var(--sw) * .92), 360px));
  max-width: none; right: auto;
}
/* 店の窓の位置と高さ、その下の確認の窓の位置は layout.js が画面に合わせて決める（確認の窓まで画面に入るように） */
#shop, #farm { top: var(--shop-top, 8px); }
#shop { height: var(--shop-h, calc(var(--k) * 158)); }
#farm { height: auto; max-height: calc(100vh - var(--shop-top, 8px) - 8px); max-height: calc(100dvh - var(--shop-top, 8px) - 8px); }
#confirm, .shop-toast { top: var(--conf-top, calc(var(--k) * 164)); }
.shop-toast { font-size: calc(var(--k) * 5.4); padding: calc(var(--k) * 3) calc(var(--k) * 4); text-align: center; pointer-events: none; z-index: 10; }
.shop-toast[hidden] { display: none; }
/* 会話の窓は、ゲーム画面の下の端に合わせる */
#msg { left: var(--cx); right: auto; bottom: max(8px, calc(100vh - var(--sb) + var(--k) * 4)); bottom: max(8px, calc(100dvh - var(--sb) + var(--k) * 4)); }
/* 参加・結果は、ゲーム画面の真ん中 */
#join, #result { top: calc(var(--st) + var(--sh) / 2); transform: translate(-50%, -50%); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }

/* ---------- 小さすぎる文字の下限 ---------- */
#shop-desc .db, #farm-desc { font-size: max(.75em, 13px); }
#shop-list.grid .sb, #shop-list.grid .qq { font-size: max(.55em, 12px); }
#shop-list.grid { --prh: calc(max(.65em, 12px) * 1.3); }
#shop-list.grid .pr { font-size: max(.65em, 12px); }
#shop-list.grid .qq { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92%; }   /* 品質の表示を1行に（折り返して在庫の数と重ならない） */
#shop-note, #farm-note { font-size: max(.7em, 12px); }
#farm-plots .pl .tx b { white-space: normal; overflow-wrap: anywhere; word-break: break-all; line-break: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }   /* 作物の名前は3行まで折り返す（「アキノキリンソウ（種子）」が狭い画面で3行要る） */   /* 買った品・収穫物の届き先 */
body.touch #join-name { min-height: 44px; }
/* ゲーム画面の枠を絵の外側に付ける（枠の太さの分だけ絵が右下へはみ出さない） */
#stage { box-sizing: content-box; }
/* 長押しで文字が選ばれたり、画像を保存する案内が出たりしない（入力欄は除く） */
body { -webkit-user-select: none; -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; }
#farm-plots .pl .tx { font-size: max(.72em, 13px); }
#farm-seeds li { font-size: max(.62em, 12px) !important; }
.hud small, #hud-l small, #hud-r small { font-size: max(.8em, 12px); }
#help { font-size: 13px; color: #b8a888; }
#h-drops { font-size: max(calc(var(--k) * 2.6), 12px); }
#stage.horde #hud-net, #hud-net { font-size: max(calc(var(--k) * 3.4), 12px); }
#snd { font-size: max(calc(var(--k) * 4), 14px); min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; }
#result { font-size: calc(var(--k) * 5.4); }
#result table { font-size: max(.82em, 13px); }
#result .note, #result .best, #result .evo { font-size: max(.8em, 12px); }

/* ---------- ホード中の帯: 体力・何波目・残りだけ ---------- */
#hud-h { font-size: calc(var(--k) * 4.6); }
#h-kill, #h-earn, #h-gren, #h-lv, #h-tok, #h-time { display: none !important; }
#hud-h .bar > i { height: calc(var(--k) * 1.2); }

/* ---------- 武器の欄: 番号と段は、黒い下地で読めるように ---------- */
.kit i, .kit span { background: rgba(10,7,4,.85); padding: 0 .25em; border-radius: 2px; color: #fff4d8; font-size: max(calc(var(--k) * 3.2), 12px); line-height: 1.15; }
.kit { min-width: 28px; min-height: 28px; }
.kit i { left: 0; top: 0; }
.kit span { right: 0; bottom: 0; }

/* 品質のボタン: 選んでいない品質も、数字が読める明るさ */
#confirm-ql .qs { filter: brightness(.7) saturate(.85); }
#confirm-ql .qs.on { filter: none; }
/* 数量の行は、入らない時は折り返す（はみ出さない） */
#confirm-qty .qr { flex-wrap: wrap; row-gap: calc(var(--k) * 1.2); }
#confirm-ql .qs, #confirm-qty .qb { min-width: max(calc(var(--k) * 8), 26px); height: max(calc(var(--k) * 8), 26px); }

/* はい・いいえ・とじる などを押せる大きさに */
#confirm-btns span, #shop-close, #join-btns span, #result .ok span, #shop-page span { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 28px; }

/* ---------- スマホ（操作ボタンが出ている時） ---------- */
#topbar, #botbar { display: none; }
body.touch #topbar, body.touch #botbar { display: flex; width: 100%; max-width: 420px; align-items: center; gap: 8px; }
body.touch #topbar { justify-content: space-between; height: 52px; overflow: hidden; }
body.touch #botbar { justify-content: space-between; height: 56px; gap: 6px; }   /* 幅の狭いスマホ（360ピクセル）でも、音と武器6つが収まるように詰める */
body.touch #topbar > *, body.touch #botbar > * { position: static !important; transform: none !important; margin: 0; }
body.touch #topbar .hud { font-size: 14px; padding: 4px 10px; }
body.touch #hud-net { min-width: 0; font-size: 12px !important; max-width: 50%; overflow: hidden; }
body.touch #hud-net #net-info { white-space: normal; line-height: 1.25; }   /* 参加者の数と受取待ちは、入らなければ2行に（1行のままだと狭い画面で切れた） */
body.touch #topbar #hud-l { flex: none; white-space: nowrap; }
body.touch #topbar #hud-r { font-size: 12px; white-space: nowrap; flex: none; padding: 4px 8px; }   /* 日付とブラッドムーンは1行ずつ（折れると帯の高さを越えて切れた） */
body.touch #topbar #hud-net { flex: 0 1 auto; }
body.touch:not(.land) #botbar #hud-net { max-width: none; flex: 0 1 auto; padding: 4px 8px; }
/* 縦向きの下の帯は、どの項目も改行しない（2026-10-04 ユーザー）。入るように出撃とログアウトを詰める */
body.touch:not(.land) #botbar { gap: 4px; }
body.touch:not(.land) #botbar > *, body.touch:not(.land) #botbar #net-info { white-space: nowrap; }
body.touch:not(.land) #botbar #hud-net { text-overflow: ellipsis; }   /* 幅320の画面だけは入り切らないので、末尾を「…」にする */
body.touch:not(.land) #topbar { gap: 4px; }
body.touch:not(.land) #topbar #snd { flex: none; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
body.touch:not(.land) #botbar #sortie { font-size: 18px; padding: 0 10px; letter-spacing: .05em; }
body.touch:not(.land) #botbar #net-out { padding: 0 6px; }
body.touch:not(.land) #botbar #hud-net { padding: 4px 6px; }   /* 縦向きは参加者の数・受取待ちを下の帯へ（上の帯は日付とブラッドムーンで埋まる） */   /* トークンと場所の表示は縮めない（参加者の一覧が広がると押し縮められて、帯の上下で切れた） */
body.touch #net-board { display: none; }
body.touch #help { display: none; }
/* ホード中は、上の帯を体力・波の帯に入れ替える */
body.touch #hud-h { flex: 1; background: none; padding: 0; font-size: 14px; }
body.touch.horde #topbar #hud-l, body.touch.horde #topbar #hud-r, body.touch.horde #topbar #hud-net { display: none; }
/* 下の帯: 音・出撃・畑、ホード中は武器の欄（44ピクセル以上） */
body.touch #botbar #snd { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
body.touch #botbar #net-out { min-height: 44px; font-size: 14px; padding: 0 12px; }
body.touch #botbar #sortie, body.touch #botbar #farm-open { min-height: 44px; display: inline-flex; align-items: center; font-size: 20px; padding: 0 22px; }
body.touch #botbar #sortie[hidden], body.touch #botbar #farm-open[hidden] { display: none; }
body.touch #botbar #h-wbox { display: none; flex: 1; justify-content: center; gap: 10px; padding: 0; }
body.touch #botbar .kgrp { gap: 3px; padding: 2px; min-width: 0; flex: 0 1 auto; }
body.touch.horde #botbar #h-wbox { display: flex; }
body.touch.horde #botbar #h-wbox:empty { display: none !important; }
body.touch #botbar .kit { width: 44px; height: 44px; flex: 0 1 44px; min-width: 34px; }   /* 縦向き・ホード中に武器が7つでも画面に入るよう、少し縮める */
body.touch #botbar #h-wbox { min-width: 0; }
body.touch.horde:not(.land) #botbar #hud-net { display: none; }   /* 縦向きのホード中は、下の帯を武器と溜め攻撃の残りに明け渡す（波は上の帯に出る）。武器7つ＋残りで画面の外へはみ出していた */
body.touch .kit i, body.touch .kit span { font-size: 12px; }
/* 窓の中のボタンも44ピクセル */
body.touch #confirm-ql .qs, body.touch #confirm-qty .qb { min-width: 44px; height: 44px; }
body.touch #confirm-qty .qb.w3 { display: none; }   /* スマホは ±100 を出さない（1行に収める。「全部」で足りる） */
body.touch #confirm-btns span, body.touch #shop-close, body.touch #join-btns span, body.touch #result .ok span, body.touch #shop-page span { min-height: 44px; min-width: 64px; }
body.touch #farm .btn { min-height: 44px; }
#farm-plots { grid-auto-rows: 1fr; }   /* 面の札の高さを段ごとにそろえる */

/* ---------- スマホの横向き: ゲーム画面を画面の高さいっぱいに広げ、帯と操作ボタンは半透明で上に重ねる（2026-10-04 ユーザー） ---------- */
/* 置き場所: 左上＝「◀ 7DTDマネージャー」、上＝その右に上の帯、左下＝十字キー、右下＝A・B、下＝十字キーとA・Bの間に下の帯。互いに重ならない */
body.touch.land { padding: 0; gap: 0; --el: max(10px, env(safe-area-inset-left)); --er: max(10px, env(safe-area-inset-right)); --eb: max(12px, env(safe-area-inset-bottom)); }
body.touch.land #topbar, body.touch.land #botbar { position: fixed; z-index: 7; width: auto; max-width: none; height: auto; padding: 0; box-sizing: border-box; pointer-events: none; }   /* 帯のすき間は下のゲーム画面へ通す */
body.touch.land #topbar { top: 4px; left: calc(var(--el) + 168px); right: var(--er); }
body.touch.land #topbar > * { pointer-events: none; opacity: .8; }   /* 上の帯は表示だけ。押すと下のゲーム画面へ通す（ホード中の体力の帯も） */
body.touch.land #botbar { bottom: var(--eb); left: calc(var(--el) + 170px); right: calc(var(--er) + 146px); flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 6px; }
body.touch.land #botbar > * { pointer-events: auto; opacity: .8; }
body.touch.land #botbar #sortie, body.touch.land #botbar #farm-open { font-size: 18px; padding: 0 14px; }
body.touch.land #botbar #net-out { padding: 0 8px; }
body.touch.land #botbar #h-wbox { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; }
body.touch.land #botbar .kgrp { flex-wrap: wrap; justify-content: center; }   /* 武器が1行に入らない時は2行に（上へ伸びる） */
body.touch.land #pad { position: fixed; inset: 0; z-index: 7; max-width: none; padding: 0; display: block; pointer-events: none; }
body.touch.land #dpad, body.touch.land #ab { position: absolute; bottom: var(--eb); pointer-events: auto; opacity: .5; }
body.touch.land #dpad { left: var(--el); }
body.touch.land #ab { right: var(--er); }
body.touch.land #to-webui { left: var(--el); top: 4px; opacity: .7; }
body.touch.land #hint { top: 56px; }   /* 上の帯の下に出す */
@media (min-height: 620px) { body.touch:not(.land) { padding-top: 56px; } }
@media (max-height: 619.98px) { body.touch:not(.land) #to-webui { font-size: 0; width: 44px; justify-content: center; padding: 0; } body.touch:not(.land) #to-webui::before { content: "◀"; font-size: 18px; } body.touch:not(.land) #topbar { padding-left: 46px; } }   /* 背の低い縦向き: 左上のボタンは「◀」だけ。上の帯はその右から */   /* 縦向き: 左上の「◀ 7DTDマネージャー」（上8・高さ44）の下から並べる。背の低い画面はゲーム画面を優先して詰める（layout.js と同じ境目） */
body.touch:not(.land) #botbar:empty { display: none; }

/* ---------- 畑の窓: 本文はほかの窓と同じ大きさ。ボタン・見出し・小さい字の下限 ---------- */
#farm { font-size: calc(var(--k) * 5.4); }
#farm .btn { font-size: max(.85em, 13px); }
#farm .lab { font-size: max(.8em, 12px); }
#farm small { font-size: max(.85em, 12px); }
#farm-plots .pl .n { font-size: max(.6em, 12px); }

/* ---------- 頭上の名前の下限 ---------- */
.nametag { font-size: max(calc(var(--k) * 4), 12px); }

/* ---------- 窓（会話・店・確認・結果・参加・畑）が開いている間は、下に隠れる「出撃」「音」「畑」と操作の説明を出さない
   （窓の操作中は使わない。窓と重なって半分だけ見えるのを防ぐ） ---------- */
body:has(#msg:not([hidden]), #shop:not([hidden]), #confirm:not([hidden]), #result:not([hidden]), #join:not([hidden]), #farm:not([hidden]), #wardrobe:not([hidden]), #rank:not([hidden])) :is(#sortie, #snd, #net-out, #net-qr, #farm-open, #help) { visibility: hidden; }
/* スマホ: 店・確認・結果・畑・ログインの窓が開いている間は、十字キーとA・Bを出さない（窓と重なり、十字キーを押したつもりが「はい」に当たる。窓の中は直接押せる） */
body:has(#shop:not([hidden]), #confirm:not([hidden]), #result:not([hidden]), #farm:not([hidden]), #join:not([hidden]), #out-ask:not([hidden]), #qr-box:not([hidden]), #wardrobe:not([hidden]), #rank:not([hidden])) #pad { visibility: hidden; }
body.touch.land #msg { left: calc(var(--el) + 170px); right: calc(var(--er) + 146px); width: auto; transform: none; bottom: var(--eb); }   /* 会話中も十字キーとA・Bは出したまま。横向きは窓をその間に置く（2026-10-04 ユーザー） */

/* ---------- タイムアタックの掲示板（2026-10-04） ---------- */
#rank { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 720px); max-height: min(92vh, 520px); max-height: min(92dvh, 520px); overflow-y: auto; padding: 10px 14px; font-size: 15px; }
#rank[hidden] { display: none; }
#rk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
#rk-title { color: #f0b840; font-size: 17px; font-weight: 700; }
#rk-head .muted { font-size: 12px; color: #9a8868; }
#rk-close { margin-left: auto; cursor: pointer; min-height: 44px; min-width: 64px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #c8b088; border-radius: 4px; padding: 0 12px; }
#rk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#rk-cols h4 { margin: 0 0 6px; color: #c8b088; font-weight: 500; border-bottom: 1px solid #6a5238; }
#rk-cols ol { list-style: none; margin: 0; padding: 0; }
#rk-cols li { display: grid; grid-template-columns: 2em 5em minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 3px 0; border-bottom: 1px solid #2a2018; font-size: 14px; }
#rk-cols li b { text-align: right; color: #c8b088; }
#rk-cols li .t { color: #ffe070; font-variant-numeric: tabular-nums; }
#rk-cols li .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rk-cols li.r1 b, #rk-cols li.r1 .t { color: #ffd040; } #rk-cols li.r2 b { color: #d8d8e0; } #rk-cols li.r3 b { color: #d8964a; }
#rk-cols li.muted { display: block; color: #9a8868; font-size: 13px; }
body.touch:not(.land) #rk-cols { grid-template-columns: 1fr; }
/* めてお廃坑の掲示板（同じ窓の中身を入れ替える。1列なので幅は中身に合わせる。2026-10-13） */
#rk-cols[hidden], #rk-mine[hidden] { display: none; }
#rank.mine { width: max-content; min-width: min(380px, calc(100vw - 16px)); max-width: calc(100vw - 16px); }
#rk-mine { list-style: none; margin: 0; padding: 0; }
#rk-mine li { display: grid; grid-template-columns: 2em 4em minmax(0, 1fr) auto; align-items: baseline; gap: 6px; padding: 3px 0; border-bottom: 1px solid #2a2018; font-size: 14px; }
#rk-mine li b { text-align: right; color: #c8b088; }
#rk-mine li .t { color: #ffe070; }
#rk-mine li .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rk-mine li .c { color: #c8b088; font-variant-numeric: tabular-nums; text-align: right; }
#rk-mine li.r1 b, #rk-mine li.r1 .t { color: #ffd040; } #rk-mine li.r2 b { color: #d8d8e0; } #rk-mine li.r3 b { color: #d8964a; }
#rk-mine li.muted { display: block; color: #9a8868; font-size: 13px; }
body.touch #rank:not([hidden]) { width: auto; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); max-height: none; transform: none; }
/* 報酬画面のクリアタイム */
#result .rw-clear { text-align: center; color: #e0d2b4; margin: 2px 0 8px; font-size: max(.95em, 14px); }
#result .rw-clear b { color: #ffe070; font-size: 1.4em; font-variant-numeric: tabular-nums; }
#result .rw-rank { margin-left: .6em; color: #ffd040; font-weight: 700; }
#result .rw-new { display: inline-block; margin-left: .6em; padding: 1px 8px; border-radius: 10px; background: linear-gradient(#ff6a3a, #c8301a); color: #fff; font-weight: 700; font-size: .85em; animation: rwNew .8s ease-in-out infinite alternate; }
@keyframes rwNew { from { transform: scale(1); box-shadow: 0 0 4px rgba(255,120,60,.6); } to { transform: scale(1.12); box-shadow: 0 0 14px rgba(255,160,80,1); } }

/* ---------- 着せ替え屋（2026-10-04） ----------
   左に着た姿の見本（向きを変えながら歩く）、右に欄の切り替えと部品の一覧、下に値段と「買って着る」 */
#wardrobe { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 760px); height: min(92vh, 540px); height: min(92dvh, 540px);
  display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "head head" "prev tabs" "prev list" "foot foot";
  gap: 8px 12px; padding: 10px 14px; font-size: 15px; }
#wardrobe[hidden] { display: none; }
#wd-head { grid-area: head; display: flex; align-items: center; gap: 12px; min-height: 40px; }
#wd-title { color: #f0b840; font-size: 17px; font-weight: 700; }
#wd-bal { color: #f0d070; }
#wd-close { margin-left: auto; cursor: pointer; min-height: 40px; min-width: 64px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #c8b088; border-radius: 4px; padding: 0 12px; }
#wd-prev { grid-area: prev; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #3a2e22, #120e0a 70%); border: 2px solid #4a3a28; border-radius: 4px; min-height: 0; }
#wd-cv { width: 128px; height: 152px; image-rendering: pixelated; }
#wd-tabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: 4px; }
#wd-tabs .tab { cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border: 2px solid #5a4630; border-radius: 4px; font-size: 14px; }
#wd-tabs .tab.on { border-color: #f0b840; color: #f0d070; background: rgba(240,184,64,.14); }
#wd-list { grid-area: list; list-style: none; margin: 0; padding: 0 2px 0 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); grid-auto-rows: max-content; gap: 6px; align-content: start; }
#wd-list li { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 2px solid #3a2a1c; border-radius: 4px; background: rgba(0,0,0,.25); }
#wd-list li.sel { border-color: #f0b840; background: rgba(240,184,64,.14); }
#wd-list li canvas { width: 48px; height: 57px; image-rendering: pixelated; }
#wd-list li .nm { font-size: 12px; text-align: center; line-height: 1.25; }
#wd-list li .pr { font-size: 12px; color: #f0b840; }
#wd-list li.worn .pr { color: #8ad88a; }
#wd-foot { grid-area: foot; display: flex; align-items: center; gap: 10px; min-height: 44px; }
#wd-info { flex: 1; min-width: 0; font-size: 14px; color: #c8b088; }
#wd-reset, #wd-buy { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 2px solid #c8b088; border-radius: 4px; white-space: nowrap; }
#wd-buy { border-color: #f0b840; color: #f0d070; font-weight: 700; background: rgba(240,184,64,.12); }
#wd-buy[hidden] { display: none; }
#wd-reset.off, #wd-buy.off { opacity: .35; pointer-events: none; }
body.touch #wardrobe:not([hidden]) { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); width: auto; height: auto; transform: none; }
body.touch:not(.land) #wardrobe:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 150px auto minmax(0, 1fr) auto; grid-template-areas: "head" "prev" "tabs" "list" "foot"; }
body.touch:not(.land) #wd-cv { width: 104px; height: 124px; }
body.touch #wd-close, body.touch #wd-tabs .tab { min-height: 44px; min-width: 44px; justify-content: center; }
body.touch.land #wardrobe:not([hidden]) { grid-template-columns: 150px minmax(0, 1fr); }

/* ---------- スマホの店（2026-10-04 ユーザー承認の見本 preview-shop.html の形） ----------
   窓は1つで画面いっぱい。左（縦向きは上）に全部の品を並べて指で送り、右（縦向きは下）に選んだ品の説明と、品質・数・買う。
   確認の窓は layout.js が店の窓の中へ入れる。ページ送り・「いいえ」・確認の窓の品名（説明と同じ）は出さない */
body.touch #shop:not([hidden]) { position: fixed; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom));
  width: auto; height: auto; max-width: none; max-height: none; transform: none; display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "list desc" "list conf"; gap: 6px 12px; padding: 8px 12px 10px; font-size: 16px; }
body.touch #shop > #shop-head { grid-area: head; margin: 0; padding-right: 168px; min-height: 44px; flex-wrap: wrap; row-gap: 2px; justify-content: flex-start; }   /* 右に残高と「とじる」の場所を空ける */
body.touch #shop #shop-close { position: absolute; top: 8px; right: 12px; }
body.touch #shop > #shop-foot { position: absolute; top: 14px; right: 96px; margin: 0; padding: 0; border: none; font-size: 15px; color: #f0d070; }   /* 残高は見出しの行の右（「とじる」の左） */
body.touch #shop > #shop-page { display: none; }
body.touch #shop > #shop-list { grid-area: list; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; align-content: start; gap: 6px; padding-right: 2px; }
body.touch #shop-list.grid.scroll { grid-template-rows: none; grid-auto-rows: auto; }   /* ページの「3段を等分」の決まりを消す（残ると上の段が潰れた） */
body.touch #shop-list.grid.scroll li { container-type: inline-size; }
body.touch #shop-list.grid.scroll .box { width: 100%; }
body.touch #shop-list.grid.scroll .ic { width: 88%; height: 88%; }   /* 絵をマスいっぱいに近く（品質と在庫の字は絵の上に重ねて出す） */
body.touch #shop > #shop-desc { grid-area: desc; height: auto; min-height: 0; margin: 0; padding: 0 0 0 12px; border-top: none; border-left: 2px solid #4a3a28; overflow-y: auto; touch-action: pan-y; }
body.touch #shop > #confirm { grid-area: conf; position: static; transform: none; width: auto; max-width: none; max-height: none; margin: 0; padding: 6px 0 0 12px; background: none; border: none; border-left: 2px solid #4a3a28; box-shadow: none; font-size: 15px; }
body.touch #shop > #confirm[hidden] { display: none; }
body.touch #shop > #confirm:has(#confirm-qty:not([hidden])) #confirm-text { display: none; }   /* 数を選ぶ品は、品名を説明の欄に任せる */
body.touch #shop #no { display: none; }
body.touch #shop #confirm-ql { flex-wrap: wrap; row-gap: 4px; }
/* 横向きの数の行は1行に（「数」の字を出さず、三角のボタンを幅40pxに詰める。iPhone 16 Pro で三角が1つ次の行へ落ちた） */
body.touch.land #shop #confirm-qty .qr { flex-wrap: nowrap; gap: 4px; font-size: 0; justify-content: flex-start; }
body.touch.land #shop #confirm-qty .qr > * { font-size: 15px; }
body.touch.land #shop #confirm-qty .qb { min-width: 40px; width: 40px; padding: 8px; }
body.touch.land #shop #confirm-qty .qr b { min-width: 2.6em; }   /* 品質1〜6は、入らなければ2行に（横向きの右の列は幅250px） */
body.touch #shop #confirm-btns { justify-content: flex-end; margin-top: 4px; }
body.touch .shop-toast { position: fixed; left: auto; right: calc(max(8px, env(safe-area-inset-right)) + 12px); top: calc(max(8px, env(safe-area-inset-top)) + 60px); bottom: auto; transform: none; width: 280px; font-size: 15px; padding: 8px 12px; }   /* 「買う」を隠さないよう、説明の欄の上に出す */
/* 縦向き: 上に品、下に説明と数・買う */
body.touch:not(.land) #shop:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "head" "list" "desc" "conf"; }
body.touch:not(.land) #shop > #shop-desc { max-height: 5.5em; padding: 6px 0 0; border-left: none; border-top: 2px solid #4a3a28; }
body.touch:not(.land) #shop > #confirm { padding: 6px 0 0; border-left: none; }
body.touch:not(.land) .shop-toast { left: 16px; right: calc(50% + 28px); width: auto; top: calc(max(8px, env(safe-area-inset-top)) + 4px); font-size: 13px; padding: 6px 8px; }   /* 縦向きは見出しの行の左半分（店の名前の上）に出す。品の一覧・残高・「とじる」・「買う」を隠さない */


/* ---------- スマホの畑の窓（2026-10-04 店と同じ考え方で作り直し） ----------
   窓は1つで画面いっぱい。横向きは 左＝6面（大きな札）と選ぶ・収穫のボタン、右＝持っている種（絵の札・指で送る）・説明・植える。
   縦向きは上から 6面・選ぶ／収穫・種・説明・植える。種の札の「→ 収穫物」と、空きの面の「押して選ぶ」は説明と✓で分かるので出さない */
body.touch #farm:not([hidden]) { position: fixed; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom));
  width: auto; max-width: none; height: auto; max-height: none; transform: none; overflow: hidden; display: grid; font-size: 16px; gap: 6px 12px; padding: 8px 12px 10px;
  grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "fh fh" "plots seeds" "plots desc" "row1 row2"; }
body.touch #farm > .fh { grid-area: fh; margin: 0; min-height: 44px; }
body.touch #farm > #farm-plots { grid-area: plots; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 6px; }
body.touch #farm > div.row:nth-of-type(3) { grid-area: row1; margin: 0; }
body.touch #farm > .lab { display: none; }
body.touch #farm > #farm-seeds { grid-area: seeds; min-height: 0; margin: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; grid-auto-rows: max-content; gap: 6px; padding-left: 12px; border-left: 2px solid #4a3a28; }   /* 段の高さは中身どおり（欄に合わせて札を潰さない） */
body.touch #farm > #farm-desc { grid-area: desc; max-height: 3.2em; overflow-y: auto; padding-left: 12px; border-left: 2px solid #4a3a28; line-height: 1.45; }
body.touch #farm > div.row:nth-of-type(6) { grid-area: row2; margin: 0; padding-left: 12px; }
/* 6面の札: 絵を大きく、名前と残り時間をその下に */
body.touch #farm-plots .pl { flex-direction: column; justify-content: center; text-align: center; gap: 2px; min-height: 0; padding: 4px; overflow: hidden; }
body.touch.land #farm-plots .pl img { width: min(40px, 30%); height: auto; aspect-ratio: 1; min-width: 0; min-height: 0; }
body.touch #farm-plots .pl img { width: min(48px, 45%); height: auto; aspect-ratio: 1; min-width: 0; min-height: 0; }
body.touch #farm-plots .pl .tx { flex: none; width: 100%; font-size: 13px; }
body.touch #farm-plots .pl:not(.grow):not(.ripe) .tx small { display: none; }
body.touch.land #farm-plots .pl .tx b { -webkit-line-clamp: 2; }
body.touch #farm-plots .pl .tx { line-height: 1.3; }
body.touch #farm-plots .pl .tx b { word-break: break-all; line-break: anywhere; }
/* 種の札: 低い横長（絵が左、名前と持っている数が右）。欄が低い横向きでも何段か見える */
body.touch #farm-seeds li { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 4px; align-items: center; text-align: left; min-height: 44px; padding: 3px 4px; font-size: 12px !important; line-height: 1.2; }
body.touch #farm-seeds li img { grid-row: 1 / span 2; width: 30px; height: 30px; margin: 0; min-width: 0; }
body.touch #farm-seeds li br, body.touch #farm-seeds li small { display: none; }
body.touch #farm-seeds li .nm { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; word-break: break-all; line-break: anywhere; }
body.touch #farm-seeds li .ct { color: #f0d070; }
/* 縦向き */
body.touch:not(.land) #farm:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; grid-template-areas: "fh" "plots" "row1" "seeds" "desc" "row2"; }
body.touch:not(.land) #farm > #farm-plots { grid-template-rows: none; grid-auto-rows: minmax(72px, auto); }
body.touch:not(.land) #farm > #farm-seeds, body.touch:not(.land) #farm > #farm-desc, body.touch:not(.land) #farm > div.row:nth-of-type(6) { padding-left: 0; border-left: none; }
body.touch:not(.land) #farm > #farm-seeds { border-top: 2px solid #4a3a28; padding-top: 6px; }
body.touch:not(.land) #farm > #farm-desc { max-height: 4.5em; }

/* 畑の窓の知らせ（種が足りない など）も12ピクセル以上 */
#farm-msg { font-size: max(.75em, 12px); }

/* ---------- WebUI（7DTDマネージャー）へ戻る: 画面の左上、ゲーム画面の外 ---------- */
#to-webui { position: fixed; left: 8px; top: 8px; z-index: 4; display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px;
  font-size: 13px; color: #e0d2b4; text-decoration: none; }
#to-webui:hover { color: #ffe8b0; }
body.touch #to-webui { min-height: 44px; font-size: 14px; }
body:not(.touch) { padding-top: 46px; }
#sortie.locked, #farm-open.locked { opacity: .45; }
/* ログインせずに遊んでいる間、左上のトークンの窓を「ログイン」ボタンにする（村・畑・市場。2026-10-05 ユーザー） */
#hud-login { display: none; }
#hud-l.guest { cursor: pointer; }
#hud-l.guest > :not(#hud-login) { display: none; }
#hud-l.guest #hud-login { display: inline; color: #f0d070; }
#hud-l.guest:hover { background: linear-gradient(#3a2418, #1c1008); }
body.touch #topbar #hud-l.guest { min-height: 44px; display: inline-flex; align-items: center; pointer-events: auto; opacity: 1; }   /* ログインしていない時の「迎撃」「畑」。押すとログインが要ると言う */   /* PC: ゲーム画面はこのボタン（上8・高さ34）の下から。窓の形によってはトークンの窓と重なった（2026-10-05 Edge） */
body:has(#farm:not([hidden])) #to-webui { visibility: hidden; }   /* 畑の窓は横向きのスマホで左上まで広がるので、開いている間は出さない */

/* 押さなくてよい案内（入った時のあいさつ）。ゲーム画面の上の真ん中に出て、数秒で消える。押せない（下へ通す） */
#hint { position: fixed; z-index: 8; left: var(--cx, 50%); top: calc(var(--st, 0px) + max(calc(var(--k) * 12), 44px)); transform: translateX(-50%); max-width: min(calc(var(--sw, 100vw) * .6), 92vw);
  pointer-events: none; opacity: 0; transition: opacity .6s; white-space: pre-line; text-align: center; font-size: max(calc(var(--k) * 3.4), 13px); line-height: 1.5;
  color: #f0e4c8; background: rgba(20, 14, 8, .72); border: 1px solid #6a5238; border-radius: 6px; padding: .4em 1em; }
#hint.go { opacity: 1; }
body.touch #hint { top: calc(var(--st, 0px) + 4px); max-width: 96vw; width: max-content; font-size: 12px; line-height: 1.4; padding: .3em .8em; }   /* スマホは表示が上の帯にあるので、ゲーム画面の上端に、横長に低く出す */

/* ---------- スマホは横向きだけ（2026-10-18 ユーザー: めてお廃坑に合わせ、めてお村の広場・居住エリア・市場・農場も縦の配置は無し）。縦向きの間は、横向きにする案内だけを出す（layout.js が #rotate を置く） ---------- */
#rotate { display: none; }
body.touch:not(.land) #rotate { display: flex; position: fixed; inset: 0; z-index: 60; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #0c0a08; color: #f0e2c4; font-size: 18px; text-align: center; padding: 24px; }
#rotate b { font-size: 56px; line-height: 1; display: inline-block; transform: rotate(90deg); }