.detail-page { padding-top: 125px; padding-bottom: 100px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .95rem; font-weight: 600; transition: color .2s; }
.back-link:hover, .back-link:focus-visible { color: var(--text); }
.back-link .material-symbols-outlined { font-size: 1.2rem; }
.detail-card { margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-top: 2px solid var(--faction-color); border-radius: 24px; background: linear-gradient(150deg, #1b1e27, #111318 70%); box-shadow: 0 28px 70px rgba(0, 0, 0, .28); }

.detail-hero { position: relative; isolation: isolate; display: flex; align-items: center; gap: clamp(24px, 4vw, 50px); min-height: 220px; padding: 26px 36px 30px; border-bottom: 1px solid var(--line); }
.detail-hero::before { content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: 300px; height: 220px; background: radial-gradient(ellipse, color-mix(in srgb, var(--faction-color) 22%, transparent), transparent 72%); filter: blur(14px); pointer-events: none; }
.detail-logo { position: relative; width: clamp(120px, 15vw, 170px); aspect-ratio: 1; flex: none; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--faction-color); border-radius: 22px; background: #222630; box-shadow: 0 22px 48px rgba(0, 0, 0, .35); }
.detail-logo span { color: var(--text); font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 800; }
.detail-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-title { min-width: 0; }
.detail-title h1 { margin: 0; overflow-wrap: anywhere; font-size: clamp(2rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.22; }
.detail-title p { margin: 12px 0 0; color: var(--muted); font-size: 1.05rem; }
.detail-title p strong { color: var(--text); font-weight: 600; }
.music-disc { position: fixed; z-index: 10000; right: 24px; bottom: 24px; width: 68px; height: 68px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: #191b21; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); cursor: pointer; }
.music-disc:hover { border-color: var(--faction-color); }
.music-disc:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.music-disc-grooves { position: absolute; inset: 6px; border-radius: 50%; background: repeating-radial-gradient(circle, #2c3039 0 3px, #101217 4px 5px); }
.music-disc-grooves::after { content: ''; position: absolute; top: 9px; left: 9px; width: 12px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .32); transform: rotate(-35deg); }
.music-disc.is-playing .music-disc-grooves { animation: disc-spin 4s linear infinite; }
.music-disc-center { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--faction-color); color: #101217; }
.music-disc-center .material-symbols-outlined { font-size: 1.1rem; }
.music-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes disc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .music-disc.is-playing .music-disc-grooves { animation: none; } }

.detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 36px; border-bottom: 1px solid var(--line); }
.detail-metric { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 24px; border-left: 1px solid var(--line); }
.detail-metric:first-child { padding-left: 0; border-left: 0; }
.detail-metric span { color: var(--muted); font-size: .95rem; font-weight: 600; }
.detail-metric strong { margin-top: 4px; color: var(--text); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.primary-metric strong { color: var(--text); }

.detail-information { padding: 28px 36px 32px; }
.detail-section-heading h2 { margin: 0 0 16px; font-size: clamp(1.5rem, 3vw, 2rem); }
.detail-information dl { margin: 0; border-top: 1px solid var(--line); }
.detail-information dl > div { display: grid; grid-template-columns: minmax(130px, 28%) 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.detail-information dt { color: var(--muted); font-size: .95rem; font-weight: 500; }
.detail-information dd { margin: 0; overflow-wrap: anywhere; font-size: 1.05rem; font-weight: 600; }

.gang-announcements { margin-top: 72px; }
.announcements-heading { margin-bottom: 22px; }
.announcements-heading h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.announcement-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 42px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--muted); text-align: center; }
.announcement-empty .material-symbols-outlined { color: var(--faction-color); font-size: 2rem; }
.announcement-empty p { margin: 0; font-size: 1rem; }

body.welcome-open { overflow: hidden; }
.welcome-overlay { position: fixed; z-index: 11000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 4, 7, .84); backdrop-filter: blur(8px); }
.welcome-overlay[hidden] { display: none; }
.welcome-panel { position: relative; width: min(440px, 100%); padding: 42px 34px 34px; border: 1px solid var(--line); border-top: 3px solid var(--faction-color); border-radius: 20px; background: #171a21; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); text-align: center; }
.welcome-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.welcome-close:hover, .welcome-close:focus-visible { color: var(--text); background: rgba(255, 255, 255, .08); }
.welcome-mark { position: relative; width: 86px; height: 86px; display: grid; place-items: center; overflow: hidden; margin: 0 auto 22px; border: 2px solid var(--faction-color); border-radius: 16px; background: #242832; color: var(--text); font-size: 1.8rem; font-weight: 800; }
.welcome-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome-kicker { margin: 0; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.welcome-panel h2 { margin: 10px 0 26px; overflow-wrap: anywhere; font-size: clamp(1.45rem, 5vw, 2rem); line-height: 1.35; }
.welcome-enter { width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--text); color: #111318; font: 700 1rem var(--font); cursor: pointer; }
.welcome-enter:hover, .welcome-enter:focus-visible { background: #e6e6e6; }

@media (max-width: 650px) {
  .detail-page { padding-top: 110px; padding-bottom: 75px; }
  .detail-card { margin-top: 16px; border-radius: 18px; }
  .detail-hero { align-items: flex-start; flex-direction: column; gap: 14px; min-height: 0; padding: 22px 18px 24px; }
  .detail-hero::before { width: 100%; }
  .detail-logo { width: 96px; border-radius: 16px; }
  .detail-logo span { font-size: 2.8rem; }
  .detail-metrics { padding: 0 18px; }
  .detail-metric { padding: 14px 8px; }
  .detail-metric span { font-size: .8rem; }
  .detail-metric strong { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .detail-information { padding: 22px 18px 26px; }
  .detail-information dl > div { grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 0; }
  .detail-information dt { font-size: .88rem; }
  .detail-information dd { font-size: .95rem; }
  .gang-announcements { margin-top: 55px; }
  .music-disc { right: 16px; bottom: 16px; width: 58px; height: 58px; }
  .music-disc-center { width: 24px; height: 24px; }
  .welcome-panel { padding: 38px 22px 24px; }
}