body.has-prologue {
  background: #100e0c;
}
.has-prologue :is(.header,.footer,#experience-hud,#map-host,#city-chat) { display: none; }
.has-prologue #main { width: 100%; min-height: 100svh; padding: 0; }
.prologue {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100svh;
  background: #191512 url('locations/novgorod-prologue.webp') center 48% / cover no-repeat;
}
.prologue::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,#100e0bea 0%,#100e0bad 37%,transparent 73%),
    linear-gradient(0deg,#0d0b0bee 0%,transparent 73%),linear-gradient(180deg,#140f0c70,transparent 27%);
}
.prologue-copy {
  width: min(100%,770px);
  padding: clamp(25px,7vw,112px);
  color: #f5e8d8;
}
.prologue-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  position: absolute;
  top: clamp(18px,4vw,55px);
  left: clamp(25px,7vw,112px);
  color: #ffe1b5;
  font: 700 clamp(19px,3vw,29px)/1.15 var(--serif);
}
.prologue-brand img { object-fit: contain; }
.prologue-copy .eyebrow { color: #f0c896; }
.prologue-copy h1 { font: 700 clamp(52px,8vw,112px)/.95 var(--serif); margin: 15px 0 19px; }
.prologue-copy > p:not(.eyebrow) { max-width: 35em; color: #f4e0ca; font-size: clamp(15px,2.2vw,19px); line-height: 1.55; }
.prologue-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.prologue-actions .button { min-height: 46px; padding: 9px 17px; background-color: #18120edc; }
.prologue-actions .button.primary { background: #b27b50; color: #130d0a; }
.prologue-actions .button span { margin-right: 5px; color: #e6b17b; }
.prologue-player[open] {
  position: fixed;
  inset: 0;
  display: grid;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  grid-template-columns: minmax(0, min(100%,960px));
  place-content: center;
  gap: 8px;
  background: #100e0cf5;
  padding: clamp(9px,3vw,26px);
}
.prologue-player > .button { justify-self: end; }
.prologue-player video { display: block; width: 100%; max-height: 78svh; background: #000; }
.is-registration.character-dialog { width: min(94vw,580px); padding: clamp(13px,3vw,29px); }
.is-registration .character-head { margin-bottom: 11px; }
.arrival-dialogue {
  font: 500 clamp(17px,2.6vw,23px)/1.24 var(--serif);
  background: #2c2017;
  border-left: 2px solid #b27b50;
  color: #f0d9c0;
  padding: 10px 13px;
}
.is-registration :is(.hero-settings input,.hero-settings select) { min-height: 42px; }
.is-registration .hero-choices { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.is-registration .hero-choices button { padding: 5px 2px; font-size: clamp(9px,2vw,12px); }
.is-registration .hero-choices img { width: 100%; height: 60px; object-fit: contain; }
.is-registration .hair-model { max-width: 132px; }
.is-registration .hero-settings .actions { flex-wrap: wrap; }

.battle-layout { grid-template-columns: minmax(0,1fr) minmax(220px,292px); gap: 14px; }
.battle-layout .combat-stage { min-height: 0; grid-template-rows: auto 1fr auto; border-color: #8c6040; background-position: center 60%; }
.battle-layout .combat-stage::before { background: linear-gradient(180deg,#130d0bee 0%,#1b130c90 27%,#19100c2b 51%,#180f0bd9 100%); }
.battle-layout .combat-top { align-items: start; padding: 13px clamp(10px,2vw,19px) 0; }
.combat-top .eyebrow { letter-spacing: .13em; }
.combat-top h1 { font-size: clamp(29px,4vw,48px); margin-top: 3px; }
.combat-top .combat-leave { font-size: .76rem; min-height: 35px; padding-inline: 8px; }
.combat-top .arena-clocks {
  display: grid;
  gap: 2px;
  justify-items: center;
  border: 1px solid #8c6545;
  background: #1c140fdf;
  padding: 5px 10px;
  font-size: .69rem;
  line-height: 1.1;
  color: #ecd4ba;
  white-space: nowrap;
}
.combat-top .arena-clocks b { font-size: clamp(20px,3vw,28px); line-height: 1; color: #f4c28b; font-variant-numeric: tabular-nums; }
.combat-top .arena-clocks small { color: #cbb29a; font-size: .65rem; }
.battle-layout .sides { padding: 0 clamp(5px,2vw,18px) 12px; gap: clamp(6px,2.5vw,31px); }
.battle-layout .side { gap: 4px; }
.battle-layout .sides.duel .avatar { width: min(82%,240px); }
.battle-layout .sprite { height: clamp(100px,15vw,194px); }
.battle-layout .avatar-text {
  padding: 5px clamp(3px,1.3vw,10px) 8px;
  background: #19110fec;
  border: 1px solid #8a6243;
  box-shadow: 0 6px 13px #0005;
}
.battle-layout .avatar.is-target .avatar-text { border-color: #edbb80; box-shadow: inset 0 2px #c88953,0 6px 13px #0005; }
.battle-layout .avatar.ally.player .avatar-text { border-color: #91a273; }
.battle-layout .avatar-text b { font-size: clamp(.65rem,1.6vw,1.08rem); }
.battle-layout .avatar-text small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 3px; font-size: clamp(.58rem,1vw,.76rem); }
.battle-layout .avatar-text small strong { color: #f2e1ce; white-space: nowrap; }
.fighter-role { display: block; margin-bottom: 2px; font-size: clamp(.53rem,1vw,.67rem); line-height: 1.18; text-transform: uppercase; color: #e0b892; }
.battle-layout .arena-foot { padding-top: 0; }
.battle-layout .combat-stage:has(.result) { min-height: 310px; }
.battle-layout .result h2 { font-size: clamp(41px,8vw,77px); }
.battle-layout .result p { margin: 0; }
.battle-layout .result .actions { flex-wrap: wrap; }
.combat-actions { padding: clamp(9px,2vw,17px); }
.round-heading { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-bottom: 7px; }
.round-heading .target-chooser { display: flex; align-items: center; gap: 7px; font-size: .75rem; }
.round-heading .target-chooser select { max-width: min(35vw,180px); }
.round-section {
  min-width: 0;
  margin: 0;
  border: 1px solid #594432;
  padding: 6px 8px 8px;
  background: #1c1510;
}
.round-section legend { padding: 0 5px; color: #eec29a; font: 700 1.05rem/1.1 var(--serif); }
.round-section legend span { margin-left: 3px; color: #d3c1a6; font: .68rem var(--sans); }
.move-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.move-grid .move-tile {
  display: grid;
  min-height: 49px;
  align-items: center;
  grid-template-columns: 20px minmax(0,1fr) auto;
  gap: 2px;
  background: #281d15;
  border-color: #67503a;
  padding: 4px;
  color: #eae0d2;
}
.move-tile[aria-pressed=true] { color: #ffe2b4; border-color: #e0ad72; background: #443022; box-shadow: inset 0 2px #cc975e; }
.move-tile > span { font-size: 1.15rem; color: #e9b27d; }
.move-tile b { font-size: clamp(.66rem,1.15vw,.9rem); line-height: 1.08; }
.move-tile small { color: #dfbd94; font-variant-numeric: tabular-nums; }
.round-hint { margin: 6px 0 0; min-height: 1.15em; }
.round-zones { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 7px; }
.round-zones .round-section { display: block; }
.round-zones .zone-buttons { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.round-zones .zone-buttons .button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 42px;
  padding: 3px 1px;
  font-size: clamp(.65rem,1.18vw,.82rem);
  background-color: #2a1e17;
}
.round-zones .zone-buttons span { font-size: .9rem; line-height: 1; color: #dca873; }
.round-zones .strike-row button[aria-pressed=true] { background-color: #672d24; }
.round-zones .guard-row button[aria-pressed=true] { background-color: #38412b; }
.round-zones p { margin: 6px 0 0; }
.round-zones .dodge-btn { min-height: 31px; padding: 3px 8px; margin-top: 5px; font-size: .76rem; }
.dodge-btn span { color: #e4bf92; margin-left: 3px; }
.round-footer { margin-top: 8px; padding-top: 7px; border-top: 1px solid #563c2a; }
.round-energy { display: grid; gap: 2px; color: #efcca3; font-variant-numeric: tabular-nums; }
.round-energy small { color: #d3b89d; }
.round-footer .button { min-height: 42px; }
.round-status { border-color: #8c6040; }
.round-status p { margin: 4px 0 0; }
.battle-layout .log details { border: 1px solid #503a2a; padding: 6px 8px; background: #17110d; }
.battle-layout .log li { border-left: 2px solid #62503f; padding-left: 6px; list-style: none; margin: 5px 0; }
.battle-layout .log ul { padding: 0; }
.battle-layout .log li.log-dealt { border-color: #aab979; }
.battle-layout .log li.log-taken { border-color: #ca7f65; }
.roster-list .is-assigned > div { border-color: #c69363; background: #38271d; }

@media (max-width: 920px) {
  .move-grid .move-tile { grid-template-columns: 1fr auto; }
  .move-tile > span { grid-column: 1 / -1; }
}
@media (max-width: 790px) {
  .battle-layout { grid-template-columns: minmax(0,1fr); }
  .battle-layout .combat-sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .battle-layout .combat-sidebar .log { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .prologue { background-position: 62% center; }
  .prologue::before { background: linear-gradient(0deg,#100d0bee 6%,#100d0bcb 38%,#0f0c0a0a 78%),linear-gradient(180deg,#130e09b3,transparent 33%); }
  .prologue-copy { padding-bottom: max(31px,env(safe-area-inset-bottom)); }
  .battle-layout .sprite { height: clamp(100px,31vw,160px); }
  .battle-layout .sides.duel .avatar { width: 90%; }
  .battle-layout .combat-top { padding-top: 8px; }
  .combat-top .eyebrow { font-size: .62rem; letter-spacing: .06em; }
  .move-grid .move-tile { grid-template-columns: 1fr; gap: 1px; padding: 4px 0; }
  .move-tile > span { grid-column: auto; }
  .move-tile small { font-size: .65rem; }
  .round-zones .zone-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .round-zones .zone-buttons .button { min-height: 38px; }
  .battle-layout .result .actions .button { min-height: 34px; padding-inline: 6px; font-size: .77rem; }
}
@media (prefers-reduced-motion:reduce) {
  .battle-layout .avatar :is(img,i) { animation: none; transition: none; }
}