/* app.css — マイホムンクルス 遠征UI（モバイル375px基準・ダーク・夜の巣） */

:root {
  --bg: #0e0f18;
  --bg-soft: #14152280;
  --panel: #171929;
  --panel-2: #1d1f33;
  --line: #2b2e45;
  --line-soft: #23253a;
  --ink: #e9e6dc;
  --sub: #9aa0b6;
  --faint: #6a708a;
  --gold: #d9b36a;
  --gold-dim: #a98a4e;
  --danger: #e06a7a;
  --ok: #7ac86a;
  --breath: #67d5e8;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(120% 90% at 50% -10%, #191b2e 0%, var(--bg) 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

/* ============ 上下バー ============ */
#topbar {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(14,15,24,.96) 70%, rgba(14,15,24,0));
  padding: env(safe-area-inset-top) 0 6px;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 2px; }
#top-title { font-family: var(--serif); font-size: 19px; letter-spacing: .14em; color: var(--ink); }
.ghost-btn {
  font-size: 13px; color: var(--sub); border: 1px solid var(--line);
  padding: 5px 12px; border-radius: 999px; background: var(--panel);
}
.ghost-btn:active { background: var(--panel-2); }

#screen { flex: 1; padding: 6px 14px calc(84px + env(safe-area-inset-bottom)); }

#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: center; gap: 0;
  background: linear-gradient(0deg, #0b0c14 78%, rgba(11,12,20,0));
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; max-width: 108px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--faint); letter-spacing: .06em;
  padding: 7px 0 5px; border-radius: 12px;
}
.tab.on { color: var(--gold); }
.tab-ic { width: 20px; height: 20px; opacity: .85; background: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; }
.ic-map    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2zm0 2.2 6 2v13.6l-6-2V5.2z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2zm0 2.2 6 2v13.6l-6-2V5.2z' fill='%23000'/%3E%3C/svg%3E"); }
.ic-book   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h13a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 2v14h11V5H7zM5 5v14h1V5H5z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h13a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 2v14h11V5H7zM5 5v14h1V5H5z' fill='%23000'/%3E%3C/svg%3E"); }
.ic-flag   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h2v20H6V2zm4 2h9l-2.5 4L19 12h-9V4z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h2v20H6V2zm4 2h9l-2.5 4L19 12h-9V4z' fill='%23000'/%3E%3C/svg%3E"); }
.ic-shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3zm0 2.2 6 2.2V11c0 4-2.6 7.6-6 9-3.4-1.4-6-5-6-9V6.4l6-2.2z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3zm0 2.2 6 2.2V11c0 4-2.6 7.6-6 9-3.4-1.4-6-5-6-9V6.4l6-2.2z' fill='%23000'/%3E%3C/svg%3E"); }
.ic-sun    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0-6 1.5 4h-3L12 1zm0 22-1.5-4h3L12 23zM1 12l4-1.5v3L1 12zm22 0-4 1.5v-3L23 12zM4.2 4.2l3.9 1.8-2.1 2.1-1.8-3.9zm15.6 15.6-3.9-1.8 2.1-2.1 1.8 3.9zM19.8 4.2 18 8.1 15.9 6l3.9-1.8zM4.2 19.8 6 15.9 8.1 18l-3.9 1.8z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0-6 1.5 4h-3L12 1zm0 22-1.5-4h3L12 23zM1 12l4-1.5v3L1 12zm22 0-4 1.5v-3L23 12zM4.2 4.2l3.9 1.8-2.1 2.1-1.8-3.9zm15.6 15.6-3.9-1.8 2.1-2.1 1.8 3.9zM19.8 4.2 18 8.1 15.9 6l3.9-1.8zM4.2 19.8 6 15.9 8.1 18l-3.9 1.8z' fill='%23000'/%3E%3C/svg%3E"); }

/* ============ 共通部品 ============ */
.section-title {
  font-family: var(--serif); font-size: 14px; letter-spacing: .2em; color: var(--gold);
  margin: 18px 2px 10px; display: flex; align-items: center; gap: 10px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.lead-note { color: var(--sub); font-size: 12.5px; margin: 2px 2px 8px; }

.card {
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 10px;
  position: relative;
}

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--sub); background: #14162490;
  letter-spacing: .04em; white-space: nowrap;
}
.chip.el { color: var(--el, var(--sub)); border-color: color-mix(in srgb, var(--el, #888) 45%, transparent); }
.chip.gold { color: var(--gold); border-color: #6a5426; }
.chip.hard { color: var(--danger); border-color: #6a3040; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; padding: 11px 16px; font-size: 14px; letter-spacing: .05em;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  transition: transform .06s ease;
}
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(170deg, #3d3421, #2a2416);
  border-color: #6a5426; color: var(--gold);
}
.btn.small { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn-row { display: flex; gap: 8px; margin-top: 12px; }
.btn-row .btn { flex: 1; }

/* ============ 巣カード ============ */
.nest-card { display: flex; flex-direction: column; gap: 8px; }
.nest-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nest-name { font-family: var(--serif); font-size: 17px; letter-spacing: .08em; }
.nest-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.nest-meta { color: var(--sub); font-size: 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.nest-meta b { color: var(--ink); font-weight: 600; }
.nest-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nest-actions .btn { flex: 1; min-width: 96px; }
.nest-kid { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; }
.nest-kid canvas { width: 44px; height: 44px; }
.nest-egg {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 40px;
  background: radial-gradient(60% 55% at 50% 42%, #2e3150, #1a1c30 75%);
  border: 1px solid var(--line); border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
}
.nest-egg::after {
  content: ""; position: absolute; inset: 8px 9px auto 9px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffffff26, transparent 70%);
}

/* ============ 孵化演出 ============ */
.hatch-stage {
  min-height: 66dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 6px; padding: 12px 6px;
}
.hatch-lines { min-height: 128px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.hatch-line {
  font-family: var(--serif); font-size: 15px; color: var(--ink); letter-spacing: .06em;
  opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease;
}
.hatch-line.show { opacity: 1; transform: none; }
.hatch-sprite-wrap { position: relative; width: 192px; height: 192px; margin: 10px 0 4px; }
.hatch-sprite-wrap canvas { width: 192px; height: 192px; }
.hatch-sprite-wrap.silhouette canvas { filter: brightness(0) invert(.12) sepia(1) saturate(3) hue-rotate(200deg); }
.hatch-sprite-wrap .halo {
  position: absolute; inset: -18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--el, #d9b36a) 22%, transparent) 0%, transparent 66%);
  opacity: 0; transition: opacity 1.2s ease;
}
.hatch-sprite-wrap.lit .halo { opacity: 1; }
.hatch-sprite-wrap.reveal canvas { animation: reveal-flash .9s ease; }
@keyframes reveal-flash {
  0% { filter: brightness(0) invert(.12) sepia(1) saturate(3) hue-rotate(200deg); }
  55% { filter: brightness(2.2) saturate(.2); }
  100% { filter: none; }
}
.hatch-name {
  font-family: var(--serif); font-size: 24px; letter-spacing: .3em; color: var(--gold);
  opacity: 0; transition: opacity .8s ease;
}
.hatch-name.show { opacity: 1; }
.hatch-skip { margin-top: 18px; color: var(--faint); font-size: 12px; }

/* ============ 由来カード ============ */
.yurai-card {
  position: relative; margin: 14px 0;
  background:
    linear-gradient(150deg, #232441 0%, #191a2e 45%, #15162a 100%);
  border: 1px solid #3a3d5e;
  border-radius: 6px;
  padding: 22px 20px 18px;
  box-shadow: 0 12px 40px #00000066, inset 0 0 60px #0d0e1a80;
}
.yurai-card::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--el, var(--gold)) 32%, transparent);
  border-radius: 3px;
}
.yurai-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.yurai-corner b { position: absolute; background: var(--gold-dim); }
.yurai-corner b:first-child { width: 14px; height: 2px; }
.yurai-corner b:last-child { width: 2px; height: 14px; }
.yurai-corner.tl { top: 2px; left: 2px; } .yurai-corner.tr { top: 2px; right: 2px; transform: scaleX(-1); }
.yurai-corner.bl { bottom: 2px; left: 2px; transform: scaleY(-1); } .yurai-corner.br { bottom: 2px; right: 2px; transform: scale(-1); }
.yurai-kicker {
  text-align: center; font-size: 10.5px; letter-spacing: .5em; color: var(--gold-dim);
  margin-bottom: 4px;
}
.yurai-title {
  text-align: center; font-family: var(--serif); font-size: 20px; letter-spacing: .18em;
  color: var(--ink); margin-bottom: 12px;
}
.yurai-portrait { display: flex; justify-content: center; margin: 4px 0 10px; }
.yurai-portrait .pframe {
  position: relative; padding: 14px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--el, #d9b36a) 14%, transparent), transparent 72%);
  border-radius: 50%;
}
.yurai-portrait canvas { width: 132px; height: 132px; display: block; }
.yurai-lines { margin: 8px 2px 14px; display: flex; flex-direction: column; gap: 9px; }
.yurai-lines p {
  font-family: var(--serif); font-size: 14px; line-height: 1.9; letter-spacing: .04em;
  color: #ded9ca; text-align: justify;
}
.yurai-sep { display: flex; justify-content: center; margin: 2px 0 12px; color: var(--gold-dim); font-size: 10px; letter-spacing: .8em; }
.yurai-info { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; font-size: 12px; }
.yurai-info .k { color: var(--faint); font-size: 10.5px; letter-spacing: .18em; display: block; }
.yurai-info .v { color: var(--ink); }
.yurai-moves { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.yurai-seal {
  position: absolute; right: 16px; bottom: 14px; font-size: 9px; color: #55597a;
  letter-spacing: .12em; writing-mode: vertical-rl;
}

/* ============ 図鑑 ============ */
.dex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.dex-cell {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 10px 4px 8px; text-align: center; position: relative;
}
.dex-cell canvas { width: 84px; height: 84px; }
.dex-cell.unknown canvas { filter: brightness(0) invert(.16); opacity: .85; }
.dex-no { position: absolute; top: 6px; left: 8px; font-size: 9.5px; color: var(--faint); letter-spacing: .1em; }
.dex-name { font-size: 11.5px; letter-spacing: .1em; color: var(--ink); margin-top: 2px; }
.dex-cell.unknown .dex-name { color: var(--faint); }
.dex-q {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-size: 30px; color: #4a4e6e;
}

.dex-detail { text-align: center; }
.dex-detail .big-sprite { width: 168px; height: 168px; }
.dex-detail.unknown .big-sprite { filter: brightness(0) invert(.16); }
.dex-detail h3 { font-family: var(--serif); font-size: 21px; letter-spacing: .22em; margin: 4px 0 2px; }
.dex-flavor { font-family: var(--serif); color: #cfcaba; font-size: 13.5px; line-height: 2; margin: 12px 4px; text-align: justify; }
.stat-rows { text-align: left; margin: 12px 2px 4px; display: flex; flex-direction: column; gap: 6px; }
.stat-row { display: grid; grid-template-columns: 44px 1fr 30px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--sub); }
.stat-bar { height: 5px; border-radius: 3px; background: #22243a; overflow: hidden; }
.stat-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--el, var(--gold)), color-mix(in srgb, var(--el, var(--gold)) 55%, #fff)); }

/* ============ 遠征・編成 ============ */
.scout-guards { display: flex; gap: 10px; justify-content: center; margin: 10px 0; }
.scout-guard { text-align: center; }
.scout-guard canvas { width: 76px; height: 76px; filter: brightness(0) invert(.14); }
.scout-guard .g-el { font-size: 10.5px; }
.party-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.party-cell {
  background: var(--panel); border: 1.5px solid var(--line-soft); border-radius: 12px;
  padding: 8px 4px; text-align: center; transition: border-color .15s ease;
}
.party-cell canvas { width: 72px; height: 72px; }
.party-cell .p-name { font-size: 11px; letter-spacing: .08em; }
.party-cell .p-sub { font-size: 10px; color: var(--faint); }
.party-cell.picked { border-color: var(--gold); background: #221f16; }
.party-cell.dim { opacity: .45; }
.pick-order { position: absolute; top: 5px; left: 7px; font-size: 10px; color: var(--gold); }

/* ============ 戦闘 ============ */
.battle-root { display: flex; flex-direction: column; gap: 8px; }
.room-banner {
  text-align: center; font-family: var(--serif); letter-spacing: .3em; font-size: 13px;
  color: var(--sub); padding: 4px 0 0;
}
.room-banner b { color: var(--gold); font-weight: 500; }

.arena {
  position: relative; height: 240px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 60% at 70% 24%, #232647 0%, transparent 60%),
    radial-gradient(120% 80% at 30% 90%, #1b1d33 0%, transparent 65%),
    linear-gradient(180deg, #14152a 0%, #101120 100%);
}
.arena::after { /* 床 */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -34%; height: 62%;
  background: radial-gradient(closest-side, #262845 0%, #1a1c31 55%, transparent 75%);
  opacity: .8;
}
.fighter { position: absolute; z-index: 2; text-align: center; }
.fighter .fx-wrap { position: relative; display: inline-block; }
.fighter canvas { width: 108px; height: 108px; }
.fighter.mine { left: 6%; bottom: 8px; }
.fighter.mine canvas { transform: scaleX(-1); }
.fighter.foe { right: 6%; top: 14px; }
.fighter.foe canvas { width: 96px; height: 96px; }
.fighter.lunge-r .fx-wrap { animation: lunge-r .34s ease; }
.fighter.lunge-l .fx-wrap { animation: lunge-l .34s ease; }
@keyframes lunge-r { 30% { transform: translate(26px, -8px); } }
@keyframes lunge-l { 30% { transform: translate(-26px, 8px); } }
.fighter.hurt .fx-wrap { animation: hurt-flash .36s steps(2, jump-none); }
@keyframes hurt-flash { 50% { filter: brightness(3) saturate(0); transform: translateX(-3px); } }
.fighter.ko .fx-wrap { animation: ko-out .9s ease forwards; }
@keyframes ko-out { 30% { filter: brightness(2.4); } 100% { opacity: 0; transform: translateY(16px); filter: brightness(2.4) blur(2px); } }
.fighter.dodgefx .fx-wrap { animation: dodge-slip .4s ease; }
@keyframes dodge-slip { 40% { transform: translateX(-20px); opacity: .35; } }

.plate {
  position: absolute; z-index: 3; min-width: 148px;
  background: #10111edd; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 9px 7px; text-align: left; backdrop-filter: blur(2px);
}
.plate.mine { right: 8px; bottom: 10px; }
.plate.foe { left: 8px; top: 10px; }
.plate .nm { font-size: 12px; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
.plate .nm .lv { color: var(--faint); font-size: 10px; }
.hpbar { height: 7px; border-radius: 4px; background: #262940; margin: 5px 0 4px; overflow: hidden; }
.hpbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #79c96f, #b9e07a); transition: width .5s cubic-bezier(.2,.8,.3,1); }
.hpbar i.mid { background: linear-gradient(90deg, #d9b36a, #e8cc7f); }
.hpbar i.low { background: linear-gradient(90deg, #d95f6f, #e88a8a); }
.hp-num { font-size: 9.5px; color: var(--faint); text-align: right; }
.breath-row { display: flex; gap: 3px; margin-top: 3px; align-items: center; }
.breath-row .bd {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid #33627288; background: transparent; transition: all .25s ease;
}
.breath-row .bd.on { background: radial-gradient(circle at 35% 35%, #bdeffb, var(--breath) 70%); border-color: var(--breath); box-shadow: 0 0 6px #67d5e880; }
.charge-mark {
  display: inline-block; font-size: 9.5px; color: #ffb066; letter-spacing: .1em;
  animation: charge-blink 1s ease infinite;
}
@keyframes charge-blink { 50% { opacity: .35; } }

/* 予兆カットイン */
.omen-cut {
  position: absolute; z-index: 6; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 8px;
  background: linear-gradient(90deg, transparent, #000000c8 18%, #000000c8 82%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--el, #fff) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--el, #fff) 50%, transparent);
  animation: omen-in .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes omen-in { 0% { transform: translateY(-50%) translateX(60%); opacity: 0; } }
.omen-emblem {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 26px; color: var(--el, #fff);
  border: 2px solid var(--el, #fff);
  background: radial-gradient(circle, color-mix(in srgb, var(--el, #fff) 26%, transparent), transparent 75%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--el, #fff) 45%, transparent);
  animation: emblem-pulse 1.1s ease infinite;
}
@keyframes emblem-pulse { 50% { box-shadow: 0 0 34px color-mix(in srgb, var(--el, #fff) 70%, transparent); } }
.omen-body { text-align: left; }
.omen-t1 { font-size: 11px; color: var(--sub); letter-spacing: .2em; }
.omen-t2 { font-family: var(--serif); font-size: 16px; letter-spacing: .12em; }
.omen-flames { letter-spacing: .18em; font-size: 13px; color: #ff9d5c; }
.omen-reveal { color: var(--gold); font-size: 11.5px; }

/* 決め演出（砕き・見切り） */
.kime {
  position: absolute; z-index: 7; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-size: 30px; letter-spacing: .2em; color: var(--gold);
  text-shadow: 0 0 18px #d9b36a99, 0 2px 0 #000;
  animation: kime-pop .9s cubic-bezier(.2,.9,.3,1) forwards; white-space: nowrap;
}
.kime.blue { color: var(--breath); text-shadow: 0 0 18px #67d5e899, 0 2px 0 #000; }
@keyframes kime-pop { 0% { transform: translate(-50%,-50%) scale(2.1); opacity: 0; } 22% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; } }

/* ダメージポップ */
.dmg-pop {
  position: absolute; z-index: 8; font-weight: 700; font-size: 21px; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 10px #00000090; pointer-events: none;
  animation: dmg-float .7s ease-out forwards;
}
.dmg-pop.big { font-size: 28px; color: #ffd27f; }
.dmg-pop.weak { font-size: 17px; color: #bfc4da; }
@keyframes dmg-float { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 18% { opacity: 1; transform: translateY(-4px) scale(1.12); } 100% { transform: translateY(-30px) scale(1); opacity: 0; } }

.arena.shake-s { animation: shk-s .28s linear; }
.arena.shake-b { animation: shk-b .4s linear; }
@keyframes shk-s { 20% { transform: translate(3px,-2px);} 40% { transform: translate(-3px,2px);} 60% { transform: translate(2px,1px);} 80% { transform: translate(-2px,-1px);} }
@keyframes shk-b { 15% { transform: translate(7px,-4px);} 30% { transform: translate(-7px,4px);} 45% { transform: translate(5px,3px);} 60% { transform: translate(-5px,-3px);} 75% { transform: translate(3px,2px);} }

/* 語り（出来事の行） */
.tale {
  min-height: 42px; padding: 8px 12px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line-soft);
  font-size: 13px; color: #cfcaba; font-family: var(--serif); letter-spacing: .03em;
}

/* 手のパネル */
.hand-panel { display: flex; flex-direction: column; gap: 8px; }
.hand-title { font-size: 11.5px; color: var(--sub); letter-spacing: .16em; padding-left: 2px; }
.moves-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.move-btn {
  position: relative; text-align: left; border-radius: 12px; padding: 9px 10px 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--el, var(--line));
}
.move-btn:active { background: #23253d; }
.move-btn[disabled] { opacity: .38; }
.move-btn .m-name { font-size: 13.5px; letter-spacing: .04em; }
.move-btn .m-sub { display: flex; gap: 7px; align-items: center; font-size: 10px; color: var(--faint); margin-top: 2px; }
.move-btn .m-kind { color: var(--el, var(--sub)); }
.cost-beads { display: inline-flex; gap: 2px; }
.cost-beads i { width: 6px; height: 6px; border-radius: 50%; background: var(--breath); opacity: .9; }
.cost-beads.zero i { background: #3a3f5c; }

.resp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.resp-btn {
  border-radius: 14px; padding: 12px 10px; text-align: center;
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
}
.resp-btn:active { background: #23253d; }
.resp-btn .r-name { font-family: var(--serif); font-size: 17px; letter-spacing: .28em; }
.resp-btn .r-hint { font-size: 10px; color: var(--faint); margin-top: 3px; line-height: 1.45; }
.resp-btn.ok-hint { border-color: #3f6a4a; } .resp-btn.ok-hint .r-hint { color: #8fce9a; }
.resp-btn.ng-hint .r-hint { color: #c98a93; }
.resp-btn[disabled] { opacity: .38; }
.sub-list { display: flex; flex-direction: column; gap: 6px; }
.sub-list .btn { justify-content: space-between; }

.util-row { display: flex; gap: 8px; }
.util-row .btn { flex: 1; }

/* 部屋間・結果 */
.between {
  text-align: center; padding: 8px 0 0;
}
.party-strip { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.pchip {
  width: 96px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 7px 6px; text-align: center;
}
.pchip canvas { width: 56px; height: 56px; }
.pchip.down canvas { filter: grayscale(1) brightness(.5); }
.pchip .nm { font-size: 10px; letter-spacing: .05em; }
.next-room-note { color: var(--sub); font-size: 12.5px; margin: 6px 0 2px; }

/* 進撃線マップ */
.march { margin: 14px auto 6px; display: block; }
.march .rm-label { font-size: 9.5px; fill: var(--faint); letter-spacing: .08em; }
.march .rm-label.done { fill: var(--gold); }

/* 遠征記カード */
.ensei-card {
  position: relative;
  background: linear-gradient(160deg, #20223c, #161729 60%);
  border: 1px solid #3a3d5e; border-radius: 6px;
  padding: 20px 18px 16px; margin: 12px 0;
  box-shadow: 0 12px 40px #00000066;
}
.ensei-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid #4a466030; border-radius: 3px; pointer-events: none; }
.ensei-kicker { text-align: center; font-size: 10px; letter-spacing: .5em; color: var(--gold-dim); }
.ensei-title { text-align: center; font-family: var(--serif); font-size: 18px; letter-spacing: .14em; margin: 3px 0 4px; }
.ensei-date { text-align: center; font-size: 10px; color: var(--faint); letter-spacing: .2em; margin-bottom: 8px; }
.ensei-lines { display: flex; flex-direction: column; gap: 8px; margin: 12px 2px; }
.ensei-lines p { font-family: var(--serif); font-size: 13.5px; line-height: 1.95; color: #ded9ca; text-align: justify; }
.ensei-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--sub); margin-top: 10px; }
.ensei-foot .score b { color: var(--gold); font-size: 15px; }
.outcome-badge {
  display: inline-block; font-family: var(--serif); letter-spacing: .2em; font-size: 12px;
  border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 4px; padding: 3px 10px;
}
.outcome-badge.bad { border-color: #6a3040; color: var(--danger); }
.growth-note { text-align: center; color: var(--ok); font-size: 12px; margin-top: 8px; }

/* ============ 守り（指示書） ============ */
.slot-card { margin-bottom: 10px; }
.slot-head { display: flex; align-items: center; gap: 10px; }
.slot-head canvas { width: 52px; height: 52px; }
.slot-head .s-name { font-size: 14px; letter-spacing: .06em; }
.slot-head .s-sub { font-size: 10.5px; color: var(--faint); }
.order-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.order-form label { font-size: 10.5px; color: var(--faint); letter-spacing: .16em; display: block; margin-bottom: 3px; }
select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa0b6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--line); color: var(--ink); border-radius: 10px;
  padding: 10px 30px 10px 12px; font-size: 13.5px; font-family: inherit;
}
.policy-note { font-size: 11.5px; color: var(--sub); background: #14162480; border-radius: 8px; padding: 7px 10px; font-family: var(--serif); }
.mikiri-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kenbun { margin-top: 8px; }
.kenbun summary { font-size: 11.5px; color: var(--gold-dim); cursor: pointer; letter-spacing: .1em; list-style: none; }
.kenbun summary::before { content: "▸ "; }
.kenbun[open] summary::before { content: "▾ "; }
.kenbun-table { margin-top: 7px; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.kenbun-table .row { display: grid; grid-template-columns: 1fr 1fr; font-size: 11px; }
.kenbun-table .row > div { padding: 6px 9px; border-bottom: 1px solid var(--line-soft); }
.kenbun-table .row:last-child > div { border-bottom: none; }
.kenbun-table .w { color: var(--sub); border-right: 1px solid var(--line-soft); }
.kenbun-table .t { color: var(--ink); }

/* ============ 朝の報せ ============ */
.morning-head { text-align: center; padding: 10px 0 2px; }
.morning-head .m-date { font-size: 11px; letter-spacing: .3em; color: var(--faint); }
.morning-head h2 { font-family: var(--serif); font-size: 18px; letter-spacing: .2em; margin-top: 4px; }
.raider-row { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.raider-row .rd { text-align: center; }
.raider-row canvas { width: 60px; height: 60px; filter: brightness(0) invert(.16); }
.raider-row .rd span { display: block; font-size: 9.5px; color: var(--faint); }
.demo-note { text-align: center; color: var(--faint); font-size: 11px; margin-top: 10px; }

/* ============ 汎用 ============ */
.empty-note {
  text-align: center; color: var(--faint); font-size: 13px; padding: 40px 20px;
  font-family: var(--serif); letter-spacing: .08em; line-height: 2.2;
}
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }
.fade-in { animation: fade-in .4s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 480px) {
  .dex-grid { grid-template-columns: repeat(4, 1fr); }
  .arena { height: 280px; }
}