/* Animavel v0.2.1 – Anime detail pages. Scoped so Gedankenbrei stays untouched. */
.gbap-detail {
  --ap-bg: var(--bg, #0b0d10);
  --ap-panel: var(--card, #121722);
  --ap-panel2: var(--card2, #0f141e);
  --ap-gold: var(--gold, #caa23a);
  --ap-gold2: var(--gold2, #f3d37a);
  --ap-text: var(--text, #eef2f7);
  --ap-muted: var(--muted, #aab6c5);
  --ap-line: var(--line, rgba(255,255,255,.1));
  --ap-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --ap-radius: var(--radius, 18px);
  color: var(--ap-text);
  padding: 30px 0 45px;
}
.gbap-detail * { box-sizing: border-box; }
.gbap-detail-container { max-width: 1180px; }
.gbap-detail a { text-decoration: none; }
.gbap-detail a:focus-visible { outline: 2px solid var(--ap-gold2); outline-offset: 3px; }
.gbap-detail-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:11px; min-height:26px; margin:0 0 22px; color:var(--ap-muted); font:500 12px/1.5 var(--ap-mono); }
.gbap-detail-breadcrumb a { color:var(--ap-gold2); }
.gbap-detail-breadcrumb a:hover { text-decoration:underline; }
.gbap-detail-breadcrumb > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw; }
.gbap-detail-layout { min-width:0; }
.gbap-detail-hero {
  display:grid; grid-template-columns:clamp(180px, 21vw, 250px) minmax(0,1fr); align-items:stretch;
  gap:32px; padding:27px; margin:0 0 17px; position:relative; isolation:isolate; overflow:hidden;
  border:1px solid rgba(255,255,255,.11); border-radius:23px;
  box-shadow: 0 20px 55px rgba(0,0,0,.22);
  background:radial-gradient(680px 360px at 75% 0%, rgba(202,162,58,.13), transparent 68%),
             radial-gradient(500px 280px at 0% 100%, rgba(68,86,115,.16), transparent 65%),
             linear-gradient(145deg,rgba(21,26,36,.98),rgba(13,17,24,.97));
}
.gbap-detail-hero:before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(120deg,transparent 0 52px,rgba(255,255,255,.014) 52px 53px); opacity:.7; z-index:-1; pointer-events:none; }
.gbap-detail-cover { overflow:hidden; border-radius:14px; background:linear-gradient(150deg,rgba(202,162,58,.32),rgba(28,38,57,.8)); border:1px solid rgba(243,211,122,.2); box-shadow:0 16px 34px rgba(0,0,0,.28); width:100%; min-height:288px; align-self:start; }
.gbap-detail-poster-image { display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
.gbap-detail-cover-fallback { display:grid; place-items:center; min-height:310px; color:var(--ap-gold); font-size:80px; }
.gbap-detail-hero-main { display:flex; flex-direction:column; min-width:0; padding:2px 0; }
.gbap-detail-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:11px; font:700 11px/1.4 var(--ap-mono); letter-spacing:.16em; color:var(--ap-gold2); }
.gbap-detail-kicker-separator { color:rgba(255,255,255,.32); }
.gbap-detail-hero h1 { font-size:clamp(27px,3.4vw,46px); line-height:1.08; letter-spacing:-.036em; margin:14px 0 6px; color:var(--ap-text); overflow-wrap:anywhere; }
.gbap-detail-original { margin:4px 0 14px; color:#a7b2c4; font:500 13px/1.6 var(--ap-mono); overflow-wrap:anywhere; }
.gbap-detail-tags { display:flex; gap:7px; flex-wrap:wrap; margin:15px 0 16px; }
.gbap-detail-tag { border-radius:20px; padding:6px 10px; font:600 11px/1.1 var(--ap-mono); border:1px solid rgba(202,162,58,.28); color:var(--ap-gold2); background:rgba(202,162,58,.09); }
.gbap-detail-teaser { margin:0 0 23px; color:var(--ap-muted); line-height:1.75; font-size:15px; max-width:66ch; }
.gbap-detail-quickstats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:auto; padding-top:18px; border-top:1px solid var(--ap-line); }
.gbap-detail-quickstats > div { min-width:0; display:flex; flex-direction:column; gap:5px; }
.gbap-detail-quickstats small { font:700 10px/1.3 var(--ap-mono); letter-spacing:.12em; color:#8391a5; }
.gbap-detail-quickstats strong { display:block; font-size:14px; color:var(--ap-text); line-height:1.35; overflow-wrap:anywhere; }
.gbap-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(315px, .78fr); align-items:start; gap:17px; }
.gbap-detail-main { min-width:0; display:flex; flex-direction:column; gap:17px; }
.gbap-detail-panel { padding:27px 30px; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:linear-gradient(165deg,rgba(18,23,34,.96),rgba(15,20,30,.96)); box-shadow:0 8px 30px rgba(0,0,0,.13); }
.gbap-detail-section-top { display:flex; align-items:center; gap:12px; margin:0 0 19px; }
.gbap-detail-section-no { border-radius:8px; border:1px solid rgba(202,162,58,.29); background:rgba(202,162,58,.08); font:750 11px var(--ap-mono); color:var(--ap-gold2); min-width:31px; padding:7px 5px; text-align:center; }
.gbap-detail-panel h2 { font-size:21px; margin:0; line-height:1.3; letter-spacing:-.025em; color:var(--ap-text); }
.gbap-detail-panel p { margin:0; color:var(--ap-muted); font-size:14px; line-height:1.8; }
.gbap-detail-facts { margin:0; }
.gbap-detail-facts > div { display:grid; grid-template-columns:118px minmax(0,1fr); align-items:start; gap:14px; padding:12px 0; border-bottom:1px solid var(--ap-line); }
.gbap-detail-facts > div:first-child { padding-top:0; }
.gbap-detail-facts > div:last-child { padding-bottom:0; border:0; }
.gbap-detail-facts dt { color:#8693a5; font:600 11px/1.6 var(--ap-mono); }
.gbap-detail-facts dd { margin:0; color:#e0e6ee; font-size:13px; font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
.gbap-detail-editorial { background:linear-gradient(160deg,rgba(202,162,58,.08),rgba(18,23,34,.92) 63%); }
.gbap-detail-text-link { display:inline-flex; margin-top:17px; color:var(--ap-gold2); font-size:13px; font-weight:750; }
.gbap-detail-text-link:hover { text-decoration:underline; }
.gbap-detail-aside { min-width:0; }
.gbap-detail-streambox { padding:26px 24px; border:1px solid rgba(202,162,58,.26); border-radius:17px; background:radial-gradient(450px 260px at 100% 0%,rgba(202,162,58,.10),transparent 70%),linear-gradient(165deg,rgba(19,24,33,.97),rgba(14,18,25,.98)); box-shadow:0 12px 34px rgba(0,0,0,.18); }
.gbap-detail-aside-eyebrow { font:750 10px var(--ap-mono); letter-spacing:.13em; color:var(--ap-gold2); }
.gbap-detail-streambox h2 { margin:9px 0 8px; font-size:22px; line-height:1.2; color:var(--ap-text); letter-spacing:-.02em; }
.gbap-detail-stream-intro { margin:0 0 21px; font-size:12.5px; line-height:1.65; color:var(--ap-muted); }
.gbap-detail-streamlist { display:flex; flex-direction:column; gap:10px; }
.gbap-detail-stream { border:1px solid rgba(255,255,255,.09); background:rgba(7,10,16,.38); border-radius:13px; padding:15px 16px; }
.gbap-detail-stream-heading { display:flex; gap:10px; align-items:center; font-size:14px; color:#eff3f8; margin-bottom:8px; }
.gbap-detail-provider-icon { display:grid; place-items:center; background:rgba(202,162,58,.17); border:1px solid rgba(202,162,58,.3); width:28px;height:28px; font-size:11px; border-radius:9px; color:var(--ap-gold2); }
.gbap-detail-stream-kind { font:650 10px/1.45 var(--ap-mono); letter-spacing:.06em; color:#8391a5; text-transform:uppercase; margin-bottom:5px; }
.gbap-detail-stream-time { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:700 13px/1.45 var(--ap-mono); color:var(--ap-gold2); }
.gbap-detail-stream-time>span { color:#8d9aac; }
.gbap-detail-stream-minor { display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:7px; font-size:11px; line-height:1.5; color:#9caaba; }
.gbap-detail-stream-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:13px; }
.gbap-detail-stream-actions a { font:750 11px/1.35 var(--ap-mono); }
.gbap-detail-watch { color:#101419!important; padding:9px 11px; background:var(--ap-gold2); border-radius:9px; }
.gbap-detail-source { color:var(--ap-gold2); }
.gbap-detail-source:hover { text-decoration:underline; }
.gbap-detail-disclaimer { color:#8793a2; margin:18px 0 0; padding:13px 0 0; border-top:1px solid var(--ap-line); font-size:11px; line-height:1.7; }
.gbap-detail-related { margin-top:29px; }
.gbap-detail-related-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:15px; }
.gbap-detail-related-head span { color:var(--ap-gold2); font:750 10px/1.5 var(--ap-mono); letter-spacing:.15em; }
.gbap-detail-related-head h2 { margin:4px 0 0; font-size:22px; letter-spacing:-.025em; }
.gbap-detail-related-head > a { font:650 12px/1.5 var(--ap-mono); color:var(--ap-gold2); }
.gbap-detail-related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.gbap-detail-related-card { display:flex; gap:13px; min-width:0; border-radius:14px; padding:10px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(120deg,rgba(21,27,37,.97),rgba(14,19,28,.97)); transition:transform .14s,border-color .14s; }
.gbap-detail-related-card:hover { transform:translateY(-2px); border-color:rgba(202,162,58,.38); }
.gbap-detail-related-card>img,.gbap-detail-related-placeholder { width:79px; min-width:79px; height:112px; display:block; object-fit:cover; border-radius:8px; background:#292b33; }
.gbap-detail-related-placeholder { display:grid; place-items:center; font-size:26px; color:var(--ap-gold); }
.gbap-detail-related-copy { display:flex; flex-direction:column; gap:6px; min-width:0; padding:5px 0; }
.gbap-detail-related-copy strong { font-size:12.5px; color:var(--ap-text); line-height:1.35; overflow-wrap:anywhere; }
.gbap-detail-related-copy small { color:var(--ap-muted); font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.gbap-detail-related-copy>span { color:var(--ap-gold2); font:700 10px/1.5 var(--ap-mono); margin-top:auto; }
@media (max-width:1000px) {
  .gbap-detail-grid { grid-template-columns:minmax(0,1fr) minmax(290px,.78fr); }
  .gbap-detail-hero { gap:24px; }
  .gbap-detail-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .gbap-detail { padding-top:20px; }
  .gbap-detail-hero { grid-template-columns:150px minmax(0,1fr); gap:18px; padding:18px; }
  .gbap-detail-hero h1 { font-size:29px; }
  .gbap-detail-cover { min-height:0; }
  .gbap-detail-teaser { font-size:13px; }
  .gbap-detail-grid { grid-template-columns:1fr; }
  .gbap-detail-main { order:2; }
  .gbap-detail-aside { order:1; }
}
@media (max-width:540px) {
  .gbap-detail { padding:14px 0 30px; }
  .gbap-detail-breadcrumb { margin-bottom:13px; }
  .gbap-detail-hero { grid-template-columns:120px minmax(0,1fr); gap:15px; padding:14px; border-radius:15px; }
  .gbap-detail-hero h1 { font-size:clamp(20px,5.8vw,27px); margin-top:9px; }
  .gbap-detail-kicker { font-size:9px; gap:5px; }
  .gbap-detail-cover { border-radius:9px; }
  .gbap-detail-tags { gap:4px; margin:9px 0; }
  .gbap-detail-tag { font-size:9px; padding:4px 7px; }
  .gbap-detail-original { font-size:10px; margin:4px 0; }
  .gbap-detail-teaser { display:none; }
  .gbap-detail-quickstats { grid-template-columns:1fr; gap:5px; padding-top:9px; }
  .gbap-detail-quickstats>div { display:block; }
  .gbap-detail-quickstats small { display:inline; font-size:9px; margin-right:7px; }
  .gbap-detail-quickstats strong { display:inline; font-size:11px; }
  .gbap-detail-grid { gap:12px; }
  .gbap-detail-main { gap:12px; }
  .gbap-detail-panel,.gbap-detail-streambox { padding:19px 16px; border-radius:13px; }
  .gbap-detail-panel h2,.gbap-detail-streambox h2 { font-size:19px; }
  .gbap-detail-facts>div { grid-template-columns:95px minmax(0,1fr); gap:10px; }
  .gbap-detail-related-head { align-items:start; }
  .gbap-detail-related-head h2 { font-size:19px; }
  .gbap-detail-related-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {.gbap-detail * { transition:none!important; }}


/* Animavel 0.3.0 – a true series synopsis in the hero and a distinct long plot. */
.gbap-detail-hero{grid-template-rows:auto auto minmax(0,1fr);align-items:start}
.gbap-detail-cover{grid-column:1;grid-row:1 / 4}
.gbap-detail-hero-main{grid-column:2;grid-row:1}
.gbap-detail-teaser{grid-column:2;grid-row:2;margin:8px 0 14px;max-width:67ch;line-height:1.7}
.gbap-detail-quickstats{grid-column:2;grid-row:3;align-self:end;margin-top:0;width:100%}
.gbap-detail-story-source{display:inline-flex;margin-top:16px;align-items:center;font:600 11px/1.5 var(--ap-mono);color:var(--ap-gold2)}
.gbap-detail-story-source:hover{text-decoration:underline}
@media(max-width:540px){
  .gbap-detail-hero{grid-template-rows:auto auto auto;row-gap:12px}
  .gbap-detail-cover{grid-column:1;grid-row:1;align-self:start}
  .gbap-detail-hero-main{grid-column:2;grid-row:1}
  .gbap-detail-teaser{display:block;grid-column:1 / -1;grid-row:2;font-size:12px;line-height:1.65;margin:0}
  .gbap-detail-quickstats{grid-column:1 / -1;grid-row:3;margin:0;padding-top:12px}
}