.namaris-cine{position:fixed;z-index:2147483600;left:50%;bottom:5vh;transform:translateX(-50%);max-width:90vw;box-sizing:border-box;display:flex;align-items:center;gap:16px;padding:12px 18px;background:#102c34f0;border:1px solid #719e9b;border-radius:6px;color:#f9e9c6;font:14px/1.5 system-ui;box-shadow:0 8px 40px #0009}.namaris-cine button{white-space:nowrap}.speech-bubble[data-namaris-dialogue]{max-width:min(600px,88vw)}@media(max-width:600px){.namaris-cine{font-size:12px;bottom:15vh;flex-direction:column;gap:6px;padding:10px}}
#namaris-review-controls{position:fixed;z-index:2147483600;top:6px;left:6px;max-width:calc(100vw - 12px);box-sizing:border-box;padding:7px 10px;background:#122b33f5;color:#fff1d4;font:12px/1.4 system-ui;border:1px solid #537b7f;border-radius:5px}#namaris-review-controls summary{cursor:pointer;display:flex;gap:12px;align-items:center}#namaris-review-controls .tools{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px;max-width:900px}#namaris-review-controls button{font-size:12px;padding:6px 10px;min-height:32px}#namaris-review-controls small{width:100%}
/* One broad generated floor serves singles and the shared two-trainer raid. */
.namaris-arena .battle-stage{background-position:center center}
.namaris-rhythm{position:absolute;z-index:30;left:50%;top:12px;transform:translateX(-50%);max-width:80%;border:1px solid #a4edf180;border-radius:12px;padding:8px 15px;background:#112c42ed;color:#ddf7fc;font:600 13px system-ui;text-align:center;pointer-events:none}
.namaris-rhythm[data-rest="true"]{border-color:#cde9a9;color:#ecffd5}
body:has(.namaris-arena:not(.hidden)) #namaris-review-controls:not([open]){top:auto;bottom:6px}
.namaris-bond{max-width:680px;width:90vw;padding:24px;border:1px solid #a4edf180;border-radius:24px;text-align:center;background:linear-gradient(#10263cc7,#17273fed),url('../../assets/battlebacks/namaris-coast.webp') center/cover;color:#eefaff}
.namaris-bond img{display:block;width:min(370px,65vw);margin:auto;filter:drop-shadow(0 12px 15px #001a27)}
.namaris-bond h2{font-size:clamp(20px,4vw,28px)}
.namaris-bond p{line-height:1.5}
.namaris-bond button{padding:12px 30px;border:1px solid #a4edf1;border-radius:10px;background:#183947;color:#effaff}
@media(max-width:600px){.namaris-rhythm{font-size:11px;padding:5px 9px;top:7px}.namaris-bond{padding:16px}}
/* Touch rails move the stage. Anchor the warning to its clear sky, below the
   HP panels, in both orientations rather than to the screen's top edge. */
html.is-touch .namaris-arena .namaris-rhythm{
 left:calc(var(--battle-stage-left) + var(--battle-stage-width-px) * .5);
 top:calc(var(--battle-stage-top) + var(--battle-stage-height-px) * .30);
 max-width:calc(var(--battle-stage-width-px) - 24px);box-sizing:border-box;
 font-size:11px;padding:5px 10px;
}
html.is-touch .namaris-arena .combatant .combat-card{width:230px;max-width:230px}
html.is-touch .namaris-arena .combat-name strong{font-size:18px}
html.is-touch .namaris-arena .lv-pill{font-size:16px;padding:1px 5px;white-space:nowrap}
html.is-touch .namaris-arena .combat-card small{font-size:17px}
html.is-touch .namaris-arena .combat-card .battle-boss-status{font-size:14px}
html.is-touch .namaris-arena .bar-tag{font-size:13px}
.namaris-atlas{width:min(1100px,94vw);box-sizing:border-box;padding:20px;background:#132632;color:#e6f5f2;border:1px solid #698b8c;border-radius:16px;max-height:92vh;overflow:auto}
.namaris-atlas h2{margin:0 0 14px;font-size:22px}.namaris-atlas-map{position:relative}.namaris-atlas-map img{display:block;width:100%;border-radius:10px}.namaris-atlas-pin{position:absolute;transform:translate(-50%,-50%);font:600 clamp(8px,1.2vw,13px) system-ui;background:#102839dd;border:1px solid #9bb3aa88;color:#f9e2b6;padding:4px 7px;border-radius:5px;white-space:nowrap}.namaris-atlas-you{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 4px #13d5f566;background:#28dbe9;transform:translate(-50%,-50%)}.namaris-atlas p{line-height:1.5;margin:12px 0}.namaris-atlas-hint{font-size:13px;color:#adced0}.namaris-atlas button{padding:10px 25px}
.namaris-atlas{height:fit-content;align-self:center;justify-self:center;margin:auto;max-height:calc(100dvh - 40px)}
/* Portrait has room below the stage, instead of squeezing it between the
   landscape touch rails. Keep the existing 640x480 battle coordinate system. */
@media(max-width:600px) and (orientation:portrait){
 html.is-touch .namaris-arena .namaris-rhythm{top:calc(var(--battle-stage-top) - 36px)}
 html .battle.namaris-arena{
  --namaris-portrait-width:min(calc(100vw - 16px),calc((100dvh - 240px) / .75));
  --battle-scale-x:calc(var(--namaris-portrait-width) / 640px)!important;
  --battle-scale-y:calc(var(--namaris-portrait-width) / 640px)!important;
  --battle-stage-left:calc((100vw - var(--namaris-portrait-width)) * .5)!important;
  --battle-stage-top:max(48px,calc((100dvh - var(--battle-stage-height-px) - 184px) * .5))!important;
  --battle-stage-width-px:var(--namaris-portrait-width)!important;
  --battle-stage-height-px:calc(var(--namaris-portrait-width) * .75)!important;
 }
 html .battle.namaris-arena .move-buttons{
  left:8px!important;right:auto!important;top:calc(var(--battle-stage-top) + var(--battle-stage-height-px) + 12px)!important;
  bottom:auto!important;width:calc(100vw - 16px)!important;height:auto!important;transform:none!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto auto!important;gap:6px!important;
 }
 html .battle.namaris-arena .move-buttons button{min-height:50px;grid-column:auto!important;grid-row:auto!important}
 html .battle.namaris-arena .battle-actions{
  left:8px!important;right:auto!important;top:calc(var(--battle-stage-top) + var(--battle-stage-height-px) + 126px)!important;
  bottom:auto!important;width:calc(100vw - 16px)!important;height:auto!important;transform:none!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;gap:6px!important;
 }
 html .battle.namaris-arena .battle-actions button{min-height:44px;grid-column:auto!important;grid-row:auto!important}
 html .battle.namaris-arena .battle-action-menu{left:50%!important;right:auto!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(260px,86vw)}
}
/* Generated Namaris VFX already have clear margins and native alpha.
   Preserve their open interiors without the generic SVG feather mask. */
.fx-sprite-sheet.fx-sheet-namaris-alien {
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  animation:
    namaris-fx-frames var(--fx-sheet-duration) steps(var(--fx-sheet-steps), end) forwards,
    namaris-fx-presence var(--fx-sheet-duration) linear forwards;
}
/* Give frame twelve its own final interval before the effect disappears. */
@keyframes namaris-fx-frames {
  0% { background-position: 0 0; }
  91.666667%, 100% { background-position: var(--fx-sheet-travel) 0; }
}
@keyframes namaris-fx-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  12% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.9); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  82% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes namaris-fx-alpha {
  0%, 100% { opacity: 0; }
  12%, 82% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-sprite-sheet.fx-sheet-namaris-alien {
    transform: translate(-50%, -50%);
    animation:
      namaris-fx-frames var(--fx-sheet-duration) steps(var(--fx-sheet-steps), end) forwards,
      namaris-fx-alpha var(--fx-sheet-duration) linear forwards;
  }
}

/* Gravulith: native square cells, restrained bloom and a stable hit point.
   The raster frames provide the detail; presentation never stretches them. */
.fx-sprite-sheet.fx-sheet-gravulith {
  /* Individual translate runs before scale/rotation and keeps either team's
     painted center on the live sprite anchor. */
  translate: -50% -50%;
  mix-blend-mode: normal;
  filter: none;
  animation:
    fx-sheet-play var(--fx-sheet-duration) steps(var(--fx-sheet-steps), end) forwards,
    gravulith-fx-presence var(--fx-sheet-duration) linear forwards;
}
.fx-sprite-sheet.fx-sheet-gravulith-crimsonCarapace {
  animation:
    fx-sheet-play var(--fx-sheet-duration) steps(var(--fx-sheet-steps), end) forwards,
    gravulith-shield-presence var(--fx-sheet-duration) linear forwards;
}
.fx-sprite-sheet.fx-sheet-gravulith-tectonicCharge {
  /* Rock already carries its own warm cracks and dust. */
  filter: contrast(1.04);
}
@keyframes gravulith-fx-presence {
  0%, 100% { opacity: 0; transform: none; }
  8%, 76% { opacity: 1; transform: none; }
  92% { opacity: .55; transform: none; }
}
@keyframes gravulith-shield-presence {
  0%, 100% { opacity: 0; transform: none; }
  12%, 72% { opacity: .52; transform: none; }
  90% { opacity: .2; transform: none; }
}

/* Keep the close control visible above the map in landscape and with a keyboard open. */
.planet-atlas-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 8px;background:inherit}
.planet-atlas-header h2{margin:0;min-width:0}.planet-atlas-header button{flex:none;min-height:44px;margin:0}
@media(max-height:500px){.namaris-atlas,.verdalis-atlas{max-height:calc(100dvh - 16px);padding:8px;box-sizing:border-box}.namaris-atlas-map,.verdalis-atlas-map{width:min(100%,calc((100dvh - 144px)*1.87));margin-inline:auto}.namaris-atlas p,.verdalis-atlas p{margin:4px 0;font-size:11px;line-height:1.3}}