/* Pulse card frame — founder-approved Kaira film shell, 8 Sep 2026.
   Shared by the React app and sandboxed game documents. No overlay/pseudo-element
   is used: native video controls, sheet grabbers and game input stay reachable. */
:root {
  --pulse-frame-ground: #02060d;
  --pulse-frame-rim: linear-gradient(140deg, rgba(125,207,255,.65), rgba(86,127,184,.12) 34%, rgba(146,95,213,.22) 64%, rgba(0,237,255,.58));
  --pulse-frame-inner: rgba(255,255,255,.14);
  --pulse-frame-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 26px rgba(8,123,199,.10), inset 0 0 0 1px var(--pulse-frame-inner);
  --pulse-frame-radius: 20px;
  --pulse-frame-highlight: 0 12px 36px rgba(0,0,0,.45), 0 0 24px rgba(255,255,255,.22), 0 0 0 1px rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.48);
}

/* Explicit outer surfaces only. Selection chips, price bars and table rows keep
   their semantic states. Existing sizes, padding, positions and motion remain. */
:is(.pulse-card-frame, .neon-card, .hh2-feature, .hh2-wallet,
    .pkg-surface, .pkg-run-card, .pkg-exp-card, .races-m-card, .race-card,
    .social-call-card, .social-play-card, .social-suggestion,
    .sf-item, .sp-post, .sp-pred, .lb-mobile__podium-player, .lb-mobile__mine),
.pw-world :is(.pw-single, .pw-game-card, .pw-package, .pw-story, .pw-film),
html[data-live-game] :is(.glass.setup-sheet, .glass.live-sheet, .glass.landed-sheet,
    .glass.next-sheet, .glass.call-sheet, .sheet.setup-sheet, .sheet.live-sheet,
    .sheet.result-sheet, .glass-sheet, .pulse-result, .setup-card, .drawer-card,
    .race-drawer-sheet, .ride-asset-sheet, .ride-control-sheet, .call-history-sheet) {
  transition: box-shadow 160ms ease;
  box-sizing: border-box;
  border: 2px solid transparent !important;
  border-radius: var(--pulse-frame-radius) !important;
  background: linear-gradient(var(--pulse-frame-ground), var(--pulse-frame-ground)) padding-box,
              var(--pulse-frame-rim) border-box !important;
  box-shadow: var(--pulse-frame-shadow) !important;
}

/* The discovery deck carries the heavier film rim from the reference photo.
   Border-box preserves equal card bounds and the single-screen mobile layout. */
.pw-world :is(.pw-single, .pw-game-card, .pw-package, .pw-story) {
  border-width: 5px !important;
  --pulse-frame-radius: 24px;
}
.pw-world .pw-film {
  border-width: 3px !important;
  --pulse-frame-radius: 20px;
}
.pw-film video { border-radius: 16px; background: #000; }

@media (max-width: 860px) and (max-height: 740px) {
  .pw-world :is(.pw-single, .pw-game-card, .pw-package, .pw-story) {
    border-width: 3px !important;
    --pulse-frame-radius: 20px;
  }
}
@media (forced-colors: active) {
  :is(.pulse-card-frame, .neon-card),
  .pw-world :is(.pw-single, .pw-game-card, .pw-package, .pw-story, .pw-film) {
    border-color: CanvasText !important;
  }
}

/* White response light: hover on a mouse; press or keyboard focus on any device.
   No overlay and no scaling, so video controls and carousel swipes stay intact. */
:is(.pulse-card-frame, .neon-card, .hh2-feature, .hh2-wallet,
  .pkg-surface, .pkg-run-card, .pkg-exp-card, .races-m-card, .race-card,
  .social-call-card, .social-play-card, .social-suggestion, .sf-item, .sp-post,
  .sp-pred, .lb-mobile__podium-player, .lb-mobile__mine,
  .pw-world .pw-single, .pw-world .pw-game-card, .pw-world .pw-package,
  .pw-world .pw-story, .pw-world .pw-film,
  html[data-live-game] .glass.setup-sheet, html[data-live-game] .glass.live-sheet,
  html[data-live-game] .glass.landed-sheet, html[data-live-game] .glass.next-sheet,
  html[data-live-game] .glass.call-sheet, html[data-live-game] .sheet.setup-sheet,
  html[data-live-game] .sheet.live-sheet, html[data-live-game] .sheet.result-sheet,
  html[data-live-game] .glass-sheet, html[data-live-game] .pulse-result,
  html[data-live-game] .setup-card, html[data-live-game] .drawer-card,
  html[data-live-game] .race-drawer-sheet, html[data-live-game] .ride-asset-sheet,
  html[data-live-game] .ride-control-sheet, html[data-live-game] .call-history-sheet):is(:active, :focus-visible, :has(:focus-visible)) {
  box-shadow: var(--pulse-frame-highlight) !important;
}
@media (hover: hover) {
  :is(.pulse-card-frame, .neon-card, .hh2-feature, .hh2-wallet,
  .pkg-surface, .pkg-run-card, .pkg-exp-card, .races-m-card, .race-card,
  .social-call-card, .social-play-card, .social-suggestion, .sf-item, .sp-post,
  .sp-pred, .lb-mobile__podium-player, .lb-mobile__mine,
  .pw-world .pw-single, .pw-world .pw-game-card, .pw-world .pw-package,
  .pw-world .pw-story, .pw-world .pw-film,
  html[data-live-game] .glass.setup-sheet, html[data-live-game] .glass.live-sheet,
  html[data-live-game] .glass.landed-sheet, html[data-live-game] .glass.next-sheet,
  html[data-live-game] .glass.call-sheet, html[data-live-game] .sheet.setup-sheet,
  html[data-live-game] .sheet.live-sheet, html[data-live-game] .sheet.result-sheet,
  html[data-live-game] .glass-sheet, html[data-live-game] .pulse-result,
  html[data-live-game] .setup-card, html[data-live-game] .drawer-card,
  html[data-live-game] .race-drawer-sheet, html[data-live-game] .ride-asset-sheet,
  html[data-live-game] .ride-control-sheet, html[data-live-game] .call-history-sheet):hover {
    box-shadow: var(--pulse-frame-highlight) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.pulse-card-frame, .neon-card, .hh2-feature, .hh2-wallet,
  .pkg-surface, .pkg-run-card, .pkg-exp-card, .races-m-card, .race-card,
  .social-call-card, .social-play-card, .social-suggestion, .sf-item, .sp-post,
  .sp-pred, .lb-mobile__podium-player, .lb-mobile__mine,
  .pw-world .pw-single, .pw-world .pw-game-card, .pw-world .pw-package,
  .pw-world .pw-story, .pw-world .pw-film,
  html[data-live-game] .glass.setup-sheet, html[data-live-game] .glass.live-sheet,
  html[data-live-game] .glass.landed-sheet, html[data-live-game] .glass.next-sheet,
  html[data-live-game] .glass.call-sheet, html[data-live-game] .sheet.setup-sheet,
  html[data-live-game] .sheet.live-sheet, html[data-live-game] .sheet.result-sheet,
  html[data-live-game] .glass-sheet, html[data-live-game] .pulse-result,
  html[data-live-game] .setup-card, html[data-live-game] .drawer-card,
  html[data-live-game] .race-drawer-sheet, html[data-live-game] .ride-asset-sheet,
  html[data-live-game] .ride-control-sheet, html[data-live-game] .call-history-sheet) { transition: none; }
}