/* ==========================================================================
   theme-royal.css — 方向A「經典王廷」主題層
   Deep-navy panels + gold filigree + ivory text. Loaded AFTER style.css, so
   every rule here is an override. Base-layer only: no geometry changes that
   the mobile media queries in style.css depend on (only colours, borders,
   backgrounds, shadows and absolutely-positioned pseudo-element ornaments).

   Scope: 5a-1 main chrome (top bar, dialogue, unit panel, action menu, float
   buttons, terrain info, forecast) — sections 1–8.
          5a-2 every full-screen / panel overlay (map menu, settings, confirm,
          unit list, trade, status, victory, gameover, ending, camp, promo
          showcase, level-up, item-get, chapter title card, phase banner,
          exp gain, map-menu msg) — sections 9–15.

   Assets (assets/ui/):
     corner-filigree.png   gold filigree corner, luminance-keyed alpha
                           (generated once; other corners via CSS flips)
     divider-flourish.png  horizontal gold flourish, luminance-keyed alpha
     panel-texture.webp    very subtle dark-navy damask, soft-light blended
   ========================================================================== */

#game-container {
  /* --- royal palette tokens ------------------------------------------- */
  --royal-navy-hi: #21457c;          /* panel gradient top */
  --royal-navy: #0e2a52;             /* panel gradient mid */
  --royal-navy-lo: #061530;          /* panel gradient bottom */
  --royal-ivory: #f2ead4;            /* primary text */
  --royal-ivory-dim: #b9b091;        /* secondary text */
  --royal-gold: #d8b45f;             /* border gold */
  --royal-gold-hi: #f6dfa0;          /* bright gold (headings, hover edge) */
  --royal-gold-line: rgba(216, 180, 95, 0.55);
  --royal-gold-faint: rgba(216, 180, 95, 0.14);
  --royal-ink: rgba(2, 7, 18, 0.9);  /* dark gap line between gold lines */

  /* --- asset shorthands ----------------------------------------------- */
  --royal-tex: url('../assets/ui/panel-texture.webp');
  --royal-corner: url('../assets/ui/corner-filigree.png');
  --royal-divider: url('../assets/ui/divider-flourish.png');
}

/* ==========================================================================
   1. Shared royal panel chrome
   Gold double-line system: 1px gold border + dark outer ring + bright inner
   hairline (reads as a two-line gilt frame without touching border-box).
   ========================================================================== */

#unit-panel,
#action-menu,
#combat-forecast,
#terrain-info,
#map-browse-hint {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 20%),
    var(--royal-tex),
    linear-gradient(155deg, var(--royal-navy-hi) 0%, var(--royal-navy) 48%, var(--royal-navy-lo) 100%) !important;
  background-blend-mode: normal, soft-light, normal;
  border: 1px solid var(--royal-gold) !important;
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 0 0 1px rgba(246, 223, 160, 0.24),
    inset 0 12px 22px rgba(140, 180, 235, 0.06),
    0 4px 0 rgba(2, 6, 16, 0.72),
    0 10px 26px rgba(0, 0, 0, 0.68) !important;
  color: var(--royal-ivory);
}

#map-browse-hint {
  color: var(--royal-ivory) !important;   /* inline cssText sets #8bf */
}

/* ==========================================================================
   2. Filigree corner ornaments (pseudo-elements only — no DOM changes)
   One generated corner asset; the other three corners are CSS flips.
   ========================================================================== */

/* Unit panel — all four corners. The base .fe-panel corner ticks are fully
   replaced (border:0 kills the old tick borders). */
#unit-panel::before,
#unit-panel::after,
#unit-info::before,
#unit-info::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  background: var(--royal-corner) top left / contain no-repeat;
  border: 0;
  opacity: 0.95;
  pointer-events: none;
  z-index: 2;
}
#unit-panel::before { top: -8px; left: -8px; }
#unit-panel::after  { top: -8px; right: -8px; transform: scaleX(-1); }
/* #unit-info is the panel's last in-flow child; its pseudos anchor to the
   positioned #unit-panel, filling the two bottom corners. */
#unit-info::before  { top: auto; bottom: -8px; left: -8px; transform: scaleY(-1); }
#unit-info::after   { top: auto; bottom: -8px; right: -8px; transform: scale(-1, -1); }

/* Clearance: the bottom corner ornaments reach 36px up into the panel's
   padding box; lift the panel content (地形 rows + 按 R hint) above them. */
#unit-info { padding-bottom: 26px; }

/* Combat forecast — two top corners (panel is centred mid-map). */
#combat-forecast::before,
#combat-forecast::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 44px;
  height: 44px;
  background: var(--royal-corner) top left / contain no-repeat;
  border: 0;
  opacity: 0.95;
  pointer-events: none;
}
#combat-forecast::before { left: -8px; }
#combat-forecast::after  { right: -8px; transform: scaleX(-1); }

/* ==========================================================================
   3. Top bar — royal navy band with gilt lower edge
   ========================================================================== */

#top-bar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%),
    var(--royal-tex),
    linear-gradient(180deg, #1d4074 0%, #0b2349 60%, #071733 100%);
  background-blend-mode: normal, soft-light, normal;
  border-bottom: 1px solid var(--royal-gold);
  box-shadow:
    0 1px 0 rgba(246, 223, 160, 0.30),
    inset 0 -1px 0 rgba(2, 7, 18, 0.85),
    0 3px 10px rgba(0, 0, 0, 0.5);
}

#chapter-name { color: var(--royal-gold-hi); }
#turn-count { color: var(--royal-ivory); }
#objective-display { color: #e9d8a6 !important; }

/* Phase text in gilt / royal crimson (classes only ever hang on this span). */
#phase-indicator.phase-player { color: var(--royal-gold-hi); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
#phase-indicator.phase-enemy { color: #e86a5e; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* ==========================================================================
   4. Dialogue box — navy proclamation band, gold crest, framed portrait
   ========================================================================== */

#dialogue-box {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 26%),
    var(--royal-tex),
    linear-gradient(180deg, #1e4278 0%, var(--royal-navy) 55%, #050f26 100%) !important;
  background-blend-mode: normal, soft-light, normal;
  border: 1px solid var(--royal-gold) !important;
  border-bottom: none !important;
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 0 0 1px rgba(246, 223, 160, 0.22),
    inset 0 14px 26px rgba(140, 180, 235, 0.07),
    0 -6px 22px rgba(0, 0, 0, 0.55) !important;
}

/* Centred flourish crest straddling the top edge (replaces the base
   .fe-panel::before corner tick). */
#dialogue-box::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -16px;
  width: 230px;
  height: 32px;
  transform: translateX(-50%);
  background: var(--royal-divider) center / contain no-repeat;
  border: 0;
  opacity: 0.96;
  pointer-events: none;
}

/* Top-right filigree crowning the corner (replaces the base ::after tick). */
#dialogue-box::after {
  content: '';
  position: absolute;
  top: -7px;
  right: 4px;
  width: 42px;
  height: 42px;
  background: var(--royal-corner) top left / contain no-repeat;
  transform: scaleX(-1);
  border: 0;
  opacity: 0.95;
  pointer-events: none;
}

/* Speaker name tab — gilded plate, navy inscription */
#dialogue-name {
  background: linear-gradient(180deg, #f0d58e 0%, #c69c48 55%, #96702c 100%);
  border: 1px solid var(--royal-gold-hi);
  border-bottom-color: rgba(2, 7, 18, 0.85);
  border-radius: 4px 4px 0 0;
  color: #101d38;
  letter-spacing: 2px;
  box-shadow:
    0 0 0 1px rgba(2, 7, 18, 0.8),
    inset 0 1px 0 rgba(255, 248, 220, 0.65),
    0 3px 8px rgba(0, 0, 0, 0.5);
  text-shadow: none;
  padding: 3px 14px;
}

#dialogue-text { color: var(--royal-ivory); }

/* Portrait — double gilt frame */
#portrait-canvas {
  border: 2px solid var(--royal-gold);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px var(--royal-ink),
    0 0 0 3px rgba(246, 223, 160, 0.30),
    0 3px 10px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   5. Action menu rows — ivory labels, gilt hover
   (.menu-item stays display:flex from the base global rule; only colours
   and hover treatment change here.)
   ========================================================================== */

.menu-item {
  color: var(--royal-ivory);
  background: transparent;
  border-bottom: 1px solid var(--royal-gold-faint);
}

.menu-item:hover,
.menu-item.selected {
  background: linear-gradient(90deg, rgba(216, 180, 95, 0.32), rgba(216, 180, 95, 0.12) 65%, rgba(216, 180, 95, 0.04));
  color: #fffbe8;
  box-shadow: inset 3px 0 0 var(--royal-gold-hi);
}

.menu-item.disabled { color: #776f58; }

#action-menu .menu-icon { color: var(--royal-gold); opacity: 1; }
#action-menu .menu-desc { color: var(--royal-ivory-dim); }
#action-menu .menu-item.disabled .menu-desc { color: #565040; }

/* ==========================================================================
   6. Float buttons — 結束回合 / 未行動 / 快進
   JS sets full inline styles (red/blue/brown circles); the royal navy-gold
   treatment needs !important to win over style.cssText.
   ========================================================================== */

#end-turn-float-btn,
#next-unit-float-btn,
#ff-float-btn {
  background: radial-gradient(circle at 36% 30%, #2d5188 0%, #122c55 58%, #081a38 100%) !important;
  border: 2px solid var(--royal-gold) !important;
  color: var(--royal-gold-hi) !important;
  box-shadow:
    0 0 0 2px var(--royal-ink),
    inset 0 0 12px rgba(216, 180, 95, 0.20),
    0 4px 14px rgba(0, 0, 0, 0.55) !important;
}

#end-turn-float-btn:hover,
#next-unit-float-btn:hover,
#ff-float-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px var(--royal-ink),
    inset 0 0 14px rgba(216, 180, 95, 0.32),
    0 6px 20px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(246, 223, 160, 0.40) !important;
}

/* ==========================================================================
   7. Cursor-adjacent chrome — gilt cursor (keyframes redeclared here win
   over the identically-named base animation).
   ========================================================================== */

#dom-cursor {
  border-color: rgba(246, 223, 160, 0.75);
  box-shadow:
    0 0 10px rgba(255, 215, 94, 0.30),
    inset 0 0 6px rgba(255, 215, 94, 0.18);
}

.cursor-tl { border-top-color: #ffd75e; border-left-color: #ffd75e; }
.cursor-tr { border-top-color: #ffd75e; border-right-color: #ffd75e; }
.cursor-bl { border-bottom-color: #ffd75e; border-left-color: #ffd75e; }
.cursor-br { border-bottom-color: #ffd75e; border-right-color: #ffd75e; }

@keyframes cursor-pulse {
  0%   { border-color: rgba(246, 223, 160, 0.55); }
  100% { border-color: rgba(255, 240, 190, 1.0); }
}

/* ==========================================================================
   8. Mobile safety — additive only (base media queries stay untouched).
   The unit panel becomes a scrollable box on touch layouts; corner
   ornaments anchored to its content box would scroll away, so they hide.
   ========================================================================== */

@media (max-width: 900px), (max-height: 600px), (hover: none) and (pointer: coarse) {
  #unit-panel::before,
  #unit-panel::after,
  #unit-info::before,
  #unit-info::after {
    display: none;
  }
}

/* ==========================================================================
   9. Overlay backdrops (5a-2) — dark royal curtain behind every full-screen
   overlay: dim navy gradient + soft-light damask + vignette. The overlay
   DIVs carry inline cssText backgrounds, so !important is required.
   ========================================================================== */

.fe-overlay {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(33, 69, 124, 0.34), rgba(4, 10, 24, 0) 58%),
    var(--royal-tex),
    linear-gradient(180deg, rgba(5, 12, 28, 0.90) 0%, rgba(2, 6, 16, 0.94) 100%) !important;
  background-blend-mode: normal, soft-light, normal;
  box-shadow: inset 0 0 220px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   10. Royal panel unification — every .fe-panel gets the approved gilt
   double-line frame (identical recipe to section 1, so the main chrome is
   unchanged). Inline cssText panel backgrounds/borders lose to !important.
   .fe-panel--enemy is re-declared AFTER the global rule (equal specificity)
   so enemy-crimson panels keep their identity with the same shadow system.
   ========================================================================== */

.fe-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 20%),
    var(--royal-tex),
    linear-gradient(155deg, var(--royal-navy-hi) 0%, var(--royal-navy) 48%, var(--royal-navy-lo) 100%) !important;
  background-blend-mode: normal, soft-light, normal;
  border: 1px solid var(--royal-gold) !important;
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 0 0 1px rgba(246, 223, 160, 0.24),
    inset 0 12px 22px rgba(140, 180, 235, 0.06),
    0 4px 0 rgba(2, 6, 16, 0.72),
    0 10px 26px rgba(0, 0, 0, 0.68) !important;
  color: var(--royal-ivory);
}

.fe-panel--enemy {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 20%),
    var(--royal-tex),
    linear-gradient(155deg, #5b2431 0%, #351426 48%, #170919 100%) !important;
  background-blend-mode: normal, soft-light, normal;
  border-color: #c86a6a !important;
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 0 0 1px rgba(240, 170, 160, 0.22),
    inset 0 12px 22px rgba(235, 140, 140, 0.05),
    0 4px 0 rgba(2, 6, 16, 0.72),
    0 10px 26px rgba(0, 0, 0, 0.68) !important;
}

/* ==========================================================================
   11. Overlay filigree corners (pseudo-elements only — no DOM changes)
   Big framed panels get four exterior corners like the unit panel: the
   panel's own ::before/::after take the top two; a static child's pseudos
   anchor to the panel (position:relative from .fe-panel) for the bottom two.
   Small popups get two interior top corners (overflow:hidden clips exterior
   ones; the forecast's two-corner treatment is the in-family precedent).
   ========================================================================== */

/* --- four exterior corners: map menu / unit list / trade / settings ------ */
#map-menu-box::before,
#map-menu-box::after,
#map-menu-items::before,
#map-menu-items::after,
#unit-list-box::before,
#unit-list-box::after,
#unit-list-box .fe-heading::before,
#unit-list-box .fe-heading::after,
#trade-overlay > .fe-panel::before,
#trade-overlay > .fe-panel::after,
#trade-overlay .fe-heading::before,
#trade-overlay .fe-heading::after,
#settings-overlay > .fe-panel::before,
#settings-overlay > .fe-panel::after,
#settings-overlay .fe-heading::before,
#settings-overlay .fe-heading::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  background: var(--royal-corner) top left / contain no-repeat;
  border: 0;
  opacity: 0.95;
  pointer-events: none;
  z-index: 2;
}
#map-menu-box::before,
#unit-list-box::before,
#trade-overlay > .fe-panel::before,
#settings-overlay > .fe-panel::before { top: -8px; left: -8px; }
#map-menu-box::after,
#unit-list-box::after,
#trade-overlay > .fe-panel::after,
#settings-overlay > .fe-panel::after { top: -8px; right: -8px; transform: scaleX(-1); }
#map-menu-items::before,
#unit-list-box .fe-heading::before,
#trade-overlay .fe-heading::before,
#settings-overlay .fe-heading::before { bottom: -8px; left: -8px; transform: scaleY(-1); }
#map-menu-items::after,
#unit-list-box .fe-heading::after,
#trade-overlay .fe-heading::after,
#settings-overlay .fe-heading::after { bottom: -8px; right: -8px; transform: scale(-1, -1); }

/* --- two exterior top corners: status screen (its panel scrolls, so bottom
   corners would scroll away) and the small confirm panel ----------------- */
#status-screen > .fe-panel::before,
#status-screen > .fe-panel::after,
#confirm-overlay > .fe-panel::before,
#confirm-overlay > .fe-panel::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 44px;
  height: 44px;
  background: var(--royal-corner) top left / contain no-repeat;
  border: 0;
  opacity: 0.95;
  pointer-events: none;
  z-index: 2;
}
#status-screen > .fe-panel::before,
#confirm-overlay > .fe-panel::before { left: -8px; }
#status-screen > .fe-panel::after,
#confirm-overlay > .fe-panel::after { right: -8px; transform: scaleX(-1); }

/* --- two interior top corners: pop-up panels (level-up / item-get /
   victory / gameover) — overflow:hidden would clip exterior corners ------ */
#level-up-screen::before,
#level-up-screen::after,
#item-get-screen::before,
#item-get-screen::after,
.fe-result-panel::before,
.fe-result-panel::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 34px;
  height: 34px;
  background: var(--royal-corner) top left / contain no-repeat;
  border: 0;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}
#level-up-screen::before,
#item-get-screen::before,
.fe-result-panel::before { left: 6px; }
#level-up-screen::after,
#item-get-screen::after,
.fe-result-panel::after { right: 6px; transform: scaleX(-1); }

/* ==========================================================================
   12. Overlay content — gilt buttons, ivory rows, gold headings.
   Many overlay buttons carry inline cssText backgrounds (tabs, close, give,
   camp menu buttons); every button rule needs !important to unify them.
   ========================================================================== */

.fe-button {
  border: 1px solid var(--royal-gold) !important;
  background: linear-gradient(180deg, #2c5387, #16386a 52%, #0c2550) !important;
  color: var(--royal-ivory) !important;
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 1px 0 rgba(255, 248, 220, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 2px 5px rgba(0, 0, 0, 0.5);
}

.fe-button:hover,
.fe-button:focus-visible,
.fe-button.is-active {
  color: #fffbe8 !important;
  border-color: var(--royal-gold-hi) !important;
  background: linear-gradient(180deg, #3d6ba8, #1f4b85 52%, #123265) !important;
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 1px 0 rgba(255, 248, 220, 0.30),
    inset 0 0 12px rgba(216, 180, 95, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

.fe-button--danger {
  border-color: #d47777 !important;
  background: linear-gradient(180deg, #7c3a40, #57222c 55%, #341521) !important;
  color: #ffe4df !important;
}

.fe-button--gold {
  border-color: var(--royal-gold-hi) !important;
  background: linear-gradient(180deg, #8a6a2a, #5f4517 55%, #38260c) !important;
  color: #ffedb8 !important;
}

.fe-button--muted {
  border-color: #6b7488 !important;
  background: linear-gradient(180deg, #3c4760, #28324a 55%, #151c2c) !important;
  color: #c9cfdb !important;
}

/* Map menu rows — same hover language as the action menu (ivory label,
   gilt sweep + left gold bar). .fe-menu-row is used only by the map menu. */
.fe-menu-row {
  background: rgba(4, 12, 28, 0.35);
  border-bottom-color: var(--royal-gold-faint);
  color: var(--royal-ivory);
}

.fe-menu-row:hover,
.fe-menu-row.selected {
  border-color: rgba(246, 223, 160, 0.55);
  background: linear-gradient(90deg, rgba(216, 180, 95, 0.30), rgba(216, 180, 95, 0.10) 65%, rgba(216, 180, 95, 0.03));
  box-shadow: inset 3px 0 0 var(--royal-gold-hi);
  color: #fffbe8;
}

/* Map menu two-line rows: the desc line (inline #778) → royal ivory-dim.
   Structure per row: <span>icon</span><div><div>label</div><div>desc</div></div> */
#map-menu-box .fe-menu-row > div > div:last-child { color: var(--royal-ivory-dim) !important; }

.fe-heading { color: var(--royal-gold-hi) !important; }
.fe-screen-title { color: var(--royal-gold-hi) !important; }

/* Unit list + status tables — ivory text, gold header, warm zebra/hover */
#unit-list-box table,
#status-screen table { color: var(--royal-ivory); }

#unit-list-box thead {
  color: var(--royal-gold-hi);
  background: rgba(3, 10, 24, 0.55);
}

#unit-list-box tbody tr { border-bottom-color: var(--royal-gold-faint) !important; }
#unit-list-box tbody tr:nth-child(even) { background: rgba(216, 180, 95, 0.05); }
#unit-list-box tbody tr:hover { background: rgba(216, 180, 95, 0.12); }

/* Trade item rows — hairline gold dividers instead of blue-grey */
#trade-overlay [id^="trade-list-"] > div { border-bottom-color: var(--royal-gold-faint) !important; }

/* ==========================================================================
   13. Camp (進軍準備) — royal curtain; header/menu bars echo the top bar;
   roster chips trade their blue rim for gilt when selected.
   ========================================================================== */

#camp-overlay {
  background:
    radial-gradient(circle at 18% 10%, rgba(45, 88, 140, 0.22), transparent 34%),
    var(--royal-tex),
    linear-gradient(160deg, #0e2a52 0%, #071831 48%, #03091a 100%) !important;
  background-blend-mode: normal, soft-light, normal;
}

#camp-header,
#camp-menu {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%),
    var(--royal-tex),
    linear-gradient(180deg, #1d4074 0%, #0b2349 60%, #071733 100%) !important;
  background-blend-mode: normal, soft-light, normal;
  border-color: var(--royal-gold) !important;
  box-shadow: inset 0 1px 0 rgba(246, 223, 160, 0.18);
}

#camp-body {
  background:
    var(--royal-tex),
    rgba(3, 12, 29, 0.34);
  background-blend-mode: soft-light;
}

/* Camp content rows/cards carry inline borders (#234 hairlines, #345 cards)
   — warm them to faint gold. Divs without a border-width are unaffected. */
#camp-content > div { border-color: rgba(216, 180, 95, 0.22) !important; }

.camp-chip {
  background: rgba(8, 20, 42, 0.6);
  border-color: #3a5a86;
  color: var(--royal-ivory-dim);
}

.camp-chip:hover { border-color: var(--royal-gold); }

.camp-chip--sel {
  border-color: var(--royal-gold-hi);
  background: rgba(44, 60, 100, 0.7);
  box-shadow:
    0 0 12px rgba(246, 223, 160, 0.35),
    inset 0 0 0 1px rgba(246, 223, 160, 0.25);
}

.camp-chip img { border-color: #5a76a0; }
.camp-chip--sel img { border-color: var(--royal-gold-hi); }
.camp-chip__sub { color: #8f8672; }

/* ==========================================================================
   14. Pop-ups, banners and cards
   ========================================================================== */

/* Level-up — panel frame comes from the global .fe-panel rule; tune stats */
.lvup-title { color: var(--royal-gold-hi); }
.lvup-stat.increased { color: #7fe07f; }
.lvup-stat.same { color: #6b6450; }

/* Item-get — royal frame; keep a whisper of the teal glow (its semantic
   accent colour stays inline on the item name) */
#item-get-screen {
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 0 0 1px rgba(246, 223, 160, 0.24),
    inset 0 12px 22px rgba(140, 180, 235, 0.06),
    0 4px 0 rgba(2, 6, 16, 0.72),
    0 10px 26px rgba(0, 0, 0, 0.68),
    0 0 30px rgba(79, 214, 200, 0.14) !important;
}

/* Phase banner — gilt capsule for 自軍, royal crimson for 敵軍 (matches the
   top bar phase colours) */
.banner-player {
  background: linear-gradient(135deg, rgba(23, 52, 102, 0.96), rgba(10, 28, 60, 0.96));
  border: 1px solid var(--royal-gold);
  color: var(--royal-gold-hi);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 0 0 1px rgba(246, 223, 160, 0.28),
    0 6px 24px rgba(0, 0, 0, 0.45);
}

.banner-enemy {
  background: linear-gradient(135deg, rgba(122, 34, 40, 0.96), rgba(72, 16, 26, 0.96));
  border: 1px solid #d47777;
  color: #ffd9d4;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow:
    0 0 0 1px var(--royal-ink),
    inset 0 0 0 1px rgba(240, 170, 160, 0.24),
    0 6px 24px rgba(0, 0, 0, 0.45);
}

/* EXP gain + map menu toast — royal panel (global rule) with ivory/gold ink */
#exp-gain-overlay { color: var(--royal-ivory) !important; }
#map-menu-msg { color: var(--royal-gold-hi) !important; }

/* Chapter title card — deep navy stage, gilt title, flourish above/below.
   The flourishes are background layers on the text blocks themselves (not
   absolutely-positioned pseudos): background + padding scale together under
   the --ui-scale zoom, so the ornament can never drift onto the glyphs at
   large viewports. */
#chapter-title-card {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(28, 60, 112, 0.5), rgba(2, 6, 16, 0) 62%),
    var(--royal-tex),
    linear-gradient(180deg, #02060f 0%, #071226 50%, #02060f 100%);
  background-blend-mode: normal, soft-light, normal;
}

#chapter-title-text {
  color: var(--royal-gold-hi);
  letter-spacing: 5px;
  text-shadow: 0 2px 0 #1d1304, 0 0 18px rgba(246, 223, 160, 0.35);
  background: var(--royal-divider) top center / 300px no-repeat;
  padding: 42px 150px 0;   /* side padding keeps the bg box wider than the 300px flourish */
}

#chapter-title-sub {
  color: var(--royal-ivory-dim);
  letter-spacing: 2px;
  background: var(--royal-divider) bottom center / 300px no-repeat;
  padding: 0 150px 42px;
}

/* Ending — same navy stage; the four fixed lines (inline colours) shift to
   the royal hierarchy: bright gold title → gold sub → ivory → dim ivory.
   Flourishes ride on the first/last line as background layers (zoom-safe). */
#ending-overlay {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(33, 69, 124, 0.35), rgba(2, 6, 16, 0) 60%),
    var(--royal-tex),
    linear-gradient(180deg, #02060f 0%, #081226 50%, #02060f 100%) !important;
  background-blend-mode: normal, soft-light, normal;
}

#ending-overlay > div:nth-child(1) {
  color: var(--royal-gold-hi) !important;
  text-shadow: 0 0 22px rgba(246, 223, 160, 0.45);
  background: var(--royal-divider) top center / 340px no-repeat;
  padding: 46px 170px 0;
}
#ending-overlay > div:nth-child(2) { color: var(--royal-gold) !important; }
#ending-overlay > div:nth-child(3) { color: var(--royal-ivory) !important; }
#ending-overlay > div:nth-child(4) {
  color: var(--royal-ivory-dim) !important;
  background: var(--royal-divider) bottom center / 340px no-repeat;
  padding: 0 170px 46px;
}

/* Promotion showcase — keep the golden ceremonial warmth, ground it in royal
   navy; diagonal viewport-corner filigree (subtle). */
#promo-showcase {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(70, 52, 14, 0.5), rgba(4, 8, 20, 0) 58%),
    var(--royal-tex),
    radial-gradient(ellipse at 50% 42%, rgba(33, 69, 124, 0.4), rgba(2, 6, 16, 0) 60%),
    linear-gradient(180deg, rgba(4, 8, 20, 0.97), rgba(2, 5, 14, 0.99)) !important;
  background-blend-mode: normal, soft-light, normal, normal;
  box-shadow: inset 0 0 240px rgba(0, 0, 0, 0.6);
}

#promo-showcase::before,
#promo-showcase::after {
  content: '';
  position: absolute;
  width: 64px;
  height: 64px;
  background: var(--royal-corner) top left / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
#promo-showcase::before { top: 16px; left: 16px; }
#promo-showcase::after { bottom: 16px; right: 16px; transform: scale(-1, -1); }

/* ==========================================================================
   15. Mobile safety (5a-2) — additive only. Overlay filigree crowds small
   touch layouts, and ornaments anchored to scrolling panels (status screen)
   would scroll away; hide all of it inside the same media conditions.
   ========================================================================== */

@media (max-width: 900px), (max-height: 600px), (hover: none) and (pointer: coarse) {
  #map-menu-box::before,
  #map-menu-box::after,
  #map-menu-items::before,
  #map-menu-items::after,
  #unit-list-box::before,
  #unit-list-box::after,
  #unit-list-box .fe-heading::before,
  #unit-list-box .fe-heading::after,
  #trade-overlay > .fe-panel::before,
  #trade-overlay > .fe-panel::after,
  #trade-overlay .fe-heading::before,
  #trade-overlay .fe-heading::after,
  #settings-overlay > .fe-panel::before,
  #settings-overlay > .fe-panel::after,
  #settings-overlay .fe-heading::before,
  #settings-overlay .fe-heading::after,
  #status-screen > .fe-panel::before,
  #status-screen > .fe-panel::after,
  #confirm-overlay > .fe-panel::before,
  #confirm-overlay > .fe-panel::after,
  #level-up-screen::before,
  #level-up-screen::after,
  #item-get-screen::before,
  #item-get-screen::after,
  .fe-result-panel::before,
  .fe-result-panel::after,
  #promo-showcase::before,
  #promo-showcase::after {
    display: none;
  }

  /* Title-card / ending flourishes are background layers on the text blocks
     (see section 14) — drop them (and their padding) on small touch layouts. */
  #chapter-title-text,
  #chapter-title-sub,
  #ending-overlay > div:nth-child(1),
  #ending-overlay > div:nth-child(4) {
    background: none;
    padding: 0;
  }
}