/* ─── HONKAI: STAR RAIL ───────────────────────────────── */
html[data-theme="hsr"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,200,115,.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(110,107,214,.14), transparent 55%),
    linear-gradient(180deg, #0a0e1c, #05060d) var(--bg);   /* solid base so nothing past the first screen falls back to white */
  background-attachment: fixed;
}
html[data-theme="hsr"] body::before {
  background:
    radial-gradient(1.2px 1.2px at 22px 38px, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 140px 120px, rgba(232,200,115,.75), transparent),
    radial-gradient(1px 1px at 210px 60px, rgba(190,215,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 80px 200px, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 190px 235px, rgba(190,215,255,.5), transparent);
  background-size: 260px 260px;
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }
html[data-theme="hsr"] .hero h1 { text-shadow: 0 0 28px rgba(143,212,255,.25); }
html[data-theme="hsr"] .photo { border-color: var(--accent); }
/* Built from the Tutorial / Data Bank menu: icon + subtitle-over-title headers, a list with a
   thin rule per item whose selected item is a light bar with a gold tick, white pill buttons */
html[data-theme="hsr"] { --sel: #e4e4e4; --sel-ink: #1d2030; --tick: #d9b56a; --pill: #f0f0f0; }
html[data-theme="hsr"] .hero { border-image: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent) 1; }
html[data-theme="hsr"] h2 { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; }
html[data-theme="hsr"] h2::before {                                  /* four-point sparkle */
  content: ''; grid-row: 1 / 3; width: 1.5em; height: 1.5em; background: var(--accent);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
html[data-theme="hsr"] h2 small { grid-row: 1; grid-column: 2; font: 600 .68rem var(--display); letter-spacing: .14em; text-transform: uppercase; }

/* list: rule on the left of each item; the hovered item becomes the selected bar */
html[data-theme="hsr"] .row { position: relative; border: 0; padding-left: 22px; padding-right: 14px; transition: opacity .2s ease, color .2s; }
html[data-theme="hsr"] .row:last-child { border: 0; }
html[data-theme="hsr"] .row::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--line); transition: background .2s;
}
html[data-theme="hsr"] .row::after {
  content: ''; position: absolute; inset: 8px 0 8px 6px; z-index: -1; background: var(--sel); opacity: 0; transition: opacity .2s;
}
html[data-theme="hsr"] .row:is(:hover, :focus-within) { color: var(--sel-ink); }
html[data-theme="hsr"] .row:is(:hover, :focus-within)::before { background: var(--tick); }
html[data-theme="hsr"] .row:is(:hover, :focus-within)::after { opacity: 1; }
html[data-theme="hsr"] .row:is(:hover, :focus-within) :is(.meta, .stat) { color: #5d6275; }
html[data-theme="hsr"] .row:is(:hover, :focus-within) .stat { color: #9a7322; }
@media (hover: none) { html[data-theme="hsr"] .row:hover { color: inherit; } html[data-theme="hsr"] .row:hover::after { opacity: 0; } }

/* buttons: white pill, dark disc icon */
html[data-theme="hsr"] a.arrow {
  display: inline-flex; align-items: center; gap: .5em; padding: .1em 1em .1em .3em;
  border-radius: 999px; background: var(--pill); color: var(--sel-ink); text-decoration: none;
  font-weight: 600; font-size: .88em; line-height: 1.75; transition: background .15s, box-shadow .15s;
}
html[data-theme="hsr"] a.arrow::before {
  content: ''; width: 1.15em; height: 1.15em; border-radius: 50%; flex: none;
  background: radial-gradient(circle, var(--pill) 0 22%, #2b2e3b 26%);
}
html[data-theme="hsr"] a.arrow::after { content: none; }
html[data-theme="hsr"] a.arrow:hover { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
html[data-theme="hsr"] .row:is(:hover, :focus-within) a.arrow { box-shadow: 0 0 0 1px #c9c9c9; }
html[data-theme="hsr"] .switch { background: #10162c; }
html[data-theme="hsr"] .switch button { border: 0; border-left: 2px solid var(--line); text-align: left; }
html[data-theme="hsr"] .switch button[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); border-left-color: var(--tick); }