/* Carrd-style horizontal scroll rail (no frameworks) */

:root{
  --bg:#fbfbff;
  --bg2:#f2f4ff;
  --card: rgba(255,255,255,.72);
  --cardBorder: rgba(120,140,255,.22);
  --text:#1d2330;
  --muted:#5b6679;
  --pillBg: rgba(255,255,255,.72);
  --pillBorder: rgba(120,140,255,.25);
  --accent:#6f7dff;
  --accent2:#b06cff;
  --shadow: 0 16px 50px rgba(16, 20, 35, .10);
  --blur: blur(10px);
  --radius: 22px;
  --ease: cubic-bezier(.22,1,.36,1);
  --auraY: 58%;
  --aura1: rgba(111,125,255,.18);
  --aura2: rgba(176,108,255,.12);

  --sigil: rgba(111,125,255,.22);
  --sigil2: rgba(176,108,255,.14);
  --grain: .06;
  --motes: .40;
}


html[data-theme="dark"]{
  --bg:#0b0e14;
  --bg2:#0f1420;
  --card: rgba(14,18,28,.58);
  --cardBorder: rgba(140,160,255,.16);
  --text:#edf0ff;
  --muted:#b7bdd6;
  --pillBg: rgba(15, 19, 30, .62);
  --pillBorder: rgba(160,180,255,.16);
  --accent:#88b2ff;
  --accent2:#d58cff;
  --shadow: 0 18px 60px rgba(0,0,0,.42);
  --blur: blur(12px);

  --auraY: 56%;
  --aura1: rgba(136,178,255,.12);
  --aura2: rgba(213,140,255,.10);

  --sigil: rgba(136,178,255,.16);
  --sigil2: rgba(213,140,255,.14);
  --grain: .10;
  --motes: .28;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background-color: var(--bg);
  overflow:hidden; /* we will scroll inside the rail */
}

/* Smooth theme switching (prevents hard "flash" when auto mode flips) */
body, .bg-grad, .bg-lines, .bg-vignette,
.card, .notice, .pill, .themebtn, .mini, .thumb,
.icon, .brandmark{
  transition:
    color .28s var(--ease),
    border-color .22s var(--ease),
    background-color .28s var(--ease),
    box-shadow .22s var(--ease),
    opacity .28s var(--ease),
    filter .22s var(--ease);
}

@media (prefers-reduced-motion: reduce){
  body, .bg-grad, .bg-lines, .bg-vignette,
  .card, .notice, .pill, .themebtn, .mini, .thumb,
  .icon, .brandmark{ transition: none; }
}

a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{
  outline: 2px solid rgba(111,125,255,.55);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Top bar */
.topbar{
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 86px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  padding: 18px 18px 14px;
  z-index: 50;
  pointer-events: none; /* allow rail wheel to work; re-enable on children */
}

.brandmark{
  pointer-events:auto;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius: 14px;
  background: var(--pillBg);
  border: 1px solid var(--pillBorder);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  transform: translateZ(0);
}

.navpills{
  pointer-events:auto;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:center;
  max-width: min(980px, calc(100vw - 220px));
}

.pill{
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--pillBg);
  border: 1px solid var(--pillBorder);
  backdrop-filter: var(--blur);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  box-shadow: 0 8px 26px rgba(0,0,0,.06);
  transform: translateZ(0);
}

.pill:hover{ transform: translateY(-1px); color: var(--text); }
.pill.is-active{
  color: var(--text);
  border-color: rgba(111,125,255,.45);
  box-shadow: 0 12px 34px rgba(111,125,255,.20);
}

.themebtn{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pillBg);
  border: 1px solid var(--pillBorder);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .18s var(--ease);
  color: var(--muted);
}

.themebtn:hover{ transform: translateY(-1px); color: var(--text); }
.themebtn .dot{
  width:10px;height:10px;border-radius:99px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 18px rgba(111,125,255,.55);
}
.themebtn .label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Background layers */
.bg{ position: fixed; inset:0; z-index:0; }
/* Two-layer gradient that crossfades (more "cinematic" than swapping gradients) */
.bg-grad{
  position:absolute;
  inset:-24%;
  opacity: 0;
  transform: scale(1.02);
  filter: saturate(1.08) blur(0px);
  transition: opacity .75s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
  will-change: opacity, transform, filter;
}

/* Angel layer */
.bg-grad--angel{
  background:
    radial-gradient(circle at 18% 34%, rgba(111,125,255,.22), transparent 56%),
    radial-gradient(circle at 84% 28%, rgba(176,108,255,.18), transparent 60%),
    radial-gradient(circle at 70% 86%, rgba(255,190,220,.20), transparent 58%),
    linear-gradient(180deg, #fbfbff, #f2f4ff);
}

/* Fallen layer */
.bg-grad--fallen{
  background:
    radial-gradient(circle at 22% 30%, rgba(136,178,255,.14), transparent 58%),
    radial-gradient(circle at 86% 26%, rgba(213,140,255,.14), transparent 60%),
    radial-gradient(circle at 70% 88%, rgba(255,120,160,.10), transparent 58%),
    linear-gradient(180deg, #0b0e14, #0f1420);
}

/* Chapter crossfade */
html[data-chapter="angel"] .bg-grad--angel{ opacity: 1; transform: scale(1.00); }
html[data-chapter="angel"] .bg-grad--fallen{ opacity: 0; transform: scale(1.03); filter: saturate(1.02) blur(1px); }

html[data-chapter="fallen"] .bg-grad--angel{ opacity: 0; transform: scale(1.03); filter: saturate(1.02) blur(1px); }
html[data-chapter="fallen"] .bg-grad--fallen{ opacity: 1; transform: scale(1.00); }

.bg-lines{
  position:absolute; inset:0;
  opacity: .18;
  background:
    linear-gradient(90deg, rgba(111,125,255,.25) 1px, transparent 1px),
    linear-gradient(0deg, rgba(111,125,255,.18) 1px, transparent 1px);
  background-size: 140px 140px;
  mask-image: radial-gradient(circle at 50% 45%, black 0, transparent 72%);
}

.bg-vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 40%, transparent 35%, rgba(0,0,0,.12) 100%);
  opacity: .45;
}
html[data-theme="dark"] .bg-vignette{ opacity: .65; }

/* Horizontal rail */
.rail{
  position: fixed;
  inset: 0;
  z-index: 1;
  display:flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-top: 86px; /* topbar space */
}

.rail::-webkit-scrollbar{ height: 10px; }
.rail::-webkit-scrollbar-track{ background: transparent; }
.rail::-webkit-scrollbar-thumb{
  background: rgba(111,125,255,.22);
  border-radius: 999px;
}

/* Panels */
.panel{
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px 18px 72px;
  position: relative;
  overflow-y: auto; /* allow vertical scroll within a panel when content is taller */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;

}

.panel-inner{
  width: min(860px, 92vw);
  position: relative;
}

/* Slide-in + blur for panel content */
.panel .panel-inner{
  opacity: 0;
  transform: translateX(26px);
  filter: blur(6px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
  will-change: transform, opacity, filter;
}
.panel.is-active .panel-inner{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Card */
.card{
  background: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  padding: 26px 24px 24px;
  position: relative;
  overflow: hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-44px -56px auto auto;
  width: 220px; height: 220px;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(111,125,255,.28), rgba(176,108,255,.14), transparent 70%);
  transform: rotate(18deg);
  opacity: .65;
}
.card-kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 10px;
}
.card h2{
  margin:0 0 10px;
  font-size: 26px;
  letter-spacing: .01em;
}
.card p{ margin: 0 0 12px; color: var(--muted); line-height: 1.75; }

/* Home center */
.center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
}
.logo{
  margin: 0;
  font-size: 40px;
  letter-spacing: .08em;
  font-weight: 700;
}
.sub{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.notice{
  width: min(680px, 92vw);
  margin-top: 6px;
  background: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  padding: 18px 18px 16px;
}
.notice-title{
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.notice p{ margin:0; color: var(--muted); line-height: 1.75; }

/* Simple “chibi” placeholder */
.chibi{
  width: 132px;
  height: 132px;
  border-radius: 999px;
  position: relative;
  display:grid;
  place-items:center;
  margin-bottom: 6px;
}
.chibi-face{
  width: 104px; height: 104px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(111,125,255,.18));
  border: 1px solid rgba(111,125,255,.26);
  box-shadow: 0 18px 55px rgba(111,125,255,.18);
  backdrop-filter: var(--blur);  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .chibi-face{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(136,178,255,.10));
  border-color: rgba(136,178,255,.20);
  box-shadow: 0 18px 65px rgba(0,0,0,.38);
}
.chibi-glow{
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 60%, rgba(176,108,255,.22), transparent 62%);
  filter: blur(10px);
  opacity: .85;
  animation: float 4.4s var(--ease) infinite alternate;
}

@keyframes float{
  from{ transform: translateY(2px); }
  to{ transform: translateY(-6px); }
}

/* Mini grid blocks */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (min-width: 720px){
  .grid{ grid-template-columns: 1fr 1fr; }
}
.mini{
  background: rgba(255,255,255,.40);
  border: 1px solid var(--cardBorder);
  border-radius: 18px;
  padding: 14px 14px 12px;
}
html[data-theme="dark"] .mini{ background: rgba(0,0,0,.18); }
.mini-title{
  font-weight: 650;
  margin-bottom: 6px;
}
.mini p{ margin:0; color: var(--muted); line-height: 1.7; }

/* Lists / Gallery */
.list{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.8; }
.muted{ color: var(--muted); opacity: .9; }

.gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 6px;
}
@media (min-width: 760px){
  .gallery{ grid-template-columns: repeat(4, 1fr); }
}
.thumb{
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid var(--cardBorder);
  background:
    linear-gradient(135deg, rgba(111,125,255,.22), rgba(176,108,255,.12)),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.70), transparent 60%);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transform: translateZ(0);
}


/* Screen-reader only text */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* SVG icons inside the social pills */
.icon svg{
  width:18px;
  height:18px;
  display:block;
}

/* Icons row */
.icons{
  display:flex;
  gap: 12px;
  margin-top: 10px;
}
.icon{
  width: 38px; height: 38px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: var(--pillBg);
  border: 1px solid var(--pillBorder);
  backdrop-filter: var(--blur);
  color: var(--muted);
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.icon:hover{ transform: translateY(-1px); color: var(--text); }

/* CTAs */
.cta-row{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.cta{
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 34px rgba(111,125,255,.22);
  transition: transform .18s var(--ease);
}
.cta:hover{ transform: translateY(-1px); }
.cta.ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--pillBorder);
  box-shadow: none;
}

/* Footer */
.foot{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;
  padding: 12px 18px 14px;
  font-size: 12px;
  color: var(--muted);
  z-index: 40;
  pointer-events:none;
}
.foot span{ pointer-events:none; }
#footLeft{ justify-self:start; }
#footRight{ justify-self:end; text-align:right; }
.foot-mid{ justify-self:center; text-align:center; letter-spacing:.10em; opacity:.92; }

/* Small screens: keep pills in one line with horizontal scroll */
@media (max-width: 760px){
  /* Mobile: allow page (body) to scroll vertically */
  html, body{
    height:auto;
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Hide navigation UI; keep only a floating theme toggle */
  .topbar{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    pointer-events: none;
  }
  .topbar > *{ display:none !important; }

  /* Theme toggle remains accessible */
  #themeBtn.themebtn{
    display:flex !important;
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 60 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Rail becomes normal document flow; no extra top padding (nav is hidden) */
  .rail{
    padding-top: 20px !important;
  }

  /* Mobile: keep the "premium" look via gradients only; cut expensive layers/animations */
  .bg-lines,
  .bg-sigil,
  .bg-motes,
  .grain,
  .scanlines{
    display:none !important;
  }

  /* Disable all non-essential animations on mobile */
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-name: none !important;
  }

  /* Allow only simple color transitions */
  .panel,
  .card,
  .pill,
  .themebtn,
  .social a,
  .brandmark{
    transition-property: background-color, color, border-color, opacity !important;
    transition-duration: 220ms !important;
    transition-timing-function: ease !important;
  }

  /* Avoid blur/backdrop effects on mobile to prevent flicker */
  .panel{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .panel-inner{ filter:none !important; }


  /* Mobile layout: vertical scroll (no horizontal rail) */
  .topbar{
    height: auto;
    padding: 14px 14px 10px;
    gap: 12px;
  }

  /* Let pills wrap naturally; remove horizontal scrolling */
  .navpills{
    max-width: 100%;
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 0;
  }
  .navpills::-webkit-scrollbar{ display:none; }

  /* Convert the fixed horizontal rail into a normal vertical document flow */
  .rail{
    position: relative;
    inset: auto;
    height: auto;
    overflow: visible;
    display: block;
    padding-top: 96px; /* keep content clear of the fixed top bar */
    scroll-snap-type: none;
    scroll-behavior: smooth;
  }

  /* Panels become stacked sections */
  .panel{
    width: 100%;
    min-width: 0;
    min-height: auto;
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 18px 0 26px;
    scroll-snap-align: none;
  }
  .panel-inner{
    width: min(860px, 92vw);
    margin: 0 auto;
  }

  /* Footer should live at the end, not overlay content */
  .foot{
    position: relative;
    left: auto; right: auto; bottom: auto;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom));
  }
  #footLeft, #footRight{ display: none; }
}



/* Lore microtext */
.notice-sub{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .9;
}

.muted-inline{ opacity: .9; }

.whisper{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .10em;
  color: var(--muted);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  user-select: none;
}

/* Reveal only when the chibi is hovered/focused */
.chibi:hover ~ .whisper,
.chibi:focus-within ~ .whisper,
.chibi:hover .whisper,
.chibi:focus-within .whisper{
  opacity: .9;
  transform: translateY(0);
}

/* Make chibi focusable target feel intentional */
.chibi{ outline: none; }

/* Avatar image (auto-fetched from Twitch via a resolver) */
.chibi-face{ overflow:hidden; position:relative; }
.chibi-face img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:999px; opacity:.92; filter:saturate(1.05) contrast(1.03); }
html[data-theme="dark"] .chibi-face img{ opacity:.86; filter:saturate(1.02) contrast(1.05) brightness(.92); }


/* ---------------------------------------------
   Lore integration (mode-dependent copy)
---------------------------------------------- */
.lore{ display:none; }
html[data-theme="light"] .lore--angel{ display:inline; }
html[data-theme="dark"] .lore--fallen{ display:inline; }

.loreline{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cardBorder);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .92;
}
.loreline--card{
  margin-top: 14px;
  padding-top: 10px;
}

.lede{
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.7;
  font-weight: 650;
  letter-spacing: .01em;
}
html[data-theme="dark"] .lede{ font-weight: 640; }

.lorebox{
  margin-top: 14px;
  border: 1px solid var(--cardBorder);
  border-radius: 18px;
  background: rgba(255,255,255,.38);
  padding: 10px 12px;
}
html[data-theme="dark"] .lorebox{ background: rgba(0,0,0,.18); }
.lorebox summary{
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  user-select:none;
}
.lorebox summary::-webkit-details-marker{ display:none; }
.lorebox summary::after{
  content:"↯";
  float:right;
  opacity:.7;
  transform: translateY(-1px);
}
.lorebox[open] summary::after{ content:"✦"; opacity:.9; }

.lorebox-body{
  margin-top: 10px;
}
.lorebox-body p{
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.8;
}

/* ---------------------------------------------
   Extra background flavor per mode
---------------------------------------------- */
.bg-sigil{
  position:absolute;
  inset:0;
  opacity: .55;
  pointer-events:none;
  mix-blend-mode: screen;
}
html[data-theme="dark"] .bg-sigil{ mix-blend-mode: lighten; opacity: .40; }

.bg-sigil::before{
  content:"";
  position:absolute;
  left: 50%;
  top: var(--auraY);
  width: min(560px, 86vw);
  height: min(560px, 86vw);
  transform: translate(-50%, -50%) rotate(8deg);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 56%, var(--sigil) 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 0 70%, var(--sigil2) 72%, transparent 74%),
    conic-gradient(from 45deg, transparent 0 18%, var(--sigil2) 20%, transparent 22% 48%, var(--sigil) 50%, transparent 52% 78%, var(--sigil2) 80%, transparent 82% 100%);
  filter: blur(.2px);
  animation: sigilSpin 22s linear infinite;
}
@keyframes sigilSpin{
  from{ transform: translate(-50%, -50%) rotate(0deg); }
  to{ transform: translate(-50%, -50%) rotate(360deg); }
}

.bg-motes{
  position:absolute;
  inset:0;
  opacity: var(--motes);
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 28%, rgba(255,255,255,.28) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 78%, rgba(255,255,255,.16) 0 1px, transparent 2px);
  filter: blur(.2px);
  animation: motesFloat 7.5s var(--ease) infinite alternate;
}
@keyframes motesFloat{
  from{ transform: translateY(0px); }
  to{ transform: translateY(-14px); }
}

.bg-grain{
  position:absolute;
  inset:0;
  opacity: var(--grain);
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}
html[data-theme="dark"] .bg-grain{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.20) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

/* Theme-immediate: remove transitions during "instant" init */
html.theme-immediate *{ transition: none !important; }


/* Mobile performance: avoid heavy blur/backdrop-filter that causes flicker on some devices */
@media (max-width: 980px){
  :root{ --blur: none; }

  /* Backdrop blur is the #1 source of flicker/jank on many mobile GPUs (esp. iOS/Safari). */
  .rail, .card, .notice, .pill, .themebtn, .mini, .icon, .brandmark, .panel-inner{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Avoid animating paint-heavy properties on mobile. Prefer transform/opacity only. */
  .panel .panel-inner{
    filter: none !important;
    will-change: transform, opacity;
  }

  /* Reduce always-on background work */
  .bg-sigil::before,
  .bg-motes,
  .chibi-glow{
    animation: none !important;
  }

  /* Grain is expensive and often the first thing to drop frames; hide it on mobile. */
  .bg-grain{ display:none; }

  /* Slightly simplify the grid overlay to reduce overdraw */
  .bg-lines{ opacity:.12; background-size: 180px 180px; }

  .card{ box-shadow: 0 10px 28px rgba(16, 20, 35, .10); }
  html[data-theme="dark"] .card{ box-shadow: 0 14px 34px rgba(0,0,0,.35); }
}


/* Theme switch crossfade mask (reduces blocky repaints on mobile) */
.theme-fade-layer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--themeFadeDur, 220ms) ease;
  will-change: opacity;
}
.theme-fade-layer.fade-out{ opacity: 0; }

@media (max-width: 980px){
  :root{ --themeFadeDur: 160ms; }
}


/* ---------------------------------------------
   Performance / accessibility guardrails
---------------------------------------------- */

/* If the user prefers reduced motion, remove continuous animations and paint-heavy effects. */
@media (prefers-reduced-motion: reduce){
  .bg-sigil::before,
  .bg-motes,
  .chibi-glow{ animation: none !important; }

  .panel .panel-inner{ filter: none !important; transform: none !important; }
}

/* Reduce work when the page is not visible (best-effort; no visual change). */
html:not([data-visible="true"]) .bg-sigil::before,
html:not([data-visible="true"]) .bg-motes{
  animation-play-state: paused;
}


/* During theme switch: temporarily reduce paint-heavy layers to prevent mobile stalls */
html[data-switching="true"] .bg-grain{ display:none !important; }
html[data-switching="true"] .bg-motes,
html[data-switching="true"] .bg-sigil::before,
html[data-switching="true"] .chibi-glow{ animation:none !important; }
html[data-switching="true"] .rail,
html[data-switching="true"] .card,
html[data-switching="true"] .notice,
html[data-switching="true"] .pill,
html[data-switching="true"] .themebtn,
html[data-switching="true"] .mini,
html[data-switching="true"] .icon,
html[data-switching="true"] .brandmark,
html[data-switching="true"] .panel-inner{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}