:root{
--ink:#0B0F17; --p1:#121826; --p2:#192133; --p3:#212B41;
--line:#26324a; --line2:#324365;
--gold:#E8B94A; --gold2:#f5c95d; --goldd:#8a6f27;
--tx:#E9ECF3; --tx2:#95A0B8; --tx3:#5F6B84;
--live:#4ADE80; --red:#E24B4A; --blue:#5B9BD5; --pink:#D4537E;
/* v4 tokens — every previously hardcoded colour now lives here */
--ph1:#26365A; --ph2:#101625; /* image placeholders */
--nav-bg:rgba(8,12,19,.94); /* translucent nav */
--scrim:rgba(11,15,23,.90); /* hero gradient dark end */
--scrim-soft:rgba(11,15,23,.42); /* hero gradient light end */
--on-gold:#12151C; /* text on a gold fill */
--live-line:#2F6B4F; --blue-line:#3E5E9E; --red-line:#6B3A3A; --red-soft:#C97070;
--amber:#E2A34B; --gold-dim:rgba(232,185,74,.10);
--shadow:rgba(0,0,0,.55);
--wa:#25D366;--tg:#2AABEE;--sp:#1DB954;--on-sp:#08130C;--al:#02A9FF;--tmdb:#01B4E4;--kf:#B98CD8;--steam:#66C0F4;--on-steam:#0B1A26;--on-kf:#FFFFFF;}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{background:transparent;color:var(--tx);font-family:'Barlow',system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.bebas{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
input,textarea,select{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1220px;margin:0 auto;padding:0 4vw}
/* nav */
.nav{position:sticky;top:0;z-index:260;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:8px;height:60px;max-width:1220px;margin:0 auto;padding:0 4vw}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin-right:10px}
.brand img{height:26px;width:auto}
.nav-divide{width:1px;height:26px;background:var(--line);margin:0 6px}
.nav-menu{display:flex;gap:2px;flex:1;min-width:0}
.nav-menu a{display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);white-space:nowrap;padding:8px 13px;border-radius:6px;position:relative}
.nav-menu a i{font-size:16px}
.nav-menu a:hover{color:var(--tx);background:var(--p1)}
.nav-menu a.on{color:var(--gold)}
.nav-menu a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;background:var(--gold);border-radius:2px}
.nav-act{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav-play{display:inline-flex;align-items:center;gap:7px;background:rgba(232,185,74,.12);border:1px solid var(--goldd);border-radius:8px;padding:7px 12px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;color:var(--gold);white-space:nowrap}
.nav-play:hover{background:rgba(232,185,74,.2)}
.icobtn{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--tx2);font-size:18px}
.icobtn:hover{background:var(--p1);color:var(--gold)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--ph1),var(--ph2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--gold);flex:0 0 auto;border:1px solid var(--line2);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:var(--on-gold);border-radius:7px;padding:9px 16px;font-weight:600;font-size:14px}
.btn:hover{background:var(--gold2)}
.btn.sec{background:var(--p2);color:var(--tx);border:1px solid var(--line2)}
.btn.sec:hover{background:var(--p3)}
.btn.sm{padding:6px 12px;font-size:13px}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px}
.sec-h h2{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.04em}
.sec-h a{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.sec-h a:hover{color:var(--gold)}
.pill{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:3px;border:1px solid var(--line);color:var(--tx2)}
.pill.gold{border-color:var(--goldd);color:var(--gold)}
.pill.play{border-color:var(--live-line);color:var(--live)}
.skaha-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(232,185,74,.12);border:1px solid var(--goldd);border-radius:4px;padding:3px 8px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--gold)}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block}
main{min-height:70vh;padding:28px 0 40px}
.dash{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
.panel{border:1px solid var(--line);border-radius:10px;background:var(--p1);padding:15px}
.panel h3{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.05em;margin-bottom:12px}
/* post */
.post{border:1px solid var(--line);border-radius:10px;background:var(--p1);padding:15px 16px;margin-bottom:14px}
.post-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.post-h .who{flex:1;min-width:0}
.post-h .who b{font-size:14px}
.post-h .who span{font-size:12px;color:var(--tx3)}
.post-body{font-size:14.5px;line-height:1.6;color:var(--tx);word-wrap:break-word}
.post-body p{margin:0 0 8px}.post-body p:last-child{margin:0}
.post-media{margin-top:11px;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-height:440px}
.post-media img{width:100%;object-fit:cover}
.post-embed{margin-top:11px;border:1px solid var(--line);border-radius:8px;display:flex;gap:12px;align-items:center;padding:10px;background:var(--p2)}
.post-embed .th{width:52px;height:66px;border-radius:5px;flex:0 0 auto;background:linear-gradient(135deg,var(--ph1),var(--ph2));object-fit:cover}
.post-actions{display:flex;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);align-items:center}
.post-actions .count{font-size:12px;color:var(--tx3);flex:1}
.iact{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:6px;color:var(--tx2);font-size:13px}
.iact:hover{background:var(--p2);color:var(--gold)}
.iact.on{color:var(--pink)}
.iact i{font-size:17px}
/* composer */
.composer{background:var(--p2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:18px}
.composer textarea{width:100%;background:var(--p1);border:1px solid var(--line);border-radius:8px;padding:11px 13px;color:var(--tx);font-size:14.5px;resize:vertical;min-height:70px}
.composer textarea:focus{outline:none;border-color:var(--gold)}
.composer-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.composer input[type=url],.composer input[type=number],.composer select{background:var(--p1);border:1px solid var(--line);border-radius:7px;padding:8px 11px;color:var(--tx);font-size:13px}
.composer input[type=url]{flex:1;min-width:160px}
/* game cards */
.grid{display:grid;gap:16px}
.g-cat{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.gcard{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--ph1),var(--ph2))}
.gcard img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gcard:hover{border-color:var(--goldd)}
.gcard .meta{position:relative;z-index:2;width:100%;padding:10px;background:linear-gradient(to top,var(--scrim),transparent)}
.gcard .meta b{display:block;font-size:14px;line-height:1.15}
.gcard .meta span{font-size:11px;color:var(--tx2)}
.gcard .corner{position:absolute;top:7px;right:7px;z-index:3}
.row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row .gcard{flex:0 0 150px}
/* forum */
.thread{display:flex;gap:13px;padding:14px 4px;border-bottom:1px solid var(--line)}
.thread:hover{background:var(--p1)}
.thread .ic{width:40px;height:40px;border-radius:8px;background:var(--p2);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px;flex:0 0 auto}
.thread .main{flex:1;min-width:0}
.thread .title{font-size:15px;font-weight:500;margin-bottom:4px}
.thread .sub{font-size:12.5px;color:var(--tx3);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.thread .stat{flex:0 0 auto;text-align:right;color:var(--tx3);font-size:12px}
.thread .stat b{display:block;font-size:16px;color:var(--tx);font-family:'Bebas Neue',sans-serif}
.tag{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.04em;padding:2px 7px;border-radius:3px;background:rgba(232,185,74,.15);color:var(--gold)}
.sidebar{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.reply{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.reply .body{flex:1;min-width:0}
.reply .rh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.reply .rh b{font-size:13.5px}.reply .rh span{font-size:12px;color:var(--tx3)}
.reply .rtext{font-size:14px;line-height:1.6}
/* game hero */
.ghero{position:relative;min-height:300px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}
.ghero-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--ph1),var(--ph2));background-size:cover;background-position:center;filter:saturate(.9)}
.ghero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink),var(--scrim-soft) 60%),linear-gradient(to right,var(--scrim),transparent 70%)}
.ghero-in{position:relative;z-index:2;display:flex;gap:20px;align-items:flex-end;width:100%;max-width:1220px;margin:0 auto;padding:26px 4vw;flex-wrap:wrap}
.gcover{width:132px;aspect-ratio:3/4;border-radius:8px;background:linear-gradient(135deg,var(--ph1),var(--ph2));border:1px solid var(--line2);flex:0 0 auto;object-fit:cover}
.gtitle{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:.02em;line-height:1}
.grating{display:flex;gap:20px;margin:14px 0}
.grating .n{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--gold);line-height:1}
.grating .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:600}
.play-panel{border:1px solid var(--goldd);border-radius:9px;background:linear-gradient(100deg,rgba(232,185,74,.1),rgba(232,185,74,.02) 60%);padding:16px}
.play-panel .k{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--gold);letter-spacing:.04em}
.infolist div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.infolist div span:first-child{color:var(--tx3);flex:0 0 auto;white-space:nowrap}
/* value column: takes the remaining width, wraps cleanly, never overlaps the
label. Long publisher/developer lists clamp to 3 lines with the full text in
the title attribute. */
.infolist div span:last-child{flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* profile */
.pbanner{height:170px;background:linear-gradient(120deg,var(--ph1),var(--ph2) 60%,var(--ph2));background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.phead{display:flex;gap:18px;align-items:flex-end;margin-top:-44px;position:relative;z-index:2;flex-wrap:wrap}
.pavatar{width:92px;height:92px;border-radius:16px;background:linear-gradient(135deg,var(--ph1),var(--ph2));border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--gold);overflow:hidden}
.pavatar img{width:100%;height:100%;object-fit:cover}
.pstats{display:flex;gap:24px;margin:14px 0}
.pstats .n{font-family:'Bebas Neue',sans-serif;font-size:22px;line-height:1}
.pstats .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:600}
.ptabs,.gtabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:22px 0}
.ptabs a,.gtabs span{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);padding-bottom:10px}
.ptabs a.on,.gtabs span.on{color:var(--tx);box-shadow:inset 0 -2px 0 var(--gold)}
/* forms */
.formcard{max-width:560px;margin:0 auto;background:var(--p1);border:1px solid var(--line);border-radius:12px;padding:26px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px;font-family:'Barlow Condensed',sans-serif;font-weight:600}
.field input,.field select,.field textarea{width:100%;background:var(--p2);border:1px solid var(--line);border-radius:7px;padding:10px 12px;color:var(--tx);font-size:14px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.notice{background:rgba(239,159,39,.08);border:1px solid var(--goldd);border-radius:8px;padding:11px 14px;font-size:13px;color:var(--gold2);display:flex;gap:9px;align-items:flex-start;margin-bottom:14px}
.err{background:rgba(226,75,74,.1);border:1px solid var(--red-line);border-radius:7px;padding:10px 13px;font-size:13.5px;color:var(--red-soft);margin-bottom:14px}
/* footer */
footer.ft{border-top:1px solid var(--line);background:var(--ph2);margin-top:44px}
.ft-in{max-width:1220px;margin:0 auto;padding:32px 4vw 22px;display:flex;gap:44px;flex-wrap:wrap}
.ft-brand{flex:1 1 300px}
.ft-brand img{height:24px;margin-bottom:10px}
.ft-brand p{color:var(--tx3);font-size:13px;line-height:1.6;margin-bottom:12px;max-width:44ch}
.ft-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);margin-bottom:11px}
.ft-col a{display:block;font-size:13.5px;color:var(--tx2);margin-bottom:8px}
.ft-col a:hover{color:var(--gold)}
.ft-legal{border-top:1px solid var(--line)}
.ft-legal-in{max-width:1220px;margin:0 auto;padding:15px 4vw;font-size:11.5px;color:var(--tx3);display:flex;gap:16px;flex-wrap:wrap}
.empty{text-align:center;color:var(--tx3);padding:40px 20px;font-size:14px}
@media(max-width:900px){
.dash,.sidebar{grid-template-columns:1fr}
.nav-menu span.lbl,.nav-play{display:none}
.nav-menu a{padding:8px 10px}
}
/* ============================================================
LIGHT THEME — applied when
Clean, high-contrast, keeps gold accent (nudged for legibility).
============================================================ */
html[data-theme="light"]{
--ink:#F6F7F9; --p1:#FFFFFF; --p2:#F1F3F7; --p3:#E6EAF1;
--line:#E3E7EF; --line2:#D2D9E6;
--gold:#C9992E; --gold2:#b8892a; --goldd:#e6d09a;
--tx:#1A2030; --tx2:#54607A; --tx3:#8791A8;
--live:#17864A; --red:#C4302F; --blue:#2F6DA8; --pink:#B33660;
--ph1:#D6DEEB; --ph2:#EDF0F5;
--nav-bg:rgba(255,255,255,.94);
--scrim:rgba(20,26,38,.86);
--scrim-soft:rgba(20,26,38,.32);
--on-gold:#FFFFFF;
--live-line:#8FCBAA; --blue-line:#9DBEDC; --red-line:#E3A9A8; --red-soft:#B5423F;
--amber:#B87A18; --gold-dim:rgba(184,134,15,.10);
--shadow:rgba(24,32,48,.16);
--wa:#25D366;--tg:#2AABEE;--sp:#1DB954;--on-sp:#08130C;--al:#02A9FF;--tmdb:#01B4E4;--kf:#B98CD8;--steam:#66C0F4;--on-steam:#0B1A26;--on-kf:#FFFFFF;}
html[data-theme="light"] body{color:var(--tx)}
html[data-theme="light"] .nav{background:rgba(255,255,255,.9)}
html[data-theme="light"] .ghero-bg::after{background:linear-gradient(to top,var(--ink),var(--scrim-soft) 60%),linear-gradient(to right,var(--scrim),transparent 70%)}
html[data-theme="light"] .avatar,html[data-theme="light"] .pavatar{background:linear-gradient(135deg,var(--ph1),var(--p2))}
html[data-theme="light"] .gcard,html[data-theme="light"] .thumb,html[data-theme="light"] .post-embed .th{background:linear-gradient(135deg,var(--ph1),var(--p2))}
html[data-theme="light"] .btn{color:var(--on-gold)}
html[data-theme="light"] footer.ft{background:var(--p2)}
html[data-theme="light"] .pbanner{background:linear-gradient(120deg,var(--ph1),var(--ph1) 60%,var(--ph2))}
/* theme toggle button */
.theme-toggle{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--tx2);font-size:18px;flex:0 0 auto}
.theme-toggle:hover{background:var(--p1);color:var(--gold)}
.theme-toggle .ti-moon{display:none}
html[data-theme="light"] .theme-toggle .ti-sun{display:none}
html[data-theme="light"] .theme-toggle .ti-moon{display:inline-block}
/* ============================================================
MOBILE — bottom tab bar, compact nav, stacked footer
============================================================ */
.tabbar{display:none}
@media(max-width:760px){
.nav-in{gap:8px;height:54px}
.nav-menu{display:none} /* replaced by bottom tab bar */
.nav-play{display:none}
.brand img{height:23px}
main{padding-bottom:78px} /* clear the fixed tab bar */
.tabbar{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;
background:var(--nav-bg);backdrop-filter:blur(12px);
border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
}
html[data-theme="light"] .tabbar{background:rgba(255,255,255,.97)}
.tabbar a{
flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:9px 4px 8px;color:var(--tx3);font-size:10px;font-weight:600;
letter-spacing:.04em;text-transform:uppercase;
}
.tabbar a i{font-size:21px}
.tabbar a.on{color:var(--gold)}
.ft-in{gap:22px;padding:26px 5vw 20px}
.ft-brand{flex:1 1 100%}
.ft-col{flex:1 1 40%}
.ft-legal-in{gap:8px;font-size:11px}
.dash,.sidebar{gap:20px}
.phead{gap:12px}
.pstats{gap:16px;flex-wrap:wrap}
.gtitle{font-size:32px}
.ghero-in{padding:20px 5vw}
.composer-row{gap:6px}
.composer input[type=url]{min-width:120px}
}
@media(max-width:420px){
.tabbar a{font-size:9px}
.ft-col{flex:1 1 100%}
}
/* ============================================================
GAME PAGE — compact, clean smartphone layout
Scoped to <=760px so desktop is untouched.
============================================================ */
@media(max-width:760px){
/* Hero: shorter, cover and title side by side, tighter */
.ghero{min-height:0}
.ghero-in{flex-wrap:nowrap;align-items:flex-end;gap:14px;padding:16px 5vw 18px}
.gcover{width:84px;border-radius:7px}
.gtitle{font-size:24px;line-height:1.02}
.ghero-in .skaha-tag{font-size:10px;padding:2px 7px}
.ghero-in .pill{font-size:10px;padding:2px 7px}
/* meta line under title: smaller, wrap tidy */
.ghero-in > div > div[style*="font-size:14px"]{font-size:12px !important;margin-top:5px !important}
/* Action buttons: full-width stacked, thumb-friendly */
.ghero-in > div > div[style*="margin-top:16px"]{
margin-top:12px !important;gap:8px !important;flex-direction:column;width:100%;
}
.ghero-in .btn{width:100%;justify-content:center;padding:11px}
/* Body: stats become a clean 2x2 / row, tighter type */
.game-mobile-pad{margin-top:14px !important}
.grating{gap:0;margin:0 0 16px;border:1px solid var(--line);border-radius:10px;background:var(--p1);overflow:hidden}
.grating > div{flex:1;padding:11px 6px;text-align:center;border-right:1px solid var(--line)}
.grating > div:last-child{border-right:0}
.grating .n{font-size:19px}
.grating .l{font-size:9.5px}
/* Summary: readable, not cramped */
.game-summary{font-size:13.5px !important;line-height:1.65 !important;margin-bottom:18px !important}
/* Info panel + play panel come first-class, full width */
.play-panel{padding:14px}
.play-panel .k{font-size:17px}
.infolist div{font-size:12.5px;padding:8px 0}
/* Section headings a touch smaller on the game page */
.sidebar .sec-h h2{font-size:20px}
}
@media(max-width:420px){
.gcover{width:72px}
.gtitle{font-size:21px}
.grating .n{font-size:17px}
}
/* ============================================================
BACKLOG TIMELINE (career-style play record)
============================================================ */
.bl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:20px}
.bl-stat{background:var(--p2);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.bl-stat .n{font-family:'Bebas Neue',sans-serif;font-size:27px;line-height:1}
.bl-stat .n small{font-size:14px;color:var(--tx3)}
.bl-stat .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:600;margin-top:4px}
.bl-stat.gold .n{color:var(--gold)}
.bl-stat.live .n{color:var(--live)}
.timeline{position:relative;padding-left:32px;margin-top:8px}
.timeline::before{content:"";position:absolute;left:9px;top:10px;bottom:16px;width:2px;background:linear-gradient(var(--gold),var(--line) 30%)}
.tl-item{position:relative;margin-bottom:16px}
.tl-item::before{content:"";position:absolute;left:-27px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--line2);border:3px solid var(--ink);z-index:2}
.tl-item.finished::before{background:var(--gold)}
.tl-item.playing::before{background:var(--live);animation:pulse 2s infinite}
.tl-item.dropped::before{background:var(--tx3)}
.tl-item.plat::before{background:var(--blue)}
.tl-date{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.tl-card{display:flex;gap:13px;border:1px solid var(--line);border-radius:11px;background:var(--p1);padding:12px}
.tl-card:hover{border-color:var(--line2)}
.tl-item.playing .tl-card{border-color:var(--live-line);background:linear-gradient(100deg,rgba(74,222,128,.06),transparent 60%)}
.tl-cover{width:52px;height:69px;border-radius:6px;flex:0 0 auto;object-fit:cover;background:linear-gradient(135deg,var(--ph1),var(--ph2))}
.tl-main{flex:1;min-width:0}
.tl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.tl-title{font-size:15px;font-weight:600}
.status{display:inline-flex;align-items:center;gap:5px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:4px}
.status.playing{background:rgba(74,222,128,.15);color:var(--live)}
.status.finished{background:rgba(232,185,74,.15);color:var(--gold)}
.status.plat{background:rgba(91,155,213,.15);color:var(--blue)}
.status.want{background:var(--p3);color:var(--tx2)}
.status.dropped{background:rgba(148,160,184,.13);color:var(--tx2)}
.verified{display:inline-flex;align-items:center;gap:5px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.03em;color:var(--live);background:rgba(74,222,128,.1);border:1px solid var(--live-line);border-radius:4px;padding:2px 7px}
.tl-sub{font-size:12.5px;color:var(--tx3);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.tl-note{font-size:13.5px;color:var(--tx2);font-style:italic;border-left:2px solid var(--line2);padding-left:9px;margin-top:6px}
.tl-cta{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:rgba(232,185,74,.1);border:1px solid var(--goldd);border-radius:6px;padding:5px 10px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;color:var(--gold)}
.star{color:var(--gold);font-size:13px;font-weight:600}
.bl-edit{margin-top:9px}
.bl-edit summary{font-size:12px;color:var(--tx3);cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.bl-edit summary:hover{color:var(--gold)}
.bl-edit-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.bl-edit select,.bl-edit input{background:var(--p2);border:1px solid var(--line);border-radius:6px;padding:7px 10px;color:var(--tx);font-size:13px;font-family:inherit}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 0;font-size:12px;color:var(--tx3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.ldot{width:10px;height:10px;border-radius:50%;display:inline-block}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
/* backlog "add" control on game page */
.bl-add{border:1px solid var(--line);border-radius:9px;background:var(--p2);padding:12px;margin-bottom:16px}
.bl-add .want-count{font-size:12.5px;color:var(--tx3);margin-bottom:8px}
.bl-add .want-count b{color:var(--gold)}
.bl-add-row{display:flex;gap:7px;flex-wrap:wrap}
.bl-add select,.bl-add button{font-family:inherit}
.bl-add select{flex:1;min-width:130px;background:var(--p1);border:1px solid var(--line);border-radius:7px;padding:8px 11px;color:var(--tx);font-size:13.5px}
/* ============================================================
NOW-PLAYING STRIP (skaha-gated)
============================================================ */
.np-wrap{border:1px solid var(--live-line);border-radius:11px;background:linear-gradient(100deg,rgba(74,222,128,.07),transparent 60%);padding:13px;margin-bottom:18px}
.np-wrap h3{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.04em;color:var(--live);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.np-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.np-strip::-webkit-scrollbar{display:none}
.np{flex:0 0 auto;width:132px;border:1px solid var(--line);border-radius:10px;background:var(--p1);padding:11px;text-align:center}
.np .av{width:40px;height:40px;border-radius:50%;margin:0 auto 7px;background:linear-gradient(135deg,var(--ph1),var(--ph2));display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:13px;font-weight:600;position:relative}
.np .av .lv{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--live);border:2px solid var(--p1)}
.np b{font-size:12.5px;display:block}
.np span{font-size:11px;color:var(--tx3)}
/* ============================================================
EVENTS
============================================================ */
.event{display:flex;gap:14px;border:1px solid var(--line);border-radius:11px;background:var(--p1);padding:13px;align-items:center;margin-bottom:11px}
.event .cal{width:54px;height:60px;border-radius:8px;background:var(--p2);border:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto}
.event .cal .m{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.event .cal .d{font-family:'Bebas Neue',sans-serif;font-size:26px;line-height:1}
.event .ev-main{flex:1;min-width:0}
.event b{font-size:14.5px}
.event .meta{font-size:12.5px;color:var(--tx3);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.event .rsvp{flex:0 0 auto}
.ev-kind{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:rgba(232,185,74,.13);color:var(--gold);margin-bottom:4px}
/* ============================================================
MOMENTS (skaha-gated, story-style)
============================================================ */
.moments{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.moments::-webkit-scrollbar{display:none}
.moment{flex:0 0 auto;width:150px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(160deg,var(--ph1),var(--ph2));border:1px solid var(--line)}
.moment .grad{position:absolute;inset:0;background:linear-gradient(to top,var(--scrim),transparent 55%)}
.moment .bot{position:absolute;bottom:0;left:0;right:0;padding:11px;z-index:2}
.moment .k{font-family:'Bebas Neue',sans-serif;font-size:12px;color:var(--gold);letter-spacing:.05em}
.moment .big{font-family:'Bebas Neue',sans-serif;font-size:22px;line-height:.95;margin:2px 0}
.moment .gm{font-size:11px;color:var(--line2)}
/* ============================================================
QUOTE-A-GAME post embed
============================================================ */
.qgame{display:flex;gap:11px;border:1px solid var(--line);border-radius:9px;background:var(--p2);padding:9px;margin-top:9px}
.qgame img{width:44px;height:58px;border-radius:5px;flex:0 0 auto;object-fit:cover;background:var(--ph1)}
.qgame .qg-t{font-size:14px;font-weight:600;margin-top:4px}
.qgame .qg-s{font-size:12px;color:var(--tx3)}
/* ============================================================
NAV: search + bell badge
============================================================ */
.nav-search{display:flex;align-items:center;gap:7px;background:var(--p2);border:1px solid var(--line);border-radius:9px;padding:0 11px;height:36px;flex:0 1 230px;margin:0 4px}
.nav-search i{color:var(--tx3);font-size:16px}
.nav-search input{border:0;background:transparent;color:var(--tx);font-size:13.5px;width:100%;outline:none}
.nav-search:focus-within{border-color:var(--gold)}
.bell{position:relative}
.bell .badge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Barlow',sans-serif}
/* ============================================================
POST ACTION BAR (clean, compact)
============================================================ */
.post-actions{display:flex;gap:2px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);align-items:center}
.act{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:7px;color:var(--tx3);font-size:13px;background:none;border:0;cursor:pointer;font-family:inherit}
.act:hover{background:var(--p2);color:var(--tx)}
.act i{font-size:17px}
.act span{font-size:12.5px;font-variant-numeric:tabular-nums}
.act.on-like{color:var(--pink)}.act.on-like:hover{background:rgba(212,83,126,.1)}
.act.on-repost{color:var(--live)}.act.on-repost:hover{background:rgba(74,222,128,.1)}
.act.on-bm{color:var(--gold)}.act.on-bm:hover{background:rgba(232,185,74,.1)}
.act.muted{color:var(--tx3);cursor:default}
.act-menu{position:relative;margin-left:auto}
.act-pop{position:absolute;right:0;bottom:calc(100% + 4px);background:var(--p2);border:1px solid var(--line2);border-radius:9px;padding:5px;min-width:150px;box-shadow:0 8px 28px rgba(0,0,0,.4);display:none;z-index:20}
.act-menu:hover .act-pop,.act-menu:focus-within .act-pop{display:block}
.act-pop button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:6px;color:var(--tx2);font-size:13px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.act-pop button:hover{background:var(--p3);color:var(--red)}
.game-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(232,185,74,.1);border:1px solid var(--goldd);border-radius:6px;padding:3px 9px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;color:var(--gold);white-space:nowrap}
.game-pill i{font-size:12px}.game-pill.sm{padding:2px 7px;font-size:10.5px}
.rating-inline{color:var(--gold)}
.mention{color:var(--gold);font-weight:600}.mention:hover{text-decoration:underline}
.hashtag{color:var(--blue);font-weight:500}.hashtag:hover{text-decoration:underline}
/* ============================================================
NOTIFICATIONS
============================================================ */
.avatar.sm{width:30px;height:30px;font-size:11px}
/* ============================================================
SEARCH results + feed tabs + tag head
============================================================ */
.search-big{display:flex;align-items:center;gap:10px;background:var(--p1);border:1px solid var(--line2);border-radius:12px;padding:0 16px;height:52px;margin-top:6px}
.search-big i{color:var(--tx3);font-size:21px}
.search-big input{border:0;background:transparent;color:var(--tx);font-size:16px;width:100%;outline:none}
.s-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:10px}
.s-row:hover{background:var(--p1)}
.s-row b{font-size:14.5px}
.s-sub{font-size:12.5px;color:var(--tx3)}
.s-cover{width:38px;height:50px;border-radius:5px;flex:0 0 auto;background:linear-gradient(135deg,var(--ph1),var(--ph2));overflow:hidden}
.s-cover img{width:100%;height:100%;object-fit:cover}
.mini-skaha{display:inline-flex;align-items:center;color:var(--gold);font-size:12px;vertical-align:middle}
.feed-tabs{display:flex;gap:4px;background:var(--p1);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:16px}
.feed-tabs a{flex:1;text-align:center;padding:8px;border-radius:7px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3)}
.feed-tabs a.on{background:var(--gold);color:var(--on-gold)}
.tag-head{display:flex;align-items:center;gap:10px;margin:6px 0 2px}
.tag-hash{font-family:'Bebas Neue',sans-serif;font-size:38px;color:var(--blue);line-height:1}
.tag-head h1{font-size:34px}
@media(max-width:760px){
.nav-search{display:none}
}
/* ============================================================
BACKLOG v2 — clean, compact timeline (desktop + mobile)
============================================================ */
.bl2-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.bl2-chip{background:var(--p2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;color:var(--tx2)}
.bl2-chip b{color:var(--tx);font-family:'Bebas Neue',sans-serif;font-size:17px;margin-right:2px;letter-spacing:.02em}
.bl2-chip.gold{border-color:var(--goldd);color:var(--gold)}
.bl2-chip.gold b{color:var(--gold)}
.bl2-chip.gold i{font-size:13px;vertical-align:middle}
.bl2-timeline{position:relative;margin-top:4px}
.bl2-timeline::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--line)}
.bl2-item{position:relative;display:flex;gap:14px;padding-bottom:14px}
.bl2-item:last-child{padding-bottom:0}
.bl2-node{width:32px;height:32px;border-radius:50%;flex:0 0 auto;background:var(--p2);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--tx3);position:relative;z-index:2}
.bl2-item.finished .bl2-node{border-color:var(--gold);color:var(--gold);background:rgba(232,185,74,.1)}
.bl2-item.plat .bl2-node{border-color:var(--blue);color:var(--blue);background:rgba(91,155,213,.1)}
.bl2-item.playing .bl2-node{border-color:var(--live);color:var(--live);background:rgba(74,222,128,.12)}
.bl2-item.dropped .bl2-node{color:var(--tx3)}
.bl2-card{flex:1;min-width:0;display:flex;gap:12px;background:var(--p1);border:1px solid var(--line);border-radius:11px;padding:11px}
.bl2-item.playing .bl2-card{border-color:var(--live-line)}
.bl2-card:hover{border-color:var(--line2)}
.bl2-cover{width:44px;height:59px;border-radius:6px;flex:0 0 auto;object-fit:cover;background:linear-gradient(135deg,var(--ph1),var(--ph2))}
.bl2-main{flex:1;min-width:0}
.bl2-row1{display:flex;align-items:center;gap:8px;justify-content:space-between}
.bl2-title{font-size:14.5px;font-weight:600;line-height:1.2}
.bl2-status{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:4px;white-space:nowrap;flex:0 0 auto}
.bl2-status.want{background:var(--p3);color:var(--tx2)}
.bl2-status.playing{background:rgba(74,222,128,.14);color:var(--live)}
.bl2-status.finished{background:rgba(232,185,74,.14);color:var(--gold)}
.bl2-status.plat{background:rgba(91,155,213,.14);color:var(--blue)}
.bl2-status.dropped{background:rgba(148,160,184,.12);color:var(--tx2)}
.bl2-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--tx3);margin-top:5px}
.bl2-live{display:inline-flex;align-items:center;gap:5px;color:var(--live)}
.bl2-live .d{width:6px;height:6px;border-radius:50%;background:var(--live);display:inline-block;animation:pulse 2s infinite}
.bl2-verif{display:inline-flex;align-items:center;gap:4px;color:var(--gold)}.bl2-verif i{font-size:12px}
.bl2-star{color:var(--gold);font-weight:600}
.bl2-note{font-size:13px;color:var(--tx2);margin-top:7px;line-height:1.5}
.bl2-cta{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:rgba(232,185,74,.1);border:1px solid var(--goldd);border-radius:6px;padding:5px 10px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;color:var(--gold)}
.bl2-cta i{font-size:13px}
.bl2-edit{margin-top:9px}
.bl2-edit summary{font-size:11.5px;color:var(--tx3);cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;list-style:none}
.bl2-edit summary::-webkit-details-marker{display:none}
.bl2-edit summary:hover{color:var(--gold)}
.bl2-edit form{margin-top:8px;display:flex;flex-direction:column;gap:7px}
.bl2-edit-row{display:flex;gap:7px;align-items:center}
.bl2-edit select,.bl2-edit input{background:var(--p2);border:1px solid var(--line);border-radius:6px;padding:7px 9px;color:var(--tx);font-size:13px;font-family:inherit}
.bl2-edit select{flex:1}
.bl2-edit input[type=number]{width:64px;text-align:center}
.bl2-edit input[name=note]{width:100%}
@media(max-width:600px){
.bl2-timeline::before{left:13px}
.bl2-node{width:28px;height:28px;font-size:13px}
.bl2-item{gap:10px}
.bl2-card{padding:9px;gap:10px}
.bl2-cover{width:38px;height:51px}
.bl2-row1{flex-wrap:wrap;gap:5px}
.bl2-title{font-size:14px}
.bl2-summary{gap:6px}
.bl2-chip{padding:6px 10px;font-size:12px}
}
/* ============================================================
REDESIGN v3 — compact density + feed rail + hero embeds
Appended layer: later rules win. Revert = delete this block
and restore the previous postcard/feed/game/profile/backlog
views from the code backup.
============================================================ */
/* ---- base density ---- */
body{font-size:14px;line-height:1.5}
main{padding:20px 0 40px}
/* ---- nav polish (markup unchanged) ---- */
.nav-in{height:54px}
.nav-search input{border-radius:99px;transition:border-color .15s}
.nav-search input:focus{border-color:var(--goldd)}
.icobtn{transition:background .12s,color .12s}
.bell .badge{animation:ewpulse 2s infinite}
@keyframes ewpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.bell .badge{animation:none}}
/* ---- post card: compact ---- */
.post{padding:11px 13px;margin-bottom:8px;border-radius:9px;transition:border-color .12s}
.post:hover{border-color:var(--line2)}
.post-h{gap:9px;margin-bottom:7px}
.post-h .avatar{width:30px;height:30px;font-size:11px}
.post-h .who{display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden}
.post-h .who b{font-size:13.5px}
.post-h .who b a:hover{color:var(--gold)}
.post-h .who span{font-size:12px;overflow:hidden;text-overflow:ellipsis}
.post-body{font-size:14px;line-height:1.55}
.post-media{margin-top:9px;max-height:380px;border-radius:6px}
.rating-inline{color:var(--gold);font-weight:700}
.game-pill{display:inline-flex;align-items:center;gap:5px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.04em;color:var(--gold);background:rgba(232,185,74,.10);border:1px solid rgba(232,185,74,.25);border-radius:4px;padding:2px 8px;flex:0 0 auto;transition:background .12s}
.game-pill:hover{background:rgba(232,185,74,.18)}
/* qgame: hero embed */
.qgame{margin-top:9px;display:flex;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:6px;overflow:hidden;background:var(--p2);transition:background .12s,border-color .12s}
.qgame:hover{background:var(--p3);border-color:var(--line2);border-left-color:var(--gold2)}
.qgame .cover{width:64px;height:84px;flex:0 0 auto;object-fit:cover;background:linear-gradient(160deg,var(--ph1),var(--ph2));display:block}
.qgame .qg-body{padding:9px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.qgame .qg-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.qgame .qg-t{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.03em;line-height:1.1;margin:2px 0;color:var(--tx)}
.qgame .qg-s{font-size:12px;color:var(--tx2)}
/* actions */
.post-actions{gap:2px;margin-top:8px;padding-top:0;border-top:0;align-items:center}
.post-actions .push{flex:1}
.iact{display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;color:var(--tx3);font-size:12.5px;transition:background .12s,color .12s}
.iact i{font-size:16px}
.iact:hover{background:var(--p2);color:var(--gold)}
.iact.on-like{color:var(--pink)}
.iact.on-like i{animation:ewpop .25s}
.iact.on-repost{color:var(--live)}
.iact.on-bm{color:var(--gold)}
@keyframes ewpop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.iact.on-like i{animation:none}}
/* ---- composer c3: collapsed until focus ---- */
.composer.c3{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--p1)}
.composer.c3 .avatar{width:32px;height:32px}
.composer.c3 .field{flex:1;min-width:0}
.composer.c3 textarea{background:none;border:0;padding:5px 0;min-height:0;height:30px;resize:none;font-size:14px;transition:height .15s}
.composer.c3 textarea:focus{height:76px;border:0;outline:none}
.composer.c3 .tools{display:none;align-items:center;gap:8px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.composer.c3:focus-within .tools{display:flex}
.composer.c3 .tools input[type=url]{flex:1;min-width:120px}
.composer.c3 .tools .spacer{flex:0}
/* ---- feed layout: mobile = block (unchanged), desktop = column + rail ---- */
.feed-grid{max-width:620px;margin:0 auto}
.feed-col{min-width:0}
.rail{display:none}
.feed-tabs{display:flex;gap:2px;margin:12px 0 10px;border-bottom:1px solid var(--line)}
.feed-tabs a{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);padding:8px 14px;position:relative}
.feed-tabs a.on{color:var(--gold)}
.feed-tabs a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--gold)}
.feed-tabs a:hover{color:var(--tx)}
@media(min-width:1000px){
.feed-grid{max-width:1180px;display:grid;grid-template-columns:600px minmax(260px,300px);gap:24px;justify-content:center;align-items:start}
.rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:74px}
}
/* rail content */
.trend{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:13.5px}
.trend .t-tag{color:var(--blue);font-weight:600;transition:color .12s}
.trend:hover .t-tag{color:var(--gold)}
.trend .t-n{margin-left:auto;font-size:11.5px;color:var(--tx3)}
.demand{display:flex;align-items:center;gap:10px;padding:6px 0}
.demand img,.demand-ph{width:34px;height:44px;border-radius:4px;object-fit:cover;background:linear-gradient(160deg,var(--ph1),var(--ph2));flex:0 0 auto;display:block}
.demand .d-t{font-size:13px;font-weight:600;line-height:1.2}
.demand .d-s{font-size:11.5px;color:var(--tx3)}
.demand .d-s b{color:var(--gold);font-weight:600}
.demand:hover .d-t{color:var(--gold)}
/* ---- game hero g3 ---- */
.ghero.g3{display:block;min-height:0;border-bottom:1px solid var(--line)}
.ghero.g3 .ghero-in{align-items:flex-end;padding:26px 4vw 20px}
.ghero.g3 .g-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.ghero.g3 .gtitle{margin:4px 0 8px;font-size:44px}
.g-sub{font-size:13px;color:var(--tx2);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.g-sub b{color:var(--gold);font-weight:600}
.g-sub i{font-size:14px;vertical-align:-2px}
.g-actions{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap}
.bl-set{display:flex;gap:6px;flex-wrap:wrap}
.bl-chip{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:99px;border:1px solid var(--line2);color:var(--tx2);background:var(--scrim-soft);transition:border-color .12s,color .12s,background .12s}
.bl-chip:hover{border-color:var(--goldd);color:var(--gold)}
.bl-chip.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.g-stats{display:flex;border-top:1px solid var(--line);background:var(--p1);position:relative;z-index:2}
.g-stat{flex:1;padding:10px 0;text-align:center;border-right:1px solid var(--line)}
.g-stat:last-child{border-right:0}
.g-stat .n{font-family:'Bebas Neue',sans-serif;font-size:21px;color:var(--gold);line-height:1}
.g-stat .l{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);margin-top:3px}
/* ---- profile pf ---- */
.pf-head{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px;background:var(--p1)}
.pf-head .pbanner.p3{height:140px;border-bottom:0;margin:0}
.pf-head .phead{padding:0 20px 4px;margin-top:-42px}
.pf-head .pavatar{border-color:var(--p1);border-radius:50%}
.pf-stats{display:flex;gap:0;margin:0;border-top:1px solid var(--line)}
.pf-stat{flex:1;padding:10px 4px;text-align:center;border-right:1px solid var(--line);transition:background .12s}
.pf-stat:hover{background:var(--p2)}
.pf-stat:last-child{border-right:0}
.pf-stat .n{font-family:'Bebas Neue',sans-serif;font-size:20px;line-height:1}
.pf-stat .n.g{color:var(--gold)}
.pf-stat .l{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-top:2px}
.ptabs{margin:18px 0 14px}
/* ---- backlog bl3 ---- */
.bl3{border:1px solid var(--line);border-radius:9px;background:var(--p1);overflow:hidden}
.bl3-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.bl3-row:hover{background:var(--p2)}
.bl3-row img,.bl3-ph{width:36px;height:47px;border-radius:4px;object-fit:cover;background:linear-gradient(160deg,var(--ph1),var(--ph2));flex:0 0 auto;display:block}
.bl3-main{flex:1;min-width:0}
.bl3-t{font-size:13.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl3-t a:hover{color:var(--gold)}
.bl3-s{font-size:11.5px;color:var(--tx3);display:flex;gap:10px;margin-top:2px;flex-wrap:wrap}
.bl3-s .vh{color:var(--gold);display:inline-flex;align-items:center;gap:3px}
.bl3-s .vh i{font-size:12px}
.st{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid;flex:0 0 auto}
.st.want{border-color:var(--line2);color:var(--tx2)}
.st.playing{border-color:var(--live-line);color:var(--live)}
.st.finished{border-color:var(--blue-line);color:var(--blue)}
.st.platinum{border-color:var(--goldd);color:var(--gold);background:rgba(232,185,74,.10)}
.st.dropped{border-color:var(--red-line);color:var(--red-soft)}
.bl3-rate{font-family:'Bebas Neue',sans-serif;font-size:16px;color:var(--tx3);flex:0 0 40px;text-align:right}
.bl3-rate b{color:var(--gold);font-size:18px}
.bl3-detail{display:none;padding:12px 14px 14px 62px;border-bottom:1px solid var(--line);background:var(--p2)}
.bl3-detail.open{display:block}
.bl3-note{font-size:13px;color:var(--tx2);margin-bottom:10px}
.bl3-edit-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.bl3-edit select,.bl3-edit input{background:var(--p1);border:1px solid var(--line);border-radius:7px;padding:7px 10px;color:var(--tx);font-size:13px}
.bl3-edit input[name=note]{width:100%}
.bl3-edit input[type=number]{width:64px}
.bl3-remove{margin-top:8px}
.bl3-remove button{font-size:12px;color:var(--tx3);display:inline-flex;align-items:center;gap:5px}
.bl3-remove button:hover{color:var(--red)}
.bl3 .bl2-cta{margin-bottom:8px}
/* ---- empty states ---- */
.empty{border:1px dashed var(--line2);border-radius:9px;padding:30px 20px;text-align:center;color:var(--tx3);background:none}
.empty i{font-size:28px;color:var(--goldd);display:block;margin:0 auto 8px}
.empty p{font-size:13.5px;max-width:320px;margin:0 auto 12px;color:var(--tx2)}
/* ---- light theme parity for new classes ---- */
html[data-theme="light"] .qgame .cover,
html[data-theme="light"] .demand img,html[data-theme="light"] .demand-ph,
html[data-theme="light"] .bl3-row img,html[data-theme="light"] .bl3-ph{background:linear-gradient(160deg,var(--ph1),var(--p2))}
html[data-theme="light"] .bl-chip{background:rgba(255,255,255,.5)}
html[data-theme="light"] .bl-chip.on{color:var(--on-gold)}
html[data-theme="light"] .g-stats{background:rgba(246,247,249,.6)}
html[data-theme="light"] .pf-head,html[data-theme="light"] .bl3{background:var(--p1)}
/* ---- mobile guards (≤760px): keep single column, soften strips ---- */
@media(max-width:760px){
.rail{display:none}
.composer.c3 textarea:focus{height:70px}
.ghero.g3 .gtitle{font-size:31px}
.g-stats{flex-wrap:wrap}
.g-stat{flex:1 1 45%;border-bottom:1px solid var(--line)}
.pf-stats{flex-wrap:wrap}
.pf-stat{flex:1 1 30%;border-bottom:1px solid var(--line)}
.bl3-detail{padding-left:14px}
.bl3-rate{flex-basis:34px}
}
/* ============================================================
v4 — Steam data, quotable everything, community-first game page
Revert = delete this block + the v3 block, restore views from backup.
============================================================ */
/* ---------- THE QUOTE AFFORDANCE (signature element) ---------- */
.q{position:relative}
.q-btn{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:5px;display:flex;
align-items:center;justify-content:center;background:var(--p3);border:1px solid var(--line2);
color:var(--tx3);font-size:13px;opacity:.5;transform:scale(1);z-index:6;
transition:opacity .12s,transform .12s,color .12s,border-color .12s,background .12s}
/* Visible at rest, not hover-only: an icon nobody can see is an icon nobody
uses, and it read as "there is no quote button" on every screenshot. */
.q:hover > .q-btn,.q:focus-within > .q-btn,.q-btn:focus-visible,.q-btn:hover{opacity:1;transform:scale(1)}
.q-btn:hover{color:var(--gold);border-color:var(--goldd);background:var(--gold-dim,rgba(232,185,74,.1))}
.q::after{content:"";position:absolute;inset:-4px;border-radius:8px;border:1px solid transparent;pointer-events:none;transition:border-color .12s}
.q:hover::after{border-color:var(--goldd)}
.qcover{flex:0 0 auto}
@media(hover:none){.q-btn{opacity:1;transform:scale(1)}}
/* THE INLINE VARIANT.
* .q-btn was written as an absolutely-positioned overlay badge for cards, then
* reused inside post action rows as `class="iact q-btn"` — where absolute
* positioning + opacity:0 made it an invisible element pinned to the corner.
* The Kutip button on posts was therefore never visible to anyone. When both
* classes are present the button is an ordinary action, so it must look like
* one. */
/* .q-btn CARRIES OVERLAY GEOMETRY: position:absolute, a fixed 24x24 box, and a
* corner offset. That is right for a badge floating over a card, and wrong
* everywhere else — but the other classes it gets combined with (.iact, .qsm)
* only ever set colour and padding, so the absolute positioning survived and
* those buttons became invisible 24px squares pinned to a corner. That is why
* "there is no quote button" was reported on posts AND on every feed subtab.
*
* Any combination other than the bare badge is laid out inline. */
.iact.q-btn,
.qsm.q-btn,
.q.q-btn{position:static;top:auto;right:auto;width:auto;height:auto;
opacity:1;transform:none;z-index:auto}
.iact.q-btn{background:none;border:0;border-radius:7px;color:var(--tx3);font-size:11.5px;
padding:4px 9px;display:inline-flex;align-items:center;gap:5px}
.iact.q-btn:hover{background:var(--p2);color:var(--gold)}
.qsm.q-btn{border:1px solid var(--line2);border-radius:99px;padding:3px 10px;font-size:11px;
color:var(--tx2);flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:none}
.qsm.q-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}
.q.q-btn{border-radius:6px;width:22px;height:22px;display:inline-flex;
align-items:center;justify-content:center;background:var(--p3)}
/* quoted-data embed inside a post */
.qdata{display:block;margin-top:9px;border:1px solid var(--line);border-left:3px solid var(--gold);
border-radius:6px;background:var(--p2);padding:10px 12px;transition:background .12s,border-color .12s}
a.qdata:hover{background:var(--p3);border-color:var(--line2);border-left-color:var(--gold2)}
.qdata .qd-k{display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3)}
.qdata .qd-v{display:block;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.02em;line-height:1.12;margin:3px 0;color:var(--gold)}
.qdata .qd-s{display:block;font-size:12.5px;color:var(--tx2)}
.qdata .qd-t{display:block;font-size:11px;color:var(--tx3);margin-top:4px}
.qdata.preview{margin-top:10px}
/* quote composer sheet */
.qsheet{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:var(--scrim);padding:18px}
.qsheet.on{display:flex}
.qsheet-in{width:100%;max-width:520px;background:var(--p1);border:1px solid var(--line2);border-radius:12px;padding:16px;box-shadow:0 24px 70px var(--shadow)}
.qsheet h4{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.04em;margin-bottom:11px;display:flex;align-items:center;gap:8px}
.qsheet h4 i{color:var(--gold)}
.qsheet textarea{width:100%;background:var(--p2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
color:var(--tx);font-family:inherit;font-size:14px;min-height:70px;resize:vertical}
.qsheet textarea:focus{outline:none;border-color:var(--goldd)}
.qrow{display:flex;gap:8px;margin-top:12px;align-items:center}
.qrow .sp{flex:1}
.qhint{font-size:11.5px;color:var(--tx3)}
/* ---------- GAME HERO v4 ---------- */
.ghero.g4{display:block;min-height:0}
.ghero.g4 .ghero-bg{background-position:center center}
.ghero.g4 .ghero-bg::after{background:
linear-gradient(to top,var(--ink) 2%,var(--scrim) 46%,var(--scrim-soft) 100%),
linear-gradient(to right,var(--scrim),transparent 68%)}
.ghero.g4 .ghero-in{align-items:flex-end;padding:96px 4vw 18px;gap:20px}
.ghero.g4 .gcover{width:142px;aspect-ratio:2/3;height:auto;object-fit:cover;box-shadow:0 16px 44px var(--shadow)}
.gicon{width:24px;height:24px;border-radius:5px;background:var(--p2);object-fit:cover;flex:0 0 auto}
.ghero.g4 .g-eyebrow{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;
font-weight:600;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.ghero.g4 .gtitle{font-size:44px;margin:5px 0 7px}
.ghero.g4 .g-sub{gap:11px}
.ghero.g4 .g-actions{margin-top:13px}
.pill.live{border-color:var(--live);color:var(--live)}
/* ---------- game body: community left, data rail right ---------- */
.gbody{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;margin-top:20px}
.gmain{min-width:0}
.gbody .rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:72px}
.gtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.gtabs button{display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);padding:9px 13px;position:relative;white-space:nowrap}
.gtabs button i{font-size:15px}
.gtabs button.on{color:var(--gold)}
.gtabs button.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;background:var(--gold)}
.gtabs button:hover{color:var(--tx)}
.tp{display:none}.tp.on{display:block}
.sec-h .src{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.thread-row{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);font-size:13.5px}
.thread-row:last-child{border-bottom:0}
.thread-row:hover{background:var(--p2)}
.thread-row .tr-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-row .tr-n{font-size:11.5px;color:var(--tx3);flex:0 0 auto}
.fineprint{font-size:11.5px;color:var(--tx3);margin-top:10px}
/* ---------- statistics ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.kpi{border:1px solid var(--line);border-radius:8px;background:var(--p1);padding:10px 11px;position:relative}
.kpi .kl{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3)}
.kpi .kv{font-family:'Bebas Neue',sans-serif;font-size:23px;line-height:1.05;margin-top:3px}
.kpi .kv.g{color:var(--gold)}.kpi .kv.live{color:var(--live)}
.kpi .kd{font-size:11px;color:var(--tx3);margin-top:1px}
.chartbox{border:1px solid var(--line);border-radius:9px;background:var(--p1);padding:13px 14px;margin-bottom:10px;position:relative}
.chart-h{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
.chart-h h4{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.05em}
.chart-h .now{margin-left:auto;font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--gold);line-height:1}
.chart-sub{font-size:11.5px;color:var(--tx3);margin-bottom:11px;display:flex;gap:6px;align-items:flex-start;line-height:1.5}
.chart-sub.warn{color:var(--amber,var(--gold))}
.chart-sub.ok{color:var(--live)}
.chart-sub i{flex:0 0 auto;margin-top:1px;font-size:14px}
svg.ch{width:100%;height:112px;display:block}
.chart-empty{font-size:12.5px;color:var(--tx3);text-align:center;padding:22px 10px;border:1px dashed var(--line2);border-radius:7px}
.legend{display:flex;gap:13px;margin-top:8px;font-size:11.5px;color:var(--tx3);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:3px;border-radius:2px;display:inline-block}
.mtable{width:100%;border-collapse:collapse;font-size:12.5px}
.mtable th{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.11em;
text-transform:uppercase;color:var(--tx3);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line2)}
.mtable td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--tx2)}
.mtable tr:last-child td{border-bottom:0}
.mtable td.dim{color:var(--tx3)}
/* funnel */
.funnel div{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12.5px}
.funnel .fl{flex:0 0 82px;color:var(--tx3);font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.funnel .bar{height:22px;border-radius:4px;background:var(--gold);display:flex;align-items:center;padding:0 8px;
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;color:var(--on-gold);min-width:30px}
/* achievements */
.ach{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;position:relative}
.ach:last-child{border-bottom:0}
.ach .an{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ach .track{flex:0 0 70px;height:5px;border-radius:99px;background:var(--p3);overflow:hidden}
.ach .track i{display:block;height:100%;background:var(--blue)}
.ach .track i.rare{background:var(--gold)}
.ach .ap{font-family:'Bebas Neue',sans-serif;font-size:16px;flex:0 0 46px;text-align:right;color:var(--tx2)}
.ach .ap.rare{color:var(--gold)}
/* rating spread */
.rspread{display:flex;align-items:flex-end;gap:5px;height:90px}
.rspread .rs{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.rspread .rsbar{width:100%;background:var(--gold);border-radius:3px 3px 0 0;min-height:3px}
.rspread .rsl{font-size:10px;color:var(--tx3);margin-top:4px}
/* ---------- patches ---------- */
.patch{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);position:relative}
.patch:last-child{border-bottom:0}
.patch .dt{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.07em;
color:var(--tx3);flex:0 0 74px;padding-top:3px;line-height:1.35}
.patch .pmain{flex:1;min-width:0}
.patch .pt{font-size:13.5px;font-weight:600;line-height:1.35}
.patch .pd{font-size:12.5px;color:var(--tx3);margin-top:2px}
.ptag{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.09em;
text-transform:uppercase;padding:1px 6px;border-radius:3px;border:1px solid var(--line2);color:var(--tx3);margin-left:6px;white-space:nowrap}
.ptag.major{border-color:var(--goldd);color:var(--gold);background:rgba(232,185,74,.10)}
/* ---------- media: trailer + timeline + shots ---------- */
.trailer{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--ph2)}
.trailer video{width:100%;height:100%;object-fit:cover;display:block}
.playbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--scrim-soft);transition:background .15s;width:100%}
.playbtn:hover{background:transparent}
.playbtn i{font-size:26px;color:var(--on-gold);background:var(--gold);width:56px;height:56px;border-radius:50%;
display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px var(--shadow)}
.tl{border-left:2px solid var(--line);margin-left:7px}
.tl-item{position:relative;padding:9px 0 9px 20px}
.tl-item::before{content:"";position:absolute;left:-6px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--p3);border:2px solid var(--line2)}
.tl-item.cur::before{background:var(--gold);border-color:var(--gold)}
.tl-row{display:flex;gap:11px;align-items:center}
.tl-row img,.tl-ph{width:82px;aspect-ratio:16/9;object-fit:cover;border-radius:5px;border:1px solid var(--line);
flex:0 0 auto;background:linear-gradient(160deg,var(--ph1),var(--ph2));display:block}
.tl-t{font-size:13.5px;font-weight:600;line-height:1.25}
.tl-d{font-size:11.5px;color:var(--tx3);margin-top:2px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.approx{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--amber,var(--gold));border:1px solid var(--amber,var(--goldd));border-radius:3px;padding:0 5px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.shots .q img{aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid var(--line);width:100%;
background:linear-gradient(160deg,var(--ph1),var(--ph2));transition:border-color .12s,transform .12s}
.shots .q img:hover{border-color:var(--goldd);transform:translateY(-2px)}
/* ---------- rail: info + about ---------- */
.skaha-panel{border-color:var(--goldd);background:linear-gradient(100deg,rgba(232,185,74,.10),transparent 65%)}
.skaha-panel h3{color:var(--gold)}
.about-block{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.about{font-size:13.5px;color:var(--tx2);line-height:1.65}
.about.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.more{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--gold);margin-top:7px;display:block}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tag{font-size:11.5px;color:var(--tx2);background:var(--p2);border:1px solid var(--line);border-radius:99px;padding:3px 9px}
.tag:hover{border-color:var(--goldd);color:var(--gold)}
.revbar{height:7px;border-radius:99px;background:var(--p3);overflow:hidden;margin:8px 0 6px}
.revbar i{display:block;height:100%;background:var(--live)}
/* ---------- admin: steam sync ---------- */
.notice-bar{border:1px solid var(--goldd);background:rgba(232,185,74,.10);border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:14px;color:var(--tx)}
.diag{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.diag-row{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);font-size:13px}
.diag-row:last-child{border-bottom:0}
.diag-row .st{font-size:16px;flex:0 0 auto;margin-top:1px}
.diag-row .st.ok{color:var(--live)}.diag-row .st.bad{color:var(--red)}
.diag-row .lbl{flex:1;min-width:0}
.diag-row .lbl small{display:block;color:var(--tx3);font-size:11.5px;margin-top:2px;line-height:1.5}
.diag-row .lbl small.fix{color:var(--gold)}
.diag-row .v{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;flex:0 0 auto}
.appid-form{display:flex;gap:6px;align-items:center}
.appid-form input{width:120px;background:var(--p1);border:1px solid var(--line);border-radius:6px;padding:5px 9px;color:var(--tx);font-size:12.5px;font-family:ui-monospace,Menlo,monospace}
.syncbadge{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid var(--line2);color:var(--tx3)}
.syncbadge.ok{border-color:var(--live-line);color:var(--live)}
.syncbadge.bad{border-color:var(--red-line);color:var(--red)}
/* ---------- responsive: mobile keeps single column, community first ---------- */
@media(max-width:980px){
.gbody{grid-template-columns:1fr}
.gbody .rail{position:static}
.kpis{grid-template-columns:repeat(2,1fr)}
.shots{grid-template-columns:repeat(2,1fr)}
.ghero.g4 .ghero-in{padding:58px 5vw 16px;gap:13px}
.ghero.g4 .gcover{width:96px}
.ghero.g4 .gtitle{font-size:30px}
.tl-row img,.tl-ph{width:64px}
.patch .dt{flex-basis:62px}
}
@media(max-width:520px){
.kpis{grid-template-columns:1fr 1fr}
.qsheet{padding:12px;align-items:flex-end}
.qsheet-in{max-width:none}
.funnel .fl{flex-basis:66px}
}
/* ============================================================
v4.1 — image quotes, cover-hover tentang, microtrailer hero
============================================================ */
/* quote embed with an image: thumbnail left, text right */
.qdata.has-img{display:flex;gap:0;padding:0;overflow:hidden}
.qdata .qd-img{width:118px;min-height:74px;object-fit:cover;flex:0 0 auto;display:block;background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.qdata.has-img .qd-body{padding:10px 12px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.qdata.has-img .qd-v{font-size:19px}
/* sheet preview follows the same shape */
.qdata.preview{display:flex;padding:0;overflow:hidden}
.qdata.preview .qd-img{width:118px}
.qdata.preview .qd-img[hidden]{display:none}
.qdata.preview .qd-body{padding:10px 12px;min-width:0}
/* microtrailer layer behind the hero: sits under the scrim gradient so the
title stays readable while the clip plays */
.ghero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity .35s ease;pointer-events:none}
.ghero-vid.on{opacity:1}
.ghero.g4 .ghero-bg{z-index:-3}
.ghero.g4 .ghero-bg::after{z-index:1}
/* the ::after scrim lives on .ghero-bg (z -3); re-anchor it above the video */
.ghero.g4::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(to top,var(--ink) 2%,var(--scrim) 46%,var(--scrim-soft) 100%),
linear-gradient(to right,var(--scrim),transparent 68%)}
.ghero.g4 .ghero-bg::after{background:none}
/* tentang panel that fades in beside the cover on hover (desktop only) */
.qcover{position:relative}
.cover-about{position:absolute;left:calc(100% + 14px);bottom:0;width:300px;z-index:8;
background:var(--p1);border:1px solid var(--line2);border-left:3px solid var(--gold);
border-radius:9px;padding:12px 14px;box-shadow:0 14px 40px var(--shadow);
opacity:0;transform:translateX(-6px);pointer-events:none;
transition:opacity .18s ease,transform .18s ease}
.cover-about.on{opacity:1;transform:translateX(0)}
.cover-about .ca-k{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.cover-about{display:block;max-width:46vw;pointer-events:none}
.cover-about.on{pointer-events:auto}
/* Short description, clamped to 9 lines. No scrolling in either axis — the
scrollable version produced both a vertical thumb and a stray horizontal
bar, which is worse than simply showing less text. */
.cover-about .ca-body{font-size:12.5px;line-height:1.65;color:var(--tx2);
display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:980px){
.cover-about{display:none} /* mobile: rail Tentang block only, layout untouched */
.ghero-vid{display:none}
.qdata .qd-img{width:92px}
}
/* ============================================================
v4.2 — genre chips, linimasa v2, live search, admin table v2
============================================================ */
/* /games chips: skaha as the centerpiece */
.cat-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:20px 0}
.pill.skaha-hero{font-size:12.5px;padding:7px 16px;border-width:2px;border-color:var(--goldd);
background:var(--gold-dim);color:var(--gold);display:inline-flex;align-items:center;gap:7px}
.pill.skaha-hero i{font-size:14px}
.pill.skaha-hero.gold{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
/* linimasa v2: rows that grow into players */
.tl2{border:1px solid var(--line);border-radius:11px;background:var(--p1);overflow:hidden}
.tl2-item{border-bottom:1px solid var(--line);position:relative}
.tl2-item:last-child{border-bottom:0}
.tl2-head{display:flex;gap:12px;align-items:center;padding:10px 14px;cursor:pointer;transition:background .12s}
.tl2-head:hover{background:var(--p2)}
.tl2-item.open .tl2-head{background:var(--p2)}
.tl2-thumb{position:relative;width:96px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:1px solid var(--line);flex:0 0 auto;background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.tl2-thumb img,.tl2-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.tl2-thumb .pv{position:absolute;inset:0;opacity:0;transition:opacity .2s}
.tl2-head:hover .pv{opacity:1}
.tl2-main{min-width:0;flex:1}
.tl2-t{font-size:13.5px;font-weight:600;line-height:1.3}
.tl2-d{font-size:11.5px;color:var(--tx3);margin-top:2px}
.tl2-x{color:var(--tx3);font-size:16px;transition:transform .2s;flex:0 0 auto;display:flex;align-items:center}
.tl2-item.open .tl2-x{transform:rotate(180deg);color:var(--gold)}
.tl2-player{max-height:0;overflow:hidden;transition:max-height .35s ease}
.tl2-item.open .tl2-player{max-height:640px}
.tl2-player .inner{padding:0 14px 14px}
.tl2-player video{width:100%;aspect-ratio:16/9;border-radius:8px;border:1px solid var(--line2);background:#000;display:block}
.tl2-item .q-btn{top:10px;right:44px}
/* live search dropdown */
.nav-search{position:relative}
.sdrop{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:280px;background:var(--p1);
border:1px solid var(--line2);border-radius:11px;box-shadow:0 18px 50px var(--shadow);overflow:hidden;
z-index:280} /* above nav (100) and rail cards; below the modal sheets (300+) */
.sdrop[hidden]{display:none}
.sg{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);padding:9px 13px 4px}
.shit{display:flex;align-items:center;gap:10px;padding:7px 13px;font-size:13.5px}
.shit:hover,.shit.sel{background:var(--p2)}
.shit .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--ph1),var(--ph2));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--gold);flex:0 0 auto;object-fit:cover}
.shit .cv{width:26px;height:34px;border-radius:4px;object-fit:cover;flex:0 0 auto;background:linear-gradient(160deg,var(--ph1),var(--ph2));display:block}
.shit b{font-size:13.5px;display:block;line-height:1.2}
.shit small{color:var(--tx3);font-size:11.5px;display:block}
.sall{display:block;text-align:center;padding:9px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);border-top:1px solid var(--line)}
.sall:hover,.sall.sel{background:var(--gold-dim)}
@media(max-width:760px){.sdrop{position:fixed;left:3vw;right:3vw;top:56px;min-width:0}}
/* repost attribution header on a reposted card */
.repost-h{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx3);padding:0 0 7px;margin-bottom:1px}
.repost-h i{font-size:13px;color:var(--live)}
.repost-h a{font-weight:600;color:var(--tx2)}
.repost-h a:hover{color:var(--gold)}
/* hero eyebrow: one line, ellipsis — long multi-studio credits used to run off
the right edge of the hero */
.g-eyebrow{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.g-eyebrow .ge-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* trailer row with no usable video file: say so instead of expanding to nothing */
.tl2-nosrc{display:flex;gap:9px;align-items:flex-start;padding:12px 13px;border:1px dashed var(--line2);
border-radius:8px;background:var(--p2);font-size:12.5px;color:var(--tx3);line-height:1.6}
.tl2-nosrc i{font-size:15px;flex:0 0 auto;margin-top:1px}
.tl2-nosrc a{color:var(--gold)}
/* inline hint inside a field label (game edit uses the site stylesheet, not the
admin shell, so this needs its own definition) */
.field label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--tx3);font-size:11px}
/* ============================================================
icon-font failure fallback — html.nofont is set by ew.js when the
icon font does not load or renders zero-width glyphs. Controls that
would otherwise be blank show the short label in their data-fb.
============================================================ */
html.nofont .ti{display:none}
html.nofont [data-fb]::after{content:attr(data-fb);font-family:'Barlow Condensed',sans-serif;
font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:currentColor}
html.nofont .icobtn,html.nofont .theme-toggle{width:auto;padding:0 9px}
/* ============================================================
BERANDA LINIMASA — time is the spine, not a stack of cards
============================================================ */
.day{position:sticky;top:52px;z-index:20;display:flex;align-items:center;gap:10px;
padding:12px 0 8px;background:linear-gradient(to bottom,var(--ink) 68%,transparent)}
.day-k{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold);white-space:nowrap}
.day-n{font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-l{flex:1;height:1px;background:var(--line);min-width:12px}
.tline{position:relative;padding-left:86px}
.tline::before{content:"";position:absolute;left:52px;top:0;bottom:0;width:2px;
background:linear-gradient(to bottom,var(--line2),var(--line) 85%,transparent)}
.mo{position:relative;padding:0 0 12px}
.mo-time{position:absolute;left:-86px;top:4px;width:36px;text-align:right;
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;color:var(--tx3);letter-spacing:.04em}
.mo-time small{display:block;font-size:10px;color:var(--tx3);opacity:.7;font-weight:500}
.mo-dot{position:absolute;left:-46px;top:0;width:24px;height:24px;border-radius:50%;
background:var(--p2);border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;
color:var(--tx2);font-size:12px;transition:box-shadow .15s}
.mo:hover .mo-dot{box-shadow:0 0 0 4px var(--gold-dim)}
.mo.t-post .mo-dot{border-color:var(--blue);color:var(--blue)}
.mo.t-repost .mo-dot,.mo.t-backlog .mo-dot{border-color:var(--live);color:var(--live)}
.mo.t-session .mo-dot{border-color:var(--live);color:var(--live);box-shadow:0 0 0 4px rgba(74,222,128,.10)}
.mo.t-event .mo-dot{border-color:var(--amber);color:var(--amber)}
.mo-card{padding:10px 12px;transition:border-color .15s}
.mo:hover .mo-card{border-color:var(--line2)}
.card.soft{background:transparent;border-color:transparent;padding:2px 0 0}
.mo-h{display:flex;align-items:center;gap:7px;font-size:13px;min-width:0;flex-wrap:wrap}
.mo-h .avatar.sm{width:26px;height:26px;font-size:9.5px}
.mo-h .hdl{color:var(--tx3);font-size:12px}
.mo-h .act{color:var(--tx3);font-size:12px}
.mo-h .act:hover{color:var(--gold)}
.mo-h .perma{margin-left:auto}
.mo-b{font-size:13.5px;line-height:1.55;margin-top:6px;overflow-wrap:anywhere}
.rp{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx3);margin-bottom:7px}
.rp i{color:var(--live);font-size:13px}
.rp b{color:var(--tx2)}
.rp a:hover b{color:var(--gold)}
.mini{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.45}
.mini .cv{width:30px;height:40px;border-radius:4px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.mini a:hover b{color:var(--gold)}
.mini-s{font-size:12px;color:var(--tx3)}
.mini .dur{margin-left:auto;flex:0 0 auto}
.pillx{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;
letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:3px;
border:1px solid var(--line2);color:var(--tx2)}
.pillx.go{border-color:var(--live);color:var(--live)}
/* labelled action bar: "Balas" is findable by reading, not by hovering */
.acts{display:flex;align-items:center;gap:2px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.acts form{display:contents}
.iact{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;
font-size:12px;color:var(--tx3);line-height:1;transition:transform .08s}
.iact:active{transform:scale(.94)}
.iact .lbl{font-weight:500}
.iact:hover{background:var(--p2);color:var(--tx)}
.iact.on-like{color:var(--pink)}
.iact.on-repost{color:var(--live)}
.iact.on-bm{color:var(--gold)}
.acts .sp{flex:1}
.reply{display:none;gap:8px;margin-top:10px}
.reply.on{display:flex}
.reply input{flex:1;background:var(--p2);border:1px solid var(--line);border-radius:18px;
padding:8px 14px;color:var(--tx);font-size:13.5px}
.reply input:focus{outline:none;border-color:var(--goldd)}
@media(max-width:760px){
.day{top:0}
.tline{padding-left:62px}
.tline::before{left:42px}
.mo-time{left:-62px;width:28px;font-size:11px;top:5px}
.mo-time small{display:none}
.mo-dot{left:-31px;width:22px;height:22px;font-size:11px}
.iact .lbl{display:none}
.iact{padding:6px 9px}
}
/* ---- timeline: scroll feel ---- */
/* long bodies clamp to 8 lines; Selengkapnya expands in place. Keeps every
moment a predictable height so the scroll rhythm never stalls on one wall
of text. */
.mo-b.clamp8{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.mo-b.clamp8.open{-webkit-line-clamp:unset;display:block}
.mo-more{font-size:12px;color:var(--gold);margin-top:3px;padding:0;font-weight:600}
.mo-more:hover{text-decoration:underline}
/* appended pages slide in — motion only for NEW content, page one is instant */
@keyframes mo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mo-in{animation:mo-in .28s ease both}
@media (prefers-reduced-motion: reduce){.mo-in{animation:none}}
/* the loader sentinel */
.tl-more{display:flex;align-items:center;justify-content:center;gap:9px;
padding:18px 0 30px;font-size:12.5px;color:var(--tx3)}
.tl-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);
border-top-color:var(--gold);animation:tl-spin .8s linear infinite;opacity:0;transition:opacity .2s}
.tl-more.busy .tl-spin{opacity:1}
@keyframes tl-spin{to{transform:rotate(360deg)}}
/* soft moments sit closer to the spine; give them a hover nudge too */
.card.soft .mini{padding:2px 0;border-radius:8px;transition:background .12s}
.mo:hover .card.soft .mini{background:var(--p1)}
/* time reads as one quiet unit: HH:MM over a tiny WIB, right-aligned in its
own lane, clear of the marker */
.mo-time{font-variant-numeric:tabular-nums;line-height:1.15}
/* ---- boxed repost: the original is visibly a quoted object ---- */
.rp-box{border:1px solid var(--line2);border-left:3px solid var(--live);border-radius:9px;
padding:9px 11px;margin-top:2px;background:var(--p2)}
.rp-box .mo-b{margin-top:5px;font-size:13px}
.rp-box .qdata{background:var(--p1)}
/* ---- session moment: stacked cover art per game played ---- */
.sess-cvs{display:flex;flex:0 0 auto}
.sess-cvs .cv{width:30px;height:40px;border-radius:4px;object-fit:cover;border:1.5px solid var(--ink);
background:linear-gradient(160deg,var(--ph1),var(--ph2));display:block}
.sess-cvs .cv+.cv{margin-left:-11px} /* fanned stack */
.sess-cvs.n1 .cv+.cv{margin-left:0}
.sess-nog{display:flex;align-items:center;justify-content:center;color:var(--live);font-size:15px}
/* ============================================================
PWA install offer + social login
============================================================ */
/* install banner: fixed above the mobile tab bar, clear of the home indicator */
.ib{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:200;
border:1px solid var(--line2);border-radius:14px;background:var(--p1);padding:12px 13px;
display:flex;gap:12px;align-items:center;box-shadow:0 16px 44px var(--shadow);max-width:520px;margin:0 auto}
.ib[hidden]{display:none}
.ib .ic{width:46px;height:46px;border-radius:12px;flex:0 0 auto}
.ib .tx{flex:1;min-width:0}
.ib .tx b{font-size:14px;display:block}
.ib .tx small{font-size:12px;color:var(--tx3);display:block;margin-top:2px;line-height:1.45}
.ib .acts{display:flex;gap:8px;flex:0 0 auto;align-items:center}
@media(max-width:760px){
/* sit above the 5-slot tab bar rather than covering it */
.ib{bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media(max-width:520px){
.ib{flex-wrap:wrap}
.ib .acts{width:100%;justify-content:flex-end}
}
/* iOS add-to-home instructions */
.ios-sheet{position:fixed;inset:0;z-index:210;background:var(--scrim);display:flex;
align-items:center;justify-content:center;padding:5vw}
.ios-sheet[hidden]{display:none}
.ios-card{background:var(--p1);border:1px solid var(--line2);border-radius:14px;padding:18px;max-width:340px;
box-shadow:0 20px 60px var(--shadow)}
.ios-card h4{font-size:19px;letter-spacing:.04em;margin-bottom:5px}
.ios-card p{font-size:12.5px;color:var(--tx3);line-height:1.5}
.ios-card .steps{list-style:none;margin-top:13px;display:flex;flex-direction:column;gap:11px;padding:0}
.ios-card .steps li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--tx2);line-height:1.5}
.ios-card .steps .n{width:20px;height:20px;border-radius:50%;background:var(--gold-dim);color:var(--gold);
font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}
.ios-card .steps b{color:var(--tx)}
.ios-card .steps i{color:var(--gold)}
/* standalone mode: the tab bar must clear the home indicator */
@media (display-mode: standalone){
.tabbar{padding-bottom:env(safe-area-inset-bottom)}
}
/* ---- social login buttons ---- */
.soc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sbtn{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--line);
border-radius:10px;background:var(--p2);font-size:13px;font-weight:500;
cursor:not-allowed;opacity:.72;transition:opacity .15s,border-color .15s,transform .08s}
.sbtn:hover{opacity:.9;border-color:var(--line2)}
.sbtn.on{cursor:pointer;opacity:1}
.sbtn.on:hover{border-color:var(--goldd)}
.sbtn.on:active{transform:scale(.98)}
.sbtn svg{width:17px;height:17px;flex:0 0 auto}
.sbtn i{font-size:16px;flex:0 0 auto}
.sbtn .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soon{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9px;letter-spacing:.1em;
text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);border-radius:3px;
padding:1px 5px;flex:0 0 auto;opacity:.9}
.morebtn{width:100%;margin-top:8px;border:1px dashed var(--line2);border-radius:10px;padding:9px;
font-size:12.5px;color:var(--tx3);display:flex;align-items:center;justify-content:center;gap:7px;
background:none;cursor:pointer}
.morebtn:hover{color:var(--gold);border-color:var(--goldd)}
.morebtn i{transition:transform .2s}
.more.on .morebtn i{transform:rotate(180deg)}
.morewrap{max-height:0;overflow:hidden;transition:max-height .3s ease}
.more.on .morewrap{max-height:300px}
.morewrap .soc{margin-top:8px}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:var(--tx3);font-size:11px;
font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:420px){.soc{grid-template-columns:1fr}}
/* ============================================================
v5 — e/ communities, O/X votes, Mabar Nobar Finder
============================================================ */
.cols-feed{display:flex;gap:18px;align-items:flex-start}
.main-col{flex:1;min-width:0;max-width:640px}
@media(max-width:1000px){.cols-feed{display:block}.main-col{max-width:none}}
.fswitch{display:flex;gap:7px;margin:10px 0 12px}
.crumb{display:inline-block;font-size:12.5px;color:var(--tx3);margin-bottom:8px}
.crumb:hover{color:var(--gold)}
.muted-p{font-size:12.5px;color:var(--tx2);line-height:1.6}
.muted-p b{color:var(--gold)}
/* community chips + list */
.ebar{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.echip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;
padding:5px 12px 5px 6px;font-size:12.5px;background:var(--p1)}
.echip:hover{border-color:var(--gold);color:var(--gold)}
.echip small{color:var(--tx3);font-size:11px}
.echip.new{border-style:dashed;color:var(--gold);padding-left:12px}
.ei{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
font-family:'Bebas Neue',sans-serif;font-size:11px;color:var(--on-gold);
background:linear-gradient(140deg,var(--gold),var(--goldd))}
.elist a{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px}
.elist a:hover{color:var(--gold)}
/* community header */
.ecom-head{border-bottom:1px solid var(--line);margin-bottom:14px}
.ecom-banner{height:84px;background:linear-gradient(115deg,var(--ph1),var(--ph2) 70%);background-size:cover;background-position:center}
.ecom-bar{display:flex;gap:12px;align-items:flex-end;margin-top:-22px}
.ecom-icon{width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);flex:0 0 auto;overflow:hidden;
display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:22px;
color:var(--on-gold);background:linear-gradient(140deg,var(--gold),var(--goldd))}
.ecom-icon img{width:100%;height:100%;object-fit:cover}
.ecom-name{flex:1;min-width:0;padding-bottom:3px}
.ecom-name h1{font-size:24px;line-height:1}
.ecom-slug{font-size:12.5px;color:var(--tx3)}
.ecom-stats{display:flex;gap:15px;font-size:12px;color:var(--tx3);padding:9px 0 12px;flex-wrap:wrap}
.ecom-stats b{color:var(--tx);font-size:13px}
.ecom-stats a{color:var(--gold)}
/* sort tabs */
.sorts{display:flex;gap:4px;padding:9px 0 11px;border-bottom:1px solid var(--line);margin-bottom:11px}
.sorts a{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--tx3);padding:5px 12px;border-radius:99px}
.sorts a.on{background:var(--p2);color:var(--gold)}
/* thread rows with the O/X rail */
.thr{display:flex;border:1px solid var(--line);border-radius:11px;background:var(--p1);margin-bottom:9px;overflow:hidden}
.thr:hover{border-color:var(--line2)}
.thr.open{border-color:var(--line2)}
.ox{flex:0 0 auto;width:46px;background:var(--p2);display:flex;flex-direction:column;align-items:center;
padding:9px 0;gap:1px}
.oxf{display:contents}
.ox .o,.ox .x{width:28px;height:24px;border-radius:6px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
font-size:14px;color:var(--tx3);display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.ox .o:hover{background:rgba(74,222,128,.14);color:var(--live)}
.ox .x:hover{background:rgba(248,113,113,.14);color:var(--red)}
.ox .o.on{background:rgba(74,222,128,.16);color:var(--live)}
.ox .x.on{background:rgba(248,113,113,.16);color:var(--red)}
.ox .sc{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13.5px;color:var(--tx2);
font-variant-numeric:tabular-nums}
.ox .sc.up{color:var(--live)}
.ox .sc.down{color:var(--red)}
.thr-b{flex:1;min-width:0;padding:10px 12px}
.thr-m{font-size:11.5px;color:var(--tx3);display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.thr-m a{color:var(--tx3)}
.thr-m a:hover{color:var(--gold)}
.thr-m .ecom{color:var(--gold);font-weight:600}
.thr-t{display:block;font-size:15px;font-weight:600;line-height:1.35;margin:4px 0 5px}
.thr-t:hover{color:var(--gold)}
.thr-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:.03em;line-height:1.1;margin:5px 0 7px}
.thr-x{font-size:13px;color:var(--tx2);line-height:1.55}
.thr-body{font-size:14px;color:var(--tx);line-height:1.65;margin-bottom:4px}
.thr-a{display:flex;gap:2px;margin-top:8px;flex-wrap:wrap}
.flair{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.08em;
text-transform:uppercase;padding:1px 6px;border-radius:3px;border:1px solid var(--goldd);color:var(--gold)}
/* threaded replies */
.creplies{margin-top:14px}
.crep{padding:10px 0 0}
.crep-h{display:flex;align-items:center;gap:7px;font-size:12.5px}
.crep-h b{font-weight:600}
.crep-b{font-size:13.5px;line-height:1.6;color:var(--tx2);margin:5px 0 0;padding-left:30px}
.crep-a{display:flex;align-items:center;gap:7px;padding-left:30px;margin-top:5px;flex-wrap:wrap}
.ox-inline{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:var(--tx3);
padding:2px 7px;border-radius:5px}
.ox-inline:hover{color:var(--live);background:var(--p2)}
.ox-inline.x:hover{color:var(--red)}
.ox-inline.on{color:var(--live);background:rgba(74,222,128,.14)}
.ox-inline.x.on{color:var(--red);background:rgba(248,113,113,.14)}
.sc-inline{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;color:var(--tx2);
font-variant-numeric:tabular-nums;min-width:14px;text-align:center}
.sc-inline.up{color:var(--live)}.sc-inline.down{color:var(--red)}
.iact.sm{font-size:11.5px;padding:2px 6px}
.ckids{margin-left:30px;padding-left:12px;border-left:2px solid var(--line)}
@media(max-width:600px){.ckids{margin-left:12px;padding-left:9px}}
.rbox{display:none;gap:7px;margin:7px 0 0 30px}
.rbox.on{display:flex}
.rbox input{flex:1;background:var(--p2);border:1px solid var(--line);border-radius:99px;padding:7px 12px;
color:var(--tx);font-size:13px}
.rbox input:focus{outline:none;border-color:var(--goldd)}
/* composer shortcut */
.comp-fake{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
border-radius:11px;background:var(--p1);margin-bottom:11px;font-size:13px;color:var(--tx3)}
.comp-fake:hover{border-color:var(--line2)}
.comp-fake span:nth-child(2){flex:1}
/* rail: hot threads + events */
.hot-t{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.hot-t:last-child{border-bottom:0}
.hot-t:hover{color:var(--gold)}
.hot-t .ht-s{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--live);
min-width:22px;text-align:right;font-variant-numeric:tabular-nums}
.hot-t small{display:block;color:var(--tx3);font-size:11px;margin-top:2px}
.ev-mini{display:block;padding:7px 0;border-bottom:1px solid var(--line)}
.ev-mini:last-of-type{border-bottom:0}
.ev-mini:hover .em-t{color:var(--gold)}
.ev-mini .em-t{display:block;font-size:13px;font-weight:600;margin:3px 0 1px}
.ev-mini .em-m{display:block;font-size:11.5px;color:var(--tx3)}
/* finder */
.finder{border:1px solid var(--goldd);border-radius:13px;padding:15px;margin:14px 0 12px;
background:linear-gradient(150deg,var(--gold-dim),transparent 70%)}
.finder h1{font-size:28px;letter-spacing:.03em;line-height:1;margin:3px 0 5px}
.finder p{font-size:12.5px;color:var(--tx2);max-width:470px;line-height:1.6;margin-bottom:11px}
.fbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.fbar input{flex:1;min-width:140px;background:var(--p1);border:1px solid var(--line);border-radius:99px;
padding:8px 14px;color:var(--tx);font-size:13px}
.fbar input:focus{outline:none;border-color:var(--goldd)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chips .pill small{opacity:.7;font-size:10.5px}
/* event cards */
.ev{display:flex;gap:11px;border:1px solid var(--line);border-radius:11px;background:var(--p1);padding:11px;margin-bottom:9px}
.ev:hover{border-color:var(--line2)}
.ev.pending{border-style:dashed;border-color:var(--amber);background:rgba(240,180,41,.05)}
.ev-cover{width:54px;height:72px;border-radius:6px;flex:0 0 auto;object-fit:cover;display:block;
background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.ev-info{flex:1;min-width:0}
.ev-row1{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ev-info h3{font-size:14.5px;font-weight:600;line-height:1.3;margin:4px 0 3px}
.ev-info h3 a:hover{color:var(--gold)}
.ev-meta{font-size:12px;color:var(--tx3);line-height:1.7}
.ev-meta b{color:var(--tx2)}
.ev-meta a{color:var(--tx2)}
.ev-meta a:hover{color:var(--gold)}
.ev-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:7px}
.slots{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:var(--tx2);letter-spacing:.03em}
.slots.full{color:var(--red)}
.sbar{width:74px;height:4px;border-radius:99px;background:var(--p3);overflow:hidden;margin-top:3px}
.sbar i{display:block;height:100%;background:var(--live)}
.sbar i.full{background:var(--red)}
@media(max-width:600px){
.ev{flex-wrap:wrap}
.ev-side{width:100%;flex-direction:row;align-items:center;justify-content:space-between}
}
.badge.mabar{border-color:var(--live);color:var(--live)}
.badge.nobar{border-color:var(--blue);color:var(--blue)}
.badge.red{border-color:var(--red);color:var(--red)}
.badge.amber{border-color:var(--amber);color:var(--amber)}
.badge.gold{border-color:var(--gold);color:var(--gold)}
/* the RSVP-gated reveal */
.reveal{margin-top:12px;border:1px solid var(--goldd);border-radius:10px;padding:11px 13px;background:var(--gold-dim)}
.reveal-b{font-size:14px;font-weight:600;margin-top:4px;word-break:break-word}
.reveal.locked{display:flex;gap:9px;align-items:center;border-style:dashed;border-color:var(--line2);
background:var(--p2);color:var(--tx3);font-size:12.5px}
.reveal.locked i{font-size:16px;color:var(--amber)}
.safety{border:1px dashed var(--line2);border-radius:9px;padding:10px 12px;font-size:12px;color:var(--tx3);
line-height:1.65;margin-top:13px}
.safety b{color:var(--amber)}
.notice.bad{border-color:var(--red)}
/* ============================================================
v5.1 — global composer, Post button, follow bar
============================================================ */
/* nav Post button: labelled on desktop, round icon on phone */
.postbtn{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--on-gold);
border-radius:99px;padding:6px 13px 6px 11px;font-weight:600;font-size:13px;flex:0 0 auto;
transition:transform .1s,background .15s}
.postbtn:hover{background:var(--gold2);transform:translateY(-1px)}
.postbtn:active{transform:scale(.97)}
.postbtn i{font-size:15px}
@media(max-width:900px){
.postbtn .lbl{display:none}
.postbtn{padding:0;width:32px;height:32px;justify-content:center;border-radius:50%}
}
/* phone FAB, clear of the tab bar and the home indicator */
.fab{display:none;position:fixed;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));
width:50px;height:50px;border-radius:50%;background:var(--gold);color:var(--on-gold);
align-items:center;justify-content:center;font-size:22px;z-index:150;
box-shadow:0 10px 26px rgba(0,0,0,.45)}
.fab:active{transform:scale(.94)}
@media(max-width:760px){.fab{display:flex}}
/* the sheet */
.csheet{position:fixed;inset:0;z-index:300;background:var(--scrim);display:none;
align-items:flex-start;justify-content:center;padding:6vh 4vw}
.csheet.on{display:flex}
.csheet-in{width:100%;max-width:520px;background:var(--p1);border:1px solid var(--line2);border-radius:14px;
box-shadow:0 24px 70px var(--shadow);overflow:hidden;max-height:88vh;display:flex;flex-direction:column}
.csheet-h{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line);flex:0 0 auto}
.csheet-h b{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.04em;flex:1}
.csheet-b{padding:12px 13px;overflow-y:auto;flex:1;min-height:0}
.csheet .dest{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.csheet .dest .pill{cursor:pointer}
.csheet textarea{width:100%;background:var(--p2);border:1px solid var(--line);border-radius:10px;
padding:10px 12px;font-size:14px;min-height:92px;resize:vertical;color:var(--tx)}
.csheet textarea:focus{outline:none;border-color:var(--goldd)}
.csheet .field input{width:100%;background:var(--p2);border:1px solid var(--line);border-radius:9px;
padding:9px 11px;font-size:14px;color:var(--tx)}
.csheet .field input:focus{outline:none;border-color:var(--goldd)}
.csheet-f{display:flex;align-items:center;gap:8px;padding:11px 13px;border-top:1px solid var(--line);
flex:0 0 auto;flex-wrap:wrap}
.csheet-f .sp{flex:1}
.cnt{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;color:var(--tx3)}
.cnt.warn{color:var(--amber)}.cnt.over{color:var(--red)}
.qd-rm{margin-left:auto;color:var(--tx3);font-size:15px;flex:0 0 auto;align-self:flex-start;padding:6px}
.qd-rm:hover{color:var(--red)}
.qdata.preview{margin-top:9px}
/* follow bar shared by Forum / Games / Events */
.fbar{margin:10px 0 12px}
.frow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fdiv{width:1px;height:18px;background:var(--line2);margin:0 3px;flex:0 0 auto}
.fscroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;max-width:100%}
.fscroll::-webkit-scrollbar{display:none}
.fscroll .pill{white-space:nowrap;flex:0 0 auto}
.fhint{font-size:11px;color:var(--tx3);margin-top:6px;line-height:1.5}
.fhint b{color:var(--gold)}
.cv-mini{width:15px;height:20px;border-radius:3px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.pill.gold{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
.pill small{opacity:.7;font-size:10.5px}
/* quote affordance on profile stats — appears on hover, always present on touch */
.pf-stat.q{position:relative}
.pf-stat.q .q-btn{position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:6px;
display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--tx3);
background:var(--p2);border:1px solid var(--line);opacity:0;transition:opacity .15s}
.pf-stat.q:hover .q-btn{opacity:1}
.pf-stat.q .q-btn:hover{color:var(--gold);border-color:var(--goldd)}
@media (pointer: coarse){.pf-stat.q .q-btn{opacity:1}}
/* ============================================================
v5.2 — uploads, post background art, share sheet, banner composer
============================================================ */
/* post background art: sits behind everything, fades in/out */
/* The page colour lives on and body is transparent, so a z-index:-1 layer
paints above the root background but below all content. Do NOT reintroduce a
`body > *` position rule: its specificity beat .csheet{position:fixed} and
dropped every overlay to the bottom of the page. */
.postbg{position:fixed;inset:0;z-index:-1;opacity:0;transition:opacity .5s ease;pointer-events:none;
background-size:cover;background-position:center;background-attachment:fixed}
.postbg.on{opacity:1}
.postbg::after{content:"";position:absolute;inset:0;background:
linear-gradient(180deg,rgba(11,15,23,.80),rgba(11,15,23,.92) 55%,rgba(11,15,23,.97))}
html[data-theme="light"] .postbg::after{background:linear-gradient(180deg,rgba(244,246,250,.86),rgba(244,246,250,.96))}
/* with art behind, cards need a touch more opacity to stay readable */
html.has-postbg .post,html.has-postbg .mo-card,html.has-postbg .panel,html.has-postbg .card{
background:color-mix(in srgb, var(--p1) 88%, transparent)}
@supports not (background: color-mix(in srgb, red, blue)){
html.has-postbg .post,html.has-postbg .mo-card{background:var(--p1)}
}
.bgtag{position:absolute;top:9px;right:9px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9px;
letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--goldd);
background:var(--gold-dim);border-radius:3px;padding:2px 6px;display:inline-flex;align-items:center;gap:4px}
/* uploaded image grid on a post */
.pmedia{display:grid;gap:4px;margin-top:9px;border-radius:10px;overflow:hidden}
.pmedia.n1{grid-template-columns:1fr}
.pmedia.n2{grid-template-columns:1fr 1fr}
.pmedia.n3{grid-template-columns:1fr 1fr}
.pmedia.n3 .pm:first-child{grid-row:span 2}
.pmedia.n4{grid-template-columns:1fr 1fr}
.pmedia .pm{display:block;overflow:hidden;background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.pmedia .pm img{width:100%;height:100%;object-fit:cover;display:block}
.pmedia.n1 .pm img{max-height:520px;object-fit:contain;background:var(--p2)}
.pmedia.n2 .pm,.pmedia.n3 .pm,.pmedia.n4 .pm{aspect-ratio:1}
/* inline media from a pasted address */
/* Media from a pasted address. NOT called .ib — that class is the PWA install
banner (position:fixed, z-index:200), and reusing it made every pasted image
float over the page for every visitor. */
.lnkmedia{display:block;position:static;float:none;clear:both;max-width:100%;margin:9px 0;
border-radius:10px;overflow:hidden;border:1px solid var(--line2);background:var(--p2)}
.lnkmedia img{width:100%;display:block;max-height:520px;object-fit:contain;height:auto}
.lnkmedia video{width:100%;display:block;max-height:520px;background:var(--ink);height:auto}
.lnkmedia figcaption{padding:6px 10px;font-size:11.5px;color:var(--tx3)}
.lnkmedia figcaption a{color:var(--gold)}
/* composer: banner theming + file pickers */
.cs-bnr{position:absolute;inset:0 0 auto 0;height:120px;background-size:cover;background-position:center;opacity:.45;
pointer-events:none}
.cs-bnr::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,15,23,.45),var(--p1))}
html[data-theme="light"] .cs-bnr::after{background:linear-gradient(180deg,rgba(255,255,255,.5),var(--p1))}
.csheet-in{position:relative}
.csheet-h,.csheet-b,.csheet-f{position:relative;z-index:1}
.ctools{display:flex;gap:6px;align-items:center;margin-top:9px;flex-wrap:wrap}
.tool{border:1px solid var(--line2);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--tx2);
display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:var(--p2)}
.tool:hover{border-color:var(--gold);color:var(--gold)}
.upreview{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.upthumb{width:74px;height:74px;border-radius:8px;overflow:hidden;border:1px solid var(--line2);position:relative}
.upthumb img{width:100%;height:100%;object-fit:cover}
.upthumb .sz{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.65);color:#fff;font-size:8.5px;
text-align:center;font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;padding:1px}
.bgnote{border:1px dashed var(--line2);border-radius:9px;padding:9px 11px;margin-top:9px;font-size:11.5px;
color:var(--tx3);line-height:1.6}
.bgnote b{color:var(--gold)}
.okline{color:var(--live);font-size:12px;margin-top:6px}
/* nav Post button carrying the profile banner */
.postbtn.banner{background:var(--p3);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);overflow:hidden;position:relative}
.postbtn .bnr{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9}
.postbtn .bnr::after{content:"";position:absolute;inset:0;background:rgba(11,15,23,.32)}
.postbtn i,.postbtn .lbl{position:relative;z-index:1}
/* share sheet */
.shsheet{position:fixed;inset:0;z-index:320;background:var(--scrim);display:none;align-items:center;justify-content:center;padding:5vh 4vw}
.shsheet.on{display:flex}
.shsheet-c{width:100%;max-width:400px;background:var(--p1);border:1px solid var(--line2);border-radius:14px;
box-shadow:0 24px 70px var(--shadow);overflow:hidden}
.shsheet-h{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line)}
.shsheet-h b{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.04em;flex:1}
.shsheet-b{padding:11px 13px}
.shrow{display:flex;align-items:center;gap:10px;width:100%;padding:9px 0;border-bottom:1px solid var(--line);text-align:left}
.shrow:last-of-type{border-bottom:0}
.shrow:hover .t b{color:var(--gold)}
.shrow[hidden]{display:none}
.shrow .ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
font-size:15px;flex:0 0 auto;background:var(--p2);color:var(--tx2)}
.shrow .ic.wa{background:rgba(37,211,102,.14);color:var(--wa)}
.shrow .ic.xx{background:rgba(255,255,255,.08);color:var(--tx)}
.shrow .ic.tg{background:rgba(42,171,238,.14);color:var(--tg)}
.shrow .t{flex:1;min-width:0}
.shrow .t b{display:block;font-size:13.5px}
.shrow .t span{font-size:11.5px;color:var(--tx3);display:block}
.shrow.copied .t b::after{content:" · tersalin";color:var(--live);font-weight:400;font-size:11.5px}
.shlink{display:flex;gap:7px;margin-top:11px}
.shlink input{flex:1;background:var(--p2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;
font-size:12px;color:var(--tx2)}
/* "+N lagi" sheet */
.fsheet{position:fixed;inset:0;z-index:320;background:var(--scrim);display:none;align-items:center;justify-content:center;padding:5vh 4vw}
.fsheet.on{display:flex}
.fsheet-c{width:100%;max-width:420px;background:var(--p1);border:1px solid var(--line2);border-radius:14px;
box-shadow:0 24px 70px var(--shadow);overflow:hidden;max-height:82vh;display:flex;flex-direction:column}
.fsheet-h{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line);flex:0 0 auto}
.fsheet-h b{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.04em;flex:1}
.fsheet-b{padding:12px 13px;overflow-y:auto}
.fgrp{margin-bottom:13px}
.fgh{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.fgh span{color:var(--gold)}
.fgi{display:flex;gap:6px;flex-wrap:wrap}
.pill.more{border-style:dashed;color:var(--gold);border-color:var(--goldd);cursor:pointer}
/* global one-shot notice */
.flash{position:fixed;left:50%;transform:translateX(-50%);top:60px;z-index:340;max-width:min(560px,92vw);
display:flex;gap:9px;align-items:flex-start;background:var(--p3);border:1px solid var(--goldd);
border-radius:11px;padding:10px 14px;font-size:13px;line-height:1.5;box-shadow:0 14px 40px var(--shadow);
animation:flashIn .25s ease both}
.flash i{color:var(--gold);font-size:16px;flex:0 0 auto;margin-top:1px}
@keyframes flashIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:760px){.flash{top:auto;bottom:calc(76px + env(safe-area-inset-bottom))}}
/* wrapper that keeps pasted media inside the card, in normal flow */
.lnkwrap{margin-top:8px;display:block;max-width:100%}
.lnkwrap .lnkmedia{margin:0 0 8px}
.lnkwrap .lnkmedia:last-child{margin-bottom:0}
/* shared composer (inline + sheet) */
.composer-form{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;
background:var(--p1);margin-bottom:12px}
.composer-form.sheet{border:0;border-radius:0;margin:0;background:transparent}
.cf-bnr{position:absolute;inset:0 0 auto 0;height:120px;background-size:cover;background-position:center;
opacity:.5;pointer-events:none}
.cf-bnr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,23,.35),var(--p1) 92%)}
html[data-theme="light"] .cf-bnr::after{background:linear-gradient(180deg,rgba(255,255,255,.4),var(--p1) 92%)}
.composer-form.sheet .cf-bnr::after{background:linear-gradient(180deg,rgba(11,15,23,.35),var(--p1) 92%)}
.cf-in{position:relative;z-index:1;padding:11px 12px}
.composer-form.sheet .cf-in{padding:12px 13px}
.cf-row{display:flex;gap:10px;align-items:flex-start}
.cf-body{flex:1;min-width:0;background:var(--p2);border:1px solid var(--line);border-radius:10px;
padding:9px 11px;font-size:14px;color:var(--tx);resize:vertical;min-height:44px}
.cf-body:focus{outline:none;border-color:var(--goldd)}
.cf-tools{display:flex;gap:7px;align-items:center;margin-top:9px;flex-wrap:wrap}
.cf-tools .sp{flex:1}
.cf-tools .tool{cursor:pointer}
.cf-hint{font-size:11.5px}
.cf-prev{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.cf-prev:empty{margin:0}
.cf-err:empty,.cf-attach:empty{display:none}
.cf-attach{margin-top:9px}
/* destructive actions read as destructive */
.act-pop .danger,.iact.danger{color:var(--red)}
.act-pop .danger:hover,.iact.danger:hover{background:rgba(248,113,113,.12);color:var(--red)}
/* ============================================================
v5.4 — link preview cards
============================================================ */
.lcard{display:flex;border:1px solid var(--line2);border-radius:11px;background:var(--p2);
overflow:hidden;margin-top:9px;max-width:100%}
.lcard:hover{border-color:var(--goldd)}
.lcard.t-rich{flex-direction:column}
/* Once a player is inserted the card MUST stack, whatever tier it was: a
full-width iframe inside a row flex collapsed the text to one letter wide. */
.lcard.has-frame{flex-direction:column}
.lcard.has-frame .lc-bd{width:100%}
.lc-im{display:block;position:relative;background:linear-gradient(160deg,var(--ph1),var(--ph2));
aspect-ratio:1.91/1;overflow:hidden}
.lc-im img{width:100%;height:100%;object-fit:cover;display:block}
.lc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(11,15,23,.35);color:#fff;font-size:34px;transition:background .15s}
.lcard:hover .lc-play{background:rgba(11,15,23,.15)}
.lc-bd{padding:10px 12px;min-width:0;flex:1}
.lc-dm{font-size:11px;color:var(--tx3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lc-tier{border:1px solid var(--line2);border-radius:3px;padding:0 5px;font-size:9.5px;
font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.lc-ti{display:block;font-size:14px;font-weight:600;line-height:1.35;margin:3px 0 2px;
overflow-wrap:anywhere}
.lc-ti:hover{color:var(--gold)}
.lc-ti.muted-ti{font-weight:500;color:var(--tx2);font-size:13px}
.lc-ds{font-size:12.5px;color:var(--tx3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
.lc-ft{display:flex;gap:9px;align-items:center;margin-top:7px;flex-wrap:wrap}
.lc-go{font-size:11.5px;color:var(--gold)}
.lc-embed{font-size:11.5px;color:var(--tx2);border:1px solid var(--line2);border-radius:99px;
padding:3px 11px;display:inline-flex;align-items:center;gap:5px}
.lc-embed:hover{border-color:var(--gold);color:var(--gold)}
/* minimal tier: no image, so it must still read as intentional */
.lcard.t-minimal{background:var(--p1);border-style:dashed}
.lcard.t-minimal .lc-bd{padding:9px 12px}
/* the on-demand player */
.lc-frame{width:100%;aspect-ratio:16/9;background:var(--ink)}
.lc-frame.k-spotify{aspect-ratio:auto;height:152px}
.lc-frame.k-tiktok{aspect-ratio:9/16;max-height:640px}
.lc-frame iframe{width:100%;height:100%;border:0;display:block}
/* composer live link preview */
.cf-linkprev{margin-top:9px}
.cf-linkprev[hidden]{display:none}
.cfp{display:flex;gap:10px;align-items:center;border:1px solid var(--line2);border-radius:10px;
background:var(--p2);padding:8px 9px;position:relative}
.cfp.minimal{border-style:dashed;background:var(--p1)}
.cfp-th{width:56px;height:56px;border-radius:7px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.cfp.minimal .cfp-th:not(img){display:none}
.cfp-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cfp-dm{font-size:10.5px;color:var(--tx3);text-transform:lowercase}
.cfp-ti{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cfp-ds{font-size:11.5px;color:var(--tx3);line-height:1.4;overflow:hidden;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.cfp-x{position:absolute;top:5px;right:6px;width:20px;height:20px;border-radius:50%;
background:var(--p3);color:var(--tx3);font-size:14px;line-height:1;display:flex;
align-items:center;justify-content:center}
.cfp-x:hover{color:var(--red);background:var(--p1)}
/* while it is being fetched, the card breathes rather than sitting dead */
.cfp.skel .cfp-th,.cfp.skel .cfp-ti{position:relative;overflow:hidden}
.cfp.skel .cfp-ti{color:var(--tx3);font-weight:500}
.cfp.skel .cfp-th::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
animation:cfpShine 1.1s ease-in-out infinite}
@keyframes cfpShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){.cfp.skel .cfp-th::after{animation:none}}
/* ============================================================
v5.7 — Spotify: now playing, connected accounts
============================================================ */
.npcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line2);border-radius:12px;
padding:10px 12px;margin:12px 0 0;
background:linear-gradient(100deg,rgba(29,185,84,.10),transparent 62%)}
html[data-theme="light"] .npcard{background:linear-gradient(100deg,rgba(29,185,84,.14),transparent 62%)}
.np-art{width:52px;height:52px;border-radius:8px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(150deg,var(--ph1),var(--ph2))}
.np-art.ph{display:flex;align-items:center;justify-content:center;color:var(--sp);font-size:20px}
.np-i{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.np-k{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--sp);display:flex;align-items:center;gap:6px}
.np-eq{display:inline-flex;gap:1.5px;align-items:flex-end;height:9px}
.np-eq i{width:2px;background:var(--sp);border-radius:1px;height:4px;animation:npEq .9s ease-in-out infinite}
.np-eq i:nth-child(2){animation-delay:.15s}
.np-eq i:nth-child(3){animation-delay:.3s}
@keyframes npEq{0%,100%{height:3px}50%{height:9px}}
@media (prefers-reduced-motion: reduce){.np-eq i{animation:none;height:6px}}
.np-t{font-size:14px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-a{font-size:12px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-bar{display:block;height:3px;border-radius:99px;background:var(--p3);margin-top:5px;overflow:hidden}
.np-bar i{display:block;height:100%;background:var(--sp)}
.np-acts{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.np-open{font-size:11.5px;color:var(--tx3)}
.np-open:hover{color:var(--sp)}
.np-recent{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--tx3)}
.np-rk{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--tx3)}
.np-ri small{color:var(--tx3);opacity:.75}
.np-ri a:hover{color:var(--sp)}
@media(max-width:600px){
.npcard{flex-wrap:wrap}
.np-acts{flex-direction:row;width:100%;justify-content:space-between;align-items:center}
}
/* connected accounts, in settings */
.set-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);
font-family:'Barlow Condensed',sans-serif;font-weight:600;margin-bottom:8px}
.conn{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.conn:last-of-type{border-bottom:0}
.conn-ic{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;
justify-content:center;font-size:17px;background:var(--p2);color:var(--tx3)}
.conn-ic.sp{color:var(--sp)}
.conn-ic.sp.on{background:rgba(29,185,84,.14)}
.conn-t{flex:1;min-width:0;display:flex;flex-direction:column}
.conn-t b{font-size:13.5px;display:flex;align-items:center;gap:7px}
.conn-t span{font-size:12px;color:var(--tx3)}
.conn-note{border:1px dashed var(--line2);border-radius:9px;padding:9px 11px;margin-top:9px;
font-size:11.5px;color:var(--tx3);line-height:1.7}
.conn-note b{color:var(--tx2)}
.conn-note code{font-size:11px;color:var(--gold)}
.conn-form{margin-top:11px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.conn-form select{background:var(--p2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;
color:var(--tx);font-size:13px;min-width:240px}
.conn-form .hint{font-size:11.5px;color:var(--tx3);margin-top:5px;line-height:1.5}
.chk{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--tx2);cursor:pointer}
.btn.spot{background:var(--sp);color:var(--on-sp)}
.btn.spot:hover{filter:brightness(1.08)}
/* ============================================================
v5.8 — sitewide search results
============================================================ */
.searchform{display:flex;align-items:center;gap:9px;background:var(--p1);border:1px solid var(--line2);
border-radius:11px;padding:0 13px;height:46px;margin:16px 0 4px}
.searchform i{color:var(--tx3);font-size:18px}
.searchform input{flex:1;border:0;background:transparent;color:var(--tx);font-size:14.5px;outline:none}
.sres{border:1px solid var(--line);border-radius:12px;background:var(--p1);margin-bottom:11px;overflow:hidden}
.sres-h{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--line);
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--tx3)}
.sres-h span{margin-left:auto;color:var(--gold)}
.sres-i{display:flex;align-items:center;gap:11px;padding:9px 13px;border-bottom:1px solid var(--line)}
.sres-i:last-child{border-bottom:0}
.sres-i:hover{background:var(--p2)}
.sres-i:hover b{color:var(--gold)}
.sres-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sres-t b{font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sres-t small{font-size:11.5px;color:var(--tx3)}
.sres-cv{width:28px;height:38px;border-radius:4px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.sres-score{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--live);
min-width:26px;text-align:center;flex:0 0 auto;font-variant-numeric:tabular-nums}
/* listening moment on the timeline */
.mo.t-listen .dot,.mo.t-listen .mo-dot{border-color:var(--sp);color:var(--sp)}
.card.soft.listen{background:linear-gradient(100deg,rgba(29,185,84,.07),transparent 55%)}
.lsn-art{width:34px;height:34px;border-radius:7px;object-fit:cover;flex:0 0 auto;
display:flex;align-items:center;justify-content:center;color:var(--sp);
background:linear-gradient(150deg,var(--ph1),var(--ph2))}
.lsn-artist{color:var(--sp)}
.lsn-sub{display:block;font-size:11.5px;color:var(--tx3);margin-top:1px}
.lsn-open{font-size:11.5px;color:var(--tx3);margin-left:auto;flex:0 0 auto}
.lsn-open:hover{color:var(--sp)}
/* friends rail with presence */
.fr-count{margin-left:auto;font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;
letter-spacing:0;text-transform:none;color:var(--live)}
.panel h3{display:flex;align-items:center;gap:7px}
.frlist{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.fr{display:flex;align-items:center;gap:9px;padding:5px 0}
.fr:hover b{color:var(--gold)}
.fr-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;position:relative;overflow:visible;
display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--gold);
background:linear-gradient(135deg,var(--ph1),var(--ph2))}
.fr-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.fr-dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
background:var(--tx3);border:2px solid var(--p1)}
.fr-dot.on{background:var(--live)}
.fr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.fr-t b{font-size:12.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-a{font-size:11px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
display:flex;align-items:center;gap:4px}
.fr-a i{font-size:11px}
.fr-a.skaha{color:var(--live)}
.fr-a.listen{color:var(--sp)}
/* ============================================================
v5.9 — feed account posts
============================================================ */
.mo.t-feed .mo-dot,.mo.t-feed .dot{border-color:var(--amber);color:var(--amber)}
.mo-card.feedpost{border-left:2px solid rgba(240,180,41,.35);
background:linear-gradient(90deg,rgba(240,180,41,.045),transparent 40%)}
.feedav-sm{position:relative}
.feedav-sm::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;
border-radius:50%;background:var(--amber);border:2px solid var(--p1)}
.feedtag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9px;letter-spacing:.13em;
text-transform:uppercase;padding:1px 5px;border-radius:3px;border:1px solid var(--line2);color:var(--tx3);flex:0 0 auto}
.feedtag.on{border-color:var(--amber);color:var(--amber)}
.feedsrc{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--tx3)}
.feedsrc a{color:var(--gold)}
.feedkind{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.11em;
text-transform:uppercase;color:var(--amber)}
.feednote{margin-left:auto;font-size:10.5px;opacity:.7}
.iact.off{color:var(--tx3);opacity:.5;cursor:default}
.iact.off:hover{background:none;color:var(--tx3)}
/* ============================================================
v6.0 — anime enrichment tabs
============================================================ */
.tcnt{opacity:.6;font-size:11px}
.tadm{margin-left:auto;color:var(--amber) !important}
.srcline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 10px;font-size:11.5px;color:var(--tx3)}
.srcchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:99px;
padding:3px 9px;font-size:11px;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.06em}
.srcchip i{font-size:11px}
.srcchip.al{border-color:rgba(2,169,255,.5);color:var(--al)}
.srcchip.tmdb{border-color:rgba(1,180,228,.5);color:var(--tmdb)}
.srcchip.kf{border-color:rgba(126,78,160,.7);color:var(--kf)}
.srcchip.manual{border-style:dashed;color:var(--amber);border-color:var(--amber)}
.anv{display:flex;gap:15px}
.anv-cover{width:150px;flex:0 0 auto}
.anv-cover img,.anv-cover .ph{width:100%;aspect-ratio:2/3;border-radius:10px;object-fit:cover;
background:linear-gradient(160deg,var(--ph1),var(--ph2));display:flex;align-items:center;justify-content:center;
color:var(--tx3);font-size:11px;text-align:center}
.anv-main{flex:1;min-width:0}
.anv-syn{font-size:13.5px;line-height:1.7;color:var(--tx2)}
.anv-more{display:inline-block;margin-top:6px;font-size:12px;color:var(--gold)}
.metagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-top:14px}
.mcell{border:1px solid var(--line);border-radius:9px;background:var(--p1);padding:8px 10px}
.mcell .k{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--tx3);display:block}
.mcell .v{font-size:13px;font-weight:600;margin-top:2px;display:block}
.mcell .v.gold{color:var(--gold)}
.annext{border:1px solid var(--goldd);background:var(--gold-dim);border-radius:10px;padding:9px 12px;
margin-top:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.annext .n{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--gold);letter-spacing:.03em}
.watch{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.wprov{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:9px;
padding:6px 11px;font-size:12.5px;background:var(--p1)}
a.wprov:hover{border-color:var(--gold);color:var(--gold)}
.langbar{display:flex;gap:6px;margin:2px 0 10px;flex-wrap:wrap}
.langbar button{border:1px solid var(--line2);border-radius:99px;padding:3px 11px;font-size:11.5px;color:var(--tx2)}
.langbar button.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
/* Two cards per row at most. Four columns squeezed the character name, the
portrait and the voice actor into ~60px each, which is what produced the
overlapping mess. */
.castgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.cast{display:flex;border:1px solid var(--line);border-radius:10px;background:var(--p1);overflow:hidden}
.cast .side{min-width:0;display:flex;gap:9px;padding:9px 10px;align-items:center}
.cast .side:first-child{flex:1 1 55%}
.cast .side.va{border-left:1px solid var(--line);background:var(--p2);flex:1 1 45%}
.cast .side.va > span{display:flex;gap:9px;align-items:center;min-width:0;flex:1}
/* THE BUG: the rule above sets display:flex, which beats the browser's
[hidden]{display:none}. Both language blocks rendered at once and collided.
An explicit [hidden] rule at the same specificity fixes it. */
.cast .side.va > span[hidden]{display:none}
.cast .por{width:40px;height:54px;border-radius:5px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.cast .cn{min-width:0;display:flex;flex-direction:column;gap:1px}
.cast .nm{font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.nm:hover{color:var(--gold)}
.cast .rl{font-family:'Barlow Condensed',sans-serif;font-size:9.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stafgrp{border:1px solid var(--line);border-radius:11px;background:var(--p1);margin-bottom:11px;overflow:hidden}
.stafgrp .h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--tx3);flex-wrap:wrap}
.stafgrp .h .sp{flex:1}
.strow{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.strow:last-child{border-bottom:0}
.strow .role{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--tx3);min-width:160px;flex:0 0 auto}
.strow .who{flex:1;min-width:0;font-weight:600}
.strow.credit .who{font-weight:400;font-size:12px;color:var(--tx3)}
.strow.credit a{color:var(--gold)}
.emptystate{padding:20px 14px;text-align:center;color:var(--tx3);font-size:12.5px;line-height:1.8}
.emptystate b{color:var(--amber)}
.eplist{display:flex;flex-direction:column;gap:8px}
.ep{display:flex;gap:11px;border:1px solid var(--line);border-radius:10px;background:var(--p1);padding:9px;align-items:flex-start}
.ep .th{width:120px;aspect-ratio:16/9;border-radius:6px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(150deg,var(--ph1),var(--ph2));display:flex;align-items:center;
justify-content:center;color:var(--tx3);font-size:10.5px;text-align:center}
.ep .b{flex:1;min-width:0}
.ep .n{font-family:'Bebas Neue',sans-serif;font-size:16px;color:var(--gold);letter-spacing:.04em}
.ep .t{font-size:13.5px;font-weight:600;line-height:1.3;margin:1px 0 3px}
.ep .s{font-size:12px;color:var(--tx3);line-height:1.6}
.ep .s.none{font-style:italic;opacity:.7}
.ep .f{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap;font-size:11.5px}
.ep .f a{color:var(--gold)}
.mtag{border:1px dashed var(--amber);color:var(--amber);border-radius:3px;padding:0 5px;font-size:10px;
font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.epsel{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.epbtn{border:1px solid var(--line2);border-radius:7px;min-width:36px;padding:5px 9px;font-size:12.5px;
color:var(--tx2);text-align:center;flex:0 0 auto}
.epbtn:hover{border-color:var(--gold);color:var(--gold)}
.epbtn.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
.epbtn.empty{border-style:dashed;color:var(--tx3)}
.epbtn.add{border-style:dashed;color:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){
.anv{flex-direction:column}
.anv-cover{width:130px}
.castgrid{grid-template-columns:1fr}
.cast{flex-direction:column}
.cast .side,.cast .side.va{flex:1 1 auto;width:100%}
.cast .side.va{border-left:0;border-top:1px solid var(--line)}
.strow{flex-wrap:wrap}
.strow .role{min-width:0;width:100%}
.row2{grid-template-columns:1fr}
.ep{flex-wrap:wrap}
.ep .th{width:100%}
}
.anv-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.03em;line-height:1.05;font-weight:400}
/* ============================================================
v6.5 — feed header media: still by default, expands on hover
============================================================ */
/* padding-bottom is a percentage of WIDTH, so the ratio transition needs no JS
measurement and survives any container width. */
.pbanner.feedban{position:relative;overflow:hidden;background:var(--ph2);height:auto;
padding-bottom:30%;transition:padding-bottom .34s cubic-bezier(.4,0,.2,1);border-radius:0}
.pbanner.feedban.expanded{padding-bottom:56.25%} /* 16:9 */
.pbanner.feedban .fb-still,
.pbanner.feedban .fb-media,
.pbanner.feedban .fb-slot > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.pbanner.feedban .fb-still{z-index:0}
.pbanner.feedban .fb-media{z-index:1}
.pbanner.feedban .fb-slot{position:absolute;inset:0;z-index:1;overflow:hidden;
opacity:0;transition:opacity .3s ease;pointer-events:none}
.pbanner.feedban.playing .fb-slot{opacity:1}
/* The player is oversized so its chrome falls outside the crop, and click-through
so the banner never behaves like a video player. */
.pbanner.feedban .fb-slot iframe{position:absolute;top:50%;left:50%;width:132%;height:132%;
transform:translate(-50%,-50%);pointer-events:none}
.pbanner.feedban::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(11,15,23,.18) 0%,rgba(11,15,23,0) 32%,rgba(11,15,23,.70) 80%,var(--ink) 100%)}
.fb-ctl{position:absolute;right:9px;top:9px;z-index:4;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fb-btn{background:rgba(11,15,23,.7);border:1px solid var(--line2);color:var(--tx2);border-radius:99px;
padding:4px 10px;font-size:11px;display:inline-flex;gap:5px;align-items:center;backdrop-filter:blur(6px)}
.fb-btn:hover{color:var(--gold);border-color:var(--gold)}
.fb-btn[aria-pressed="true"]{color:var(--gold);border-color:var(--goldd);background:rgba(232,185,74,.16)}
.fb-hint{position:absolute;left:11px;top:11px;z-index:4;font-size:10.5px;color:var(--tx3);
background:rgba(11,15,23,.6);border-radius:5px;padding:2px 8px;backdrop-filter:blur(6px);
font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pbanner.feedban:hover .fb-hint{opacity:0;transition:opacity .2s}
/* Viewer chose stills only, or the play budget is spent: never expand or play. */
.pbanner.feedban.static-only .fb-slot,
.pbanner.feedban.spent .fb-slot{display:none}
@media (max-width:700px){ .pbanner.feedban{padding-bottom:40%} }
/* Touch has no hover, so the trailer is opt-in via the buttons — which means they
must be visible rather than revealed, and compact enough not to crowd a phone. */
@media (pointer: coarse){
.fb-ctl{gap:5px}
.fb-btn{padding:6px 9px}
.fb-btn span{display:none}
.fb-hint{font-size:10px;padding:2px 7px}
}
/* An endlessly moving header makes some readers ill; honour the OS setting. */
@media (prefers-reduced-motion: reduce){
.pbanner.feedban{transition:none}
.pbanner.feedban .fb-slot{display:none}
}
.pf-stats.feedone{max-width:190px}
/* quote affordance on feed rows */
.qsm{border:1px solid var(--line2);border-radius:99px;padding:3px 10px;font-size:11px;color:var(--tx2);
flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.qsm:hover{border-color:var(--gold);color:var(--gold)}
.strow .qsm{opacity:.5;transition:opacity .15s}
.strow:hover .qsm,.strow .qsm:focus-visible{opacity:1}
.cast .q{position:absolute;top:5px;right:6px;width:22px;height:22px;border-radius:6px;background:var(--p3);
color:var(--tx3);font-size:11px;display:flex;align-items:center;justify-content:center;
opacity:.5;transition:opacity .15s;z-index:2}
.cast:hover .q,.cast .q:focus-visible{opacity:1}
.cast .q:hover{color:var(--gold)}
@media (pointer: coarse){
.strow .qsm,.cast .q{opacity:1} /* no hover on touch, so always visible */
}
/* ============================================================
v6.6 — Steam sign-in
============================================================ */
.conn-ic.st{color:var(--steam)}
.conn-ic.st.on{background:rgba(102,192,244,.14);overflow:hidden;padding:0}
.btn.steam{background:var(--steam);color:var(--on-steam)}
.btn.steam:hover{filter:brightness(1.08)}
.steamwho{display:flex;gap:11px;align-items:center;border:1px solid var(--line2);border-radius:11px;
background:var(--p2);padding:10px 12px;margin-bottom:16px}
.steamwho img{width:46px;height:46px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.steamwho .sw-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.steamwho .k{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--steam);display:flex;align-items:center;gap:5px}
.steamwho b{font-size:14px}
.steamwho a{font-size:11.5px;color:var(--tx3)}
.steamwho a:hover{color:var(--gold)}
.steamcard{display:flex;gap:11px;align-items:center;border:1px solid var(--line2);border-radius:11px;
padding:9px 12px;margin:12px 0 0;background:linear-gradient(100deg,rgba(102,192,244,.09),transparent 60%)}
.steamcard:hover{border-color:var(--steam)}
.steamcard img,.steamcard .sc-ph{width:42px;height:42px;border-radius:9px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(150deg,var(--ph1),var(--ph2));display:flex;align-items:center;
justify-content:center;color:var(--steam);font-size:19px}
.steamcard .sc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.steamcard .sc-k{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--steam);display:flex;align-items:center;gap:5px}
.steamcard .sc-n{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steamcard .sc-go{font-size:11.5px;color:var(--tx3);flex:0 0 auto}
.steamcard:hover .sc-go{color:var(--steam)}
/* Steam library on a profile, and the per-game switches in settings */
.libcard{border:1px solid var(--line2);border-radius:11px;padding:10px 12px;margin-top:9px;
background:linear-gradient(100deg,rgba(102,192,244,.07),transparent 60%)}
.libcard .lc-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.libcard .lc-k{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--steam);display:flex;align-items:center;gap:5px}
.libcard .lc-n{font-size:12px;color:var(--tx3);margin-left:auto}
.libcard .lc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:5px}
.libcard .lc-g{display:flex;align-items:baseline;gap:8px;padding:5px 8px;border-radius:7px;
background:var(--p2);font-size:12.5px}
.libcard .lc-g:hover{background:var(--p3)}
.libcard .lc-g:hover .g-n{color:var(--steam)}
.libcard .g-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libcard .g-h{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;color:var(--tx3);
flex:0 0 auto;font-variant-numeric:tabular-nums}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:5px;margin-top:9px}
.libitem button{display:flex;align-items:center;gap:7px;width:100%;padding:6px 9px;border-radius:7px;
background:var(--p2);border:1px solid var(--line);font-size:12.5px;color:var(--tx2);text-align:left}
.libitem button:hover{border-color:var(--steam)}
.libitem.off button{opacity:.45;border-style:dashed}
.libitem .ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libitem .lh{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--tx3);flex:0 0 auto}
/* ============================================================
v6.8 — imported staff: groups, studio blocks, theme songs
============================================================ */
.gsec{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--tx3);padding:8px 12px 3px;border-top:1px solid var(--line)}
.stafgrp .gsec:first-of-type{border-top:0}
.strow.blocky{align-items:flex-start;flex-wrap:nowrap}
.strow.blocky .role{padding-top:2px}
.strow .role .jp{display:block;font-family:'Barlow',sans-serif;font-weight:400;font-size:10.5px;
letter-spacing:0;text-transform:none;color:var(--tx3);margin-top:1px}
.strow .who .nlist{display:flex;flex-wrap:wrap;gap:4px}
.strow .who .nm{display:inline-flex;align-items:baseline;gap:5px;background:var(--p2);
border:1px solid var(--line);border-radius:99px;padding:2px 9px;font-size:12px;font-weight:500}
.strow .who .nm .jp{color:var(--tx3);font-size:11px}
.sblk{display:block;border-left:2px solid rgba(126,78,160,.4);padding-left:9px;margin:6px 0 2px}
.sname{display:flex;align-items:baseline;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--kf);margin-bottom:4px}
.sname .jp{font-family:'Barlow',sans-serif;font-weight:400;letter-spacing:0;text-transform:none;
font-size:10.5px;color:var(--tx3)}
.stafgrp.theme{border-color:rgba(126,78,160,.45);
background:linear-gradient(100deg,rgba(126,78,160,.07),transparent 60%)}
.stafgrp.theme .h .tkind{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;
letter-spacing:.13em;text-transform:uppercase;color:var(--kf)}
.stafgrp.theme .h .ttitle{font-family:'Barlow',sans-serif;font-size:13.5px;letter-spacing:0;
text-transform:none;color:var(--tx)}
@media(max-width:700px){
.strow.blocky{flex-wrap:wrap}
.strow.blocky .role{width:100%}
}
/* ============================================================
v7.0 — staff tab: tabs, dropdown groups, in-feed search;
staff pages
============================================================ */
.fsearch{display:flex;align-items:center;gap:10px;background:var(--p1);border:1px solid var(--line2);
border-radius:11px;padding:0 13px;height:44px;margin-bottom:11px}
.fsearch input{flex:1;border:0;background:transparent;font-size:14.5px;outline:none;color:var(--tx)}
.fsearch i{color:var(--tx3);font-size:15px}
.fsearch .cnt{font-size:11.5px;color:var(--tx3);white-space:nowrap}
.fsearch .clr{display:none;color:var(--tx3);font-size:20px;line-height:1;padding:0 4px}
.fsearch.has .clr{display:block}
.fsearch .clr:hover{color:var(--red)}
.stabs{display:flex;gap:5px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.stabs::-webkit-scrollbar{display:none}
.stabs button{border:1px solid var(--line2);border-radius:8px;padding:6px 12px;font-size:12.5px;
color:var(--tx2);white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
.stabs button:hover{border-color:var(--gold);color:var(--gold)}
.stabs button.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
.stabs button.theme{border-style:dashed;color:var(--kf);border-color:rgba(126,78,160,.5)}
.stabs button.theme.on{background:var(--kf);color:var(--on-kf);border-style:solid}
[data-pane]{display:none}
[data-pane].on{display:block}
.gtools{margin-bottom:8px}
.gtool{border:1px solid var(--line2);border-radius:99px;padding:4px 11px;font-size:11.5px;color:var(--tx3)}
.gtool:hover{border-color:var(--gold);color:var(--gold)}
.grp{border:1px solid var(--line);border-radius:11px;background:var(--p1);margin-bottom:7px;overflow:hidden}
.grp .gh{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;text-align:left}
.grp .gh:hover{background:var(--p2)}
.grp .car{color:var(--tx3);font-size:11px;transition:transform .16s;flex:0 0 auto;font-style:normal}
.grp.closed .car{transform:rotate(-90deg)}
.grp .gn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.11em;
text-transform:uppercase;color:var(--tx2);flex:1;min-width:0}
.grp .gh:hover .gn{color:var(--gold)}
.grp .gc{font-size:11px;color:var(--tx3);flex:0 0 auto}
.grp.closed .gb{display:none}
.grp .gb{border-top:1px solid var(--line)}
.strow .who .nm{cursor:pointer}
/* search results */
.rhit{border:1px solid var(--line);border-radius:10px;background:var(--p1);margin-bottom:7px;overflow:hidden}
.rhit .hh{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)}
.rhit .ic{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;
justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;
background:var(--p3);color:var(--tx2)}
.rhit .ic.st{background:rgba(126,78,160,.16);color:var(--kf)}
.rhit .hn{flex:1;min-width:0}
.rhit .hn b{font-size:13.5px;display:block}
.rhit .hn .ja{color:var(--tx3);font-weight:400;font-size:12px}
.rhit .hn small{font-size:11px;color:var(--tx3)}
.rhit .hn:hover b{color:var(--gold)}
.rhit .hc{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--gold);flex:0 0 auto}
.rhit .hc small{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:.1em;
text-transform:uppercase;color:var(--tx3);display:block;text-align:right}
.rline{display:flex;gap:10px;align-items:baseline;padding:6px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.rline:last-child{border-bottom:0}
.rline .rr{min-width:180px;flex:0 0 auto;font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.rline .re{flex:1;display:flex;gap:4px;flex-wrap:wrap}
.rline .rs{font-size:11px;color:var(--kf)}
.epc{background:var(--p2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:11.5px;
font-variant-numeric:tabular-nums}
a.epc:hover{border-color:var(--gold);color:var(--gold)}
.epc.theme{border-color:rgba(126,78,160,.5);color:var(--kf)}
.epc.st{border-color:rgba(126,78,160,.5);color:var(--kf)}
/* ---- staff pages ---- */
.crumb{font-size:12px;color:var(--tx3);margin-bottom:11px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--gold)}
.phead{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--p1);position:relative}
.phead .ph-top{padding:15px 17px;background:linear-gradient(105deg,rgba(126,78,160,.13),transparent 62%)}
.phead .kind{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:.15em;
text-transform:uppercase;color:var(--kf);display:flex;align-items:center;gap:6px}
.phead h1{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:.02em;line-height:1.02;margin:3px 0 0}
.phead .ph-ja{font-size:15px;color:var(--tx2);margin-top:1px}
.phead .ph-alt{font-size:11.5px;color:var(--tx3);margin-top:3px}
.ph-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));border-top:1px solid var(--line)}
.ph-stats .c{padding:11px 13px;border-right:1px solid var(--line)}
.ph-stats .c:last-child{border-right:0}
.ph-stats .n{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--gold);display:block;line-height:1}
.ph-stats .l{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--tx3)}
.q-badge{position:absolute;top:13px;right:13px;width:26px;height:26px;border-radius:7px;background:var(--p3);
border:1px solid var(--line2);z-index:3}
h2.ssec{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--tx3);margin:20px 0 8px;display:flex;align-items:center;gap:9px}
h2.ssec .sp{flex:1;height:1px;background:var(--line)}
.wshow{border:1px solid var(--line);border-radius:12px;background:var(--p1);overflow:hidden;margin-bottom:10px}
.wshow .wsh{display:flex;gap:11px;align-items:center;padding:10px 13px;border-bottom:1px solid var(--line)}
.wshow .wst{flex:1;min-width:0}
.wshow .wst b{font-size:14px;display:block}
.wshow .wst small{font-size:11.5px;color:var(--tx3)}
.wshow .wgo{font-size:11.5px;color:var(--gold);flex:0 0 auto}
.wrow{display:flex;gap:11px;align-items:baseline;padding:8px 13px;border-bottom:1px solid var(--line);position:relative}
.wrow:last-child{border-bottom:0}
.wrow:hover{background:var(--p2)}
.wrow .wr{min-width:200px;flex:0 0 auto}
.wrow .wr b{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--gold);display:block}
.wrow .wr span{font-size:10.5px;color:var(--tx3)}
.wrow .we{flex:1;min-width:0;display:flex;gap:4px;flex-wrap:wrap}
.colist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.co{display:flex;gap:9px;align-items:center;padding:7px 10px;border:1px solid var(--line);
border-radius:9px;background:var(--p1)}
.co:hover{border-color:var(--gold)}
.co .ic{width:28px;height:28px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;
justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;
background:var(--p3);color:var(--tx2)}
.co .ic.st{background:rgba(126,78,160,.16);color:var(--kf)}
.co .t{flex:1;min-width:0}
.co .t b{font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co .t small{font-size:10.5px;color:var(--tx3)}
.co .n{font-family:'Bebas Neue',sans-serif;font-size:16px;color:var(--gold);flex:0 0 auto}
.ssrc{border:1px solid rgba(126,78,160,.5);background:rgba(126,78,160,.07);border-radius:11px;
padding:11px 13px;margin-top:16px;font-size:12.5px;line-height:1.7;color:var(--tx2)}
.ssrc b{color:var(--kf)}
.ssrc code{color:var(--gold);font-size:11.5px}
.staffsearch{display:flex;align-items:center;gap:10px;background:var(--p1);border:1px solid var(--line2);
border-radius:12px;padding:0 14px;height:48px;margin-bottom:10px}
.staffsearch input{flex:1;border:0;background:transparent;font-size:15px;outline:none;color:var(--tx)}
.staffsearch i{color:var(--tx3);font-size:16px}
.sbuckets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sbuckets a{border:1px solid var(--line2);border-radius:99px;padding:4px 12px;font-size:12px;color:var(--tx2)}
.sbuckets a.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
.shit{display:flex;gap:11px;align-items:center;padding:9px 11px;border:1px solid var(--line);
border-radius:10px;background:var(--p1);margin-bottom:6px}
.shit:hover{border-color:var(--gold)}
.shit .ic{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;
justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;
background:var(--p3);color:var(--tx2)}
.shit .ic.st{background:rgba(126,78,160,.16);color:var(--kf)}
.shit .t{flex:1;min-width:0}
.shit .t b{font-size:13.5px;display:block}
.shit .t .ja{color:var(--tx3);font-weight:400;font-size:12px}
.shit .t small{font-size:11.5px;color:var(--tx3)}
.shit .cnt{font-family:'Bebas Neue',sans-serif;font-size:19px;color:var(--gold);flex:0 0 auto}
.shit .cnt small{font-family:'Barlow Condensed',sans-serif;font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--tx3);display:block;text-align:right}
@media(max-width:700px){
.wrow{flex-wrap:wrap}.wrow .wr{width:100%;min-width:0}
.rline{flex-wrap:wrap}.rline .rr{width:100%}
}
/* staff rows in the nav search dropdown */
.sdrop .shit .av.st{background:rgba(126,78,160,.16);color:var(--kf)}
.sdrop .shit b i{font-style:normal;color:var(--tx3);font-weight:400;font-size:12px}
/* ============================================================
v7.4 — staff page: episode cards with artwork
============================================================ */
.vtoggle{display:flex;gap:5px;margin-left:auto}
.vtoggle button{border:1px solid var(--line2);border-radius:99px;padding:3px 11px;font-size:11px;
color:var(--tx3);letter-spacing:0;text-transform:none;font-family:'Barlow',sans-serif}
.vtoggle button:hover{border-color:var(--gold);color:var(--gold)}
.vtoggle button.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
.wshow .cov{width:38px;height:54px;border-radius:6px;flex:0 0 auto;object-fit:cover;
background:linear-gradient(150deg,var(--ph1),var(--ph2))}
.epgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px;padding:11px 13px}
.epcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--p2);position:relative}
.epcard:hover{border-color:var(--gold)}
.epcard .th{aspect-ratio:16/9;position:relative;overflow:hidden;
background:linear-gradient(140deg,var(--ph1),var(--ph2));display:flex;align-items:center;justify-content:center}
.epcard .th img{width:100%;height:100%;object-fit:cover}
.epcard .th .ph{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--tx3);letter-spacing:.05em}
.epcard .th::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 42%,rgba(11,15,23,.86))}
.epcard .badge{position:absolute;left:8px;top:8px;z-index:2;font-family:'Bebas Neue',sans-serif;font-size:13px;
color:var(--gold);background:rgba(11,15,23,.74);border-radius:5px;padding:1px 7px;letter-spacing:.05em}
.epcard .badge.theme{color:var(--kf)}
.epcard .ttl{position:absolute;left:8px;right:8px;bottom:6px;z-index:2;font-size:12.5px;font-weight:600;
line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epcard .roles{padding:8px 9px;display:flex;flex-wrap:wrap;gap:4px}
.epcard .rl{background:var(--p3);border:1px solid var(--line);border-radius:99px;padding:1px 8px;
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.08em;
text-transform:uppercase;color:var(--gold)}
.epcard .eq{position:absolute;top:7px;right:7px;z-index:3;background:rgba(11,15,23,.72);
border:1px solid var(--line2)}
/* ============================================================
v7.5 — feed panel in the rail, and the signup journey
============================================================ */
.fd{display:flex;gap:9px;align-items:center;padding:6px 4px;border-radius:8px}
.fd:hover{background:var(--p2)}
.fd-av{width:32px;height:32px;border-radius:9px;flex:0 0 auto;overflow:hidden;
background:linear-gradient(150deg,var(--ph1),var(--ph2));display:flex;align-items:center;
justify-content:center;font-size:10px;font-weight:700;color:var(--amber)}
.fd-av img{width:100%;height:100%;object-fit:cover}
.fd-new{flex:0 0 auto;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9.5px;
letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);
border-radius:99px;padding:1px 7px}
/* ---- signup journey ---- */
.ob{max-width:660px;margin:0 auto;border:1px solid var(--line2);border-radius:18px;background:var(--p1);
overflow:hidden;box-shadow:0 26px 70px var(--shadow);position:relative}
.ob-steps{display:flex;gap:6px;padding:16px 22px 0}
.ob-steps span{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.ob-steps span.on::after{content:"";position:absolute;inset:0;background:var(--gold);
transform-origin:left;animation:obfill .45s ease both}
@keyframes obfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ob-hero{position:relative;overflow:hidden;padding:36px 26px 28px;text-align:center;
background:radial-gradient(120% 90% at 50% -10%, rgba(232,185,74,.16), transparent 60%)}
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none}
.b1{width:280px;height:280px;background:rgba(232,185,74,.30);top:-110px;left:-70px;animation:drift1 17s ease-in-out infinite}
.b2{width:240px;height:240px;background:rgba(126,78,160,.34);top:-60px;right:-70px;animation:drift2 21s ease-in-out infinite}
.b3{width:200px;height:200px;background:rgba(29,185,84,.20);bottom:-110px;left:34%;animation:drift3 25s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,30px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,36px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-26px)}}
.glyphs{position:absolute;inset:0;pointer-events:none}
.gl{position:absolute;font-size:20px;opacity:0;animation:obfloat 9s ease-in-out infinite}
@keyframes obfloat{0%{opacity:0;transform:translateY(14px) scale(.9)}18%{opacity:.5}82%{opacity:.5}
100%{opacity:0;transform:translateY(-26px) scale(1.04)}}
.ob-mark{width:74px;height:74px;margin:0 auto 14px;border-radius:20px;position:relative;
background:linear-gradient(145deg,var(--gold),var(--goldd));display:flex;align-items:center;
justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:40px;color:var(--on-gold);
animation:obpop .7s cubic-bezier(.2,1.3,.4,1) both, obbreathe 5s ease-in-out 1s infinite}
@keyframes obpop{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes obbreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ob-mark::after{content:"";position:absolute;inset:-7px;border-radius:24px;border:1px solid var(--goldd);
opacity:.55;animation:obring 3.2s ease-out infinite}
@keyframes obring{0%{transform:scale(.94);opacity:.6}70%{transform:scale(1.16);opacity:0}100%{opacity:0}}
.ob-title{font-family:'Bebas Neue',sans-serif;font-size:46px;letter-spacing:.02em;line-height:1;
position:relative;z-index:2}
.ob-title span{display:inline-block;animation:obrise .55s cubic-bezier(.2,1.1,.35,1) both}
.ob-sub{font-size:14px;color:var(--tx2);margin-top:9px;line-height:1.6;position:relative;z-index:2}
.ob-hero .ob-sub{animation:obrise .55s cubic-bezier(.2,1.1,.35,1) .5s both}
@keyframes obrise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
.typed{color:var(--gold);border-right:2px solid var(--gold);padding-right:2px;animation:obcaret .9s step-end infinite}
@keyframes obcaret{50%{border-color:transparent}}
.ob-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 22px 18px;position:relative;z-index:2}
.wc{border:1px solid var(--line);border-radius:12px;background:var(--p2);padding:13px 11px;text-align:center;
animation:obrise .5s cubic-bezier(.2,1.1,.35,1) both}
.wc:nth-child(1){animation-delay:.75s}.wc:nth-child(2){animation-delay:.88s}.wc:nth-child(3){animation-delay:1.01s}
.wc .ic{font-size:22px;display:block;margin-bottom:6px;animation:obtilt 4.5s ease-in-out infinite}
.wc:nth-child(2) .ic{animation-delay:.6s}.wc:nth-child(3) .ic{animation-delay:1.2s}
@keyframes obtilt{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.wc b{font-size:12.5px;display:block;line-height:1.3}
.wc small{font-size:10.5px;color:var(--tx3);display:block;margin-top:3px;line-height:1.45}
.ob-b{padding:18px 22px 4px}
.ob-b h1{font-family:'Bebas Neue',sans-serif;font-size:31px;letter-spacing:.02em;line-height:1.05}
.ob-foot{display:flex;align-items:center;gap:9px;padding:14px 22px;border-top:1px solid var(--line);
background:var(--p2);position:relative;z-index:2}
.ob-foot.inline{margin:14px -22px 0}
.skiplink{font-size:12px;color:var(--tx3);margin-right:auto;background:none;border:0;cursor:pointer}
.skiplink:hover{color:var(--gold)}
.btn.pulse{position:relative;overflow:hidden}
.btn.pulse::after{content:"";position:absolute;inset:0;border-radius:99px;
background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42),transparent 80%);
transform:translateX(-100%);animation:obsheen 2.8s ease-in-out 1.6s infinite}
@keyframes obsheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px;margin-top:14px}
.pick{border:1px solid var(--line);border-radius:10px;background:var(--p2);padding:9px 10px;
display:flex;gap:9px;align-items:center;position:relative;cursor:pointer}
.pick:hover{border-color:var(--line2)}
.pick.on{border-color:var(--gold);background:var(--gold-dim)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick .ic{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;
justify-content:center;font-size:12px;font-weight:700;background:var(--p3);color:var(--tx2);object-fit:cover}
.pick .ic.sq{border-radius:9px;color:var(--amber)}
.pick.on .ic{background:var(--gold);color:var(--on-gold)}
.pick .t{flex:1;min-width:0}
.pick .t b{font-size:12.5px;display:block;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick .t small{font-size:10.5px;color:var(--tx3)}
.pick .tick{position:absolute;top:6px;right:7px;width:16px;height:16px;border-radius:50%;
border:1px solid var(--line2);font-size:9px;display:flex;align-items:center;justify-content:center;color:transparent}
.pick.on .tick{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.hintline{font-size:11.5px;color:var(--tx3);margin-top:12px;line-height:1.7}
.hintline b{color:var(--gold)}
.ob-empty{border:1px dashed var(--line2);border-radius:10px;padding:16px;text-align:center;
color:var(--tx3);font-size:12.5px;margin-top:14px}
.linkrow{display:flex;gap:11px;align-items:center;border:1px solid var(--line);border-radius:11px;
background:var(--p2);padding:11px 12px;margin-top:10px}
.linkrow .ic{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;
justify-content:center;font-size:17px}
.linkrow.steam .ic{background:rgba(102,192,244,.15);color:var(--steam)}
.linkrow.spotify .ic{background:rgba(29,185,84,.15);color:var(--sp)}
.linkrow .t{flex:1;min-width:0}
.linkrow .t b{font-size:13.5px;display:block}
.linkrow .t small{font-size:11.5px;color:var(--tx3);line-height:1.5;display:block}
.lbtn{border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:600;flex:0 0 auto}
.lbtn.steam{background:var(--steam);color:#0B1A26}
.lbtn.spotify{background:var(--sp);color:#06210F}
.lbtn.done{background:none;border:1px solid var(--live);color:var(--live)}
.ob-done{text-align:center;padding:18px 12px 4px}
.ob-done .big{font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--gold);line-height:1}
.sumrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.sumrow span{border:1px solid var(--line2);border-radius:99px;padding:3px 11px;font-size:12px;color:var(--tx2)}
/* An endlessly moving welcome screen is not welcoming to everyone. */
@media (prefers-reduced-motion: reduce){
.blob,.gl,.ob-mark,.ob-mark::after,.wc,.wc .ic,.ob-title span,.ob-hero .ob-sub,
.btn.pulse::after,.ob-steps span.on::after{animation:none!important}
.blob{opacity:.3}.gl{opacity:.35}
}
@media(max-width:620px){.ob-cards{grid-template-columns:1fr}.ob-title{font-size:36px}}
/* ============================================================================
GEMS (v78) — Games · animE · Esports · Manga · Shows · Sports
Zero hardcoded hex: every colour below is a token or derived from --acc.
Per-vertical accents are declared once here and referenced by name from EJS.
============================================================================ */
:root{
--v-games:var(--gold); --v-anime:var(--pink); --v-esports:var(--live);
--v-manga:var(--amber); --v-shows:var(--tmdb); --v-sports:var(--blue);
}
/* ---- GEMS diamond. Inline SVG because ti-diamond is NOT in the embedded glyph
subset (tools/build-icons.py fails loudly on missing classes and renders
them blank). An inline svg with only a viewBox has no intrinsic size, so
these dimensions are load-bearing — without them the mark disappears. ---- */
.nav-menu a .gd{width:17px;height:17px;flex:0 0 auto}
.tabbar .gd{width:20px;height:20px;display:block;margin:0 auto}
.nav-menu a.on .gd{color:var(--gold)}
/* ---- x/ button: a different object from the three primary nav links ---- */
.xbtn{flex:0 0 auto;width:38px;height:38px;margin-left:8px;border:1px solid var(--line2);border-radius:9px;
background:var(--p1);color:var(--tx2);display:flex;align-items:center;justify-content:center;
transition:border-color .16s ease,color .16s ease,background .16s ease}
.xbtn:hover{border-color:var(--goldd);color:var(--gold);background:var(--gold-dim)}
.xbtn.on{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}
.xbtn svg{width:20px;height:20px}
.tabbar .tabx-i{width:20px;height:20px;display:block;margin:0 auto}
/* ---- quote button: icon only, same corner every time ---- */
.q-ico{width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);background:var(--p2);
color:var(--tx2);display:inline-flex;align-items:center;justify-content:center;font-size:14px;
transition:border-color .14s ease,color .14s ease,background .14s ease;flex:0 0 auto}
.q-ico:hover{border-color:var(--goldd);color:var(--gold);background:var(--gold-dim)}
.q-ico.lg{width:34px;height:34px;font-size:17px}
.q-ico.corner{position:absolute;top:8px;right:8px;z-index:3;background:var(--scrim);backdrop-filter:blur(3px)}
/* ---- hero slider ---- */
.gems-hs{position:relative;border-bottom:1px solid var(--line);overflow:hidden;background:var(--p1)}
.gems-hs-track{display:flex;transition:transform .55s cubic-bezier(.3,.75,.25,1);will-change:transform}
.gems-hs-s{flex:0 0 100%;min-width:100%;position:relative;min-height:clamp(360px,44vw,480px);
background:linear-gradient(115deg,var(--ph1),var(--ph2))}
.gems-hs-s::before{content:"";position:absolute;inset:0;
background:radial-gradient(1000px 460px at 74% 4%,var(--gold-dim),transparent 72%)}
.gems-hs-s::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,var(--scrim) 4%,var(--scrim-soft) 58%,transparent)}
/* the phantom letter — glow ghost + hairline stroke, cropped and tilted */
.gems-ph{position:absolute;right:-4vw;bottom:-14vw;font-family:'Bebas Neue',sans-serif;
font-size:clamp(320px,50vw,620px);line-height:.75;pointer-events:none;user-select:none;z-index:0;transform:rotate(-7deg)}
.gems-ph .g1{position:absolute;inset:0;color:var(--acc);opacity:.10;filter:blur(26px)}
.gems-ph .g2{position:relative;color:transparent;-webkit-text-stroke:1.5px var(--acc);opacity:.42;
mask-image:linear-gradient(200deg,var(--ink),transparent 78%);
-webkit-mask-image:linear-gradient(200deg,var(--ink),transparent 78%)}
.gems-hs-in{position:relative;z-index:2;max-width:1220px;margin:0 auto;padding:34px 4vw 38px;
min-height:inherit;display:flex;align-items:center;gap:32px}
.gems-hs-tx{flex:1 1 440px;min-width:0}
.gems-hs-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.22em;
text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.gems-hs-s h2{font-size:clamp(30px,5.2vw,56px);line-height:.96;letter-spacing:.01em;max-width:20ch}
.gems-hs-meta{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.09em;
text-transform:uppercase;color:var(--tx2);margin-top:7px}
.gems-hs-desc{color:var(--tx2);font-size:14.5px;max-width:50ch;margin-top:9px}
.gems-hs-act{display:flex;gap:9px;align-items:center;margin-top:16px;flex-wrap:wrap}
.gems-go{background:var(--acc);color:var(--on-gold)}
.gems-go:hover{background:var(--acc);filter:brightness(1.12)}
.gems-hs-art{flex:0 0 auto;position:relative;z-index:2}
.gems-logo-card{width:min(330px,33vw);aspect-ratio:16/10;border:1px solid var(--line2);border-radius:14px;
background:linear-gradient(150deg,var(--p3),var(--p1));display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;box-shadow:0 24px 60px var(--shadow);transition:transform .2s ease}
.gems-logo-card:hover{transform:translateY(-3px)}
.gems-logo-card img{width:100%;height:100%;object-fit:contain;padding:16px}
.gems-logo-card .lg{font-size:clamp(30px,4vw,46px);letter-spacing:.04em;color:var(--tx);text-align:center;padding:0 20px}
.gems-cover{width:min(230px,25vw);aspect-ratio:2/3;border:1px solid var(--line2);border-radius:12px;overflow:hidden;
position:relative;background:linear-gradient(160deg,var(--ph1),var(--ph2));box-shadow:0 24px 60px var(--shadow);transition:transform .2s ease}
.gems-cover:hover{transform:translateY(-3px)}
.gems-cover img{width:100%;height:100%;object-fit:cover}
.gems-hoverpanel{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(4px);padding:15px 16px;
display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(8px);overflow:auto;
transition:opacity .2s ease,transform .2s ease}
.gems-logo-card:hover .gems-hoverpanel,.gems-logo-card:focus-within .gems-hoverpanel,.gems-logo-card.open .gems-hoverpanel,
.gems-cover:hover .gems-hoverpanel,.gems-cover:focus-within .gems-hoverpanel,.gems-cover.open .gems-hoverpanel{opacity:1;transform:none}
.gems-hoverpanel .hk{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--acc)}
.gems-hoverpanel p{font-size:13px;color:var(--tx2);line-height:1.5}
.gems-hoverpanel .row{font-size:12.5px;color:var(--tx2)}
.gems-hoverpanel .row b{color:var(--tx)}
.gems-hoverpanel .btn{margin-top:auto;align-self:flex-start}
.gems-land{display:flex;gap:13px;align-items:stretch}
.gems-shot{width:min(370px,35vw);aspect-ratio:16/9;border:1px solid var(--line2);border-radius:12px;overflow:hidden;
position:relative;background:linear-gradient(150deg,var(--ph1),var(--ph2));box-shadow:0 24px 60px var(--shadow)}
.gems-shot img{width:100%;height:100%;object-fit:cover}
.gems-shot .scr{position:absolute;left:0;right:0;bottom:0;padding:11px 13px;background:linear-gradient(transparent,var(--scrim))}
.gems-shot .scr b{font-size:21px;letter-spacing:.03em}
.gems-shot .scr .m{font-size:12px;color:var(--tx2)}
.gems-mtabs{display:flex;flex-direction:column;gap:6px;width:170px}
.gems-mtab{border:1px solid var(--line);border-radius:9px;background:var(--p1);padding:8px 11px;display:block;
transition:border-color .15s ease,background .15s ease}
.gems-mtab:hover{border-color:var(--line2);background:var(--p2)}
.gems-mtab.on{border-color:var(--acc);background:var(--p2)}
.gems-mtab b{display:block;font-size:12.5px;font-weight:600;line-height:1.25}
.gems-mtab span{font-size:11px;color:var(--tx3);display:block}
.gems-mtab .lv{color:var(--live);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.1em}
.gems-mtabs .more{margin-top:auto;text-align:center}
.gems-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px;border-radius:50%;
background:var(--scrim);border:1px solid var(--line2);color:var(--tx);display:flex;align-items:center;
justify-content:center;font-size:19px;backdrop-filter:blur(6px)}
.gems-arr:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.gems-arr.l{left:14px}.gems-arr.r{right:14px}
.gems-dots{position:absolute;z-index:4;right:18px;bottom:14px;display:flex;gap:6px}
.gems-dot{width:8px;height:8px;border-radius:50%;background:var(--line2);border:0;padding:0;
transition:width .2s ease,background .2s ease}
.gems-dot.on{width:22px;border-radius:5px;background:var(--acc)}
/* ---- sections + rails ---- */
.gems-sec{margin:26px 0 30px;position:relative}
.gems-sec-h{display:flex;align-items:center;gap:11px;margin:0 0 12px}
.gems-sec-h .bar{width:3px;height:20px;border-radius:2px;background:var(--acc);flex:0 0 auto}
.gems-sec-h h2{font-size:24px;letter-spacing:.04em;flex:0 0 auto}
.gems-sec-h .sub{font-family:'Barlow Condensed',sans-serif;font-size:12.5px;letter-spacing:.07em;
text-transform:uppercase;color:var(--tx3);flex:1;min-width:0}
.gems-sec-h a.sub:hover{color:var(--acc)}
.gems-sec-h .sl-nav{display:flex;gap:6px;flex:0 0 auto}
.gems-sec.ph::before{content:attr(data-l);position:absolute;left:-14px;top:-34px;z-index:0;
font-family:'Bebas Neue',sans-serif;font-size:170px;line-height:1;color:transparent;
-webkit-text-stroke:1px var(--acc);opacity:.22;pointer-events:none;user-select:none;
mask-image:linear-gradient(180deg,var(--ink),transparent 85%);
-webkit-mask-image:linear-gradient(180deg,var(--ink),transparent 85%)}
.gems-sec.ph>*{position:relative;z-index:1}
.gems-rail{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 0 6px}
.gems-rail::-webkit-scrollbar{display:none}
.gems-rail{scrollbar-width:none}
.gems-rail>*{scroll-snap-align:start;flex:0 0 auto}
.gems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:13px;margin-bottom:26px}
.gems-card{border:1px solid var(--line);border-radius:10px;background:var(--p1);overflow:hidden;
display:flex;flex-direction:column;position:relative;transition:border-color .16s ease,transform .16s ease}
.gems-rail .gems-card{width:186px}
.gems-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.gems-card .art{aspect-ratio:2/3;background:linear-gradient(150deg,var(--ph1),var(--ph2));position:relative;display:block}
.gems-card .art img{width:100%;height:100%;object-fit:cover}
.gems-card .noart,.gems-shot .noart,.gems-cover .noart,.gems-dart .noart{position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);text-align:center;padding:10px}
.gems-card .bd{padding:9px 11px 11px}
.gems-card .bd b{font-size:14px;font-weight:600;line-height:1.25}
.gems-card .bd .m{font-size:12px;color:var(--tx3);margin-top:2px}
.gems-vod{border:1px solid var(--line);border-radius:10px;background:var(--p1);overflow:hidden;position:relative;width:300px}
.gems-vod.wide{width:auto}
.gems-vod .thumb{aspect-ratio:16/9;position:relative;display:block;background:linear-gradient(150deg,var(--ph1),var(--ph2))}
.gems-vod .thumb img{width:100%;height:100%;object-fit:cover}
.gems-vod .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;
border-radius:50%;background:var(--scrim);border:1px solid var(--line2);display:flex;align-items:center;
justify-content:center;color:var(--tx);font-size:16px}
.gems-vod:hover .play{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.gems-vod .src{position:absolute;left:7px;top:7px}
.gems-vod .bd{padding:9px 11px 11px}
.gems-vod .bd b{display:block;font-size:13.5px;line-height:1.3}
.gems-vod .bd .m{font-size:12px;color:var(--tx3);margin-top:3px}
/* ---- vertical header + tabs ---- */
.gems-vhead{border-bottom:1px solid var(--line);background:linear-gradient(var(--scrim-soft),var(--scrim));
padding:24px 0 0;margin-bottom:22px;position:relative;overflow:hidden}
.gems-phv{position:absolute;right:-2vw;top:-60px;font-family:'Bebas Neue',sans-serif;font-size:250px;line-height:.8;
color:transparent;-webkit-text-stroke:1.5px var(--acc);opacity:.30;transform:rotate(-6deg);
pointer-events:none;user-select:none;
mask-image:linear-gradient(210deg,var(--ink),transparent 80%);
-webkit-mask-image:linear-gradient(210deg,var(--ink),transparent 80%)}
.gems-phv.big{font-size:330px;top:auto;bottom:-110px;opacity:.34}
.gems-vhead .wrap{position:relative;z-index:1}
.gems-vhead h1{font-size:clamp(30px,5vw,44px);letter-spacing:.02em;line-height:1}
.gems-vhead p{color:var(--tx2);font-size:14px;max-width:62ch;margin-top:5px}
.gems-tabs{display:flex;gap:2px;margin-top:16px;overflow-x:auto;scrollbar-width:none}
.gems-tabs::-webkit-scrollbar{display:none}
.gems-tab{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--tx2);padding:9px 14px;border-radius:7px 7px 0 0;white-space:nowrap;position:relative}
.gems-tab:hover{color:var(--tx);background:var(--p1)}
.gems-tab.on{color:var(--acc)}
.gems-tab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--acc)}
.gems-note{border:1px solid var(--line2);border-left:3px solid var(--acc);border-radius:8px;background:var(--p1);
padding:11px 13px;font-size:13px;color:var(--tx2);margin:0 0 16px}
.gems-note b{color:var(--tx)}
.gems-note.red{border-left-color:var(--red)}
.gems-note.ok{border-left-color:var(--live)}
.gems-empty{border:1px dashed var(--line2);border-radius:10px;padding:20px;text-align:center;color:var(--tx3);
font-size:13.5px;line-height:1.55;grid-column:1/-1}
.gems-empty b{color:var(--tx2)}
/* ---- row lists (chapters / episodes / matches) ---- */
.gems-tab-list{border:1px solid var(--line);border-radius:10px;background:var(--p1);overflow:hidden}
.gems-tr{display:grid;grid-template-columns:88px 1fr auto auto;gap:12px;align-items:center;padding:10px 13px;
border-top:1px solid var(--line);font-size:13.5px}
.gems-tr:first-child{border-top:0}
.gems-tr:hover{background:var(--p2)}
.gems-tr.head{background:var(--p2);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;
letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.gems-tr .n{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.05em;color:var(--acc)}
.gems-tr .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gems-tr .d{font-size:12px;color:var(--tx3);white-space:nowrap}
.gems-tr .a{display:flex;gap:7px;align-items:center;justify-content:flex-end}
.gems-mrow{display:grid;grid-template-columns:74px 1fr auto;gap:13px;align-items:center;border:1px solid var(--line);
border-radius:10px;background:var(--p1);padding:11px 13px;margin-bottom:9px}
.gems-mrow .when{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--tx2);
text-align:center;line-height:1.2}
.gems-mrow .when span{display:block;font-size:11px;color:var(--tx3);font-weight:500}
.gems-mrow .who{min-width:0}
.gems-mrow .who .m{font-size:12px;color:var(--tx3)}
.gems-mrow .act{display:flex;gap:7px;align-items:center}
/* ---- entity page ---- */
.gems-dhead{position:relative;border-bottom:1px solid var(--line);overflow:hidden;margin-bottom:22px;
background:linear-gradient(115deg,var(--ph1),var(--ph2))}
.gems-dhead::before{content:"";position:absolute;inset:0;
background:radial-gradient(900px 400px at 76% 0%,var(--gold-dim),transparent 70%)}
.gems-dhead::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,var(--scrim) 6%,var(--scrim-soft) 60%,transparent)}
.gems-dhead .wrap{position:relative;z-index:2;display:flex;gap:24px;align-items:flex-end;padding-top:30px;padding-bottom:22px}
.gems-dart{flex:0 0 auto;width:160px;aspect-ratio:2/3;border-radius:11px;border:1px solid var(--line2);overflow:hidden;
background:linear-gradient(160deg,var(--p3),var(--p1));box-shadow:0 22px 54px var(--shadow);position:relative}
.gems-dart img{width:100%;height:100%;object-fit:cover}
.gems-dart.land{width:290px;aspect-ratio:16/9}
.gems-dart.logo{width:240px;aspect-ratio:16/10}
.gems-dart.logo img{object-fit:contain;padding:14px}
.gems-dmain{min-width:0;flex:1}
.gems-crumb{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--tx3);margin-bottom:9px}
.gems-crumb a:hover{color:var(--acc)}
.gems-dhead h1{font-size:clamp(28px,4.4vw,48px);line-height:.98}
.gems-dmeta{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--tx2);margin-top:6px}
.gems-dact{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:14px}
.gems-ddesc{color:var(--tx2);font-size:14.5px;max-width:70ch;margin-bottom:20px}
.gems-d2{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;padding-bottom:40px}
.gems-kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
.gems-kv:first-of-type{border-top:0}
.gems-kv span{color:var(--tx3)}
.gems-kv b{font-weight:600;text-align:right}
/* ---- /x Xperience ---- */
.x-head{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:30px 0 24px;
background:linear-gradient(115deg,var(--ph1),var(--ph2));margin-bottom:24px}
.x-head::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,var(--scrim) 6%,var(--scrim-soft) 62%,transparent)}
.x-ghost{position:absolute;right:-10px;bottom:-70px;width:250px;height:250px;pointer-events:none;color:var(--gold);opacity:.30}
.x-ghost svg{width:100%;height:100%}
.x-head .wrap{position:relative;z-index:2}
.x-head h1{font-size:clamp(30px,5vw,44px);letter-spacing:.02em;display:flex;align-items:center;gap:11px}
.x-head h1 .mk{color:var(--gold)}
.x-head p{color:var(--tx2);font-size:14px;max-width:58ch;margin-top:7px}
.x-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-bottom:40px}
.x-card{display:block;border:1px solid var(--line);border-radius:9px;background:var(--p1);padding:11px 13px;margin-bottom:9px}
.x-card:hover{border-color:var(--line2);background:var(--p2)}
.x-card .t{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.x-card .m{font-size:12.5px;color:var(--tx3);margin-top:2px}
.x-card .slug{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--gold)}
/* ---- admin GEMS ---- */
.gems-subtabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.gems-subtabs::-webkit-scrollbar{display:none}
.gems-st{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;
text-transform:uppercase;color:var(--tx2);padding:9px 13px;white-space:nowrap;position:relative;border-radius:7px 7px 0 0}
.gems-st:hover{color:var(--tx);background:var(--p1)}
.gems-st.on{color:var(--gold)}
.gems-st.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;background:var(--gold)}
.gems-st .c{font-size:11px;color:var(--tx3)}
.gems-st .c.warn{color:var(--red-soft)}
.gems-vchips{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 16px}
.gems-vchip{border:1px solid var(--line);background:var(--p1);border-radius:8px;padding:7px 12px;display:flex;
align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.gems-vchip .L{font-family:'Bebas Neue',sans-serif;font-size:17px;line-height:1;color:var(--tx3)}
.gems-vchip .c{font-family:'Barlow',sans-serif;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--tx3)}
.gems-vchip:hover{border-color:var(--line2);color:var(--tx)}
.gems-vchip.on{border-color:var(--acc);background:var(--p2);color:var(--tx)}
.gems-vchip.on .L{color:var(--acc)}
.gems-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px;margin-bottom:16px}
.gems-tiles .t{border:1px solid var(--line);border-radius:9px;background:var(--p1);padding:12px 13px}
.gems-tiles .k{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--tx3)}
.gems-tiles .v{font-family:'Bebas Neue',sans-serif;font-size:28px;line-height:1.1;margin:2px 0}
.gems-tiles .v.ok{color:var(--live)}.gems-tiles .v.bad{color:var(--red-soft)}.gems-tiles .v.warn{color:var(--amber)}
.gems-tiles .s{font-size:11.5px;color:var(--tx3)}
.gems-editrow>td{background:var(--p2);padding:14px}
@media(max-width:900px){
.gems-hs-in{flex-direction:column-reverse;align-items:flex-start;gap:16px;padding-top:24px}
.gems-hs-art{align-self:center}
.gems-logo-card{width:min(320px,84vw)}
.gems-cover{width:min(200px,54vw)}
.gems-land{flex-direction:column}
.gems-shot{width:min(420px,88vw)}
.gems-mtabs{width:100%;flex-direction:row;overflow-x:auto}
.gems-mtab{flex:0 0 150px}
.gems-mtabs .more{margin-top:0;flex:0 0 auto}
.gems-ph{right:-16vw;bottom:-24vw;font-size:110vw}
.gems-d2,.x-row{grid-template-columns:1fr}
.gems-dhead .wrap{flex-direction:column;align-items:flex-start}
.gems-dart{width:130px}.gems-dart.land{width:240px}.gems-dart.logo{width:200px}
}
@media(max-width:760px){
.gems-tr,.gems-tr.head{grid-template-columns:70px 1fr auto}
.gems-tr .d{display:none}
.gems-mrow{grid-template-columns:66px 1fr;row-gap:9px}
.gems-mrow .act{grid-column:1/-1}
.gems-sec.ph::before{font-size:110px;top:-22px}
.gems-phv{font-size:150px;top:-30px}
.gems-phv.big{font-size:190px;bottom:-60px}
}
@media(prefers-reduced-motion:reduce){
.gems-hs-track,.gems-rail{transition:none;scroll-behavior:auto}
.gems-card,.gems-cover,.gems-logo-card{transition:none}
}
/* ============================================================
FOR YOU RAIL v2 — three modules, three modes
Replaces the six-panel rail. Events and communities moved to /x, forum heat to
/forum, tags to /tag: they were competing with the schedule a reader came for,
and six panels meant none of them was read.
============================================================ */
@media(min-width:1100px){
/* 10 / 70 / 20. The left column is reserved and empty until its own redesign;
declaring it now means that batch will not shift anything again. */
.cols-feed{display:grid;gap:18px;align-items:start;
grid-template-columns:minmax(90px,10fr) minmax(0,70fr) minmax(215px,20fr)}
.main-col{max-width:none}
.rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:74px;
/* A sticky element taller than the viewport hides its own overflow: the page
scrolls, the rail does not, and the bottom of a tall panel can only be
reached at the very end of the document. Cap it and let the rail scroll
itself — this is what made the XPERIENCE chooser unusable on short
desktop screens. */
max-height:calc(100vh - 86px);overflow-y:auto;overflow-x:hidden;
overscroll-behavior:contain;scrollbar-width:thin}
/* Panels keep their natural height. A flex child shrinks by default, so the
moment the rail gained a max-height the Teman and Feed panels were squeezed
into slivers to make room for the tall chooser — the column scrolls, the
content is not sacrificed. */
.rail > *{flex:0 0 auto}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
/* The reserved column is empty but must still OCCUPY its track. Without a
third child the browser filled the tracks in order and main-col landed in
the 90px slot while the rail took the 70fr centre — the columns rendered
inverted on the live site. */
.leftcol{position:sticky;top:74px;min-height:1px}
/* Immersive gives the freed share to the POSTS. Written 10fr/1fr once, which
handed the left rail ten parts and the timeline one — the column collapsed
to a word per line. */
.cols-feed:has(.rail[data-mode="immersive"]),
.cols-feed.rail-immersive{grid-template-columns:minmax(90px,10fr) minmax(0,90fr)}
.cols-feed:has(.rail[data-mode="immersive"]) .rail,
.cols-feed.rail-immersive .rail{display:none}
}
/* Below the grid breakpoint the page is a single column, so a reserved slot
would only add dead vertical space. */
@media(max-width:1099px){.leftcol{display:none}}
/* restore tab, immersive only */
.rback{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:120;
display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 10px;
border:1px solid var(--line2);border-right:0;border-radius:10px 0 0 10px;
background:var(--p1);color:var(--tx2);box-shadow:-6px 0 22px var(--shadow)}
.rback .vt{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;writing-mode:vertical-rl}
.rback i{font-size:17px}
.rback:hover{color:var(--gold);border-color:var(--goldd);background:var(--gold-dim)}
.rback[hidden]{display:none}
/* mode switcher: icon only, hidden until asked for */
.mwrap{display:flex;justify-content:flex-end;flex-direction:column;align-items:flex-end;gap:8px}
.mpick{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--p1);
display:flex;align-items:center;justify-content:center;color:var(--tx3)}
.mpick:hover{color:var(--gold);border-color:var(--goldd);background:var(--gold-dim)}
.mbar{border:1px solid var(--line2);border-radius:10px;background:var(--p1);padding:6px;width:100%}
.mbar[hidden]{display:none}
.mrow{display:flex;gap:4px}
.mbtn{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 4px;
border:1px solid var(--line);border-radius:8px;color:var(--tx3);background:var(--p2)}
.mbtn:hover{color:var(--tx);border-color:var(--line2)}
.mbtn.on{color:var(--gold);border-color:var(--goldd);background:var(--gold-dim)}
.mbtn .x{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
/* drawn glyphs — each one is a diagram of the layout it produces */
.mg{width:22px;height:15px;border:1.5px solid currentColor;border-radius:2.5px;display:flex;gap:1.5px;padding:1.5px}
.mg span{background:currentColor;border-radius:1px;opacity:.28}
.mg .a{flex:0 0 3px}
.mg .b{flex:1;opacity:.75}
.mg .c{flex:0 0 6px;opacity:.55}
.mg.custom .c{background:repeating-linear-gradient(180deg,currentColor 0 2px,transparent 2px 4px)}
.mg.imm .b{opacity:.9}
.mods{display:flex;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.mtog{flex:1;display:flex;align-items:center;justify-content:center;padding:7px 4px;border-radius:7px;
border:1px solid var(--line);color:var(--tx3)}
.mtog i{font-size:15px}
.mtog:hover{color:var(--tx)}
.mtog.on{color:var(--gold);border-color:var(--goldd);background:var(--gold-dim)}
.mbar .note{font-size:10px;color:var(--tx3);margin-top:6px;line-height:1.45;padding:0 2px}
/* collapsible panels: a summary at rest, rows on hover or focus */
.rp2{border:1px solid var(--line);border-radius:10px;background:var(--p1);overflow:hidden;transition:border-color .14s}
.rp2:hover{border-color:var(--line2)}
.rp2 .peek{display:flex;align-items:center;gap:8px;padding:9px 11px}
.rp2 .avs{display:flex}
.rp2 .avs .fr-av{width:23px;height:23px;font-size:8.5px;margin-left:-7px;border:2px solid var(--p1)}
.rp2 .avs .fr-av:first-child{margin-left:0}
.rp2 .sum{flex:1;min-width:0;font-size:12px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp2 .chev{color:var(--tx3);transition:transform .2s;font-size:15px;line-height:1}
.rp2:hover .chev,.rp2:focus-within .chev{transform:rotate(180deg);color:var(--gold)}
.rp2 .body2{max-height:0;overflow:hidden;transition:max-height .24s ease}
.rp2:hover .body2,.rp2:focus-within .body2{max-height:420px}
.rp2 .body2-in{padding:2px 11px 9px;border-top:1px solid var(--line)}
/* presence: four kinds, distinguishable at 30px */
.fr-art{width:30px;height:30px;border-radius:5px;object-fit:cover;
background:linear-gradient(160deg,var(--ph1),var(--ph2))}
.fr-av.wrapart{border-radius:5px;background:none;overflow:visible;position:relative}
.fr-src{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;
display:flex;align-items:center;justify-content:center;border:2px solid var(--p1)}
.fr-src i{font-size:8px}
.fr-src.sp{background:var(--sp);color:var(--on-sp)}
.fr-src.sk{background:var(--live);color:#0B1A12}
.fr-src.st{background:var(--steam);color:var(--on-steam)}
.fr-a.steam{color:var(--steam)}
/* recommendations carry their reason — without one, a suggestion reads as an ad */
.rec{display:flex;align-items:center;gap:9px;padding:6px 0}
.rec .fr-av,.rec .fd-av{width:28px;height:28px;font-size:9.5px;flex:0 0 auto}
.rec .t{flex:1;min-width:0}
.rec .t b{display:block;font-size:12.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec .why{display:block;font-size:10.5px;color:var(--gold)}
.recbtn{border:1px solid var(--line2);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--tx2);
background:none;flex:0 0 auto}
.recbtn:hover{border-color:var(--gold);color:var(--gold)}
.gearbtn{margin-left:auto;width:24px;height:24px;border-radius:6px;border:1px solid var(--line2);
display:flex;align-items:center;justify-content:center;color:var(--tx3);flex:0 0 auto}
.gearbtn i{font-size:13px}
.gearbtn:hover{color:var(--gold);border-color:var(--goldd)}
/* XPERIENCE — icon tabs on ONE row; text would wrap at 215px and push the
schedule below the fold, which is the only thing this panel exists to show */
.xp h3{padding:12px 13px 0}
.xtabs{display:flex;gap:3px;padding:9px 9px 0}
.xtab{flex:1;height:29px;border-radius:7px;border:1px solid var(--line);background:var(--p2);
display:flex;align-items:center;justify-content:center;color:var(--tx3);position:relative}
.xtab i{font-size:15px}
.xtab:hover{color:var(--tx);border-color:var(--line2)}
.xtab.on{color:var(--gold);border-color:var(--goldd);background:var(--gold-dim)}
.xtab .kd{position:absolute;top:3px;right:3px;width:4px;height:4px;border-radius:50%;background:currentColor}
/* the label is deferred, not deleted */
.xtab::after{content:attr(data-l);position:absolute;top:33px;left:50%;transform:translateX(-50%);
background:var(--p3);border:1px solid var(--line2);border-radius:6px;padding:3px 7px;
font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:.09em;
text-transform:uppercase;color:var(--tx2);white-space:nowrap;opacity:0;pointer-events:none;
transition:opacity .13s;z-index:30}
.xtab:hover::after,.xtab:focus-visible::after{opacity:1}
@media(hover:none){.xtab::after{display:none}}
.xrow{display:flex;gap:8px;padding:7px 8px;border-radius:8px;align-items:flex-start}
.xrow:hover{background:var(--p2)}
.xrow[hidden]{display:none}
.xrow .when{flex:0 0 auto;width:36px;text-align:center}
.xrow .when b{display:block;font-family:'Bebas Neue',sans-serif;font-size:15px;line-height:1.05;color:var(--gold)}
.xrow .when span{display:block;font-family:'Barlow Condensed',sans-serif;font-size:8.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--tx3)}
.xrow .vk{width:5px;height:5px;border-radius:50%;flex:0 0 auto;margin-top:5px;background:currentColor}
.xrow .t{flex:1;min-width:0}
.xrow .t b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.xrow .t span{display:block;font-size:10.5px;color:var(--tx3);margin-top:1px}
.xrow.soon{background:var(--gold-dim);box-shadow:inset 2px 0 0 var(--gold)}
.cd{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--gold);margin-top:2px;display:block}
/* category colours reuse the vertical tokens already defined for GEMS */
.v-game{color:var(--v-games)}.v-anime{color:var(--v-anime)}.v-esports{color:var(--v-esports)}
.v-shows{color:var(--v-shows)}.v-sports{color:var(--v-sports)}
/* first-run chooser — 2 columns x 3 rows.
The stacked list with a paragraph above it ran past the fold at 250px wide on
a 768px-tall screen, and a sticky rail hides its own overflow, so the options
below the cut were unreachable without scrolling to the end of the page. */
.xcust{padding:10px}
.xgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.xcell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:5px;padding:11px 6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--p2);
color:var(--tx3);cursor:pointer;width:100%}
.xcell:hover{border-color:var(--line2);color:var(--tx)}
.xcell .xg{width:20px;height:20px}
.xcell .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10.5px;
letter-spacing:.1em;text-transform:uppercase}
/* Chosen: a green dot, and only then. Unchosen carries no marker at all — an
unchecked box still draws the eye, and six of them is noise. */
.xcell.on{border-color:var(--live-line);background:rgba(74,222,128,.07);color:var(--tx)}
.xcell.on .xg{color:var(--live)}
.xcell .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
background:var(--live);box-shadow:0 0 0 2px rgba(74,222,128,.18);
opacity:0;transform:scale(.6);transition:opacity .14s,transform .14s}
.xcell.on .dot{opacity:1;transform:scale(1)}
/* the description waits to be asked for */
.xcell::after{content:attr(data-d);position:absolute;left:50%;bottom:calc(100% + 6px);
transform:translateX(-50%);background:var(--p3);border:1px solid var(--line2);border-radius:7px;
padding:5px 9px;font-size:10.5px;line-height:1.35;color:var(--tx2);text-align:center;
/* Sized to fit INSIDE the panel. At a fixed 150px it overran the rail's width
and produced a horizontal scrollbar; hiding that overflow would then have
clipped the tooltip instead. */
width:max-content;max-width:124px;
opacity:0;pointer-events:none;transition:opacity .13s;z-index:20;box-shadow:0 8px 20px var(--shadow)}
.xcell:hover::after,.xcell:focus-within::after{opacity:1}
@media(hover:none){.xcell::after{display:none}}
.xcount{font-family:ui-monospace,monospace;font-size:11px;color:var(--tx3);text-align:center;padding:8px 0 6px}
.xdone{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--gold);
color:var(--on-gold);border-radius:8px;padding:9px;font-weight:600;font-size:13px;
font-family:'Barlow Condensed',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.xdone[disabled]{opacity:.45;cursor:not-allowed}
/* tab glyphs, inline SVG rather than the icon font */
.xtab .xg{width:15px;height:15px}
/* Discord card on the profile — the Steam card's shape, Discord's colour, and
no link target because Discord has no public profile page to open. */
.steamcard.dc{cursor:default}
.steamcard.dc .sc-k{color:#8b93f7}
.steamcard.dc .sc-ph{background:#5865F2;color:#fff}
.conn-ic.dc{background:#5865F2;color:#fff}
.btn.dc{background:#5865F2;color:#fff}
.btn.dc:hover{background:#6b76f5}
/* Post actions are icon-only now. The labels repeated on every card and doubled
the bar's width; title + aria-label + data-fb still carry the name for
tooltips, screen readers, and the icon-font fallback. Counts stay — those are
information, not decoration. */
.post-actions .iact,.mo-card .iact{gap:5px}
.post-actions .iact .lbl,.mo-card .iact .lbl{display:none}
/* except where the label EXPLAINS a state rather than naming a repeated action */
.iact.off .lbl,.iact[href="/login"] .lbl{display:inline}
/* ============================================================
NOTIFIKASI — one anchor per row
The previous markup nested an for the avatar inside the for the row.
Nested anchors are invalid, so browsers unnest them and the pieces fell out as
separate blocks. These rules assume exactly one anchor per row.
============================================================ */
.nhead{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.nhead h2{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.04em;flex:1}
.backbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:8px;
padding:6px 11px 6px 8px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;
letter-spacing:.09em;text-transform:uppercase;color:var(--tx2);background:var(--p1)}
.backbtn:hover{color:var(--gold);border-color:var(--goldd);background:var(--gold-dim)}
.backbtn i{font-size:14px}
.unreadn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--on-gold);background:var(--gold);border-radius:20px;padding:2px 9px}
.markall{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--tx3);border:1px solid var(--line);border-radius:7px;padding:6px 10px;
background:none}
.markall:hover{color:var(--gold);border-color:var(--goldd)}
.ntabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:2px}
.ntabs a{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.07em;
text-transform:uppercase;color:var(--tx3);padding:8px 13px;position:relative}
.ntabs a.on{color:var(--gold)}
.ntabs a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;background:var(--gold)}
.ntabs a:hover{color:var(--tx)}
.ntabs .n{font-size:10.5px;color:var(--tx3);margin-left:4px}
.ngroup{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.15em;
text-transform:uppercase;color:var(--tx3);padding:14px 2px 6px}
.nrow{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;position:relative}
.nrow:hover{background:var(--p1)}
.nrow.unread{background:var(--gold-dim)}
.nrow.unread::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
width:4px;height:4px;border-radius:50%;background:var(--gold)}
.nav2{position:relative;flex:0 0 auto}
.nav2 .avatar.sm{width:34px;height:34px;font-size:11px}
.nbadge{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;
display:flex;align-items:center;justify-content:center;border:2px solid var(--ink)}
.nbadge i{font-size:9px}
.nrow:hover .nbadge{border-color:var(--p1)}
.nb-like{background:var(--pink);color:#fff}
.nb-comment,.nb-reply{background:var(--blue);color:#fff}
.nb-follow,.nb-mention{background:var(--gold);color:var(--on-gold)}
.nb-repost{background:var(--live);color:#0B1A12}
.nb-system{background:var(--p3);color:var(--tx2)}
.ntext{flex:1;min-width:0;font-size:13.5px;line-height:1.4}
.ntext b{font-weight:600}
.ntext .verb{color:var(--tx2)}
/* what the notification is ABOUT, clamped to two lines */
.nquote{display:-webkit-box;margin-top:3px;font-size:12.5px;color:var(--tx3);
overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ntime{font-size:11px;color:var(--tx3);flex:0 0 auto;padding-top:2px;white-space:nowrap}
.nthumb{flex:0 0 auto;width:38px;height:38px;border-radius:6px;background-size:cover;background-position:center;
background-color:var(--ph2)}
/* grouped actors: five likes on one post are one row, not five */
.nfaces{display:flex;margin-top:5px}
.nfaces .avatar{width:20px;height:20px;font-size:8px;margin-left:-6px;border:2px solid var(--ink)}
.nfaces .avatar:first-child{margin-left:0}
.nempty{border:1px dashed var(--line2);border-radius:11px;padding:26px 16px;text-align:center;color:var(--tx3);font-size:13px}
.nempty i{font-size:24px;display:block;margin-bottom:8px;color:var(--line2)}
.nempty p{margin-bottom:10px}
@media(max-width:600px){
.nrow{padding:9px 6px}
.ntabs a{padding:8px 9px;font-size:11.5px}
}