/* V18 is a deliberate camera composition of the existing illustration.
 * Screen tracks, actions and their hit rectangles stay with the native layout.
 * The single director supplies uniform image dimensions from the stable lane,
 * rather than enlarging an already enlarged image on successive resize calls.
 * Load after V17 presentation-stage and hero-presence styles. */
body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] [data-presentation-stage] {
  --stage-camera-zoom-v18:1.88;
  --stage-focus-x-v18:32%;
  --stage-focus-y-v18:14%;
}
body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #start-screen {
  --stage-camera-zoom-v18:1.9;
  --stage-focus-x-v18:50%;
  --stage-focus-y-v18:19%;
}
body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #start-screen .title-cast {
  overflow:hidden;
  contain:layout paint;
}
body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #start-screen .title-cast>picture {
  overflow:visible;
}
body #game-viewport[data-presentation-stage-v18] #start-screen .title-cast::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(5,12,19,.93),rgba(7,15,22,.48) 7%,transparent 22%);
}
body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #start-screen .title-cast>picture>img,
body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #lobby-screen .lobby-character {
  position:absolute;
  top:var(--stage-camera-top-v18,10px);
  bottom:auto;
  width:var(--stage-camera-width-v18,100%);
  height:var(--stage-camera-height-v18,185%);
  max-width:none;
  max-height:none;
  padding:0;
  object-fit:contain;
  object-position:center top;
  transform:translateX(-50%);
}
body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #start-screen .title-cast>picture>img {
  left:var(--stage-camera-left-v30,50%);
}
body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #lobby-screen .lobby-character {
  left:32%;
}
/* The crop ends in atmosphere rather than at a cut-out illustration edge.
 * On lobby screens it sits behind the unchanged formation dock and caption. */
body #game-viewport[data-presentation-stage-v18] .stage-front-v17::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(5,12,19,.94),rgba(7,15,22,.58) 6%,transparent 22%),
    linear-gradient(90deg,rgba(4,11,18,.23),transparent 18% 80%,rgba(4,11,18,.25));
}
body #game-viewport[data-presentation-stage-v18] #lobby-screen .stage-front-v17::after {
  background:linear-gradient(0deg,rgba(5,12,19,.96),rgba(7,15,22,.66) 15%,transparent 34%),
    linear-gradient(90deg,rgba(4,11,18,.25),transparent 23% 80%,rgba(4,11,18,.23));
}
/* V20: a local atmosphere must reach zero alpha before its layout box ends.
 * The old foreground vignette had nonzero edge alpha and was paint-clipped
 * at the character lane, making the lane read as a rectangular panel. Only
 * inert artwork is feathered; captions, formation and hit targets stay whole.
 * Two intersected ramps also handle corners without an expensive blur. */
body #game-viewport[data-presentation-stage-v18] #lobby-screen :is(.stage-front-v17,.stage-hero-light-v17),
body #game-viewport[data-presentation-stage-v18] #start-screen .title-cast {
  --stage-edge-x-v20:clamp(18px,5%,40px);
  --stage-edge-y-v20:clamp(12px,5%,28px);
  -webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 var(--stage-edge-x-v20),#000 calc(100% - var(--stage-edge-x-v20)),transparent calc(100% - 2px)),
    linear-gradient(0deg,transparent 2px,#000 var(--stage-edge-y-v20),#000 calc(100% - var(--stage-edge-y-v20)),transparent calc(100% - 2px));
  mask-image:linear-gradient(90deg,transparent 2px,#000 var(--stage-edge-x-v20),#000 calc(100% - var(--stage-edge-x-v20)),transparent calc(100% - 2px)),
    linear-gradient(0deg,transparent 2px,#000 var(--stage-edge-y-v20),#000 calc(100% - var(--stage-edge-y-v20)),transparent calc(100% - 2px));
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
/* The shared light texture has alpha up to 253 at its top/right file edge.
 * Feather both the raster and vector light sources before rotating them. */
:is(.stage-rays-v17,.stage-rays-far-v17,.title-rays-v16,.sanctuary-rays-v17),
:is(.stage-sunbreak-v17,.stage-horizon-v17,.stage-mist-far-v17,.stage-mist-near-v17,.stage-entry-sweep-v17,
  .stage-hero-backlight-v17,.stage-hero-side-light-v17,.stage-hero-arrival-v17,
  .title-sunbreak-v16,.title-sanctuary-glow-v16,.title-mist-far-v16,.title-mist-near-v16,
  .lobby-sunbeam-v15,.lobby-horizon-v15,.lobby-mist-v15,.lobby-arrival-light-v15,
  .sanctuary-halo-v17,.sanctuary-floor-v17) {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 82%,transparent),
    linear-gradient(0deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 82%,transparent),
    linear-gradient(0deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
@supports not ((mask-image:linear-gradient(black,transparent)) or (-webkit-mask-image:linear-gradient(black,transparent))) {
  /* Static compatibility screens keep their original character/background.
   * Unsupported mask engines omit the cropped decorative foreground. */
  body #game-viewport[data-presentation-stage-v18] #lobby-screen :is(.stage-front-v17,.stage-hero-light-v17),
  :is(.stage-rays-v17,.stage-rays-far-v17,.title-rays-v16,.sanctuary-rays-v17) { display:none; }
}
/* Keep sunlight directional. Clear shadows around the character give the
 * warm sanctuary light a focal point instead of a uniform sepia veil. */
body #game-viewport[data-presentation-stage-v18] #start-screen .start-backdrop::before {
  background-image:linear-gradient(0deg,rgba(4,10,18,.95),rgba(7,15,24,.05) 46%,rgba(6,13,23,.35)),var(--oa-title-background);
}
body #game-viewport[data-presentation-stage-v18] #start-screen .start-backdrop::after {
  background:radial-gradient(ellipse at 50% 46%,transparent 14%,rgba(6,15,26,.10) 43%,rgba(3,9,16,.68) 100%),
    linear-gradient(90deg,rgba(5,13,22,.25),transparent 29% 73%,rgba(5,13,22,.26));
}
body #game-viewport[data-presentation-stage-v18] #lobby-screen .lobby-backdrop::before {
  background-image:linear-gradient(0deg,rgba(4,11,18,.94),rgba(9,18,26,.07) 52%,rgba(7,16,26,.36)),var(--oa-lobby-background);
}
body #game-viewport[data-presentation-stage-v18] .stage-sunbreak-v17 {
  background:radial-gradient(ellipse at 47% 29%,rgba(255,242,192,.31),rgba(255,211,125,.16) 27%,rgba(224,155,76,.03) 50%,transparent 67%);
}
body #game-viewport[data-presentation-stage-v18] .stage-rays-v17 {
  opacity:.48;
}
body #game-viewport[data-presentation-stage-v18] .stage-mist-far-v17 {
  opacity:.66;
}
body #game-viewport[data-presentation-stage-v18] .stage-mist-near-v17 {
  opacity:.58;
  height:22%;
}
body #game-viewport[data-presentation-stage-v18] .stage-hero-ground-v17,
body #game-viewport[data-presentation-stage-v18] .stage-hero-floor-v17 {
  display:none;
}
/* One broken sanctuary halo and a cool shoulder light frame the same hero.
 * These are inert procedural shapes, not a second actor or a new art file. */
.stage-relic-halo-v18 {
  position:absolute;
  left:var(--stage-focus-x-v18);
  top:4%;
  width:79%;
  aspect-ratio:1;
  max-height:95%;
  border:1px solid rgba(235,203,139,.36);
  border-radius:50%;
  transform:translateX(-50%) rotate(-10deg);
  box-shadow:inset 0 0 0 6px rgba(250,224,169,.025),inset 0 0 0 7px rgba(244,210,145,.15),
    0 0 20px rgba(239,200,126,.12);
  background:repeating-conic-gradient(from 17deg,transparent 0 29deg,rgba(255,224,161,.28) 29deg 30deg,transparent 30deg 60deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 89%,#000 90%);
  mask-image:radial-gradient(closest-side,transparent 89%,#000 90%);
  opacity:.7;
}
.stage-focal-light-v18 {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at var(--stage-focus-x-v18) var(--stage-focus-y-v18),rgba(253,224,166,.33),rgba(var(--stage-aura-v17),.13) 21%,transparent 46%),
    radial-gradient(ellipse at 12% 47%,rgba(113,177,208,.22),transparent 33%);
}
.stage-foreground-stone-v18 {
  position:absolute;
  inset:0;
  background:linear-gradient(73deg,rgba(3,9,15,.48) 1%,rgba(4,12,19,.28) 5%,transparent 12%),
    linear-gradient(285deg,rgba(3,9,15,.4) 0%,rgba(4,12,19,.21) 4%,transparent 12%);
  transform:scale(1.04);
  opacity:.76;
}
.stage-metal-glint-v18 {
  position:absolute;
  inset:0;
  overflow:hidden;
  transform-origin:50% var(--stage-hinge-v17);
  -webkit-mask-image:var(--stage-character-mask-v18);
  mask-image:var(--stage-character-mask-v18);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mix-blend-mode:screen;
  pointer-events:none!important;
}
.stage-metal-glint-v18::before {
  content:"";
  position:absolute;
  inset:-4% -55%;
  background:linear-gradient(116deg,transparent 43%,rgba(248,232,191,.025) 45%,rgba(255,240,209,.15) 48%,rgba(230,242,249,.21) 49%,rgba(255,229,165,.07) 51%,transparent 54%);
  opacity:.75;
  transform:translate3d(-37%,0,0);
}
body #game-viewport[data-presentation-stage-v18] #lobby-screen .stage-relic-halo-v18 {
  width:67%;
  top:1%;
}
@media (orientation:landscape) {
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #start-screen {
    --stage-camera-zoom-v18:1.85;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #lobby-screen {
    --stage-camera-zoom-v18:1.78;
  }
  body #game-viewport[data-presentation-stage-v18] #start-screen .stage-relic-halo-v18 {
    width:96%;
    top:0;
  }
}
@media (orientation:portrait) and (max-height:699px) {
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #start-screen {
    --stage-camera-zoom-v18:1.82;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v18] #lobby-screen {
    --stage-camera-zoom-v18:1.8;
  }
}
@media (prefers-reduced-motion:no-preference) {
  body #game-viewport[data-presentation-stage-v18] .stage-relic-halo-v18 {
    animation:stage-halo-resonance-v18 12s ease-in-out infinite alternate;
  }
  body #game-viewport[data-presentation-stage-v18] .stage-focal-light-v18 {
    animation:stage-focal-resonance-v18 7s ease-in-out infinite alternate;
  }
  body #game-viewport[data-presentation-stage-v18] .stage-foreground-stone-v18 {
    animation:stage-foreground-depth-v18 17s ease-in-out infinite alternate;
  }
  body #game-viewport[data-presentation-stage-v18] .stage-metal-glint-v18 {
    animation:stage-upper-breath-v17 3.8s cubic-bezier(.42,0,.35,1) infinite;
  }
  body #game-viewport[data-presentation-stage-v18] .stage-metal-glint-v18::before {
    animation:stage-armor-light-v18 11s cubic-bezier(.4,0,.25,1) infinite;
  }
  body #game-viewport[data-presentation-stage-v18] [data-stage-reveal="awakening"] .stage-metal-glint-v18::before {
    animation:stage-armor-arrival-v18 2750ms cubic-bezier(.16,.67,.3,1) both;
  }
  body #game-viewport[data-presentation-stage-v18] #start-screen[data-stage-reveal="awakening"] .start-brand h1 {
    animation:stage-brand-resolve-v18 2200ms ease-out both;
  }
}
/* Same single lifecycle owner as V17, including the existing 33ms guard.
 * Masked glints and the brand are outside the old descendant selectors. */
body #game-viewport[data-presentation-stage-v18] [data-stage-effects="paused"] .stage-metal-glint-v18,
body #game-viewport[data-presentation-stage-v18] [data-stage-effects="paused"] .stage-metal-glint-v18::before,
body #game-viewport[data-presentation-stage-v18] [data-stage-effects="paused"] .start-brand h1 {
  animation-play-state:paused!important;
}
body #game-viewport[data-presentation-stage-v18] [data-stage-motion="off"] .stage-metal-glint-v18,
body #game-viewport[data-presentation-stage-v18] [data-stage-motion="off"] .stage-metal-glint-v18::before,
body #game-viewport[data-presentation-stage-v18] [data-stage-motion="off"] .start-brand h1 {
  animation:none!important;
}
body #game-viewport[data-presentation-stage-v18] [data-stage-motion="off"] .stage-metal-glint-v18 {
  display:none;
}
@media (prefers-reduced-motion:reduce) {
  body #game-viewport[data-presentation-stage-v18] .stage-metal-glint-v18,
  body #game-viewport[data-presentation-stage-v18] .stage-metal-glint-v18::before,
  body #game-viewport[data-presentation-stage-v18] .start-brand h1 {
    animation:none!important;
  }
  body #game-viewport[data-presentation-stage-v18] .stage-metal-glint-v18 { display:none; }
}
@keyframes stage-halo-resonance-v18 {
  from { opacity:.52; transform:translateX(-50%) rotate(-10deg); }
  to { opacity:.8; transform:translateX(-50%) rotate(-5deg); }
}
@keyframes stage-focal-resonance-v18 {
  from { opacity:.67; }
  to { opacity:.96; }
}
@keyframes stage-foreground-depth-v18 {
  from { transform:scale(1.04) translate3d(-4px,0,0); }
  to { transform:scale(1.04) translate3d(6px,0,0); }
}
@keyframes stage-armor-light-v18 {
  0%,11% { transform:translate3d(-37%,0,0); opacity:0; }
  18% { opacity:.72; }
  31% { transform:translate3d(40%,0,0); opacity:0; }
  100% { transform:translate3d(40%,0,0); opacity:0; }
}
@keyframes stage-armor-arrival-v18 {
  0% { transform:translate3d(-39%,0,0); opacity:0; }
  30% { opacity:.83; }
  100% { transform:translate3d(39%,0,0); opacity:0; }
}
@keyframes stage-brand-resolve-v18 {
  0%,100% { filter:none; }
  35% { filter:drop-shadow(0 0 9px rgba(255,215,131,.36)); }
}