:root{
    --bg:#070b0f;
    --panel:#0d141b;
    --panel2:#111b24;
    --line:#6f7e8b;
    --dash:#7f93a5;
    --text:#d8e0e7;
    --muted:#8d9aa5;
    --accent:#b78a42;
    --gap:10px;
    --radius:14px;
  }

  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    background:
      radial-gradient(circle at 50% 0%, #14202a 0%, #0a1015 36%, var(--bg) 75%);
    color:var(--text);
    font-family:Inter,Segoe UI,Arial,sans-serif;
    overflow:hidden;
  }

  .stage{
    width:100vw;
    height:100vh;
    display:grid;
    place-items:center;
    padding:16px;
  }

  /* Внешняя "всплывающая" оболочка */
  .modal{
    position:relative;
    width:min(1500px, 96vw);
    height:min(900px, 94vh);
    min-height:620px;
    background:linear-gradient(180deg,#101820,#0b1218);
    border:1px solid #3a4b58;
    border-radius:16px;
    box-shadow:0 24px 80px rgba(0,0,0,.5);
    overflow:hidden;
  }

  .content{
    position:relative;
    height:100%;
    padding:12px;
    display:grid;
    grid-template-rows:64px 1fr;
    gap:var(--gap);
  }

  /* Верхняя навигация */
  .topnav{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
  }

  .top-corner{
    position:absolute;
    top:-7px;
    width:30px;
    height:30px;
    z-index:10;
    display:grid;
    place-items:center;
    border:1px solid #9a743b;
    background:#111820;
    color:#d4b271;
    transform:rotate(45deg);
    box-shadow:0 0 0 2px rgba(0,0,0,.28);
  }

  .top-corner.left{left:-7px}
  .top-corner.right{right:-7px;cursor:pointer}

  .top-corner span{
    transform:rotate(-45deg);
    display:block;
    font-size:17px;
    line-height:1;
  }

  .top-corner.left span{
    font-size:13px;
    opacity:.7;
  }

  .navitem{
    border:2px dashed var(--dash);
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#b9c4cc;
    font-size:14px;
    letter-spacing:.04em;
    background:rgba(255,255,255,.015);
  }

  .navitem.active{
    border-color:#c69a50;
    color:#e1c28c;
    background:rgba(183,138,66,.07);
  }

  /* Основная композиция боя */
  .battle-shell{
    min-height:0;
    display:grid;
    grid-template-columns:minmax(220px, 18%) minmax(0,1fr) minmax(220px,18%);
    gap:var(--gap);
  }

  .side{
    min-width:0;
    border:2px dashed var(--dash);
    border-radius:10px;
    padding:10px;
    display:grid;
    grid-template-rows:34% 24% 16% 1fr;
    gap:8px;
    background:rgba(255,255,255,.012);
  }

  .slot{
    border:1px dashed #5f7383;
    border-radius:8px;
    display:grid;
    place-items:center;
    text-align:center;
    padding:8px;
    color:#9ba9b4;
    font-size:13px;
    min-height:0;
  }

  .slot small{
    display:block;
    color:#64727d;
    margin-top:5px;
    font-size:11px;
  }

  .center{
    min-width:0;
    display:grid;
    grid-template-rows:54px minmax(0,1fr) 210px;
    gap:8px;
    position:relative;
  }

  .versus{
    border:2px dashed var(--dash);
    border-radius:8px;
    display:grid;
    grid-template-columns:1fr 78px 1fr;
    align-items:center;
    text-align:center;
    color:#aab7c0;
  }

  .vs{
    height:42px;
    width:56px;
    border:1px dashed #b58e50;
    border-radius:8px;
    display:grid;
    place-items:center;
    justify-self:center;
    color:#d1b47f;
    font-weight:700;
    letter-spacing:.08em;
  }

  .arena{
    position:relative;
    border:2px dashed var(--dash);
    border-radius:10px;
    display:grid;
    place-items:center;
    color:#9aa8b3;
    min-height:0;
    overflow:hidden;
    background:
      linear-gradient(rgba(255,255,255,.015),rgba(255,255,255,.015)),
      repeating-linear-gradient(45deg,transparent 0 22px,rgba(255,255,255,.012) 22px 23px);
  }



  .controls{
    position:relative;
    border:2px dashed var(--dash);
    border-radius:10px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:42px;
    padding:38px 28px 18px;
  }

  .control-block{
    border:1px dashed #596f7f;
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#93a1ac;
    text-align:center;
  }

  /* Кнопка "В бой" перекрывает границу реплик/управления */
  .fight-btn{
    position:absolute;
    top:-26px;
    left:50%;
    transform:translateX(-50%);
    width:250px;
    height:54px;
    border:2px dashed #d0a257;
    border-radius:12px;
    background:#321b1b;
    color:#e8d0a7;
    display:grid;
    place-items:center;
    z-index:5;
    font-weight:800;
    letter-spacing:.13em;
  }



  @media (max-width: 1050px){
    .modal{width:98vw;height:96vh}
    .battle-shell{grid-template-columns:180px 1fr 180px}
    .center{grid-template-rows:48px 1fr 64px 190px}
  }

  /* На телефоне боковые зоны скрываются — центральная часть остаётся жизнеспособной */
  @media (max-width: 760px){
    body{overflow:auto}
    .stage{padding:0;min-height:100vh;height:auto}
    .modal{
      width:100vw;
      height:100vh;
      min-height:680px;
      border-radius:0;
      border:0;
    }
    .content{grid-template-rows:58px 1fr;padding:8px}
    .topnav{grid-template-columns:repeat(5,1fr);gap:4px}
    .navitem{font-size:10px}
    .battle-shell{grid-template-columns:1fr}
    .side{display:none}
    .center{grid-template-rows:48px 1fr 190px}
    .fight-btn{width:210px}
  }

  /* Nine-slice SVG: one SVG viewBox unit = one CSS pixel in the corners.
     Corner crops: 18 x 24 units, rendered at 150% (27 x 36px). All five panels use identical fixed corners.
     Only the four straight edge strips stretch; the center stays transparent.
     The transparent original 2px border preserves the template box geometry. */
  .side, .versus, .arena, .controls {
    position:relative;
    border-color:transparent;
    border-radius:0;
  }
  .side::after, .versus::after, .arena::after, .controls::after {
    content:"";
    position:absolute;
    inset:-2px;
    z-index:3;
    pointer-events:none;
    border-style:solid;
    border-color:transparent;
    border-width:36px 27px;
    border-image-source:url("../media/ui/frame_outer.svg");
    border-image-slice:24.154628268322% 25.157478477672%;
    border-image-width:36px 27px;
    border-image-repeat:stretch;
  }
  .arena {overflow:visible;}
  /* Correct the obsolete fourth track in the supplied tablet breakpoint.
     48px is the minimum that fits two unchanged 24px corner crops. */
  @media (min-width:761px) and (max-width:1050px) {
    .center {grid-template-rows:54px minmax(0,1fr) 190px;}
  }

  /* Keep the enlarged corner crops full size even on the short VS strip. */
  .center {grid-template-rows:76px minmax(0,1fr) 210px;}
  .side {padding:16px;}
  .slot, .vs, .control-block {border-color:transparent;border-radius:0;position:relative;}
  .controls {gap:24px;padding:30px 20px 12px;}
  .control-block {display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;}
  .control-block h2 {font:600 17px Georgia,serif;color:#dfbd77;margin:0;line-height:22px;}
  .thin-frame {position:absolute;inset:0;display:grid;grid-template-columns:21.6px minmax(0,1fr) 21.6px minmax(0,1fr) 21.6px;grid-template-rows:24px minmax(0,1fr) 24px;pointer-events:none;z-index:2;}
  .thin-frame svg {display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;}
  .direction-pad {position:relative;width:176px;height:122px;flex:none;}
  .direction {position:absolute;width:54px;height:54px;border:0;padding:0;background:none;border-radius:50%;cursor:pointer;transition:filter .12s,translate .12s;}
  .direction img {width:100%;height:100%;display:block;pointer-events:none;}
  .direction.up {left:61px;top:5px;}
  .direction.left {left:0;top:45px;}
  .direction.right {right:0;top:45px;}
  .direction.thrust {left:61px;top:68px;}
  .direction:hover {filter:brightness(1.2);}
  .direction:focus-visible {outline:2px solid #fff0bd;outline-offset:3px;}
  .direction[aria-pressed="true"] {filter:brightness(1.25) drop-shadow(0 0 4px #e3b75c);}
  .direction:active {translate:0 1px;}
  @media (min-width:761px) and (max-width:1050px) {
    .battle-shell {grid-template-columns:160px minmax(0,1fr) 160px;}
    .controls {gap:8px;padding-left:10px;padding-right:10px;}
  }
  @media(max-width:1050px) {
    .controls {gap:6px;padding-left:6px;padding-right:6px;}
    .direction-pad {width:152px;height:114px;}
    .direction {width:48px;height:48px;}
    .direction.up {left:52px;}
    .direction.left,.direction.right {top:42px;}
    .direction.thrust {left:52px;top:66px;}
    .center {grid-template-rows:76px minmax(0,1fr) 210px;}
  }
@media(max-width:360px) {
.direction-pad {width:136px;height:108px;}
.direction {width:44px;height:44px;}
.direction.up,.direction.thrust {left:46px;}
.direction.left,.direction.right {top:40px;}
.direction.thrust {top:64px;}
}

  .vs {width:72px;height:52px;}
  .navitem,.navitem.active {position:relative;border:0;border-radius:0;background:none;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 24px;color:#d9ccb5;font:600 20px Georgia,serif;letter-spacing:0;cursor:pointer;isolation:isolate;min-width:0;}
  .navitem.active {color:#fff0cf;}
  .nav-icon {width:30px;height:32px;object-fit:contain;flex:none;}
  .nav-skin {position:absolute;inset:0;display:grid;grid-template-columns:25.6px minmax(0,1fr) 25.6px;z-index:-1;pointer-events:none;}
  .nav-skin svg {width:100%;height:100%;min-width:0;display:block;}
  .navitem:focus-visible,.fight-btn:focus-visible {outline:2px solid #f2d696;outline-offset:2px;}
  .navitem:hover {filter:brightness(1.13);}
  .fight-btn {width:268px;height:auto;aspect-ratio:171.92667/51.007978;top:-40px;border:0;border-radius:0;background:none;padding:0;cursor:pointer;font:800 22px Georgia,serif;letter-spacing:.08em;color:#fff1cf;}
  .fight-btn img {position:absolute;inset:0;width:100%;height:100%;}
  .fight-btn span {position:relative;z-index:1;}
  .fight-btn:hover {filter:brightness(1.1);}
  .fight-btn:active {filter:brightness(.9);}
  .controls {padding-top:38px;}
  @media(max-width:1050px) {.navitem {font-size:16px;gap:6px;padding:8px 18px;}.nav-icon {width:24px;height:28px;}}
  @media(max-width:760px) {
    .navitem {flex-direction:column;gap:2px;font-size:12px;padding:5px 6px;}
    .nav-icon {width:22px;height:23px;}
    .nav-skin {grid-template-columns:23.2px minmax(0,1fr) 23.2px;}
    .fight-btn {width:230px;top:-34px;font-size:20px;}
  }

  .vs {width:104px;height:96px;border:0;background:none;position:relative;z-index:4;}
  .vs img {display:block;width:100%;height:100%;object-fit:contain;}

  /* The framed screen reserves the center for the future turn summary. */
  .center {container-type:inline-size;grid-template-rows:76px minmax(0,1fr) auto;}
  .controls {min-height:210px;grid-template-columns:176px minmax(0,1fr) 176px;gap:18px;padding:38px 100px 16px;align-items:center;}
  .control-block {align-items:center;grid-row:1;z-index:1;}
  .control-block[aria-label="АТАКА"] {grid-column:1;}
  .control-block[aria-label="ЗАЩИТА"] {grid-column:3;}
  .turn-summary {grid-column:2;grid-row:1;align-self:start;position:relative;justify-self:center;width:max(66px,calc(100% - 24px));height:112px;min-width:0;border:0;border-radius:0;background:rgba(4,10,15,.2);}
  .control-vine {position:absolute;bottom:18px;width:43px;height:74.5px;object-fit:contain;pointer-events:none;user-select:none;opacity:.8;}
  .control-vine-left {left:12px;transform:rotate(180deg);}
  .control-vine-right {right:12px;transform:scaleX(-1) rotate(180deg);}
  @container (max-width:700px) {
    .controls {grid-template-columns:152px minmax(0,1fr) 152px;padding-left:64px;padding-right:64px;gap:12px;}
    .control-vine {width:25px;height:67.5px;bottom:18px;}
    .control-vine-left {left:10px;}.control-vine-right {right:10px;}
    .direction-pad {width:152px;height:114px;}
    .direction {width:48px;height:48px;}
    .direction.up {left:52px;top:0;}
    .direction.left,.direction.right {top:42px;}
    .direction.thrust {left:52px;top:66px;}
  }
  @container (max-width:540px) {
    .controls {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 20px;padding:38px 30px 18px;}
    .control-block[aria-label="ЗАЩИТА"] {grid-column:2;}
    .turn-summary {grid-column:1 / -1;grid-row:2;height:76px;}
    .control-vine {width:14px;height:50px;bottom:18px;opacity:.65;}
    .control-vine-left {left:3px;}.control-vine-right {right:3px;}
  }
  @container (max-width:380px) {
    .controls {padding-left:17px;padding-right:17px;column-gap:8px;}
    .direction-pad {width:128px;height:108px;}
    .direction {width:44px;height:44px;}
    .direction.up,.direction.thrust {left:42px;}
    .direction.left,.direction.right {top:40px;}
    .direction.thrust {top:64px;}
    .control-vine {width:9px;height:50px;opacity:.5;}
  }
  .direction-pad .direction.up,.direction-pad .direction.thrust {left:50%;transform:translateX(-50%);}

  /* Shared width keeps the fight button and turn memory aligned. */
  .controls {--memory-width:clamp(160px,32cqw,288px);min-height:198px;grid-template-columns:minmax(0,1fr) var(--memory-width) minmax(0,1fr);gap:24px;padding:30px 64px 10px;}
  .turn-summary {width:var(--memory-width);height:auto;align-self:stretch;}
  .fight-btn {width:var(--memory-width);height:76px;aspect-ratio:auto;top:-48px;}
  .navitem::after,.fight-btn::after {content:"";position:absolute;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(255,94,31,.48) 0%,rgba(242,36,14,.24) 45%,transparent 76%);mix-blend-mode:screen;transition:opacity .18s ease;}
  .navitem::after {inset:9px 20px;z-index:0;}
  .navitem > .nav-icon,.navitem > span:not(.nav-skin) {position:relative;z-index:1;}
  .navitem.active::after {opacity:.7;}
  .fight-btn::after {inset:19% 12%;z-index:0;}
  .fight-btn:active {filter:none;}
  .fight-btn:active::after,.fight-btn.is-glowing::after {opacity:.85;}
  @container(max-width:700px) {
    .controls {padding-left:36px;padding-right:36px;gap:16px;}
  }
  @container(max-width:640px) {
    .controls {grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:38px 24px 10px;gap:12px 20px;}
    .control-block[aria-label="ЗАЩИТА"] {grid-column:2;}
    .turn-summary {grid-column:1 / -1;grid-row:2;height:112px;}
    .fight-btn {height:66px;top:-40px;}
  }
  @container(max-width:380px) {
    .controls {padding-left:17px;padding-right:17px;column-gap:8px;}
  }
  @media(prefers-reduced-motion:reduce) {.navitem::after,.fight-btn::after {transition:none;}}


/* Integrated corner controls: no separate title bar. */
.modal.is-closed { opacity:0; transform:scale(.985); pointer-events:none; transition:opacity .16s ease, transform .16s ease; }
.corner-control {
  position:absolute;
  top:5px;
  width:27px;
  height:27px;
  z-index:30;
  display:grid;
  place-items:center;
  border:1px solid rgba(190,150,82,.72);
  background:rgba(10,16,21,.88);
  color:#d7b978;
  transform:rotate(45deg);
  box-shadow:0 1px 5px rgba(0,0,0,.38);
}
.corner-control > span { transform:rotate(-45deg); display:block; line-height:1; }
.corner-ornament { left:5px; pointer-events:none; opacity:.72; }
.corner-ornament > span { font-size:12px; }
.corner-close { right:5px; padding:0; cursor:pointer; }
.corner-close > span { font-size:17px; margin-top:-1px; }
.corner-close:hover { filter:brightness(1.25); }
.corner-close:focus-visible { outline:2px solid #f2d696; outline-offset:3px; }

/* Corner controls are overlays only: they must not change the navigation geometry.
   The five nav buttons keep the full row width and simply pass underneath them. */
.topnav { padding-inline:0; }

@media (max-width:760px) {
  .corner-control { width:24px; height:24px; top:4px; }
  .corner-ornament { left:4px; }
  .corner-close { right:4px; }
  .topnav { padding-inline:0; }
}

@media (prefers-reduced-motion:reduce) {
  .modal.is-closed { transition:none; }
}


/* GF4-ARENA-GODOT-FIT-V1
   Контрольная примерка существующей Godot-сцены.
   Родной рабочий размер: 700 x 395 px.
   Без масштабирования: верхняя граница + центр по горизонтали.
*/
.arena-game {
  position: absolute;
  top: 0;
  left: 50%;
  width: 700px;
  height: 395px;
  transform: translateX(-50%);
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  background: #000;
  z-index: 1;
}


/* ==========================================================
   GF4-RISTALISCHE-LAYOUT-V2

   Desktop control composition:
   - окно в габарите остальных GF4-модалок;
   - Godot arena = 700 x 395, без масштабирования;
   - боковины немного шире;
   - нижняя полка выше;
   - Атака / журнал+чат / Защита;
   - "В БОЙ" нависает на нижнюю часть арены.
   ========================================================== */


/* Сам журнал / короткий чат */
.battle-console {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-width:0;

  display:grid;
  grid-template-rows:22px minmax(0,1fr) 31px;

  padding:10px 14px 11px;

  color:#cfbea0;
  font-family:Georgia, "Times New Roman", serif;
}

.battle-console-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:0 2px;

  color:#dcbc76;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
}

.battle-score {
  color:#a99370;
  font-variant-numeric:tabular-nums;
}

.battle-console-log {
  min-height:0;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:5px 3px 7px;

  font-family:Inter, "Segoe UI", Arial, sans-serif;
  font-size:12px;
  line-height:1.35;
  color:#9da9b2;
}

.battle-system-line {
  opacity:.72;
}

.battle-chat {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 30px;
  gap:5px;
}

.battle-chat input {
  width:100%;
  min-width:0;
  height:30px;

  border:1px solid rgba(155,122,66,.45);
  border-radius:3px;

  padding:0 9px;

  background:rgba(5,10,14,.62);
  color:#ddd1bb;

  font:12px Inter, "Segoe UI", Arial, sans-serif;

  outline:none;
}

.battle-chat input::placeholder {
  color:#65717a;
}

.battle-chat input:focus {
  border-color:rgba(203,160,83,.78);
}

.battle-chat button {
  width:30px;
  height:30px;
  padding:0;

  border:1px solid rgba(155,122,66,.45);
  border-radius:3px;

  background:rgba(38,25,13,.55);
  color:#d9b870;

  font:700 20px Georgia,serif;
  line-height:1;

  cursor:pointer;
}

.battle-chat button:hover {
  filter:brightness(1.18);
}


/* Главная desktop-композиция */
@media (min-width:1051px) {

  /*
    Габарит приводим примерно к остальным большим окнам GF4.
    При небольшом экране автоматически ужимается по viewport.
  */
  .modal {
    width:min(1230px, calc(100vw - 30px));
    height:min(834px, calc(100vh - 30px));
    min-height:700px;
  }

  .content {
    padding:12px;
    grid-template-rows:64px 1fr;
    gap:10px;
  }

  /*
    При ширине 1230:
      ~190 + ~806 + ~190
    Центральной части хватает для арены 700px с воздухом.
  */
  .battle-shell {
    grid-template-columns:202px minmax(0,1fr) 202px;
    gap:10px;
  }

  .side {
    padding:14px;
  }

  /*
    76 — верхняя VS-полка
    420 — экран боя под 700x395
    остаток — нижняя панель
  */
  .center {
    grid-template-rows:76px 410px minmax(226px,1fr);
    gap:8px;
  }

  /*
    Родная боевая сцена остаётся неизменной.
    Центр по горизонтали, верхняя привязка.
  */
  .arena-game {
    top:0;
    left:50%;
    width:700px;
    height:395px;
    transform:translateX(-50%);
  }

  /*
    Нижняя полка:
      176 атака
      300 журнал/чат
      176 защита

    Кнопки направлений НЕ уменьшаем.
  */
  .controls {
    --memory-width:316px;

    min-height:0;

    grid-template-columns:
      176px
      var(--memory-width)
      176px;

    justify-content:center;
    align-items:center;

    gap:12px;

    padding:28px 18px 12px;
  }

  .control-block {
    width:176px;
    min-width:176px;
  }

  .control-block[aria-label="АТАКА"] {
    grid-column:1;
  }

  .control-block[aria-label="ЗАЩИТА"] {
    grid-column:3;
  }

  .direction-pad {
    width:176px;
    height:122px;
  }

  .direction {
    width:54px;
    height:54px;
  }

  .direction.up {
    top:0;
  }

  .direction.left,
  .direction.right {
    top:45px;
  }

  .direction.thrust {
    top:68px;
  }

  /*
    Центральный блок оставляем широким.
    Теперь это уже не просто "сводка хода",
    а журнал боя + две-три реплики.
  */
  .turn-summary {
    grid-column:2;
    grid-row:1;

    width:316px;
    height:178px;

    align-self:center;
    justify-self:center;

    background:rgba(4,10,15,.30);
  }

  /*
    В БОЙ снова заметно залезает на нижнюю часть арены.
    Ширина совпадает с центральным журналом.
  */
  .fight-btn {
    width:300px;
    height:76px;

    top:-56px;

    aspect-ratio:auto;
  }

  /*
    Декор пока не удаляем, а просто прячем в углы,
    чтобы он не участвовал в оценке геометрии.
  */
  .control-vine {
    width:27px;
    height:60px;
    bottom:8px;
    opacity:.32;
  }

  .control-vine-left {
    left:4px;
  }

  .control-vine-right {
    right:4px;
  }
}


/*
  На более низком desktop-экране сохраняем ширину композиции,
  но не заставляем страницу прокручиваться.
*/
@media (min-width:1051px) and (max-height:760px) {
  .modal {
    height:calc(100vh - 20px);
    min-height:0;
  }

  .center {
    grid-template-rows:68px minmax(395px,1fr) 196px;
  }

  .controls {
    padding-top:35px;
  }

  .turn-summary {
    height:142px;
  }

  .fight-btn {
    top:-47px;
    height:70px;
  }
}



.turn-summary {
    margin-top:-8px;
}

.battle-console {
    padding:8px 12px 10px;
}

.battle-console-log {
    padding:4px 2px 6px;
}

.battle-chat {
    gap:4px;
}

/* GF4-RISTALISCHE-FINETUNE-V1 */

/* GF4-RISTALISCHE-FINETUNE-V2: exact offsets from the supplied archive.
   Keep the original grid tracks, so moving one element does not move others. */
@media (min-width:1051px) {
  .arena-game {top:7px;}
  .battle-shell {grid-template-columns:235px minmax(0,1fr) 235px;}
  .turn-summary {width:302px;height:191px;margin-bottom:-5px;transform:translateY(-4px);}
  .control-block[aria-label="АТАКА"] {transform:translateX(7px);}
  .control-block[aria-label="ЗАЩИТА"] {transform:translateX(-7px);}
}
@media (min-width:1051px) and (max-height:760px) {
  .turn-summary {height:155px;}
}

/* Raise the pads without changing the control group footprint. */
@media (min-width:1051px) {
  .control-block {height:148px;display:block;padding-top:24px;}
  .control-block .direction-pad {transform:translateY(-15px);}
  .control-block h2 {position:absolute;left:0;width:100%;top:var(--control-label-top, -8px);}
}

/* Full HD: prevent the fixed control grid from enlarging its outer frame.
   714px = 176 + 316 + 176 + 2*12 gaps + 2*9 padding + 2*2 border. */
@media (min-width:1051px) {
  .center > .versus,.center > .arena,.center > .controls {min-width:0;width:100%;}
  .controls {padding-inline:9px;}
}

/* One continuous texture on the window; native scale, repeating only as needed. */
.modal {
  background-color:#0b1218;
  background-image:linear-gradient(rgba(5,10,15,.25),rgba(5,10,15,.25)),url("../media/ui/window_texture.png");
  background-size:auto,auto;
  background-position:center,center;
  background-repeat:no-repeat,repeat;
}
.side {background:transparent;}
.side > .slot:nth-child(-n+2),.turn-summary {background:#0d141b;}
.arena {background-color:#0d141b;}
/* Artwork extends under the frame. Only the content layer is clipped. */
.artwork-window {position:absolute;inset:3px;overflow:hidden;z-index:1;background:#0d141b;}
.artwork-window > img {display:block;width:100%;height:100%;object-fit:cover;object-position:var(--artwork-position,50% 50%);}

/* Responsive composition: the stage, frame and controls share one center track. */
body {overflow:auto;}
.stage {height:auto;min-height:100vh;padding:15px;}
.modal {width:min(1230px,100%);height:auto;min-height:0;overflow:hidden;}
.content {height:auto;grid-template-rows:64px auto;}
.battle-shell {grid-template-columns:235px minmax(0,1fr) 235px;align-items:stretch;}
.center {grid-template-rows:76px auto minmax(226px,auto);min-width:0;}
.center > .arena {display:block;padding:5px;isolation:isolate;}
.arena-viewport {position:relative;width:100%;aspect-ratio:700 / 395;overflow:hidden;background:#000;}
.arena .arena-game {top:0;left:0;width:700px;height:395px;transform-origin:0 0;transform:scale(var(--scene-scale,1));}
.controls {--memory-width:302px;grid-template-columns:176px minmax(0,302px) 176px;gap:12px;justify-content:center;padding:28px 9px 12px;min-height:226px;}
.controls .turn-summary {grid-column:2;grid-row:1;align-self:stretch;width:100%;height:auto;min-height:178px;margin:0;transform:none;}
.controls .control-block {width:176px;min-width:0;height:148px;display:block;padding-top:24px;}
.controls .control-block[aria-label="АТАКА"] {grid-column:1;transform:none;}
.controls .control-block[aria-label="ЗАЩИТА"] {grid-column:3;transform:none;}
.controls .control-block h2 {position:absolute;left:0;width:100%;top:var(--control-label-top,0px);font-size:17px;}
.controls .direction-pad {width:176px;height:122px;transform:translateY(-15px);}
.controls .direction {width:54px;height:54px;}
.controls .direction.up {top:0;}
.controls .direction.left,.controls .direction.right {top:45px;}
.controls .direction.thrust {top:68px;}
.controls .fight-btn {width:clamp(180px,42cqw,300px);height:auto;aspect-ratio:171.92667 / 51.007978;top:0;transform:translate(-50%,-50%);font-size:clamp(14px,3cqw,22px);white-space:nowrap;}
.topnav .navitem,.topnav .navitem.active {font-size:clamp(12px,1.5vw,20px);white-space:nowrap;}
@media(max-width:1200px) and (min-width:761px) {
  .battle-shell {grid-template-columns:clamp(150px,19vw,235px) minmax(0,1fr) clamp(150px,19vw,235px);}
}
@container(max-width:700px) {
  .controls {grid-template-columns:repeat(2,minmax(0,1fr));padding:36px 20px 12px;gap:18px 12px;}
  .controls .control-block {justify-self:center;}
  .controls .control-block[aria-label="ЗАЩИТА"] {grid-column:2;}
  .controls .turn-summary {grid-column:1 / -1;grid-row:2;width:min(100%,360px);height:180px;min-height:180px;}
}
@container(max-width:410px) {
  .controls {padding-inline:8px;column-gap:8px;}
  .controls .control-block {width:128px;height:132px;}
  .controls .direction-pad {width:128px;height:106px;}
  .controls .direction {width:44px;height:44px;}
  .controls .direction.left,.controls .direction.right {top:39px;}
  .controls .direction.thrust {top:62px;}
  .controls .control-block h2 {font-size:15px;}
}
@media(max-width:760px) {
  .stage {padding:0;}
  .modal {width:100%;height:auto;min-height:0;}
  .content {grid-template-rows:58px auto;}
  .battle-shell {grid-template-columns:minmax(0,1fr);}
  .side {display:none;}
  .topnav .navitem > span:not(.nav-skin) {display:none;}
  .topnav .navitem,.topnav .navitem.active {padding:8px;flex-direction:row;}
  .topnav .nav-icon {width:28px;height:30px;}
}

/* Clear the fight button while keeping the chat's lower edge fixed. */
.controls .turn-summary {margin-top:12px;min-height:166px;}
@container(max-width:700px) {
  .controls {grid-template-rows:148px 120px;align-content:start;padding-top:48px;}
  .controls .turn-summary {height:120px;min-height:120px;margin-top:0;}
  .controls .control-block h2 {top:-8px;}
}
@container(max-width:410px) {
  .controls {grid-template-rows:132px 120px;}
}

/* Battle HUD and framed character cards. */
.versus {grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);padding:10px 18px;gap:8px;}
.fighter-hp {min-width:0;display:flex;flex-direction:column;gap:7px;align-self:stretch;justify-content:center;}
.hp-heading {display:flex;justify-content:space-between;gap:8px;align-items:baseline;font:14px Georgia,serif;color:#ead8b7;}
.fighter-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hp-value {flex:none;font:12px Georgia,serif;font-variant-numeric:tabular-nums;}
.fighter-hp-right .hp-heading {flex-direction:row-reverse;}
.hp-track {height:15px;background:#090d11;border:1px solid #78572a;box-shadow:inset 0 1px 3px #000;overflow:hidden;}
.hp-fill {display:block;width:100%;height:100%;background:repeating-linear-gradient(to right,transparent 0 calc(10% - 2px),#351515 calc(10% - 2px) 10%),linear-gradient(#ff685c,#c31818);}
.fighter-hp-right .hp-fill {background:repeating-linear-gradient(to right,transparent 0 calc(10% - 2px),#092c3c calc(10% - 2px) 10%),linear-gradient(#60ddfa,#078bbc);}
.artwork-window .fighter-portrait {object-fit:cover;object-position:50% 42%;transform:scale(1.12);}
.artwork-window .fighter-portrait.mirrored {transform:scale(-1.12,1.12);}
.artwork-window .fighter-shield {object-fit:cover;object-position:center;transform:scale(1.05);}
.fighter-resources {position:relative;z-index:1;width:100%;display:grid;gap:12px;padding:4px;}
.resource-row {display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:5px;}
.resource-icon {display:flex;color:#f07299;}
.resource-icon svg {width:18px;height:18px;}
.energy .resource-icon {color:#ffd15c;}
.resource-track {height:13px;border:1px solid #725631;background:#10151c;overflow:hidden;}
.resource-track > span {display:block;height:100%;background:linear-gradient(#ff94b4,#ca3d6d);}
.energy .resource-track > span {background:linear-gradient(#ffe788,#d69b19);}
.resource-value {font:11px Georgia,serif;color:#e6dcca;white-space:nowrap;}
.fighter-stats {position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;height:100%;align-items:center;}
.fighter-stats img {display:block;width:100%;height:100%;max-height:110px;object-fit:contain;min-width:0;}
@media(min-width:761px) and (max-width:1000px) {
  .fighter-resources {padding:0;gap:8px;}
  .resource-row {grid-template-columns:14px minmax(0,1fr);}
  .resource-icon svg {width:14px;height:14px;}
  .resource-value {grid-column:2;text-align:right;}
}
@container(max-width:410px) {
  .versus {grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);padding:10px;gap:5px;}
  .versus .vs {width:74px;height:76px;}
  .hp-heading {font-size:11px;gap:3px;flex-wrap:wrap;}
  .hp-value {font-size:10px;}
  .hp-track {height:12px;}
}

/* Balance the side panels without adding another ornament. */
.side {grid-template-rows:minmax(0,1fr) 90px 90px minmax(0,1fr);}
.side > .slot {background:transparent;}
.side > .portrait-slot,.side > .shield-slot {background:#0d141b;}
.fighter-stats img {max-height:74px;}
.life .resource-icon {color:#f04a40;}
.life .resource-track > span {background:linear-gradient(#ff685c,#c31818);}
/* VS is an overlay; its height must not enlarge the HP grid row. */
.versus {position:relative;grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;}
.versus .vs {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.versus .fighter-hp-left {grid-column:1;grid-row:1;}
.versus .fighter-hp-right {grid-column:3;grid-row:1;}
.versus .fighter-hp {height:100%;min-height:0;overflow:hidden;justify-content:space-between;gap:4px;padding:2px 0;}
.hp-heading {min-height:0;line-height:18px;}
.hp-track {flex:none;}
@container(max-width:410px) {
  .versus {grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);}
  .hp-heading {line-height:13px;}
}

/* Keep animated button pixels separate from the sliced outer frame. */
.controls {isolation:isolate;}
.controls::after {transform:translateZ(0);backface-visibility:hidden;}
.direction {isolation:isolate;transition:translate .12s;}
.direction:hover,.direction[aria-pressed="true"] {filter:none;}
.direction img {transform-origin:center;filter:brightness(1);transition:filter .14s ease;will-change:filter;}
.direction:hover img,.direction:focus-visible img {filter:brightness(1.55) saturate(1.12);}
.direction[aria-pressed="true"] img {filter:brightness(1.3) saturate(1.1);}
.direction[aria-pressed="true"]:hover img {filter:brightness(1.65) saturate(1.15);}
.direction[aria-pressed="true"]::after {content:"";position:absolute;inset:3px;border:2px solid #f5cc78;border-radius:50%;pointer-events:none;}
.navitem:hover {filter:brightness(1.35) saturate(1.08);}
.fight-btn:hover {filter:brightness(1.4) saturate(1.1);}
.fight-btn:active {filter:brightness(1.5);}
@media(prefers-reduced-motion:reduce) {.direction img {transition:none;}}

/* More breathing room around the attribute icons. */
.fighter-stats img {transform:scale(.8);transform-origin:center;}

/* Names are the primary label above each HP bar. */
.versus .hp-heading {justify-content:center;transform:translateY(4px);font-size:16px;line-height:20px;}
.versus .fighter-name {text-align:center;}
@container(max-width:410px) {
  .versus .hp-heading {font-size:13px;line-height:16px;}
}

/* GF4-ARENA-LAZY-V1
   Idle state is a static poster. Godot/WebGL remains about:blank until the
   visible «В БОЙ» click, preventing startup inside a zero-size hidden frame. */
.arena-viewport {
  background:#080d12;
}
.arena-poster {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  opacity:1;
  visibility:visible;
  transition:opacity .16s ease;
}
.arena .arena-game {
  z-index:1;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .16s ease;
}
.arena-viewport.is-game-ready .arena-poster {
  opacity:0;
  visibility:hidden;
}
.arena-viewport.is-game-ready .arena-game {
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}
@media(prefers-reduced-motion:reduce) {
  .arena-poster,.arena .arena-game {transition:none;}
}



/* GF4-COMBAT-RESTORE-V22 ----------------------------------------------------- */
.direction:disabled {cursor:default;opacity:.72;}
.direction:disabled img {filter:brightness(.76) saturate(.8);}
.fight-btn:disabled {cursor:default;filter:brightness(.82) saturate(.86);}

.battle-console-log .battle-log-line {
  position:relative;
  z-index:2;
  margin:1px 0;
  white-space:normal;
}
.battle-log-turn {color:#c9b88f;}
.battle-log-good {color:#c9d9b0;}
.battle-log-bad {color:#d6aaa0;}
.battle-log-error {color:#dc9384;}

.battle-result {
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4,8,12,.62);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  opacity:0;
  transition:opacity .22s ease;
}
.battle-result[hidden] {display:none;}
.battle-result.is-visible {opacity:1;}
.battle-result-card {
  width:min(78%,520px);
  padding:22px 28px 24px;
  text-align:center;
  border:1px solid rgba(192,145,71,.62);
  background:rgba(8,13,18,.82);
  box-shadow:0 10px 35px rgba(0,0,0,.38),inset 0 0 24px rgba(188,136,53,.06);
}
.battle-result-title {
  display:block;
  margin-bottom:8px;
  color:#ead09a;
  font:700 clamp(24px,4.5cqw,40px)/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:.04em;
}
.battle-result-text {
  margin:0;
  color:#e2d8c6;
  font:clamp(14px,2.4cqw,20px)/1.45 Georgia,"Times New Roman",serif;
}
.battle-result.is-win .battle-result-title {color:#efd79d;}
.battle-result.is-lose .battle-result-title {color:#d8aaa0;}
.battle-result.is-draw .battle-result-title {color:#cfc4aa;}

@media(prefers-reduced-motion:reduce) {
  .battle-result {transition:none;}
}

/* GF4-COMBAT-POLISH-V24 ------------------------------------------------------
   Local polish on top of the known-good v22 base:
   - fight-button labels keep all live status text and gain a dark-red outline;
   - battle-log content cannot alter the outer chat geometry;
   - the obsolete BATTLE / score header is gone;
   - top HP bars keep fixed segment geometry: a dark loss mask covers the colour,
     while segment dividers stay on the upper decorative layer.
   --------------------------------------------------------------------------- */

/* Keep the live status labels readable over the crossed swords. */
.fight-btn span {
  -webkit-text-stroke: 1px #5c010a;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #5c010a,
     1px 0 #5c010a,
     0 -1px #5c010a,
     0 1px #5c010a;
}

/* The responsive layout owns the chat size; text is never allowed to resize it. */
.controls .turn-summary {
  min-width: 0;
  overflow: hidden;
  contain: size;
}
.battle-console {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) 31px;
}
.battle-console-log {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.battle-chat {
  min-height: 0;
}

/* Fixed-geometry segmented HP. The colour never shrinks; the loss mask grows. */
.hp-track {
  position: relative;
  overflow: hidden;
}
.hp-fill {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100%;
  z-index: 1;
  background: linear-gradient(#ff685c, #c31818);
}
.fighter-hp-right .hp-fill {
  background: linear-gradient(#60ddfa, #078bbc);
}
.hp-loss-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  z-index: 2;
  background: #070a0d;
  pointer-events: none;
}
/* Segment separators are the upper texture layer, so their pitch never changes. */
.hp-track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    transparent 0 calc(10% - 2px),
    #351515 calc(10% - 2px) 10%
  );
}
.fighter-hp-right .hp-track::after {
  background: repeating-linear-gradient(
    to right,
    transparent 0 calc(10% - 2px),
    #092c3c calc(10% - 2px) 10%
  );
}