/* 🌌 Mythic Spellbook theme — "fit Duelyst II" (owner 2026-10-14)
   ─────────────────────────────────────────────────────────────────────────────
   Linked LAST in index.html, so it overrides the gold-on-warm-black chrome
   without editing any earlier sheet. Two halves:

   1. MENU CHROME (scoped `:root:not(.mt-classic)`). Deep navy, neon cyan
      hairlines, chamfered neon buttons, glass panels — the Duelyst II look. The
      scope is a :not() so the theme is ON from the very first paint (no flash of
      gold while the module loads); index.js adds `.mt-classic` only when
      localStorage mt_theme === 'classic', which is the whole rollback.
      ⚠ Gold is KEPT as a token. It is a meaning colour here (Cinder, rewards,
        victory), not chrome — retinting it would recolour every currency pill.

   2. VICTORY / DEFEAT SCENE (unscoped `.gameover-backdrop.gox`). The hero's art
      large and centred on a glowing plinth with the battle stats beneath it;
      gold + cyan for a win, dark and red for a loss. The particles are drawn by
      index.js into `canvas.gox-particles`. Every id the buttons are bound by
      (bindGameOverEvents) is untouched — this sheet only paints.               */

/* ═════════════════════════════ 1. MENU CHROME ═════════════════════════════ */
:root:not(.mt-classic) {
  --bg-deep:  #130a0a;
  --bg-mid:   #201011;
  --bg-panel: #281516;
  --bg-card:  #331516;
  --ink:      #f0766d;
  --ink-dim:  #c29593;
  --border:        #612b2c;
  --border-bright: #d83c38;
  --rule:      rgba(247, 91, 84, 0.42);
  --rule-soft: rgba(247, 91, 84, 0.16);
  --tex-stone: none;

  /* theme-only tokens */
  --mt-cyan:      #ff4d46;
  --mt-cyan-deep: #c61413;
  --mt-green:     #8cff5a;
  --mt-red:       #ff3b4a;
  --mt-glass:     linear-gradient(180deg, rgba(55, 21, 23, 0.90), rgba(25, 12, 13, 0.94));
  /* a 10px chamfer, and the four diagonal hairlines that close it. A border on a
     clip-pathed box only survives on the straight edges, so the cut corners are
     drawn as background lines at exactly the clip's diagonal (10/√2 ≈ 7.07px). */
  --mt-chamfer: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
                        calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

:root:not(.mt-classic) body {
  background:
    radial-gradient(1200px 700px at 78% 6%, rgba(255, 77, 70, 0.16), transparent 60%),
    radial-gradient(900px 620px at 8% 96%, rgba(255, 120, 70, 0.08), transparent 60%),
    linear-gradient(180deg, #271314 0%, #140a0b 55%, #0d0607 100%) fixed;
}

/* ── buttons: the LOGIN / CREATE ACCOUNT shape — chamfered, neon edge, inner glow */
:root:not(.mt-classic) .btn-primary,
:root:not(.mt-classic) .btn-secondary,
:root:not(.mt-classic) .btn-danger {
  --c: var(--mt-cyan);
  --c-glow: rgba(255, 77, 70, 0.45);
  --fill: linear-gradient(180deg, rgba(93, 29, 30, 0.95) 0%, rgba(48, 20, 21, 0.96) 55%, rgba(30, 12, 13, 0.98) 100%);
  font-family: 'Rajdhani', 'Cinzel', sans-serif;
  font-variant: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #ff665b;
  text-shadow: 0 0 8px var(--c-glow), 0 1px 0 rgba(0, 0, 0, 0.6);
  border: 0;
  border-radius: 0;
  clip-path: var(--mt-chamfer);
  background:
    linear-gradient(135deg, transparent 5.6px, var(--c) 5.6px 8px, transparent 8px) top left / 12px 12px no-repeat,
    linear-gradient(225deg, transparent 5.6px, var(--c) 5.6px 8px, transparent 8px) top right / 12px 12px no-repeat,
    linear-gradient(315deg, transparent 5.6px, var(--c) 5.6px 8px, transparent 8px) bottom right / 12px 12px no-repeat,
    linear-gradient(45deg,  transparent 5.6px, var(--c) 5.6px 8px, transparent 8px) bottom left / 12px 12px no-repeat,
    var(--fill);
  background-blend-mode: normal;
  box-shadow:
    inset 0 0 0 1.5px var(--c),
    inset 0 0 18px var(--c-glow),
    inset 0 -10px 18px rgba(0, 0, 0, 0.35);
  transition: filter 0.16s ease, transform 0.12s ease;
}
:root:not(.mt-classic) .btn-secondary {
  --c: rgba(231, 147, 142, 0.75);
  --c-glow: rgba(231, 114, 109, 0.22);
  --fill: linear-gradient(180deg, rgba(57, 25, 27, 0.92), rgba(25, 13, 14, 0.95));
  color: #e3867f;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
:root:not(.mt-classic) .btn-danger {
  --c: #ff5462;
  --c-glow: rgba(255, 60, 80, 0.4);
  --fill: linear-gradient(180deg, rgba(110, 14, 26, 0.95), rgba(48, 4, 12, 0.97));
}
:root:not(.mt-classic) .btn-primary:hover:not(:disabled),
:root:not(.mt-classic) .btn-secondary:hover:not(:disabled),
:root:not(.mt-classic) .btn-danger:hover:not(:disabled) {
  filter: brightness(1.22) saturate(1.1);
}
:root:not(.mt-classic) .btn-secondary:hover:not(:disabled) {
  --c: var(--mt-cyan);
  --c-glow: rgba(255, 77, 70, 0.3);
}
:root:not(.mt-classic) .btn-primary:disabled,
:root:not(.mt-classic) .btn-secondary:disabled {
  filter: grayscale(0.8) brightness(0.7);
}
/* the green call-to-action, as on CREATE ACCOUNT */
:root:not(.mt-classic) .btn-primary.glow-gold,
:root:not(.mt-classic) .btn-primary.mt-go {
  --c: var(--mt-green);
  --c-glow: rgba(140, 255, 90, 0.42);
  --fill: linear-gradient(180deg, rgba(40, 96, 30, 0.95), rgba(14, 44, 14, 0.97));
}

/* ── panels: navy glass with a cyan hairline instead of carved stone */
:root:not(.mt-classic) .panel {
  background: var(--mt-glass);
  background-image: var(--mt-glass);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 120, 110, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 12px 32px rgba(0, 0, 0, 0.5);
}
:root:not(.mt-classic) .panel-title {
  color: #ff7c73;
  text-shadow: 0 0 10px rgba(255, 77, 70, 0.35);
}

/* ── inputs: the dark see-through fields from the login screen */
:root:not(.mt-classic) input:not([type=checkbox]):not([type=radio]):not([type=range]),
:root:not(.mt-classic) select,
:root:not(.mt-classic) textarea {
  background-color: rgba(25, 11, 12, 0.82);
  border: 1px solid rgba(247, 91, 84, 0.38);
  border-radius: 2px;
}
:root:not(.mt-classic) input:focus,
:root:not(.mt-classic) select:focus,
:root:not(.mt-classic) textarea:focus {
  outline: none;
  border-color: var(--mt-cyan);
  box-shadow: 0 0 0 1px rgba(255, 77, 70, 0.35), 0 0 14px rgba(255, 77, 70, 0.25);
}

/* ── thin cyan scrollbars */
:root:not(.mt-classic) ::-webkit-scrollbar { width: 9px; height: 9px; }
:root:not(.mt-classic) ::-webkit-scrollbar-track { background: rgba(15, 7, 8, 0.6); }
:root:not(.mt-classic) ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 77, 70, 0.45), rgba(198, 20, 19, 0.45));
  border-radius: 0;
}

/* ── the sign-in gate = the Duelyst II login: painted city, glass card, a thin
   serif title over a rule, a cyan LOGIN chamfer and a green CREATE chamfer.
   The city is the main menu's own plate (extracted to menu-city.jpg), so the
   first screen and the menu are one world.
   ⚠ !important only where index.html's later Ruin pass (".auth-gate" near the
   end of the inline sheets) already uses it on the same property. */
:root:not(.mt-classic) .auth-gate {
  background-color: #110909 !important;
  background-image: url('../../assets/artwork/ui/menu-city.jpg') !important;
  background-size: cover !important;
  background-position: center 35% !important;
  background-blend-mode: normal !important;
}
:root:not(.mt-classic) .auth-gate-overlay {
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(21, 9, 10, 0.10) 0%, rgba(21, 9, 10, 0.55) 62%, rgba(11, 5, 5, 0.9) 100%),
    linear-gradient(180deg, rgba(21, 9, 10, 0.35) 0%, rgba(0, 0, 0, 0) 40%, rgba(11, 5, 5, 0.55) 100%) !important;
}
:root:not(.mt-classic) .auth-gate-content {
  background: linear-gradient(180deg, rgba(33, 15, 16, 0.72), rgba(20, 8, 9, 0.82));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 77, 70, 0.32);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 115, 105, 0.12), 0 0 40px rgba(255, 77, 70, 0.12), 0 24px 60px rgba(0, 0, 0, 0.6);
}
:root:not(.mt-classic) .auth-gate-eyebrow { color: #ff7c73; text-shadow: 0 0 12px rgba(255, 77, 70, 0.55); }
:root:not(.mt-classic) .auth-gate-title {
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 106, 95, 0.75);
  display: inline-block;
  text-shadow: 0 0 22px rgba(255, 77, 70, 0.35), 0 3px 10px rgba(0, 0, 0, 0.8);
}
:root:not(.mt-classic) .auth-gate-tagline { color: #dc918c; }
:root:not(.mt-classic) .auth-gate-btn {
  --c: var(--mt-cyan); --c-glow: rgba(255, 77, 70, 0.45);
  --fill: linear-gradient(180deg, rgba(93, 29, 30, 0.95), rgba(32, 12, 13, 0.97));
  font-family: 'Rajdhani', 'Cinzel', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.05rem;
  color: #ff665b; text-shadow: 0 0 8px var(--c-glow);
  border: 0 !important; border-radius: 0;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  box-shadow: inset 0 0 0 2px var(--c), inset 0 0 22px var(--c-glow) !important;
  /* The pointed ends. inset box-shadow only survives on the straight top and
     bottom edges, so each of the four slanted edges gets a line drawn in its own
     16px × 50% box. A "to <corner>" gradient's 50% line joins the OTHER two
     corners, so each direction is picked to make that line the clip edge, with
     the band laid just inside it. */
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--c) calc(50% - 0.5px) calc(50% + 1.7px), transparent calc(50% + 1.7px)) left top / 16px 50% no-repeat,
    linear-gradient(to top right,    transparent calc(50% - 0.5px), var(--c) calc(50% - 0.5px) calc(50% + 1.7px), transparent calc(50% + 1.7px)) left bottom / 16px 50% no-repeat,
    linear-gradient(to bottom left,  transparent calc(50% - 0.5px), var(--c) calc(50% - 0.5px) calc(50% + 1.7px), transparent calc(50% + 1.7px)) right top / 16px 50% no-repeat,
    linear-gradient(to top left,     transparent calc(50% - 0.5px), var(--c) calc(50% - 0.5px) calc(50% + 1.7px), transparent calc(50% + 1.7px)) right bottom / 16px 50% no-repeat,
    var(--fill) !important;
}
:root:not(.mt-classic) .auth-gate-btn.secondary {
  --c: var(--mt-green); --c-glow: rgba(140, 255, 90, 0.42);
  --fill: linear-gradient(180deg, rgba(36, 86, 28, 0.94), rgba(10, 34, 12, 0.97));
  color: #f4ffee;
}
:root:not(.mt-classic) .auth-gate-btn:hover { filter: brightness(1.22); transform: none; }
:root:not(.mt-classic) .auth-gate-back {
  background: rgba(26, 12, 13, 0.75) !important;
  border-color: rgba(255, 77, 70, 0.35) !important;
  color: #ea817a !important;
}

/* ── ambient motes over the menus (index.js draws them; never in battle) */
#mt-motes {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 900;
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 0.8s ease;
}
#mt-motes.on { opacity: 1; }

/* ═══════════════════════ 2. VICTORY / DEFEAT SCENE ═══════════════════════ */
/* ⚠ backdrop-filter goes. It makes the backdrop the containing block for its
   position:fixed children, and .gox-sky must stay pinned to the VIEWPORT while
   the result card scrolls (bug-mtylr070 made the backdrop a scroller). The
   scene is near-opaque anyway, so the blur was not visible. */
.gameover-backdrop.gox {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: gox-fade 0.6s ease-out;
}
.gameover-backdrop.gox.victory {
  background:
    radial-gradient(55% 45% at 50% 30%, rgba(255, 212, 120, 0.30), transparent 70%),
    radial-gradient(80% 55% at 50% 104%, rgba(255, 46, 40, 0.26), transparent 70%),
    linear-gradient(180deg, rgba(34, 16, 17, 0.95), rgba(11, 5, 5, 0.98));
}
.gameover-backdrop.gox.defeat {
  background:
    radial-gradient(55% 45% at 50% 30%, rgba(200, 12, 28, 0.34), transparent 70%),
    radial-gradient(90% 55% at 50% 106%, rgba(130, 0, 12, 0.42), transparent 70%),
    linear-gradient(180deg, rgba(22, 2, 6, 0.97), rgba(4, 0, 1, 0.99));
}
@keyframes gox-fade { from { opacity: 0; } to { opacity: 1; } }

/* the CSS sparks / scanlines are replaced by the canvas */
.gameover-backdrop.gox .gameover-fx { display: none; }

.gox-sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gox-particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gox-rays {
  position: absolute; left: 50%; top: 36%;
  width: 190vmax; height: 190vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 160, 0.11) 0deg 5deg, transparent 5deg 17deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 14%, transparent 42%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 14%, transparent 42%);
  animation: gox-spin 110s linear infinite;
}
.gox.defeat .gox-rays {
  background: repeating-conic-gradient(from 0deg, rgba(255, 40, 50, 0.07) 0deg 3deg, transparent 3deg 22deg);
  animation-duration: 220s;
  animation-direction: reverse;
}
@keyframes gox-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* the card: no box any more — the scene IS the frame */
.gameover-backdrop.gox > .gox-modal {
  position: relative; z-index: 1;
  max-width: 900px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 1.2rem 1.2rem 1.6rem;
  animation: none;
}

/* ── the title: big, slammed in, glowing */
.gox .gox-banner { position: relative; margin-bottom: 0.2rem; }
.gox .gox-title,
.gox .gameover-title-shadow {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 11vw, 7.4rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1;
}
.gox .gameover-modal.victory .gox-title,
.gox .gox-modal.victory .gox-title {
  background: linear-gradient(180deg, #ffffff 0%, #fff3c4 30%, #ffd572 58%, #e9a432 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* drop-shadow, never text-shadow: Chromium paints text-shadow ON TOP of a
     background-clip:text fill and hollows every glyph (see main-menu .gold-stamp). */
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(255, 200, 90, 0.65)) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55));
  animation: gox-slam 0.9s cubic-bezier(0.2, 1.3, 0.35, 1) both;
}
.gox .gox-modal.defeat .gox-title {
  background: linear-gradient(180deg, #ffd9d9 0%, #ff6a6a 34%, #d4111f 66%, #6a0010 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(255, 20, 40, 0.6)) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.7));
  animation: gox-slam-heavy 1.1s cubic-bezier(0.25, 1, 0.3, 1) both;
}
.gox .gameover-title-shadow { opacity: 0.6; }
@keyframes gox-slam {
  0%   { opacity: 0; transform: scale(1.9); letter-spacing: 0.5em; filter: blur(12px); }
  55%  { opacity: 1; transform: scale(0.96); filter: drop-shadow(0 0 40px rgba(255, 220, 120, 1)); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes gox-slam-heavy {
  0%   { opacity: 0; transform: translateY(-40px) scale(1.3); filter: blur(10px); }
  60%  { opacity: 1; transform: translateY(4px) scale(1); }
  100% { opacity: 1; transform: none; }
}
.gox .gox-flourish { color: #ffd98a; }
.gox .gox-flourish .gox-rule { background: linear-gradient(90deg, transparent, rgba(255, 217, 138, 0.85), rgba(255, 77, 70, 0.6), transparent); }
.gox.defeat .gox-flourish { color: #ff5a5a; }
.gox.defeat .gox-flourish .gox-rule { background: linear-gradient(90deg, transparent, rgba(255, 60, 60, 0.85), transparent); }
.gox .gox-sub {
  font-family: 'EB Garamond', 'Cinzel', serif; font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #f2e6c4; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.gox.defeat .gox-sub { color: #f0b4b4; }

/* ── the stage: hero art, halo, rune ring, plinth */
.gameover-backdrop.gox:not(.has-art) .gox-stage { display: none; }
.gox-stage {
  position: relative;
  height: clamp(250px, 50vh, 540px);
  margin: 0.4rem auto 1.4rem;
  display: flex; align-items: flex-end; justify-content: center;
}
.gox-halo {
  position: absolute; left: 50%; top: 46%;
  width: min(120%, 760px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 228, 160, 0.42) 0%, rgba(255, 190, 90, 0.16) 30%, rgba(255, 77, 70, 0.08) 48%, transparent 66%);
  animation: gox-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
.gox.defeat .gox-halo {
  background: radial-gradient(circle, rgba(220, 20, 40, 0.34) 0%, rgba(120, 0, 16, 0.18) 34%, transparent 64%);
}
@keyframes gox-breathe { 0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.97); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }

.gox-runes {
  position: absolute; left: 50%; bottom: 0;
  width: min(78%, 480px); aspect-ratio: 1;
  /* translate(…, 50%) puts the ring's CENTRE on the stage floor, under the feet */
  transform: translate(-50%, 50%) perspective(700px) rotateX(76deg);
  pointer-events: none;
}
.gox-runes::before,
.gox-runes::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
.gox-runes::before {
  border: 2px dashed rgba(255, 220, 150, 0.7);
  box-shadow: 0 0 24px rgba(255, 200, 100, 0.55), inset 0 0 24px rgba(255, 77, 70, 0.35);
  animation: gox-ring 24s linear infinite;
}
.gox-runes::after {
  inset: 12%;
  border: 1px solid rgba(255, 77, 70, 0.7);
  box-shadow: 0 0 18px rgba(255, 77, 70, 0.5);
  animation: gox-ring 16s linear infinite reverse;
}
.gox.defeat .gox-runes::before { border-color: rgba(255, 50, 60, 0.55); box-shadow: 0 0 24px rgba(200, 0, 20, 0.55), inset 0 0 20px rgba(120, 0, 10, 0.5); animation-duration: 60s; }
.gox.defeat .gox-runes::after  { border-color: rgba(140, 0, 20, 0.7); box-shadow: 0 0 14px rgba(160, 0, 20, 0.5); animation-duration: 40s; }
@keyframes gox-ring { to { transform: rotate(360deg); } }

.gox-plinth {
  position: absolute; left: 50%; bottom: -26px;
  width: min(86%, 540px); height: 70px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 236, 180, 0.65) 0%, rgba(255, 190, 90, 0.28) 28%, rgba(255, 77, 70, 0.12) 52%, transparent 72%);
  filter: blur(3px);
  pointer-events: none;
}
.gox.defeat .gox-plinth { background: radial-gradient(ellipse at center, rgba(255, 50, 60, 0.45) 0%, rgba(120, 0, 12, 0.25) 36%, transparent 72%); }

.gox-artwrap {
  position: relative; z-index: 2;
  height: 100%;
  max-width: min(94%, 560px);
  animation:
    gox-art-in 1.05s cubic-bezier(0.2, 0.9, 0.25, 1) both 0.15s,
    gox-float 6.5s ease-in-out infinite 1.3s;
}
.gox-art {
  display: block; height: 100%; width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom center;
  border-radius: 4px;
  border: 2px solid rgba(255, 226, 150, 0.85);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 0 5px rgba(33, 17, 18, 0.65),
    0 0 0 6px rgba(255, 77, 70, 0.55),
    0 0 46px rgba(255, 200, 100, 0.55),
    0 30px 60px rgba(0, 0, 0, 0.75);
}
.gox-shine {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.38) 48%, rgba(255, 240, 200, 0.12) 54%, transparent 62%);
  background-size: 260% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
  animation: gox-shine 5.5s ease-in-out infinite 1.1s;
}
@keyframes gox-shine { 0% { background-position: 130% 0; } 35%, 100% { background-position: -130% 0; } }
@keyframes gox-art-in {
  0%   { opacity: 0; transform: translateY(40px) scale(0.86); filter: brightness(3) blur(6px); }
  60%  { opacity: 1; filter: brightness(1.4) blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes gox-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* A whole-body cutout (index.js marks .is-cutout from the art's alpha) stands
   free on the plinth: no frame, the glow follows the silhouette instead. */
.gox.is-cutout .gox-art {
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 0 22px rgba(255, 210, 120, 0.55)) drop-shadow(0 0 2px rgba(255, 240, 200, 0.9)) drop-shadow(0 26px 30px rgba(0, 0, 0, 0.7));
}
.gox.is-cutout .gox-shine { display: none; }
.gox.defeat.is-cutout .gox-art {
  border: 0; box-shadow: none;
  filter: grayscale(0.85) brightness(0.55) contrast(1.2) drop-shadow(0 0 22px rgba(220, 20, 35, 0.6)) drop-shadow(0 26px 30px rgba(0, 0, 0, 0.8));
}

/* DEFEAT: the art drains of colour and sinks; red bleeds in from below */
.gox.defeat .gox-artwrap {
  animation: gox-art-fall 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) both 0.2s;
}
.gox.defeat .gox-art {
  border-color: rgba(150, 20, 30, 0.9);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 0 5px rgba(20, 2, 4, 0.75),
    0 0 0 6px rgba(200, 20, 35, 0.55),
    0 0 50px rgba(200, 0, 20, 0.45),
    0 30px 60px rgba(0, 0, 0, 0.85);
  filter: grayscale(0.85) brightness(0.62) contrast(1.15);
}
.gox.defeat .gox-shine {
  background: linear-gradient(180deg, rgba(120, 0, 10, 0.05) 30%, rgba(150, 0, 15, 0.55) 100%);
  background-size: auto; mix-blend-mode: multiply; animation: none;
}
@keyframes gox-art-fall {
  0%   { opacity: 0; transform: translateY(-24px) scale(1.04); filter: brightness(1.6); }
  45%  { opacity: 1; filter: brightness(1); }
  100% { opacity: 1; transform: translateY(6px) scale(0.98); filter: none; }
}

/* the cause line under the art */
.gox .gameover-cause { position: relative; z-index: 2; }

/* ── hero card → a glass info strip (the art is above it now) */
.gameover-backdrop.gox.has-art .gox-hero { grid-template-columns: 1fr; text-align: center; }
.gameover-backdrop.gox.has-art .gox-portrait { display: none; }
.gameover-backdrop.gox.has-art .gox-elems { justify-content: center; }
.gox .gox-hero {
  position: relative; z-index: 2;
  border-radius: 2px;
  border: 1px solid rgba(255, 220, 150, 0.35);
  background: linear-gradient(180deg, rgba(45, 23, 24, 0.88), rgba(23, 11, 12, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.12), 0 14px 40px rgba(0, 0, 0, 0.55);
}
.gox.defeat .gox-hero {
  border-color: rgba(220, 40, 50, 0.4);
  background: linear-gradient(180deg, rgba(40, 6, 10, 0.9), rgba(14, 2, 4, 0.94));
}
.gox .gox-heroname {
  font-size: clamp(1.4rem, 3.6vw, 2.1rem); letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff1cc; text-shadow: 0 0 16px rgba(255, 200, 100, 0.45), 0 2px 6px rgba(0, 0, 0, 0.8);
}
.gox.defeat .gox-heroname { color: #ffd0d0; text-shadow: 0 0 16px rgba(255, 40, 50, 0.45), 0 2px 6px rgba(0, 0, 0, 0.8); }
.gox .gox-xpbar { height: 10px; border-radius: 0; border-color: rgba(255, 77, 70, 0.4); background: rgba(16, 4, 5, 0.75); }
.gox .gox-xpfill {
  background: linear-gradient(90deg, #e21f1c, #ff4d46 70%, #ff6f64);
  box-shadow: 0 0 12px rgba(255, 77, 70, 0.7);
  animation: gox-xp 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.9s;
  transform-origin: left center;
}
.gox.defeat .gox-xpbar { border-color: rgba(220, 40, 50, 0.45); }
.gox.defeat .gox-xpfill { background: linear-gradient(90deg, #6a0010, #d4111f 70%, #ff7a7a); box-shadow: 0 0 12px rgba(255, 40, 50, 0.6); }
@keyframes gox-xp { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── stats: a row of glowing tiles that count in one by one */
.gox .gox-stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 0.55rem; }
.gox .gox-stat {
  position: relative; overflow: hidden;
  border-radius: 0;
  clip-path: var(--mt-chamfer, none);
  border: 0;
  background: linear-gradient(180deg, rgba(69, 27, 28, 0.85), rgba(23, 11, 12, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.32), inset 0 2px 0 rgba(255, 220, 150, 0.55);
  animation: gox-stat-in 0.5s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.gox .gox-stat:nth-child(1) { animation-delay: 1.00s; }
.gox .gox-stat:nth-child(2) { animation-delay: 1.10s; }
.gox .gox-stat:nth-child(3) { animation-delay: 1.20s; }
.gox .gox-stat:nth-child(4) { animation-delay: 1.30s; }
.gox .gox-stat:nth-child(5) { animation-delay: 1.40s; }
.gox .gox-stat:nth-child(6) { animation-delay: 1.50s; }
@keyframes gox-stat-in { from { opacity: 0; transform: translateY(14px) scale(0.9); } to { opacity: 1; transform: none; } }
.gox .gox-statnum { color: #ffffff; text-shadow: 0 0 14px rgba(255, 210, 110, 0.6); }
.gox .gox-statof { font-size: 0.55em; opacity: 0.55; margin-left: 0.08em; }
.gox .gox-statlabel { color: #dd9a96; letter-spacing: 0.14em; }
.gox.defeat .gox-stat {
  background: linear-gradient(180deg, rgba(50, 8, 14, 0.88), rgba(14, 2, 4, 0.92));
  box-shadow: inset 0 0 0 1px rgba(220, 40, 50, 0.32), inset 0 2px 0 rgba(255, 60, 70, 0.55);
}
.gox.defeat .gox-statnum { text-shadow: 0 0 14px rgba(255, 40, 50, 0.6); }
.gox.defeat .gox-statlabel { color: #d49c9c; }

/* ── the other panels inherit the glass */
.gox .gox-panel,
.gox .gox-record,
.gox .campaign-victory-card {
  position: relative; z-index: 2;
  border-radius: 2px;
  border: 1px solid rgba(255, 77, 70, 0.28);
  background: linear-gradient(180deg, rgba(38, 20, 21, 0.86), rgba(20, 9, 10, 0.9));
}
.gox.defeat .gox-panel,
.gox.defeat .gox-record {
  border-color: rgba(220, 40, 50, 0.3);
  background: linear-gradient(180deg, rgba(34, 5, 9, 0.88), rgba(12, 2, 4, 0.92));
}
.gox .gox-panel-title { color: #ffe3a0; }
.gox.defeat .gox-panel-title { color: #ffb3b3; }

/* ── the three buttons: neon chamfers; the middle one is the call to action */
.gox .gox-actions { position: relative; z-index: 2; }
.gox .gox-btn {
  border-radius: 0 !important;
  clip-path: var(--mt-chamfer, none);
  border: 0 !important;
  font-family: 'Rajdhani', 'Cinzel', sans-serif;
  font-weight: 700; letter-spacing: 0.14em;
  color: #ff675c !important;
  background: linear-gradient(180deg, rgba(60, 26, 27, 0.92), rgba(25, 12, 13, 0.95)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(231, 147, 142, 0.6), inset 0 0 16px rgba(231, 114, 109, 0.18) !important;
  transition: filter 0.16s ease, transform 0.12s ease;
}
.gox.defeat .gox-btn {
  color: #f3dede !important;
  background: linear-gradient(180deg, rgba(44, 10, 14, 0.94), rgba(16, 3, 5, 0.96)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(200, 90, 96, 0.55), inset 0 0 16px rgba(200, 40, 50, 0.16) !important;
}
.gox .gox-btn:hover { filter: brightness(1.25); }
.gox .gox-btn:active { transform: translateY(1px); }
.gox.victory .gox-btn-main {
  color: #fffbea !important;
  text-shadow: 0 0 10px rgba(255, 210, 110, 0.8);
  background: linear-gradient(180deg, rgba(126, 86, 20, 0.96), rgba(60, 36, 6, 0.98)) !important;
  box-shadow: inset 0 0 0 2px #ffd572, inset 0 0 26px rgba(255, 200, 90, 0.55), 0 0 30px rgba(255, 200, 90, 0.4) !important;
  animation: gox-pulse 2.2s ease-in-out infinite 2s;
}
.gox.defeat .gox-btn-main {
  color: #fff0f0 !important;
  text-shadow: 0 0 10px rgba(255, 60, 70, 0.8);
  background: linear-gradient(180deg, rgba(120, 12, 24, 0.96), rgba(46, 4, 10, 0.98)) !important;
  box-shadow: inset 0 0 0 2px #ff4a58, inset 0 0 26px rgba(255, 40, 50, 0.45) !important;
}
@keyframes gox-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
.gox .gox-sharelink { color: #f28a83; }
.gox.defeat .gox-sharelink { color: #d79a9a; }

@media (max-width: 620px) {
  .gox-stage { height: clamp(220px, 42vh, 380px); }
  .gox .gox-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gox-rays, .gox-halo, .gox-runes::before, .gox-runes::after, .gox-artwrap, .gox-shine,
  .gox .gox-title, .gox .gox-stat, .gox .gox-xpfill, .gox .gox-btn-main { animation: none !important; }
}

/* ═════════════════ 🩸 CRIMSON DISPATCH — the main menu's news card (owner 2026-10-26, the Humanity Contained mockup) ═════════
   The Herald's Dispatch is drawn by THIS document over the menu iframe (index.html _hdWidgetHtml), so the menu's crimson layout
   (src/theme/menu.css) cannot reach it: it is placed here into the menu's RIGHT column, under the event panel, and repainted as
   the mockup's dark "News & Updates" panel (red title, light copy, the image framed) instead of the gold-theme parchment.
   The numbers mirror menu.css's --cr-in 18 / --cr-right / event panel 132 + gap 14. Every id the card is bound by is untouched. */
:root:not(.mt-classic) #md-dispatch {
  right: 18px; bottom: auto; top: calc(18px + 132px + 14px); width: min(420px, 27vw); height: min(330px, calc(100vh - 18px - 132px - 14px - 18px));
  color: #e6dcdc;
}
:root:not(.mt-classic) #md-dispatch .hd-paper {
  clip-path: none; background: linear-gradient(180deg, rgba(20, 9, 10, .95) 0%, rgba(12, 6, 7, .97) 55%, rgba(8, 4, 5, .98) 100%);
  box-shadow: inset 0 0 0 1px #8f1517, inset 0 0 0 3px #0a0405, inset 0 0 0 4px #3d0c0e, inset 0 0 28px rgba(150, 12, 12, .16), 0 18px 46px rgba(0, 0, 0, .55);
  filter: none;
}
:root:not(.mt-classic) #md-dispatch .hd-sheet { padding: 18px 20px 14px; }
:root:not(.mt-classic) #md-dispatch .hd-title { color: #e33a31; font-size: clamp(16px, 1.25vw, 21px); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .85), 0 0 12px rgba(212, 32, 28, .35); }
:root:not(.mt-classic) #md-dispatch .hd-raven { filter: invert(1) sepia(1) saturate(5) hue-rotate(-40deg) brightness(.85); }
:root:not(.mt-classic) #md-dispatch .hd-rule { background: linear-gradient(90deg, rgba(143, 21, 23, .1), rgba(212, 32, 28, .6) 12%, rgba(212, 32, 28, .6) 88%, rgba(143, 21, 23, .1)); }
:root:not(.mt-classic) #md-dispatch .hd-ptitle { color: #f1e6e6; }
:root:not(.mt-classic) #md-dispatch .hd-ptext { color: #c9b8b8; font-size: 14.5px; }
:root:not(.mt-classic) #md-dispatch .hd-date { color: rgba(230, 210, 210, .55); }
:root:not(.mt-classic) #md-dispatch .hd-tag { background: rgba(120, 12, 14, .25); }
:root:not(.mt-classic) #md-dispatch .hd-tag[data-t="update"] { color: #e8a9a5; border-color: rgba(212, 32, 28, .5); }
:root:not(.mt-classic) #md-dispatch .hd-ico { color: #e6dcdc; border-color: rgba(212, 32, 28, .45); }
:root:not(.mt-classic) #md-dispatch .hd-ico:hover { color: #fff; background: rgba(212, 32, 28, .2); border-color: #d4201c; }
:root:not(.mt-classic) #md-dispatch .hd-social-lbl, :root:not(.mt-classic) #md-dispatch .hd-soc-note, :root:not(.mt-classic) #md-dispatch .hd-soc-add { color: #c9b8b8; }
:root:not(.mt-classic) #md-dispatch .hd-box { border-color: rgba(212, 32, 28, .5); }
:root:not(.mt-classic) #md-dispatch img { box-shadow: 0 0 0 1px #8f1517; }
/* 🔔 the notification bell sits top-right on every screen (top 64 / right 16) — on the crimson menu that is the middle of the
   event panel's title row, so while the menu frame is SHOWING it drops to the empty bottom of the right column */
:root:not(.mt-classic) body:has(#mm-frame:not([style*="display: none"])) #notif-bell { top: auto !important; bottom: 22px !important; right: 22px !important; }
/* the dispatch's purple skull pennant → the theme's crimson (purple sits ~90° short of red) */
:root:not(.mt-classic) #md-dispatch .hd-skull { filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(4.5) brightness(.72); }   /* one red family, skull included */


/* ═════ 🩸 CRIMSON BASE VAULT (owner 2026-10-26: "update the base Vault to look exactly like this but with all of our stuff") ═════
   The mockup: one framed header band (← Back · 🕷 BASE VAULT in silver caps · the tabs on the right, Auto-Stow under Back),
   a left rail (Field Bag, the Outter Gates card, the heartbeat at the bottom) and the avatar loadout on the right. Near-black
   panels, a dark crimson hairline, square corners, crimson for active / pressable, silver-grey Cinzel for headings. The
   avatar panel's own look lives in src/avatarloadout (.mal-*); the rail cards come from its mountRail. Old gold rules in
   index.html stay for mt-classic. */
:root:not(.mt-classic) .base-vault-page { --cv-edge:#3b1416; --cv-red:#c3201d; --cv-hot:#e0322c; --cv-ink:#d9d1cb; --cv-dim:#8c817c;
  padding: 0 1.1rem 1.4rem !important; background: radial-gradient(ellipse at 50% 0%, rgba(60,10,12,.35), transparent 60%), #070505 !important; min-height: 100vh !important; }
:root:not(.mt-classic) .base-vault-page .vault-top { margin: .9rem 0 1rem !important; border: 1px solid var(--cv-edge) !important; background: linear-gradient(180deg,#110b0b,#090606) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 2px #1d0a0b, 0 12px 30px rgba(0,0,0,.55) !important; padding: 0 1rem !important; }
:root:not(.mt-classic) .base-vault-page .vault-header { background: none !important; border: 0 !important; box-shadow: none !important; grid-template-columns: auto 1fr auto !important; padding: .85rem 0 .35rem !important; margin: 0 !important; border-bottom: 0 !important; }
:root:not(.mt-classic) .base-vault-page .vault-tools { padding: .35rem 0 .85rem !important; }
:root:not(.mt-classic) .base-vault-page .vault-back-pill,
:root:not(.mt-classic) .base-vault-page #vault-back,
:root:not(.mt-classic) .base-vault-page .vault-tools .btn-mini,
:root:not(.mt-classic) .base-vault-page .vault-tab,
:root:not(.mt-classic) .base-vault-page .btn-mini,
:root:not(.mt-classic) .base-vault-page .btn-primary {
  border-radius: 0 !important; background: linear-gradient(180deg,#150d0d,#0b0707) !important; border: 1px solid #6a1c1c !important;
  color: #e3dbd5 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6) !important; font-family: 'Cinzel', Georgia, serif !important;
  font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; -webkit-text-fill-color: currentColor !important; }
:root:not(.mt-classic) .base-vault-page #vault-back { clip-path: none; color: #e0322c !important; padding: .55rem 1.7rem !important; font-size: .9rem !important; }
:root:not(.mt-classic) .base-vault-page .vault-tools .btn-mini { font-size: .72rem !important; padding: .45rem 1rem !important; color: #e0322c !important; }
:root:not(.mt-classic) .base-vault-page .vault-tab { font-size: .8rem !important; padding: .6rem 1.3rem !important; }
:root:not(.mt-classic) .base-vault-page .vault-back-pill:hover,
:root:not(.mt-classic) .base-vault-page .vault-tab:hover,
:root:not(.mt-classic) .base-vault-page .btn-mini:hover { border-color: #e0322c !important; color: #fff !important; box-shadow: 0 0 14px rgba(212,32,28,.35) !important; }
:root:not(.mt-classic) .base-vault-page .vault-tab.active { background: linear-gradient(180deg,#8f1614,#5a0d0c) !important; border-color: #e0322c !important; color: #fff !important;
  box-shadow: 0 0 18px rgba(212,32,28,.35), inset 0 1px 0 rgba(255,140,120,.18) !important; }
:root:not(.mt-classic) .base-vault-page .vault-title { text-align: left !important; padding-left: 1.6rem !important; font-size: 2.4rem !important; font-weight: 700 !important; letter-spacing: .08em !important;
  background: linear-gradient(180deg,#f2eeeb,#bdb6b2 55%,#8a8380) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #d9d3cf !important;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(120,10,10,.35)) !important; }
:root:not(.mt-classic) .base-vault-page .vault-title-sigil { -webkit-text-fill-color: initial !important; filter: grayscale(1) brightness(1.7) drop-shadow(0 0 6px rgba(212,32,28,.5)) !important; font-size: .8em !important; margin-right: .35em !important; }
/* the stage: a narrower rail (the mockup's ~1 : 2) */
:root:not(.mt-classic) .base-vault-page .vault-stage { grid-template-columns: minmax(280px, 32%) minmax(0, 1fr) !important; align-items: start !important; }
/* the rail stays on screen while the loadout scrolls (sticky), the Outter Gates card + heartbeat right under the field bag. A
   viewport-tall rail was tried first: at the top of the page its bottom (the heartbeat) sat below the fold. A long field bag
   scrolls inside its own panel, capped so the heartbeat stays on screen */
:root:not(.mt-classic) .base-vault-page .vault-rail { gap: 1rem !important; position: sticky !important; top: .8rem !important; }
:root:not(.mt-classic) .base-vault-page .vault-rail .vault-bag-panel { overflow: auto !important; min-height: 0 !important; flex: 0 1 auto !important; max-height: calc(100vh - 24rem) !important; }
:root:not(.mt-classic) .base-vault-page .vault-bag-title { font-size: .8rem !important; }
:root:not(.mt-classic) .base-vault-page #vault-check-bag { font-size: .62rem !important; padding: .3rem .6rem !important; white-space: nowrap !important; }
:root:not(.mt-classic) .base-vault-page .vault-rail-extra { display: flex !important; flex-direction: column !important; gap: 1rem !important; }
:root:not(.mt-classic) .base-vault-page .vault-hero-panel,
:root:not(.mt-classic) .base-vault-page .vault-grid-panel,
:root:not(.mt-classic) .base-vault-page .vault-bag-panel {
  border-radius: 0 !important; background: linear-gradient(180deg,#110b0b,#090606) !important; border: 1px solid var(--cv-edge) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 14px 34px rgba(0,0,0,.55) !important; color: var(--cv-ink) !important; }
:root:not(.mt-classic) .base-vault-page .vault-hero-panel::after,
:root:not(.mt-classic) .base-vault-page .vault-grid-panel::after,
:root:not(.mt-classic) .base-vault-page .vault-bag-panel::after { border-radius: 0 !important; border-color: #1e0b0c !important; inset: 3px !important; }
:root:not(.mt-classic) .base-vault-page .vault-grid-panel { padding: 1rem !important; }
:root:not(.mt-classic) .base-vault-page .vault-avatar-host { margin-bottom: 0 !important; }
:root:not(.mt-classic) .base-vault-page .vault-bag-title { color: #d9d1cb !important; font-weight: 700 !important; font-size: .92rem !important; letter-spacing: .12em !important; }
:root:not(.mt-classic) .base-vault-page .vault-bag-panel .small-text,
:root:not(.mt-classic) .base-vault-page .vault-bag-panel .ink-dim { color: #b3a9a4 !important; font-size: .86rem !important; line-height: 1.5 !important; }
:root:not(.mt-classic) .base-vault-page .vault-bag-panel strong,
:root:not(.mt-classic) .base-vault-page .vault-bag-panel b { color: #e0322c !important; }
/* the shop / resources / old grid share the frame; pills + legend follow the palette */
:root:not(.mt-classic) .base-vault-page .vault-pill { border-radius: 0 !important; background: #0d0909 !important; border: 1px solid var(--cv-edge) !important; color: #cfc6c0 !important; }
:root:not(.mt-classic) .base-vault-page .vault-pill strong { color: #e0322c !important; }
:root:not(.mt-classic) .base-vault-page .vault-cell { border-radius: 0 !important; background: rgba(10,6,6,.8) !important; border-color: #241011 !important; }
:root:not(.mt-classic) .base-vault-page .vault-item { border-radius: 0 !important; background: linear-gradient(180deg,#150d0d,#0a0707) !important; border-color: #4a1718 !important; }
:root:not(.mt-classic) .base-vault-page .vault-gear-filter { border-radius: 0 !important; border-color: var(--cv-edge) !important; }
@media (max-width: 980px) {
  :root:not(.mt-classic) .base-vault-page .vault-stage { grid-template-columns: 1fr !important; }
  :root:not(.mt-classic) .base-vault-page .vault-title { padding-left: .6rem !important; font-size: 1.8rem !important; }
  :root:not(.mt-classic) .base-vault-page .vault-rail-extra { margin-top: 0 !important; }
  :root:not(.mt-classic) .base-vault-page .vault-rail { position: static !important; }
  :root:not(.mt-classic) .base-vault-page .vault-rail .vault-bag-panel { max-height: none !important; }
}
/* ← Back is drawn by the game-wide keep-tab set (hubs.css, an !important list lifted with :not(#…) ids); the mockup's is a
   plain crimson-outlined rectangle, so the vault's lifts above it (that :is() counts as TWO ids — its button[id^=btn-back]:not(#…):not(#…) member — so four :not ids here) and drops the chamfer + the ::before face */
:root:not(.mt-classic) body .base-vault-page #vault-back:not(#hc-never):not(#mt-never):not(#cv-never):not(#cv-never2) {
  clip-path: none !important; border-radius: 0 !important; background: linear-gradient(180deg,#150d0d,#0b0707) !important;
  border: 1px solid #8a1f1d !important; color: #e0322c !important; text-shadow: none !important; padding: .5rem 1.6rem !important; min-height: 0 !important; }
:root:not(.mt-classic) body .base-vault-page #vault-back:not(#hc-never):not(#mt-never):not(#cv-never):not(#cv-never2)::before { display: none !important; }
:root:not(.mt-classic) body .base-vault-page #vault-back:not(#hc-never):not(#mt-never):not(#cv-never):not(#cv-never2):hover { border-color: #e0322c !important; color: #fff !important; box-shadow: 0 0 14px rgba(212,32,28,.35) !important; }
:root:not(.mt-classic) .base-vault-page .vault-bag-panel .small-text,
:root:not(.mt-classic) .base-vault-page .vault-bag-panel .ink-dim { background: none !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
:root:not(.mt-classic) .base-vault-page .vault-bag-title { flex-wrap: wrap !important; row-gap: .4rem !important; }
:root:not(.mt-classic) .base-vault-page .vault-bag-title > span { white-space: nowrap !important; }
:root:not(.mt-classic) .base-vault-page .vault-stash-cell { border-radius: 0 !important; background: linear-gradient(180deg,rgba(18,10,10,.9),rgba(8,5,5,.92)) !important; border-color: #2a1112 !important; }
:root:not(.mt-classic) .base-vault-page .vault-stash-cell.filled { border-color: #5a1d1f !important; }


/* ═════ 🧟 THE OUTTER GATES PAGE (owner 2026-10-26: Battle Hall → Outter Gates, the Camp Commander + five doors) ═════
   renderTitle draws the 'battle' hub as data-hub="gates": .og-page = the commander's stage (src/outtergates moves its one
   canvas into #og-stage) beside the doors (.og-doors, the ordinary hub tiles, a little smaller so three sit in a row).
   Layout rules are NOT theme-scoped (the classic theme needs the same two columns); the crimson finish is. */
.spellbook-hub.is-sub[data-hub="gates"] .og-page { position: relative; z-index: 3; flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  gap: 28px; width: min(1320px, 96vw); margin: 10px auto 0; }
.spellbook-hub.is-sub[data-hub="gates"] .og-stage { position: relative; flex: 0 0 min(430px, 34vw); height: min(72vh, 760px); min-height: 380px; }
.spellbook-hub.is-sub[data-hub="gates"] .og-stage .og-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.8)); }
.spellbook-hub.is-sub[data-hub="gates"] .og-stage.og-ready .og-canvas { opacity: 1; }
.spellbook-hub.is-sub[data-hub="gates"] .og-stage::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 2%; height: 9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.65), transparent 70%); }
.spellbook-hub.is-sub[data-hub="gates"] .og-wait { position: absolute; left: 0; right: 0; top: 46%; text-align: center; pointer-events: none;
  font: 600 12px/1 'Cinzel', Georgia, serif; letter-spacing: .3em; text-transform: uppercase; color: rgba(230,190,180,.5); transition: opacity .4s; animation: ogWait 1.6s ease-in-out infinite; }
.spellbook-hub.is-sub[data-hub="gates"] .og-stage.og-ready .og-wait,
.spellbook-hub.is-sub[data-hub="gates"] .og-stage.og-failed .og-wait { opacity: 0; animation: none; }
@keyframes ogWait { 50% { opacity: .25; } }
.spellbook-hub.is-sub.hub-v2[data-hub="gates"] .hub-portal-grid.og-doors { --tile-w: 250px; --tile-h: 286px; --tile-art-h: 140px; --tile-gap: 18px;
  flex: 0 1 auto; width: calc(var(--tile-w) * 3 + var(--tile-gap) * 2); max-width: 62vw; margin: 0; align-content: center; justify-content: center; }
@media (max-width: 1180px) {
  .spellbook-hub.is-sub.hub-v2[data-hub="gates"] .hub-portal-grid.og-doors { width: calc(var(--tile-w) * 2 + var(--tile-gap)); }
}
@media (max-width: 820px) {
  .spellbook-hub.is-sub[data-hub="gates"] .og-page { flex-direction: column; gap: 8px; }
  .spellbook-hub.is-sub[data-hub="gates"] .og-stage { flex: 0 0 auto; width: min(360px, 88vw); height: 48vh; min-height: 300px; }
  .spellbook-hub.is-sub.hub-v2[data-hub="gates"] .hub-portal-grid.og-doors { max-width: 94vw; }
}
@media (max-width: 640px) {
  .spellbook-hub.is-sub.hub-v2[data-hub="gates"] .hub-portal-grid.og-doors { --tile-w: min(300px, 88vw); width: min(300px, 88vw); }
}
/* the crimson finish: a faint red floor glow under him */
:root:not(.mt-classic) .spellbook-hub.is-sub[data-hub="gates"] .og-stage::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(195,32,29,.22), transparent 65%); }