/* Eventechs Esports — "Blue side vs Orange side".
   Broadcast-graphics language on the light brand: slanted panels, condensed type, scoreboard bar,
   kill feed, inventory slots. Ink panels only where a broadcast screen would be. */
.es{--blue:var(--pre);--orange:var(--live);--slant:-7deg}
.slant{transform:skewX(var(--slant));transform-origin:left bottom}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 1.8s infinite;vertical-align:1px}
.side-tag{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;padding:6px 14px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);margin-bottom:16px}
.side-tag.blue{background:var(--blue);color:#fff}
.side-tag.orange{background:var(--orange);color:var(--on-live)}

/* hero */
.es-hero{padding-block:clamp(28px,4vw,48px) clamp(64px,8vw,110px)}
.scorebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;max-width:760px;margin:0 auto clamp(36px,5vw,64px);font-weight:700}
.sb-side{display:flex;flex-direction:column;justify-content:center;padding:10px 22px;font-size:.85rem;line-height:1.2}
.sb-side b{font-family:var(--f-display);font-weight:900;font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em}
.sb-side.blue{background:var(--blue);color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);border-radius:12px 0 0 12px;text-align:left}
.sb-side.orange{background:var(--orange);color:var(--on-live);clip-path:polygon(18px 0,100% 0,100% 100%,0 100%);border-radius:0 12px 12px 0;text-align:right;align-items:flex-end}
.sb-score{background:var(--ink);color:#fff;display:flex;align-items:center;gap:10px;padding:0 26px;margin-inline:-10px;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 100%,0 100%);position:relative;z-index:1}
.sb-score b{font-family:var(--f-display);font-weight:900;font-size:2rem}
.sb-score i{font-style:normal;opacity:.5}
.sb-score em{font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.06em;display:flex;align-items:center;gap:6px;margin-left:6px;text-transform:uppercase}
@media (max-width:560px){.sb-side{padding:8px 14px}.sb-side b{font-size:1rem}.sb-score{padding:0 18px}.sb-score b{font-size:1.5rem}.sb-score em{display:none}}

.es-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:1000px){.es-hero-grid{grid-template-columns:minmax(0,1fr)}}
.es-hero-copy{display:grid;gap:26px;justify-items:start}
.es-hero h1{font-size:clamp(4.2rem,11vw,9.5rem);line-height:.84}
.es-hero h1 .o{color:var(--orange)}

.versus{display:grid;grid-template-columns:1fr 64px 1fr;gap:0;align-items:stretch;position:relative}
.vs-panel{padding:28px 26px 30px;display:grid;gap:10px;align-content:start;min-height:300px}
.vs-panel strong{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,5vw,3.6rem);text-transform:uppercase;line-height:.9}
.vs-panel ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-weight:600;font-size:.98rem}
.vs-panel li{display:flex;gap:8px;align-items:baseline}
.vs-panel li::before{content:"";width:8px;height:8px;flex:none;transform:skewX(-12deg) translateY(-1px)}
.vs-tag{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.vs-panel.blue{background:var(--blue);color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%);border-radius:22px 0 0 22px;margin-right:-34px;padding-right:46px}
.vs-panel.blue li::before{background:#fff}
.vs-panel.orange{background:var(--orange);color:var(--on-live);clip-path:polygon(30px 0,100% 0,100% 100%,0 100%);border-radius:0 22px 22px 0;margin-left:-34px;padding-left:52px}
.vs-panel.orange li::before{background:var(--on-live)}
.vs-mid{display:grid;place-items:center;position:relative;z-index:2}
.vs-mid span{width:76px;height:76px;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--f-display);font-weight:900;font-size:2rem;clip-path:polygon(25% 0,100% 0,75% 100%,0 100%)}
.vs-ref{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-weight:700;color:var(--ink-2)}
@media (max-width:560px){
  .versus{grid-template-columns:1fr}
  .vs-panel{min-height:0;clip-path:none!important;margin:0!important;padding:22px!important;border-radius:20px!important}
  .vs-mid{margin:-18px 0;height:36px}.vs-mid span{width:56px;height:56px;font-size:1.5rem}
}

/* kill feed */
.killfeed{background:var(--ink);color:#fff;overflow:hidden;padding-block:14px;border-block:3px solid var(--orange)}
.kf-track{display:flex;gap:14px;width:max-content;animation:kf 40s linear infinite}
.killfeed:hover .kf-track{animation-play-state:paused}
@keyframes kf{to{transform:translateX(-50%)}}
.kf-track span{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(255,255,255,.07);border-radius:4px;font-weight:600;font-size:.95rem;white-space:nowrap}
.kf-track b{color:#fff;font-weight:800}
.kf-track span{color:#C9CCE0}
.kf-track svg{width:22px;height:12px;color:var(--orange)}
@media (prefers-reduced-motion:reduce){.kf-track{flex-wrap:wrap;width:auto;padding-inline:var(--gut)}.kf-track span[aria-hidden]{display:none}}

/* modes */
.mode-select{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:900px){.mode-select{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mode-btn{position:relative;text-align:left;border:2px solid var(--line);background:#fff;border-radius:18px;padding:18px 18px 20px;cursor:pointer;display:grid;gap:8px;transition:border-color .15s,transform .15s,box-shadow .15s}
.mode-btn:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.mode-btn[aria-selected="true"]{border-color:var(--ink);box-shadow:6px 6px 0 var(--orange)}
.mode-btn svg{width:34px;height:34px;color:var(--ink)}
.mode-btn[aria-selected="true"] svg{color:var(--orange)}
.mode-btn strong{font-family:var(--f-display);font-weight:900;font-size:1.6rem;text-transform:uppercase;line-height:.95}
.mode-btn span{font-size:.88rem;color:var(--ink-2)}
.mode-btn .pick{position:absolute;top:12px;right:12px;font-size:.7rem;font-weight:800;padding:3px 8px;background:var(--orange);color:var(--on-live);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);opacity:0}
.mode-btn[aria-selected="true"] .pick{opacity:1}
.mode-card{background:var(--mist);border-radius:24px;padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,48px)}
@media (max-width:860px){.mode-card{grid-template-columns:minmax(0,1fr)}}
.mc-title{font-family:var(--f-display);font-weight:900;font-size:clamp(2.2rem,4vw,3.2rem);text-transform:uppercase;line-height:.9;margin:0 0 10px}
.mc-like{font-size:.9rem;color:var(--ink-3);margin-top:12px}
.mc-meta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.mc-meta span{font-size:.85rem;font-weight:700;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.loadout-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:480px){.loadout-list{grid-template-columns:minmax(0,1fr)}}
.loadout-list li{display:flex;gap:8px;align-items:center;font-weight:600;font-size:.95rem;background:#fff;border-radius:10px;padding:10px 12px}
.loadout-list svg{width:18px;height:18px;color:var(--pass-ink);flex:none}
.stats-box{background:#fff;border-radius:18px;padding:22px;display:grid;gap:16px;align-content:start}
.stat-line{display:grid;gap:6px}
.stat-line>div:first-child{display:flex;justify-content:space-between;font-weight:700;font-size:.92rem}
.stat-line em{font-style:normal;color:var(--ink-3);font-weight:600}
.segs{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.segs i{height:12px;background:var(--mist-2);transform:skewX(-14deg);transition:background-color .25s}
.segs i.on{background:var(--ink)}
.stat-line.hype .segs i.on{background:var(--orange)}
.stat-line.reach .segs i.on{background:var(--blue)}

/* loadout inventory */
.loadout{background:var(--mist)}
.inv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:900px){.inv{grid-template-columns:minmax(0,1fr)}}
.inv-group{background:#fff;border-radius:24px;padding:22px;display:grid;gap:14px}
.inv-group h3{font-size:1.7rem}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.slot{position:relative;background:var(--mist);border-radius:12px;padding:16px 16px 18px;display:grid;gap:6px;align-content:start;min-width:0}
.slot::before,.slot::after{content:"";position:absolute;width:14px;height:14px;border:2.5px solid transparent;transition:border-color .15s}
.slot::before{top:6px;left:6px;border-top-color:var(--ink-3);border-left-color:var(--ink-3)}
.slot::after{bottom:6px;right:6px;border-bottom-color:var(--ink-3);border-right-color:var(--ink-3)}
.slot:hover::before,.slot:hover::after{border-color:var(--orange) transparent transparent var(--orange)}
.slot:hover::after{border-color:transparent var(--orange) var(--orange) transparent}
.slot svg{width:30px;height:30px;color:var(--ink);margin:4px 0 2px}
.slot strong{font-weight:800;font-size:1rem;line-height:1.2}
.slot span{font-size:.86rem;color:var(--ink-2)}

/* bracket */
.arena{background:var(--white)}
.bk-shell{background:var(--ink);color:#fff;border-radius:24px;padding:clamp(16px,3vw,28px);overflow:hidden}
.bk-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-weight:700;font-size:.9rem;margin-bottom:18px;color:#C9CCE0}
.bk-top span{display:flex;align-items:center;gap:8px}
.bk-reset{border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:99px;padding:8px 14px;font-weight:700;font-size:.85rem;cursor:pointer;min-height:40px}
.bk-reset:hover{background:rgba(255,255,255,.1)}
.bk{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr)) minmax(160px,.8fr);gap:clamp(12px,2vw,28px);overflow-x:auto;padding-bottom:6px}
.bk-col{display:flex;flex-direction:column;justify-content:space-around;gap:14px;min-width:0}
.bk-col h4{margin:0 0 4px;font-size:.78rem;font-weight:800;color:#8A8DB0;text-transform:uppercase;letter-spacing:.08em}
.bk-match{display:grid;gap:3px;position:relative}
.bk-team{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;border:0;background:#1E2140;color:#fff;padding:9px 10px;border-radius:6px;text-align:left;cursor:pointer;font-weight:700;font-size:.92rem;min-height:40px;transition:background-color .15s,opacity .15s}
.bk-team:hover:not(:disabled){background:#2A2E58}
.bk-team:disabled{cursor:default}
.bk-team .seed{font-family:var(--f-mono);font-size:.72rem;color:#8A8DB0}
.bk-team .sc{font-family:var(--f-display);font-weight:900;font-size:1.15rem;min-width:14px;text-align:right}
.bk-team.win{background:var(--orange);color:var(--on-live)}
.bk-team.win .seed{color:rgba(26,11,2,.6)}
.bk-team.lose{opacity:.4}
.bk-team.tbd{background:transparent;border:1.5px dashed rgba(255,255,255,.2);color:#8A8DB0;cursor:default}
.bk-champ{display:grid;place-items:center;text-align:center;gap:8px;background:linear-gradient(#1E2140,#1E2140) padding-box;border:2px solid #2A2E58;border-radius:16px;padding:18px}
.bk-champ svg{width:44px;height:44px;color:var(--orange)}
.bk-champ strong{font-family:var(--f-display);font-weight:900;font-size:1.8rem;text-transform:uppercase;line-height:.95}
.bk-champ span{font-size:.8rem;color:#8A8DB0}
.bk-note{margin-top:14px;color:#C9CCE0;font-size:.92rem}
.matchday{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
@media (max-width:860px){.matchday{grid-template-columns:minmax(0,1fr)}}
.matchday li{padding:16px 16px 0 0;border-top:3px solid var(--ink);display:grid;gap:4px}
.matchday li:nth-child(4){border-top-color:var(--orange)}
.matchday time{font-family:var(--f-mono);font-weight:600;font-size:.85rem;color:var(--ink-3)}
.matchday strong{font-size:1.1rem}
.matchday span{font-size:.9rem;color:var(--ink-2)}

/* brands */
.brands{background:var(--mist)}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
@media (max-width:900px){.proof{grid-template-columns:minmax(0,1fr)}}
.proof-card{background:#fff;border-radius:20px;padding:22px;display:grid;gap:10px;align-content:start;border-top:5px solid var(--blue)}
.proof-card:last-child{border-top-color:var(--ink)}
.proof-k{font-weight:800;font-size:.95rem}
.proof-card p{color:var(--ink-2)}
.proof-card small{color:var(--ink-3);font-size:.82rem}
.proof-card a{color:var(--blue)}
.quest{background:#fff;border-radius:24px;padding:clamp(20px,3vw,32px);margin-bottom:22px}
.quest h3{font-size:1.7rem;margin-bottom:22px}
.levels{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.levels::before{content:"";position:absolute;left:16px;right:16px;top:15px;height:4px;background:linear-gradient(90deg,var(--blue) 0 50%,var(--orange) 50% 100%);border-radius:4px}
@media (max-width:860px){.levels{grid-template-columns:minmax(0,1fr);gap:16px}.levels::before{left:15px;right:auto;top:16px;bottom:16px;width:4px;height:auto;background:linear-gradient(var(--blue) 0 50%,var(--orange) 50% 100%)}}
.levels li{position:relative;display:grid;gap:6px;padding-right:14px;align-content:start}
.levels b{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.7rem;font-weight:800;position:relative;z-index:1;border:3px solid #fff;margin-bottom:6px}
@media (max-width:860px){.levels li{grid-template-columns:34px 1fr;column-gap:14px;padding:0}.levels b{grid-row:span 2;margin:0}}
.levels strong{font-family:var(--f-display);font-weight:900;font-size:1.35rem;text-transform:uppercase;line-height:1}
.levels span{font-size:.9rem;color:var(--ink-2)}
.sector{background:#fff;border-radius:24px;padding:clamp(18px,3vw,32px)}
.sector-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.sector-tab{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:0 16px;min-height:42px;font-weight:700;font-size:.92rem;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.sector-tab:hover{border-color:var(--ink-3)}
.sector-tab[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.sector-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px)}
@media (max-width:860px){.sector-card{grid-template-columns:minmax(0,1fr)}}
.cup-poster{position:relative;border-radius:20px;overflow:hidden;background:var(--ink);color:#fff;padding:26px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between}
.cup-poster::before{content:"";position:absolute;inset:0;background:var(--blue);clip-path:polygon(62% 0,100% 0,100% 100%,38% 100%)}
.cup-poster::after{content:"";position:absolute;inset:0;background:var(--orange);clip-path:polygon(88% 0,100% 0,100% 100%,64% 100%)}
.cup-poster>*{position:relative;z-index:1}
.cup-poster .k{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C9CCE0}
.cup-poster h4{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,5vw,3.8rem);line-height:.88;text-transform:uppercase;transform:skewX(var(--slant));transform-origin:left bottom;max-width:70%}
.cup-poster .games{display:flex;gap:6px;flex-wrap:wrap}
.cup-poster .games span{font-size:.8rem;font-weight:700;padding:5px 10px;border-radius:4px;background:rgba(255,255,255,.12)}
.cup-detail{display:grid;gap:16px;align-content:start}
.cup-detail dl{margin:0;display:grid;gap:14px}
.cup-detail dt{font-size:.82rem;font-weight:800;color:var(--blue);margin-bottom:3px}
.cup-detail dd{margin:0;color:var(--ink-2)}
.kpis{display:flex;gap:8px;flex-wrap:wrap}
.kpis span{font-size:.85rem;font-weight:700;padding:6px 12px;border-radius:99px;background:var(--pre-tint);color:var(--blue)}
.fine{font-size:.82rem;color:var(--ink-3)}

/* house rules */
.house{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:r}
@media (max-width:900px){.house{grid-template-columns:minmax(0,1fr)}}
.house li{counter-increment:r;background:var(--mist);border-radius:18px;padding:22px 22px 24px;display:grid;gap:8px;position:relative;overflow:hidden}
.house li::before{content:"Rule " counter(r);font-size:.78rem;font-weight:800;color:var(--live-ink);text-transform:uppercase;letter-spacing:.06em}
.house li::after{content:counter(r);position:absolute;right:14px;bottom:-22px;font-family:var(--f-display);font-weight:900;font-size:7rem;color:var(--mist-2);line-height:1;z-index:0}
.house strong,.house span{position:relative;z-index:1}
.house strong{font-family:var(--f-display);font-weight:900;font-size:1.6rem;text-transform:uppercase;line-height:.95}
.house span{color:var(--ink-2);font-size:.95rem;max-width:30ch}

/* titles & credits */
.games-sec{background:var(--white);padding-top:0}
.titles{display:flex;flex-wrap:wrap;gap:10px}
.titles span{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;font-family:var(--f-display);font-weight:800;font-size:1.3rem;text-transform:uppercase;background:var(--mist);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.titles span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.titles span[data-g="sports"]::before,.titles span[data-g="racing"]::before{background:var(--blue)}
.titles span[data-g="fighting"]::before,.titles span[data-g="shooter"]::before,.titles span[data-g="br"]::before{background:var(--orange)}
.titles span[data-g="mobile"]::before{background:var(--pass)}
.muted-note{color:var(--ink-3);font-size:.82rem;margin-top:12px}
.g-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 16px;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.g-legend span{display:flex;align-items:center;gap:7px}
.g-legend i{width:9px;height:9px;border-radius:50%}
.g-legend .l1{background:var(--blue)}.g-legend .l2{background:var(--orange)}.g-legend .l3{background:var(--pass)}.g-legend .l4{background:var(--ink-3)}
.credits{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,48px);background:var(--ink);color:#fff;border-radius:24px;padding:clamp(22px,4vw,44px)}
@media (max-width:860px){.credits{grid-template-columns:minmax(0,1fr)}}
.credits-h h3{font-size:clamp(2rem,4vw,2.8rem);line-height:.95}
.credits-h p{color:#B9BCD4;margin-top:10px;font-size:.92rem}
.credit-list{list-style:none;margin:0;padding:0;display:grid}
.credit-list li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.credit-list li:last-child{border-bottom:0}
.credit-list strong{font-size:1.05rem}
.credit-list span{color:#B9BCD4;font-size:.9rem}

.es-contact h2{font-size:clamp(3.4rem,8vw,6.5rem)}
.nav a[aria-current="page"]{background:var(--ink);color:#fff}