/* 急かされ勇者（ux）。藍・羊皮紙・朱のドット絵風。窓は羊皮紙色（青い窓は使わない）。 */
:root {
  --indigo: #1b1a2e; --indigo2: #2b2850; --indigo3: #3b3566; --night: #0e0d1a;
  --parch: #f4e6bf; --parch2: #e3cf9b; --ink: #2a1d12; --brown: #8a5a2b;
  --rust: #d6452a; --rust-d: #a52f1a; --green: #5aa845; --yellow: #e0a526;
  --font: "DotGothic16", "Hiragino Kaku Gothic ProN", "Yu Gothic", ui-monospace, Menlo, Consolas, monospace;
  --font-en: "Press Start 2P", "DotGothic16", ui-monospace, monospace;
  --foe: 192px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--indigo); color: var(--parch); font-family: var(--font); font-size: 16px; line-height: 1.45; }
html { overflow-x: clip; }
body { min-height: 100dvh; overflow-x: clip; -webkit-text-size-adjust: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
[hidden] { display: none !important; }
#app { min-height: 100dvh; }
.screen { min-height: 100dvh; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---- 窓（羊皮紙。二重線、角は階段状） ---- */
.win {
  background: var(--parch); color: var(--ink); padding: 14px 18px; position: relative;
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 7px var(--parch), inset 0 0 0 9px var(--brown);
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
}
.win.deny { animation: shake .3s; }

/* ---- ボタン ---- */
.btn { background: var(--parch2); color: var(--ink); border: 3px solid var(--night); box-shadow: 0 4px 0 var(--night); padding: 10px 16px; min-height: 48px; font-size: 18px; border-radius: 2px; }
.btn:active, .btn.down { transform: translateY(2px); box-shadow: 0 2px 0 var(--night); filter: brightness(.88); }
.btn.primary { background: var(--rust); color: #fff4d8; border-color: var(--night); }
.btn.big { width: 100%; min-height: 64px; font-size: 22px; }
.btn.small { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.btn.danger, button.danger { background: #8e2a1c; color: #fff4d8; }
.btn:disabled { opacity: .6; filter: grayscale(.5); transform: none; cursor: default; }
.link { background: none; border: 0; color: var(--parch); text-decoration: underline; text-underline-offset: 4px; font-size: 17px; padding: 12px; min-height: 44px; opacity: .9; }
.chip { background: var(--indigo3); color: var(--parch); border: 2px solid var(--parch); padding: 4px 10px; min-height: 40px; min-width: 40px; font-size: 15px; border-radius: 2px; }
.chip:active { filter: brightness(1.3); }

/* ---- 1. 開始 ---- */
#s-title { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 480px; margin: 0 auto; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); position: relative; text-align: center;
  background: linear-gradient(var(--indigo) 0 55%, #3a2a55 80%, #8b4a3a 100%); }
#s-title::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(var(--parch) 1px, transparent 1.6px), radial-gradient(var(--parch) 1px, transparent 1.6px);
  background-size: 83px 71px, 131px 109px; background-position: 10px 12px, 50px 40px; -webkit-mask-image: linear-gradient(#000 0 50%, transparent 70%); mask-image: linear-gradient(#000 0 50%, transparent 70%); }
body[data-screen="title"] { background: var(--indigo); }
#s-title > * { position: relative; }
.chips { align-self: stretch; display: flex; gap: 8px; justify-content: flex-end; }
.logo { margin: 18px 0 8px; font-size: 40px; line-height: 1.15; color: var(--parch); letter-spacing: 2px; text-shadow: 3px 3px 0 var(--rust), 6px 6px 0 var(--night); font-weight: normal; }
html[lang="en"] .logo { font-family: var(--font-en); font-size: 28px; line-height: 1.4; letter-spacing: 0; }
.king-row { display: flex; align-items: flex-end; gap: 14px; margin-top: 10px; width: 100%; min-height: 150px; }
#king-cv { width: 128px; height: 128px; flex: none; }
.bubble { position: relative; flex: 1; background: var(--parch); color: var(--ink); text-align: left; font-size: 22px; line-height: 1.4; padding: 12px 14px; min-height: 64px; border: 4px solid var(--night); cursor: pointer; margin-bottom: 18px; }
.bubble::before { content: ""; position: absolute; left: -16px; bottom: 14px; border: 8px solid transparent; border-right: 12px solid var(--night); }
.bubble::after { content: ""; position: absolute; left: -9px; bottom: 16px; border: 6px solid transparent; border-right: 9px solid var(--parch); }
.bubble.typing::after { }
.bubble { color: var(--rust-d); font-weight: bold; }
html[lang="en"] .bubble { font-size: 19px; }
#run-cv { width: 288px; height: 144px; image-rendering: pixelated; margin: 4px 0 0; }
.tagline { margin: 4px 0 18px; font-size: 18px; max-width: 24em; opacity: 0; transition: opacity .4s; text-shadow: 2px 2px 0 var(--night); }
.tagline.show { opacity: 1; }
.title-btns { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: stretch; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.title-btns.show { opacity: 1; transform: none; pointer-events: auto; }
.title-btns .link { align-self: center; }

/* ---- 2〜4. 町・フィールド・戦闘 ---- */
#game { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100dvh; max-width: 420px; margin: 0 auto; position: relative; background: var(--indigo); }
#bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 6px 12px; background: var(--night); }
#bar .gen { font-size: 17px; color: var(--yellow); white-space: nowrap; }
#bar .place { flex: 1; text-align: center; font-size: 16px; opacity: .95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud { display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 48px; background: var(--indigo2); border-block: 3px solid var(--night); position: relative; }
.hud-hp { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; position: relative; }
.hp-label { font-size: 14px; opacity: .9; }
.hpbar { position: relative; flex: 1; min-width: 0; height: 24px; background: #3b3556; border: 3px solid var(--night); outline: 1px solid var(--parch); }
.hpbar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--green); transition: width .4s ease-out; }
.hpbar .fill.unk { background: #6b6488; }
.hpbar .fill.mid { background: var(--yellow); } .hpbar .fill.low { background: var(--rust); }
.hpbar .gain { position: absolute; top: 0; bottom: 0; background: #fff; opacity: 0; left: 0; width: 0; }
.hpbar .gain.on { animation: gainflash .5s ease-out; }
.hpbar .num { position: absolute; inset: 0; display: grid; place-items: center; font: bold 15px/1 var(--font); color: #fff; text-shadow: 1px 1px 0 var(--night), -1px 1px 0 var(--night), 1px -1px 0 var(--night), -1px -1px 0 var(--night); font-variant-numeric: tabular-nums; }
.hpbar.hit { animation: shake .3s; }
.stat { font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat.time { font-family: var(--font); min-width: 4.6em; text-align: right; }
.pc-only { display: none; }
/* スマホ: 体力の帯を 1 段目、Lv・所持金・今代・合計を 2 段目に並べる（今代の時間も常時見せる） */
@media (max-width: 899px) {
  #hud { flex-wrap: wrap; row-gap: 4px; column-gap: 10px; }
  #hud .hud-hp { flex: 1 1 100%; }
  #hud .stat { font-size: 15px; }
  #hud #hud-age { margin-left: auto; }
  #hud .gear { flex: 1 1 100%; font-size: 13px; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
  #hud .stat.time { min-width: 0; }
}
#hud-age:empty { display: none; }
.floats { position: absolute; left: 0; right: 0; top: -4px; height: 0; pointer-events: none; z-index: 5; }
.float { position: absolute; left: 50%; font: bold 24px/1 var(--font); color: #fff4d8; text-shadow: 2px 2px 0 var(--night), -2px 2px 0 var(--night), 2px -2px 0 var(--night), -2px -2px 0 var(--night); animation: rise .85s ease-out forwards; white-space: nowrap; }
.float.dmg { color: #ffd0c0; } .float.crit { color: var(--yellow); font-size: 34px; } .float.up { color: #9be36d; }
.hud-hp .floats { top: 30px; }

/* 舞台: スマホの縦画面では、HUD と操作の間の残りをすべて使って縦に伸ばす（地図は縦横比に合わせて見える範囲が増える） */
#stage { position: relative; width: min(100%, 420px); height: 100%; min-height: 0; margin: 0 auto; background: #000; overflow: hidden;
  --sky: #5b7fb0; --ground: #5c8a45; }
#map { display: block; width: 100%; height: 100%; touch-action: none; }
#stage.zone-forest { --sky: #2f4a3a; --ground: #1f3a2a; } #stage.zone-waste { --sky: #c9a86a; --ground: #a67f4a; } #stage.zone-swamp { --sky: #4a5a3a; --ground: #2e3a2a; }
#stage.zone-cave1, #stage.zone-cave2 { --sky: #2a2238; --ground: #1a1626; } #stage.zone-castle { --sky: #2a1d3a; --ground: #120c20; }
#battle-view { position: absolute; inset: 0; background: linear-gradient(var(--sky) 0 60%, var(--ground) 60% 100%); transition: transform .35s ease-in; }
#battle-view::after { content: ""; position: absolute; left: 0; right: 0; top: 60%; height: 6px; background: rgba(0,0,0,.25); }
/* 戦闘の背景: 地帯ごとの絵（battle-bg.png）を上 60% に。足元の地面の色は --ground で続ける */
#bg-cv { position: absolute; left: 0; top: 0; width: 100%; height: 60%; object-fit: cover; object-position: 50% 100%; }
#stage.slide #battle-view { transform: translateX(-110%); }
.foe-head { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 3; }
#foe-name { font-size: 20px; color: #fff4d8; text-shadow: 2px 2px 0 var(--night); white-space: nowrap; }
.hpbar.foe { height: 22px; }
.foe-wrap { position: absolute; left: 56%; top: 46%; transform: translate(-50%, -50%); width: var(--foe); height: var(--foe); }
#foe-cv { width: 100%; height: 100%; transition: opacity .5s, transform .5s; animation: bob 1.4s steps(2) infinite; }
#foe-cv.hit { animation: foehit .14s; }
#foe-cv.atk { animation: foeatk .36s; }
#foe-cv.gone { opacity: 0; transform: scale(.4); }
.foe-floats { top: 20%; }
#bhero-cv { position: absolute; left: 12px; bottom: 14px; width: 96px; height: 96px; animation: bob 1.1s steps(2) infinite; }
#bhero-cv.lunge { animation: lunge .34s ease-out; }
.levelup { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; z-index: 6; animation: pop .3s ease-out; }
.levelup > div { text-shadow: 3px 3px 0 var(--night), -2px 2px 0 var(--night), 2px -2px 0 var(--night), -2px -2px 0 var(--night); }
.lu-a { font-size: 34px; color: var(--yellow); } .lu-b { font-size: 56px; color: #fff4d8; line-height: 1.1; } .lu-c { font-size: 26px; color: #9be36d; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #fff; z-index: 7; }
.flash.on { animation: flashw .32s ease-out; } .flash.hurt { background: var(--rust); animation: flashw .32s ease-out; }
#stage.shake { animation: shake .26s; } #stage.nudge { animation: nudge .09s; }

#side { display: contents; }
#panel { position: relative; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); min-height: 236px; }
#pad { display: grid; grid-template-columns: 1fr auto; align-items: center; grid-template-rows: auto 1fr; height: 100%; }
.hint { grid-column: 1 / -1; margin: 0 4px; font-size: 14px; opacity: .85; text-align: center; transition: opacity .6s; min-height: 20px; }
.hint.fade { opacity: 0; }
#dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); grid-template-areas: ". up ." "left . right" ". down ."; justify-self: start; margin-left: 4px; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; }
#dpad::before { content: ""; grid-area: 2 / 2; background: var(--indigo3); border-radius: 50%; margin: 14px; }
#dpad button { background: rgba(244, 230, 191, .85); color: var(--ink); border: 3px solid var(--night); font-size: 22px; padding: 0; touch-action: none; border-radius: 2px; box-shadow: 0 3px 0 var(--night); }
#dpad button.down { background: #c9b078; transform: translateY(2px); box-shadow: 0 1px 0 var(--night); }
#dpad [data-dir=up] { grid-area: up; } #dpad [data-dir=left] { grid-area: left; } #dpad [data-dir=right] { grid-area: right; } #dpad [data-dir=down] { grid-area: down; }
#padr { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-right: 8px; }
.okbtn { width: 84px; height: 84px; border-radius: 50%; background: var(--rust); color: #fff4d8; border: 4px solid var(--night); box-shadow: 0 5px 0 var(--night); font-size: 19px; line-height: 1.1; padding: 0; }
.okbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--night); filter: brightness(.88); }
.okbtn.near { background: var(--yellow); color: var(--ink); animation: glow 1s steps(2) infinite; }

#talk { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); min-height: 140px; max-height: calc(100dvh - 120px); z-index: 10; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
#talk.is-shop { max-height: calc(100dvh - 150px); }
.who { align-self: flex-start; background: var(--rust-d); color: #fff4d8; padding: 1px 10px; font-size: 14px; }
.talk-text { margin: 4px 0 0; font-size: 18px; line-height: 1.55; min-height: 3.1em; }
html[lang="en"] .talk-text { font-size: 17px; }
.more { position: absolute; right: 18px; bottom: 10px; color: var(--rust-d); animation: blink 1s steps(2) infinite; }
#shop { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#shop-list { list-style: none; margin: 4px 0 0; padding: 0; overflow-y: auto; display: grid; gap: 6px; min-height: 0; }
.shop-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: var(--parch2); color: var(--ink); border: 3px solid var(--ink); padding: 6px 10px; min-height: 52px; box-shadow: 0 3px 0 var(--ink); border-radius: 2px; }
.shop-row:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.shop-row .sr-name { display: flex; flex-direction: column; min-width: 0; } .shop-row small { font-size: 14px; opacity: .85; } .shop-row b { font-weight: normal; font-size: 17px; }
.shop-row .sr-price { font-size: 18px; white-space: nowrap; color: var(--rust-d); font-weight: bold; font-variant-numeric: tabular-nums; }
.shop-row.off { background: #d3c5a0; opacity: .8; } .shop-row.off .sr-price { color: #6a5a45; } .shop-row.owned { background: #cfd9b0; }
.shop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 6px; }
#shop-gold { font-size: 17px; font-variant-numeric: tabular-nums; }

#bpanel { display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; height: 100%; }
#bmsg { padding: 12px 16px; }
#bmsg-text { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(3 * 1.4em); }
#bmsg p { margin: 0; font-size: 18px; line-height: 1.4; }
#bmsg p.bl { opacity: .5; } #bmsg p.bl:last-child { opacity: 1; font-weight: bold; }
#cmds, .items-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(110px, 1fr) minmax(110px, 1fr); gap: 8px; }
.cmd { min-height: 72px; min-width: 110px; background: var(--parch2); color: var(--ink); border: 4px solid var(--night); box-shadow: 0 5px 0 var(--night); font-size: 21px; border-radius: 2px; padding: 4px; }
.cmd:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--night); filter: brightness(.82); }
.cmd.attack { background: var(--rust); color: #fff4d8; font-size: 24px; }
.cmd.flee { background: #bba67a; }
.cmd.off { background: #9a8f78; color: #3a3226; opacity: .75; }
.cmd.sel { outline: 4px solid var(--yellow); outline-offset: 2px; }
#bitems { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.items-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.itembtn { display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 17px; min-width: 0; }
.itembtn b { font-weight: normal; font-size: 18px; } .itembtn small { font-size: 12px; line-height: 1.2; opacity: .85; }
html.danger #game::after { content: ""; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 5px rgba(214, 69, 42, .9); animation: dangerblink 1s steps(2) infinite; z-index: 40; }
.gainpop { animation: pop .5s; }

/* ---- 5. 墓碑 ---- */
#s-grave { display: flex; flex-direction: column; align-items: center; max-width: 480px; margin: 0 auto; padding: 24px 18px calc(18px + env(safe-area-inset-bottom)); position: relative; overflow: hidden;
  background: linear-gradient(#12101f 0 60%, #2a2040 100%); }
body[data-screen="grave"] { background: #12101f; }
.moon { position: absolute; left: 28px; top: 28px; width: 56px; height: 56px; border-radius: 50%; background: var(--parch); box-shadow: 10px 0 0 0 #12101f inset; opacity: .9; } /* ⚙ は右上なので月は左上（1280 でも重ならない） */
.settings-head { margin: 4px 0 -4px; padding-top: 10px; border-top: 3px solid var(--ink); font-size: 22px; font-weight: normal; }
@media (min-width: 900px) { #s-title, #s-grave { max-width: 760px; } .stone { width: min(100%, 420px); } }
.stone { margin-top: 56px; width: min(100%, 340px); background: var(--night); padding: 4px; clip-path: polygon(40px 0, calc(100% - 40px) 0, calc(100% - 40px) 12px, calc(100% - 20px) 12px, calc(100% - 20px) 28px, 100% 28px, 100% 100%, 0 100%, 0 28px, 20px 28px, 20px 12px, 40px 12px); animation: rise-in .5s ease-out; }
.stone-in { background: #a9a9b6; color: #2e2e3c; padding: 36px 20px 24px; text-align: center; min-height: 380px; clip-path: polygon(38px 0, calc(100% - 38px) 0, calc(100% - 38px) 12px, calc(100% - 18px) 12px, calc(100% - 18px) 28px, 100% 28px, 100% 100%, 0 100%, 0 28px, 18px 28px, 18px 12px, 38px 12px);
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px); text-shadow: 1px 1px 0 #d7d7e0; }
.stone-in::after { content: ""; display: block; width: 32px; height: 56px; margin: 30px auto 0; opacity: .85;
  background: linear-gradient(#55556a, #55556a) center / 10px 100% no-repeat, linear-gradient(#55556a, #55556a) center 14px / 100% 10px no-repeat; }
.stone-gen { font-size: 34px; line-height: 1.2; letter-spacing: 1px; }
html[lang="en"] .stone-gen { font-size: 28px; }
.stone-age { font-size: 22px; margin-top: 4px; }
.stone hr { border: 0; border-top: 3px double #55556a; margin: 16px 8px; }
.stone-cause { font-size: 20px; line-height: 1.5; color: #7d2113; font-weight: bold; text-shadow: 1px 1px 0 #d7d7e0; }
.stone-left { font-size: 18px; margin-top: 12px; line-height: 1.5; }
#grave-hero { position: absolute; right: 8px; bottom: 120px; width: 96px; height: 96px; }
.grave-foot { margin-top: auto; padding-top: 18px; width: 100%; text-align: center; }
.grave-total { font-size: 18px; margin-bottom: 12px; color: var(--parch); text-shadow: 2px 2px 0 var(--night); }

/* ---- 6. 魔王討伐・順位表 ---- */
#s-board { background: linear-gradient(var(--indigo), #2b2243); }
body[data-screen="board"] { background: var(--indigo); }
.board-wrap { max-width: 640px; margin: 0 auto; padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }
#clear-head { text-align: center; padding: 8px 0 14px; }
#clear-hero { width: 80px; height: 80px; }
.clear-title { font-size: 22px; color: var(--yellow); text-shadow: 2px 2px 0 var(--rust-d); letter-spacing: 2px; }
html[lang="en"] .clear-title { font-family: var(--font-en); font-size: 15px; line-height: 1.6; }
.clear-time { font: bold 72px/1.1 var(--font); font-variant-numeric: tabular-nums; color: #fff4d8; text-shadow: 4px 4px 0 var(--rust), 7px 7px 0 var(--night); margin: 4px 0; }
.clear-sub { font-size: 20px; }
.clear-rank { display: flex; flex-direction: column; gap: 2px; font-size: 20px; color: #9be36d; margin-top: 6px; min-height: 0; }
.nick-form { margin-top: 14px; text-align: left; display: grid; gap: 6px; }
.nick-form label { font-size: 15px; opacity: .9; }
.nick-row { display: flex; gap: 8px; }
.nick-row input { flex: 1; min-width: 0; background: var(--parch); color: var(--ink); border: 3px solid var(--night); padding: 8px 10px; min-height: 52px; font-size: 18px; border-radius: 2px; }
.nick-row input::placeholder { color: #8a7a5a; }
.nick-row .btn { white-space: nowrap; padding: 8px 10px; font-size: 16px; flex: none; }
.nick-row input { width: 0; }
.msg { font-size: 16px; min-height: 1.4em; }
.msg.err { color: #ffb4a0; }
.board-title { margin: 18px 0 8px; font-size: 24px; font-weight: normal; color: var(--parch); text-shadow: 2px 2px 0 var(--night); }
.board-sub { margin: 20px 0 8px; font-size: 18px; font-weight: normal; }
.tabs { display: flex; gap: 6px; margin-bottom: -3px; position: relative; z-index: 1; }
.tab { background: var(--indigo3); color: var(--parch); border: 3px solid var(--night); border-bottom: 0; padding: 8px 18px; min-height: 44px; font-size: 17px; }
.tab.on { background: var(--parch); color: var(--ink); }
.board-body { background: var(--parch); color: var(--ink); border: 3px solid var(--night); padding: 8px 8px 12px; min-height: 120px; }
.rowhead, .row { display: grid; grid-template-columns: 30px 1fr 64px 38px 46px; gap: 6px; align-items: center; padding: 6px 6px; font-size: 16px; }
.rowhead { font-size: 13px; color: #6a5a45; border-bottom: 2px solid #c9b078; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px dashed #c9b078; min-height: 44px; }
.row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .rk, .row .tm, .row .gn, .row .lv, .rowhead .tm, .rowhead .gn, .rowhead .lv, .rowhead .rk { text-align: right; font-variant-numeric: tabular-nums; }
.row.mine { background: #f7cf9a; box-shadow: inset 4px 0 0 var(--rust); font-weight: bold; color: #5a1a0e; }
.gap { text-align: center; color: #8a7a5a; line-height: 1; padding: 2px 0; }
.total { margin: 8px 4px 0; font-size: 14px; color: #6a5a45; text-align: right; }
.skeleton .row span { background: #d9c690; min-height: 18px; display: block; border-radius: 2px; }
.empty { text-align: center; padding: 10px 6px; } .empty canvas { width: 80px; height: 80px; } .empty p { font-size: 18px; margin: 6px 0 14px; }
.graves-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.grave-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.25); padding: 4px 10px; min-height: 44px; font-size: 16px; }
.grave-row canvas { width: 32px; height: 32px; flex: none; opacity: .95; } .graves-list .none { opacity: .75; padding: 6px 4px; }
.board-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.board-foot .btn { flex: 1; min-width: 140px; }

/* ---- 7. 設定、通知 ---- */
#sheet-bg { position: fixed; inset: 0; background: rgba(8, 7, 18, .6); z-index: 50; }
#sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(100%, 480px); z-index: 51; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 14px; animation: sheetup .22s ease-out; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; } .sheet-head h2 { margin: 0; font-size: 22px; font-weight: normal; }
#sheet .chip { background: var(--parch2); color: var(--ink); border-color: var(--ink); }
.row, #sheet .row { }
#sheet .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; padding: 0; border: 0; min-height: 0; background: none; }
#sheet .row.col { flex-direction: column; align-items: stretch; }
.seg { display: flex; } .seg button { background: var(--parch2); color: var(--ink); border: 3px solid var(--ink); padding: 8px 16px; min-height: 48px; font-size: 17px; margin-left: -3px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--parch); }
.seg button.danger { background: #8e2a1c; color: #fff4d8; }
#reset-confirm p { margin: 0 0 8px; }
#toast { position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%); background: var(--parch); color: var(--ink); border: 4px solid var(--night); padding: 10px 16px; font-size: 18px; z-index: 60; max-width: 90vw; text-align: center; animation: pop .2s; }

/* ---- 動き ---- */
@keyframes shake { 0%,100% { transform: translate(0); } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(3px, -1px); } }
@keyframes nudge { 50% { transform: translate(1px, 1px); } }
/* 手ざわり: 勇者は攻撃のとき前へ一歩出て戻る、敵は攻撃のとき揺れて少し前へ出る（transform だけ。軽く） */
@keyframes lunge { 0% { transform: translate(0, 0); } 40% { transform: translate(34px, -14px); } 100% { transform: translate(0, 0); } }
@keyframes foeatk { 0% { transform: translate(0, 0); } 15% { transform: translate(-6px, 0); } 30% { transform: translate(-22px, 10px); } 45% { transform: translate(6px, 0); } 60% { transform: translate(-5px, 0); } 80% { transform: translate(3px, 0); } 100% { transform: translate(0, 0); } }
@keyframes foehit { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-8px); } 70% { transform: translateX(8px); } }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes rise { from { transform: translate(-50%, 0); opacity: 1; } 70% { opacity: 1; } to { transform: translate(-50%, -38px); opacity: 0; } }
@keyframes flashw { from { opacity: .8; } to { opacity: 0; } }
@keyframes gainflash { from { opacity: .95; } to { opacity: 0; } }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes glow { 50% { box-shadow: 0 5px 0 var(--night), 0 0 0 5px rgba(224, 165, 38, .55); } }
@keyframes dangerblink { 0% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sheetup { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes rise-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- PC（幅 900px 以上）: 左に状態、中央にマップ 576px、右に会話・ログ・墓碑 ---- */
@media (min-width: 900px) {
  :root { --foe: 300px; }
  #bhero-cv { width: 144px; height: 144px; left: 24px; bottom: 24px; }
  @keyframes lunge { 0% { transform: translate(0, 0); } 40% { transform: translate(60px, -22px); } 100% { transform: translate(0, 0); } }
  #game { max-width: none; grid-template-columns: 240px minmax(0, 620px) 360px; grid-template-rows: 52px auto; grid-template-areas: "bar bar bar" "hud stage side"; justify-content: center; align-content: center; column-gap: 20px; row-gap: 14px; height: 100dvh; background: var(--indigo); }
  #bar { grid-area: bar; box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(0 -100vmax); }
  #stage { grid-area: stage; width: 100%; height: auto; aspect-ratio: 1; max-height: calc(100dvh - 90px); align-self: start; box-shadow: 0 0 0 4px var(--night), 0 0 0 7px var(--brown); }
  #hud { grid-area: hud; flex-direction: column; align-items: stretch; align-self: start; gap: 12px; padding: 16px; background: var(--indigo2); border: 3px solid var(--night); height: auto; }
  .hud-hp { flex-direction: column; align-items: stretch; gap: 4px; } .hud-hp .hpbar { flex: none; height: 28px; } .hp-label { font-size: 15px; }
  .stat { font-size: 20px; display: block; } .stat.time { text-align: left; }
  .pc-only { display: block; }
  #side { display: flex; flex-direction: column; gap: 12px; grid-area: side; min-height: 0; align-self: start; max-height: min(640px, calc(100dvh - 90px)); }
  #panel { padding: 0; min-height: 232px; flex: none; }
  #pad { display: block; height: auto; } #dpad, #padr { display: none; } .hint { text-align: left; font-size: 15px; margin: 0; opacity: .9; }
  #talk { position: relative; left: auto; right: auto; bottom: auto; max-height: 380px; min-height: 200px; }
  #bpanel #bmsg { min-height: 100px; }
  #log, #graves-side { padding: 10px 14px; font-size: 14px; } .log-title { font-size: 13px; color: var(--rust-d); margin-bottom: 4px; }
  #log-list, #graves-side-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } #log-list li { line-height: 1.35; }
  #log { max-height: 250px; overflow: hidden; }
  #hud .gear { white-space: normal; font-size: 16px; line-height: 1.3; }
  .cmd { min-width: 0; }
  #cmds, .items-row { grid-template-columns: 1.2fr 1fr 1fr; }
  .toast { bottom: 12%; }
  html.danger #game::after { box-shadow: inset 0 0 0 6px rgba(214, 69, 42, .9); }
  #s-title { max-width: 760px; }
  .board-wrap { padding-top: 28px; }
}
@media (min-width: 900px) and (hover: none), (min-width: 900px) and (pointer: coarse) {
  #dpad { display: grid; } #padr { display: flex; } #pad { display: grid; }
}
@media (max-height: 700px) and (max-width: 899px) {
  #s-title { padding-top: 8px; } .logo { margin: 8px 0 4px; } .king-row { margin-top: 4px; } .tagline { margin-bottom: 10px; }
  #dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); }
  .okbtn { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001s !important; transition-duration: .001s !important; } }

/* ---- 小さい画面（高さ 700px 以下の縦）: 帯と HUD と十字キーを縮めて、スクロールなしで収める ---- */
@media (max-height: 700px) and (max-width: 899px) and (orientation: portrait) {
  #bar { height: 40px; padding-block: 2px; } #bar .gen { font-size: 15px; } #bar .place { font-size: 14px; } #bar .chip { min-height: 34px; padding-block: 0; }
  #hud { min-height: 0; padding: 4px 12px; row-gap: 2px; border-block-width: 2px; }
  #hud .hpbar { height: 20px; } .hpbar .num { font-size: 13px; }
  #hud .gear { display: none; } #hud .stat { font-size: 14px; }
  #panel { padding: 4px 10px calc(6px + env(safe-area-inset-bottom)); min-height: 190px; }
  #bhero-cv { width: 80px; height: 80px; }
  .hint { font-size: 12px; min-height: 16px; margin: 0 4px 2px; }
  #dpad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
  #dpad::before { margin: 11px; }
  .okbtn { width: 68px; height: 68px; font-size: 17px; }
  #padr { gap: 6px; } #btn-menu { min-height: 34px; padding-block: 2px; }
  #bpanel { gap: 6px; } #bmsg { padding: 8px 12px; } #bmsg p { font-size: 15px; line-height: 1.35; }
  #bmsg-text { min-height: calc(3 * 1.35em); }
  .cmd { min-height: 56px; min-width: 0; font-size: 19px; } .cmd.attack { font-size: 21px; }
  #cmds, .items-row { grid-template-columns: 1.2fr 1fr 1fr; gap: 6px; }
  .items-row { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  #bitems { gap: 6px; } .itembtn small { display: none; }
  .foe-head { top: 6px; } #foe-name { font-size: 17px; }
  #talk { min-height: 120px; max-height: calc(100dvh - 90px); }
  #s-title { padding-top: 6px; } .logo { margin: 6px 0 2px; font-size: 34px; } .king-row { margin-top: 2px; min-height: 100px; } #king-cv { width: 104px; height: 104px; } .tagline { margin-bottom: 8px; }
  #run-cv { width: 216px; height: 108px; }
}

/* ---- 横画面（高さ 500px 以下、幅 900px 未満）: 左にマップ、右に状態と操作。高さは画面に合わせる ---- */
@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) {
  :root { --foe: 160px; }
  #game { max-width: none; grid-template-columns: auto 1fr; grid-template-rows: 34px auto minmax(0, 1fr); grid-template-areas: "bar bar" "stage hud" "stage side"; column-gap: 10px; }
  #bar { grid-area: bar; height: 34px; padding-block: 0; } #bar .chip { min-height: 30px; padding-block: 0; } #bar .gen, #bar .place { font-size: 14px; }
  #stage { grid-area: stage; --s: calc(100dvh - 34px - 6px); width: var(--s); height: var(--s); margin: 3px 0 3px env(safe-area-inset-left); align-self: start; }
  #hud { grid-area: hud; min-height: 0; padding: 4px 10px; row-gap: 2px; border-width: 2px; margin-right: env(safe-area-inset-right); }
  #hud .hpbar { height: 20px; } #hud .gear { display: none; } #hud .stat { font-size: 14px; } .hpbar .num { font-size: 13px; }
  #side { grid-area: side; display: block; min-height: 0; }
  #panel { position: static; padding: 4px 10px 4px 0; height: 100%; min-height: 0; }
  #bhero-cv { width: 64px; height: 64px; }
  .hint { font-size: 12px; min-height: 16px; margin: 0 4px 2px; }
  #pad { height: auto; } #dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); } #dpad::before { margin: 12px; }
  .okbtn { width: 72px; height: 72px; }
  #padr { gap: 8px; } #btn-menu { min-height: 34px; padding-block: 2px; }
  #bpanel { gap: 6px; justify-content: flex-start; height: auto; }
  #bmsg { padding: 8px 12px; } #bmsg p { font-size: 15px; line-height: 1.35; } #bmsg-text { min-height: calc(3 * 1.35em); }
  .cmd { min-height: 54px; min-width: 0; font-size: 19px; } #cmds, .items-row { gap: 6px; } .items-row { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); } .itembtn small { display: none; }
  .foe-head { top: 6px; } #foe-name { font-size: 16px; }
  #talk { left: 10px; right: 10px; bottom: calc(6px + env(safe-area-inset-bottom)); min-height: 0; max-height: calc(100dvh - 44px); padding: 12px 16px 16px; }
  .talk-text { font-size: 16px; min-height: 0; } #talk.is-shop { max-height: calc(100dvh - 44px); }
  #s-title { padding-top: 4px; padding-bottom: 6px; max-width: none; } .chips { position: absolute; top: 4px; right: 8px; }
  .logo { margin: 2px 0; font-size: 28px; } html[lang="en"] .logo { font-size: 20px; } .king-row { margin-top: 0; min-height: 0; max-width: 520px; } #king-cv { width: 56px; height: 56px; } .bubble { font-size: 16px; padding: 6px 10px; min-height: 0; margin-bottom: 8px; } html[lang="en"] .bubble { font-size: 14px; }
  #run-cv { display: none; } .tagline { margin: 2px 0 6px; font-size: 14px; }
  .title-btns { flex-direction: row; max-width: 520px; gap: 8px; } .btn.big { min-height: 48px; font-size: 18px; } .title-btns .link { padding: 4px; min-height: 36px; font-size: 14px; }
  #s-grave { padding-top: 6px; padding-bottom: 6px; } .moon { display: none; }
  .stone { margin-top: 4px; } .stone-in { min-height: 0; padding: 14px 16px 10px; } .stone-in::after { display: none; } .stone hr { margin: 6px 8px; }
  .stone-gen { font-size: 24px; } .stone-age { font-size: 16px; } .stone-cause { font-size: 16px; } .stone-left { font-size: 14px; margin-top: 4px; }
  #grave-hero { display: none; } .grave-foot { padding-top: 6px; } .grave-total { font-size: 14px; margin-bottom: 6px; } .grave-foot .btn.big { min-height: 44px; }
}

/* ---- 周回1の追加: 理由の小さな字、墓碑の急かし、討伐の王様、持ち物 ---- */
.cmd { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cmd .why { font-size: 12px; line-height: 1.1; opacity: .9; }
.grave-rush { font-size: 22px; color: #ffd0c0; text-shadow: 2px 2px 0 var(--night); margin-bottom: 8px; line-height: 1.3; animation: pop .4s ease-out .3s backwards; }
html[lang="en"] .grave-rush { font-size: 17px; }
.clear-king { margin: 8px auto 0; max-width: 20em; font-size: 20px; color: #ffd0c0; text-shadow: 2px 2px 0 var(--night); }
.inv { background: var(--parch2); border: 3px solid var(--ink); padding: 8px 12px; }
.inv-title { font-size: 13px; color: var(--rust-d); margin-bottom: 4px; }
.inv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.inv li { display: flex; justify-content: space-between; gap: 10px; font-size: 17px; }
.inv li span:last-child { font-variant-numeric: tabular-nums; color: var(--rust-d); white-space: nowrap; }
@media (max-height: 700px) { .inv li { font-size: 15px; } .inv { padding: 6px 10px; } }
@media (max-height: 500px) and (orientation: landscape) { #sheet { max-height: 100dvh; overflow-y: auto; gap: 8px; } .grave-rush { font-size: 16px; margin-bottom: 4px; } }

/* ---- 周回2: 引き継ぎの表示、結果のコピー、店の一覧の続きの印 ---- */
.legacy { margin: 4px 0 14px; max-width: 24em; padding: 8px 12px; font-size: 17px; line-height: 1.45; color: var(--ink); background: var(--parch); border: 3px solid var(--night); box-shadow: 0 3px 0 var(--night); text-align: left; overflow-wrap: break-word; }
html[lang="en"] .legacy { font-size: 15px; }
.copy-manual { display: block; width: 100%; margin-top: 14px; padding: 8px 10px; font: 16px/1.4 var(--font); color: var(--ink); background: var(--parch); border: 3px solid var(--night); border-radius: 2px; resize: none; }
.btn.done { background: #cfe8b0; }
#shop { position: relative; }
#shop.more-below #shop-list { -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
#shop.more-below::after { content: "▼"; position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); color: var(--rust-d); font-size: 16px; line-height: 1; pointer-events: none; animation: blink 1s steps(2) infinite; }
@media (max-height: 700px) and (max-width: 899px) and (orientation: portrait) { .legacy { margin-bottom: 8px; font-size: 14px; padding: 5px 10px; } html[lang="en"] .legacy { font-size: 12px; } }
@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) { .legacy { margin: 2px 0 6px; font-size: 13px; padding: 4px 8px; max-width: 520px; } html[lang="en"] .legacy { font-size: 11px; } }
.unit { font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: .88em; letter-spacing: 0; }
/* 町・フィールドの通知は十字キーに重ならないよう、地図の上のほうに出す（スマホ） */
@media (max-width: 899px) { body[data-screen="game"] #toast { bottom: auto; top: 22%; } }
@media (max-width: 899px) and (orientation: landscape) { body[data-screen="game"] #toast { top: 40%; max-width: 60vw; font-size: 15px; } }
/* PC: 上の帯を画面の上端に置き、右の欄を地図の上端にそろえる（帯の上の空きと、右の空の操作欄をなくす） */
@media (min-width: 900px) {
  #game { align-content: start; }
  #panel { min-height: 0; }
  #pad:not([hidden]) { min-height: 0; }
  #side { max-height: min(640px, calc(100dvh - 90px)); }
}
.btn.copy { margin: 10px auto 0; width: 100%; max-width: 360px; min-height: 52px; }
.copy-manual { margin-top: 8px; }
/* 横画面の討伐: 勇者の絵と大きな時間を小さくして、「順位に載せる」まで一画面で見えるようにする */
@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) {
  .board-wrap { padding-top: 6px; max-width: 760px; }
  #clear-head { padding: 0 0 6px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: center; text-align: center; }
  #clear-hero, .clear-title, .clear-king { display: none; }
  .clear-time { font-size: 44px; margin: 0; text-shadow: 3px 3px 0 var(--rust), 5px 5px 0 var(--night); }
  .clear-sub, .clear-rank { font-size: 15px; margin-top: 0; }
  .clear-time, .clear-sub, .clear-rank, .btn.copy { grid-column: 1; }
  .btn.copy { margin-top: 6px; min-height: 40px; font-size: 15px; max-width: none; }
  .nick-form { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
  .copy-manual { grid-column: 1; }
}
#talk.is-shop .more { display: none; }
@media (min-width: 900px) {
  /* 店の窓が右の欄を使い切って「ことば」が細い線になるのを防ぐ */
  #talk { max-height: 460px; }
  #log { min-height: 96px; flex: 0 1 auto; }
  #graves-side { flex: none; }
}
@media (min-width: 900px) { #talk { max-height: min(400px, calc(100dvh - 330px)); } }
@media (min-width: 900px) { #talk.is-shop { max-height: min(400px, calc(100dvh - 330px)); } }

/* 折り返し: 日本語は文節で、英語は単語で折る（単語・語の途中で切らない）。長すぎる語だけ最後の手段で切る */
:root { word-break: normal; overflow-wrap: break-word; }
html[lang="ja"] .stone-cause, html[lang="ja"] .stone-left, html[lang="ja"] .legacy, html[lang="ja"] .grave-rush, html[lang="ja"] .talk-text, html[lang="ja"] .bubble, html[lang="ja"] .tagline { word-break: auto-phrase; line-break: strict; }
html[lang="en"] .stone-cause, html[lang="en"] .stone-left, html[lang="en"] .legacy, html[lang="en"] .grave-rush, html[lang="en"] .talk-text, html[lang="en"] .bubble, html[lang="en"] .tagline { word-break: normal; hyphens: manual; }
.stone-cause, .stone-left, .legacy, .grave-rush, .tagline { text-wrap: balance; }
.inv .inv-head { display: block; margin-top: 6px; padding-top: 4px; border-top: 2px dashed var(--ink); font-size: 14px; color: var(--rust-d); }
.inv .inv-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 900px) { #run-cv { width: 384px; height: 192px; } #king-cv { width: 160px; height: 160px; } }

/* 墓碑の ⚙（持ち物の2区画を開く） */
.grave-chips { position: absolute; top: 8px; right: 10px; z-index: 3; }

/* 英語の引き継ぎあり開始画面の縦のはみ出し（8px/5px）を詰める */
html[lang="en"] .legacy { margin-bottom: 8px; }
@media (max-height: 700px) and (max-width: 899px) and (orientation: portrait) { html[lang="en"] .legacy { margin-top: 0; margin-bottom: 6px; } html[lang="en"] #run-cv { margin-top: 0; } html[lang="en"] .king-row { margin-top: 0; } }
#toast { width: max-content; max-width: min(90vw, 460px); text-wrap: balance; overflow-wrap: anywhere; }
html[lang="ja"] #toast { word-break: auto-phrase; }

/* 王様のトースト: 顔（32px のドット絵を2倍）を左に */
#toast.with-face { display: flex; align-items: center; gap: 10px; text-align: left; }
#toast .toast-face { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }

/* PC の墓碑: 墓石と「次へ」の間の何もない帯をなくす。墓石を中央に、勇者は墓石の下の中央、「次へ」は続けて置く */
@media (min-width: 900px) and (min-height: 600px) {
  #s-grave { justify-content: center; gap: 4px; }
  #s-grave .stone { margin-top: 0; }
  #grave-hero { position: static; width: 128px; height: 128px; margin: 14px auto 0; image-rendering: pixelated; }
  #s-grave .grave-foot { margin-top: 12px; padding-top: 0; max-width: 420px; }
}

/* PC: 歩いているとき、操作のヒントは「ことば」「墓碑」の下に置き、「ことば」の箱の上端を地図の上端にそろえる */
@media (min-width: 900px) {
  #game[data-panel="pad"] #panel { order: 3; min-height: 0; }
  #game[data-panel="pad"] #log { order: 1; } #game[data-panel="pad"] #graves-side { order: 2; }
}

/* ---- 周回7: 戦闘のコマンド4つ（防具があると「まもる」）、動きのはっきり化 ---- */
.cmd.guard { background: #7d9db5; color: #10202c; }
#cmds.four { grid-template-columns: 1fr 1fr; }
#cmds.four .cmd { min-height: 64px; }
#cmds.four .cmd.attack { order: 0; } #cmds.four .cmd.guard { order: 1; } #cmds.four .cmd[data-cmd="1"] { order: 2; } #cmds.four .cmd.flee { order: 3; }
@media (max-height: 700px) and (max-width: 899px) { #cmds.four .cmd { min-height: 52px; } }
@media (max-height: 500px) and (orientation: landscape) { #cmds.four { grid-template-columns: 1.2fr 1fr 1fr 1fr; } #cmds.four .cmd.attack { order: 0; } #cmds.four .cmd[data-cmd="1"] { order: 1; } #cmds.four .cmd.flee { order: 2; } #cmds.four .cmd.guard { order: 3; } #cmds.four .cmd { min-height: 50px; } }
/* 勇者の攻撃は 200ms で前へ一歩（はっきり見える幅）→ 戻る。敵の攻撃は敵が大きく揺れて前へ出て、画面が震え、体力の帯が赤く点滅する */
@keyframes lunge { 0% { transform: translate(0, 0); } 48% { transform: translate(var(--lunge, 56px), -16px); } 70% { transform: translate(calc(var(--lunge, 56px) * .85), -12px); } 100% { transform: translate(0, 0); } }
#bhero-cv.lunge { animation: lunge .42s ease-out; }
@keyframes foeatk2 { 0% { transform: translate(0, 0) scale(1); } 12% { transform: translate(-8px, 0) rotate(2deg); } 30% { transform: translate(-44px, 14px) scale(1.12); } 46% { transform: translate(10px, 0) rotate(-3deg); } 62% { transform: translate(-8px, 0) rotate(2deg); } 80% { transform: translate(4px, 0); } 100% { transform: translate(0, 0) scale(1); } }
#foe-cv.atk { animation: foeatk2 .42s; }
@keyframes hpred { 0%, 100% { filter: none; } 20%, 60% { filter: brightness(1.7) saturate(2.4) hue-rotate(-30deg); } 40%, 80% { filter: none; } }
@keyframes hpredbg { 0%, 100% { background: #3b3556; } 20%, 60% { background: #d6452a; } 40%, 80% { background: #3b3556; } }
.hpbar.hit { animation: shake .3s, hpredbg .5s; }
.hpbar.hit .fill { animation: hpred .5s; }
@keyframes guardup { 0% { filter: none; } 30% { filter: drop-shadow(0 0 6px #9fd4ff) brightness(1.4); transform: translate(-6px, 0) scale(1.1); } 100% { filter: none; transform: none; } }
#bhero-cv.guarding { animation: guardup .52s ease-out; }
@keyframes refreshtalk { 0% { box-shadow: 0 0 0 0 rgba(224, 165, 38, .9); } 100% { box-shadow: 0 0 0 14px rgba(224, 165, 38, 0); } }
#talk.refresh { animation: refreshtalk .5s ease-out; }
@media (max-width: 899px) { #stage { --lunge: 64px; } }

/* 墓碑の「歴代の勇者」: 狭い縦画面（墓石と「次へ」の間の空き）にだけ置く。PC と低い画面では隠す */
.lineage { margin: 26px 0 0; display: grid; gap: 4px; justify-items: center; }
.lin-row { display: flex; gap: 6px; justify-content: center; }
.lin-cell { display: grid; justify-items: center; gap: 2px; padding: 4px 4px 2px; background: rgba(0,0,0,.28); border: 2px solid transparent; }
.lin-cell.now { border-color: var(--yellow); background: rgba(224,165,38,.18); }
.lin-cell canvas { width: 56px; height: 56px; image-rendering: pixelated; }
.lin-cell span { font-size: 13px; color: var(--parch); }
.lin-cap { font-size: 13px; color: #b9b2d6; }
@media (min-width: 900px), (max-height: 760px) { .lineage { display: none; } }
@media (max-width: 899px) and (min-height: 761px) { #grave-hero { display: none; } } /* 歴代の列が出る画面では、右下の小さな墓標と重なるので隠す */
/* 急ぎ賃の残り時間（HUD）。スマホでは 1 行を使い、段が下がる瞬間は短く点滅 */
#hud .rush { color: var(--yellow); font-size: 15px; }
#hud .rush.drop { animation: rushdrop .9s ease-out; }
@keyframes rushdrop { 0%, 50% { color: #ff6a4d; transform: scale(1.12); } 100% { color: var(--yellow); transform: none; } }
@media (max-width: 899px) { #hud .rush { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { #hud .rush.drop { animation: none; } }
#toast .toast-text { white-space: pre-line; }

/* ---- 周回8: 大技の構え（橙の警告・敵が膨らむ・まもるが光る）、大技の被害（赤）、1280 の急ぎ賃 ---- */
#bmsg p.bl.warn { opacity: 1; color: #9a3a00; font-weight: bold; } /* 構えは濃い橙の茶。クリーム色の欄でも読める（周回9） */
#bmsg p.bl.warn.spent { opacity: .4; color: inherit; font-weight: normal; } /* 大技が終わったら薄く消す */
#bmsg p.bl.heavy { color: #b3201a; font-weight: bold; }
#log-list li.warn { color: #9a3a00; font-weight: bold; } #log-list li.heavy { color: #b3201a; font-weight: bold; }
@keyframes stancepulse { 0%, 100% { transform: scale(1.14); filter: drop-shadow(0 0 5px #ff5a2a) saturate(1.3); } 50% { transform: scale(1.24); filter: drop-shadow(0 0 12px #ff3a1a) saturate(1.7) brightness(1.1); } }
#foe-cv.stance { animation: stancepulse .7s ease-in-out infinite; transform-origin: 50% 85%; }
#foe-cv.stance.atk { animation: foeatk2 .42s; }
@keyframes guardglow { 0%, 100% { box-shadow: 0 5px 0 var(--night), 0 0 0 0 rgba(159, 212, 255, .0); filter: none; } 50% { box-shadow: 0 5px 0 var(--night), 0 0 14px 5px rgba(159, 212, 255, .95); filter: brightness(1.18); } }
#cmds.stance .cmd.guard { animation: guardglow .8s ease-in-out infinite; border-color: #e9f6ff; }
#cmds.stance .cmd.guard small { color: #0b2a44; font-weight: bold; }
@media (prefers-reduced-motion: reduce) {
  #foe-cv.stance { animation: none; transform: scale(1.18); filter: drop-shadow(0 0 8px #ff3a1a); }
  #cmds.stance .cmd.guard { animation: none; box-shadow: 0 5px 0 var(--night), 0 0 0 4px #9fd4ff; }
}
@media (min-width: 900px) { #hud .rush { font-size: 24px; font-weight: bold; line-height: 1.25; padding: 6px 10px; background: rgba(224, 165, 38, .16); border: 2px solid var(--yellow); } }
/* 1280 の墓碑にも歴代の列を出す（高さが足りる画面のみ）。列が出るので、墓石の下の大きな墓標は隠す */
@media (min-width: 900px) and (min-height: 761px) { .lineage { display: grid; margin-top: 18px; } #grave-hero { display: none; } .lin-cell canvas { width: 64px; height: 64px; } .lin-cell span { font-size: 15px; } .lin-cap { font-size: 15px; } }
@media (min-width: 900px) { #hud .rush { font-size: 20px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; min-width: 0; box-sizing: border-box; max-width: 100%; } }

/* ---- 周回9: 地図の上の急ぎ賃の棒（幅いっぱい、60秒で縮む。段が下がると色と額が変わる） ---- */
.rushbar { position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 5; background: rgba(14, 13, 26, .88); border-bottom: 3px solid var(--night); overflow: hidden; pointer-events: none; }
.rushbar .rb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--yellow); transition: width .26s linear, background-color .3s; }
.rushbar[data-stage="30"] .rb-fill { background: #e8792b; }
.rushbar[data-stage="10"] { background: #5a1e18; }
.rushbar .rb-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 8px; font: bold 17px/1 var(--font); color: #fff; white-space: nowrap; text-shadow: 1px 1px 0 var(--night), -1px 1px 0 var(--night), 1px -1px 0 var(--night), -1px -1px 0 var(--night); }
.rushbar.drop { animation: rushbardrop .9s ease-out; }
@keyframes rushbardrop { 0%, 40% { filter: brightness(1.5) saturate(1.6); } 100% { filter: none; } }
#stage.rush-on .foe-head { top: 40px; }
@media (max-width: 899px) { #hud .rush { display: none; } }
html[lang="en"] .rushbar .rb-text { font-size: 16px; }
@media (min-width: 900px) { .rushbar { height: 40px; } .rushbar .rb-text { font-size: 24px; } html[lang="en"] .rushbar .rb-text { font-size: 22px; } #stage.rush-on .foe-head { top: 52px; } }
@media (max-height: 500px) and (orientation: landscape) { .rushbar { height: 24px; } .rushbar .rb-text { font-size: 14px; } #stage.rush-on .foe-head { top: 30px; } }
@media (prefers-reduced-motion: reduce) { .rushbar .rb-fill { transition: none; } .rushbar.drop { animation: none; } }

/* ---- 周回10: 急ぎ賃の棒 最後の10秒の赤点滅、額の落ち、1280 では棒だけ ---- */
.rushbar.warn { animation: rushwarn .5s steps(1, end) infinite; }
.rushbar.warn .rb-fill { background: #e03a2c; }
@keyframes rushwarn { 0% { background: #7a1c14; } 50% { background: rgba(14, 13, 26, .88); } }
.rushbar .rb-text.fall { animation: rbfallin .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rbfallin { 0% { transform: translateY(-110%); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; } }
.rushbar .rb-old { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 8px; font: inherit; font: bold 17px/1 var(--font); color: #ffb09a; white-space: nowrap; text-decoration: line-through; text-shadow: 1px 1px 0 var(--night); animation: rbfallout .7s ease-in forwards; }
html[lang="en"] .rushbar .rb-old { font-size: 16px; }
@keyframes rbfallout { 0% { transform: none; opacity: 1; } 100% { transform: translateY(120%) rotate(3deg); opacity: 0; } }
@media (min-width: 900px) { #hud .rush { display: none; } .rushbar .rb-old { font-size: 24px; } html[lang="en"] .rushbar .rb-old { font-size: 22px; } }
@media (max-height: 500px) and (orientation: landscape) { .rushbar .rb-old { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .rushbar.warn { animation: none; background: #7a1c14; } .rushbar .rb-text.fall { animation: none; } .rushbar .rb-old { display: none; } }