/* Esports (BASE-THEME.md): competitive - cut corners, parallelogram tags, slanted meter segments, condensed capitals, a haze
   of the primary over diagonal hatching. Chakra Petch for display, Barlow for words (fontsource 5.3.0, latin, OFL - the
   licences sit beside the files). */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/chakra-petch-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/chakra-petch-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/chakra-petch-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.woff2) format('woff2')}

:root{
  --st-font-display:'Chakra Petch',system-ui,sans-serif;--st-font-body:'Barlow',system-ui,sans-serif;--st-font-mono:'Chakra Petch',system-ui,sans-serif;
  --st-r:0px;--st-r-sm:0px;--st-r-btn:0px;--st-r-in:0px;--st-bw:1px;--st-border:var(--st-line);--st-head-case:uppercase;--st-head-track:.01em;--st-label-track:.12em;
  --st-cut:14px;--st-cut-sm:8px;
}
body.st-look{background-image:linear-gradient(180deg,var(--st-haze) 0,transparent 380px),repeating-linear-gradient(135deg,var(--st-grid) 0 1px,transparent 1px 16px)}
.st-title,.st-heading{font-weight:700;line-height:1}

/* cut corners: panels and buttons lose two opposite corners; the edge is drawn inside so the cut keeps it */
.st-panel,.st-panel--dark{border:0;box-shadow:inset 0 0 0 1px var(--st-line);
  clip-path:polygon(var(--st-cut) 0,100% 0,100% calc(100% - var(--st-cut)),calc(100% - var(--st-cut)) 100%,0 100%,0 var(--st-cut))}
.st-menu__panel{box-shadow:inset 0 0 0 1px var(--st-line)}
.st-btn,.st-tile,.st-window,.st-iconbtn,.st-arrow,.st-spend label,.st-answers label,.st-payopts label,.st-tabsnav a{border:0;box-shadow:inset 0 0 0 1px var(--st-line);
  clip-path:polygon(var(--st-cut-sm) 0,100% 0,100% calc(100% - var(--st-cut-sm)),calc(100% - var(--st-cut-sm)) 100%,0 100%,0 var(--st-cut-sm))}
.st-btn{box-shadow:none;font-weight:700;letter-spacing:.14em}
.st-btn--quiet{box-shadow:inset 0 0 0 1px var(--st-line)}
.st-spend input:checked+label,.st-answers input:checked+label,.st-tabsnav a[aria-current=page]{box-shadow:none}
.st-payopts input:checked+label{box-shadow:inset 0 0 0 1px var(--st-p)}

/* tags as parallelograms */
.st-chip,.st-boost,.st-last,.st-price,.st-status{border:0;border-radius:0;padding-left:13px;padding-right:13px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.st-chip{font-family:var(--st-font-display);font-weight:700}
.st-chip i{border-radius:0;transform:skewX(-20deg)}
.st-price{background:var(--st-p-soft);color:var(--st-p-text)}
.st-price b{font-weight:700}
.st-seg{border-radius:0}
.st-seg>a,.st-seg>label{font-family:var(--st-font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.st-nav a{font-family:var(--st-font-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.st-nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--st-p)}
.st-wallet{font-family:var(--st-font-display);font-weight:700}

/* meters in slanted segments */
.st-meter{height:10px;border-radius:0;background:transparent;overflow:visible}
.st-meter::before,.st-meter__fill{-webkit-mask:repeating-linear-gradient(105deg,#000 0 calc(5% - 4px),transparent calc(5% - 4px) 5%);mask:repeating-linear-gradient(105deg,#000 0 calc(5% - 4px),transparent calc(5% - 4px) 5%)}
.st-meter::before{content:"";position:absolute;inset:0;background:var(--st-s3)}
.st-meter__fill{border-radius:0;box-shadow:none;filter:drop-shadow(0 0 6px var(--st-p-glow))}

.st-card.is-boosted,.st-feature.is-boosted,.st-prize.is-boosted{box-shadow:inset 0 0 0 2px var(--st-win)}
