/* ---------- one frame (engine; the owner, 2026-10-25: 'i generally want the panels to be the same size if possible, even
   if its large'). Every panel and sheet takes the same box, the large iron frame that fills the play area under the HUD
   (--hud-h, the tallest the HUD has been at this screen size: ui events.js fitPanel), 6 px from the edges, up to 460x680
   on a wide screen: the events on the map (layout A: the place's card at the top, the hand at the bottom), results,
   chance, camp, rank-up, a new Attribute, the run's end, the Aspect pick, Your Soul, the collection; and over them the
   deck, the bag, the picks and swaps, Settings, the glosses and the light's sheet. The content sits in it (centred, or the
   hand at the bottom) and never resizes it: a small panel's content gets room around it, a long one scrolls inside it
   (fitPanel no longer zooms a panel down). The title screen keeps the whole screen; the fight is its own stage. ---------- */
:root {
  --frame-top: calc(var(--hud-h, 0px) + 6px);
  --frame-w: min(460px, calc(100vw - 12px));
  --frame-h: min(680px, calc(100dvh - var(--hud-h, 0px) - 12px));
  --frame-iron: var(--px-frame-iron) 8 / 16px / 0 stretch;
  --frame-slab: linear-gradient(to bottom, rgba(14, 18, 20, .94), rgba(8, 10, 11, .97)), var(--px-wall) 0 0 / 64px 64px;
}
/* the panel (#overlay > #panel) */
#overlay:not(.hidden):not(.title-screen):not(.fight-panel):not(#_#_#_) { align-items: flex-start; justify-content: center; padding: var(--frame-top) 6px 6px; }
#overlay:not(.hidden):not(.title-screen):not(.fight-panel):not(#_#_#_) #panel {
  box-sizing: border-box; width: var(--frame-w); height: var(--frame-h); min-width: 0; max-width: none; min-height: 0; max-height: none; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: safe center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; zoom: 1; }
/* (a flex column's children keep their own height: nothing squashed to fit, the frame scrolls instead) */
#overlay:not(.hidden):not(.title-screen):not(.fight-panel):not(#_#_#_) #panel > * { flex-shrink: 0; }
/* on the map (an event, a camp, its result): the same iron frame and slab over the map, not a card floating on it */
#overlay.on-map:not(.hidden):not(#_#_#_) { background: radial-gradient(ellipse at 50% 40%, rgba(6, 11, 14, .7), rgba(2, 3, 4, .9)); }
#overlay.on-map:not(.hidden):not(#_#_#_) #panel { border: 16px solid transparent; border-image: var(--frame-iron); image-rendering: pixelated;
  background: var(--frame-slab); box-shadow: 0 14px 40px rgba(0, 0, 0, .85), 0 0 60px rgba(56, 142, 204, .08); padding: 4px 4px 2px; animation: none; }
/* (an event or a camp on the map: the frame only, its inside see-through under a light veil, so the place's backdrop and
   the walker looking toward it show behind the card and the hand, the owner's layout A) */
#overlay.on-map:not(.me-result-view):not(.hidden):not(#_#_#_) { background: none; }
#overlay.on-map:not(.me-result-view):not(.hidden):not(#_#_#_) #panel { background: linear-gradient(to bottom, rgba(6, 9, 11, .28), rgba(6, 9, 11, .08) 45%, rgba(6, 9, 11, .2));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
#overlay.on-map.me-result-view.kind-huge_success:not(#_#_#_) #panel, #overlay.on-map.me-result-view.kind-success:not(#_#_#_) #panel {
  background: linear-gradient(to bottom, rgba(16, 27, 34, .95), rgba(8, 12, 14, .97)), var(--px-wall) 0 0 / 64px 64px; }
#overlay.on-map.me-result-view.kind-failure:not(#_#_#_) #panel, #overlay.on-map.me-result-view.kind-huge_failure:not(#_#_#_) #panel {
  background: linear-gradient(to bottom, rgba(34, 14, 18, .95), rgba(14, 6, 8, .97)), var(--px-wall) 0 0 / 64px 64px; }
#overlay.on-map.me-result-view:not(#_#_#_) #panel { padding: 12px 14px 16px; }
/* an event's table fills the frame: the place's card at the top, the hand at the bottom */
#overlay.on-map:not(.hidden):not(#_#_#_) #panel { justify-content: flex-start; }
#overlay.on-map:not(.hidden):not(#_#_#_) #panel > .me-table { flex: 1 0 auto; }
#overlay.on-map:not(.hidden):not(#_#_#_) #panel > .me-table { gap: 2px; }
#overlay.on-map:not(.hidden):not(#_#_#_) #panel > .me-table > .me-stage { padding: 4px 0 2px; }
/* (the hand's box keeps its room over the centre card, which can sit under the place's card on a phone; the carousel's
   far cards stay out of the scroll) */
#overlay.on-map:not(.hidden):not(#_#_#_) #panel > .me-table { justify-content: space-between; }
#overlay.on-map:not(.hidden):not(#_#_#_) #panel > .me-table > .hand.ch-hand { margin-top: -12px; overflow: clip; }

/* the sheets over it: the same box in the same place */
:is(#settings-sheet, #words-info, #light-info, #house-info, #bag-overlay .bag-sheet, :is(#deck-overlay, #pick-overlay, #gear-overlay, #sea-overlay, #echo-overlay) > .panel):not(#_#_#_) {
  position: fixed; left: calc(50% - var(--frame-w) / 2); top: var(--frame-top); right: auto; bottom: auto; transform: none; translate: none;
  box-sizing: border-box; width: var(--frame-w); height: var(--frame-h); min-width: 0; max-width: none; min-height: 0; max-height: none; margin: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  border: 16px solid transparent; border-image: var(--frame-iron); image-rendering: pixelated; background: var(--frame-slab); }
/* (the small ones: their few lines in the middle of it) */
:is(#settings-sheet, #words-info, #light-info, #house-info):not(#_#_#_) { display: flex; flex-direction: column; justify-content: safe center; padding: 10px 14px 14px; }
:is(#settings-sheet, #words-info, #light-info, #house-info):not(#_#_#_) > * { flex-shrink: 0; }