@import url('./four-base.css');
@import url('./four-battle.css');
.overlay {
  position:fixed;
  inset:0;
  z-index:10;
  background:#070d17c9;
  display:grid;
  place-items:center;
  padding:15px
}
.modal {
  width:min(650px,100%);
  max-height:90dvh;
  overflow:auto;
  background:#1b2c42;
  border:4px double #c3945a;
  padding:20px;
  box-shadow:0 8px 30px #000
}
.modal h2 {
  color:#ffda9f;
  margin-top:0
}
.modal>.command {
  margin-top:14px
}
.inventory-row {
  display:grid;
  gap:4px;
  border-bottom:1px solid #876b50;
  padding:10px 0
}
.inventory-row span {
  font-size:.9rem;
  color:#d2c3ac
}
.field {
  display:grid;
  gap:5px;
  margin:10px 0
}
.field select {
  width:100%;
  color:#fff2d7;
  background:#263951;
  border:1px solid #b98a55;
  padding:7px
}
.setting-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0
}
.setting-row input {
  width:20px;
  height:20px
}
.settings-list>.command,.file-label {
  margin:8px 8px 0 0
}
.file-label {
  display:inline-block;
  border:1px solid #b98a55;
  padding:12px;
  cursor:pointer
}
#import-save {
  max-width:100%;
  display:block;
  margin-top:8px
}
.craft-preview {
  background:#101d30;
  padding:12px;
  margin:12px 0
}
.craft-preview h3,.craft-preview p {
  margin:4px 0
}
.skin-gba {
  image-rendering:pixelated
}
.skin-gba .topbar,.skin-gba .command {
  border-radius:0
}

@media(max-width:700px) {
  body {
  font-size:16px
}
.game-main {
  padding:7px
}
.topbar {
  padding:7px;
  gap:6px
}
.brand {
  width:100%
}
.top-nav {
  margin-left:0;
  width:100%
}
.top-nav .command {
  flex:1
}
.hub-layout {
  display:flex;
  flex-direction:column
}
.hub-stage {
  min-height:46vh
}
.stage {
  min-height:calc(100dvh - 150px)
}
.dialogue-box {
  width:calc(100% - 16px);
  margin:8px;
  padding:12px;
  min-height:190px
}
.dialogue-text {
  font-size:1rem
}
.cast {
  height:48%;
  width:45%;
  bottom:31%
}
.battle-stage {
  min-height:260px
}
.battle-controls {
  display:flex;
  flex-direction:column
}
.battle-party {
  display:flex;
  overflow-x:auto
}
.unit {
  min-width:130px
}
.skill-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.turn-order {
  max-width:85%
}
.turn-order .extra-turn {
  display:none
}
.turn-order.expanded .extra-turn {
  display:inline
}
.enemy-art {
  width:120px;
  height:120px
}
.prose {
  line-height:2.4
}

}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  animation:none!important;
  transition:none!important
}

}


.background-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.image-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#e7d3b0; background:#314459; }
.scene-art::after { z-index:1; pointer-events:none; }
.portrait { position:relative; width:200px; height:200px; border:3px double #c89a61; background:#17283b; overflow:hidden; }
.portrait img { position:relative; object-fit:cover; object-position:center top; }
.cast { height:200px; width:200px; right:4%; bottom:220px; }
.learning-hint { float:right; color:#cdbb9f; font-size:.75rem; }
.hub-stats { margin:0; padding:10px; background:#1b2c42; line-height:1.6; font-size:.88rem; }
.title-stage { display:flex; align-items:center; }
.title-box { position:relative; margin:4%; padding:28px; background:#142238ed; border:3px double #c89a61; max-width:540px; }
.title-box h1 { color:#ffda9f; margin:10px 0; }
.title-box h2 { font-size:1.15rem; font-weight:normal; margin-bottom:24px; }
.title-box .command { display:inline-flex; margin:4px; }
.meter { height:6px; background:#101c2b; border:1px solid #8b765b; }
.meter span { display:block; height:100%; background:#e4ae71; }
.enemy-display { max-width:38%; }
.battle-log { border-top:1px solid #8b765b; margin-top:8px; padding-top:6px; }
.ending-stage { display:grid; align-items:end; justify-items:center; }
.ending-stage .ending {
  position:relative;
  margin:24px;
  width:min(540px,calc(100% - 48px));
  background:#142238f5;
}
@media(max-width:700px) {
 .cast { height:130px; width:130px; bottom:215px; right:14px; }
 .portrait { height:130px; width:130px; }
 .learning-hint { display:block; float:none; }
 .enemy-display { max-width:55%; font-size:.8rem; }
 .battle-stage { min-height:320px; }
 .turn-order { max-width:48%; align-items:flex-start; }
}