/* ============================================================
   main-ui-shell.css
   The shared "Main UI Layer" — the four-region layout used by
   every screen in the game (home page, dungeon crawling, combat):

     +----------------+----------------------+
     |  scene/viewer  |    menu / journal    |
     |  panel (wide,  |    panel (narrower)  |
     |  top-left)     |    (top-right)       |
     +----------------+----------------------+
     |  party row     |   reserved space     |
     |  (bottom-left, |   (bottom-right,     |
     |  boxed, corner |    empty for now)    |
     |  edit button)  |                      |
     +----------------+----------------------+

   Only the CONTENT of the scene panel and the menu/journal panel
   changes per context (first-person view vs. mob portraits;
   room description vs. combat options). The party row and grid
   structure itself are identical everywhere this shell is used.

   Palette is intentionally the same one combat-prototype.html
   already shipped (stone frame + parchment scroll), so the home
   page, crawling, and combat all read as one visual system.
   ============================================================ */

:root {
  --shell-stone: #2b2f36;
  --shell-stone-dark: #1c1e23;
  --shell-ice: #cfe8ee;
  --shell-parchment: #e9d9ac;
  --shell-parchment-dark: #d9c48c;
  --shell-parchment-border: #7a5a30;
  --shell-ink: #2b1d0e;
  --shell-gold: #b8860b;
  --shell-gold-bright: #f2c14e;
  --shell-hp: #c0463f;
  --shell-stamina: #4a8f5c;
  --shell-mana: #3f7ac0;
}

/* Applied by MainUIShell.buildShell() to whatever container element
   it's given (e.g. #app) — gives .shell's width:100% a real 1024px
   basis to resolve against, regardless of the parent's own layout
   context (flex, etc.). */
.shell-app {
  width: 100%;
  max-width: 1024px;
}

body.shell-body {
  margin: 0;
  background: var(--shell-stone-dark);
  color: var(--shell-ink);
  font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  display: flex;
  /* align-items is the CROSS axis here (row direction => vertical) —
     flex-start anchors to the top instead of centering vertically.
     Centering vertically (the old "center") forces a scrollbar the
     moment content is even a pixel taller than the viewport, since it
     then overflows equally off BOTH the top and bottom edges — top
     anchoring only ever overflows off the bottom, and never scrolls
     at all once content actually fits. justify-content (the main/
     horizontal axis) stays centered. */
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
}

.shell {
  width: 100%;
  /* 1024px total. Viewer images are 448x448 native (dropped from an
     initial 512 — too tall for the overall UI) — the viewer column is
     sized to fit one at full size, borders included (448 + 8px border
     each side = 464px). The 29fr:34fr ratio below computes to EXACTLY
     464px:544px at the 1024px max width (464:544 reduces to 29:34,
     and 1008px / 63 * 29 = 464, * 34 = 544 — 1008 being what's left
     of 1024 after the 16px gap) — so the viewer never shrinks its
     image below native size on any viewport wide enough to hit
     max-width, while both columns still scale down together,
     proportionally, on narrower ones instead of overflowing. */
  max-width: 1024px;
  display: grid;
  grid-template-columns: 29fr 34fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
}

/* ---- scene / viewer panel (top-left) ---- */
.shell-scene {
  grid-column: 1; grid-row: 1;
  border: 8px solid var(--shell-stone);
  border-radius: 6px;
  background: linear-gradient(160deg, #3a4048, #23262b);
  box-shadow: inset 0 0 0 2px #4a5058, 0 6px 18px rgba(0,0,0,0.5);
  /* 464px = 448px image + 8px border each side, matching the
     column's own math above at max-width. min-height (not a fixed
     height) so real content — the image plus its caption/arrow row
     underneath — can still grow it once that's actually built. */
  min-height: 464px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ---- menu / journal panel (top-right) ---- */
.shell-menu {
  grid-column: 2; grid-row: 1;
  background: radial-gradient(ellipse at top left, var(--shell-parchment) 0%, var(--shell-parchment-dark) 100%);
  border: 4px solid var(--shell-parchment-border);
  border-radius: 8px;
  padding: 22px 26px;
  min-height: 464px; /* matches the viewer's height for visual parity */
  display: flex;
  flex-direction: column;
  /* Explicit, though flex-start is the default for a column
     container — every menu screen's text/rule/option-list stack
     anchors to the top, never centers. */
  justify-content: flex-start;
  overflow: hidden;
}

/* ---- viewer-stage content pattern, for use INSIDE .shell-scene ----
   Images in the viewer are always square, with a centered caption
   row beneath, and (when a context has more than one image to show
   — e.g. combat's multiple mob groups) left/right browse arrows
   in that same caption row. Not yet consumed anywhere (home.html's
   scene is static art) — this is the shared vocabulary the crawl/
   combat merge will build on. ---- */
.shell-viewer-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, not center — pins the image to the top and the
     caption/arrow row to the bottom, rather than both floating
     vertically centered in whatever extra height the panel has. */
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 100%;
  /* No padding here — the scene panel's own 8px border is the only
     framing, so the full content box stays available for the image
     at native size (see .shell-scene's sizing comment). */
}
/* The ~36px bar beneath the image: left/right browse arrows (shown
   only when a context actually has more than one image to page
   through, e.g. combat's multiple mob groups) with one centered line
   of text between them. Grid, not flex — keeps the text truly
   centered regardless of whether the arrows are present/visible. */
.shell-viewer-caption-bar {
  width: 448px;
  max-width: 100%;
  height: 36px;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  color: var(--shell-ice);
}
.shell-viewer-arrow {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--shell-ice);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
}
.shell-viewer-arrow:hover { opacity: 1; }
.shell-viewer-arrow:disabled { opacity: 0.25; cursor: default; }
.shell-viewer-caption-text {
  text-align: center;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-viewer-image {
  /* Native asset size is 448x448 — shown at full size whenever the
     viewport is wide enough (see .shell's sizing comment); max-width/
     max-height cap it at 448 in both dimensions and let it shrink
     instead of overflowing on anything narrower/shorter. Default fill
     is a plain gray-blue gradient — a per-context "missing image"
     look (e.g. home.html's warm guild-hall placeholder) is layered on
     with a modifier class, not baked in here, since not every viewer
     context should default to the same color. */
  width: 448px;
  max-width: 100%;
  max-height: 448px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: linear-gradient(180deg, #55606c, #2a2f35);
  box-shadow: inset 0 0 0 3px #1b1d20, 0 4px 10px rgba(0,0,0,0.4);
  object-fit: cover;
  display: block;
}


/* ---- bottom-left: party row, boxed, with a corner edit button ---- */
.shell-party-col {
  grid-column: 1; grid-row: 2;
}

.shell-party-box {
  position: relative;
  border: 3px solid var(--shell-stone);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.15);
  padding: 12px 10px 8px 10px;
  min-height: 132px;
}

/* Subtle, icon-only corner button — sits right on the box's top-right
   corner rather than living in its own labeled toolbar row. Toggles
   the party row into its interactive (reorder/move front-back)
   state; never live by default. */
.shell-formation-corner-btn {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 24px;
  height: 24px;
  background: var(--shell-stone);
  border: 2px solid #4a5058;
  border-radius: 0 5px 0 5px;
  color: var(--shell-ice);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.shell-formation-corner-btn:hover { opacity: 1; }
.shell-formation-corner-btn.active {
  background: var(--shell-gold);
  color: var(--shell-ink);
  border-color: var(--shell-gold-bright);
  opacity: 1;
}

.shell-party-row {
  display: flex;
  align-items: flex-end;
  /* Tight enough that 5 portraits (the party's hard cap) plus their
     card-to-card gaps fit inside the party box's own 464px column
     width without forcing the whole left column wider than the scene
     panel above it — a real bug hit 2026-08-29: going from 4 to 5
     party members grew the box by ~15px because the old 10px gap +
     2px side padding didn't leave room. Math: column width 464px -
     box border 6px - box padding 20px = 438px available; 5 cards *
     82px = 410px, leaving 28px total for gaps+padding — 6px*4 gaps
     (24px) + 0 side padding fits with a few px to spare. */
  gap: 6px;
  min-height: 116px;
  padding: 0;
}

.shell-party-empty {
  color: var(--shell-ice);
  opacity: 0.5;
  font-size: 12px;
  align-self: center;
}

/* ---- reserved space (bottom-right) ---- */
.shell-reserved {
  grid-column: 2; grid-row: 2;
  min-height: 132px;
  /* Deliberately unstyled/empty — reserved for future status
     indicators. No border, no placeholder box. */
}

/* ---- party portrait card ---- */
.shell-portrait {
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
}
.shell-portrait.row-front { margin-bottom: 24px; }
.shell-portrait.row-back { margin-bottom: 0; }

.shell-portrait-img {
  width: 62px;
  height: 62px;
  border-radius: 6px;
  background: linear-gradient(180deg, #55606c, #2a2f35);
  box-shadow: inset 0 0 0 2px #1b1d20, 0 3px 8px rgba(0,0,0,0.4);
  object-fit: cover;
  display: block;
}
.shell-portrait:hover .shell-portrait-img { box-shadow: inset 0 0 0 2px var(--shell-gold-bright), 0 3px 8px rgba(0,0,0,0.4); }

.shell-portrait-name {
  color: var(--shell-ice);
  font-size: 11px;
  margin-top: 4px;
  text-align: center;
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-bar-track {
  width: 70px;
  height: 5px;
  background: #000;
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}
.shell-bar-fill {
  height: 100%;
  /* Smooth drain/fill instead of a snap-cut whenever the underlying
     value changes in place (combat round results, Stamina regen,
     etc.) — updateCardBars() in main-ui-shell.js only ever sets
     `width`, so this is the only thing needed to animate it. */
  transition: width 0.3s ease;
}
.shell-bar-fill.hp { background: var(--shell-hp); }
.shell-bar-fill.stamina { background: var(--shell-stamina); }
.shell-bar-fill.mana { background: var(--shell-mana); }

/* ---- formation-edit controls on a portrait ---- */
.shell-portrait-editrow {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.shell-portrait-editrow button {
  background: var(--shell-stone);
  color: var(--shell-ice);
  border: 1px solid #4a5058;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  cursor: pointer;
  font-family: inherit;
}
.shell-portrait-editrow button:hover { background: #363c45; }
.shell-portrait-editrow button:disabled { opacity: 0.3; cursor: default; }
.shell-portrait.editing .shell-portrait-img { box-shadow: inset 0 0 0 2px var(--shell-gold-bright), 0 3px 8px rgba(0,0,0,0.4); }

/* ---- shared menu/journal option-list styling (used by home.html's
   menu and, later, combat/crawl option lists sharing this shell) ---- */
/* Every menu panel (home, and later combat/crawl) is built the same
   two-layer way: a FIXED-height text block for the typewriter intro
   line — 96px regardless of how long or short that text actually is
   — then the rule, then the option list. The fixed height is what
   keeps the rule/menu landing at the same Y position across every
   different menu screen in the game, independent of how much intro
   text each one has. */
.shell-menu-text {
  height: 96px;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.45;
  flex-shrink: 0;
}
/* Shorter variant for a screen whose intro is always a short,
   known-single-purpose prompt (never needs the full 96px multi-line
   allowance) — 48px comfortably fits two lines at this font-size/
   line-height and reads better than reserving dead space below a
   one-line prompt. Add taller in-between variants the same way if a
   future screen needs one. */
.shell-menu-text.shell-menu-text-sm { height: 48px; }
.shell-menu-rule {
  border-bottom: 1px solid rgba(122,90,48,0.35);
  padding-top: 12px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.shell-option-list { display: flex; flex-direction: column; gap: 6px; }
.shell-option-row { cursor: pointer; font-size: 1.05rem; padding: 4px 6px; border-radius: 4px; width: fit-content; }
.shell-option-row:hover { background: rgba(122,90,48,0.15); }
.shell-option-row .hot { color: var(--shell-gold); font-weight: bold; }
.shell-option-row.disabled { opacity: 0.4; cursor: default; }
.shell-option-row.disabled:hover { background: none; }
.shell-option-sub { font-size: 0.8rem; color: #6b5530; margin-left: 22px; margin-top: -2px; }