/* ============================================================
   PERFORMANCE + RESPONSIVE — loaded LAST so it wins.
   1) sheds GPU-heavy effects on phones / low-power devices
   2) fixes panel anchoring & aspect so nothing overflows the
      viewport on small phones or wide laptops.
   ============================================================ */

/* ------------------------------------------------------------
   1 · LOW-PERF MODE (html.low-perf = coarse pointer / ≤4 cores /
   small screen). backdrop-filter is the #1 cause of phone heat —
   recompositing the whole backdrop every frame. Drop it; the
   panels keep their own translucent fills so they stay legible.
   ------------------------------------------------------------ */
html.low-perf .liquid-glass,
html.low-perf .gm-fab, html.low-perf .gm-modal, html.low-perf .gm-panel,
html.low-perf .dice-modal, html.low-perf .secret-modal, html.low-perf .secret-cue, html.low-perf .secret-chip,
html.low-perf .d2-bg, html.low-perf .keeper-bg, html.low-perf .ware-veil,
html.low-perf .net-pill, html.low-perf .leave-seat, html.low-perf .lock-corner,
html.low-perf .charm-banner, html.low-perf .charm-help-dock,
html.low-perf .breath-main-layer, html.low-perf .breath-dock, html.low-perf .bond-badge,
html.low-perf .intel-modal-bg, html.low-perf .scene-name-pill, html.low-perf .portal-hint {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* firm up the modal scrims that leaned on blur for separation */
html.low-perf .gm-modal, html.low-perf .dice-modal, html.low-perf .secret-modal,
html.low-perf .d2-bg, html.low-perf .keeper-bg, html.low-perf .intel-modal-bg {
  background-color: rgba(8,6,4,.92) !important;
}

/* calm the most expensive blurred / infinite decorations on phones */
html.low-perf .es-fog { filter: none !important; opacity: .35 !important; }
html.low-perf .es-bg { animation: none !important; }
html.low-perf .cardmain-bloom, html.low-perf .ware-hero-bloom { filter: none !important; }
html.low-perf .rack-art.hung .rack-img { animation: none !important; }
html.low-perf .ware-hero-ring { animation-duration: 60s !important; }
/* NOTE: the shop background video only ever renders on the shared Main screen
   (player phones use a plain panel), so it is NOT hidden on low-perf — it is the
   centrepiece of the shop reveal. BgVideo has its own onFail fallback for
   devices that genuinely cannot decode it. */
/* shave compositor cost: fewer simultaneous shimmer sweeps */
html.low-perf .showcase-tile::after, html.low-perf .ware-hero-art::after,
html.low-perf .tcard.art .tcard-holo, html.low-perf .tcard-sheen { animation: none !important; }

/* honour the OS "reduce motion" switch for ambient loops (keeps UI transitions) */
@media (prefers-reduced-motion: reduce){
  .embers, .dust-field, .es-fog, .charm-banner, .breath-main-layer::before { animation: none !important; }
}

/* ------------------------------------------------------------
   1b · PLAYER SCREEN — the heaviest things on a phone are the
   FIXED full-viewport god-rays (mix-blend-mode forces a constant
   full-screen recomposite) and the blurred, endlessly-drifting
   scene bed. On top of that, every modal (codex / shop / map /
   level-up) layers more blurred + infinitely-pulsing glows. Shed
   them so the player HUD scrolls and opens panels at 60fps. ------ */
html.low-perf .player-screen::before,
html.low-perf .player-screen::after { display: none !important; }
html.low-perf .pscene-bg { filter: none !important; animation: none !important; opacity: .5 !important; }
/* blurred glows that ALSO pulse forever inside modals → kill blur + loop */
html.low-perf .codex-portrait-glow, html.low-perf .npc-panel-glow,
html.low-perf .d2dex-aura, html.low-perf .it-glow, html.low-perf .plu-burst,
html.low-perf .deckintro-bg .di-glow, html.low-perf .statspend .ss-glow {
  filter: none !important; animation: none !important;
}
/* floaty image loops in modals/figures — static is fine on a phone */
html.low-perf .codex-portrait, html.low-perf .codex-portrait-img,
html.low-perf .npc-panel-img, html.low-perf .ware-hero-art {
  animation: none !important;
}
html.low-perf .player-screen .action-dock.urgent .ad-inner { animation: none !important; }
/* embers animate INSIDE the scrolling player column → they repaint the whole
   list every frame while scrolling. They're purely decorative; drop them. */
html.low-perf .player-screen .embers,
html.low-perf .host-screen::before { display: none !important; }
/* the moderator's fixed, masked weave backdrop recomposites on every scroll */
html.low-perf .host-screen::before { display: none !important; }
/* the codex/shop scrims used blur for separation — give them a solid fill instead */
html.low-perf .npc-panel-bg, html.low-perf .plevelup-bg,
html.low-perf .statspend-bg, html.low-perf .deckintro-bg,
html.low-perf .useprompt-bg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* hard guarantee for ALL phones regardless of perf-class detection */
@media (max-width: 760px){
  .player-screen::before, .player-screen::after { display: none !important; }
  .pscene-bg { filter: none !important; animation: none !important; opacity: .5 !important; }
  .codex-portrait-glow, .npc-panel-glow, .d2dex-aura, .it-glow {
    filter: none !important; animation: none !important;
  }
  .codex-portrait, .codex-portrait-img, .npc-panel-img { animation: none !important; }
  /* promote scrolling/opening surfaces to their own cheap layers */
  .player-wrap { contain: paint; }
  .intel-modal-bg, .npc-panel-bg, .d2-bg { will-change: opacity; }
  /* drop decorative embers + the moderator weave on phones (repaint-on-scroll) */
  .player-screen .embers, .host-screen::before { display: none !important; }
}

/* ------------------------------------------------------------
   2 · SHOP — wares grid must never overflow; NPC must never
   swallow the screen on a phone.
   ------------------------------------------------------------ */
/* let columns shrink (minmax 0) and adapt count to width */
.d2main-grid { grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
@media (max-width: 1200px){ .d2main-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 760px){  .d2main-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 470px){  .d2main-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
.d2main-card, .rack-slot { min-width: 0; }
.rack-name, .d2main-name { overflow-wrap: anywhere; }

/* greeting NPC: contain within a sane box, anchored bottom-centre, never clipped weirdly */
.shop-npc { width: min(46vw, 60vh, 520px) !important; height: min(64vh, 760px) !important; }
.shop-npc-art { object-fit: contain !important; object-position: center bottom !important; }
@media (max-width: 760px){
  .shop-npc { width: min(78vw, 50vh, 360px) !important; height: min(52vh, 480px) !important; }
  .shop-welcome { max-width: 88vw !important; }
}

/* ------------------------------------------------------------
   3 · OVERLAY ANCHORING — intel / codex / party pills sit ABOVE
   the scene but must not collide with takeover panels.
   ------------------------------------------------------------ */
/* the wares/codex/gate takeovers own the screen → float party pills above but out of the way */
.d2main-wrap, .shop-npc-stage { z-index: 40; }
/* keep any floating handout/intel card inside the viewport */
.intel-card, .codex-reveal, .main-intel-card { max-width: min(92vw, 520px); }

/* ------------------------------------------------------------
   4 · MECHANIC TAKEOVERS — keep stages inside the viewport on
   phones (they already use vh/vw clamps; this is the safety net).
   ------------------------------------------------------------ */
.lb-stage, .const-stage, .circuit-stage, .defuser-stage, .auction-stage, .vote-stage,
.wager-stage, .alch-stage, .ritual-stage, .totems-stage {
  max-width: 100vw; max-height: 100vh; overflow: hidden;
}
.lb-board, .const-board { max-width: 96vw; }
@media (max-width: 600px){
  /* dual handset controls (mirror / star layers) stack instead of overflowing */
  .lb-ctrl-stack, .const-ctrl-stack { flex-direction: column !important; }
  .lb-ctrl-dial, .const-ctrl-dial { width: min(62vw, 240px) !important; }
}

/* universal: stop horizontal scroll from any stray wide child */
html, body { max-width: 100%; overflow-x: hidden; }