/* scene.css: the scene card (art's; the UI system's part 1, labs/audits/ui-2026-10-25/SYSTEM.md; js/ui/scene.js). One big
   card for what is happening now: its House's frame (8 px), an arched window with the picture in its land, a name banner
   across the window's foot, the words on a sunk panel under it. It fills the panel's room above the hand; the map shows
   around it. Turned over from its back when it comes (.sc-flip, 300 ms; none with reduced motion).
   div.scene-card(.house-<h>)(.sc-gilt | .sc-blood ...)(.sc-small) > div.sc-face > div.sc-window, div.sc-banner, div.sc-body;
   div.sc-back.face.back while it turns; div.sc-top, a strip over the window's top (a Blade's standing). Loaded after
   frame.css, each rule #overlay #panel .scene-card:not(#_#_): they win over the panel's. */
#overlay #panel .scene-card:not(#_#_) { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; min-height: 0;
  border: 8px solid transparent; border-image: var(--sc-frame, var(--px-frame-plain)) 8 / 8px / 0 stretch; image-rendering: pixelated;
  background: #16141c padding-box; box-shadow: 0 3px 0 rgba(0, 0, 0, .75), 0 10px 24px rgba(0, 0, 0, .6); text-align: center; color: var(--bone); }
#overlay #panel .scene-card:not(#_#_) > .sc-face { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 3px; }
/* the window: the picture standing at the foot of its land; the arch's corners are the card's ground */
#overlay #panel .scene-card:not(#_#_) .sc-window { position: relative; flex: 1 1 0; min-height: 96px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; overflow: hidden;
  border: 8px solid transparent; border-image: var(--px-scene-window) 8 / 8px / 0 stretch; image-rendering: pixelated;
  background: #0a0c10 center bottom / cover no-repeat; padding: 0 0 14px; }
/* the name: a ribbon across the window's foot, in the House's metals; long names wrap, never cut */
#overlay #panel .scene-card:not(#_#_) .sc-banner { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; min-height: 30px;
  margin: -16px -9px 0; padding: 1px 14px 3px; border-style: solid; border-color: transparent; border-width: 4px 6px;
  border-image: var(--sc-banner) 4 6 fill / 4px 6px / 0 stretch; image-rendering: pixelated; }
#overlay #panel .scene-card:not(#_#_) .sc-banner :is(h2, .sc-title) { margin: 0; padding: 0; font-family: var(--pix); font-size: var(--t-big); line-height: 1; font-weight: 400;
  color: var(--bone); text-shadow: 1px 1px 0 #000; white-space: normal; overflow-wrap: break-word; background: none; border: 0; box-shadow: none; letter-spacing: 0; }
#overlay #panel .scene-card:not(#_#_) .sc-banner .title-plate { display: inline; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; font: inherit; }
/* the words: the reading size when they fit, the body size if not, scrolling past that (never cut) */
#overlay #panel .scene-card:not(#_#_) .sc-body { flex: 0 1 auto; min-height: 0; margin-top: 4px; padding: 6px 8px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none;
  background: #221f2a; box-shadow: inset 1px 1px 0 #0c0a10, inset -1px -1px 0 #34303e; }
#overlay #panel .scene-card:not(#_#_) .sc-body::-webkit-scrollbar { display: none; }
#overlay #panel .scene-card:not(#_#_) .sc-body > * { margin: 0; }
#overlay #panel .scene-card:not(#_#_) .sc-body .text { font-size: var(--t-big); line-height: var(--lh-body); color: var(--bone); text-align: center; overflow: visible;
  display: block; -webkit-line-clamp: none; max-height: none; word-spacing: normal; }
#overlay #panel .scene-card:not(#_#_).sc-small .sc-body .text { font-size: var(--t-text); line-height: 17px; }
#overlay #panel .scene-card:not(#_#_) .sc-body .text + * { margin-top: 4px; }

/* a strip over the window's top: what this scene is part of (a Blade card's standing) */
#overlay #panel .scene-card:not(#_#_) .sc-top { order: -1; flex: none; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  padding: 2px 6px 3px; margin: -2px -2px 0; background: linear-gradient(to bottom, rgba(6, 8, 10, .82), rgba(6, 8, 10, .55)); }
#overlay #panel .scene-card:not(#_#_) .sc-top > * { margin: 0; translate: none; animation: none; }
/* turned over from its back: the back's House lattice and frame, then the face */
#overlay #panel .scene-card:not(#_#_).sc-flip { animation: sc-flip .3s cubic-bezier(.25, .7, .35, 1) both; transform-style: preserve-3d; }
#overlay #panel .scene-card:not(#_#_).sc-flip > .sc-face { backface-visibility: hidden; }
#overlay #panel .scene-card:not(#_#_) > .sc-back { position: absolute; inset: -8px; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none;
  backface-visibility: hidden; transform: rotateY(180deg) translateZ(1px); border: 8px solid transparent; border-image: var(--back-frame, var(--px-frame-plain)) 8 / 8px / 0 stretch; }
#overlay #panel .scene-card:not(#_#_) > .sc-back img.emblem { width: 33%; max-width: 96px; }
@keyframes sc-flip { from { transform: perspective(900px) rotateY(180deg); } to { transform: perspective(900px) rotateY(0deg); } }
@media (prefers-reduced-motion: reduce) { #overlay #panel .scene-card.sc-flip:not(#_#_) { animation: none; } #overlay #panel .scene-card:not(#_#_) > .sc-back { display: none; } }

/* ---------- an event and a camp on the map: the scene card fills the room above the hand ---------- */
#overlay.on-map:not(.hidden):not(#_#_#_#_) #panel > .me-table > .me-stage.has-scene { flex: 1 1 0; width: 100%; min-height: 200px; padding: 2px 0 4px; display: flex; }
#overlay.on-map:not(.hidden):not(#_#_#_#_) #panel > .me-table > .me-stage.has-scene > .card-place { display: none; }
#overlay.on-map:not(.hidden):not(#_#_#_#_) #panel > .me-table > .me-stage.has-scene > .scene-card { flex: 1 1 auto; max-width: none; }
#overlay.on-map:not(.hidden):not(#_#_#_#_) #panel > .me-table:has(> .me-stage.has-scene) { flex: 1 1 auto; min-height: 0; }
/* (the picture fills the window's height left under the strip, up to 2x its 48 px) */
#overlay.on-map:not(.hidden):not(#_#_#_#_) #panel > .me-table > .me-stage.has-scene .sc-window > .panel-art { flex: 1 1 0; min-height: 0; margin: 0; padding: 0;
  width: auto; height: auto; display: flex; align-items: flex-end; justify-content: center; background: none; clip-path: none; isolation: auto; }
#overlay.on-map:not(.hidden):not(#_#_#_#_) #panel > .me-table > .me-stage.has-scene .sc-window > .panel-art::before { display: none; }
#overlay.on-map:not(.hidden):not(#_#_#_#_) #panel > .me-table > .me-stage.has-scene .sc-window > .panel-art :is(img.px, svg, canvas) {
  height: 100%; max-height: 96px; width: auto; max-width: none; aspect-ratio: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); }
/* (a short phone: the hand's centre card at 2.5x, not 3x, so the scene card gets the room; a focused card still grows) */
@media (max-height: 700px) { #overlay.on-map:not(.hidden) #panel > .me-table:has(> .me-stage.has-scene) > .hand.carousel.ch-hand { --hs-cfocus: 2.5; } }

/* ---------- a fight: the scene card holds the battle (the stage and its land in the window, the name on the banner, the
   log on the words panel); the energy, the hand and End turn under it as before ---------- */
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) { flex: none; margin: 0 0 4px; }
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) > .sc-face { padding: 0; }
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-window { flex: none; min-height: 0; padding: 0; background-color: #0a0c10; background-position: center bottom; }
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-window > .fight-stage { width: 100%; margin: 0; border: 0; box-shadow: none; background: none; }
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-banner { margin-top: -10px; }
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-banner h2.fight-title { display: block; position: static; max-width: none; font-size: var(--t-big); line-height: 1; text-align: center; pointer-events: auto; }
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-body { margin-top: 3px; padding: 3px 8px; }
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-body .fight-log { height: auto; min-height: 17px; margin: 0; font-size: var(--t-text); line-height: 17px; white-space: normal; overflow: visible; }
@media (max-width: 420px) { #overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-banner h2.fight-title .fight-rank { display: none; } }
/* (the stage's own top room was for the old title in its corner: the banner has the name now) */
#overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-window > .fight-stage { padding-top: 28px; }
/* (a short phone: the card's chrome under the stage trimmed, so the hand's risen cards don't cover the energy row: no
   inner padding, no window edge under the banner) */
@media (max-height: 700px) {
  #overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) > .sc-face { padding: 0; }
  #overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-window { border-bottom-width: 0; }
  #overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-banner { margin: -12px -6px 0; min-height: 0; padding-top: 0; padding-bottom: 1px; }
  #overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-banner h2.fight-title { font-size: var(--t-text); line-height: 16px; }
  #overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-window > .fight-stage { padding-top: 22px; }
  #overlay.fight-panel #panel:has(> .fight-scene):not(#_#_) { padding-top: 2px; }
  #overlay.fight-panel #panel:has(> .fight-scene):not(#_#_) > .fight-bar { margin: 0; }
  #overlay.fight-panel #panel:has(> .fight-scene):not(#_#_) > .hand.fanned { margin-bottom: 4px; }
  #overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-body { margin-top: 2px; padding: 1px 6px; }
  #overlay.fight-panel #panel .scene-card.fight-scene:not(#_#_) .sc-body .fight-log { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* (a foe's intent over its head, not behind it: the standing figures (4a19e57) reach up into the intent's row) */
#overlay #panel .scene-card.fight-scene:not(#_#_) .fighter > .intent { position: relative; z-index: 3; }

/* ---------- more words than room: the window gives some up, the panel fades at its foot until scrolled to its end ---------- */
#overlay #panel .scene-card.sc-tight:not(#_#_) .sc-window { min-height: 64px; }
#overlay #panel .scene-card.sc-scrolls:not(#_#_) .sc-body { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }

/* ---------- a result and a chance: the card fills the frame, Continue (or the deck's own buttons) under it ---------- */
#overlay:not(.hidden):not(#_#_#_#_) #panel > .scene-card:is(.result-scene, .chance-scene) { flex: 1 1 auto; min-height: 0; margin: 0 0 6px; }
#overlay:not(.hidden):not(#_#_#_#_) #panel:has(> .scene-card:is(.result-scene, .chance-scene)) { justify-content: flex-start; }
#overlay #panel .scene-card.result-scene:not(#_#_) .sc-window { justify-content: center; align-items: center; padding: 10px 0 20px; }
#overlay #panel .scene-card.result-scene:not(#_#_) .sc-window > :is(.sc-pics, .panel-art) { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 0;
  width: auto; height: auto; padding: 0; background: none; clip-path: none; }
#overlay #panel .scene-card.result-scene:not(#_#_) .sc-window > .panel-art::before { display: none; }
#overlay #panel .scene-card.result-scene:not(#_#_) .sc-window > .panel-art :is(img.px, svg, canvas) { width: 96px; height: 96px; }
#overlay #panel .scene-card.result-scene:not(#_#_) .sc-window .result-card { margin: 0; }
#overlay #panel .scene-card.result-scene:not(#_#_) .sc-body { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#overlay #panel .scene-card.result-scene:not(#_#_) .sc-body .text.small { font-size: inherit; }
#overlay #panel .scene-card.chance-scene:not(#_#_) .sc-window { justify-content: center; padding: 6px 4px 20px; }
#overlay #panel .scene-card.chance-scene:not(#_#_) .sc-window > * { flex: none; margin-left: auto; margin-right: auto; }

/* ---------- the event's own scene in the window (art.eventScene; the owner: 'a sprite dedicated to the event, including the
   player character near it', on 'an opaque background', not the map): drawn to the window's shape (scene.js sceneShape),
   its feet on the window's foot, a Blade's standing strip at its top; the window's inner shadow dims the edges. The event's small picture
   (still there for its rise from the road card) isn't shown: the scene has it ---------- */
#overlay #panel .scene-card:not(#_#_) .sc-window.sc-own { justify-content: flex-start; background-size: cover; background-position: center bottom; background-repeat: no-repeat;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .55); }
#overlay #panel .scene-card:not(#_#_) .sc-window.sc-own > .panel-art { position: absolute; visibility: hidden; pointer-events: none; }
#overlay #panel .scene-card:is(.chance-scene, .result-scene):not(#_#_) .sc-window.sc-own { background-size: 100% 100%, auto min(100%, 160px); justify-content: center; }

/* (an event's words and a result's telling are flavour: the small size whatever room the card has, italic, dimmer) */
#overlay #panel .scene-card:not(#_#_) .sc-body .text.flavour { font-size: var(--t-text); line-height: 18px; font-style: italic; font-synthesis: style; color: var(--flavour); }
/* (a person foe's intent above its head, not over its face: the standing figures reach 16 px up into the intent's row; the
   stage's top room takes it) */
#overlay #panel .scene-card.fight-scene:not(#_#_) .fighter.foe:has(> .fighter-art img.full) > .intent { translate: 0 -16px; }
/* (a foe's name whole: it wraps to two lines, a long one (.name-long, over 16 letters) at the small size) */
#overlay #panel .scene-card.fight-scene:not(#_#_) .fighter.foe .fighter-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1; overflow-wrap: normal; }
#overlay #panel .scene-card.fight-scene:not(#_#_) .fighter.foe .fighter-name { max-width: 100%; justify-self: stretch; }
#overlay #panel .scene-card.fight-scene:not(#_#_) .fighter.foe .fighter-name > small { white-space: normal; overflow: visible; text-overflow: clip; }
#overlay #panel .scene-card.fight-scene:not(#_#_) .fighter.foe .fighter-name.name-long { font-size: var(--t-cap); line-height: 11px; }
#overlay #panel .scene-card.fight-scene:not(#_#_) .fighter.foe { grid-template-columns: minmax(0, 1fr); }
/* (two foes and more on a phone (two Rift Spawn's 'Night Monster' ran into their armor chips too): the name alone, no rank ('Deep Devil', in its sheet), three lines at most: the
   Doorwarden's three ranked foes wrapped to five lines in a quarter of a 360 stage, over their statuses and the fight's
   title) */
@media (max-width: 520px) {
  #overlay #panel .scene-card.fight-scene:not(#_#_) .foes:has(> .fighter:nth-child(2)) .fighter.foe .fighter-name:not(#_) { max-height: 3lh; overflow: hidden; hyphens: auto; }
  #overlay #panel .scene-card.fight-scene:not(#_#_) .foes:has(> .fighter:nth-child(2)) .fighter.foe .fighter-name > :is(small.fighter-rank, .fighter-class):not(#_) { display: none; } }
/* (three foes and more on a phone: every foe's name at the small size (a target's or a short one was at the reading
   size, and cut sideways: 'Drunk Teamste'), wrapped at words, a long word broken only as a last resort, up to four
   lines ('Road-thief with a / Very Large / Lantern' was cut at three); the name row 44 px for every fighter, the hero's
   too, so the feet stay on one line. Four foes: the hp numbers at the small size and the gaps narrower ('14/1' was cut,
   the bars touched) */
@media (max-width: 520px) {
  #overlay #panel .scene-card.fight-scene:not(#_#_) .fight-stage:has(.foes > .fighter:nth-child(3)) .fighter:not(#_) { grid-template-rows: 26px var(--sprite-h, 64px) 14px 44px 22px; }
  #overlay #panel .scene-card.fight-scene:not(#_#_) .foes:has(> .fighter:nth-child(3)) .fighter.foe .fighter-name:not(#_#_) { font-size: var(--t-cap); line-height: 11px;
    max-height: 44px; overflow-wrap: anywhere; }
  #overlay #panel .scene-card.fight-scene:not(#_#_) .fight-stage:has(.foes > .fighter:nth-child(4)):not(#_), #overlay #panel .scene-card.fight-scene:not(#_#_) .foes:has(> .fighter:nth-child(4)):not(#_) { gap: 3px; }
  #overlay #panel .scene-card.fight-scene:not(#_#_) .fight-stage:has(.foes > .fighter:nth-child(4)) .fighter:not(#_#_) > .hpbar { width: 100%; }
  /* (the hero's column too shrinks to its share: its grid track sized to the 64 px sprite put its bar under the first foe's) */
  #overlay #panel .scene-card.fight-scene:not(#_#_) .fight-stage:has(.foes > .fighter:nth-child(4)) .fighter.hero:not(#_#_) { grid-template-columns: minmax(0, 1fr); }
  #overlay #panel .scene-card.fight-scene:not(#_#_) .fight-stage:has(.foes > .fighter:nth-child(4)) .fighter:not(#_#_) > .hpbar > .hp-text:not(#_) { font-size: var(--t-cap); letter-spacing: 0; } }