/* ================================================================
   XPORT — esports/gaming tube theme
   Scoped under body.xp-theme. Fonts: Saira Condensed (display),
   Chakra Petch (UI/body). Accent driven by --xp-ac.
   ================================================================ */

.xp-theme{
  --xp-bg:#08080b;
  --xp-panel:#0e0e13;
  --xp-panel2:#14141a;
  --xp-line:rgba(255,255,255,.06);
  --xp-ac:#e6132b;
  --xp-text:#dfe0e6;
  --xp-muted:#8d8e98;
  --xp-muted2:#71727b;
  margin:0;
  background:var(--xp-bg);
  color:var(--xp-text);
  font-family:'Chakra Petch',system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.xp-theme *{box-sizing:border-box}
.xp-theme a{text-decoration:none;color:inherit}
.xp-theme img{max-width:100%}
.xp-theme ::-webkit-scrollbar{height:8px;width:9px}
.xp-theme ::-webkit-scrollbar-track{background:#0c0c11}
.xp-theme ::-webkit-scrollbar-thumb{background:#26262f}
.xp-theme ::-webkit-scrollbar-thumb:hover{background:var(--xp-ac)}
.xp-theme input::placeholder{color:#6a6b74}
@keyframes xpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- Header / nav ---------- */
.xp-nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:26px;
  padding:13px 32px;
  background:linear-gradient(180deg,#0d0d12,rgba(9,9,13,.92));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--xp-line);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.xp-brand{display:flex;align-items:center;gap:1px;flex:none;user-select:none}
.xp-brand-img{height:34px;max-width:210px;object-fit:contain;display:block}
.xp-brand .xp-x{
  font-family:'Saira Condensed';font-weight:800;font-size:29px;letter-spacing:.5px;
  color:var(--xp-ac);transform:skewX(-11deg);display:inline-block;
  text-shadow:0 0 18px rgba(230,19,43,.55);
}
.xp-brand .xp-rest{font-family:'Saira Condensed';font-weight:800;font-size:29px;letter-spacing:1.5px;color:#fff}
.xp-mainnav{display:flex;gap:2px;flex:none}
.xp-mainnav a{
  padding:9px 13px;font:600 12.5px/1 'Chakra Petch';letter-spacing:1.6px;
  color:#cbccd4;text-transform:uppercase;transition:color .15s;white-space:nowrap;
}
.xp-mainnav a:hover,.xp-mainnav a.on{color:#fff}
.xp-search{
  flex:1;max-width:540px;margin:0 auto;
  display:flex;align-items:center;gap:11px;
  background:var(--xp-panel2);border:1px solid rgba(255,255,255,.09);padding:9px 15px;
  clip-path:polygon(0 0,100% 0,100% 100%,11px 100%,0 calc(100% - 11px));
}
.xp-search svg{flex:none;stroke:#8d8e98}
.xp-search input{flex:1;background:none;border:none;outline:none;color:#fff;font:500 13.5px 'Chakra Petch';letter-spacing:.3px}
.xp-search button{
  background:var(--xp-ac);border:none;cursor:pointer;color:#fff;
  font:700 11px 'Chakra Petch';letter-spacing:1.5px;padding:5px 11px;
  clip-path:polygon(0 0,100% 0,100% 100%,6px 100%,0 calc(100% - 6px));
}

/* ---------- Home hero (featured) ---------- */
.xp-home{flex:1}
.xp-hero{
  position:relative;margin:20px 32px 0;min-height:452px;
  display:flex;align-items:center;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 46px) 100%,0 100%);
}
.xp-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#16040a}
.xp-hero-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);opacity:.5}
.xp-hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,#08080b 6%,rgba(8,8,11,.72) 42%,rgba(8,8,11,.1) 78%)}
.xp-hero-stripes{position:absolute;left:36px;top:30px;display:flex;gap:8px;transform:skewX(-22deg)}
.xp-hero-stripes span{width:13px;height:44px;background:var(--xp-ac)}
.xp-hero-stripes span:nth-child(2){opacity:.6}
.xp-hero-stripes span:nth-child(3){opacity:.3}
.xp-hero-body{position:relative;padding:56px 48px;max-width:660px}
.xp-hero-badges{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.xp-badge{
  background:var(--xp-ac);color:#fff;font:700 11px 'Chakra Petch';letter-spacing:2px;padding:5px 11px;
  clip-path:polygon(0 0,100% 0,100% 100%,7px 100%,0 calc(100% - 7px));text-transform:uppercase;
}
.xp-hero-views{font:600 12px 'Chakra Petch';letter-spacing:2.5px;color:#b9bac2}
.xp-hero h1{
  font-family:'Saira Condensed';font-weight:800;font-size:58px;line-height:.94;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;margin:0 0 16px;text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.xp-hero-lede{font:500 14px/1.6 'Chakra Petch';letter-spacing:.4px;color:#c3c4cd;max-width:480px;margin:0 0 30px}
.xp-hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.xp-btn-primary{
  display:flex;align-items:center;gap:10px;background:var(--xp-ac);color:#fff;border:none;cursor:pointer;
  font:700 13px 'Chakra Petch';letter-spacing:1.8px;padding:14px 26px;
  clip-path:polygon(0 0,100% 0,100% 66%,calc(100% - 14px) 100%,0 100%);
  box-shadow:0 0 30px rgba(230,19,43,.4);transition:filter .15s;
}
.xp-btn-primary:hover{filter:brightness(1.12)}
.xp-btn-ghost{
  display:flex;align-items:center;gap:9px;background:rgba(15,15,20,.65);color:#fff;
  border:1px solid rgba(255,255,255,.18);cursor:pointer;font:700 13px 'Chakra Petch';letter-spacing:1.8px;padding:14px 24px;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 66%);transition:border-color .15s;
}
.xp-btn-ghost:hover{border-color:var(--xp-ac)}

/* ---------- Slim banner (search / category) ---------- */
.xp-banner{margin:22px 32px 0;padding:4px 2px}
.xp-banner-eyebrow{display:flex;align-items:center;gap:12px;font:700 11px 'Chakra Petch';letter-spacing:2.4px;text-transform:uppercase;color:var(--xp-ac);margin-bottom:12px}
.xp-banner-eyebrow .xp-rule{flex:none;width:44px;height:2px;background:var(--xp-ac)}
.xp-banner h1{font-family:'Saira Condensed';font-weight:800;font-size:40px;line-height:1;letter-spacing:.5px;text-transform:uppercase;color:#fff;margin:0}
.xp-banner-count{display:block;font:500 13px 'Chakra Petch';letter-spacing:1px;color:var(--xp-muted);margin-top:10px}

/* ---------- Toolbar / chips ---------- */
.xp-toolbar{display:flex;align-items:center;gap:18px;padding:28px 32px 4px}
.xp-chips{display:flex;gap:9px;overflow-x:auto;flex:1;padding-bottom:6px}
.xp-chip{
  flex:none;cursor:pointer;padding:8px 15px;font:600 12px 'Chakra Petch';letter-spacing:1.2px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.1);background:#111116;color:#b9bac2;
  clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px));transition:all .15s;white-space:nowrap;
}
.xp-chip:hover{color:#fff;border-color:rgba(230,19,43,.5)}
.xp-chip.on{font-weight:700;border-color:transparent;background:var(--xp-ac);color:#fff;box-shadow:0 0 18px rgba(230,19,43,.45)}

/* ---------- Section head ---------- */
.xp-sechead{display:flex;align-items:baseline;gap:12px;padding:22px 32px 6px}
.xp-sechead h2{font-family:'Saira Condensed';font-weight:800;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin:0}
.xp-sechead h2 .xp-slash{color:var(--xp-ac)}
.xp-sechead .xp-count{font:500 12px 'Chakra Petch';letter-spacing:1.5px;color:var(--xp-muted)}
.xp-sechead .xp-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)}

/* ---------- Grid + cards ---------- */
.xp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:22px;padding:8px 32px 46px}
.xp-card{
  cursor:pointer;display:flex;flex-direction:column;background:var(--xp-panel);
  border:1px solid rgba(255,255,255,.05);
  clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,0 100%);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.xp-card:hover{transform:translateY(-5px);border-color:rgba(230,19,43,.6);box-shadow:0 16px 38px rgba(0,0,0,.6)}
.xp-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#16040a}
.xp-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.xp-thumb-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px);opacity:.5}
.xp-thumb-glyph{position:absolute;right:10px;top:8px;font-family:'Saira Condensed';font-weight:800;font-size:32px;letter-spacing:1px;color:rgba(255,255,255,.09);text-transform:uppercase}
.xp-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;background:rgba(230,19,43,.92);
  clip-path:polygon(0 0,100% 0,100% 72%,78% 100%,0 100%);box-shadow:0 0 22px rgba(230,19,43,.55);
}
.xp-thumb-cat{position:absolute;left:9px;bottom:9px;background:rgba(0,0,0,.65);color:var(--xp-ac);font:700 10px 'Chakra Petch';letter-spacing:1.5px;padding:3px 8px;border:1px solid rgba(230,19,43,.4);text-transform:uppercase}
.xp-thumb-dur{position:absolute;right:9px;bottom:9px;background:rgba(0,0,0,.82);color:#fff;font:600 11px 'Chakra Petch';padding:3px 7px}
.xp-card-body{display:flex;gap:11px;padding:13px 13px 15px;min-width:0}
.xp-ci{
  width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2a2a34,#141419);border:1px solid rgba(255,255,255,.1);color:#fff;
  font:700 11px 'Saira Condensed';clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
}
.xp-card-text{min-width:0}
.xp-card-title{font:600 14px/1.3 'Chakra Petch';color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xp-card-chan{font:500 12px 'Chakra Petch';color:#9a9ba4;margin-top:5px}
.xp-card-views{font:500 11.5px 'Chakra Petch';color:var(--xp-muted2);margin-top:2px}

/* ---------- Pager ---------- */
.xp-pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:6px 32px 44px}
.xp-pager a{
  padding:8px 14px;font:600 12px 'Chakra Petch';letter-spacing:1px;color:#b9bac2;background:#111116;
  border:1px solid rgba(255,255,255,.1);clip-path:polygon(0 0,100% 0,100% 100%,7px 100%,0 calc(100% - 7px));transition:all .15s;
}
.xp-pager a:hover{color:#fff;border-color:rgba(230,19,43,.5)}
.xp-pager a.on{background:var(--xp-ac);color:#fff;border-color:transparent;box-shadow:0 0 14px rgba(230,19,43,.4)}

/* ---------- Footer ---------- */
.xp-foot{
  margin-top:auto;padding:24px 32px;border-top:1px solid var(--xp-line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.xp-foot-brand{display:flex;align-items:center;gap:1px}
.xp-foot-brand .xp-x{font-family:'Saira Condensed';font-weight:800;font-size:20px;color:var(--xp-ac);transform:skewX(-11deg);display:inline-block}
.xp-foot-brand .xp-rest{font-family:'Saira Condensed';font-weight:800;font-size:20px;letter-spacing:1.5px;color:#fff}
.xp-foot-nav{display:flex;gap:16px}
.xp-foot-nav a{font:600 11px 'Chakra Petch';letter-spacing:1.4px;text-transform:uppercase;color:#9a9ba4}
.xp-foot-nav a:hover{color:#fff}
.xp-foot-note{flex-basis:100%;font:500 11px 'Chakra Petch';letter-spacing:1.2px;color:#5c5d66}

/* ================================================================
   WATCH
   ================================================================ */
.xp-watch{max-width:1200px;width:100%;margin:0 auto;padding:24px 32px 52px;flex:1}
.xp-back{display:inline-flex;align-items:center;gap:9px;font:700 11px 'Chakra Petch';letter-spacing:1.6px;text-transform:uppercase;color:#c3c4cd;margin-bottom:16px}
.xp-back:hover{color:#fff}
.xp-watch-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start}
.xp-watch-main{min-width:0}
.xp-player{
  position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 34px) 100%,0 100%);
}
.xp-player video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.xp-watch-title{font-family:'Saira Condensed';font-weight:800;font-size:32px;line-height:1.05;text-transform:uppercase;color:#fff;margin:22px 0 14px}
.xp-watch-subline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07);font:600 13px 'Chakra Petch';letter-spacing:.5px;color:#c3c4cd}
.xp-watch-subline .xp-cat{color:var(--xp-ac)}
.xp-watch-subline a.xp-cat:hover{filter:brightness(1.2)}
.xp-watch-subline .xp-sep{color:#4b4c55}
.xp-watch-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:18px 0}
.xp-wbtn{
  display:flex;align-items:center;gap:8px;background:var(--xp-panel2);border:1px solid rgba(255,255,255,.1);color:#dcdde4;cursor:pointer;
  font:700 11px 'Chakra Petch';letter-spacing:1.4px;padding:9px 15px;
  clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px));transition:border-color .15s;text-transform:uppercase;
}
.xp-wbtn:hover{border-color:var(--xp-ac)}
.xp-about{background:var(--xp-panel);border:1px solid var(--xp-line);padding:18px 20px;margin-top:4px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.xp-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.xp-tag{font:600 11px 'Chakra Petch';letter-spacing:1px;color:#9a9ba4;background:rgba(255,255,255,.05);padding:4px 10px}
.xp-tag.on{color:var(--xp-ac);background:rgba(230,19,43,.1)}
.xp-about p{font:500 13.5px/1.65 'Chakra Petch';color:#b7b8c1;margin:0}

/* watch sidebar / up next */
.xp-side-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.xp-side-head h2{font-family:'Saira Condensed';font-weight:800;font-size:19px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin:0}
.xp-side-head .xp-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(230,19,43,.5),transparent)}
.xp-upnext{display:flex;flex-direction:column;gap:12px}
.xp-side-card{
  cursor:pointer;display:flex;gap:12px;background:var(--xp-panel);border:1px solid rgba(255,255,255,.05);padding:9px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:border-color .16s;
}
.xp-side-card:hover{border-color:rgba(230,19,43,.55)}
.xp-side-thumb{position:relative;width:148px;flex:none;aspect-ratio:16/9;overflow:hidden;background:#16040a;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.xp-side-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.xp-side-dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.82);color:#fff;font:600 10px 'Chakra Petch';padding:2px 6px}
.xp-side-text{min-width:0}
.xp-side-title{font:600 12.5px/1.25 'Chakra Petch';color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xp-side-sub{font:500 11px 'Chakra Petch';color:var(--xp-muted);margin-top:6px}

/* mobile mini-related rows (interleaved with ad slots) */
.xp-mini-related{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.xp-mini-related .xp-side-thumb{width:140px}

/* ---------- Mimic blocks (image bait) — match xp cards ---------- */
.xp-theme .mimic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px 0}
.xp-theme .mimic-cell{display:block;color:inherit;text-decoration:none;cursor:pointer}
.xp-theme .mimic-cell-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#16040a;border:1px solid rgba(255,255,255,.06);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.xp-theme .mimic-cell-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.xp-theme .mimic-cell:hover .mimic-cell-thumb img{transform:scale(1.04)}
.xp-theme .mimic-cell-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.xp-theme .mimic-cell-dur{position:absolute;right:9px;bottom:9px;z-index:2;font:600 11px 'Chakra Petch';padding:3px 7px;background:rgba(0,0,0,.82);color:#fff}
.xp-theme .mimic-cell-title{margin-top:9px;font:600 13px 'Chakra Petch';line-height:1.35;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .xp-watch-grid{grid-template-columns:1fr}
  .xp-hero h1{font-size:44px}
  .xp-hero{min-height:360px}
}
@media (max-width:760px){
  .xp-nav{gap:12px;padding:11px 14px;flex-wrap:wrap}
  .xp-mainnav{display:none}
  .xp-search{order:3;flex-basis:100%;max-width:none;margin:0}
  .xp-hero,.xp-banner{margin-left:14px;margin-right:14px}
  .xp-hero-body{padding:32px 22px}
  .xp-hero h1{font-size:34px}
  .xp-toolbar,.xp-sechead{padding-left:14px;padding-right:14px}
  .xp-grid{padding:8px 14px 34px;gap:16px}
  .xp-watch{padding:18px 14px 40px}
  .xp-banner h1{font-size:30px}
}
</content>