/* Creator Drama page (drama.html). Uses the tokens from style.css. */
.drama{max-width:820px}
@media(min-width:960px){.drama{max-width:1120px}}
.drama h2{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
/* hot strip */
.hot{margin:0 0 26px}
.hot h2{display:flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 10px}
.hot-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(217,83,43,.5);animation:hotp 1.8s infinite}
@keyframes hotp{70%{box-shadow:0 0 0 8px rgba(217,83,43,0)}100%{box-shadow:0 0 0 0 rgba(217,83,43,0)}}
.hot-strip{list-style:none;margin:0 -20px;padding:2px 20px 8px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hot-strip::-webkit-scrollbar{display:none}
.hot-strip li{flex:0 0 min(78%,300px);scroll-snap-align:start}
.hot-strip a{display:block;height:100%;text-decoration:none;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:11px 14px;font-size:14px;line-height:1.4}
.hot-strip a:hover{border-color:#E6D8C6;border-left-color:var(--accent);background:#FFFDF9}
.hot-d{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
/* feud detail panel */
.fd{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;scroll-margin-top:76px;outline:none}
.fd-top{background:var(--t);color:var(--ti);padding:18px 20px 18px}
.fd-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-size:13px;font-weight:500}
.fd-meta .st{margin:0}
.st-live{background:#fff;color:#B42318}.st-live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#E5483B;margin-right:6px;vertical-align:1px}
.st-cool{background:#fff;color:var(--blue-i)}
.fd h2{font-size:clamp(22px,3.4vw,28px);line-height:1.15;margin:0;color:var(--ink)}
.fd-sub{margin:4px 0 14px;font-size:15px}
.fd-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px}
.fd-side{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.fd-av{width:56px;height:56px;border-radius:16px;object-fit:cover;box-shadow:0 0 0 3px #fff;margin-bottom:6px;font-size:20px}
.fd-name{font-weight:700;font-size:15px;color:var(--ink);line-height:1.2}
.fd-h{font-size:12.5px;opacity:.85}
.fd-also{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:12px;background:rgba(255,255,255,.7);padding:3px 8px 3px 3px;border-radius:999px;color:var(--ink)}
.fd-mini{width:20px;height:20px;border-radius:50%;object-fit:cover;font-size:10px}
.fd-x{align-self:center;font-family:var(--serif);font-style:italic;font-weight:600;font-size:20px;opacity:.7;margin-top:-18px}
.fd-body{padding:6px 20px 20px}
.fd-body h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.fd-body h3 .small{text-transform:none;letter-spacing:0;font-weight:400}
.fd-what{margin:0;font-size:15.5px}
/* receipts */
.rcpt{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rc{border-radius:14px;padding:10px 14px 11px;background:#FAF7F2;border-left:4px solid #C9C2B6}
.rc-a{border-left-color:var(--p1)}.rc-b{border-left-color:var(--p2)}
@media(min-width:700px){.rc-a{margin-right:56px}.rc-b{margin-left:56px}.rc-x{margin:0 28px}}
.rc-meta{margin:0;font-size:13px;color:var(--muted)}.rc-meta b{color:var(--ink)}
.rc-ctx{display:block;font-size:13px;color:var(--muted);font-style:italic;margin-top:2px}
.rc blockquote{margin:5px 0 4px;font-size:15px;line-height:1.5}
.rc-link{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
/* poll */
.poll{margin-top:18px;border-radius:18px;background:#1F2430;color:#fff;padding:16px 16px 14px}
.poll-q{margin:0 0 12px;font-family:var(--serif);font-size:19px;font-weight:600;text-align:center}
.poll-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pb{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:0;border-radius:14px;font:600 15px/1.2 Inter,system-ui,sans-serif;color:#fff;cursor:pointer;padding:8px 10px;transition:transform .12s ease,filter .12s ease}
.pb-a{background:var(--p1);box-shadow:0 3px 0 #B9502F}.pb-b{background:var(--p2);box-shadow:0 3px 0 #2F67A6}
.pb:hover{filter:brightness(1.06)}.pb:active{transform:translateY(2px)}
.pb:disabled{opacity:.6;cursor:default}
.pb-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px;box-shadow:0 0 0 2px rgba(255,255,255,.8);font-size:12px}
.poll-note{margin:10px 0 0;text-align:center;font-size:12.5px;color:#B9BDC8}
.poll.voted .poll-btns,.poll.voted .poll-note{display:none}
.poll-res{display:grid;gap:8px}
.pbar{position:relative;height:44px;border-radius:12px;background:#323846;overflow:hidden;display:flex;align-items:center;padding:0 14px;font-weight:600;font-size:15px}
.pbar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:12px;transition:width .7s cubic-bezier(.2,.9,.3,1)}
.pbar-a .pbar-fill{background:var(--p1)}.pbar-b .pbar-fill{background:var(--p2)}
.pbar-lab,.pbar-pct{position:relative}
.pbar-pct{margin-left:auto;font-variant-numeric:tabular-nums;font-size:17px}
.pbar.mine .pbar-lab::after{content:" ✓";}
.poll-you{margin:4px 0 0;text-align:center;font-size:13px;color:#D5D8E0}
/* takes */
.takes{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;margin:30px 0 18px}
.takes h2{margin:0 0 4px;font-size:24px}
.take-form{display:grid;gap:12px;margin-top:14px}
.take-form label{display:grid;gap:5px;font-weight:600;font-size:14px}
.take-form input,.take-form select,.take-form textarea{font:400 16px/1.4 Inter,system-ui,sans-serif;border:1px solid #DDD5C8;border-radius:12px;padding:10px 12px;background:#FFFDF9;color:var(--ink);width:100%}
.take-form textarea{resize:vertical}
.take-form .btn{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.drama-note{background:#F4EFE7;border-radius:16px;padding:12px 16px;font-size:14px}
.drama-note p{margin:0}
@media(max-width:520px){.fd-top{padding:16px 16px}.fd-body{padding:4px 16px 16px}.pb{font-size:14px;flex-direction:column;gap:4px;padding:8px 6px}.poll{padding:14px 12px 12px}}
.poll-res[hidden]{display:none}
/* readable over the site's map background (same halo as the other pages) */
.drama>h1,.drama>.one,.hot h2{text-shadow:0 0 2px #FBF8F3,0 0 6px #FBF8F3,0 0 12px #FBF8F3,0 0 18px #FBF8F3}
.drama>.one{font-weight:500;color:#4A4F5C}
.hot h2{color:var(--ink);font-weight:800}
.hot-strip a,.takes{box-shadow:0 6px 18px rgba(31,36,48,.10)}
@media(min-width:700px){.hot-strip{display:grid;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0}.hot-strip li{flex:none}}

/* ---- list + detail layout (mobile first: stacked list, detail opens inline under the tapped entry) ---- */
.dl{margin:4px 0 0}
.dl-side h2{display:flex;align-items:center;gap:8px;margin:0;font-size:22px;text-shadow:0 0 2px #FBF8F3,0 0 8px #FBF8F3,0 0 16px #FBF8F3}
.dl-n{font:700 12px/1 Inter,system-ui,sans-serif;background:var(--ink);color:#fff;border-radius:999px;padding:4px 8px}
.dl-intro{margin:2px 0 10px;text-shadow:0 0 2px #FBF8F3,0 0 8px #FBF8F3}
.dl-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(31,36,48,.10)}
.dl-li+.dl-li{border-top:1px solid var(--line)}
.dl-item{display:flex;align-items:center;gap:10px;padding:11px 14px;min-height:54px;text-decoration:none;color:var(--ink);border-left:4px solid transparent}
.dl-item:hover{background:#FFFDF9}
.dl-item[aria-current="true"]{background:var(--t);border-left-color:var(--ti)}
.dl-avs{display:flex;flex:0 0 auto}
.dl-av{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff;font-size:11px}
.dl-av+.dl-av{margin-left:-9px}
.dl-av.av-ini{width:28px;height:28px;background:#E9E1D4;color:var(--ink);font-size:11px}
.dl-name{flex:1;min-width:0;font-weight:600;font-size:15px;line-height:1.3}
.dl-d{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--accent)}
.dl-chev{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:-3px 2px 0 2px;transition:transform .15s}
.dl-item[aria-current="true"] .dl-chev{transform:rotate(-135deg);margin-top:4px}
/* inline (mobile) panel */
.dl-li>.fd{border:0;border-top:1px solid var(--line);border-radius:0}
.js .fd{display:none}
.js .fd.on{display:block}
.fd .fd-top{padding:16px 16px}
.fd .fd-body{padding:2px 16px 18px}
.fd h2{font-size:clamp(21px,3vw,26px)}
.dl-main{display:grid;gap:18px}
.js .dl-main:empty{display:none}
@media(min-width:960px){
  .dl{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
  .dl-side{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;padding:2px 2px 8px}
  .dl-item{padding:10px 12px}.dl-name{font-size:14px}
  .dl-chev{display:none}
  .dl-main>.fd{box-shadow:0 6px 18px rgba(31,36,48,.10)}
  .fd .fd-top{padding:20px 24px}.fd .fd-body{padding:4px 24px 24px}
}
.dl-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-line{font-size:13px;font-weight:400;color:#5A5F6B;line-height:1.35}
.dl-item{align-items:flex-start}.dl-avs{margin-top:2px}.dl-d{margin-top:2px}.dl-chev{margin-top:5px}
.dl-item[aria-current="true"] .dl-chev{margin-top:9px}
@media(min-width:960px){.dl-line{font-size:12.5px}}
@media(min-width:960px){.dl{grid-template-columns:350px minmax(0,1fr)}}

/* ---- Oct 30 "slim" pass: names-only side list, quieter detail, small optional Latest strip ---- */
.drama h1{font-size:clamp(24px,3.6vw,34px)}
.hot{margin:0 0 18px}
.hot h2{font-size:11.5px;letter-spacing:.12em;color:var(--muted);font-weight:700;margin:0 0 6px}
.hot-strip{display:block;margin:0;padding:0;overflow:visible}
.hot-strip li{flex:none}
.hot-strip li+li{margin-top:2px}
.hot-strip a{display:inline;background:none;border:0;border-radius:0;padding:0;font-size:13px;line-height:1.45;box-shadow:none;color:#3E4350}
.hot-strip a:hover{background:none;color:var(--accent)}
.hot-d{display:inline;font-size:11px;margin:0 6px 0 0}
@media(min-width:700px){.hot-strip{display:block}}
.dl-side h2{font:700 11.5px/1.2 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;text-shadow:none}
.dl-list{border-radius:12px;box-shadow:none;background:rgba(255,255,255,.92)}
.dl-item,.dl-item[aria-current]{align-items:center;gap:8px;min-height:0;padding:8px 12px;border-left-width:3px}
.dl-item[aria-current="true"]{background:#FBF6EE;border-left-color:var(--ti)}
.dl-name{font-size:13.5px;font-weight:500;color:#3E4350}
.dl-item[aria-current="true"] .dl-name{font-weight:700;color:var(--ink)}
.dl-dot{width:6px;height:6px;border-radius:50%;background:var(--ti);flex:0 0 6px;opacity:.8}
.fd{border-radius:14px}
.fd-top,.fd .fd-top{background:#fff;color:var(--ink);border-top:3px solid var(--ti);padding-bottom:10px}
.fd-av{width:44px;height:44px;border-radius:12px;box-shadow:none;font-size:16px}
.fd-also{background:#F5EFE6}
.fd h2{font-size:clamp(19px,2.6vw,23px)}
.fd-sub{font-size:14px;color:#5A5F6B}
@media(min-width:960px){
  .dl,.dl{grid-template-columns:220px minmax(0,1fr);gap:22px}
  .dl-item{padding:7px 10px}.dl-name{font-size:13px}
  .dl-main>.fd{box-shadow:0 2px 10px rgba(31,36,48,.07)}
}
.fd-meta .st{border:1px solid var(--line)}
.dl-side .fd h2{font:inherit;font-family:var(--serif);font-size:clamp(19px,2.6vw,23px);font-weight:600;line-height:1.15;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.hot{background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
@media(min-width:960px){.dl{grid-template-columns:260px minmax(0,1fr)}.hot{display:inline-block;max-width:100%}}
.dl-side>h2{text-shadow:0 0 2px #FBF8F3,0 0 8px #FBF8F3,0 0 14px #FBF8F3}

/* ---- Oct 30 dark pass: side list + Latest box match the homepage widget (sibling of the timeline strip) ---- */
.drama{--hb-bg:#1F2430;--hb-tx:#E9E4DA;--hb-hd:#FBF8F3;--hb-mu:#9CA1AD;--hb-ln:#4A4F5C;--hb-ac:#F07F5E}
.c-coral{--hd:#F07F5E}.c-blue{--hd:#4A8FD9}.c-amber{--hd:#E7A923}.c-plum{--hd:#B07AD6}
.c-teal{--hd:#2BA39A}.c-sage{--hd:#7DB356}.c-rose{--hd:#E35D9B}.c-sky{--hd:#3BB0D9}
/* Latest box */
.hot{background:var(--hb-bg);border:0;border-radius:12px;padding:11px 16px 12px;box-shadow:0 6px 18px rgba(20,24,34,.22)}
.hot h2{display:flex;align-items:center;gap:7px;color:var(--hb-hd);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-shadow:none;margin:0 0 6px}
.hot h2::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hb-ac)}
.hot-strip a{color:var(--hb-tx)}
.hot-strip a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--hb-ac);text-underline-offset:3px}
.hot-d{color:var(--hb-mu);font-weight:600;letter-spacing:.04em}
/* side list: dark panel, short vertical timeline of ringed dots */
.dl-side>h2{text-shadow:none}
.dl-list{position:relative;background:var(--hb-bg);border:0;border-radius:12px;padding:8px 0;box-shadow:0 6px 18px rgba(20,24,34,.22);overflow:hidden}
.dl-li+.dl-li{border-top:0}
.dl-item,.dl-item[aria-current]{position:relative;gap:8px;padding:7px 14px 7px 30px;border-left:0;color:var(--hb-tx)}
.dl-li:not(:last-child)>.dl-item::after{content:"";position:absolute;left:17px;top:calc(50% + 4px);height:100%;width:1px;background:var(--hb-ln)}
.dl-dot{position:absolute;left:14px;top:50%;width:7px;height:7px;margin-top:-3.5px;opacity:1;background:var(--hd,#9CA1AD);box-shadow:0 0 0 2px var(--hb-bg);z-index:1}
.dl-name{color:var(--hb-tx);font-weight:500}
.dl-item:hover{background:rgba(255,255,255,.05)}
.dl-item:hover .dl-name{color:#fff}
.dl-item[aria-current="true"]{background:rgba(255,255,255,.08)}
.dl-item[aria-current="true"] .dl-name{color:#fff;font-weight:700}
.dl-item[aria-current="true"] .dl-dot{box-shadow:0 0 0 2px var(--hb-bg),0 0 0 3.5px var(--hd)}
.dl-dt{flex:0 0 auto;font-size:10.5px;font-weight:600;color:var(--hb-mu);font-variant-numeric:tabular-nums}
.dl-chev{border-color:var(--hb-mu)}
/* mobile: the open feud card sits inside the dark list as an inset white card */
.dl-li>.fd{margin:2px 10px 10px;border:0;border-radius:12px}
.dl-li>.fd .fd-top{border-top-width:3px}
@media(min-width:960px){.dl-item,.dl-item[aria-current]{padding:6px 12px 6px 30px}}
.dl-li:has(>.fd.on)>.dl-item::after{display:none}
.dl-side>h2{color:var(--ink);font-weight:800;font-size:10.5px;text-shadow:0 0 2px #FBF8F3,0 0 6px #FBF8F3,0 0 12px #FBF8F3}
.dl-dot{top:12px;margin-top:0}
.dl-li:not(:last-child)>.dl-item::after{top:19px;bottom:-12px;height:auto}
@media(min-width:960px){.dl-dot{top:11px}.dl-li:not(:last-child)>.dl-item::after{top:18px;bottom:-11px}}