@font-face {
  font-family: 'Pretendard';
  src: url('./PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #e9edf2;
  background: #07090d;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
small { font-size: inherit; }
html, body, #app { min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: #07090d;
}
button { font: inherit; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #f0c76b; outline-offset: 2px; }
button:disabled { opacity: .42; cursor: not-allowed; }

/* Mobile game canvas first. Desktop only centers the same phone layout. */
.shell {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 10px 9px calc(20px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% -10%, rgba(47, 57, 73, .78) 0%, rgba(15, 19, 26, .92) 36%, #090c11 74%),
    #090c11;
}

.hero { padding: 27px 7px 15px; text-align: center; }
.hero h1, .battle-header h1 { margin: 2px 0 3px; letter-spacing: .08em; }
.hero h1 { font-size: clamp(32px, 10vw, 44px); }
.hero p { margin: 8px auto 0; max-width: 330px; color: #aab3bf; font-size: 14px; line-height: 1.5; }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 900; letter-spacing: .15em; color: #c9ab63; }

.panel {
  margin-top: 9px;
  padding: 12px;
  border: 1px solid #29313c;
  border-radius: 15px;
  background: rgba(20, 25, 33, .94);
}
.panel h2 { margin: 2px 0 7px; font-size: 17px; }
.section-head { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.section-head > small { color: #8993a0; text-align: right; max-width: 48%; font-size: 14px; line-height: 1.35; }
.note { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #8d97a4; }

.upgrade-row { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin: 10px 0; }
.upgrade-row p { margin: 4px 0 0; color: #939dab; font-size: 14px; line-height: 1.4; }
.capacity-box { flex: 0 0 auto; min-width: 62px; padding: 11px 9px; border-radius: 12px; background: #202733; text-align: center; font-size: 20px; font-weight: 900; }
.token { border: 1px solid #3e4654; border-radius: 999px; padding: 6px 8px; font-size: 14px; color: #dac997; white-space: nowrap; }

.primary, .start-btn, .ghost, .danger, .back-btn, .draw-buttons button {
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  cursor: pointer;
}
.primary { width: 100%; background: #d7b45f; color: #15120b; font-weight: 900; }
.start-btn { width: 100%; padding: 11px 14px; background: #3f8b68; color: #f4fff8; font-weight: 900; font-size: 15px; border: 1px solid #58a77f; box-shadow: 0 6px 18px rgba(31, 111, 77, .22); }
.ghost { width: 100%; padding: 10px; background: #171c24; color: #aeb7c4; border: 1px solid #2b3440; }
.danger { width: 100%; padding: 8px 7px; color: #ffb7b1; background: #341d20; border: 1px solid #4c272b; font-size: 14px; }
.back-btn { padding: 6px 8px; background: #171c24; color: #b9c2cd; border: 1px solid #2b3440; font-size: 14px; white-space: nowrap; }

.class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.class-card { min-width: 0; padding: 10px; background: #181e27; border: 1px solid #2b3340; border-radius: 12px; }
.class-card > span { display: block; margin-bottom: 3px; font-size: 22px; }
.class-card strong { display: block; font-size: 14px; }
.class-card small { display: block; margin-top: 2px; color: #c2a85f; font-size: 14px; }
.class-card p { margin: 5px 0 0; color: #8f98a5; font-size: 14px; line-height: 1.4; }
.camp-actions { display: grid; gap: 7px; margin-top: 12px; }

/* Battle header + HUD stay compact so the board owns the screen. */
.battle-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}
.battle-header > div { text-align: center; min-width: 0; }
.battle-header h1 { font-size: 17px; }
.phase-badge { padding: 6px 7px; border-radius: 999px; background: #262f3c; color: #e6d199; font-size: 14px; font-weight: 900; white-space: nowrap; }

.hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 6px 0 7px; }
.hud > div { min-width: 0; padding: 6px 2px; border-radius: 10px; background: #141a22; border: 1px solid #29323e; text-align: center; }
.hud small { display: block; color: #87919f; font-size: 14px; line-height: 1.1; }
.hud strong { display: block; margin-top: 2px; font-size: 14px; white-space: nowrap; }

.field-wrap { padding: 6px; border: 1px solid #2a3340; border-radius: 14px; background: #0f141b; }
.field-label { padding: 3px 6px 4px; text-align: center; font-size: 14px; letter-spacing: .12em; font-weight: 900; }
.enemy-label { color: #ca8e8e; }
.guard-label { padding-top: 5px; color: #d6bd76; }
.battlefield { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.field-cell {
  position: relative;
  min-width: 0;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #28313d;
  border-radius: 8px;
  color: inherit;
}
.field-cell.approach-zone { height: 43px; background: #16171c; }
.field-cell.ally-zone { height: 61px; background: #171e28; cursor: pointer; }
.field-cell:disabled { opacity: 1; cursor: default; }
.cell-selected { border-color: #e2bf66 !important; box-shadow: inset 0 0 0 2px rgba(226, 191, 102, .25); }
.slot-plus { color: #3d4959; font-size: 24px; line-height: 1; }

.enemy {
  position: absolute;
  z-index: 4;
  inset: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 8px;
  background: rgba(86, 28, 31, .9);
  border: 1px solid #7a3539;
}
.enemy span { font-size: 21px; }
.enemy b { font-size: 14px; }
.enemy i { position: absolute; left: 4px; bottom: 3px; height: 3px; background: #ce5f65; border-radius: 10px; max-width: calc(100% - 8px); }

.unit-card { position: relative; min-width: 0; border-radius: 10px; padding: 7px; text-align: left; border: 1px solid #3a4552; background: #202733; }
.unit-card.compact { height: 100%; padding: 3px 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.unit-card.selected { border-color: #e4bf61; }
.unit-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.unit-icon { font-size: 20px; line-height: 1; }
.rarity-label { font-size: 14px; font-weight: 900; }
.unit-card strong { display: block; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.unit-card small { display: block; color: #9ca6b3; font-size: 14px; }
.unit-card.compact small { display: none; }
.unit-card .stats { display: block; margin-top: 5px; color: #909aa6; font-size: 14px; line-height: 1.35; }
.hpbar { height: 3px; width: 100%; margin-top: 3px; border-radius: 99px; overflow: hidden; background: #11161c; }
.hpbar i { display: block; height: 100%; background: #58a66d; }
.rarity-r { border-color: #495362; }
.rarity-sr { border-color: #817044; background: #2a281f; }
.rarity-ssr { border-color: #a96f45; background: #30241d; }

/* Draw + reserve are intentionally dense and thumb friendly. */
.draw-panel { padding: 9px; }
.draw-panel h2, .storage-panel h2 { font-size: 15px; margin-bottom: 4px; }
.draw-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.draw-buttons button { min-width: 0; min-height: 48px; padding: 5px 2px; background: #202733; color: #e6e8eb; border: 1px solid #333d4b; font-size: 14px; line-height: 1.15; }
.draw-buttons button b, .draw-buttons button small { display: block; margin-top: 2px; }
.draw-buttons button small { font-size: 14px; color: #8f99a7; }
.pending-area { margin-top: 6px; }
.pending-empty { display: flex; min-height: 44px; align-items: center; justify-content: center; border: 1px dashed #343e4b; border-radius: 10px; color: #677382; font-size: 14px; }
.pending-wrap { display: grid; grid-template-columns: 72px minmax(0, 1fr) 76px; gap: 6px; align-items: stretch; }
.pending-wrap .unit-card { min-height: 57px; }
.pending-wrap .danger { width: auto; height: 100%; }
.pending-help { display: flex; align-items: center; color: #9ba5b2; font-size: 14px; line-height: 1.35; }

.storage-panel { padding: 9px; }
.storage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.storage-slot { min-height: 58px; border: 1px dashed #3a4552; border-radius: 10px; background: #141a22; color: #586576; padding: 3px; cursor: pointer; }
.storage-slot .unit-card { width: 100%; }

.battle-actions { margin-top: 8px; padding-bottom: 2px; }
.result-card { padding: 18px 14px; border: 1px solid #3b4654; border-radius: 15px; background: #171d26; text-align: center; }
.result-card h2 { margin: 0 0 6px; font-size: 23px; }
.result-card p { color: #9ca6b3; font-size: 14px; }
.log-panel { margin-top: 8px; padding: 9px 10px; border: 1px solid #26303b; border-radius: 11px; background: rgba(15, 20, 27, .68); color: #8994a1; }
.log-panel summary { cursor: pointer; font-size: 14px; font-weight: 900; letter-spacing: .1em; color: #a78f5a; }
.log-panel p { margin: 5px 0; color: #8994a1; font-size: 14px; line-height: 1.35; }

@media (max-width: 355px) {
  .shell { padding-left: 6px; padding-right: 6px; }
  .field-cell.approach-zone { height: 39px; }
  .field-cell.ally-zone { height: 57px; }
  .pending-wrap { grid-template-columns: 66px minmax(0, 1fr) 68px; gap: 4px; }
  .draw-buttons button { font-size: 14px; }
  .back-btn { padding-inline: 6px; }
}

@media (min-width: 700px) {
  body { background: #05070a; }
  .shell { border-left: 1px solid #1f2630; border-right: 1px solid #1f2630; box-shadow: 0 0 60px rgba(0, 0, 0, .45); }
}

/* v0.2 flow: Base Camp -> Preparation -> Battle */
.prep-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100vh;
  min-height: 100dvh;
}

.prep-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}
.prep-header > div { min-width: 0; text-align: center; }
.prep-header h1 { margin: 2px 0 0; font-size: 18px; }

.prep-hud,
.battle-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.prep-hud > div,
.battle-hud > div {
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid #29323e;
  border-radius: 10px;
  background: #141a22;
  text-align: center;
}
.prep-hud small,
.battle-hud small { display: block; color: #87919f; font-size: 14px; }
.prep-hud strong,
.battle-hud strong { display: block; margin-top: 2px; font-size: 14px; }

.formation-wrap {
  padding: 9px;
  border: 1px solid #303947;
  border-radius: 14px;
  background: #10161e;
}
.formation-head,
.reserve-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.formation-head > span,
.reserve-title > span { font-size: 14px; font-weight: 900; }
.formation-head small,
.reserve-title small { color: #818c9a; font-size: 14px; text-align: right; }
.formation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.formation-slot {
  min-width: 0;
  aspect-ratio: 1 / .86;
  padding: 4px;
  border: 1px solid #34404d;
  border-radius: 11px;
  background: #18212c;
  color: inherit;
  cursor: pointer;
}
.formation-slot .unit-card { width: 100%; height: 100%; }

.prep-draw {
  padding: 9px;
  border: 1px solid #2a3340;
  border-radius: 14px;
  background: rgba(16, 21, 29, .96);
}
.prep-draw .draw-buttons { margin-top: 0; }
.prep-draw .pending-area { margin-top: 7px; }
.prep-reserve {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #262f3a;
}
.prep-reserve .reserve-title { margin-bottom: 5px; }
.prep-reserve .storage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.prep-reserve .storage-slot {
  width: 62px;
  min-height: 58px;
}
.prep-actions { margin-top: auto; padding-top: 1px; }

.battle-only-header {
  grid-template-columns: 1fr auto;
  padding: 1px 2px 0;
}
.battle-only-header .battle-title { text-align: left; }
.battle-only-header h1 { margin: 1px 0 0; }
.battle-hud { margin: 6px 0 7px; }
.battle-field-wrap { margin-top: 2px; }
.battle-screen .field-cell.ally-zone { cursor: default; }
.battle-screen .log-panel { margin-top: 9px; }

@media (max-width: 355px) {
  .formation-grid { gap: 4px; }
  .formation-wrap, .prep-draw { padding: 7px; }
  .formation-slot { border-radius: 9px; }
}

/* Support is a special class: heal by default, tap during battle to toggle attack. */
.support-mode-toggle {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 3px 4px;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.support-mode-toggle.heal { box-shadow: inset 0 0 0 1px rgba(88, 166, 109, .42); }
.support-mode-toggle.attack { box-shadow: inset 0 0 0 1px rgba(206, 95, 101, .48); }
.support-mode-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(8, 11, 15, .88);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.support-mode-toggle.heal .support-mode-badge { color: #8ed29e; }
.support-mode-toggle.attack .support-mode-badge { color: #f3a2a6; }

/* v0.3 deck / 10-wave foundation applied to the original combat prototype */
.toast {
  position: sticky;
  top: 8px;
  z-index: 50;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid #5b4d2b;
  border-radius: 12px;
  background: rgba(38, 31, 18, .97);
  color: #f0d994;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.meta-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.meta-strip > div {
  min-width: 0;
  padding: 8px 3px;
  border: 1px solid #2b3440;
  border-radius: 10px;
  background: #151b23;
  text-align: center;
}
.meta-strip small { display: block; color: #808b99; font-size: 14px; }
.meta-strip strong { display: block; margin-top: 2px; font-size: 14px; }

.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.collection-card {
  position: relative;
  min-width: 0;
  min-height: 70px;
  padding: 10px 8px 8px;
  border: 1px solid #3a4552;
  border-radius: 11px;
  background: #1b222c;
  color: #e9edf2;
  text-align: left;
  cursor: pointer;
}
.collection-card.decked { box-shadow: inset 0 0 0 2px rgba(226, 191, 102, .35); }
.collection-card.illustrated {
  min-height: 0;
  padding: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #0e131a;
  line-height: 0;
}
.collection-card.illustrated.decked {
  box-shadow: inset 0 0 0 3px rgba(229, 196, 111, .78), 0 0 0 1px rgba(229, 196, 111, .38);
}
.collection-card-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.collection-card.illustrated .deck-chip {
  z-index: 2;
  line-height: 1.1;
  background: rgba(8, 11, 15, .86);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(3px);
}
.collection-card strong { display: block; margin-top: 5px; font-size: 14px; }
.collection-grade { display: block; color: #9ba6b4; font-size: 14px; }
.deck-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #11161d;
  color: #7e8997;
  font-size: 14px;
  font-weight: 900;
}
.collection-card.decked .deck-chip { color: #e5c46f; }

.growth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}
.growth-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #2c3541;
  border-radius: 11px;
  background: #171e27;
}
.growth-card strong { font-size: 14px; }
.growth-card span { color: #929dab; font-size: 14px; line-height: 1.35; }
.growth-card button,
.chest-btn,
.reward-choice {
  border: 1px solid #3a4552;
  border-radius: 9px;
  background: #222a35;
  color: #dce2e8;
  font: inherit;
  cursor: pointer;
}
.growth-card button { min-height: 34px; padding: 5px; font-size: 14px; }
.gacha-panel .primary { margin-top: 10px; }

.rarity-ur { border-color: #7a5baa !important; background: #282137 !important; }

.draw-shortage {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #623d43;
  border-radius: 12px;
  background: #2d1c21;
  color: #f1c2c5;
}
.draw-shortage strong { font-size: 14px; }
.draw-shortage span { font-size: 14px; line-height: 1.4; }

.tray-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.tray-slot {
  min-width: 0;
  min-height: 66px;
  padding: 3px;
  border: 1px dashed #46515f;
  border-radius: 10px;
  background: #151c25;
  color: inherit;
  cursor: pointer;
}
.tray-slot .unit-card { width: 100%; height: 100%; }

.prep-tool-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.prep-tool-row .danger { min-height: 42px; }
.chest-btn { min-height: 42px; padding: 7px; font-size: 14px; }
.run-buffs { display: flex; gap: 5px; flex-wrap: wrap; }
.run-buffs span {
  padding: 5px 7px;
  border: 1px solid #465135;
  border-radius: 999px;
  background: #1d2619;
  color: #c9dc9f;
  font-size: 14px;
  font-weight: 800;
}

.battle-unit {
  position: absolute;
  z-index: 2;
  inset: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  border: 1px solid #415064;
  border-radius: 8px;
  background: rgba(30, 40, 53, .96);
  color: #e8edf2;
  text-align: center;
}
.battle-unit > span { font-size: 18px; line-height: 1; }
.battle-unit strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.battle-unit small { color: #a7b1be; font-size: 14px; }
.battle-unit .hpbar { width: calc(100% - 8px); }
.support-mode-toggle.battle-unit { appearance: none; -webkit-appearance: none; cursor: pointer; }

.enemy { flex-direction: column; gap: 0; }
.enemy b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.enemy small { font-size: 14px; color: #f0b8ba; }
.enemy-elite { background: rgba(91, 61, 30, .94); border-color: #9d7539; }
.enemy-boss { background: rgba(83, 31, 76, .96); border-color: #a04b91; }
.enemy-boss i { background: #ba5ca8; }

.elite-reward-card { text-align: left; }
.elite-reward-card h2 { text-align: center; }
.elite-reward-card > p { text-align: center; }
.reward-choice {
  display: grid;
  width: 100%;
  gap: 2px;
  margin-top: 7px;
  padding: 10px;
  text-align: left;
}
.reward-choice strong { font-size: 14px; color: #f0d381; }
.reward-choice span { font-size: 14px; color: #9ca6b3; }

@media (max-width: 355px) {
  .collection-grid { gap: 4px; }
  .collection-card { padding-inline: 6px; }
  .tray-grid { gap: 4px; }
  .meta-strip small { font-size: 14px; }
}

/* v0.4 separate deck builder */
.deck-menu-card .primary { margin-top: 10px; }
.deck-summary-line {
  margin: 9px 0 0;
  padding: 8px 9px;
  border: 1px solid #2d3642;
  border-radius: 10px;
  background: #121821;
  color: #c5cdd7;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.deck-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100vh;
  min-height: 100dvh;
}
.deck-screen .panel { margin-top: 0; }
.deck-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 4px 2px 0;
}
.deck-header > div { min-width: 0; text-align: center; }
.deck-header h1 { margin: 1px 0 0; font-size: 18px; letter-spacing: .04em; }
.deck-warning { color: #ffb7b1; background: #382127; }

.deck-info-panel { padding-bottom: 10px; }
.deck-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.deck-info-grid > div {
  min-width: 0;
  padding: 8px 3px;
  border: 1px solid #2b3440;
  border-radius: 10px;
  background: #151b23;
  text-align: center;
}
.deck-info-grid small { display: block; color: #808b99; font-size: 14px; }
.deck-info-grid strong { display: block; margin-top: 2px; font-size: 14px; }

.deck-zone-panel { padding: 10px; }
.deck-zone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.deck-zone-head h2 { margin: 2px 0 0; }
.deck-zone-panel .collection-grid { margin-top: 8px; }
.deck-card-grid .collection-card { min-height: 66px; }
.deck-card-grid .collection-card.decked { box-shadow: inset 0 0 0 2px rgba(226, 191, 102, .30); }
.deck-card-grid .collection-card:active { transform: translateY(1px); }
.deck-empty {
  margin-top: 9px;
  padding: 18px 10px;
  border: 1px dashed #343e4b;
  border-radius: 10px;
  color: #677382;
  font-size: 14px;
  text-align: center;
}
.owned-zone { margin-bottom: 0; }
.deck-bottom-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: auto;
  padding: 8px 0 calc(2px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(9, 12, 17, 0), rgba(9, 12, 17, .96) 28%);
}
.deck-bottom-actions .primary { min-height: 46px; }

@media (max-width: 355px) {
  .deck-info-grid { gap: 3px; }
  .deck-info-grid > div { padding-inline: 2px; }
  .deck-card-grid .collection-card { padding-inline: 6px; }
}

/* v0.4 battle screen: 3x3 enemy board + 3x3 NINE GUARDS board, log in a modal sheet */
.battle-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 7px;
}

.battle-only-header {
  min-height: 38px;
  margin-bottom: 4px;
}
.battle-only-header .battle-title h1 { font-size: 18px; }

.battle-control-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  margin-bottom: 6px;
}
.battle-control-row > * {
  min-height: 40px;
  border: 1px solid #29323e;
  border-radius: 10px;
  background: #141a22;
  color: #e9edf2;
}
.battle-log-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 74px;
  padding: 0 10px;
  cursor: pointer;
}
.battle-log-button span { color: #c9ab63; font-size: 14px; }
.battle-log-button strong { font-size: 14px; letter-spacing: .08em; }
.battle-log-button.active { border-color: #806b3a; background: #211d15; }
.battle-turn-box,
.battle-enemy-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 8px;
}
.battle-turn-box small,
.battle-enemy-box small { color: #87919f; font-size: 14px; }
.battle-turn-box strong,
.battle-enemy-box strong { font-size: 15px; }

.battle-field-wrap {
  margin-top: 0;
  padding: 8px;
  border-radius: 15px;
  background: #0c1117;
}
.combat-board { min-width: 0; }
.combat-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 2px 4px 5px;
}
.combat-board-head strong { font-size: 14px; letter-spacing: .11em; }
.combat-board-head span { font-size: 14px; }
.enemy-board-head strong,
.enemy-board-head span { color: #cf8e91; }
.guard-board-head strong { color: #e2c36f; }
.guard-board-head span { color: #8d98a6; }

.combat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.combat-grid .field-cell {
  width: 100%;
  height: auto;
  padding: 3px;
  border-radius: 10px;
}
.enemy-grid .field-cell {
  min-height: clamp(54px, 14vw, 62px);
  background: #17181d;
  border-color: #332b30;
}
.guard-grid .field-cell {
  min-height: clamp(70px, 18vw, 80px);
  background: #18212c;
  border-color: #344151;
}
.frontline-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin: 4px 0 2px;
  color: #5e6876;
  text-align: center;
}
.frontline-divider::before,
.frontline-divider::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, transparent, #313a46);
}
.frontline-divider::after { background: linear-gradient(90deg, #313a46, transparent); }
.frontline-divider b { font-size: 14px; letter-spacing: .18em; color: #7a8491; }
.frontline-divider span { display: none; }

.battle-screen .enemy span { font-size: 24px; }
.battle-screen .enemy b { font-size: 14px; }
.battle-screen .enemy small { font-size: 14px; }
.battle-screen .battle-unit > span { font-size: 21px; }
.battle-screen .battle-unit strong { font-size: 14px; }
.battle-screen .battle-unit small { font-size: 14px; }

.battle-actions:empty { display: none; }

.battle-log-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .58);
}
.battle-log-sheet {
  width: min(430px, 100%);
  max-height: min(64vh, 520px);
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 1px solid #394351;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #111720;
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .45);
}
.battle-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #29323e;
}
.battle-log-head > div { display: grid; gap: 2px; }
.battle-log-head strong { font-size: 16px; }
.battle-log-head button {
  width: 36px;
  height: 36px;
  border: 1px solid #37414e;
  border-radius: 10px;
  background: #1a222d;
  color: #d8dee5;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.battle-log-list {
  max-height: calc(min(64vh, 520px) - 72px);
  overflow-y: auto;
  padding-top: 6px;
}
.battle-log-list p {
  margin: 0;
  padding: 8px 3px;
  border-bottom: 1px solid #202833;
  color: #aab4c0;
  font-size: 14px;
  line-height: 1.35;
}

/* The old inline details log is no longer used. */
.battle-screen .log-panel { display: none; }

@media (max-width: 355px) {
  .battle-screen { padding-left: 6px; padding-right: 6px; }
  .battle-field-wrap { padding: 6px; }
  .combat-grid { gap: 4px; }
  .enemy-grid .field-cell { min-height: 50px; }
  .guard-grid .field-cell { min-height: 64px; }
  .battle-log-button { min-width: 66px; padding-inline: 7px; }
}

/* v0.5 castle HP: segmented gate gauge */
.castle-hud-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.castle-gauge {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: auto;
  min-width: 0;
}
.castle-gauge > span {
  color: #87919f;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.castle-segments {
  display: grid;
  grid-template-columns: repeat(5, 9px);
  gap: 2px;
  width: max-content;
}
.castle-segment {
  display: block;
  height: 7px;
  border: 1px solid #4b5360;
  border-radius: 2px;
  background: #202731;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.castle-segment.filled {
  border-color: #bea258;
  background: #d2b45f;
}
.castle-gauge.warning .castle-segment.filled {
  border-color: #bd7f4f;
  background: #c78650;
}
.castle-gauge.critical .castle-segment.filled {
  border-color: #b75b60;
  background: #c76066;
}
.castle-badge {
  min-width: 72px;
  padding: 6px 8px;
}
.castle-badge .castle-gauge {
  gap: 4px;
}
.castle-badge .castle-gauge > span {
  color: #e6d199;
  text-align: center;
  font-size: 14px;
}
.castle-badge .castle-segment {
  height: 6px;
}
.castle-gauge.compact .castle-segments {
  grid-template-columns: repeat(5, 8px);
  gap: 2px;
}

@media (max-width: 355px) {
  .castle-badge { min-width: 68px; padding-inline: 6px; }
  .castle-segments { gap: 2px; }
}


/* v0.6 typography: Pretendard + 14px minimum readability baseline */
.draw-buttons button { min-height: 62px; padding: 7px 4px; line-height: 1.25; }
.pending-empty { min-height: 50px; }
.storage-slot { min-height: 64px; }
.prep-reserve .storage-slot { min-height: 64px; }
.formation-slot { min-height: 92px; }
.tray-slot { min-height: 76px; }
.collection-card { min-height: 82px; }
.deck-card-grid .collection-card { min-height: 78px; }
.battle-log-button { min-width: 82px; }
.battle-control-row > * { min-height: 44px; }
.enemy-grid .field-cell { min-height: clamp(66px, 17vw, 76px); }
.guard-grid .field-cell { min-height: clamp(82px, 21vw, 94px); }
.battle-unit, .enemy { padding: 3px 4px; }
.battle-unit strong, .enemy b { line-height: 1.15; }
.battle-unit small, .enemy small { line-height: 1.1; }
.support-mode-badge { padding: 3px 5px; }
.deck-chip { padding: 3px 6px; }
.castle-gauge > span, .castle-badge .castle-gauge > span { line-height: 1.1; }

@media (max-width: 355px) {
  .draw-buttons button { font-size: 14px; }
  .meta-strip small { font-size: 14px; }
  .enemy-grid .field-cell { min-height: 64px; }
  .guard-grid .field-cell { min-height: 80px; }
}

/* Base card artwork keeps its native 2:3 silhouette in the deck builder. */
.deck-card-grid .collection-card.illustrated { min-height: 0; }