:root {
  --paper: #d7c9aa;
  --ink: #f8f2df;
  --shadow: rgba(24, 19, 15, 0.72);
  --red: #d26262;
  --gold: #e6c36e;
  --green: #39a549;
  --ui: rgba(22, 18, 16, 0.56);
  --line: rgba(255, 239, 198, 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #10100d; }
body {
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Yu Gothic", serif;
  letter-spacing: 0;
}
button {
  color: inherit;
  font: inherit;
  border: 0;
  cursor: pointer;
  background: none;
}

.game-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #070706;
}
.screen {
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  min-width: 320px;
  min-height: 180px;
  overflow: hidden;
  background: #1a1712;
}

.home-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(239, 210, 148, .24), transparent 20%),
    radial-gradient(circle at 32% 58%, rgba(47, 37, 29, .72), transparent 34%),
    url("assets/generated_battle_bg.png") center/cover no-repeat,
    linear-gradient(128deg, #2b241f, #8d7f65 48%, #151310);
  filter: sepia(.35) saturate(.76) contrast(.9) brightness(.88);
  transform: scale(1.04);
}
.home-top {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 5%;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 2vw;
  text-shadow: 0 3px 10px #000;
}
.home-kicker {
  margin: 0 0 .5vh;
  color: var(--gold);
  font-family: Georgia, serif;
  letter-spacing: .28em;
  font-size: clamp(10px, 1vw, 14px);
}
.home-top h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 76px);
  font-weight: 700;
  line-height: .95;
}
.home-progress {
  margin: 1vh 0 0;
  color: rgba(255,255,255,.86);
  font-size: clamp(13px, 1.45vw, 18px);
}
.home-resources {
  display: flex;
  align-items: start;
  gap: .8vw;
  flex-wrap: wrap;
  justify-content: end;
}
.home-resources span {
  padding: .55vh .9vw;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,237,186,.24);
}
.home-hero {
  position: absolute;
  inset: 12% 8% 15%;
  z-index: 5;
}
.home-hero img {
  position: absolute;
  right: 8%;
  bottom: -6%;
  max-height: 105%;
  max-width: 50%;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.55));
}
.home-copy {
  position: absolute;
  left: 2%;
  bottom: 12%;
  width: 42%;
  padding: 2.4vh 2vw;
  color: rgba(255,250,232,.92);
  font-size: clamp(13px, 1.45vw, 19px);
  line-height: 1.9;
  text-shadow: 0 2px 6px #000;
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.12));
  border-left: 2px solid rgba(230,195,110,.54);
}
.home-actions {
  position: absolute;
  left: 50%;
  bottom: 5%;
  z-index: 12;
  display: flex;
  gap: .9vw;
  transform: translateX(-50%);
}
.home-action {
  min-width: clamp(110px, 13vw, 170px);
  padding: 1vh 1.2vw;
  color: #fff7dd;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 700;
  text-shadow: 0 2px 4px #000;
  background: linear-gradient(90deg, rgba(36,30,24,.72), rgba(129,107,71,.72), rgba(36,30,24,.72));
  border: 1px solid rgba(246,225,173,.34);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.home-action.primary {
  color: #fff2b6;
  box-shadow: 0 0 18px rgba(230,195,110,.28);
}
.home-action.danger {
  color: #ffd2cd;
}

.map-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 48% 28%, rgba(78, 72, 58, 0.1), transparent 16%),
    radial-gradient(circle at 80% 45%, rgba(102, 88, 60, 0.22), transparent 25%),
    url("assets/generated_map_bg.png") center/cover no-repeat,
    linear-gradient(145deg, #cabd9d, #786f55 58%, #30271f);
  filter: sepia(0.42) saturate(0.72) contrast(0.88) brightness(1.08);
  transform: scale(1.02);
}
.paper-vignette,
.battle-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 48%, rgba(17, 13, 12, 0.62) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.14), transparent 16%, transparent 84%, rgba(0,0,0,0.2));
}
.quest-header,
.battle-top {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 8;
  height: 8.4%;
}
.quest-plate {
  position: absolute;
  left: 8.5%;
  top: 7%;
  width: 26%;
  height: 70%;
  display: grid;
  place-items: center;
  color: #3e3325;
  font-size: clamp(13px, 2.1vw, 25px);
  font-weight: 700;
  text-shadow: 0 1px rgba(255,255,255,.7);
  background: linear-gradient(90deg, transparent, rgba(249,239,212,.78) 14%, rgba(237,222,188,.92), rgba(249,239,212,.78) 86%, transparent);
  border-top: 1px solid rgba(72,55,38,.38);
  border-bottom: 1px solid rgba(72,55,38,.38);
}
.map-home {
  position: absolute;
  left: 2%;
  top: 12%;
}
.turn-stone {
  position: absolute;
  left: 49%;
  top: 0;
  transform: translateX(-50%);
  color: #eef8ef;
  font-family: Georgia, serif;
  font-size: clamp(10px, 1.4vw, 16px);
  text-align: center;
  text-shadow: 0 2px 4px #000;
}
.turn-stone strong {
  display: block;
  color: #cbe7dd;
  font-size: clamp(18px, 2.6vw, 30px);
  line-height: 0.9;
}
.top-icons {
  position: absolute;
  right: 3.3%;
  top: 11%;
  display: flex;
  gap: 0.6vw;
}
.icon-btn,
.ghost-control {
  min-width: 52px;
  min-height: 28px;
  color: rgba(255,255,255,.82);
  font-size: clamp(11px, 1.15vw, 15px);
  text-shadow: 0 2px 4px #000;
}
.icon-btn {
  padding: .42vh .78vw;
  background: rgba(32, 28, 22, .38);
  border: 1px solid rgba(255, 242, 204, .22);
}

.map-party,
.ally-hud {
  position: absolute;
  left: 0.6%;
  top: 9%;
  z-index: 9;
  width: 24%;
}
.party-row,
.ally-row {
  position: relative;
  display: grid;
  grid-template-columns: 11.5% 1fr;
  align-items: center;
  height: 9.7vh;
  min-height: 44px;
  max-height: 78px;
  margin-bottom: 0.6vh;
}
.map-party {
  top: 7.4%;
  width: 6.4%;
}
.map-party .party-row {
  display: block;
  width: clamp(42px, 5.3vw, 64px);
  height: clamp(42px, 5.3vw, 64px);
  min-height: 34px;
  max-height: 64px;
  margin: 0 0 .92vh 0;
  padding: 0;
  background: transparent;
}
.map-party .row-name,
.map-party .hp-text {
  display: none;
}
.map-party .row-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1vh;
  padding: 0;
}
.map-party .hp-bar {
  width: 100%;
  height: clamp(4px, .58vw, 7px);
  margin: 0;
  border: 1px solid rgba(28, 24, 18, .72);
}
.map-party .portrait {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: block;
}
.portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(255,244,205,.55);
  box-shadow: 0 2px 8px rgba(0,0,0,.65);
}
.row-info {
  min-width: 0;
  padding-left: 0.65vw;
}
.row-name {
  display: flex;
  gap: 1vw;
  align-items: baseline;
  color: #fff;
  font-size: clamp(12px, 1.42vw, 18px);
  font-weight: 700;
  text-shadow: 0 2px 4px #000;
}
.row-name small {
  color: #e6e0ce;
  font-size: 0.9em;
}
.hp-bar {
  width: 100%;
  height: clamp(6px, 1.1vw, 12px);
  margin-top: 0.38vh;
  background: rgba(35,31,24,.68);
  box-shadow: inset 0 1px 4px #000, 0 1px 2px rgba(255,255,255,.16);
}
.hp-fill {
  height: 100%;
  background: linear-gradient(180deg, #70d66d, #228b30);
  box-shadow: inset 0 1px rgba(255,255,255,.42);
}
.hp-text {
  color: #dff8d7;
  font-size: clamp(10px, 1.08vw, 15px);
  text-shadow: 0 2px 3px #000;
}

.route-line {
  position: absolute;
  left: 16%;
  top: 51%;
  width: 23%;
  height: 1px;
  z-index: 3;
  background: rgba(247, 252, 226, 0.74);
  transform: rotate(30deg);
  box-shadow: 0 0 10px rgba(255,255,220,.5);
}
.node {
  position: absolute;
  width: 1.7vw;
  min-width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #dff8ee, #4eb9b0);
  box-shadow: 0 0 12px rgba(180,255,241,.9);
  transform: translate(-50%, -50%);
}
.node.current {
  background: radial-gradient(circle, #fff7c6, #d59b38);
  box-shadow: 0 0 0 4px rgba(255,245,190,.16), 0 0 20px rgba(255,214,112,.95);
}
.node.clear {
  background: radial-gradient(circle, #e9fff3, #50c978);
}
.node.locked {
  background: radial-gradient(circle, #8b8175, #383028);
  box-shadow: 0 0 8px rgba(0,0,0,.45);
  opacity: .58;
}
.node-a { left: 0; top: 0; }
.node-b { left: 54%; top: 0; }
.node-c { left: 100%; top: 0; }
.node.boss { background: radial-gradient(circle, #ffeeb6, #ce8d31); }

.loot-island {
  position: absolute;
  left: 30%;
  bottom: 10.5%;
  width: 39%;
  height: 20%;
  z-index: 5;
  display: grid;
  place-items: end center;
}
.coin-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 65%, #ddbc62 0 1.2%, transparent 1.4%),
    radial-gradient(circle at 27% 72%, #f2da7d 0 1.3%, transparent 1.5%),
    radial-gradient(circle at 42% 65%, #dbb557 0 1.2%, transparent 1.4%),
    radial-gradient(circle at 61% 68%, #efd47f 0 1.5%, transparent 1.7%),
    radial-gradient(circle at 80% 62%, #dab458 0 1.2%, transparent 1.4%);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
}
.boss-button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8vw;
  width: 44%;
  min-width: 150px;
  height: 31%;
  color: #fff8e1;
  font-size: clamp(14px, 1.9vw, 24px);
  font-weight: 700;
  text-shadow: 0 2px 3px #000;
  background: linear-gradient(90deg, rgba(45,45,41,.55), rgba(135,128,112,.72), rgba(45,45,41,.55));
  border: 1px solid rgba(248,236,195,.38);
  box-shadow: 0 0 12px rgba(250,235,180,.28);
}
.story-button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65vw;
  width: 34%;
  min-width: 128px;
  height: 25%;
  margin-top: .8vh;
  color: #fff8e1;
  font-size: clamp(12px, 1.45vw, 18px);
  text-shadow: 0 2px 3px #000;
  background: linear-gradient(90deg, rgba(44, 35, 27, .4), rgba(143, 118, 75, .52), rgba(44, 35, 27, .4));
  border: 1px solid rgba(248,236,195,.3);
  box-shadow: 0 0 10px rgba(250,235,180,.18);
}
.stage-panel {
  position: absolute;
  right: 3.2%;
  bottom: 12%;
  z-index: 9;
  width: min(28%, 330px);
  padding: 1.1vh .9vw;
  color: #fff8e1;
  background: linear-gradient(180deg, rgba(22,18,14,.45), rgba(0,0,0,.28));
  border: 1px solid rgba(255,237,186,.2);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.stage-panel-title {
  margin-bottom: .7vh;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: clamp(10px, 1.05vw, 14px);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.stage-list {
  display: grid;
  gap: .55vh;
}
.stage-node-button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .55vw;
  align-items: center;
  min-height: 34px;
  padding: .55vh .65vw;
  color: rgba(255,255,255,.88);
  text-align: left;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,237,186,.14);
}
.stage-node-button.current {
  color: #fff4bd;
  background: rgba(196,153,63,.25);
  border-color: rgba(255,237,186,.42);
}
.stage-node-button.locked {
  opacity: .5;
  cursor: default;
  filter: grayscale(.65);
}
.stage-node-button .stage-code {
  color: var(--gold);
  font-family: Georgia, serif;
  font-weight: 700;
}
.stage-node-button .stage-state {
  font-size: .9em;
  color: rgba(255,255,255,.66);
}
.boss-emblem {
  color: #f4efe5;
  font-size: 1.25em;
}

.story-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 62% 24%, rgba(255, 238, 192, .2), transparent 18%),
    url("assets/generated_map_bg.png") center/cover no-repeat,
    linear-gradient(130deg, #cfc0a1, #665a48 56%, #1d1914);
  filter: sepia(.54) saturate(.62) contrast(.9) brightness(.88);
  transform: scale(1.04);
}
.story-top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-top .ghost-control {
  position: absolute;
  left: 2%;
}
.story-title {
  padding: .5vh 2.4vw;
  color: #332618;
  font-size: clamp(15px, 2vw, 25px);
  font-weight: 700;
  text-shadow: 0 1px rgba(255,255,255,.55);
  background: linear-gradient(90deg, transparent, rgba(249,239,212,.8) 16%, rgba(237,222,188,.95), rgba(249,239,212,.8) 84%, transparent);
}
.story-card {
  position: absolute;
  left: 50%;
  top: 15%;
  z-index: 8;
  width: min(72%, 820px);
  transform: translateX(-50%);
  padding: clamp(18px, 3.2vw, 42px);
  color: #372a1d;
  background:
    linear-gradient(180deg, rgba(255, 248, 224, .92), rgba(213, 195, 156, .84)),
    radial-gradient(circle at 50% 0, rgba(255,255,255,.5), transparent 42%);
  border: 1px solid rgba(74, 53, 28, .35);
  box-shadow: 0 18px 46px rgba(0,0,0,.4);
}
.story-card h1 {
  margin: 0 0 1.4vh;
  font-size: clamp(22px, 3.1vw, 42px);
  letter-spacing: .02em;
}
.story-card p {
  margin: 0 0 1.2vh;
  font-size: clamp(13px, 1.55vw, 19px);
  line-height: 1.9;
}
.story-kicker {
  color: #8c5f2b;
  font-family: Georgia, serif;
  letter-spacing: .18em;
}
.story-line {
  color: #5c2f2d;
  font-weight: 700;
}
.story-controls {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 12;
  display: flex;
  gap: .8vw;
  transform: translateX(-50%);
}

.result-card {
  position: absolute;
  left: 50%;
  top: 17%;
  z-index: 9;
  width: min(68%, 740px);
  transform: translateX(-50%);
  padding: clamp(20px, 3.4vw, 44px);
  color: #382a1c;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,248,224,.94), rgba(210,189,151,.86));
  border: 1px solid rgba(74,53,28,.35);
  box-shadow: 0 18px 46px rgba(0,0,0,.44);
}
.result-card h1 {
  margin: 0 0 1vh;
  font-size: clamp(32px, 5vw, 64px);
}
.result-card p {
  margin: 0 0 2vh;
  font-size: clamp(13px, 1.55vw, 19px);
}
.reward-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
}
.reward-grid div {
  padding: 1.4vh 1vw;
  background: rgba(68,49,28,.12);
  border: 1px solid rgba(74,53,28,.2);
}
.reward-grid span {
  display: block;
  color: #7b552c;
  font-size: clamp(11px, 1.2vw, 15px);
}
.reward-grid strong {
  display: block;
  margin-top: .45vh;
  font-size: clamp(20px, 3.4vw, 42px);
}
.train-panel {
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 9;
  width: min(82%, 980px);
  height: 68%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.2vw;
}
.train-list,
.train-detail {
  padding: 1.2vw;
  background: rgba(22,18,14,.48);
  border: 1px solid rgba(255,237,186,.2);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
.train-list {
  display: grid;
  gap: .8vh;
  align-content: start;
  overflow: auto;
}
.train-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: .9vw;
  align-items: center;
  padding: .75vh .8vw;
  color: #fff6dc;
  text-align: left;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,237,186,.16);
}
.train-row.active {
  background: rgba(210,169,83,.25);
  border-color: rgba(246,225,173,.44);
}
.train-row img {
  width: 52px;
  aspect-ratio: 1;
  object-fit: cover;
}
.train-row span {
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 700;
}
.train-row small {
  color: rgba(255,255,255,.72);
}
.train-detail {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.train-detail img {
  width: clamp(86px, 11vw, 140px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(255,237,186,.34);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.train-detail h2 {
  margin: 1.4vh 0 .5vh;
  font-size: clamp(24px, 3.4vw, 44px);
}
.train-detail p {
  margin: .45vh 0;
  color: rgba(255,255,255,.86);
}
.settings-card {
  position: absolute;
  left: 50%;
  top: 17%;
  z-index: 9;
  width: min(72%, 760px);
  transform: translateX(-50%);
  padding: clamp(20px, 3.2vw, 42px);
  color: #382a1c;
  background: linear-gradient(180deg, rgba(255,248,224,.94), rgba(210,189,151,.86));
  border: 1px solid rgba(74,53,28,.35);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
}
.settings-card h1 {
  margin: 0 0 2vh;
  font-size: clamp(28px, 4vw, 52px);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  padding: 1.2vh 0;
  border-top: 1px solid rgba(74,53,28,.18);
}
.settings-row span {
  font-size: clamp(14px, 1.55vw, 20px);
  font-weight: 700;
}
.settings-actions {
  display: flex;
  gap: .7vw;
  flex-wrap: wrap;
  justify-content: end;
}
.bottom-status {
  position: absolute;
  left: 1.4%;
  bottom: 10.7%;
  z-index: 8;
  display: flex;
  gap: 1vw;
  align-items: end;
  font-size: clamp(9px, 1.15vw, 14px);
  text-shadow: 0 2px 3px #000;
}
.fort-icon {
  width: clamp(35px, 5vw, 58px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: rgba(65,61,52,.62);
  border: 1px solid rgba(255,255,255,.28);
}
.income {
  display: grid;
  grid-template-columns: auto auto;
  gap: .15vh 1.1vw;
}
.map-logline {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  z-index: 10;
  min-width: 28%;
  max-width: 72%;
  transform: translateX(-50%);
  padding: .6vh 1.2vw;
  color: rgba(255,255,255,.9);
  font-size: clamp(11px, 1.2vw, 16px);
  text-align: center;
  text-shadow: 0 2px 3px #000;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.16);
}

.battle-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 58% 20%, rgba(10,11,13,.85), transparent 19%),
    url("assets/generated_battle_bg.png") center/cover no-repeat,
    linear-gradient(120deg, #d3c7af, #4a3e37 50%, #171718);
  filter: sepia(.2) grayscale(.16) contrast(.86) brightness(.98);
  transform: scale(1.04);
}
.smoke-layer {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(0,0,0,.72), transparent 24%),
    radial-gradient(ellipse at 61% 42%, rgba(255,244,219,.24), transparent 37%),
    radial-gradient(ellipse at 28% 82%, rgba(206,192,165,.38), transparent 38%);
  mix-blend-mode: multiply;
}
.battle-top {
  height: 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2%;
}
.ghost-control {
  position: relative;
  z-index: 12;
  padding: .5vh 1vw;
  background: rgba(20,20,18,.22);
  border: 1px solid rgba(255,255,255,.22);
}
.turn-stone.battle {
  position: static;
  transform: none;
  z-index: 12;
}
.battle-screen .ally-hud { top: 7.5%; width: 23%; }
.enemy-hud {
  position: absolute;
  right: 1.1%;
  top: 8.4%;
  z-index: 9;
  width: 25.8%;
}
.enemy-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 17%;
  align-items: center;
  min-height: 86px;
  margin-bottom: 2.6vh;
  color: #db7e6f;
  text-shadow: 0 2px 3px #000;
}
.enemy-info {
  text-align: right;
  padding-right: .8vw;
}
.enemy-name {
  color: #cf6a55;
  font-weight: 700;
  font-size: clamp(12px, 1.45vw, 18px);
}
.enemy-hp-text {
  color: #c55a4e;
  font-size: clamp(11px, 1.15vw, 15px);
}
.enemy-portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(1) contrast(.75) brightness(.55);
  opacity: .82;
}
.enemy-hp {
  height: clamp(5px, .8vw, 9px);
  margin-top: .8vh;
  background: rgba(44,24,22,.7);
}
.enemy-hp .hp-fill {
  background: linear-gradient(180deg, #8b3e34, #3f1c19);
}
.cinematic-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 60%;
  height: 91%;
  transform: translate(-50%, -45%);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cinematic-stage img,
.cinematic-stage video {
  position: absolute;
  max-width: 100%;
  max-height: 115%;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.56));
  opacity: 0;
  transform: translateY(1.5vh) scale(.985);
  transition: opacity .16s ease, transform .2s ease;
}
.cinematic-stage img.show,
.cinematic-stage video.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cinematic-stage video { display: none; }
.skill-caption {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  padding: .55vh 1.2vw;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.22);
  text-shadow: 0 2px 3px #000;
  font-size: clamp(12px, 1.35vw, 18px);
}
.damage-pop {
  position: absolute;
  right: 11%;
  top: 30%;
  color: #c94c52;
  font-family: Georgia, serif;
  font-size: clamp(22px, 4.2vw, 54px);
  font-weight: 700;
  text-shadow: 0 2px 2px #fff, 0 4px 8px #000;
  opacity: 0;
  transition: opacity .18s, transform .18s;
}
.damage-pop.show {
  opacity: 1;
  transform: translateY(-.8vh);
}
.battle-controls {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 12;
  display: flex;
  gap: .8vw;
  transform: translateX(-50%);
}
.skill-control {
  min-width: clamp(94px, 12vw, 150px);
  padding: .8vh 1vw;
  color: #fff6dc;
  font-size: clamp(12px, 1.25vw, 16px);
  text-shadow: 0 2px 3px #000;
  background: linear-gradient(90deg, rgba(31,27,23,.46), rgba(128,111,84,.58), rgba(31,27,23,.46));
  border: 1px solid rgba(246,225,173,.28);
}
.skill-control.accent { color: #fff0ba; }
.skill-control.danger { color: #ffd2cd; }
.skill-control:disabled { opacity: .42; cursor: default; }
.skill-control.unavailable {
  opacity: .68;
  filter: grayscale(.2);
}
.battle-logline {
  position: absolute;
  left: 50%;
  bottom: 10.5%;
  z-index: 11;
  min-width: 28%;
  max-width: 58%;
  transform: translateX(-50%);
  padding: .55vh 1vw;
  color: rgba(255,255,255,.86);
  font-size: clamp(11px, 1.15vw, 15px);
  text-align: center;
  text-shadow: 0 2px 3px #000;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
}
.skill-control.active {
  color: #fff;
  box-shadow: 0 0 16px rgba(235,205,126,.45);
}
.ally-row.acting,
.enemy-row.acting {
  background: linear-gradient(90deg, rgba(238,207,111,.16), transparent);
}
.ally-row.targeted,
.enemy-row.targeted {
  background: linear-gradient(90deg, rgba(198,72,61,.18), transparent);
}
.ally-row.acting .portrait,
.enemy-row.acting .enemy-portrait {
  box-shadow: 0 0 0 2px rgba(246,215,120,.72), 0 0 18px rgba(246,215,120,.44);
}
.ally-row.targeted .portrait,
.enemy-row.targeted .enemy-portrait {
  box-shadow: 0 0 0 2px rgba(215,80,72,.72), 0 0 16px rgba(215,80,72,.42);
}

[hidden] { display: none !important; }

@media (max-aspect-ratio: 1/1) {
  .screen {
    width: 100vw;
    height: 100vh;
  }
  .map-party,
  .ally-hud { width: 40%; }
  .enemy-hud { width: 38%; }
  .cinematic-stage { width: 82%; height: 72%; }
  .bottom-status { display: none; }
  .stage-panel { left: 50%; right: auto; bottom: 20%; width: 82%; transform: translateX(-50%); }
  .home-top { display: block; }
  .home-resources { justify-content: start; margin-top: 1vh; }
  .home-hero img { right: -5%; max-width: 70%; opacity: .72; }
  .home-copy { width: 70%; }
  .home-actions,
  .story-controls { flex-wrap: wrap; width: 92%; justify-content: center; }
  .train-panel { grid-template-columns: 1fr; height: 72%; overflow: auto; }
  .reward-grid { grid-template-columns: 1fr; }
  .settings-row { display: grid; }
  .settings-actions { justify-content: start; }
}