:root {
  --tabs-h: 44px; /* 下のタブの高さ（メニューはこの真上に開く） */
  --night: #1b2140; --slate: #4b5a78; --moon: #e9e6da; --iron: #23252b; --brass: #b89a5a; --ember: #e2502d; --vermilion: #c8402a;
  --panel: #151a2e; --card: #1e2540; --line: #343d5e; --dim: #9aa3b8; --up: #8fe3a0; --down: #ff8b7a;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  color: var(--moon); background: #0d1020;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
#app { position: relative; max-width: 560px; height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: var(--night); overflow: hidden; }

/* 10/12 本人「スマホだと上下が小さい。メニューを上下に詰めて余白を減らしたい」：上の帯は資源2行・狩場1行・目標2行まで、下のタブも低く */
#hud { display: flex; align-items: center; gap: 6px; padding: max(4px, env(safe-area-inset-top)) 8px 3px; background: #11152a; font-size: 12.5px; line-height: 1.35; }
#res { display: flex; gap: 1px 6px; flex: 1; min-width: 0; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
#res > span { white-space: nowrap; }
#res .dim { color: var(--dim); font-size: 11px; }
#hp { position: relative; flex-shrink: 0; width: 88px; height: 16px; background: #2a1414; border-radius: 9px; overflow: hidden; }
#hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #a8321f, #e2502d); }
#hp span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 16px; text-shadow: 0 1px 2px #000; }
/* 音と言語（ヘッダーのスピーカー）。押しやすい大きさ（44px）・キーボードで見える枠 */
#hud { position: relative; }
.icon-btn { flex-shrink: 0; min-width: 38px; min-height: 34px; padding: 0 7px; border-radius: 8px; border: 1px solid var(--line); background: #1b2140; color: var(--fg, #e9e6da); font-size: 17px; line-height: 1; cursor: pointer; }
.icon-btn:focus-visible, #audio-pop :focus-visible { outline: 2px solid #ffd25e; outline-offset: 2px; }
#audio-pop { position: absolute; right: 8px; top: calc(100% + 4px); z-index: 60; width: min(300px, calc(100vw - 16px)); padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #151a31; box-shadow: 0 8px 24px rgba(0,0,0,0.5); font-size: 14px; }
#audio-pop h2 { font-size: 15px; margin: 0 0 8px; }
#audio-pop .arow { display: grid; grid-template-columns: 6.5em 1fr 2.6em; align-items: center; gap: 8px; margin: 10px 0; }
#audio-pop input[type=range] { width: 100%; accent-color: #ffd25e; min-height: 28px; }
#audio-pop .aval { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }
#audio-pop select { font-size: 14px; padding: 6px 8px; border-radius: 8px; background: #1b2140; color: inherit; border: 1px solid var(--line); min-height: 36px; }
#audio-pop .abtns { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }

#area { padding: 3px 8px; font-size: 12.5px; line-height: 1.35; background: #161b33; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
#area > b { flex-shrink: 0; white-space: nowrap; }
#area .dim { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 11.5px; }
#area .best { flex-shrink: 0; margin-left: auto; white-space: nowrap; color: #ffd25e; font-weight: 700; }
#goal { position: relative; padding: 3px 8px; font-size: 12px; line-height: 1.3; background: #1a2140; border-bottom: 1px solid var(--line); overflow: hidden; }
#goal i { position: absolute; left: 0; bottom: 0; height: 2px; background: #ffd25e; }
/* スマホ（10/12 本人「iPhone の Chrome 向けに。上側が削られすぎる」）：Chrome はアドレスバーとツールバーで縦が短い（iPhone 15 で約 390×660、SE で約 375×550）。
   上の帯をさらに小さく：資源は1行（研究Lv は標本帳の「過剰観測 Lv」で見る）、HP とスピーカーも小さく、狩場と目標の行も詰める */
@media (max-width: 480px) {
  #hud { padding: max(3px, env(safe-area-inset-top)) 8px 2px; gap: 5px; font-size: 12px; line-height: 1.25; }
  #res { gap: 0 4px; }
  #res > span { word-spacing: -2px; } /* アイコンと数字の間を詰める */
  #res .lv { display: none; }
  #hp { width: 64px; height: 14px; }
  #hp span { font-size: 10px; line-height: 14px; }
  .icon-btn { min-width: 32px; min-height: 28px; padding: 0 5px; font-size: 15px; }
  #area { padding: 2px 8px; font-size: 12px; line-height: 1.3; }
  #area .dim { font-size: 11px; }
  #goal { padding: 2px 8px; font-size: 11.5px; line-height: 1.25; }
}
#goal .ic { margin-right: 4px; }
#goal { display: flex; align-items: center; gap: 6px; }
#goal .txt { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

#stage { position: relative; flex: 1; min-height: 220px; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }

#od { position: absolute; left: 8px; right: 8px; bottom: 6px; display: flex; gap: 8px; justify-content: center; }
#od button, .od-charge { border: 0; border-radius: 12px; padding: 6px 12px; line-height: 1.3; color: #fff; font: inherit; display: flex; flex-direction: column; align-items: center; min-width: 120px; cursor: pointer; }
#od small { font-size: 11px; opacity: 0.85; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#od button, #od .od-charge { min-width: 0; }
.od-main { background: linear-gradient(180deg, #d24a2b, #8f2416); box-shadow: 0 2px 10px rgba(226,80,45,0.5); flex: 1; max-width: 320px; }
.od-main:disabled { background: #3a2a2a; box-shadow: none; color: #b8a8a8; cursor: default; }
.od-sub { background: #2c3557; flex: 0 0 auto; }
.od-pick { flex: 1; max-width: 200px; background: #2c3557; }
.od-pick.more { background: linear-gradient(180deg, #7a1c12, #3d0e09); }
.od-pick:disabled { opacity: 0.5; }
.od-charge { position: relative; overflow: hidden; background: #3d0e09; flex: 1; max-width: 300px; cursor: default; }
.od-charge.fire { background: #a8321f; }
.od-charge i { position: absolute; left: 0; bottom: 0; height: 3px; background: #ffb15e; }

#toasts { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; }
.toast { background: rgba(17,21,42,0.92); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12.5px; transition: opacity .4s, transform .4s; }
.toast.gold { border-color: var(--brass); color: #ffe7a8; }
.toast.warn { border-color: var(--ember); color: #ffb8a8; }
.toast.mat { color: #cfe8c8; }
/* 拾った物の棚（左端、レア度の低い物が上・高い物が下で固定、最大5行）。アイコンと数だけ、タップで名前（10/11 本人） */
#pickups { position: absolute; left: 6px; top: 96px; z-index: 4; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
#pickups .pick { position: relative; display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 8px 2px 4px; border-radius: 16px; border: 1px solid rgba(233,230,218,0.18); background: rgba(13,16,32,0.72); color: #f2ead6; font: 700 13px/1 inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: opacity .4s, transform .4s; }
#pickups .pick img { width: 22px; height: 22px; image-rendering: pixelated; }
#pickups .pick.bump { animation: pick-bump .22s ease-out; }
@keyframes pick-bump { from { transform: scale(1.18); } to { transform: scale(1); } }
#pickups .pick.out { opacity: 0; transform: translateX(-12px); }
#pickups .pick .nm { display: none; font-weight: 600; font-size: 12px; color: #e9e6da; }
#pickups .pick.named .nm { display: inline; }
#pickups .pick .badge:empty { display: none; }
#pickups .pick .badge { font-size: 9.5px; font-weight: 900; padding: 1px 4px; border-radius: 6px; background: #ffd25e; color: #1b2140; letter-spacing: .03em; }
#pickups .pick .badge[data-k="→G"] { background: #e8c25a; }
#pickups .pick.max { border-color: #ffd25e; box-shadow: 0 0 10px rgba(255,210,94,0.55); }
#pickups .pick.max .badge { background: linear-gradient(#fff3b0, #ffd25e); }
#pickups .pick.crystal { border-color: #a8d8ff; box-shadow: 0 0 8px rgba(168,216,255,0.45); }
#pickups .pick.tT1 { border-color: #6fb8ff; } #pickups .pick.tT2 { border-color: #b48cff; } #pickups .pick.tT3 { border-color: #ffd25e; }
#pickups .pick.tT4 { border-color: #ffe08a; box-shadow: 0 0 12px rgba(255,236,170,0.6); }
#loot-max { font-size: 13px; padding: 4px 8px; border-radius: 8px; background: #1b2140; color: inherit; border: 1px solid var(--line); min-height: 32px; margin-left: 8px; }
#pickups .pick:focus-visible { outline: 2px solid #ffd25e; outline-offset: 2px; }
/* G が増えた：上の G の下に小さく「+◯」 */
#gdelta { position: absolute; left: 30px; top: calc(100% - 6px); z-index: 20; padding: 1px 6px; border-radius: 8px; background: rgba(40,28,6,0.85); font-size: 12.5px; font-weight: 800; color: #ffe08a; text-shadow: 0 1px 2px #000; opacity: 0; pointer-events: none; }
#gdelta.show { animation: gdelta 1.4s ease-out; }
@keyframes gdelta { 0% { opacity: 0; transform: translateY(-4px); } 15% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #pickups .pick.bump, #gdelta.show { animation: none; } #gdelta.show { opacity: 1; } }
.toast.out { opacity: 0; transform: translateY(-6px); }

.banner { position: absolute; left: 50%; top: 32%; min-width: 220px; max-width: 90%; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; text-align: center; padding: 10px 22px; border-radius: 12px; background: rgba(13,16,32,0.85); border: 1px solid var(--brass); transition: opacity .3s, transform .3s; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner b { display: block; font-size: 20px; }
.banner small { color: var(--dim); }
.banner.unlock b { color: #ffd25e; }
.banner.rare { border-color: #a8d8ff; } .banner.rare b { color: #c8e8ff; }
/* レアの段の色（10/11 本人）：レア＝青・激レア＝紫・超激レア＝金・幻＝七色 */
.banner.rare.tT1 { border-color: #6fb8ff; } .banner.rare.tT1 b { color: #b8deff; }
.banner.rare.tT2 { border-color: #b48cff; box-shadow: 0 0 18px rgba(180,140,255,0.35); } .banner.rare.tT2 b { color: #dccbff; }
.banner.rare.tT3 { border-color: #ffd25e; box-shadow: 0 0 26px rgba(255,210,94,0.45); } .banner.rare.tT3 b { color: #ffe9a8; }
.banner.myth { border: 2px solid transparent; background: linear-gradient(rgba(13,16,32,0.9), rgba(13,16,32,0.9)) padding-box, linear-gradient(90deg, #ff6b6b, #ffd25e, #8fe3a0, #6fb8ff, #b48cff) border-box; box-shadow: 0 0 40px rgba(255,236,170,0.5); }
.banner.myth b { font-size: 26px; background: linear-gradient(90deg, #ff9b9b, #ffe08a, #b6f0c2, #a8d8ff, #d6c4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

#tabs { flex-shrink: 0; display: grid; grid-template-columns: repeat(7, 1fr); height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); background: #0f1326; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tab { position: relative; background: none; border: 0; color: var(--dim); font: inherit; font-size: 10.5px; line-height: 1.2; padding: 3px 0 4px; justify-content: center; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; }
.tab .ic { font-size: 15px; line-height: 1.2; }
.tab.on { color: var(--moon); background: #1c2342; }
.tab .dot { position: absolute; top: 5px; right: 22%; width: 7px; height: 7px; border-radius: 50%; background: #ffd25e; display: none; }
.tab.badge .dot { display: block; }

#panel { position: absolute; left: 0; right: 0; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); height: 64%; background: var(--panel); border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; display: flex; flex-direction: column; box-shadow: 0 -8px 24px rgba(0,0,0,0.4); z-index: 5; }
#panel[hidden] { display: none; }
#panel > header { display: flex; align-items: center; padding: 5px 10px 2px; }
#panel h2 { margin: 0; font-size: 15px; flex: 1; }
#panel-close { padding: 4px 10px; font-size: 12.5px; }
#panel-body { overflow-y: auto; padding: 2px 8px 12px; -webkit-overflow-scrolling: touch; user-select: text; }

.card { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line)); border-radius: 10px; padding: 7px 9px; margin: 5px 0; font-size: 13px; line-height: 1.4; }
.card.here { border-color: #ffd25e; border-left-color: #ffd25e; }
.card.locked { opacity: 0.6; }
.card.capped { background: #262b3c; }
.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0; }
.row b { flex: 1; }
.row.center { justify-content: center; }
.row.two .btn { flex: 1; }
.sub { color: var(--dim); font-size: 12px; }
.small { font-size: 12px; }
.hint { color: var(--dim); font-size: 12px; margin: 6px 2px; }
.up { color: var(--up); } .down { color: var(--down); }
.sw { color: var(--c, inherit); }
h3 { font-size: 14px; margin: 10px 2px 3px; color: var(--c, inherit); }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #2c3557; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px dashed var(--line); color: var(--dim); }
/* 外見の3つの枠（色・形・纏い） */
.look-row { padding: 6px 0; border-top: 1px solid var(--line); }
.look-row:first-of-type { border-top: 0; }
.row.wrap { flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
.chip.on { border-style: solid; border-color: #ffd25e; color: #ffe7a8; }

.btn { background: #2c3557; color: var(--moon); border: 1px solid #3d4870; border-radius: 9px; padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.on { background: #ffd25e; color: #1b2140; border-color: #ffd25e; font-weight: 700; }
/* 通貨のアイコン（金貨・研磨粉・観測値。18px のドット絵を 1:1 で） */
.px-icon { image-rendering: pixelated; vertical-align: -3px; }
/* 演出を出さない物（ドロップの演出 OFF） */
.btn.off { color: var(--dim); border-style: dashed; }
.btns { display: inline-flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.btn.gold { border-color: var(--brass); }
.btn.danger { background: #5a1c14; border-color: var(--vermilion); }
.btn.big { font-size: 16px; padding: 12px 22px; border-radius: 12px; }

.pbar { height: 5px; background: #0f1326; border-radius: 3px; overflow: hidden; margin: 4px 0; }
.pbar i { display: block; height: 100%; background: #8fe3a0; }
.pbar.track i { background: #ff8af0; }

.grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.rare { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; font-size: 12.5px; }
.rare.owned { border-color: #6c7bb0; }
.rare.here { border-color: #ff8af0; }
.rare.tT4 b { background: linear-gradient(90deg, #ff9b9b, #ffe08a, #b6f0c2, #a8d8ff, #d6c4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .rare.tT3 b { color: #ffe9a8; } .rare.tT2 b { color: #dccbff; } .rare.tT1 b { color: #b8deff; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--line); }
.cardtext { white-space: pre-wrap; font-size: 12px; background: #0f1326; padding: 8px; border-radius: 8px; user-select: text; }
textarea { width: 100%; min-height: 70px; background: #0f1326; color: var(--moon); border: 1px solid var(--line); border-radius: 8px; padding: 6px; font: inherit; font-size: 13px; user-select: text; }

.modal { position: absolute; inset: 0; background: rgba(5,6,14,0.72); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.modal[hidden] { display: none; }
.modal .sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; width: 100%; max-width: 420px; max-height: 90%; overflow: auto; }
.modal h2 { margin: 0 0 8px; font-size: 18px; }
.modal.dark { background: rgba(0,0,0,0.88); }
.modal .list { padding-left: 18px; line-height: 1.8; font-size: 14px; }
.ending { text-align: center; }
.ending .quiet { color: #c8402a; letter-spacing: 0.3em; font-size: 15px; margin: 10px 0 18px; animation: fade 2s ease both; }
.ending .list { text-align: left; display: inline-block; }
/* エンディングの一枚絵（codex、assets/pixel/ending.webp）：台地の崖の斧の跡を見上げる後ろ姿 */
.ending-art { display: block; width: 100%; max-width: 480px; aspect-ratio: 3 / 2; margin: 0 auto 4px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; animation: fade 2.4s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.repair { text-align: center; padding: 8px 0; }
.repair .pbar { height: 10px; }
.blade { position: relative; height: 130px; margin: 8px auto; max-width: 320px; background: linear-gradient(160deg, #3a3e48, #1f2228); border-radius: 60px 10px 10px 60px; }
/* 整備・薬の手順の場面（codex のドット絵）。研ぐ・刻むは、この上の光る所をタップ */
.care-scene { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 6px auto 8px; border-radius: 10px; border: 1px solid var(--line); background-size: cover; background-position: center; image-rendering: auto; }
.care-scene .nick { transform: translate(-50%, -50%); width: 42px; height: 42px; }
.nick { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #ffd25e; background: rgba(255,210,94,0.18); color: #ffd25e; font-size: 20px; cursor: pointer; animation: pulse 1s infinite alternate; }
.nick.done { border-color: #555; color: #555; background: none; animation: none; }
@keyframes pulse { from { box-shadow: 0 0 0 rgba(255,210,94,0.6); } to { box-shadow: 0 0 16px rgba(255,210,94,0.9); } }
.hold { position: relative; overflow: hidden; touch-action: none; }
.hold i { position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: rgba(255,210,94,0.35); }
.hold span { position: relative; }

#title { position: absolute; inset: 0; z-index: 30; background: linear-gradient(rgba(13,16,32,0.55), rgba(13,16,32,0) 38%, rgba(13,16,32,0) 70%, rgba(13,16,32,0.75)), url(assets/pixel/title.webp) center 70% / cover no-repeat, radial-gradient(ellipse at 50% 70%, #3a1810, #0d1020 70%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; padding: 6% 0 7%; }
#title .tbox { text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 0 2px #000; }
#title[hidden] { display: none; }
#title h1 { font-size: 40px; margin: 6px 0; letter-spacing: 0.05em; }
#title h1 span { display: block; font-size: 22px; color: #e2502d; letter-spacing: 0.4em; }
#title .concept { font-size: 18px; line-height: 1.6; margin: 18px 0 26px; }
#title .kicker { color: var(--dim); font-size: 11px; margin-top: 10px; opacity: 0.85; }
#title .sub { color: var(--dim); font-size: 12px; margin-top: 18px; }
.fatal { position: fixed; inset: 10px; background: #300; color: #fcc; padding: 10px; white-space: pre-wrap; z-index: 99; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .toast, .banner { transition: none; } .nick { animation: none; } }
body.early .tab.badge .ic { animation: tabpulse 1.2s ease-in-out infinite; color: #ffd25e; }
@keyframes tabpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.od-main.hint { animation: odpulse 1.4s ease-in-out infinite; }
@keyframes odpulse { 0%, 100% { box-shadow: 0 2px 10px rgba(226,80,45,0.5); } 50% { box-shadow: 0 0 26px rgba(255,170,90,0.95); } }
@media (prefers-reduced-motion: reduce) { body.early .tab.badge .ic, .od-main.hint { animation: none; } }
details summary { cursor: pointer; list-style: none; padding: 2px 0; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: '▸ '; color: var(--dim); }
details[open] summary::before { content: '▾ '; }
.help { padding-left: 18px; margin: 6px 0; line-height: 1.7; }
.formula { white-space: pre-wrap; font-size: 11.5px; background: #0f1326; padding: 8px; border-radius: 8px; line-height: 1.6; }
.bossbar { position: relative; flex-basis: 100%; height: 14px; background: #2a1a12; border: 1px solid #b89a5a; border-radius: 7px; overflow: hidden; margin-top: 3px; }
.bossbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a5a1f, #e0c27a); transition: width .15s; }
.bossbar span { position: relative; display: block; text-align: center; font-size: 10.5px; line-height: 14px; text-shadow: 0 1px 2px #000; }
#tap-hint { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: rgba(13,16,32,0.85); border: 1px solid #ffd25e; color: #ffe7a8; border-radius: 10px; padding: 5px 12px; font-size: 13px; pointer-events: none; white-space: nowrap; animation: hintbob 1.6s ease-in-out infinite; }
#tap-hint[hidden] { display: none; }
@keyframes hintbob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { #tap-hint { animation: none; } }
#town-btn { position: absolute; left: 8px; top: 56px; z-index: 3; font-size: 12px; padding: 4px 9px; background: rgba(13,16,32,0.85); }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 6px; }
.shelf .item { background: #0f1326; border: 1px solid var(--line); border-radius: 8px; padding: 6px; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.shelf .item.tT4 { border-color: #ffe08a; box-shadow: 0 0 8px rgba(255,224,138,0.5); } .shelf .item.tT3 { border-color: #ffd25e; } .shelf .item.tT2 { border-color: #b48cff; } .shelf .item.tT1 { border-color: #6fb8ff; }
#future-axe { width: 100%; max-width: 300px; display: block; margin: 6px auto; border-radius: 8px; }
#heatbar { position: absolute; left: 10px; right: 10px; bottom: 60px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
#heatbar .g { flex: 1; height: 7px; background: rgba(13,16,32,0.75); border: 1px solid #5a2a1e; border-radius: 4px; overflow: hidden; }
#heatbar .g i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8f2416, #ff7a4d, #ffd25e); transition: width .2s; }
#heatbar .holds { display: flex; gap: 4px; }
#heatbar .holds b { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); display: block; }
/* ボーナス（稼ぎ×2）のあいだは帯が金色に光る */
#heatbar.bonus .g { border-color: #ffd25e; box-shadow: 0 0 10px #ffd25e88; }
#heatbar.bonus .g i { background: linear-gradient(90deg, #ffd25e, #fff2b8, #ffd25e); }
#heatbar.bonus .lbl { color: #ffe7a8; font-weight: 800; }
#heatbar .lbl { font-size: 11px; color: #ffd8b0; text-shadow: 0 1px 2px #000; min-width: 64px; text-align: right; }
.c-white { background: #e9e6da; } .c-blue { background: #4fa3ff; } .c-red { background: #ff4d3d; box-shadow: 0 0 6px #ff4d3d; }
.c-gold { background: #ffd25e; box-shadow: 0 0 8px #ffd25e; } .c-rainbow { background: conic-gradient(#ff4d3d, #ffd25e, #8fe3a0, #4fa3ff, #c49af0, #ff4d3d); box-shadow: 0 0 10px #fff; }
@keyframes pulse2 { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
#fever { position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 60px 18px rgba(255,210,94,0.55); }
#fever[hidden] { display: none; }
#fever span { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); font-weight: 900; color: #ffd25e; text-shadow: 0 2px 6px #000; font-size: 18px; }
#demo-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 40; background: rgba(60,20,80,0.92); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 6px; font-size: 12px; }
#demo-bar .btn { font-size: 11px; padding: 3px 7px; }
.hold-sample { display: flex; gap: 8px; } .hold-sample b { width: 18px; height: 18px; border-radius: 50%; display: block; border: 1px solid rgba(255,255,255,0.5); }

/* 狩場で取れる力の印（攻・速・会・倍・移・湧…） */
.marks { display: inline-flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--c, #888) 30%, transparent); border: 1px solid color-mix(in srgb, var(--c, #888) 60%, transparent); }
.mark.full { opacity: .35; }
.mark.ms { background: transparent; border-style: dashed; }
.mark.cr { background: #b98cff44; border-color: #b98cff; }

/* ドット絵のドロップ（1ドット＝1 CSS ピクセル。にじませない） */
.px-item { image-rendering: pixelated; vertical-align: middle; margin: -4px 2px -4px 0; }
.px-item.hidden { filter: brightness(0); opacity: .5; }

/* テスト用の帯（ローカルだけ）：ふだんは右下（熱の帯の上）の小さなボタン。開くと上へ伸びる */
#dev-bar { position: absolute; bottom: 150px; right: 4px; z-index: 41; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; max-width: calc(100% - 4px); max-height: 46vh; overflow-y: auto; padding: 3px 4px; font-size: 11px; background: rgba(20,60,50,0.88); border-radius: 6px; }
#dev-bar .btn { font-size: 11px; padding: 2px 6px; }
#dev-bar b { color: #bfe8d8; margin-left: 4px; }
#dev-bar .sub { color: #d8efe6; }
#dev-bar .dev-sep { flex-basis: 100%; height: 0; }

/* タイトルの開幕（10/11、src/app/opening.ts）：#title[data-op] が gate → wait → night → charge → hit → ready と進む。
   曲（bgm/）に合わせて：夜（闇から絵が浮かぶ）→ 溜め（斧の火の粉）→ 放つ（題字がドン・白く光る・揺れ）→ ぷにっ（はじめる が出る） */
#title .tbox { position: relative; z-index: 1; }
#title .tshade, #title .tglow, #title .tflash { position: absolute; pointer-events: none; }
#title .tshade { inset: 0; background: #05060d; opacity: 0; transition: opacity 1.6s ease-out; }
#title .tflash { inset: 0; z-index: 3; background: #fff6e0; opacity: 0; }
#title .tglow { left: var(--gx, 75%); top: var(--gy, 40%); width: var(--gd, 220px); height: var(--gd, 220px); border-radius: 50%; transform: translate(-50%, -50%) scale(0.5); opacity: 0;
  background: radial-gradient(circle, rgba(255,214,140,0.95) 0%, rgba(255,140,60,0.65) 28%, rgba(226,80,45,0.25) 52%, rgba(226,80,45,0) 70%); mix-blend-mode: screen; }
#title .tgate { display: none; position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); flex-direction: column; align-items: center; gap: 8px; min-width: 220px; padding: 18px 26px;
  border-radius: 14px; border: 1px solid var(--brass); background: rgba(13,16,32,0.8); color: #f2ead6; font: 700 20px/1.2 inherit; cursor: pointer; animation: pulse 1.2s ease-in-out infinite alternate; }
#title .tgate small { font-size: 12px; font-weight: 600; color: var(--dim); }
#title .tgate:focus-visible { outline: 2px solid #ffd25e; outline-offset: 3px; }
#title[data-op="gate"] .tgate { display: flex; }
#title[data-op="gate"] .tshade { opacity: 0.82; transition: none; }
#title[data-op="wait"] .tshade { opacity: 1; transition: opacity .25s; }
#title[data-op] .ttop, #title[data-op] .tbottom { opacity: 0; pointer-events: none; }
#title[data-op="charge"] .tglow { animation: tg-charge 1.72s ease-in forwards; }
#title[data-op="hit"] .tglow { animation: tg-burst .8s ease-out forwards; }
#title[data-op="ready"] .tglow { animation: tg-ember 2.6s ease-in-out infinite; }
#title[data-op="hit"] .tflash { animation: tg-flash .6s ease-out forwards; }
#title[data-op="hit"] { animation: tg-shake .36s linear; }
#title[data-op="hit"] .ttop, #title[data-op="ready"] .ttop { opacity: 1; }
#title[data-op="hit"] .ttop h1 { animation: tg-slam .32s cubic-bezier(.2, 1.5, .4, 1) both; }
#title[data-op="hit"] .ttop .kicker, #title[data-op="hit"] .ttop .concept { animation: fade .6s .4s both; }
#title[data-op="ready"] .tbottom { opacity: 1; pointer-events: auto; animation: tg-pop .4s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes tg-charge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 60% { opacity: .7; } 80% { opacity: .55; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes tg-burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } }
@keyframes tg-ember { 0%, 100% { opacity: .18; transform: translate(-50%, -50%) scale(.8); } 50% { opacity: .38; transform: translate(-50%, -50%) scale(.95); } }
@keyframes tg-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes tg-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
@keyframes tg-slam { 0% { opacity: 0; transform: scale(1.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes tg-pop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  #title[data-op="hit"], #title[data-op="hit"] .ttop h1, #title[data-op="ready"] .tbottom, #title .tgate { animation: none; }
  #title[data-op="hit"] .tflash { animation-duration: .2s; }
}