/* DuelVerse Experience toggle (topbar) + Lite-mode kill-switches.
   Loaded from base.html right after site.css. The kill-switches are
   defence in depth: the motion JS layers gate on html[data-experience]
   themselves; these rules guarantee the ambient layers stay off even if a
   script is cached, blocked or late. !important mirrors the reduced-motion
   kill-switch pattern already used in the motion CSS files. */

/* ---------- topbar toggle ---------- */
.exp-toggle{display:flex;align-items:center;gap:8px;flex:none}
.exp-toggle-label{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.exp-seg{
  display:flex;padding:2px;gap:2px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
}
.exp-seg button{
  appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:.78rem;font-weight:700;line-height:1;padding:6px 12px;border-radius:999px;
  transition:background .15s ease,color .15s ease;
}
.exp-seg button:hover{color:var(--text)}
.exp-seg button.is-on{
  color:#fff;background:linear-gradient(160deg,#8b5cf6,var(--accent) 55%,#6d28d9);
  box-shadow:0 4px 12px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.25);
}
.exp-seg button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@media (max-width:1080px){
  .exp-toggle-label{display:none} /* collapses to just the High/Lite pill */
}
@media (max-width:860px){
  .exp-seg button{padding:6px 9px;font-size:.74rem}
}

/* ---------- Lite kill-switches (ambient layers off, content untouched) ---------- */
/* Lobby dust canvas never shows */
html[data-experience="lite"] .motion-dust{display:none!important}
/* Winners ticker stands still (JS also stops advancing it) */
html[data-experience="lite"] .winner-list.motion-ticker-on{animation:none!important;transform:none!important}
/* "Playing now" numbers never pop */
html[data-experience="lite"] .motion-live-num.motion-pop{animation:none!important}
/* Promo / Crown Clash shimmer sweeps off */
html[data-experience="lite"] .promo-card::before,
html[data-experience="lite"] #race .panel-head::before,
html[data-experience="lite"] .countdown-fill::after,
html[data-experience="lite"] .tile::after,
html[data-experience="lite"] .tile-art::after{animation:none!important;opacity:0!important}
/* Panel reveals are instant — content simply visible */
html[data-experience="lite"] .mf-reveal{opacity:1!important;transform:none!important;transition:none!important}
/* League praise/tick/swap flourishes off */
html[data-experience="lite"] .grand-cup.inview,
html[data-experience="lite"] .my-stat-hot.inview strong,
html[data-experience="lite"] .league-table tbody tr.you,
html[data-experience="lite"] .mf-tick,
html[data-experience="lite"] .table-wrap.mf-enter .league-table{animation:none!important}
/* Confetti canvas + splash rings never show (JS gates the bursts too) */
html[data-experience="lite"] .mg-confetti-canvas{display:none!important}
html[data-experience="lite"] .mg-ring{display:none!important}
/* Dice tumble, token hop, card flip/deal settle instantly — faces/results unchanged */
html[data-experience="lite"] .die.rolling,
html[data-experience="lite"] .mg-hop,
html[data-experience="lite"] #pile-top .wcard,
html[data-experience="lite"] .card-fan .wcard{animation:none!important}