/* Overscan is clipped only at the final shell, never at the moving camera. */
.game-shell>#battle-camera{overflow:visible}
.battle-world{position:absolute;inset:0;transform-origin:50% 50%}
.playmat-surface{position:absolute;overflow:hidden;pointer-events:none;z-index:0;isolation:isolate;background:#181714}
.playmat-surface[hidden]{display:none}
.playmat-surface[data-mode=story-background]{background:#151413}
.playmat-story-image{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.playmat-surface[data-mode=story-background]:after{background:linear-gradient(#09080724,#09080712 50%,#09080736);box-shadow:inset 0 0 34px #09080744}
.playmat-image{position:absolute;left:50%;top:0;width:var(--mat-image-width,100%);height:var(--mat-image-height,100%);max-width:none;transform:translateX(-50%);object-fit:cover;object-position:50% 0%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.playmat-half{position:absolute;left:0;right:0;height:calc(50% + var(--mat-blend-half,12px));overflow:hidden}
.playmat-upper{top:0;z-index:2;mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mat-blend-half,12px)*2),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mat-blend-half,12px)*2),transparent)}
.playmat-upper>.playmat-image{top:auto;bottom:0;transform:translateX(-50%) rotate(180deg)}
.playmat-lower{bottom:0;z-index:1}
.playmat-full{position:absolute;inset:0;overflow:hidden}
.playmat-full>.playmat-image{top:50%;transform:translate(-50%,-50%);object-position:center}
.playmat-surface:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(#0d0c0a2e,#0d0c0a2e);box-shadow:inset 0 12px 18px -13px #0d0c0ab0,inset 0 -12px 18px -13px #0d0c0ab0}
.cosmetic-card-back{padding:0;border:none;background:#211f1a;overflow:hidden;box-shadow:2px 2px 0 #16140f,3px 3px 0 #aa987a88}
.cosmetic-card-back>img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.flight-back .cosmetic-card-back{width:94%;height:94%;margin:3%}
/* A prepared DOM supplies exact landing geometry, but only the mat is visible
   until the toss has faded out and been removed. No Hero/zone/HUD leaks. */
.game-shell[data-opening-phase=loading] .battle-world{visibility:hidden;pointer-events:none}
.game-shell:is([data-opening-phase=loading],[data-opening-phase=camera],[data-opening-phase=versus],[data-opening-phase=coin]) :is(.arena,.battle-topbar,.battle-caption){opacity:0;visibility:hidden;pointer-events:none}
.game-shell:is([data-opening-phase=loading],[data-opening-phase=camera],[data-opening-phase=versus],[data-opening-phase=coin],[data-opening-phase=setup]) .battle-dock{visibility:hidden;pointer-events:none}
.game-shell[data-opening-phase=setup] :is(.arena,.battle-topbar){animation:battle-layout-enter 240ms ease-out both}
@keyframes battle-layout-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.game-shell[data-opening-phase=setup] :is(.arena,.battle-topbar){animation-duration:100ms}}
.game-shell .coin-toss-skip{display:none}

.in-battle .power-readout{text-shadow:0 1px 2px #070705,0 2px 6px #070705,0 0 9px #070705b3}
.in-battle .power-role-icon{filter:drop-shadow(0 1px 2px #070705)}
.in-battle .field-slot{background:#15130f3d;border-color:#c6b78252}