/* ===== Reset-ish */
* {
 box-sizing: border-box;
}
html,
body {
 height: 100%;
 background: #0b0c0f;
 color: #e8e8ea;
}
body {
 margin: 0;
 font:
  16px/1.6 system-ui,
  -apple-system,
  "Segoe UI",
  Roboto,
  "Noto Sans JP",
  "Hiragino Kaku Gothic ProN",
  "BIZ UDPGothic",
  sans-serif;
 padding-top: var(--app-pt, 80px); /* ensure absolutely/fixed-positioned siblings don’t overlap */
}

/* Base link styles (site-wide) */
a {
 color: var(--accent);
 text-decoration: underline;
 text-underline-offset: 2px;
 text-decoration-thickness: 2px;
 font-weight: 800;
}
a:visited {
 color: var(--accent);
}
a:hover { filter: brightness(1.1); }
a:focus-visible {
 outline: 2px solid #039bb1;
 outline-offset: 2px;
}

/* Page fade overlay */
.page-fade {
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: #0b0c0f;
 opacity: 0;
 z-index: 200;
 transition: opacity 0.22s ease;
 border-radius: 14px;
}
.page-fade.is-active {
 opacity: 1;
}

/* Utility */
.is-hidden {
 display: none !important;
}

/* Theme tokens (Arknights-ish) */
:root {
 --bg: #0b0c0f;
 --surface: #12141a;
 --line: #1d1f26;
 --ink: #e8e8ea;
 --muted: #a7aab6;
 --accent: #f7d354;
 --accent-2: #f4c533;
 --accent-cyan: #00e5ff;
 --accent-orange: #ff8a3d;
}

/* Scrollbar palette (dark) */
:root {
 --sb-track: #0f1217;
 --sb-thumb: #2b3140;
 --sb-thumb-hover: #364056;
 --sb-border: #232734;
}

/* Global scrollbar styling (Chromium/WebKit + Firefox) */
* {
 /* Firefox */
 scrollbar-width: thin;
 scrollbar-color: var(--sb-thumb) var(--sb-track);
}
/* Chromium/WebKit */
*::-webkit-scrollbar {
 width: 10px;
 height: 10px;
}
*::-webkit-scrollbar-track {
 background: var(--sb-track);
 border: 1px solid var(--sb-border);
 border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, rgba(0, 229, 255, 0.15), rgba(0, 192, 224, 0.08)), #2b3140;
 border: 1px solid var(--sb-border);
 border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
 background: linear-gradient(180deg, rgba(0, 229, 255, 0.25), rgba(0, 192, 224, 0.12)), #364056;
 border-color: #039bb1;
}
*::-webkit-scrollbar-corner {
 background: transparent;
}

@media (prefers-reduced-motion: reduce) {
 * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
 }
 .side-links__item:hover {
  transform: none;
  box-shadow: none;
 }
}
/* ===== Global mini BGM control (top-right) */
#bgm-mini {
 position: fixed;
 top: 76px; /* JS will refine based on .topbar; this is a safe fallback */
 right: 12px;
 z-index: 300; /* above .page-fade (z-index: 200) */
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 8px;
 border-radius: 10px;
 background: rgba(15, 17, 22, 0.86);
 border: 1px solid #232734;
 box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
 will-change: transform; /* promote to its own layer for smoother fades */
}
.bgm-mini__art {
 width: 28px;
 height: 28px;
 border-radius: 6px;
 border: 1px solid #232734;
 background: #0b0c0f center/cover no-repeat;
 image-rendering: -webkit-optimize-contrast;
}
.bgm-mini__btn {
 width: 28px;
 height: 28px;
 display: grid;
 place-items: center;
 border-radius: 8px;
 border: 1px solid #232734;
 background: #141821;
 color: #f7d354;
 cursor: pointer;
 font-weight: 800;
}
.bgm-mini__btn:disabled {
 opacity: 0.5;
 cursor: default;
}
.bgm-mini__meta {
 color: #cfcfd6;
 font-weight: 700;
 font-size: 12px;
}

/* ===== Top bar */
.topbar {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 250; /* above page-fade (200), below modals (350+) and bgm-mini (300) */
 display: flex;
 align-items: center;
 gap: 2rem;
 justify-content: space-between;
 padding: 12px 20px;
 background: rgba(10, 11, 14, 0.92);
 backdrop-filter: blur(6px);
 border-bottom: 1px solid #1e2026;
}
.topbar::after {
 content: "";
 position: absolute;
 inset: auto 12px 0 auto;
 width: 90px;
 height: 3px;
 background: linear-gradient(90deg, var(--accent), transparent);
 transform: skewX(-18deg);
}
.brand {
 display: flex;
 align-items: center;
 gap: 0.75rem;
}
.logo {
 font-weight: 800;
 letter-spacing: 0.04em;
 color: #fff;
}
.affil {
 color: #c9c9cf;
 opacity: 0.7;
}
.nav {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
}
.nav__link {
 appearance: none;
 border: 0;
 background: transparent;
 color: #cfcfd6;
 text-decoration: none; /* override base link underline */
 padding: 8px 10px;
 border-radius: 8px;
 cursor: pointer;
 font-weight: 600;
 position: relative;
 text-transform: uppercase;
 letter-spacing: 0.06em;
}
/* Ensure nav links do not inherit global :visited accent color */
.nav__link:link,
.nav__link:visited {
 color: #cfcfd6;
 text-decoration: none;
}
.nav__link:hover {
 color: #ffffff;
 filter: none;
}
.nav__link[aria-current="page"] {
 color: #0b0c0f;
 background: #f7d354;
}
.nav__link[aria-current="page"]::after {
 content: "";
 position: absolute;
 left: 8px;
 right: 8px;
 bottom: -6px;
 height: 3px;
 background: var(--accent);
 border-radius: 2px;
 transform: skewX(-16deg);
}

/* BGM controls */
.bgm-controls {
 display: flex;
 gap: 6px;
 margin-left: 8px;
}
.bgm-btn {
 width: 28px;
 height: 28px;
 display: inline-grid;
 place-items: center;
 border-radius: 8px;
 border: 1px solid #3a3116;
 background: #1b1e27;
 color: #f7d354;
 cursor: pointer;
 font-weight: 800;
 line-height: 1;
 font-size: 14px;
}
.bgm-btn:hover {
 filter: brightness(1.1);
}

/* ===== Left vertical social links */
.side-links {
 position: fixed;
 left: 12px;
 top: calc(var(--app-pt, 80px) + 16px);
 display: grid;
 gap: 10px;
 z-index: 40;
}
.side-links__item {
 width: 40px;
 height: 40px;
 border-radius: 999px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: #161820;
 color: #e8e8ea;
 text-decoration: none;
 font-weight: 800;
 border: 1px solid #262a36;
 transition:
  transform 0.12s ease,
  box-shadow 0.12s ease,
  background 0.12s ease;
}
.side-links__item img {
 display: block;
 width: 22px;
 height: 22px;
}
.side-links__item:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 18px rgba(247, 211, 84, 0.2);
 background: #1c1f2a;
}
.side-links__item.tw {
 outline: 2px solid rgba(247, 211, 84, 0.18);
}
.side-links__item.sc {
 outline: 2px solid rgba(247, 120, 84, 0.22);
}
.side-links__item.bs {
 outline: 2px solid rgba(255, 255, 255, 0.12);
}
.side-links__item.gh {
 outline: 2px solid rgba(255, 255, 255, 0.12);
}
.side-links__item.x {
 outline: 2px solid rgba(255, 255, 255, 0.12);
}

/* ===== Main app scaffold */
.app {
 max-width: 1200px;
 margin: 0 auto;
 position: relative;
 border-radius: 18px;
 overflow: visible;
}

/* Each SPA view can host an overlay */
.view {
 position: relative;
}
.view.is-loading {
 min-height: 280px; /* ensure overlay has room before template arrives */
}

/* ===== Hero (Arknights-ish: 暗背景 + 斜めカット) */
.hero {
 position: relative;
 min-height: clamp(360px, 48vh, 560px);
 display: grid;
 align-items: center;
 border: 1px solid #1d1f26;
 border-radius: 18px;
 overflow: clip;
}
.hero__bg {
 position: absolute;
 inset: 0;
 background:
  linear-gradient(135deg, rgba(247, 211, 84, 0.12), transparent 45%),
  radial-gradient(1200px 600px at 10% 110%, rgba(255, 255, 255, 0.06), transparent), url("/image/hero-noise.svg");
 filter: saturate(105%) contrast(105%);
}
.hero__ambient {
 position: absolute;
 inset: 0;
 z-index: 0;
 mix-blend-mode: overlay;
 opacity: 0.35;
 pointer-events: none;
}
.hero__life {
 position: absolute;
 inset: 0;
 z-index: 0;
 mix-blend-mode: screen;
 opacity: 0.45; /* mostly translucent */
 pointer-events: none;
}
.hero__content {
 position: relative;
 padding: clamp(20px, 6vw, 48px);
 z-index: 1; /* ensure above background/ambient/life layers */
}
.hero__content::before {
 content: "URTS // SYSTEM ONLINE";
 position: absolute;
 top: 14px;
 right: 14px;
 z-index: 1;
 font:
  600 12px/1.2 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 letter-spacing: 0.12em;
 color: var(--ink);
 background: rgba(15, 17, 22, 0.55);
 border: 1px solid #232734;
 border-radius: 6px;
 padding: 6px 8px;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.hero__content::after {
 content: "";
 position: absolute;
 right: 14px;
 top: 40px;
 width: 68px;
 height: 6px;
 background: repeating-linear-gradient(
  90deg,
  var(--accent-cyan),
  var(--accent-cyan) 10px,
  transparent 10px,
  transparent 16px
 );
 opacity: 0.7;
 transform: skewX(-16deg);
}
.hero__ornaments {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 0; /* behind content */
}
/* Small glowing chips */
.orn-chip { position: absolute; width: 6px; height: 6px; border-radius: 2px; background: #00c0e0; box-shadow: 0 0 10px rgba(0,229,255,0.4); opacity: 0.85; animation: chip-float 8s ease-in-out infinite; }
.oc1 { left: 8%; top: 24%; animation-delay: -1.2s; }
.oc2 { right: 12%; top: 38%; animation-delay: -2.6s; }
/* Rings */
.orn-ring { position: absolute; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(3,155,177,0.5); box-shadow: inset 0 0 14px rgba(0,229,255,0.18); animation: ring-pulse 6s ease-in-out infinite; }
.or1 { left: 18%; bottom: 16%; }
.or2 { right: 22%; top: 16%; animation-delay: -1.8s; }
/* Diagonal lines */
.orn-line { position: absolute; width: 160px; height: 2px; background: linear-gradient(90deg, rgba(247,211,84,0.0), rgba(247,211,84,0.6), rgba(247,211,84,0.0)); transform: skewX(-18deg); opacity: 0.7; animation: line-scan 7s linear infinite; }
.ol1 { left: 10%; top: 70%; }
.ol2 { right: 10%; top: 30%; animation-delay: -3.6s; }
@keyframes chip-float { 0%,100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(-8px); opacity: 1; } }
@keyframes ring-pulse { 0%,100% { transform: scale(0.96); opacity: 0.6; } 50% { transform: scale(1.04); opacity: 0.9; } }
@keyframes line-scan { from { transform: translateX(-8px) skewX(-18deg); } to { transform: translateX(8px) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .orn-chip, .orn-ring, .orn-line { animation: none !important; } }
.hero__live {
 position: absolute;
 right: 14px;
 bottom: 14px;
 width: min(360px, 46vw);
 height: 202px; /* 16:9 of 360x202 */
 display: none; /* shown when live */
 border: 1px solid #232734;
 border-radius: 10px;
 overflow: hidden;
 background: #0f1217;
 box-shadow: 0 12px 40px rgba(0,0,0,0.45);
 z-index: 5;
}
.hero__live.is-active { display: block; }
.hero__live iframe { width: 100%; height: 100%; border: 0; display: block; }
.hero__title {
 font-size: clamp(28px, 6vw, 52px);
 margin: 0 0 8px;
 letter-spacing: 0.02em;
}
.hero__subtitle {
 margin: 0 0 20px;
 color: #cfcfd6;
 opacity: 0.85;
 font-weight: 600;
}
.hero__cta {
 display: flex;
 gap: 12px;
}
/* Hero ornament (Arknights-like decorative panel) */
.ornament {
 position: relative;
 display: grid;
 place-items: center;
 width: min(520px, 60vw);
 height: 66px;
 border: 1px solid #232734;
 border-radius: 12px;
 background: #0f1217;
 overflow: hidden;
 box-shadow: 0 10px 34px rgba(0,0,0,0.4);
}
.ornament__panel { position: relative; width: 100%; height: 100%; }
.ornament__grid {
 position: absolute; inset: 0;
 background:
  linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
  linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 1px);
 background-size: 32px 32px, 32px 32px;
 mix-blend-mode: overlay;
 opacity: 0.25;
 animation: orn-parallax 16s linear infinite;
}
.ornament__scan {
 position: absolute; inset: 0;
 background: linear-gradient(135deg, rgba(247,211,84,0.10), transparent 45%);
 transform: translateX(-20%);
 animation: orn-scan 6.2s ease-in-out infinite;
}
.ornament__ticker {
 position: absolute; inset: 0 0 0 60px;
 font:
  700 12px/66px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 color: #cfcfd6;
 letter-spacing: 0.12em;
 white-space: nowrap;
 overflow: hidden;
 mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ornament__ticker-inner { display: inline-block; will-change: transform; animation: orn-ticker 28s linear infinite; }
.ornament__ticker span { display: inline-block; padding: 0 16px; }
.ornament__badge {
 position: absolute; left: 10px; top: 10px;
 font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 letter-spacing: 0.12em;
 color: #0b0c0f;
 background: var(--accent-cyan);
 border: 1px solid #039bb1;
 border-radius: 8px;
 padding: 6px 8px;
 box-shadow: 0 0 0 2px rgba(3,155,177,0.18);
}
.ornament__cut {
 position: absolute; right: 0; top: 0;
 width: 0; height: 0; border-left: 22px solid transparent; border-bottom: 22px solid var(--accent);
 filter: drop-shadow(0 0 0 rgba(0,0,0,0.35));
}
/* Animated equalizer-like bars */
.ornament__bars { position: absolute; right: 40px; bottom: 10px; display: grid; grid-auto-flow: column; gap: 3px; }
.ornament__bars i { width: 3px; height: 18px; background: linear-gradient(180deg, var(--accent-cyan), #00c0e0); border-radius: 2px; opacity: 0.8; animation: orn-bars 1.2s ease-in-out infinite; }
.ornament__bars i:nth-child(odd){ animation-duration: 1.0s; }
.ornament__bars i:nth-child(3n){ animation-duration: 0.9s; }
.ornament__bars i:nth-child(4n){ animation-duration: 1.4s; }

/* Small rotating dial (radar-ish) */
.ornament__dial {
 position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%;
 background:
  conic-gradient(from 0deg, rgba(0,229,255,0.0) 0 300deg, rgba(0,229,255,0.25) 330deg, rgba(0,229,255,0.0) 360deg),
  radial-gradient(closest-side, rgba(3,155,177,0.3), transparent);
 border: 1px solid #039bb1;
 box-shadow: inset 0 0 14px rgba(0,229,255,0.18);
 animation: orn-dial 6s linear infinite;
}

/* Subtle noise overlay for panel */
.ornament__panel::after {
 content: ""; position: absolute; inset: 0; pointer-events: none;
 background-image: url('/image/hero-noise.svg');
 opacity: 0.05; mix-blend-mode: overlay; filter: contrast(110%);
}
@keyframes orn-parallax { from { background-position: 0 0, 0 0; } to { background-position: 32px 0, 0 32px; } }
@keyframes orn-scan { 0%,100% { transform: translateX(-20%); opacity: 0.4; } 50% { transform: translateX(0); opacity: 0.7; } }
@keyframes orn-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes orn-bars { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@keyframes orn-dial { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
 .ornament__grid, .ornament__scan, .ornament__ticker-inner, .ornament__bars i, .ornament__dial { animation: none !important; }
}
.hero::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
  linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
  linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
 background-size:
  40px 40px,
  40px 40px;
 mix-blend-mode: overlay;
}
.hero::after {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: repeating-linear-gradient(
  135deg,
  rgba(247, 211, 84, 0.06),
  rgba(247, 211, 84, 0.06) 8px,
  transparent 8px,
  transparent 22px
 );
 opacity: 0.5;
}
.btn {
 display: inline-grid;
 place-items: center;
 height: 40px;
 padding: 0 16px;
 border-radius: 10px;
 font-weight: 800;
 letter-spacing: 0.02em;
 text-decoration: none;
 color: #0b0c0f;
 background: #f7d354;
 border: 1px solid #f4c533;
 cursor: pointer;
}
.btn:link,
.btn:visited {
 color: #0b0c0f;
 text-decoration: none;
}
.btn:hover {
 filter: brightness(1.05);
}
.btn--live {
 color: #0b0c0f;
 background: linear-gradient(180deg, var(--accent-cyan), #00c0e0);
 border-color: #039bb1;
 text-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
}
.btn--ghost {
 color: #f7d354;
 background: transparent;
 border-color: #3a3116;
}
.btn--ghost:link,
.btn--ghost:visited {
 color: #f7d354;
 text-decoration: none;
}
/* Disabled state for buttons/links */
.btn[aria-disabled="true"] {
 opacity: 0.6;
 cursor: not-allowed;
 filter: grayscale(30%);
}
.btn[aria-disabled="true"]:hover {
 filter: grayscale(40%);
}

/* ===== Strip / section title */
.strip {
 margin-top: 28px;
}
.strip__title {
 display: inline-block;
 margin: 0 0 14px;
 padding: 6px 10px 6px 14px;
 font-size: 14px;
 letter-spacing: 0.14em;
 color: #0b0c0f;
 background: #f7d354;
 border-radius: 10px;
 clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 0 0);
}
.strip__title::after {
 content: "";
 display: inline-block;
 margin-left: 8px;
 width: 10px;
 height: 10px;
 background: linear-gradient(135deg, #0b0c0f 0 50%, transparent 50% 100%);
 transform: translateY(1px) skewX(-16deg);
 border-radius: 2px;
}

/* ===== Grid (container queries でカード幅対応) */
.grid {
 --min: 260px;
 display: grid;
 gap: 14px;
 grid-template-columns: repeat(auto-fill, minmax(min(var(--min), 100%), 1fr));
 container-type: inline-size; /* この要素をクエリ対象にする */
}

/* ===== Cards */
.card {
 position: relative;
 border-radius: 14px;
 overflow: clip;
 border: 1px solid #20242e;
 background: #12141a;
 display: grid;
 grid-template-rows: auto 1fr;
}
.card::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(transparent, rgba(255, 255, 255, 0.02));
}
.card:hover {
 transform: translateY(-2px);
 transition: transform 0.12s ease;
}
.card__cut {
 position: absolute;
 inset: 0 0 auto auto;
 width: 0;
 height: 0;
 border-left: 26px solid transparent;
 border-bottom: 26px solid #f7d354; /* 斜めカット風の角 */
 filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.35));
}
/* カード種別でアクセント色を切替 */
.card--vod .card__cut,
.card--clip .card__cut {
 border-bottom-color: var(--accent-cyan);
}
.card--track .card__cut {
 border-bottom-color: var(--accent-orange);
}
.card--map .card__cut {
 border-bottom-color: #e5e7eb;
}
.card__thumb {
 width: 100%;
 height: 150px;
 object-fit: cover;
 background: #0b0c0f;
}
.card__body {
 padding: 12px;
 display: grid;
 gap: 6px;
}
.card__tag {
 display: inline-flex;
 align-items: center;
 white-space: nowrap;
 height: 22px;
 line-height: 22px;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.08em;
 color: #0b0c0f;
 background: #f7d354;
 padding: 0 10px;
 border-radius: 999px;
 width: max-content;
}
.card__title {
 margin: 0;
 font-size: 16px;
 line-height: 1.4;
}
.card__date {
 color: #a7aab6;
 font-size: 12px;
}

/* Container Query：カードが狭い時の縮約 */
@container (max-width: 300px) {
 .card__thumb {
  height: 120px;
 }
 .card__title {
  font-size: 14px;
 }
}

/* ===== Detail (展開パネル) */
.detail {
 position: fixed;
 inset: auto 16px 16px 86px;
 z-index: 60;
 background: #0f1117; /* opaque to prevent bleed-through under heavy content */
 border: 1px solid #232734;
 border-radius: 14px;
 padding: 12px;
 max-height: 60vh;
 overflow: auto;
 box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.detail::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(
  90deg,
  rgba(247, 211, 84, 0.06),
  transparent 30%,
  transparent 70%,
  rgba(247, 211, 84, 0.06)
 );
}
.detail__close {
 position: sticky;
 top: 0;
 float: right;
 border: 0;
 background: #1b1e27;
 color: #f7d354;
 width: 36px;
 height: 36px;
 border-radius: 10px;
 cursor: pointer;
 font-size: 20px;
}
.detail__body .embed {
 display: grid;
 place-items: center;
 min-height: 240px;
}
/* Terms dialog tweaks */
.detail#terms {
 position: fixed; /* ensure it's a true modal */
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 /* Avoid using inset shorthand here; it resets top/left too */
 right: auto;
 bottom: auto;
 width: min(880px, 90vw);
 max-height: 70vh;
 z-index: 350; /* above page fade and other floating UI */
 pointer-events: auto;
}
.detail#terms .list {
 padding-left: 18px;
}
.detail#terms .list li {
 margin: 6px 0;
}
.detail#terms .md {
 margin-top: 8px;
 padding: 10px 12px;
 border: 1px solid #232734;
 border-radius: 10px;
 background: #0f1217;
 max-height: 52vh;
 overflow: auto;
 color: #cfcfd6;
}
.detail#terms .md-raw {
 white-space: pre-wrap;
 margin: 0;
 font:
  600 13px/1.5 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
}
/* center the actions in the terms dialog */
.detail#terms .feature__actions {
 justify-content: center;
}
.modal-backdrop {
 position: fixed;
 inset: 0;
 z-index: 340; /* below #terms, above base content */
 background: rgba(0, 0, 0, 0.6);
 pointer-events: auto;
}

/* ===== Music view */
/* Custom SoundCloud Player */
.sc-player {
 border: 1px solid #232734;
 border-radius: 14px;
 background: #0f1217;
 box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.scp__now {
 display: grid;
 grid-template-columns: auto 1fr;
 align-items: start;
 gap: 14px;
 padding: 14px;
 border-bottom: 1px solid #232734;
 min-height: 180px;
}
.scp__art {
 width: 160px;
 height: 160px;
 border-radius: 10px;
 background: #0b0c0f;
 border: 1px solid #232734;
 flex: none;
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
}
.scp__meta {
 display: grid;
 gap: 6px;
}
.scp__title {
 margin: 0;
 font-weight: 800;
 font-size: 16px;
}
.scp__artist {
 color: #a7aab6;
 font-weight: 700;
 font-size: 12px;
 letter-spacing: 0.06em;
}
.scp__desc {
 height: 108px;
 overflow: auto;
 padding: 8px 10px;
 border: 1px solid #232734;
 border-radius: 10px;
 background: #0f1217;
 color: #cfcfd6;
 font-size: 12px;
 white-space: pre-wrap;
}
.scp__controls {
 display: flex;
 gap: 10px;
 align-items: center;
 padding: 10px 14px;
 border-bottom: 1px solid #232734;
}
.scp__btn {
 width: 36px;
 height: 36px;
 display: grid;
 place-items: center;
 border-radius: 10px;
 border: 1px solid #232734;
 background: #141821;
 color: #f7d354;
 cursor: pointer;
 font-weight: 800;
}
.scp__btn:hover {
 filter: brightness(1.08);
}
.scp__time {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-left: auto;
 color: #cfcfd6;
 font:
  700 12px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
}
.scp__bar {
 position: relative;
 width: min(380px, 40vw);
 height: 8px;
 background: #1a1e28;
 border: 1px solid #232734;
 border-radius: 999px;
 outline: none;
}
.scp__bar-fill {
 position: absolute;
 inset: 0 100% 0 0;
 background: linear-gradient(90deg, var(--accent-cyan), #00c0e0);
 border-radius: 999px;
}
.scp__list {
 margin: 0;
 padding: 6px 6px 10px;
 list-style: none;
 max-height: 60vh;
 overflow: auto;
}
.scp__track {
 display: grid;
 grid-template-columns: 36px 1fr auto;
 align-items: center;
 gap: 10px;
 padding: 8px 8px;
 border-radius: 10px;
 border: 1px solid transparent;
 cursor: pointer;
}
.scp__track:hover {
 background: #121722;
 border-color: #232734;
}
.scp__track.is-active {
 background: #101722;
 border-color: #039bb1;
}
.scp__idx {
 width: 28px;
 height: 28px;
 display: grid;
 place-items: center;
 border-radius: 8px;
 background: #141821;
 border: 1px solid #232734;
 color: #a7aab6;
 font:
  700 12px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
}
.scp__tmeta {
 display: grid;
 gap: 2px;
}
.scp__t-title {
 font-weight: 700;
}
.scp__t-artist {
 color: #a7aab6;
 font-size: 12px;
}
.scp__t-artist .scp__t-date {
 opacity: 0.8;
 margin-left: 6px;
}
.scp__t-artist .scp__t-link {
 color: var(--accent);
 font-weight: 700;
 text-decoration: none;
}
.scp__t-artist .scp__t-link:hover {
 text-decoration: underline;
}
.scp__dur {
 color: #a7aab6;
 font:
  700 12px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
}

/* Hidden SoundCloud engine iframe (keep in DOM, remove from layout/visibility) */
.scp__iframe {
 position: absolute;
 width: 1px !important;
 height: 1px !important; /* avoid 0x0 to prevent widget canvas errors */
 overflow: hidden;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 white-space: nowrap;
 border: 0;
 padding: 0;
 margin: 0;
 opacity: 0;
 pointer-events: none;
}
.scp__iframe iframe {
 width: 1px !important;
 height: 1px !important; /* keep tiny but non-zero */
 border: 0 !important;
 display: block;
}

.music-note {
 margin: 8px 0 12px;
 color: #cfcfd6;
 background: #141821;
 border: 1px solid #232734;
 border-radius: 10px;
 padding: 10px 12px;
}
.music-note a {
 color: var(--accent);
 font-weight: 700;
}

/* Content links hover uses base link styles; keep hover brightening */
.feature__desc a:hover,
.detail .md a:hover {
 filter: brightness(1.1);
}

/* ===== Beat Saber index + features */
.index-nav {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
 margin: 10px 0 14px;
 padding: 10px 12px;
 background: #0e1116;
 border: 1px solid #232734;
 border-radius: 10px;
}
.index-nav__label {
 color: #cfcfd6;
 font:
  700 11px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 letter-spacing: 0.14em;
 margin-right: 6px;
 opacity: 0.8;
}
.features {
 display: grid;
 gap: 14px;
}
.feature {
 display: grid;
 grid-template-columns: min(320px, 32%) 1fr;
 gap: 14px;
 border: 1px solid #232734;
 border-radius: 14px;
 background: #0f1217;
 overflow: hidden;
 box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.feature__media {
 background: #0b0c0f;
 border-right: 1px solid #232734;
 min-height: 220px;
}
.feature__media--saber {
 background:
  linear-gradient(135deg, rgba(247, 211, 84, 0.12), transparent 55%),
  radial-gradient(800px 320px at 10% 110%, rgba(3, 155, 177, 0.12), transparent);
}
.feature__media--notes {
 background:
  linear-gradient(135deg, rgba(0, 229, 255, 0.12), transparent 55%),
  radial-gradient(800px 320px at 10% 110%, rgba(247, 211, 84, 0.12), transparent);
}
.feature__media--hits {
 background:
  linear-gradient(135deg, rgba(255, 138, 61, 0.12), transparent 55%),
  radial-gradient(800px 320px at 10% 110%, rgba(255, 255, 255, 0.06), transparent);
}
.feature__body {
 display: grid;
 gap: 8px;
 padding: 14px;
}
.feature__meta {
 display: flex;
 gap: 8px;
 align-items: center;
}
.feature__meta .tag {
 display: inline-flex;
 align-items: center;
 height: 22px;
 line-height: 22px;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.08em;
 color: #0b0c0f;
 background: #f7d354;
 padding: 0 10px;
 border-radius: 999px;
 width: max-content;
}
.feature__meta .sub {
 color: #a7aab6;
 font-size: 12px;
}
.feature__title {
 margin: 0;
 font-size: 20px;
 letter-spacing: 0.02em;
}
.feature__desc {
 color: #cfcfd6;
}
.feature__actions {
 display: flex;
 gap: 10px;
 margin-top: 4px;
}

/* ===== Feature media gallery (left-side slider) */
.gallery {
 position: relative;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: #0b0c0f;
}
.gallery__track {
 display: flex;
 width: 100%;
 height: 100%;
 transform: translate3d(0, 0, 0);
 transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
 will-change: transform;
}
.gallery__slide {
 flex: 0 0 100%;
 width: 100%;
 height: 100%;
 position: relative;
}
.gallery__img {
 flex: 0 0 100%;
 width: 100%;
 height: 100%;
 object-fit: cover;
 image-rendering: -webkit-optimize-contrast;
 background: #0b0c0f;
 user-select: none;
}
.gallery__video-thumb {
 position: absolute;
 inset: 0;
 display: grid;
 place-items: center;
 width: 100%;
 height: 100%;
 background:
  linear-gradient(135deg, rgba(247, 211, 84, 0.05), transparent 55%),
  radial-gradient(800px 320px at 10% 110%, rgba(3, 155, 177, 0.12), transparent);
 border: 0;
 cursor: pointer;
}
.gallery__play {
 display: inline-grid;
 place-items: center;
 width: 56px;
 height: 56px;
 border-radius: 999px;
 background: rgba(0, 0, 0, 0.55);
 color: #f7d354;
 font-weight: 900;
 border: 2px solid #3a3116;
 box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.gallery__shade {
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
  linear-gradient(135deg, rgba(247, 211, 84, 0.05), transparent 55%),
  radial-gradient(800px 320px at 10% 110%, rgba(3, 155, 177, 0.12), transparent);
}
.gallery__dots {
 position: absolute;
 left: 10px;
 bottom: 10px;
 display: inline-flex;
 gap: 6px;
 padding: 4px 6px;
 background: rgba(15, 17, 22, 0.5);
 border: 1px solid #232734;
 border-radius: 999px;
}
.gallery__dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #2b3140;
 border: 1px solid #232734;
}
.gallery__dot.is-active {
 background: #f7d354;
 border-color: #3a3116;
}

/* ===== Lightbox (modal image viewer) */
.lightbox {
 position: fixed;
 inset: 0;
 z-index: 360; /* above terms (350) */
 display: none;
}
.lightbox.is-open {
 display: block;
}
.lightbox__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.72);
}
.lightbox__panel {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 display: grid;
 place-items: center;
 max-height: 64vh;
 border: 1px solid #232734;
 border-radius: 12px;
 background: #0f1217;
 box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__stage {
 height: 64vh; /* cap height as requested */
 max-width: 92vw; /* keep within viewport width */
 aspect-ratio: 16 / 9; /* maintain 16:9 stage */
 display: grid;
 place-items: center;
 background: #0b0c0f;
 border: 1px solid #232734;
 border-radius: 10px;
 overflow: hidden;
 position: relative; /* anchor controls */
}
.lightbox__img {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
 background: #0b0c0f;
 border-radius: 6px;
}
.lightbox__video {
 max-width: 100%;
 max-height: 100%;
 background: #0b0c0f;
 border-radius: 6px;
}
.lightbox__stage audio {
 max-width: 92%;
 width: 480px;
 background: #0f1217;
 border: 1px solid #232734;
 border-radius: 10px;
 padding: 4px;
}
.lightbox__close,
.lightbox__nav {
 position: absolute;
 z-index: 2;
 display: grid;
 place-items: center;
 width: 36px;
 height: 36px;
 border-radius: 10px;
 border: 1px solid #232734;
 background: rgba(20, 24, 33, 0.9);
 color: #f7d354;
 cursor: pointer;
 box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.lightbox__nav {
 top: 50%;
 transform: translateY(-50%);
}
.lightbox__nav--prev {
 left: 10px;
}
.lightbox__nav--next {
 right: 10px;
}
.lightbox__close {
 top: 10px;
 right: 10px;
}

@media (max-width: 880px) {
 .feature {
  grid-template-columns: 1fr;
 }
 .feature__media {
  min-height: 160px;
  border-right: 0;
  border-bottom: 1px solid #232734;
 }
}

/* ===== Generic Loading Overlay (Arknights-ish) */
.loading-overlay {
 position: absolute;
 inset: 0;
 z-index: 80;
 display: grid;
 place-items: center;
 background: rgba(10, 12, 15, 0.86);
 border: 1px solid #232734;
 border-radius: 14px;
 overflow: hidden;
}
.loading-overlay::before {
 content: "";
 position: absolute;
 inset: 0;
 background: repeating-linear-gradient(
  135deg,
  rgba(247, 211, 84, 0.06),
  rgba(247, 211, 84, 0.06) 8px,
  transparent 8px,
  transparent 22px
 );
 opacity: 0.6;
}
.loading-overlay__panel {
 position: relative;
 padding: 16px 18px;
 border: 1px solid #232734;
 border-radius: 12px;
 background: #0f1217;
 box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
 min-width: 240px;
 text-align: center;
}
.loading-overlay__panel.is-manual .loading-overlay__bar::after {
 display: none;
}
.loading-overlay__badge {
 position: absolute;
 top: 8px;
 right: 8px;
 font:
  700 11px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 letter-spacing: 0.12em;
 color: var(--ink);
 background: rgba(15, 17, 22, 0.6);
 border: 1px solid #232734;
 border-radius: 6px;
 padding: 6px 8px;
}
.loading-overlay__title {
 margin: 10px 0 8px;
 font-weight: 800;
 letter-spacing: 0.14em;
 color: #e8e8ea;
}
.loading-overlay__bar {
 position: relative;
 height: 8px;
 border-radius: 999px;
 background: #151923;
 border: 1px solid #232734;
 overflow: hidden;
}
.loading-overlay__bar::after {
 content: "";
 position: absolute;
 inset: 0 100% 0 0;
 background: linear-gradient(90deg, var(--accent-cyan), #00c0e0);
 border-radius: 999px;
 animation: ld-scan 1.4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.loading-overlay__bar-fill {
 position: absolute;
 inset: 0 var(--pf, 100%) 0 0; /* controlled by JS */
 background: linear-gradient(90deg, var(--accent-cyan), #00c0e0);
 border-radius: 999px;
 transition: inset 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.loading-overlay__logs {
 margin-top: 10px;
 text-align: left;
 font:
  500 12px/1.4 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 color: #9da3ae;
 background: #0b0e13;
 border: 1px solid #232734;
 border-radius: 8px;
 padding: 10px 12px;
 max-height: 180px;
 width: min(520px, 70vw);
 overflow: auto;
}
.loading-overlay__logs b {
 color: #e5e7eb;
}
.loading-overlay__logs .ok {
 color: #62d392;
}
.loading-overlay__logs .warn {
 color: #f7d354;
}
.loading-overlay__logs .err {
 color: #ff6b6b;
}
@keyframes ld-scan {
 0% {
  inset: 0 100% 0 0;
 }
 50% {
  inset: 0 20% 0 0;
 }
 100% {
  inset: 0 100% 0 0;
 }
}

/* ===== Under construction (WIP) */
.wip {
 position: relative;
 border: 1px solid #3a3116;
 border-radius: 12px;
 background: #12141a;
 overflow: hidden;
 margin: 12px 0;
}
.wip__stripe {
 height: 22px;
 background-image: repeating-linear-gradient(45deg, #f7d354 0 12px, #0b0c0f 12px 24px);
 border-bottom: 1px solid #3a3116;
 border-top: 1px solid #3a3116;
}
.wip__stripe--top {
 border-bottom-color: #5a4a1a;
}
.wip__stripe--bottom {
 border-top-color: #5a4a1a;
}
.wip__body {
 padding: 18px 16px;
 text-align: center;
}
.wip__msg {
 margin: 0 0 4px;
 font-weight: 800;
 letter-spacing: 0.08em;
}
.wip__sub {
 margin: 0;
 color: var(--muted);
}

/* ===== Stream view */
.player-wrap {
 display: grid;
 gap: 12px;
 grid-template-columns: 1fr min(360px, 30%);
}
#twitch-iframe {
 width: 100%;
 min-height: 360px;
 border: 0;
 border-radius: 10px;
}
.twitch-chat {
 width: 100%;
 min-height: 360px;
 border: 0;
 border-radius: 10px;
}

/* ===== Lists */
.list {
 margin: 0;
 padding: 0 0 0 18px;
}

/* ===== URTS dossier (About) */
.urts {
 position: relative;
 border: 1px solid var(--line);
 border-radius: 14px;
 padding: 16px;
 background: var(--surface);
}
.urts::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(
  90deg,
  rgba(0, 229, 255, 0.07),
  transparent 30%,
  transparent 70%,
  rgba(247, 211, 84, 0.06)
 );
}
.urts__head {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 16px;
 margin-bottom: 14px;
}
.urts__h {
 margin: 0;
 font:
  800 18px/1.2 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 letter-spacing: 0.16em;
}
.urts__sub {
 margin: 4px 0 0;
 opacity: 0.7;
 font-weight: 600;
 letter-spacing: 0.08em;
}
.urts__meta {
 display: flex;
 gap: 10px;
 align-items: center;
}
.urts__badge {
 display: inline-block;
 font:
  700 11px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 padding: 6px 8px;
 border-radius: 8px;
 color: #0b0c0f;
 background: var(--accent-cyan);
 border: 1px solid #039bb1;
}
.urts__id {
 font:
  700 12px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 letter-spacing: 0.12em;
 opacity: 0.85;
}
.urts__grid {
 display: grid;
 grid-template-columns: min(260px, 32%) 1fr;
 gap: 16px;
}
.urts__portrait {
 display: grid;
 place-items: start center;
 grid-template-rows: auto 1fr;
 grid-gap: 0.5em;
}
.urts__portrait img {
 display: block;
 width: min(220px, 100%);
 aspect-ratio: 1 / 1;
 object-fit: cover;
 border-radius: 50%;
 border: 2px solid #232734;
 background: #0f1217;
 box-shadow:
  0 0 0 4px rgba(3, 155, 177, 0.15),
  0 8px 32px rgba(0, 0, 0, 0.45);
}
.urts .note {
 display: block;
 margin-top: 6px;
 color: var(--muted);
 font-size: 12px;
}
.urts .sec {
 margin: 10px 0 8px;
 font-size: 14px;
 letter-spacing: 0.16em;
 color: #0b0c0f;
 background: var(--accent);
 padding: 4px 10px;
 border-radius: 8px;
 width: max-content;
 clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.urts .kv {
 display: grid;
 grid-template-columns: 1fr;
 gap: 8px;
 margin: 0 0 10px;
}
.urts .kv dt {
 color: var(--muted);
 font-size: 12px;
}
.urts .kv dd {
 margin: 0;
 font-weight: 700;
}
.urts .notes {
 margin: 0 0 12px 18px;
}
.urts .cta {
 display: flex;
 gap: 10px;
 margin-top: 12px;
}
.urts__foot {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 margin-top: 14px;
 padding-top: 10px;
 border-top: 1px solid #232734;
}
.urts .tags {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}
.urts .tag {
 font:
  700 11px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 letter-spacing: 0.08em;
 padding: 6px 8px;
 border-radius: 8px;
 border: 1px solid #232734;
 background: #1a1d26;
}
.urts .sig {
 opacity: 0.6;
 font:
  700 12px/1 ui-monospace,
  SFMono-Regular,
  Menlo,
  Consolas,
  monospace;
 letter-spacing: 0.08em;
}
.dossier-motto {
 display: block;
 font-size: 0.9em;
 font-style: italic;
 color: #f7d354;
 margin-top: 4px;
}

@media (max-width: 880px) {
 .urts__grid {
  grid-template-columns: 1fr;
 }
}

/* ===== Small screens */
@media (max-width: 880px) {
 .player-wrap {
  grid-template-columns: 1fr;
 }
 .side-links {
  left: 8px;
  top: 84px;
 }
 /* keep inline panels docked on small screens, but not the terms modal */
 .detail:not(#terms) {
  inset: auto 12px 12px 12px;
 }
}