/* CRAZYHISTORY portal theme: deep navy, blue accent, classroom neutral */
:root{
  --bg:#070b12; --surface:#121a28; --surface2:#182235; --sidebar:#0a0f18;
  --sidehover:#152033; --sideactive:#1e2f4a; --panel:#121a28; --card:#121a28;
  --border:#243147; --text:#eef3fb; --muted:#8b9bb4; --muted2:#5d6b84;
  --accent:#4f8cff; --accent2:#6ea1ff; --accentsoft:rgba(79,140,255,.22);
  --red:#ff3b5c; --sky:#38bdf8; --gold:#f5b83d;
  --radius:14px; --nav-h:58px; --side-w:228px; --rail-w:176px;
  --font:"Outfit",Inter,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip}
body{background:radial-gradient(900px 480px at 70% -10%,rgba(79,140,255,.16),transparent 60%),radial-gradient(700px 400px at 0% 40%,rgba(56,189,248,.06),transparent 55%),var(--bg);
  color:var(--text);font-family:var(--font);min-height:100vh;line-height:1.4}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(7,11,18,.88);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-bar{display:flex;align-items:center;gap:.75rem;min-height:var(--nav-h);padding:.5rem 1rem;max-width:1720px;margin:0 auto}
.logo{display:flex;align-items:center;gap:.45rem;font-weight:800;font-size:1.1rem;letter-spacing:-.03em;flex-shrink:0}
.logo img{height:1.65rem;width:auto;display:block;border-radius:8px}
.logo span em{font-style:normal;color:#8eb0ff}
.searchwrap{flex:1;min-width:0;max-width:420px;margin:0 auto;position:relative}
.searchwrap input{width:100%;height:40px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);padding:0 44px 0 16px;font-size:.9rem;outline:none;font-family:inherit}
.searchwrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentsoft)}
.search-kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);
  border:1px solid var(--border);border-radius:6px;padding:2px 6px;background:#0a0f18}
.suggest{position:absolute;top:48px;left:0;right:0;background:#1a2338;border:1px solid var(--border);
  border-radius:12px;overflow:hidden;display:none;box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:60}
.suggest.open{display:block}
.suggest a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #2a2a3a}
.suggest a:last-child{border-bottom:0}
.suggest a:hover{background:#232c47}
.suggest img.tile{width:34px;height:34px;border-radius:8px;object-fit:cover}
.nav-actions{display:flex;gap:.45rem;flex-shrink:0}
.btn{border-radius:999px;padding:.45rem .85rem;font-weight:600;cursor:pointer;font-size:.8rem;
  border:1px solid var(--border);background:var(--surface);color:var(--text);white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent2);background:var(--surface2)}
.btn-primary{background:linear-gradient(135deg,#5b8fff,#3b6ff0);border-color:transparent;color:#fff}
.btn-primary:hover{color:#fff;filter:brightness(1.06)}
.menu-toggle{display:none;width:2.25rem;height:2.25rem;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;font-size:1.1rem}

/* LAYOUT */
.layout{display:grid;grid-template-columns:var(--side-w) var(--rail-w) minmax(0,1fr) var(--rail-w);
  padding-top:var(--nav-h);min-height:100vh;max-width:1720px;margin:0 auto}
.sidebar{grid-column:1;background:var(--sidebar);border-right:1px solid var(--border);
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;overflow-x:hidden;
  padding:.65rem .55rem 1.5rem;scrollbar-width:thin}
.side-label{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--muted2);padding:12px 10px 6px}
.side-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;border-radius:8px;color:var(--text);
  font-size:.95rem;font-weight:500;cursor:pointer;border:0;width:100%;background:transparent;text-align:left}
.side-item:hover{background:var(--sidehover)}
.side-item.active{background:var(--sideactive);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.side-item .cnt{margin-left:auto;font-size:11px;background:#1c2740;border-radius:999px;padding:2px 8px;color:var(--muted)}
.side-item.active .cnt{background:var(--accent);color:#fff}
.side-ic{width:1.25rem;height:1.25rem;flex-shrink:0;display:grid;place-items:center;color:#fff}
.side-ic svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ad-mini{margin:12px 4px}
.main{grid-column:3;min-width:0;padding:1.15rem 1rem 1.5rem;max-width:1180px;width:100%;margin:0 auto}

/* ADS */
.ad-leader{margin:6px auto 16px;max-width:728px}
.ad-rail{background:transparent;border:0;height:fit-content;position:sticky;top:calc(var(--nav-h) + 14px);
  align-self:start;display:flex;flex-direction:column;gap:.85rem;padding:1.15rem .5rem 2rem}
.ad-rail.left{grid-column:2}
.ad-rail.right{grid-column:4}
.ad-tag{font-size:10px;letter-spacing:1.5px;color:#73738f;text-align:center;padding:6px;background:#0d0d14;border-radius:10px 10px 0 0}
.ad-leader .ad-body{min-height:90px;display:flex;align-items:center;justify-content:center;gap:18px;padding:14px;
  background:linear-gradient(90deg,#16213a,#0e2a33,#1c1440);font-weight:700;font-size:15px;text-align:center;border-radius:0 0 12px 12px;border:1px solid var(--border);border-top:0}
.ad-live{display:flex;justify-content:center;padding:10px;background:#0b1220;border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px}
.ad-rail .ad-body{padding:22px 16px;text-align:center;background:linear-gradient(180deg,#16213a,#241533);font-weight:700;
  border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px}
.ad-house-title{font-size:18px;font-weight:900}
.ad-body small{font-weight:400;color:#c9c9de;font-size:13px;display:block;margin-top:4px;max-width:420px}
.ad-cta{background:linear-gradient(135deg,#5b8fff,#3b6ff0);color:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:800;cursor:pointer;border:0;display:inline-block;margin-top:10px}
.infeed{border-radius:16px;background:var(--surface);border:1px solid var(--border);aspect-ratio:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px;position:relative;overflow:hidden;text-align:center}
.infeed::after{content:"AD";position:absolute;top:8px;right:10px;font-size:10px;color:#9a9ab5;border:1px solid #4a4a66;border-radius:4px;padding:1px 5px}

/* HERO */
.hero{display:grid;grid-template-columns:1.4fr .8fr;gap:16px;margin-bottom:20px}
.hero-main{position:relative;border-radius:18px;overflow:hidden;min-height:280px;border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:flex-end;cursor:pointer;background:var(--surface)}
.hero-main img.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.hero-content{position:relative;padding:26px;z-index:2;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.hero-content h2{margin:6px 0;font-size:34px;letter-spacing:-.5px}
.hero-content p{margin:0 0 14px;color:#d6d6e6;max-width:520px}
.play-big{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#5b8fff,#3b6ff0);color:#fff;font-weight:800;
  border-radius:999px;padding:12px 22px;font-size:16px;border:0;cursor:pointer;box-shadow:0 8px 22px rgba(36,88,214,.45)}
.hero-side{display:flex;flex-direction:column;gap:16px}
.mini-stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px}
.mini-stat h3{margin:0 0 10px;font-size:14px}
.recent-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.recent-chip{flex-shrink:0;width:86px;text-align:center;font-size:11px;color:#c9c9da;cursor:pointer}
.recent-chip img{width:64px;height:64px;border-radius:14px;margin:0 auto 6px;object-fit:cover;display:block}

/* SECTION ROWS */
.sec-head{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.sec-head h2{margin:0;font-size:19px}
.sec-head .sub{color:var(--muted);font-size:13px}
.pill{font-size:11px;font-weight:900;padding:3px 8px;border-radius:999px;letter-spacing:.4px}
.pill.live{background:var(--red);color:#fff}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.hcard{flex:0 0 200px;scroll-snap-align:start}

/* GRID CARDS */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:1rem .85rem}
@media(min-width:700px){.grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
.card{background:transparent;border:0;border-radius:16px;cursor:pointer;transition:transform .22s;position:relative}
.card:hover{transform:translateY(-5px)}
.thumb{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--surface);
  border:1px solid rgba(255,255,255,.06);border-radius:16px;transition:border-color .22s,box-shadow .22s}
.card:hover .thumb{border-color:rgba(110,161,255,.55);box-shadow:0 16px 32px rgba(0,0,0,.42),0 0 0 1px rgba(79,140,255,.22)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.07)}
.thumb .playov{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,transparent 35%,rgba(4,8,16,.72));opacity:0;transition:opacity .22s;z-index:3}
.card:hover .playov{opacity:1}
.playov span{background:linear-gradient(135deg,#5b8fff,#3b6ff0);color:#fff;font-weight:800;border-radius:999px;
  padding:.55rem .95rem;font-size:.78rem;box-shadow:0 8px 22px rgba(36,88,214,.45)}
.tagrow{position:absolute;top:8px;left:8px;display:flex;gap:6px;z-index:4}
.tag{font-size:10px;font-weight:900;letter-spacing:.5px;padding:4px 8px;border-radius:999px}
.tag.new{background:var(--sky);color:#06222e}
.tag.popular{background:var(--accent);color:#fff}
.tag.hot{background:var(--red);color:#fff}
.card-body{padding:0}
.card-title{margin-top:.5rem;padding:0 .15rem;font-weight:650;font-size:.84rem;line-height:1.3}
.card-meta{display:flex;align-items:center;gap:8px;margin-top:2px;padding:0 .15rem;font-size:12px;color:var(--muted);flex-wrap:wrap}
.like-bar{height:4px;border-radius:99px;background:#232c47;margin:8px .15rem 0;overflow:hidden}
.like-bar i{display:block;height:100%;background:var(--accent)}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:14px;grid-column:1/-1}
.load-more-wrap{display:flex;justify-content:center;margin-top:1.5rem}
.load-more-btn{padding:.7rem 1.35rem;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-weight:700;cursor:pointer}
.load-more-btn:hover{border-color:var(--accent);color:#8eb0ff}

/* PLAY PAGE */
.crumbs{font-size:13px;color:var(--muted);margin:8px 0 12px}
.crumbs b{color:#fff}
.play-layout{display:grid;grid-template-columns:1fr;gap:16px}
.player-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.player-top{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}
.player-top img.t{width:46px;height:46px;border-radius:12px;object-fit:cover}
.player-top h1{margin:0;font-size:18px}
.player-top .meta{font-size:12px;color:var(--muted)}
.player-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.icon-btn{background:var(--surface2);border:1px solid var(--border);color:#fff;border-radius:999px;padding:9px 13px;
  font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn.liked{background:#1a2b55;border-color:var(--accent)}
.icon-btn.disliked{background:#3a1220;border-color:var(--red)}
.icon-btn.primary{background:linear-gradient(135deg,#5b8fff,#3b6ff0);color:#fff;border-color:transparent}
.stage{position:relative;background:#000;aspect-ratio:16/10;max-height:640px}
.stage iframe{width:100%;height:100%;border:0;display:block;background:#000}
.preroll{position:absolute;inset:0;background:rgba(5,5,10,.94);display:flex;align-items:center;justify-content:center;z-index:5}
.preroll-box{max-width:440px;width:92%;background:#17171f;border:1px solid #33334d;border-radius:16px;overflow:hidden;text-align:center}
.preroll-box .ad-tag{font-size:10px;letter-spacing:2px;color:#8888a5;padding:8px;background:#0c0c13}
.preroll-box .ad-tag span{color:#fff}
.preroll-cre{padding:18px 16px}
.preroll-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:13px;color:var(--muted)}
.player-foot{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--border);flex-wrap:wrap}
.vote-pct{font-size:12px;color:var(--muted)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.info-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px}
.info-box h3,.info-box h2{margin:0 0 8px;font-size:15px}
.info-box p,.info-box li{font-size:13.5px;color:#c9c9db;line-height:1.55}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px}

/* FOOTER */
footer.site-footer{grid-column:3;text-align:center;padding:.5rem 1rem 2rem;color:var(--muted);font-size:.8rem}
footer.site-footer a{color:#8eb0ff;text-decoration:none;font-weight:600}
footer code{background:#1c2740;padding:2px 6px;border-radius:6px;color:#d8d8ea}

/* mobile cat bar */
.mnav{display:none;gap:8px;overflow-x:auto;padding:2px 0 12px}
.mnav button{flex-shrink:0}
.chip{background:var(--surface);border:1px solid var(--border);color:#d6d6e6;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

@media(max-width:1280px){
  .layout{grid-template-columns:var(--side-w) minmax(0,1fr) var(--rail-w)}
  .ad-rail.left{display:none}
  .ad-rail.right{grid-column:3}
  .main,footer.site-footer{grid-column:2}
}
@media(max-width:1100px){
  .layout{grid-template-columns:var(--side-w) minmax(0,1fr)}
  .ad-rail{display:none}
  .main,footer.site-footer{grid-column:2}
  .hero{grid-template-columns:1fr}
}
@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .menu-toggle{display:grid;place-items:center}
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100vh;width:min(270px,86vw);z-index:70;
    transform:translateX(-105%);transition:transform .2s ease}
  .sidebar.open{transform:translateX(0)}
  .main,footer.site-footer{grid-column:1}
  .main{padding:14px 14px 70px}
  .mnav{display:flex}
  .logo-text{display:none}
}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60}
.sidebar-backdrop.open{display:block}