:root {
  --ink: #2a2620;
  --paper: #fdf8ea;
  --sky: #3d8fe0;
  --accent: #c8372d;
  --straw: #e6c66f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfe6f3; color: var(--ink); font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(40, 30, 10, 0.22) 100%); }

.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; }
.screen.show { display: flex; }
#loading { background: linear-gradient(#3d8fe0, #cfe6f3 70%); z-index: 20; }
.load-inner { text-align: center; color: #fff; }
.logo { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: clamp(34px, 7.5vw, 76px); letter-spacing: 0.08em; white-space: nowrap; margin: 0; text-shadow: 0 3px 18px rgba(20, 60, 120, 0.35); }
.load-bar { width: 220px; height: 4px; margin: 18px auto 12px; background: rgba(255, 255, 255, 0.35); border-radius: 2px; overflow: hidden; }
.load-bar i { display: block; width: 40%; height: 100%; background: #fff; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
#load-msg { font-size: 14px; letter-spacing: 0.1em; opacity: 0.9; }
.load-note { margin: 34px auto 0; padding: 14px 22px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; font-size: 15px; font-weight: 700; line-height: 1.9; letter-spacing: 0.05em; color: #1f4f82; background: rgba(255, 255, 255, 0.82); border-radius: 12px; box-shadow: 0 6px 22px rgba(20, 60, 120, 0.18); }

#hud { display: none; }
#hud.show { display: block; }
#toast { position: fixed; top: 7%; left: 50%; transform: translateX(-50%); font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 30px; letter-spacing: 0.25em; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; white-space: nowrap; }
#toast.show { animation: toast 3.4s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 15% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; } }
/* 進入禁止の輪に押し当てたとき: 画面のふちが赤くにじみ、ひとこと出る */
#fence-glow { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 55%, transparent 48%, rgba(220, 40, 25, 0.28) 85%, rgba(160, 20, 10, 0.5) 100%); mix-blend-mode: screen; }
#fence-tip { position: fixed; left: 50%; bottom: 17%; transform: translate(-50%, 6px); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; opacity: 0; transition: opacity 0.5s, transform 0.5s; color: #fff; text-shadow: 0 1px 10px rgba(90, 10, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.4); white-space: nowrap; }
#fence-tip.show { opacity: 1; transform: translate(-50%, 0); transition-duration: 0.25s; }
#fence-tip b { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 22px; letter-spacing: 0.2em; }
#fence-tip span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85; }
/* 常に出しておく操作の案内（左上） */
#keyhint { position: fixed; left: 16px; top: 14px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; transition: opacity 0.3s; }
#keyhint .kh { display: flex; align-items: center; gap: 8px; width: max-content; background: rgba(253, 248, 234, 0.9); color: var(--ink); border-radius: 999px; padding: 5px 14px 5px 5px; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); }
#keyhint .kh.sub { background: rgba(30, 30, 30, 0.38); color: #fff; font-size: 12px; box-shadow: none; padding: 4px 12px 4px 4px; gap: 6px; }
#keyhint .kh.sub kbd { min-width: 22px; height: 20px; font-size: 11px; background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: none; }
#keyhint .kh.sub span + kbd { margin-left: 8px; }
#keyhint kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 900 14px "Zen Kaku Gothic New", sans-serif; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
/* 操作の一覧（歩いている間はいつも出しておく） */
#keyhint .kh-list { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 10px; margin: 0; padding: 8px 14px 8px 8px; width: max-content; background: rgba(30, 30, 30, 0.38); color: #fff; border-radius: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
#keyhint .kh-list dt { display: flex; gap: 3px; justify-content: flex-end; }
#keyhint .kh-list dd { margin: 0; }
#keyhint .kh-list kbd { min-width: 22px; height: 20px; padding: 0 6px; font-size: 11px; background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: none; }
body.sky #keyhint { opacity: 0; }
#corner { position: fixed; right: 16px; top: 14px; display: flex; align-items: center; gap: 8px; transition: opacity 0.3s; }
#menu-btn, #bag-btn { display: flex; align-items: center; gap: 6px; font: 700 12px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.1em; background: rgba(253, 248, 234, 0.9); border: 0; border-radius: 999px; padding: 7px 14px 7px 11px; cursor: pointer; color: var(--ink); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); transition: transform 0.15s; }
#menu-btn:hover, #bag-btn:hover { transform: translateY(-1px); }
body.sky #corner { opacity: 0; pointer-events: none; }
/* フレームレート（常に表示。タイトル・メニュー・空からの間も） */
#fps { position: fixed; right: 16px; top: 52px; z-index: 50; pointer-events: none; font: 700 12px/1 "Zen Kaku Gothic New", ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: #fff; background: rgba(30, 30, 30, 0.42); border-radius: 999px; padding: 5px 10px; }
#fps.low { color: #ffd37a; }
#fps.bad { color: #ff8a7a; }
#credit { position: fixed; right: 12px; bottom: 8px; font-size: 10px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

@media (max-width: 600px) {
  .logo { font-size: clamp(30px, 9vw, 60px); }
}

/* ファストトラベル（空から行き先をえらぶ） */
body.sky #toast { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#travel { position: fixed; inset: 0; z-index: 5; pointer-events: none; user-select: none; }
#travel.show { pointer-events: auto; }
.tv-head { position: absolute; top: 5%; left: 50%; transform: translate(-50%, -8px); text-align: center; color: #fff; opacity: 0; transition: opacity 0.45s, transform 0.45s; pointer-events: none; }
#travel.show .tv-head { opacity: 1; transform: translate(-50%, 0); }
.tv-title { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 34px; letter-spacing: 0.25em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.tv-sub { font-size: 14px; letter-spacing: 0.18em; margin-top: 2px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.tv-keys { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 12px; color: #fff; background: rgba(30, 30, 30, 0.42); padding: 7px 18px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity 0.45s; pointer-events: none; }
.tv-keys b { font-weight: 700; margin-left: 4px; }
#travel.show .tv-keys { opacity: 1; }
.tv-tl { position: absolute; left: 24px; top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tv-note { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; line-height: 1.7; color: #fff; background: rgba(8, 30, 46, 0.78); border: 2px solid #6fd0f5; padding: 10px 18px 10px 14px; border-radius: 12px; box-shadow: 0 0 0 4px rgba(111, 208, 245, 0.22), 0 6px 22px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.45s; pointer-events: none; }
.tv-note i { flex: none; display: grid; color: #6fd0f5; filter: drop-shadow(0 0 6px rgba(111, 208, 245, 0.55)); }
.tv-note i svg { width: 28px; height: 28px; }
.tv-note p { margin: 0; }
#travel.show .tv-note { opacity: 1; }
.tv-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tv-gfx { display: flex; align-items: center; gap: 12px; color: #fff; background: rgba(30, 30, 30, 0.5); padding: 6px 6px 6px 16px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.45s; pointer-events: none; }
#travel.show .tv-gfx { opacity: 1; pointer-events: auto; }
.tv-gfx > span { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.25; }
.tv-gfx small { font-size: 10px; font-weight: 500; letter-spacing: 0.04em; opacity: 0.8; }
.tv-gfx .seg { display: flex; background: rgba(0, 0, 0, 0.28); border-radius: 999px; padding: 3px; }
.tv-gfx button { min-width: 42px; font: 700 14px "Zen Kaku Gothic New", sans-serif; color: rgba(255, 255, 255, 0.85); background: none; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tv-gfx button:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tv-gfx .tv-fs { flex: none; min-width: 0; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.28); }
.tv-fsbox { cursor: pointer; transition: opacity 0.45s, background 0.15s; }
.tv-fsbox:hover { background: rgba(30, 30, 30, 0.62); }
.tv-fsbox:hover .tv-fs { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tv-fs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tv-fs .fs-off, .tv-fs.on .fs-on { display: none; }
.tv-fs.on .fs-off { display: inline; }
.tv-gfx button[aria-checked="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
#tv-pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tv-pin, .tv-me { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.tv-pin .lb { position: absolute; bottom: 13px; left: 0; transform: translateX(-50%); white-space: nowrap; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25); cursor: pointer; transition: transform 0.15s, background 0.15s, color 0.15s; animation: pin-in 0.4s ease both; }
#travel:not(.show) .lb { pointer-events: none; }
#travel.show .tv-pin .lb { pointer-events: auto; }
.tv-pin .lb::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--paper); border-bottom: 0; transition: border-color 0.15s; }
.tv-pin i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px rgba(42, 38, 32, 0.55); }
.tv-pin.home .lb { color: var(--accent); }
.tv-pin.hot .lb { background: var(--accent); color: #fff; transform: translateX(-50%) translateY(-3px) scale(1.08); }
.tv-pin.hot .lb::after { border-top-color: var(--accent); }
.tv-pin.area .lb { background: none; box-shadow: none; bottom: -12px; font-family: "Zen Old Mincho", serif; font-size: 22px; font-weight: 900; letter-spacing: 0.5em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 10px rgba(0, 40, 80, 0.55); cursor: default; }
.tv-pin.area .lb::after { display: none; }
@keyframes pin-in { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
.tv-me .lb { position: absolute; top: 12px; left: 0; transform: translateX(-50%); white-space: nowrap; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.tv-me i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.tv-me i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: me-pulse 1.6s ease-out infinite; }
@keyframes me-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
#tv-tip { position: fixed; left: 0; top: 0; font-size: 13px; font-weight: 700; color: #fff; background: rgba(30, 30, 30, 0.72); padding: 5px 11px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
#tv-tip.show { opacity: 1; }
#tv-tip.bad { background: rgba(130, 45, 32, 0.8); }
#tv-tip.nope { animation: nope 0.3s; }
@keyframes nope { 25% { margin-left: -6px; } 75% { margin-left: 6px; } }

#paused { position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%); display: none; font-weight: 700; color: #fff; background: rgba(30, 30, 30, 0.45); padding: 10px 22px; border-radius: 999px; font-size: 14px; pointer-events: none; }
#paused.show { display: block; }

/* ファストトラベルの印は、空にいる間だけ（歩いているときに左上へ見切れて出ないように） */
body:not(.sky) #tv-pins, body:not(.sky) #tv-tip { display: none; }

/* 一時停止メニュー・設定（紙のカード） */
#menu, #settings { z-index: 30; background: radial-gradient(ellipse at 50% 50%, rgba(20, 30, 40, 0.25), rgba(20, 30, 40, 0.55)); backdrop-filter: blur(3px); }
.panel { position: relative; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 26px 30px 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); animation: panel-in 0.28s cubic-bezier(.2, .9, .3, 1) both; }
.panel::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(90, 70, 40, 0.18); border-radius: 12px; pointer-events: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.panel h2 { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 26px; letter-spacing: 0.3em; margin: 0; }
#menu .panel h2 { text-align: center; margin-bottom: 20px; }
.menu-list { display: flex; flex-direction: column; gap: 10px; }
.menu-list button { position: relative; font: 700 16px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.15em; color: var(--ink); background: #fff; border: 1px solid rgba(60, 45, 25, 0.16); border-radius: 12px; padding: 13px 18px; cursor: pointer; transition: background 0.15s, transform 0.15s, border-color 0.15s; }
.menu-list button:hover { background: #fff7e2; border-color: rgba(200, 55, 45, 0.45); transform: translateY(-1px); }
.menu-list button.primary { background: var(--accent); color: #fff; border-color: transparent; }
.menu-list button.primary:hover { background: #d8453a; }
.menu-list small { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 900; letter-spacing: 0; background: rgba(42, 38, 32, 0.08); border-radius: 6px; padding: 2px 7px; }
/* 進入禁止の解除（押すたびに切りかわる） */
.menu-list button.toggle small { display: inline-flex; align-items: center; gap: 7px; background: rgba(42, 38, 32, 0.08); color: #8a7a64; padding: 3px 9px 3px 5px; border-radius: 999px; letter-spacing: 0.05em; }
.menu-list button.toggle small::before { content: ""; width: 26px; height: 14px; border-radius: 999px; background: rgba(42, 38, 32, 0.25) radial-gradient(circle at 7px 7px, #fff 5px, transparent 5.5px); transition: background 0.2s; }
.menu-list button.toggle[aria-pressed="true"] small { background: rgba(200, 55, 45, 0.12); color: var(--accent); }
.menu-list button.toggle[aria-pressed="true"] small::before { background: var(--accent) radial-gradient(circle at 19px 7px, #fff 5px, transparent 5.5px); }
.panel-head { display: flex; align-items: center; margin-bottom: 14px; }
.panel-head .close { margin-left: auto; font: 700 13px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.15em; background: rgba(42, 38, 32, 0.07); color: var(--ink); border: 0; border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.panel-head .close:hover { background: rgba(42, 38, 32, 0.14); }
.set-group { font-size: 12px; font-weight: 700; letter-spacing: 0.4em; color: #8a6a40; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(90, 70, 40, 0.25); }
.set-list { display: flex; flex-direction: column; gap: 12px; }
.set-list label { display: grid; grid-template-columns: 118px 1fr 40px; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.set-list label span small { display: block; font-size: 11px; font-weight: 500; color: #8a7a64; letter-spacing: 0.05em; }
.set-list output { font-size: 13px; font-weight: 700; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.set-list input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--sky) var(--p, 50%), rgba(42, 38, 32, 0.12) var(--p, 50%)); }
.set-list input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--sky); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.set-list input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--sky); }
.set-list select { font: 700 14px "Zen Kaku Gothic New", sans-serif; color: var(--ink); background: #fff; border: 1px solid rgba(60, 45, 25, 0.2); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.set-reset { display: block; margin: 22px auto 0; font: 700 12px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.1em; color: #8a7a64; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.set-reset:hover { color: var(--accent); }
/* セーブデータを消す（index.html の #wipe） */
.set-wipe { display: block; width: 100%; font: 700 13px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.1em; color: #a8322a; background: #fff; border: 1px solid rgba(168, 50, 42, 0.35); border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.15s; }
.set-wipe:hover { background: #fdecea; }
#wipe { z-index: 31; background: radial-gradient(ellipse at 50% 50%, rgba(40, 10, 10, 0.35), rgba(30, 10, 10, 0.65)); backdrop-filter: blur(3px); }
#wipe h2 { font-size: 22px; letter-spacing: 0.16em; margin-bottom: 12px; }
.wipe-step { display: none; }
.wipe-panel[data-step="1"] .wipe-1, .wipe-panel[data-step="2"] .wipe-2, .wipe-panel[data-step="3"] .wipe-3 { display: block; }
.wipe-lead { font-size: 14px; line-height: 1.85; margin: 0 0 10px; }
.wipe-lead b { color: #a8322a; }
.wipe-list { margin: 0 0 12px; padding-left: 1.3em; font-size: 13px; line-height: 1.9; }
.wipe-warn { font-size: 13px; font-weight: 700; color: #a8322a; margin: 0 0 18px; }
.wipe-input { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 18px; font: 700 18px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.3em; text-align: center; color: var(--ink); background: #fff; border: 2px solid rgba(168, 50, 42, 0.35); border-radius: 10px; padding: 10px; outline: none; }
.wipe-input:focus { border-color: #a8322a; }
#wipe .gc-btns button.wipe-next { color: #a8322a; }
#wipe .gc-btns button.wipe-go { background: #a8322a; color: #fff; border-color: transparent; }
#wipe .gc-btns button.wipe-go:disabled { background: #d9c9c0; cursor: not-allowed; transform: none; }

/* 植樹モード（?plant で P）: 右の操作パネル */
body.planting #keyhint, body.planting #corner, body.planting #paused, body.planting #quest-track { display: none; }
body.planting #fps { top: 14px; }
#plant { position: fixed; right: 16px; top: 44px; z-index: 30; width: 292px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 14px 14px 12px; background: rgba(253, 248, 234, 0.95); color: var(--ink); border-radius: 16px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28); font-size: 13px; }
#plant[hidden] { display: none; }
#plant kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: rgba(42, 38, 32, 0.1); font: 700 11px "Zen Kaku Gothic New", sans-serif; }
#plant button { font: 700 12px "Zen Kaku Gothic New", sans-serif; color: var(--ink); background: #fff; border: 1px solid rgba(90, 70, 40, 0.2); border-radius: 10px; padding: 7px 8px; cursor: pointer; }
#plant button:hover { border-color: rgba(90, 70, 40, 0.45); }
.pl-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.pl-head b { font-family: "Zen Old Mincho", serif; font-size: 18px; letter-spacing: 0.2em; }
.pl-head span { font-size: 11px; opacity: 0.7; }
.pl-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pl-kinds button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; text-align: left; align-items: center; }
.pl-kinds kbd { grid-row: span 2; }
.pl-kinds small { font-weight: 500; font-size: 10.5px; opacity: 0.65; }
#plant .pl-kinds button[aria-pressed="true"] { background: #2f6b3a; border-color: #2f6b3a; color: #fff; }
#plant .pl-kinds button[aria-pressed="true"] kbd { background: rgba(255, 255, 255, 0.25); }
.pl-size { display: grid; grid-template-columns: auto 1fr 44px; align-items: center; gap: 8px; margin: 12px 0 8px; font-weight: 700; }
.pl-size input { width: 100%; accent-color: #2f6b3a; }
.pl-size output { text-align: right; font-variant-numeric: tabular-nums; }
#plant .pl-wide { width: 100%; }
.pl-coord { margin: 10px 0 4px; padding: 6px 8px; border-radius: 8px; background: rgba(42, 38, 32, 0.07); font-variant-numeric: tabular-nums; min-height: 30px; }
.pl-count { margin: 6px 0 8px; font-size: 12px; }
.pl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#plant .pl-copy { width: 100%; margin-top: 8px; padding: 10px; background: var(--accent); border-color: var(--accent); color: #fff; font-size: 13px; letter-spacing: 0.06em; }
.pl-out { width: 100%; height: 110px; margin-top: 8px; font: 11px/1.4 ui-monospace, monospace; border: 1px solid rgba(90, 70, 40, 0.25); border-radius: 8px; padding: 6px; resize: vertical; }
.pl-out[hidden] { display: none; }
.pl-msg { min-height: 18px; margin-top: 6px; font-weight: 700; color: #2f6b3a; font-size: 12px; }
.pl-keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(90, 70, 40, 0.15); font-size: 11.5px; }
.pl-keys dt { font-weight: 700; white-space: nowrap; }
.pl-keys dd { margin: 0; opacity: 0.8; }

/* 会話: 頭の上の「話す」と、下のせりふの紙（people/talk.js） */
#talk-prompt { position: fixed; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 7px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(253, 248, 234, 0.95); color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); pointer-events: none; opacity: 0; transition: opacity 0.2s; margin-top: -6px; }
#talk-prompt.show { opacity: 1; }
#talk-prompt::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: rgba(253, 248, 234, 0.95); border-bottom: 0; }
#talk-prompt kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: #fff; font: 900 13px "Zen Kaku Gothic New", sans-serif; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); animation: tp-bob 1.4s ease-in-out infinite; }
@keyframes tp-bob { 50% { transform: translateY(-2px); } }
body.sky #talk-prompt, body.talking #talk-prompt { opacity: 0; }

#talk { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.talk-bar { position: absolute; left: 0; right: 0; height: 7vh; background: #0c0b09; transform: scaleY(0); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.talk-bar.top { top: 0; transform-origin: top; }
.talk-bar.bot { bottom: 0; transform-origin: bottom; }
#talk.show .talk-bar { transform: scaleY(1); }
.talk-box { position: absolute; left: 50%; bottom: calc(7vh + 20px); width: min(780px, calc(100vw - 32px)); padding: 28px 34px 24px; border-radius: 16px; background: rgba(253, 248, 234, 0.96); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); opacity: 0; transform: translate(-50%, 18px); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); }
.talk-box::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(90, 70, 40, 0.18); border-radius: 11px; pointer-events: none; }
#talk.show .talk-box { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.15s; }
.talk-name { position: absolute; left: 24px; top: -17px; padding: 5px 18px 5px 20px; border-radius: 999px; background: var(--accent); color: #fff; font: 900 17px "Zen Old Mincho", serif; letter-spacing: 0.25em; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); }
.talk-text { min-height: 3.7em; font-size: 19px; font-weight: 700; line-height: 1.85; letter-spacing: 0.06em; }
.talk-text span.in { animation: ch-in 0.18s ease both; }
@keyframes ch-in { from { opacity: 0; filter: blur(2px); } }
.talk-next { position: absolute; right: 24px; bottom: 16px; opacity: 0; transition: opacity 0.2s; }
.talk-next.show { opacity: 1; }
.talk-next i { display: block; width: 0; height: 0; border: 7px solid transparent; border-top: 9px solid var(--accent); border-bottom: 0; animation: tn-bob 0.9s ease-in-out infinite; }
@keyframes tn-bob { 50% { transform: translateY(4px); } }
.talk-ask { position: absolute; right: max(16px, calc(50vw - 390px)); bottom: calc(7vh + 214px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; }
.talk-ask.show { opacity: 1; transform: none; }
.talk-ask .opt { display: flex; align-items: center; gap: 10px; padding: 9px 20px 9px 9px; border-radius: 12px; background: rgba(253, 248, 234, 0.95); color: var(--ink); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); transition: background 0.15s, color 0.15s, transform 0.15s; }
.talk-ask .opt b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(42, 38, 32, 0.1); font-size: 12px; }
.talk-ask .opt.sel { background: var(--accent); color: #fff; transform: translateX(-8px); }
.talk-ask .opt.sel b { background: rgba(255, 255, 255, 0.25); }
.talk-ask .opt.picked { transform: translateX(-8px) scale(1.04); }
.talk-keys { position: absolute; left: 50%; bottom: 2.2vh; transform: translateX(-50%); color: rgba(255, 255, 255, 0.72); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; opacity: 0; transition: opacity 0.4s; }
#talk.show .talk-keys { opacity: 1; transition-delay: 0.3s; }
.talk-keys kbd { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; margin: 0 2px; border-radius: 5px; background: rgba(255, 255, 255, 0.16); color: #fff; font: 700 11px "Zen Kaku Gothic New", sans-serif; }
body.talking #keyhint, body.talking #corner, body.talking #toast, body.talking #fence-tip, body.talking #quest-track { opacity: 0; transition: opacity 0.3s; }

/* ?debug の大きさえらび（stagePick.js）: 湊さんの家・研究所の前で E。会話と同じ手ざわりの札 */
#stage-prompt { position: fixed; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 5px; border-radius: 999px; background: rgba(253, 248, 234, 0.95); color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); pointer-events: none; opacity: 0; transition: opacity 0.2s; margin-top: -6px; }
#stage-prompt.show { opacity: 1; }
#stage-prompt::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: rgba(253, 248, 234, 0.95); border-bottom: 0; }
#stage-prompt kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: #d98a10; color: #fff; font: 900 13px "Zen Kaku Gothic New", sans-serif; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); animation: tp-bob 1.4s ease-in-out infinite; }
#stage-prompt i, .sp-tag { font-style: normal; padding: 2px 7px; border-radius: 999px; background: #2a2620; color: #ffc451; font: 900 10px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.14em; }
body.sky #stage-prompt, body.talking #stage-prompt { opacity: 0; }

#stage-pick { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.sp-bar { position: absolute; left: 0; right: 0; height: 7vh; background: #0c0b09; transform: scaleY(0); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sp-bar.top { top: 0; transform-origin: top; }
.sp-bar.bot { bottom: 0; transform-origin: bottom; }
#stage-pick.show .sp-bar { transform: scaleY(1); }
.sp-card { position: absolute; left: max(16px, 3.5vw); top: 50%; width: min(360px, calc(100vw - 32px)); max-height: calc(86vh - 60px); display: flex; flex-direction: column; padding: 20px 14px 14px; border-radius: 16px; background: rgba(253, 248, 234, 0.96); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); opacity: 0; transform: translate(-18px, -50%); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); pointer-events: auto; }
.sp-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(90, 70, 40, 0.18); border-radius: 11px; pointer-events: none; }
#stage-pick.show .sp-card { opacity: 1; transform: translate(0, -50%); transition-delay: 0.12s; }
#stage-pick:not(.show) .sp-card { pointer-events: none; }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 8px 12px; }
.sp-name { font: 900 20px "Zen Old Mincho", serif; letter-spacing: 0.16em; }
.sp-head small { flex-basis: 100%; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: rgba(42, 38, 32, 0.6); }
.sp-list { list-style: none; margin: 0; padding: 2px 10px 2px 2px; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.sp-list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 10px; font-weight: 700; font-size: 15px; letter-spacing: 0.06em; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; }
.sp-list li b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(42, 38, 32, 0.08); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-list li span { flex: 1; white-space: nowrap; }
.sp-list li em { display: none; flex: none; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; padding: 2px 8px; border-radius: 999px; background: #d98a10; color: #fff; }
.sp-list li.now em { display: inline-block; }
.sp-list li.now b { background: #d98a10; color: #fff; }
.sp-list li.quit { margin-top: 6px; color: rgba(42, 38, 32, 0.62); }
.sp-list li.sel { background: var(--accent); color: #fff; transform: translateX(6px); }
.sp-list li.sel b { background: rgba(255, 255, 255, 0.25); color: #fff; }
.sp-list li.sel em { background: #fff; color: var(--accent); }
#stage-pick.busy .sp-list li.sel { animation: sp-busy 0.6s ease-in-out infinite; }
@keyframes sp-busy { 50% { opacity: 0.55; } }
.sp-foot { min-height: 1.5em; padding: 10px 8px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: rgba(42, 38, 32, 0.7); }
.sp-keys { position: absolute; left: 50%; bottom: 2.2vh; transform: translateX(-50%); color: rgba(255, 255, 255, 0.72); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; opacity: 0; transition: opacity 0.4s; }
#stage-pick.show .sp-keys { opacity: 1; transition-delay: 0.3s; }
.sp-keys kbd { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; margin: 0 2px; border-radius: 5px; background: rgba(255, 255, 255, 0.16); color: #fff; font: 700 11px "Zen Kaku Gothic New", sans-serif; }
@media (max-width: 560px) { .sp-card { top: auto; bottom: calc(7vh + 44px); max-height: 46vh; transform: translate(0, 18px); } #stage-pick.show .sp-card { transform: none; } }

/* ---------- お小遣い・持ち物・頼まれごと（bag.js）---------- */
.coin { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8, #f2c14e 45%, #c98d1c 100%); box-shadow: inset 0 0 0 1.5px rgba(150, 95, 10, 0.55), 0 1px 2px rgba(0, 0, 0, 0.2); position: relative; }
.coin::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(150, 95, 10, 0.5); }
#wallet { display: flex; align-items: center; gap: 7px; background: rgba(253, 248, 234, 0.9); border-radius: 999px; padding: 5px 13px 5px 6px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); font: 900 14px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
#wallet.bump { animation: bump 0.5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.18); } }

#quest-track { position: fixed; right: 16px; top: 84px; width: 236px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; transition: opacity 0.3s; }
body.sky #quest-track { opacity: 0; }
.qt { background: rgba(253, 248, 234, 0.92); border-radius: 12px; padding: 8px 12px 9px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16); animation: qt-in 0.35s ease both; }
@keyframes qt-in { from { opacity: 0; transform: translateX(12px); } }
.qt-who { font-size: 11px; font-weight: 900; letter-spacing: 0.15em; color: #8a6a40; margin-bottom: 3px; }
.qt-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.qt-row .ic { width: 40px; height: 20px; object-fit: contain; }
.qt-row b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.qt-row b small { font-size: 11px; color: #8a7a64; }
.qt-row.ok b { color: #2f8a57; }
.qt-msg { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 3px; line-height: 1.5; }
.qt.ready { box-shadow: 0 0 0 2px var(--accent), 0 3px 14px rgba(0, 0, 0, 0.2); }
.qt.wait .qt-msg { color: #8a7a64; font-weight: 500; }
.noicon { display: inline-block; background: rgba(42, 38, 32, 0.08); border-radius: 6px; }

/* 知らせ（わたした・もらった） */
#pop { position: fixed; left: 50%; top: calc(7vh + 18px); transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.pop { display: flex; align-items: center; gap: 12px; background: rgba(253, 248, 234, 0.97); color: var(--ink); border-radius: 999px; padding: 8px 24px 8px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); animation: pop-in 0.45s cubic-bezier(.2, 1.4, .4, 1) both; transition: opacity 0.5s, transform 0.5s; }
.pop.out { opacity: 0; transform: translateY(-10px); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-14px) scale(0.9); } }
.pop-icons { display: flex; }
.pop-icons .ic { width: 64px; height: 32px; object-fit: contain; }
.pop-icons .ic + .ic { margin-left: -14px; }
.pop-t { font-weight: 900; font-size: 17px; letter-spacing: 0.05em; white-space: nowrap; }
.pop-t small { font-size: 12px; font-weight: 700; color: #8a7a64; margin: 0 6px; }
.pop.coin { padding-left: 14px; }
.pop.coin .coin { width: 30px; height: 30px; animation: spin-coin 0.9s ease both; }
.pop.coin .coin::after { inset: 8px; }
.pop.coin .pop-t { font-family: "Zen Old Mincho", serif; font-size: 26px; color: var(--accent); }
@keyframes spin-coin { 0% { transform: rotateY(0) translateY(-10px); } 60% { transform: rotateY(720deg) translateY(0); } 100% { transform: rotateY(720deg); } }

/* 持ち物の画面 */
#bag { z-index: 30; background: radial-gradient(ellipse at 50% 50%, rgba(20, 30, 40, 0.25), rgba(20, 30, 40, 0.55)); backdrop-filter: blur(3px); }
.bag-panel { width: min(900px, calc(100vw - 32px)); height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column; padding: 24px 26px 24px; overflow: hidden; }
.bag-money { display: flex; align-items: center; gap: 7px; margin-left: 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: #8a6a40; }
.bag-money b { font-size: 19px; font-weight: 900; color: var(--accent); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.panel-head .close small { font-size: 10px; margin-left: 4px; background: rgba(42, 38, 32, 0.1); border-radius: 4px; padding: 1px 5px; }
.bag-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.bag-tabs button { display: flex; align-items: center; gap: 7px; font: 700 14px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.1em; color: var(--ink); background: rgba(42, 38, 32, 0.06); border: 0; border-radius: 999px; padding: 7px 14px 7px 7px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.bag-tabs button:hover { background: rgba(42, 38, 32, 0.11); }
.bag-tabs button kbd { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(42, 38, 32, 0.1); font: 900 11px "Zen Kaku Gothic New", sans-serif; }
.bag-tabs button small { font-size: 12px; font-weight: 900; color: #8a7a64; font-variant-numeric: tabular-nums; }
.bag-tabs button.on { background: var(--accent); color: #fff; }
.bag-tabs button.on kbd { background: rgba(255, 255, 255, 0.25); }
.bag-tabs button.on small { color: rgba(255, 255, 255, 0.85); }
.bag-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 270px; gap: 16px; }
.bag-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; align-content: start; padding: 3px; }
.bag-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 1px solid rgba(60, 45, 25, 0.14); border-radius: 12px; padding: 10px 8px 9px; cursor: pointer; font: inherit; color: var(--ink); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.bag-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.bag-card .ic { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; border-radius: 8px; background: radial-gradient(ellipse at 50% 60%, #e3f1f6, #f6f9f7 70%); }
.bag-card .nm { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; }
.bag-card .n { position: absolute; right: 8px; top: 6px; font-size: 14px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.bag-card .want { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 900; letter-spacing: 0.1em; background: var(--accent); color: #fff; border-radius: 999px; padding: 2px 7px; }
.bag-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: #fff9ec; }
.bag-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 70px 10px; color: #8a7a64; text-align: center; line-height: 1.8; }
.bag-empty b { font-size: 16px; color: var(--ink); letter-spacing: 0.1em; }
.bag-empty kbd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; border-radius: 5px; background: var(--ink); color: #fff; font: 900 11px "Zen Kaku Gothic New", sans-serif; }
.bag-detail { overflow-y: auto; background: #fff; border: 1px solid rgba(60, 45, 25, 0.12); border-radius: 14px; padding: 14px 16px 16px; }
.bag-detail.none { visibility: hidden; }
.bd-pic { border-radius: 10px; background: radial-gradient(ellipse at 50% 60%, #d9edf4, #f4f8f6 75%); }
.bd-pic .big { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: contain; }
.bd-name { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 24px; letter-spacing: 0.12em; margin-top: 10px; }
.bd-name small { font-size: 13px; margin-left: 8px; color: #8a7a64; letter-spacing: 0.2em; }
.bd-count { font-size: 30px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.bd-count small { font-size: 13px; margin-left: 3px; color: var(--ink); }
.bd-desc { font-size: 13px; line-height: 1.75; margin: 8px 0 10px; }
.bd-hint, .bd-want { font-size: 12px; line-height: 1.6; background: rgba(61, 143, 224, 0.08); border-radius: 8px; padding: 7px 10px; margin-top: 8px; }
.bd-hint span, .bd-want > span { display: block; font-size: 10px; font-weight: 900; letter-spacing: 0.2em; color: var(--sky); margin-bottom: 2px; }
.bd-want { background: rgba(200, 55, 45, 0.07); }
.bd-want > span { color: var(--accent); }
.bd-want ul { margin: 0; padding: 0; list-style: none; }
.bd-want li { display: flex; justify-content: space-between; font-weight: 700; }
.bd-want em { font-style: normal; color: #2f8a57; }
@media (max-width: 720px) {
  .bag-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .bag-detail { max-height: 40vh; }
  .bag-money { margin-left: 12px; }
}

/* ---------- 遊び場のピン（アヒル島のモリ突き）と、行くかどうかのカード ---------- */
.tv-pin.game .lb { display: flex; align-items: center; gap: 8px; bottom: 16px; padding: 5px 16px 5px 5px; background: #0b3a5a; color: #fff; font-size: 14px; letter-spacing: 0.08em; box-shadow: 0 4px 16px rgba(0, 20, 40, 0.45); }
.tv-pin.game .lb::after { border-top-color: #0b3a5a; }
.tv-pin.game .lb small { font-size: 11px; color: #f0a41c; font-weight: 900; letter-spacing: 0.12em; }
.tv-pin.game .gi { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f0a41c; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.tv-pin.game .gi svg { width: 20px; height: 20px; }
.tv-pin.game i { left: -6px; top: -6px; width: 12px; height: 12px; background: #f0a41c; box-shadow: 0 0 0 2px #0b3a5a; }
.tv-pin.game i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #f0a41c; animation: me-pulse 1.6s ease-out infinite; }
.tv-pin.game.hot .lb { background: #f0a41c; color: #0b3a5a; }
.tv-pin.game.hot .lb small { color: #0b3a5a; }
.tv-pin.game.hot .gi { background: #0b3a5a; }
.tv-pin.game.hot .gi svg path { stroke: #f0a41c; }
.tv-pin.game.hot .lb::after { border-top-color: #f0a41c; }
#game-card { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(5, 25, 40, 0.35); z-index: 3; pointer-events: auto; }
#game-card.show { display: flex; }
.gc-card { position: relative; width: min(400px, calc(100vw - 32px)); text-align: center; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 28px 28px 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); animation: panel-in 0.28s cubic-bezier(.2, .9, .3, 1) both; }
.gc-icon { width: 64px; height: 64px; margin: -60px auto 10px; border-radius: 50%; background: #0b3a5a; display: grid; place-items: center; box-shadow: 0 0 0 5px var(--paper), 0 8px 20px rgba(0, 0, 0, 0.3); }
.gc-icon svg { width: 38px; height: 38px; }
.gc-sub { font-size: 12px; font-weight: 900; letter-spacing: 0.4em; color: #1d6e9a; }
.gc-title { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 30px; letter-spacing: 0.25em; margin: 4px 0 8px; }
.gc-lead { font-size: 14px; line-height: 1.85; margin: 0 0 20px; }
.gc-btns { display: flex; gap: 10px; justify-content: center; }
.gc-btns button { font: 700 15px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.12em; border: 1px solid rgba(60, 45, 25, 0.16); border-radius: 12px; padding: 12px 22px; cursor: pointer; background: #fff; color: var(--ink); transition: transform 0.15s, background 0.15s; }
.gc-btns button:hover { transform: translateY(-1px); }
.gc-btns .primary { background: #0b3a5a; color: #fff; border-color: transparent; }
.gc-btns .primary:hover { background: #124f78; }

/* 画面の切りかえ（モリ突きへ行くとき） */
#fade { position: fixed; inset: 0; background: #062a3d; opacity: 0; pointer-events: none; transition: opacity 0.6s; z-index: 100; }
#fade.on { opacity: 1; pointer-events: auto; }
/* クレジット */
.credit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.credit-list li { display: grid; grid-template-columns: 118px 1fr; column-gap: 12px; row-gap: 3px; align-items: baseline; }
.credit-list b { font-weight: 700; }
.credit-list small { grid-column: 2; font-size: 12px; line-height: 1.6; color: #8a7a64; }
.credit-list a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.credit-list a:hover { text-decoration: underline; }
/* このゲームについて */
#about h2 { font-size: 22px; letter-spacing: 0.16em; }
.about-text { font-size: 14px; line-height: 1.9; }
.about-text p { margin: 0 0 10px; }
.about-text p:last-child { margin-bottom: 0; }
.about-lead { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 16px; line-height: 1.7; }
.about-text b { color: var(--accent); }
.about-ver { margin: 22px 0 0; padding-top: 10px; border-top: 1px solid rgba(90, 70, 40, 0.15); text-align: center; font-size: 11px; letter-spacing: 0.08em; color: #a8987f; font-variant-numeric: tabular-nums; }

/* ---------- ?story ストーリー確認モード（storyDebug.js）---------- */
#story-tag { position: fixed; left: 14px; bottom: 12px; z-index: 31; display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: rgba(120, 40, 30, 0.88); color: #fff4e0; border-radius: 999px; padding: 6px 8px 6px 14px; font: 700 12px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.08em; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25); }
#story-tag span { font-weight: 500; font-size: 11px; opacity: 0.8; }
#story-tag kbd { background: rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 1px 7px; font: 700 11px ui-monospace, monospace; }
#story { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(20, 30, 40, 0.45); backdrop-filter: blur(3px); }
#story.show { display: flex; }
#story .sd-card { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 18px 20px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); font-size: 13px; }
#story .sd-title { font-weight: 900; font-size: 18px; letter-spacing: 0.08em; margin-bottom: 12px; display: flex; align-items: baseline; gap: 12px; }
#story .sd-title small { font-weight: 500; font-size: 11px; opacity: 0.6; }
#story .sd-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
#story .sd-who { background: rgba(0, 0, 0, 0.04); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
#story .sd-head { display: flex; justify-content: space-between; align-items: baseline; }
#story .sd-head b { font-size: 15px; }
#story .sd-head span, #story .sd-now { font-size: 11px; opacity: 0.7; }
#story label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; }
#story select { font: 500 13px "Zen Kaku Gothic New", sans-serif; padding: 5px 6px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.2); background: #fff; color: var(--ink); }
#story button { font: 700 13px "Zen Kaku Gothic New", sans-serif; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; background: #2f6f9f; color: #fff; }
#story button:hover { filter: brightness(1.1); }
#story .sd-bag { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
#story .sd-check { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; font-size: 12px; }
#story .sd-danger { background: #a8432f; margin-left: auto; }
#story .sd-note { margin: 12px 0 0; font-size: 11px; line-height: 1.7; opacity: 0.7; }

/* ---------- 英語（html lang="en"。字間は src/shared/lang.js でまとめて戻す）---------- */
:lang(en) .set-list label { grid-template-columns: 150px 1fr 40px; }
:lang(en) .talk-text { line-height: 1.6; }
:lang(en) .talk-name { font-family: "Zen Kaku Gothic New", sans-serif; }