@import url("motion.css");
/* Desktop-only scene composition. Narrow/zoomed layouts keep the reviewed mobile rules. */
.battle-targets{padding:12px 18px 6px;background:#101b27;border-bottom:1px solid var(--line)}
.battle-targets[hidden]{display:none}
.battle-targets .target-help{margin:0;color:#d7e5e9;font:13px/1.4 Arial,sans-serif}
.battle-targets .target-help strong{color:var(--blue)}
.battle-targets .foes{margin:9px 0 3px}
.battle-status{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr);gap:12px;align-items:stretch}
.battle-status .foes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-content:start;margin:0;min-width:0}
.battle-hero-status{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:1px solid #5e8395;border-radius:6px;background:#152738}
.battle-hero-status img{width:54px;height:68px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 5px #000a)}
.battle-hero-status div{display:grid;gap:4px;min-width:0;font:12px/1.3 Arial,sans-serif}
.battle-hero-status strong{font:18px/1.1 Georgia,serif;color:var(--text)}
.battle-hero-status small{color:var(--blue)}
.foe-light{color:var(--blue)!important;font-weight:700!important}
.foe-portrait{width:56px;height:56px;object-fit:cover;flex:none;border:1px solid #7596a3;border-radius:5px;background:#0b1721}
.foe.boss .foe-portrait{border-color:var(--gold)}
.foe-portrait:not([hidden])+.foe-glyph{display:none}
.foe-details{min-width:0}
@media(max-width:600px){.foe-portrait{width:42px;height:42px}.foe-details strong{overflow-wrap:anywhere}}
body.battle-mode .sidebar .hero{display:none}
@media(min-width:901px){body.battle-mode .action-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.escape-puzzle{margin-top:12px;padding:13px 15px;border:1px solid var(--gold);border-radius:6px;background:#172734}
.escape-puzzle h3{margin:0 0 8px;color:var(--gold);font:700 17px Arial,sans-serif}
.escape-options{display:grid;gap:8px;margin:0 0 15px;padding:12px;border:1px solid var(--line);border-radius:6px}
.escape-options legend{padding:0 6px;color:var(--blue);font:700 13px Arial,sans-serif}
.escape-options label{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 10px;border:1px solid var(--line);border-radius:5px;background:#142330;font:14px/1.3 Arial,sans-serif;cursor:pointer}
.escape-options label:focus-within{outline:2px solid var(--gold)}
.escape-options input{accent-color:#8dd7ef}
@media(max-width:600px){.battle-targets{padding:10px 12px 5px}.battle-targets .target-help{font-size:12px}.battle-targets .foe{min-height:62px}.battle-status{grid-template-columns:1fr;gap:7px}.battle-hero-status{padding:7px 9px}.battle-hero-status img{width:38px;height:48px}.battle-hero-status div{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}.battle-hero-status strong{font-size:15px}.battle-hero-status small{font-size:11px}}
@media (min-width: 1000px) and (min-height: 620px) {
  .shell {
    max-width: 1760px;
    padding-inline: clamp(20px, 2vw, 36px);
  }
  .layout {
    grid-template-columns: minmax(0, 2.15fr) minmax(350px, .85fr);
    gap: clamp(16px, 1.5vw, 24px);
    align-items: start;
  }
  .scene-art {
    height: clamp(410px, 60vh, 670px);
    background-size: cover;
  }
  .sidebar {
    align-self: start;
  }
  .sidebar .log {
    flex: 0 0 auto;
  }
  .story {
    min-height: 0;
  }
  body.battle-mode .scene-art {
    height: clamp(400px, 54vh, 620px);
  }
  body.battle-mode .scene-art[data-scene="broken-stair"] {
    background-position: center top;
  }
  body.battle-mode .story p {
    font-size: 15px;
    line-height: 1.45;
  }
  body.battle-mode .action {
    min-height: 56px;
  }
}

@media (min-width: 901px) and (max-width: 999px) and (min-height: 620px) {
  body.battle-mode .scene-art {
    height: clamp(320px, 46vh, 390px);
  }
}
body.battle-mode .scene-art[data-scene="broken-stair"] { background-position: center top; }