/* Strike scenes (strikes-fx.js): dimming, projectile canvas and the focus card, all inside the MapLibre container. */
.fx-dim{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s var(--ease);background:transparent}
.fx-on>.fx-dim{opacity:1}
.fx-canvas{position:absolute;inset:0;pointer-events:none;z-index:2}
.fx-card{position:absolute;z-index:3;top:12px;right:70px;width:min(290px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;scrollbar-width:none;padding:16px 16px 12px;border-radius:16px;border:1px solid rgb(var(--crimson-rgb) / .333);background:rgb(var(--panel-rgb) / .949);box-shadow:0 24px 50px -18px rgb(0 0 0 / var(--shade)),0 0 0 1px rgb(0 0 0 / calc(.376 * var(--shade)));color:var(--ink,#f5efe3);font-family:var(--font,system-ui);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media(min-width:961px){
  .page-atlas .fx-card{top:14px;right:calc(var(--story-w,400px) + 78px);max-height:calc(100% - var(--timeline-h,166px) - 42px)}
  body.page-atlas.touring .fx-card{top:72px;max-height:calc(100% - var(--timeline-h,166px) - 96px)}
}
.fx-card.in{animation:fx-in .45s var(--ease)}
@keyframes fx-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
.fx-card:before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 4px 4px 0;background:var(--crimson,#d0415f)}
.fx-close{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;font-size:18px;line-height:1;color:var(--muted,#a19cae);display:grid;place-items:center}
.fx-close:hover{background:rgb(var(--hi) / .071);color:var(--ink,#fff)}
.fx-kicker{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--rose);padding-right:24px}
.fx-kicker svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.fx-date{display:block;font-family:var(--mono,monospace);font-size:12px;color:var(--muted,#a19cae);margin-top:4px}
.fx-place{display:block;font-family:var(--serif,Georgia);font-weight:400;font-size:24px;line-height:1.1;margin:8px 0 2px}
.fx-weapon{display:block;font-family:var(--mono,monospace);font-size:12px;color:var(--ink-2,#d2ccc0)}
.fx-nums{display:grid;grid-template-columns:1fr 1fr;margin:12px 0 0;border-top:1px solid rgb(var(--hi) / .078);padding-top:8px}
.fx-nums div{display:flex;flex-direction:column}
.fx-nums div+div{border-left:1px solid rgb(var(--hi) / .078);padding-left:12px}
.fx-nums b{font-family:var(--serif,Georgia);font-weight:400;font-size:30px;line-height:1;color:var(--rose);font-variant-numeric:tabular-nums}
.fx-nums div+div b{color:var(--brass-2,#f3d39a)}
.fx-nums span{font-size:12px;color:var(--faint,#7a768b)}
.fx-note{font-size:12px;line-height:1.45;color:var(--muted,#a19cae);margin:8px 0 8px}
.fx-card .src-chips{margin:0}
.fx-claim{border-color:rgb(var(--hi) / .188);border-style:dashed}
.fx-claim:before{background:var(--faint,#7a768b)}
.fx-claim .fx-kicker{color:var(--muted,#a19cae)}
@media(max-width:760px){
  .fx-card{top:auto;bottom:56px;left:12px;right:12px;width:auto;padding:12px 16px 12px}
  .fx-place{font-size:20px}
  .fx-nums b{font-size:24px}
  .fx-note{font-size:12px;margin:8px 0 8px}
}
@media(prefers-reduced-motion:reduce){.fx-card.in{animation:none}.fx-dim{transition:none}}
