/* 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,
    .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,
  .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,
  .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,
  .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; }
}

/* ── THE OBSIDIAN FACE ON THE DESKTOP SHELL (desktop revamp phase 4, 26 Sep 2026) ──
   The phone defines these under html[data-pulse-obsidian-preview="true"] at
   767px and below (src/styles/obsidian-mobile-preview.css). The desktop system
   makes the same face the platform's card face (DESKTOP-SYSTEM.md §4), so the
   shell carries the identical values; a desktop stylesheet reads var(--ob-*)
   exactly as the phone's does. Same numbers, one source per width. */
body.pulse-shell-on {
  --ob-ground: #030405;
  --ob-ink: #f5f7fa;
  --ob-muted: #a6adb5;
  --ob-line: #ffffff20;
  --ob-edge: #ffffff45;
  --ob-face: radial-gradient(ellipse at 38% -55%, #ffffff45, transparent 60%), linear-gradient(165deg, #252a2f 0%, #101317 15%, #050608 60%, #11151a 100%);
  --ob-selected: radial-gradient(ellipse at 38% -55%, #ffffffa3, transparent 60%), linear-gradient(155deg, #3b4248 0%, #171b20 32%, #060709 100%);
  --ob-shadow: inset 0 1px 0 #ffffffa3, inset 1px 0 0 #ffffff24, inset 0 -1px 0 #ffffff1f, 0 10px 26px #00000066;
  --ob-selected-shadow: inset 0 1px 0 #ffffffcc, inset 0 0 0 1px #ffffff52, 0 0 0 1px #ffffff70, 0 8px 24px #00000070, 0 0 18px #d6efff2b;
  --ob-press: var(--pulse-frame-highlight);
}