:root {
color-scheme: light;
--ground: #fafafb;
--s1: #ffffff;
--s2: #f3f3f5;
--s3: #eaeaee;
--line: rgba(9, 9, 11, 0.09);
--crest: 0.17;
--line-2: rgba(9, 9, 11, 0.16);
--text: #16171c;
--text-2: #5b6170;
--text-3: #6b7180;
--accent: #4c57bd;
--accent-2: #5e6ad2;
--accent-bg: rgba(94, 106, 210, 0.10);
--pos: #15794a;
--pos-fill: #2f9e69;
--pos-bg: rgba(47, 158, 105, 0.12);
--neg: #b5372c;
--neg-fill: #d15b50;
--neg-bg: rgba(209, 91, 80, 0.12);
--track: rgba(9, 9, 11, 0.08);
--focus-bg: rgba(94, 106, 210, 0.07);
--pick-bg: rgba(94, 106, 210, 0.13);
--shadow: 0 1px 2px rgba(9, 9, 11, 0.06);
--glow: rgba(94, 106, 210, 0.07);
--float: 0 12px 32px rgba(9, 9, 11, 0.2);
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--move: 420ms cubic-bezier(0.22, 1, 0.36, 1);
--bar: 48px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--ground: #08090a;
--s1: #101114;
--s2: #16171c;
--s3: #1e1f25;
--line: rgba(255, 255, 255, 0.06);
--crest: 0.20;
--line-2: rgba(255, 255, 255, 0.12);
--text: #f7f8f8;
--text-2: #9ca3af;
--text-3: #777d8b;
--accent: #6f7ae0;
--accent-2: #5e6ad2;
--accent-bg: rgba(94, 106, 210, 0.16);
--pos: #4bbd85;
--pos-fill: #3d9d6e;
--neg: #e2776d;
--neg-fill: #b8564d;
--pos-bg: rgba(75, 189, 133, 0.12);
--neg-bg: rgba(226, 119, 109, 0.12);
--track: rgba(255, 255, 255, 0.07);
--focus-bg: rgba(110, 122, 224, 0.10);
--pick-bg: rgba(110, 122, 224, 0.20);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
--glow: rgba(94, 106, 210, 0.1);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--ground: #08090a;
--s1: #101114;
--s2: #16171c;
--s3: #1e1f25;
--line: rgba(255, 255, 255, 0.06);
--line-2: rgba(255, 255, 255, 0.12);
--crest: 0.20;
--text: #f7f8f8;
--text-2: #9ca3af;
--text-3: #777d8b;
--accent: #6f7ae0;
--accent-2: #5e6ad2;
--accent-bg: rgba(94, 106, 210, 0.16);
--pos: #4bbd85;
--pos-fill: #3d9d6e;
--neg: #e2776d;
--neg-fill: #b8564d;
--pos-bg: rgba(75, 189, 133, 0.12);
--neg-bg: rgba(226, 119, 109, 0.12);
--track: rgba(255, 255, 255, 0.07);
--focus-bg: rgba(110, 122, 224, 0.10);
--pick-bg: rgba(110, 122, 224, 0.20);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
--glow: rgba(94, 106, 210, 0.1);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--ground);
color: var(--text);
font: 400 14.5px/1.55 var(--sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body::before {
content: "";
position: fixed;
inset: 0 0 auto 0;
height: 420px;
background: radial-gradient(1100px 320px at 50% -140px, var(--glow), transparent 70%);
pointer-events: none;
z-index: 0;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--accent-bg); }
:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
border-radius: 4px;
}
.wrap { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 24px; }
html[data-zoom="1.08"] body { zoom: 1.08; }
html[data-zoom="1.2"] body { zoom: 1.2; }
html[data-zoom="1.33"] body { zoom: 1.33; }
html[data-zoom="1.5"] body { zoom: 1.5; }
html[data-zoom="1.75"] body { zoom: 1.75; }
html[data-zoom="2"] body { zoom: 2; }
.num { font-variant-numeric: tabular-nums; }
.mic {
font: 500 10.5px/1 var(--sans);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: var(--bar);
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--ground) 82%, transparent);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
}
.top .wrap {
display: flex; align-items: center; justify-content: space-between;
align-self: stretch; width: 100%;
}
.top .wrap { max-width: none; padding: 0 20px; }
@media (max-width: 720px) { .top .wrap { padding: 0 16px; } }
.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icobtn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--text-2);
transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.icobtn:hover { background: var(--s2); color: var(--text); border-color: var(--line); }
.icobtn svg { width: 15px; height: 15px; }
.pmhead { color: var(--text); }
.pmhead .pmlogo { width: 17px; height: 17px; }
.pmhead:hover, .pmhead:focus-visible { color: var(--pm); outline: none; }
.warn {
padding: 3px 8px;
border: 1px solid var(--line-2);
border-radius: 5px;
font: 500 11px/1.5 var(--sans);
color: var(--text-2);
}
.hero { padding: 64px 0 24px; text-align: center; transition: padding var(--move); }
.hero h1 { font-size: 40px; line-height: 1.1; }
.hero p { margin: 12px auto 0; max-width: 620px; color: var(--text-2); font-size: 15px; }
.hero p span { display: block; }
@media (max-width: 720px) {
.hero p span { display: inline; }
.hero p { text-wrap: balance; }
}
@media (max-width: 520px) {
.hero p { margin: 12px -10px 0; max-width: none; font-size: min(3.15vw, 15px); letter-spacing: -0.005em; }
}
body.answered .hero { padding: 28px 0 16px; }
body.answered .hero p { display: none; }
body.answered .hero h1 { font-size: 26px; }
#notice { margin: 0 0 10px; }
.notice {
display: flex;
align-items: baseline;
gap: 9px;
padding: 10px 13px;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text-2);
font-size: 13.5px;
line-height: 1.45;
}
.notice::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--neg-fill);
transform: translateY(-1px);
}
.panel {
background: transparent;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--shadow);
}
.ask { padding: 10px 10px 10px 14px; transition: border-color var(--fast); }
.ask:focus-within { border-color: var(--line-2); }
.askhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.askhead .hint { font-size: 12.5px; color: var(--text-3); }
.seg {
display: inline-flex;
padding: 3px;
gap: 2px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
}
.seg button {
padding: 4px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-3);
transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.seg button:hover { color: var(--text-2); }
.seg button.on {
background: color-mix(in srgb, var(--text) 8%, transparent);
border-color: var(--line);
color: var(--text);
box-shadow: var(--shadow);
}
.field { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.field input {
flex: 1;
min-width: 0;
padding: 6px 10px;
margin-left: -10px;
background: transparent;
border: 0;
outline: none;
color: var(--text);
font: 400 15px/1.5 var(--sans);
}
.field input::placeholder { color: var(--text-3); }
.field input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 0; border-radius: 8px; }
kbd {
padding: 2px 6px;
background: transparent;
border: 1px solid var(--line);
border-radius: 5px;
font: 500 11px/1.5 var(--sans);
color: var(--text-3);
}
.go {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
background: var(--accent-2);
border: 0;
border-radius: 8px;
color: #fff;
font-size: 13.5px;
font-weight: 500;
transition: filter var(--fast), opacity var(--fast);
}
.go:hover { filter: brightness(1.08); }
.go:disabled { opacity: 0.55; cursor: default; filter: none; }
.go svg { width: 13px; height: 13px; }
.shbtn, .abar .aclear, .rhelp, .smore, .lgreset, .hxmore, .mpmore, details.fold > summary,
.pg, .mlpager .pgbtn, .copy, .cmudet, .scopehint .shgo, .afjump {
padding: 5px 11px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
font: 500 12px/1.4 var(--sans);
letter-spacing: normal;
text-transform: none;
text-decoration: none;
color: var(--text-3);
cursor: pointer;
transition: color var(--fast), border-color var(--fast), background var(--fast), opacity var(--fast);
}
.shbtn:hover, .abar .aclear:hover:not(:disabled), .rhelp:hover, .smore:hover, .lgreset:hover,
.hxmore:hover, .mpmore:hover, details.fold > summary:hover, .pg:hover:not(:disabled),
.mlpager .pgbtn:hover:not(:disabled), .copy:hover, .cmudet:hover, .scopehint .shgo:hover,
.afjump:hover {
color: var(--text); border-color: var(--line-2); background: var(--s2);
}
.abar .aclear:disabled, .pg:disabled, .mlpager .pgbtn:disabled { opacity: 0.35; cursor: default; }
.chips button, .mpask, .mpboard, .musample, .livegame {
padding: 5px 12px;
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
font: 400 13px/1.4 var(--sans);
color: var(--text-2);
text-decoration: none;
cursor: pointer;
transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.chips button:hover, .mpask:hover, .mpboard:hover, .musample:hover, .livegame:hover {
color: var(--text); border-color: var(--line-2); background: var(--s2);
}
.combo input, .frow input, .frow select, .frow textarea, .bsubrow input, .entsearch input {
padding: 8px 12px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 8px;
outline: none;
font: 400 14px/1.4 var(--sans);
color: var(--text);
transition: border-color var(--fast), box-shadow var(--fast);
}
.combo input::placeholder, .bsubrow input::placeholder, .entsearch input::placeholder,
.frow input::placeholder, .frow textarea::placeholder { color: var(--text-3); }
.combo input:focus, .frow input:focus, .frow select:focus, .frow textarea:focus,
.bsubrow input:focus, .entsearch input:focus {
outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-bg);
}
.scopehint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; font-size: 12.5px; color: var(--text-3); }
.scopehint:empty, .builder .scopehint { display: none; }
.scopehint .shset { color: var(--text-2); }
.leagues .lgchip.flash { animation: lgflash 0.6s ease-in-out 2; }
@keyframes lgflash {
50% { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-bg); }
}
@media (prefers-reduced-motion: reduce) { .leagues .lgchip.flash { animation: none; background: var(--accent-bg); color: var(--accent); } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.statfold { margin: 18px 2px 0; }
.stathelp { margin: 12px 0 2px; padding-left: 18px; }
.guide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 40px; }
.gcol { min-width: 0; }
.gshape { display: grid; grid-template-columns: 52px 1fr; row-gap: 8px; align-items: baseline; }
.grow { display: contents; }
.gwords { font: 400 12.5px/1.5 var(--sans); color: var(--text-2); }
.stathead { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.gtry { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 24px; }
.gq {
display: flex; align-items: baseline; gap: 8px;
padding: 4px 0; background: none; border: 0; text-align: left;
font: 400 13px/1.45 var(--sans); color: var(--text-2); cursor: pointer;
transition: color var(--fast);
}
.gq::before { content: "→"; color: var(--text-3); flex: none; transition: color var(--fast); }
.gq:hover { color: var(--text); }
.gq:hover::before { color: var(--accent); }
@media (max-width: 720px) {
.guide { grid-template-columns: 1fr; gap: 14px; }
.gtry { grid-template-columns: 1fr; }
}
.result { margin: 24px 0 0; }
.result > * { animation: rise var(--move) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.result > * { animation: none; }
* { transition-duration: 1ms !important; }
}
.answer { padding: 22px 22px 18px; }
.headline {
margin: 0;
font-family: var(--display);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.05;
font-size: clamp(38px, 7vw, 56px);
font-variant-numeric: tabular-nums;
}
.headline .unit {
margin-left: 10px;
font-size: 0.34em;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text-2);
}
.headline.sentence { font-size: clamp(19px, 3vw, 24px); line-height: 1.3; letter-spacing: -0.02em; }
.strip { margin-top: 16px; border-top: 1px solid var(--line); }
.crow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 2px 14px;
align-items: baseline;
padding: 8px 0 7px;
border-bottom: 1px solid var(--line);
}
.crow .clabel { font-size: 13.5px; color: var(--text-2); min-width: 0; }
.crow.asked .clabel { color: var(--text); font-weight: 500; }
.crow .cval {
font-family: var(--display);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.crow .cgames { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.bcell { padding-top: 5px; padding-bottom: 5px; }
td.bcell .ibox { display: inline-flex; }
td.bcell .islot.named { width: auto; padding: 0 5px; }
.itm { display: inline-flex; align-items: center; gap: 7px; }
.itm .islot, .clabel .islot {
display: inline-block; width: 22px; height: 22px; border-radius: 4px; background: var(--track);
overflow: hidden; flex: none; vertical-align: middle;
}
.itm .islot img.item, .clabel .islot img.item { display: block; width: 22px; height: 22px; }
.clabel .islot { margin-right: 6px; }
td.bcell .iname { font-size: 10px; line-height: 22px; color: var(--text-2); white-space: nowrap; }
.interp { margin: 14px 0 0; color: var(--text-2); font-size: 13.5px; }
.interp .mic { display: block; margin-bottom: 3px; }
.answerline { margin: 12px 0 0; max-width: 64ch; color: var(--text); font-size: 15px; line-height: 1.45; }
.note {
margin: 14px 0 0;
padding: 10px 12px;
background: transparent;
border-left: 2px solid var(--line-2);
border-radius: 0 6px 6px 0;
color: var(--text-2);
font-size: 13px;
}
.panel:has(> .cornerrow) { display: flex; flex-direction: column; }
.panel.msg:has(> .cornerrow) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.panel.msg > .cornerrow { grid-column: 1 / -1; }
.cornerrow {
order: -1;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
margin-bottom: 12px;
}
.cornerrow .shbtn.corner { position: static; }
.flagline { font: 400 11.5px/1.4 var(--sans); color: var(--text-3); white-space: nowrap; }
.flaglink {
padding: 0; background: none; border: none; cursor: pointer;
font: inherit; color: var(--accent);
}
.flaglink:hover { text-decoration: underline; }
.flbody { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.flbody p { margin: 0; }
.flkind {
padding: 9px 12px; text-align: left;
background: transparent; border: 1px solid var(--line); border-radius: 8px;
cursor: pointer;
font: 500 12.5px/1.4 var(--sans); color: var(--text);
transition: border-color var(--fast), background var(--fast);
}
.flkind:hover:not(:disabled) { border-color: var(--accent-2); }
.flkind:disabled { opacity: 0.5; cursor: default; }
.flother { display: flex; gap: 8px; }
.flother .flagnote { flex: 1; }
.flother.needsay .flagnote { border-color: var(--accent-2); }
.flsend { flex: none; text-align: center; }
.flagnote {
min-width: 140px;
padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
background: none; color: var(--text);
font: 400 11.5px/1.4 var(--sans);
}
.flagnote::placeholder { color: var(--text-3); }
.flagnote:focus { outline: none; border-color: var(--accent-2); }
.flagdone { font: 400 11.5px/1.4 var(--sans); color: var(--text-3); }
.msg { display: flex; gap: 12px; padding: 18px 20px; }
.msg > div { flex: 1; min-width: 0; }
.msg .lamp { flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--text-3); }
.msg.err .lamp { background: var(--neg-fill); }
.msg p { margin: 0; color: var(--text-2); }
.msg p.head { margin-bottom: 3px; color: var(--text); font-weight: 500; }
.gocard {
display: flex; align-items: center; gap: 13px;
margin-top: 13px; max-width: 430px;
padding: 10px 12px;
border: 1px solid var(--line-2);
border-radius: 10px;
text-decoration: none;
transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.gocard:hover { border-color: var(--accent-2); background: var(--accent-bg); }
.gocard:hover .goarrow { transform: translateX(3px); }
.gocard:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.gopic {
width: 40px; height: 40px; flex: none;
border-radius: 8px;
object-fit: cover; object-position: top center;
background: var(--s2);
}
.gotext { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.gokick {
font: 500 10.5px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-3);
}
.goname {
font: 600 14px/1.35 var(--display); letter-spacing: -0.01em; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gonote { font: 400 12px/1.4 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.goarrow {
flex: none; color: var(--accent); font-size: 16px; line-height: 1;
transition: transform var(--fast);
}
.cands { display: grid; gap: 6px; margin-top: 12px; max-width: 430px; }
.cands button {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%;
padding: 9px 12px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
text-align: left;
transition: border-color var(--fast), background var(--fast);
}
.cands button:hover { border-color: var(--accent-2); background: var(--accent-bg); }
.cands .gp { font: 400 11.5px/1 var(--sans); color: var(--text-3); }
.mrow { padding: 18px 22px; border-top: 1px solid var(--line); }
.mrow:first-child { border-top: 0; }
.mrow > .mread { margin-bottom: 6px; font-size: 15px; font-weight: 500; }
.mrow .headline { font-size: clamp(26px, 4vw, 34px); }
.mrow p { margin: 0; }
.mrow p:not(.headline) { color: var(--text-2); }
.verdict { margin: 0; padding: 18px 22px 0; font-size: 15px; font-weight: 500; }
.card > .trace { margin: 0; padding: 12px 22px 14px; }
.loading { position: relative; overflow: hidden; padding: 22px; }
.loading::after {
content: "";
position: absolute; top: 0; left: 0; height: 1px; width: 40%;
background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
animation: sweep 1.15s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
.skel { border-radius: 6px; background: var(--s2); position: relative; overflow: hidden; }
.skel::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, var(--track), transparent);
animation: shim 1.4s ease-in-out infinite;
}
@keyframes shim { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skel.h { height: 46px; width: 46%; margin-bottom: 16px; }
.skel.l { height: 11px; width: 100%; margin-bottom: 8px; }
.skel.l.short { width: 62%; }
.wait { display: flex; align-items: center; gap: 15px; padding: 6px 0 2px; }
.wait .orb { flex: none; margin-left: -5px; }
.waitsaid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.waitsaid .word { font-size: 13.5px; color: var(--text-2); }
.waitsaid .el { font: 400 11.5px/1 var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums; }
.card { overflow: hidden; }
.chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.chead h2 { font-size: 20px; line-height: 1.25; }
.chead .sub { margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; }
.linepill {
flex: none;
display: inline-flex; align-items: baseline; gap: 6px;
padding: 6px 10px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--display);
font-weight: 600;
letter-spacing: -0.01em;
}
.linepill .side { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.linepill .val { font-size: 17px; font-variant-numeric: tabular-nums; }
.linepill .stat { font: 500 11px/1 var(--sans); color: var(--text-3); }
.grid { display: grid; grid-template-columns: 1fr 1fr; }
.block { padding: 18px 22px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 0; }
.block.rowstart { border-left: 0; }
.grid > .block:first-child { border-top: 0; }
.block.wide { grid-column: 1 / -1; }
.bhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bhead .sample { font: 400 11px/1 var(--sans); color: var(--text-3); }
.big {
margin: 10px 0 0;
font-family: var(--display);
font-weight: 600;
font-size: 30px;
letter-spacing: -0.025em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.big.pos { color: var(--pos); }
.big.neg { color: var(--neg); }
.big.mute { font-size: 15px; color: var(--text-3); letter-spacing: -0.01em; }
.line2 { margin: 7px 0 0; font-size: 13px; color: var(--text-2); }
@property --v {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.meter, .lbar {
--v: 0%;
--bar-paint: linear-gradient(90deg, var(--fill) 0 var(--v), var(--track) var(--v) 100%);
background: var(--bar-paint);
}
.meter {
--fill: var(--accent-2);
height: 4px; margin: 12px 0 0; border-radius: 999px;
transition: --v var(--move);
}
.meter.pos { --fill: var(--pos-fill); }
.meter.neg { --fill: var(--neg-fill); }
.split { display: flex; gap: 20px; margin: 12px 0 0; }
.split div { min-width: 0; }
.split .v { font-family: var(--display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.streak {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px;
border-radius: 6px;
font: 500 11.5px/1.4 var(--sans);
vertical-align: middle;
}
.streak.hot { color: var(--pos); background: var(--pos-bg); }
.streak.cold { color: var(--neg); background: var(--neg-bg); }
.streak svg { width: 12.5px; height: 12.5px; }
.seq { display: inline-block; margin: 12px 0 0; }
.dots { display: flex; flex-wrap: wrap; gap: 4px; }
.dots > * {
width: 15px; height: 15px; padding: 0;
border: 0; border-radius: 4px;
background: var(--track);
transition: transform var(--fast);
}
.dots button { cursor: pointer; }
.dots .w { background: var(--pos-fill); }
.dots .l { background: var(--neg-fill); }
.dots .last { box-shadow: 0 0 0 2px var(--s1), 0 0 0 3px var(--line-2); }
.dots .picked { box-shadow: 0 0 0 2px var(--s1), 0 0 0 3.5px var(--accent-2); }
.dots > *:hover { transform: translateY(-1px); }
.dotkey { display: flex; justify-content: space-between; gap: 16px; margin: 6px 0 0; }
.spark { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 62px; margin: 14px 0 0; padding-right: 34px; }
.spark .b {
flex: 1 1 0; min-width: 2px; padding: 0;
background: var(--track);
border: 0; border-radius: 2px 2px 0 0;
transition: background var(--fast), transform var(--fast);
}
button.b { cursor: pointer; }
button.b:hover { transform: scaleY(1.04); transform-origin: bottom; }
.spark .b.picked { box-shadow: 0 0 0 1.5px var(--accent-2); }
.spark .b.hit { background: var(--pos-fill); }
.spark .b.miss { background: var(--neg-fill); opacity: 0.55; }
.spark .thr { position: absolute; left: 0; right: 34px; border-top: 1px dashed var(--text-3); opacity: 0.75; }
.spark .thr span {
position: absolute; right: -34px; top: -8px;
width: 32px; text-align: right;
font: 500 10px/1.4 var(--sans);
color: var(--text-2);
}
.sparkx { display: flex; gap: 3px; margin: 5px 0 0; padding-right: 34px; }
.sparkx span { flex: 1 1 0; min-width: 0; text-align: center; font: 400 10px/1.4 var(--sans); color: var(--text-3); }
.tablewrap { margin: 14px 0 0; overflow-x: auto; }
.tablewrap table { margin-inline: auto; border: 1px solid var(--line); }
.bands { display: flex; gap: 28px; align-items: flex-start; justify-content: center; }
.bands .tablewrap { flex: 0 1 auto; }
.tablewrap.scrolls {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 52px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 52px), transparent);
}
.tablewrap::-webkit-scrollbar { height: 8px; }
.tablewrap::-webkit-scrollbar-thumb { background: var(--track); border-radius: 999px; }
.tablewrap::-webkit-scrollbar-track { background: transparent; }
table { border-collapse: collapse; width: max-content; max-width: none; font-size: 13px; }
th, td { padding: 7px 8px; text-align: center; white-space: nowrap; }
th {
position: sticky; top: 0;
border-bottom: 1px solid var(--line);
background: var(--ground);
font: 500 10.5px/1.4 var(--sans);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
cursor: pointer;
user-select: none;
}
th:hover { color: var(--text-2); }
td { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--text-2); }
tr:last-child td { border-bottom: 0; }
td:first-child, td.name { color: var(--text); }
td.n { color: var(--text-3); font: 400 11.5px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
td.date { font-variant-numeric: tabular-nums; }
td.team { color: var(--text); }
th.team, td.team { width: 1%; white-space: nowrap; }
th.team, td.team { padding-left: 10px; padding-right: 4px; }
th.team + th.team, td.team + td.team { padding-left: 4px; padding-right: 10px; }
.tm {
display: grid;
width: max-content;
margin-inline: auto;
grid-template-columns: 18px 30px;
align-items: center; gap: 8px;
text-align: left;
}
.tm.venue { grid-template-columns: 13px 18px 30px; }
.tm .code { font: 500 12.5px/1 var(--sans); letter-spacing: 0.02em; }
.tm.plain { display: inline; }
.tm.named {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px; width: 140px;
}
.tm.named .lg, .tm.named .at { flex: none; }
.tm.named > span:last-child, .tm.named > a.ent {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm .at { font-style: normal; font-size: 11px; color: var(--text-3); text-align: center; }
th.team.venue, th.team + th.team.venue { padding-left: 25px; }
.tm .dot {
justify-self: center;
width: 8px; height: 8px; border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.42);
}
.tm .lg { justify-self: center; width: 18px; height: 18px; object-fit: contain; }
.tm .code { letter-spacing: 0.02em; }
th.focus { color: var(--accent); }
td.focus { background: var(--focus-bg); color: var(--text); font-weight: 500; }
tr.picked td { background: var(--pick-bg); color: var(--text); }
tr.picked td:first-child { box-shadow: inset 2px 0 0 var(--accent-2); }
td.w { color: var(--pos); font-weight: 500; }
td.l { color: var(--neg); font-weight: 500; }
.pl { display: inline-flex; align-items: center; gap: 6px; }
.pl .lg { width: 16px; height: 16px; object-fit: contain; flex: none; }
.pl .dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.42); }
.pl .who { white-space: nowrap; }
.pl > :last-child, .tm.named > :last-child, .champ:not(.icononly) > :last-child {
align-self: baseline;
}
td > :is(.pl, .tm.named, .champ:not(.icononly)) {
display: flex; justify-content: center; margin-inline: auto;
}
td > :is(.pl, .tm.named, .champ:not(.icononly)) > :last-child { align-self: center; }
td > .cmumeet { display: grid; width: max-content; margin-inline: auto; }
th.who, td.who { width: 104px; }
th.n, td.n { width: 34px; }
td.date { width: 84px; }
td.lgc { width: 78px; }
td.result { width: 92px; }
td.result { white-space: nowrap; }
td.result .res {
display: inline-flex; align-items: baseline; gap: 7px;
width: 58px;
font-variant-numeric: tabular-nums;
}
td.result .res b { font: 600 10.5px/1.5 var(--sans); letter-spacing: 0.05em; }
td.result .res.w b { color: var(--pos); }
td.result .res.l b { color: var(--neg); }
b.wl { font: 600 10.5px/1.5 var(--sans); letter-spacing: 0.05em; }
b.wl.w { color: var(--pos); }
b.wl.l { color: var(--neg); }
td.result .res > span { color: var(--text-2); text-align: left; }
tbody tr:hover td { background: var(--s2); }
details.fold { margin: 14px 0 0; }
details.fold > summary {
display: inline-flex; align-items: center; gap: 6px;
padding-left: 9px;
list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary svg { width: 11px; height: 11px; transition: transform var(--fast); }
details.fold[open] > summary svg.chev { transform: rotate(90deg); }
.receipt { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.receipt > .mic { display: block; }
.receipt .tablewrap { margin-top: 8px; }
.rmore { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px 0; font-size: 12px; color: var(--text-3); }
.rcount { font-variant-numeric: tabular-nums; }
.rmore .flip {
margin-left: auto; padding: 0;
background: none; border: 0; cursor: pointer;
font: inherit; color: var(--accent);
transition: color var(--fast);
}
.rmore .flip:hover { text-decoration: underline; }
.rnav { display: flex; align-items: center; gap: 6px; }
.pg {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 26px; padding: 0;
}
.pg svg { width: 12px; height: 12px; }
.pg.back svg { transform: rotate(180deg); }
details.fold .receipt { margin-top: 10px; padding-top: 0; border-top: 0; }
pre.code {
margin: 12px 0 0;
padding: 12px 14px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
overflow-x: auto;
font: 400 11.5px/1.6 var(--sans);
color: var(--text-2);
white-space: pre-wrap;
word-break: break-word;
}
.wf { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 10px; align-items: center; margin-top: 12px; font: 400 11px/1.4 var(--sans); color: var(--text-3); }
.wf .lane {
--s: 0%; --e: 0%;
height: 5px; border-radius: 999px;
background: linear-gradient(90deg,
var(--track) 0 var(--s),
color-mix(in srgb, var(--accent-2) 75%, transparent) var(--s) var(--e),
var(--track) var(--e) 100%);
}
.acard.draft { position: relative; }
.acard.draft .dscale, .acard.draft .dlanes, .acard.draft .sechead {
scroll-margin-top: calc(var(--bar) + 20px);
}
.toc { position: absolute; top: 0; bottom: 0; left: calc(100% + 14px); width: 84px; }
.tocstick {
position: sticky; top: calc(var(--bar) + 40px); display: flex; flex-direction: column;
}
.toc button {
padding: 4px 0 4px 11px;
background: none;
border: 0; border-left: 2px solid var(--line);
border-radius: 0;
text-align: left;
font: 500 11px/1.5 var(--sans);
letter-spacing: 0.02em;
color: var(--text-3);
transition: color var(--fast), border-color var(--fast);
}
.toc button:hover { color: var(--text-2); }
.toc button.on { color: var(--text); border-left-color: var(--accent-2); }
@media (max-width: 1160px) { .toc { display: none; } }
@media (max-width: 720px) { .receipt .aux { display: none; } }
@media (max-width: 720px) {
.wrap { padding: 0 16px; }
.hero { padding: 40px 0 20px; }
.hero h1 { font-size: 30px; }
body.answered .hero h1 { font-size: 22px; }
.grid { grid-template-columns: 1fr; }
.block { border-left: 0; }
.chead { flex-direction: column; }
.field .go span { display: none; }
.askhead .hint { display: none; }
}
.leagues { margin-left: auto; font-size: 12.5px; position: relative; }
.leagues + .leagues { margin-left: 14px; }
.leagues.patches .lgbody { width: 312px; }
.leagues.patches .lglist {
display: grid; grid-template-columns: repeat(4, max-content);
justify-content: space-between;
}
.leagues.patches .lgcode { font-variant-numeric: tabular-nums; }
.leagues summary {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
list-style: none; color: var(--text-2); user-select: none;
}
.leagues summary::-webkit-details-marker { display: none; }
.leagues .lglabel { font-weight: 500; }
.leagues .lgchip {
padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.leagues[open] .lgchip { background: var(--accent-bg); color: var(--accent); }
.lgbody {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 340px;
max-height: 60vh; overflow: auto; padding: 10px 12px; border: 1px solid var(--line-2);
border-radius: 10px; background: var(--ground); box-shadow: var(--float);
}
.lggroup { margin-bottom: 8px; }
.lghead {
display: flex; align-items: center; gap: 8px; margin: 6px 0 4px;
font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-3);
}
.lghead .lgall {
border: 0; background: none; color: var(--accent); font-size: 11px; cursor: pointer;
padding: 0;
}
.lglist { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.lg1 { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; cursor: pointer; }
.lg1 input { accent-color: var(--accent-2); }
.lgcode { font-family: var(--sans); font-size: 12px; color: var(--text); }
.lg1 .lgico { width: 15px; height: 15px; object-fit: contain; flex: none;
}
.lgreset { margin-top: 6px; }
.champ { display: inline-flex; align-items: center; gap: 6px; }
td.champ, td.pos { display: table-cell; }
td.champ .champ { width: 132px; justify-content: center; }
td.champ .champ.icononly { width: auto; }
td.champ .champ > span:last-child {
min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.champ img.portrait {
width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none;
}
td.soul .champ { width: 96px; justify-content: center; }
.champ img.soulico { border-radius: 0; object-fit: contain; }
b.score { font-weight: 600; }
.score.up { color: var(--pos); }
.score.down { color: var(--neg); }
.score.flat { color: var(--text); }
.figure .scoreword { margin: 6px 0 0; font-size: 15px; font-weight: 500; color: var(--text-2); }
.bplead { display: flex; align-items: flex-end; gap: 14px; }
.bplead .headline { min-width: 0; }
.bestplayer .headline .unit { display: inline-block; }
.bestplayer .bppic { display: flex; align-items: flex-end; justify-content: center; width: 84px; height: 76px; flex: none; }
.bestplayer .bppic img {
width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0.88;
-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.bestplayer .bppic.none::before { width: 40px; height: 52px; }
.bestplayer .bptable { margin-top: 14px; }
.bestplayer .bptable table { width: auto; margin-inline: 0; }
.bestplayer th:first-child { width: 28px; }
.bphead a { text-decoration: none; }
.bphex {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 10px;
border: 1px solid var(--line); overflow: hidden;
}
.bpcell {
min-width: 0; display: flex; flex-direction: column; align-items: center;
box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); padding-bottom: 8px;
}
.bphead {
display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 0 6px;
width: 100%; padding: 7px 8px; border-bottom: 1px solid var(--line); background: var(--s2);
font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bphead .bpplace { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.bphead .pos .oi.role { width: 14px; height: 14px; vertical-align: -3px; }
.bpwho { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bpradar { width: 100%; max-width: 126px; }
.bpradar svg { display: block; width: 100%; height: auto; overflow: visible; }
.pradarsvg.compact .pradlab { font-size: 9px; }
.pradarsvg.compact .pplace { font-size: 8.5px; }
@media (max-width: 720px) {
.bplead { gap: 10px; align-items: center; }
.bestplayer .headline .unit { display: block; margin: 4px 0 0; }
.bestplayer .bppic { width: 64px; height: 58px; }
.bestplayer .bppic.none::before { width: 30px; height: 38px; }
.bestplayer .bptable th, .bestplayer .bptable td { padding-inline: 6px; white-space: nowrap; }
.bphex { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bpradar { max-width: 150px; }
}
@media (max-width: 520px) {
.bphex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bpcell > .bpradar { padding-inline: 16px; }
.roleboard .bptable tr > :nth-child(n+5) { display: none; }
}
.h2h { display: flex; flex-direction: column; }
.panel:has(> .shbtn.corner) > .h2h { padding-top: 41px; }
.h2h .trail { color: var(--text-3); }
.hxhero {
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 5px;
}
.hxwho {
grid-row: 1 / -1; display: grid; grid-template-rows: subgrid;
justify-items: center; align-items: start; min-width: 0;
}
.hxwho.a { grid-column: 1; }
.hxwho.b { grid-column: 3; }
.hxwho .hxpic { display: flex; align-items: flex-end; justify-content: center; width: 150px; height: 132px; }
.hxwho .hxpic img {
width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0.92;
-webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}
.hxwho .hxpic.none::before { width: 64px; height: 84px; }
.hxname {
font: 600 28px/1.05 var(--display); letter-spacing: -0.02em; color: var(--text);
text-decoration: none; max-width: 100%; text-align: center; overflow-wrap: anywhere;
}
a.hxname:hover { text-decoration: underline; text-underline-offset: 3px; }
.hxteam {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; max-width: 100%;
font: 500 10.5px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.hxteam .lg { width: 16px; height: 16px; object-fit: contain; flex: none; }
.hxteam .hxtn { color: inherit; text-decoration: none; text-align: center; }
a.hxtn:hover { color: var(--text); }
.hxteam .pos { display: flex; }
.hxrec {
grid-column: 2; grid-row: 1 / 3; align-self: end;
display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 200px;
}
.hxbig {
display: flex; align-items: baseline; gap: 14px; color: var(--text);
font: 600 64px/0.95 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hxbig i, .hxsmall i, .hxsr i { font-style: normal; font-weight: 400; color: var(--text-3); }
.hxgames { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.hxsmall {
display: flex; align-items: baseline; gap: 6px; color: var(--text);
font: 600 18px/1 var(--display); font-variant-numeric: tabular-nums;
}
.hxfoot { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: var(--text-3); }
.h2h > .interp { margin-top: 16px; }
.hxbar {
--v: 50%;
--ca: color-mix(in srgb, var(--text-3) 42%, transparent);
--cb: color-mix(in srgb, var(--text-3) 42%, transparent);
display: block; width: 100%; height: 5px; border-radius: 999px;
background: linear-gradient(90deg, var(--ca) 0 calc(var(--v) - 1.5px),
transparent calc(var(--v) - 1.5px) calc(var(--v) + 1.5px), var(--cb) calc(var(--v) + 1.5px) 100%);
}
.hxbar.a { --ca: var(--text); }
.hxbar.b { --cb: var(--text); }
.hxbar.rec { width: 200px; }
.hxdiv {
--w: 0%;
--t: color-mix(in srgb, var(--text-3) 22%, transparent);
display: block; width: 100%; height: 5px; border-radius: 999px;
background: linear-gradient(90deg, var(--t) 0 calc(50% - 1px), var(--text-2) calc(50% - 1px) calc(50% + 1px), var(--t) calc(50% + 1px) 100%);
}
.hxdiv.b {
background: linear-gradient(90deg, var(--t) 0 calc(50% - 1px), var(--text-2) calc(50% - 1px) 50%,
var(--text) 50% calc(50% + var(--w)), var(--t) calc(50% + var(--w)) 100%);
}
.hxdiv.a {
background: linear-gradient(90deg, var(--t) 0 calc(50% - var(--w)), var(--text) calc(50% - var(--w)) 50%,
var(--text-2) 50% calc(50% + 1px), var(--t) calc(50% + 1px) 100%);
}
.hxsec { margin-top: 6px; }
.hxsec .sechead { display: flex; align-items: center; gap: 10px; }
.hxsec .sechead .sec { display: flex; align-items: center; gap: 6px; }
.hxsec .sechead::after { order: 2; }
.hxtally {
order: 3; display: flex; gap: 12px; white-space: nowrap;
font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text); font-variant-numeric: tabular-nums;
}
.hxtally .even { color: var(--text-3); font-weight: 500; }
.hxrow {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
align-items: center; gap: 18px; padding: 9px 0; border-top: 1px solid var(--line);
}
.hxsec > .hxrow:first-of-type { border-top: 0; }
.hxv { display: flex; min-width: 0; }
.hxv.a { justify-content: flex-end; }
.hxn { display: inline-flex; align-items: center; gap: 7px; }
.hxv b {
font: 500 21px/1.1 var(--display); letter-spacing: -0.01em; color: var(--text-3);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hxv.lead b { color: var(--text); font-weight: 600; }
.hxwin { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
.hxmid { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.hxl {
font: 500 10.5px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-2); text-align: center;
}
.hxrow.big .hxv b { font-size: 40px; letter-spacing: -0.03em; }
.hxrow.big .hxl { font-size: 12px; color: var(--text); }
.hxrow.big .hxbar { height: 7px; }
.hxrow.hxdiff { padding: 7px 0; }
.hxrow.hxdiff .hxv b { font-size: 17px; }
.hxpools { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 28px; padding: 6px 0 12px; }
.hxpools::before { content: ""; grid-column: 2; grid-row: 1; background: var(--line); }
.hxpool { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hxpool.a { grid-column: 1; grid-row: 1; align-items: flex-end; }
.hxpool.b { grid-column: 3; grid-row: 1; align-items: flex-start; }
.hxpicks { display: flex; flex-wrap: wrap; gap: 10px; }
.hxpool.a .hxpicks { justify-content: flex-end; }
.hxpick { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hxpick b { margin-top: 3px; font: 600 14px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.hxchamp { display: block; }
.hxc { display: block; width: 36px; height: 36px; border-radius: 6px; }
.hxmet { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.hxpairs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hxpair {
display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px;
border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none;
}
a.hxpair:hover { border-color: var(--line-2); }
.hxpair .hxc { width: 28px; height: 28px; }
.hxpair .vs { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hxpn { margin-left: 4px; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hxs { border-top: 1px solid var(--line); padding: 8px 0 6px; }
.hxs > .hxg, .hxsh { max-width: 560px; margin-inline: auto; }
.hxsh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 6px; }
.hxsc { display: flex; align-items: center; gap: 7px; }
.hxsc .lg { width: 18px; height: 18px; object-fit: contain; }
.hxsr { display: flex; align-items: baseline; gap: 5px; font: 600 15px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.hxg {
display: grid; grid-template-columns: 30px minmax(0, 1fr) auto minmax(0, 1fr) 30px;
align-items: center; gap: 12px; padding: 5px 2px; border-radius: 6px; cursor: pointer;
}
.hxg:hover, .hxg:focus-visible { background: color-mix(in srgb, var(--text) 4%, transparent); outline: none; }
.hxg .hxc { width: 30px; height: 30px; }
.hxk { font: 500 17px/1 var(--display); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hxk i { font-style: normal; opacity: 0.5; margin: 0 4px; }
.hxk.a { text-align: right; }
.hxg.awin .hxk.a, .hxg.bwin .hxk.b { color: var(--text); font-weight: 600; }
.hxg > .mic { min-width: 52px; text-align: center; }
.hxmore { display: block; margin: 10px auto 0; }
@media (max-width: 720px) {
.hxhero { column-gap: 4px; }
.hxwho .hxpic { width: 96px; height: 88px; }
.hxwho .hxpic.none::before { width: 40px; height: 52px; }
.hxname { font-size: 20px; }
.hxrec { min-width: 0; }
.hxbig { font-size: 42px; gap: 8px; }
.hxbar.rec { width: 110px; }
.hxrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.hxv b { font-size: 17px; }
.hxrow.big .hxv b { font-size: 28px; }
.hxl { font-size: 9.5px; }
.hxtally { gap: 8px; font-size: 10px; }
.hxpools { gap: 12px; }
.hxpicks { gap: 6px; }
.hxc { width: 30px; height: 30px; }
.hxg { grid-template-columns: 26px minmax(0, 1fr) auto minmax(0, 1fr) 26px; gap: 8px; }
.hxg .hxc { width: 26px; height: 26px; }
.hxk { font-size: 15px; }
.hxk i { margin: 0 2px; }
.hxg > .mic { min-width: 0; }
}
td.pos .pos, span.pos {
font: 600 10px/1.5 var(--sans); letter-spacing: 0.07em;
color: var(--text-3); text-transform: uppercase;
}
.pos .oi.role { width: 14px; height: 14px; vertical-align: -3px; color: var(--text-3); }
.rolehead .oi.role { width: 18px; height: 18px; }
.entpage .sec > .pos .oi.role { width: 15px; height: 15px; vertical-align: -3px; margin-right: 7px; color: inherit; }
.tm.plain img.lg {
width: 16px; height: 16px; object-fit: contain;
vertical-align: -3px; margin-right: 6px;
}
td a.ent, td a.champ { color: inherit; text-decoration: none; }
td a.ent:hover, td a.champ:hover > span { text-decoration: underline; }
tr.opens { cursor: pointer; }
tr.opens:hover td { background: var(--focus-bg); color: var(--text); }
.mshade {
position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start;
justify-content: center; padding: 40px 16px; overflow: auto;
background: rgba(9, 9, 11, 0.55); backdrop-filter: blur(2px);
}
.match {
width: min(640px, 100%); padding: 14px 16px 16px; border: 1px solid var(--line-2);
border-radius: 14px; background: var(--ground); box-shadow: var(--float);
}
.match.loading { padding: 28px 20px; }
.mhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mtitle { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.mevent { font: 600 15px/1.3 var(--display); color: var(--text); }
.mtitle .mlgico { width: 18px; height: 18px; object-fit: contain; flex: none;
align-self: center; }
.mmeta { font-size: 12px; color: var(--text-3); }
.mfacts {
margin: 0 0 0 auto; font-size: 11.5px; color: var(--text-3);
font-variant-numeric: tabular-nums;
}
.mclose {
border: 1px solid var(--line); border-radius: 8px; background: transparent;
color: var(--text-2); font-size: 17px; line-height: 1; padding: 2px 8px; cursor: pointer;
align-self: flex-start;
}
.mclose:hover { color: var(--text); border-color: var(--line-2); }
.side-blue { --side: #3f7ad9; }
.side-red { --side: #d8574c; }
.mhero { margin: 8px 0 2px; padding: 4px 0 6px; }
.mscore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mteam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mteam:last-of-type { flex-direction: row-reverse; text-align: right; }
.mcrest { width: 40px; height: 40px; object-fit: contain; flex: none; }
.mtwords { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mtname {
font: 600 17px/1.15 var(--display); color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtsub { display: flex; align-items: center; gap: 8px; }
.mteam:last-of-type .mtwords { align-items: flex-end; }
.mtwords .mdrakes { margin-top: 1px; }
.mteam .verdict {
margin: 0; padding: 0;
font: 500 10.5px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
}
.mteam.won .verdict { color: var(--pos); }
.mteam.lost .verdict { color: var(--neg); }
.mmid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mtally { display: flex; align-items: baseline; gap: 10px; }
.mkills { font: 500 26px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.mdash { font-size: 15px; color: var(--text-3); }
.mtfacts {
font: 400 11px/1 var(--sans); color: var(--text-3); white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.mo { display: inline-flex; align-items: center; gap: 2px; }
.mdrakes img.drk { width: 15px; height: 15px; object-fit: contain; }
.mdrakes img.drk.soul { filter: drop-shadow(0 0 3px var(--accent-2)); }
.champ.icononly img.portrait { width: 24px; height: 24px; border-radius: 5px; }
.champ.icononly span { display: none; }
.mobjrow {
display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "l lab r";
align-items: center; gap: 12px; padding: 4px 0 6px;
}
.mobjrow > :nth-child(1) { grid-area: l; justify-self: end; }
.mobjrow > :nth-child(2) { grid-area: lab; }
.mobjrow > :nth-child(3) { grid-area: r; justify-self: start; }
.mobjs { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.mobjs .mo { gap: 3px; }
.mobjs b { font: 500 12px/1 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.oi {
display: inline-block; width: 14px; height: 14px; background: currentColor; color: var(--text-2);
-webkit-mask: var(--oi) center / contain no-repeat; mask: var(--oi) center / contain no-repeat;
}
.mbans {
display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "lb lab rb";
align-items: center; gap: 12px; padding: 2px 0 8px;
}
.mbans > :nth-child(1) { grid-area: lb; }
.mbans > :nth-child(2) { grid-area: lab; }
.mbans > :nth-child(3) { grid-area: rb; }
.mbside { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.mbside.side-blue { justify-content: flex-end; }
.mdlabel { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hastip { cursor: help; }
.hastip:focus { outline: none; }
.hastip:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; border-radius: 3px; }
.mroster { margin-top: 10px; }
.mrhead {
display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
padding-left: 9px; border-left: 3px solid var(--side);
}
.mrhead .mrmark { width: 22px; height: 22px; object-fit: contain; flex: none; }
.mrname { font: 600 13px/1.4 var(--display); color: var(--text); }
.mrk { font: 400 11px/1.4 var(--sans); color: var(--text-3); }
.mtablewrap { overflow-x: auto; border-radius: 8px; }
.mplayers { table-layout: fixed; width: 100%; min-width: 600px; }
.mplayers td { padding: 3px 5px; vertical-align: middle; }
.mplayers td.pos { width: 20px; text-align: center; }
.mplayers td.who { width: auto; text-align: left; }
.mplayers td.runes { width: 40px; text-align: left; }
.mplayers td.items { width: 178px; text-align: left; }
.mplayers td.kda { width: 76px; text-align: right; white-space: nowrap; }
.mplayers td.dmg { width: 70px; text-align: right; }
.mplayers td.gc { width: 64px; text-align: right; }
.mplayers .wbox { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mplayers .wport { display: flex; align-items: center; gap: 3px; flex: none; width: 50px; }
.mplayers .wport .champ.icononly img.portrait { width: 32px; height: 32px; border-radius: 6px; }
.mplayers .wport .champ:not(.icononly) {
display: block; width: 32px; height: 32px; overflow: hidden;
font: 500 9px/32px var(--sans); text-align: center; white-space: nowrap; text-overflow: ellipsis;
}
.wspells { display: flex; flex-direction: column; gap: 2px; }
.wspells .sslot {
display: block; width: 15px; height: 15px; border-radius: 3px; background: var(--track); overflow: hidden;
}
.wspells img.spell { display: block; width: 15px; height: 15px; }
.rbox { position: relative; width: 34px; height: 34px; }
.rbox img.rune.key { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--track); }
.rbox img.rune.sub {
position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; padding: 1px;
border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 1px var(--line);
}
.ibox { display: flex; align-items: center; gap: 2px; }
.ibox .islot {
display: block; width: 22px; height: 22px; border-radius: 4px; background: var(--track);
overflow: hidden; flex: none;
}
.ibox .islot img.item { display: block; width: 22px; height: 22px; }
.ibox .islot.trk { margin-left: 6px; border-radius: 50%; }
.ibox.asof .islot { outline: 1px dashed var(--text-3); outline-offset: -1px; }
.mplayers .ibox .islot, .mplayers .ibox .islot img.item { width: 20px; height: 20px; }
.mplayers .ibox .islot.trk { margin-left: 4px; }
.mplayers .rnone, .mplayers .inone { color: var(--text-3); }
.mplayers .pname {
color: var(--text); font-weight: 500;
overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
.mplayers a.pname:hover { text-decoration: underline; text-underline-offset: 2px; }
.mplayers td.pos .oi { width: 15px; height: 15px; color: var(--text-3); vertical-align: middle; }
.mplayers tr + tr td { border-top: 1px solid var(--line); }
.mplayers tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
.mplayers td.kda { color: var(--text-2); font-variant-numeric: tabular-nums; }
.mplayers td.kda .k { color: var(--text); }
.mplayers td.kda .d { color: var(--neg); }
.mplayers td.kda i { color: var(--text-3); font-style: normal; padding: 0 3px; opacity: 0.6; }
.mplayers td.dmg .dv {
display: block; width: 56px; margin-left: auto; text-align: center;
color: var(--text); font-variant-numeric: tabular-nums;
}
.mplayers .dbar {
--fill: var(--side); --v: 0%; width: 56px; height: 4px; margin: 3px 0 0 auto; border-radius: 999px;
background: linear-gradient(90deg, var(--fill) 0 var(--v), var(--track) var(--v) 100%);
}
.mplayers td.gc { font-variant-numeric: tabular-nums; line-height: 1.25; }
.mplayers td.gc .gv { display: flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--text); }
.mplayers td.gc .gv .oi { width: 11px; height: 11px; color: var(--text-3); }
.mplayers td.gc .cv { display: block; font-size: 11.5px; color: var(--text-3); }
.tipcard {
position: fixed; z-index: 90; max-width: 264px; padding: 9px 11px;
border: 1px solid var(--line-2); border-radius: 10px; background: var(--ground); color: var(--text);
box-shadow: var(--float); font: 400 12px/1.45 var(--sans);
pointer-events: none;
}
.tipcard .tiphead { display: flex; align-items: center; gap: 8px; }
.tipcard .tiphead img { width: 30px; height: 30px; border-radius: 50%; background: var(--track); flex: none; }
.tipcard .tipname { display: block; font: 600 13px/1.3 var(--display); color: var(--text); }
.tipcard .tipsub { display: block; font-size: 11px; color: var(--text-3); }
.tipcard .tipdesc { margin: 4px 0 0; color: var(--text-2); }
.tipcard .tiprow {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; color: var(--text-2);
}
.tipcard .tiplab { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.tipcard .tiprune { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tipcard .tiprune img.rune { width: 16px; height: 16px; border-radius: 50%; background: var(--track); }
.mnote { margin: 10px 0 0; font-size: 12px; color: var(--text-3); }
@media (max-width: 620px) {
.match { padding: 12px 12px 14px; }
.mhero { padding: 2px 0 4px; }
.mscore { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.mteam { gap: 6px; }
.mcrest { width: 30px; height: 30px; }
.mtname { font-size: 14px; }
.mmid {
grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: baseline;
justify-content: center; gap: 10px;
}
.mkills { font-size: 18px; }
.mdash { font-size: 12px; }
.mobjrow { grid-template-columns: 1fr 1fr; grid-template-areas: "lab lab" "l r"; gap: 4px 8px; }
.mobjrow > :nth-child(1) { justify-self: start; }
.mobjrow > :nth-child(2) { justify-self: center; }
.mobjrow > :nth-child(3) { justify-self: end; }
.mobjs { gap: 5px; }
.mobjs .mo { gap: 2px; }
.mobjs b { font-size: 11px; }
.mobjs .oi { width: 12px; height: 12px; }
.mbans { grid-template-columns: 1fr 1fr; grid-template-areas: "lab lab" "lb rb"; gap: 4px 8px; }
.mbans > :nth-child(2) { justify-self: center; }
.mhead { align-items: flex-start; gap: 8px; }
.mtitle { flex: 1 1 0; }
.mclose { order: 2; margin-left: auto; }
.mfacts { order: 3; margin-left: 0; flex-basis: 100%; }
.mtally { gap: 6px; }
}
@media (max-width: 720px) {
.mtablewrap { overflow: visible; background-image: none; }
.mplayers { display: block; min-width: 0; }
.mplayers tr {
display: grid; grid-template-columns: 12px 50px minmax(0, 1fr) 82px 44px 42px;
grid-template-rows: auto auto;
column-gap: 4px; row-gap: 3px; align-items: center;
margin-top: 4px; padding: 5px 8px; border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--line);
}
.mplayers tr:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.mplayers td { display: block; padding: 0; background: transparent; border-top: 0; }
.mplayers tr:hover td { background: transparent; }
.mplayers td.pos, .mplayers td.who, .mplayers td.kda, .mplayers td.dmg, .mplayers td.gc,
.mplayers td.runes, .mplayers td.items { width: auto; }
.mplayers td.pos { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: center; }
.mplayers td.pos .oi { width: 12px; height: 12px; }
.mplayers td.who, .mplayers .wbox { display: contents; }
.mplayers .wport { grid-column: 2; grid-row: 1 / 3; }
.mplayers .pname { grid-column: 3; grid-row: 1; min-width: 0; font-size: 13px; white-space: nowrap; }
.mplayers td.runes { grid-column: 3; grid-row: 2; }
.mplayers td.items { grid-column: 4; grid-row: 1 / 3; }
.mplayers .ibox { display: grid; grid-template-columns: repeat(4, 19px); gap: 2px; }
.mplayers .ibox .islot, .mplayers .ibox .islot img.item { width: 19px; height: 19px; }
.mplayers .ibox .islot.trk { margin-left: 0; }
.mplayers td.kda { grid-column: 5 / 7; grid-row: 1; white-space: nowrap; text-align: right; }
.mplayers td.dmg { grid-column: 5; grid-row: 2; text-align: right; }
.mplayers td.dmg .dv { width: 44px; font-size: 12px; }
.mplayers .dbar { width: 44px; }
.mplayers td.gc { grid-column: 6; grid-row: 2; text-align: right; line-height: 1.15; }
.mplayers td.gc .gv { font-size: 12px; }
.mplayers td.gc .cv { font-size: 10.5px; }
.rbox { width: 26px; height: 26px; }
.rbox img.rune.key { width: 22px; height: 22px; }
.rbox img.rune.sub { width: 12px; height: 12px; }
}
@media (min-width: 500px) and (max-width: 720px) {
.mplayers tr {
grid-template-columns: 12px 50px minmax(0, 1fr) 28px 166px 54px 42px 42px;
grid-template-rows: auto; column-gap: 4px;
}
.mplayers td.pos { grid-row: 1; }
.mplayers .wport { grid-row: 1; }
.mplayers .pname { grid-column: 3; grid-row: 1; }
.mplayers td.runes { grid-column: 4; grid-row: 1; }
.mplayers td.items { grid-column: 5; grid-row: 1; }
.mplayers td.kda { grid-column: 6; grid-row: 1; }
.mplayers td.dmg { grid-column: 7; grid-row: 1; }
.mplayers .dbar { width: 42px; }
.mplayers td.dmg .dv { width: 42px; }
.mplayers td.gc { grid-column: 8; grid-row: 1; }
.mplayers .ibox { display: flex; gap: 2px; }
.mplayers .ibox .islot, .mplayers .ibox .islot img.item { width: 19px; height: 19px; }
.mplayers .ibox .islot.trk { margin-left: 3px; }
}
.lghead { cursor: pointer; }
.lghead input { accent-color: var(--accent-2); margin: 0; }
.lghead .lgn {
margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-3); font-weight: 400;
}
.lgfoot { display: flex; gap: 8px; margin-top: 8px; }
.lgempty { margin: 8px 0 0; font-size: 12px; color: var(--neg); }
.leagues .lgchip.none { background: var(--neg-bg); color: var(--neg); }
.builder .field { display: none; }
#builder { border-top: 1px solid var(--line); padding-top: 12px; }
.result.stale { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }
.afloat {
position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
z-index: 40; display: none; align-items: center; gap: 14px;
max-width: min(92vw, 560px); padding: 7px 10px 7px 7px;
border: 1px solid var(--line-2); border-radius: 999px; background: var(--ground);
box-shadow: var(--float);
}
.afloat.on { display: inline-flex; }
.afloat .leagues { margin-left: 0; }
.afjump { white-space: nowrap; }
.afjump:hover { filter: brightness(0.96); }
.lolbuild .seg.sub { margin-bottom: 12px; }
.combo { position: relative; min-width: 150px; flex: 1; }
.combo input { width: 100%; }
.cmenu {
position: absolute;
z-index: 30;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
width: max-content;
max-width: 280px;
background: var(--ground);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: var(--float);
overflow: hidden;
}
.crow {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
font-size: 13px;
cursor: pointer;
}
.crow img { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
.crow.hi { background: var(--accent-bg); }
.crow .clabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .csub { margin-left: auto; font: 500 10px/1 var(--sans); color: var(--text-3); }
.pick {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 6px 4px 8px;
background: transparent;
border: 1px solid var(--line);
border-radius: 7px;
font-size: 13px;
}
.pick .csub { font: 500 10px/1 var(--sans); color: var(--text-3); }
.unpick {
padding: 0 3px;
background: transparent; border: 0;
color: var(--text-3);
font: 400 15px/1 var(--sans);
cursor: pointer;
}
.unpick:hover { color: var(--neg); }
.abar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.abgo span { white-space: nowrap; }
.abar .hint { font-size: 12.5px; color: var(--text-3); }
.abar .aclear { margin-left: auto; }
.mubuild { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.mub {
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
}
.mulab {
display: block;
margin-bottom: 8px;
font: 500 10.5px/1 var(--sans);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--side);
}
.mupicks { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mupicks:not(:empty) { margin-bottom: 8px; }
.murole { position: relative; display: inline-flex; }
.murolebtn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 26px; height: 22px; padding: 0 5px;
border: 1px solid var(--line); border-radius: 6px;
background: transparent; color: var(--text-2);
cursor: pointer;
transition: border-color var(--fast), color var(--fast);
}
.murolebtn:hover { border-color: var(--line-2); color: var(--text); }
.murolebtn:focus-visible { outline: none; border-color: var(--accent-2); }
.murolebtn .pos .oi.role { width: 13px; height: 13px; vertical-align: 0; }
.muroleany { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.rolemenu[hidden] { display: none; }
.rolemenu {
position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
display: flex; flex-direction: column; min-width: 132px;
background: var(--ground);
border: 1px solid var(--line-2); border-radius: 8px;
box-shadow: var(--float);
overflow: hidden;
}
.roleopt {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
border: 0; background: transparent; color: var(--text);
font: 400 12.5px/1.2 var(--sans); text-align: left;
cursor: pointer;
}
.roleopt:hover, .roleopt.on { background: var(--accent-bg); }
.roleopt .pos .oi.role { width: 14px; height: 14px; vertical-align: -2px; }
.musamples {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
margin-top: 2px;
}
.musamples:empty { display: none; }
.musamples > .mic { margin-right: 4px; }
.musample { display: inline-flex; align-items: center; gap: 6px; }
.musample .pos .oi.role { width: 12px; height: 12px; vertical-align: -2px; }
.mubuild .abar { grid-column: 1 / -1; margin-top: 2px; }
.drgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.drside {
min-width: 0;
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
}
.drslot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drslot > .pos { flex: none; width: 30px; text-align: left; }
.drslot .pick { min-width: 0; }
.drslot .pick .champ span, .drslot .pick .tm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drslot.team { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.drslot.team .combo input { font-weight: 500; }
.tchip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.tchip .lg { width: 18px; height: 18px; object-fit: contain; flex: none; }
.tchip > span:not(.csub) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liveline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; min-height: 26px; }
.livetag {
display: inline-flex; align-items: center; gap: 6px;
padding: 0; border: 0; background: none; cursor: pointer;
font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-3);
}
.livetag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); opacity: 0.45; }
.liveline.on .livetag .dot { background: #e0483c; opacity: 1; animation: livepulse 2.2s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: 0.35; } }
.livefeed { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.livenote { font: 400 11px/1.4 var(--sans); color: var(--text-3); }
.livegame { display: inline-flex; align-items: baseline; gap: 7px; }
.livegame .csub { font: 500 9.5px/1 var(--sans); color: var(--text-3); }
.livewait {
display: inline-flex; align-items: baseline; gap: 7px;
padding: 4px 9px;
border: 1px dashed var(--line); border-radius: 6px;
font: 500 11px/1 var(--sans); color: var(--text-3);
}
.livewait .csub { font: 500 9.5px/1 var(--sans); color: var(--text-3); }
.livenext { font: 400 11px/1.4 var(--sans); color: var(--text-3); cursor: default; }
.acard { margin-top: 14px; }
.acard .mic { display: block; margin-top: 14px; }
.acard .bhead .mic { margin-top: 0; }
.acard { background: transparent; border: 0; box-shadow: none; padding: 0; }
.muhero {
position: relative; overflow: hidden; isolation: isolate;
display: grid; grid-template-columns: minmax(120px, 1fr) 112px minmax(170px, 210px) 112px minmax(120px, 1fr);
gap: 12px; align-items: center; justify-content: center;
padding: 20px 20px;
border: 1px solid var(--line); border-radius: 12px;
}
.muend { position: relative; min-width: 0; display: flex; align-items: center; }
.muend.b { justify-content: flex-end; text-align: right; }
.muend .lfade {
position: absolute; z-index: -1; top: 50%; transform: translateY(-50%);
width: 170px; height: 170px; opacity: calc(var(--crest) * 1.4);
}
.muend .lfade.a { left: -20px; }
.muend .lfade.b { right: -20px; }
.muname { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.muend.b .muname { justify-content: flex-end; }
.muname .lname { font: 600 22px/1.1 var(--display); letter-spacing: -0.01em; }
.muname > .pos .oi.role { width: 16px; height: 16px; vertical-align: -2px; }
a.lname, .mupick a.champ, .mulhead a.champ { color: inherit; text-decoration: none; }
a.lname:hover, .mupick a.champ:hover > span, .mulhead a.champ:hover > span { text-decoration: underline; }
.mupick { display: inline-flex; align-items: center; gap: 6px; }
.mupick > .pos { font-size: 9px; }
.mupick .champ img.portrait { width: 24px; height: 24px; border-radius: 6px; }
.mupick .champ span { font: 600 16px/1.2 var(--display); letter-spacing: -0.01em; }
.muhero .lwr .lwrline b { font-size: 14px; }
.muhero .lwr.b .lwrline { justify-content: flex-end; }
.muown .lwrline { flex-direction: column; align-items: flex-start; gap: 2px; }
.lwr.b.muown .lwrline { align-items: flex-end; }
.muown .lwrline + .lwrline { margin-top: 6px; }
.mupct.up, .lwrline b.up, .prow .pstat .ln.up { color: var(--pos); }
.mupct.dn, .lwrline b.dn, .prow .pstat .ln.dn { color: var(--neg); }
.mumid { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.muvsrec { display: inline-flex; align-items: baseline; gap: 6px; }
.muvsrec .muwins { font: 600 24px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muvsrec .muwins.lead { color: var(--pos); }
.muvsrec .muwins.trail { color: var(--text-3); }
.muvsrec .dash { color: var(--text-3); font-size: 18px; line-height: 1; }
.mumid > .ln { font: 400 11px/1 var(--sans); color: var(--text-3); }
.mumid .lduel { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; width: 100%; }
.mumid .lduelbar { height: 7px; }
.mufig { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.mupct { font: 600 26px/1 var(--display); letter-spacing: -0.01em; }
.mumid > .lbar { width: 100%; }
.muanyone { justify-content: flex-end; }
.muany { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; }
.muhero + .sharerow { margin: 6px 0 0; }
.acard.matchup .line2 { margin-top: 12px; }
.mulines, .musplits, .mulog { margin-top: 22px; }
.mulgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 24px; }
.muline {
flex: 0 1 330px; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 12px 14px;
border: 1px solid var(--line); border-radius: 10px;
}
.mulhead { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; font: 600 14px/1.2 var(--display); }
.mulhead .champ { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.mulhead .champ.in { flex-direction: row-reverse; }
.mulhead .champ > span { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mulhead .champ img.portrait { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.muline .mpvs td { font-size: 15px; min-width: 56px; padding: 5px 8px; }
.muwhose { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--sans); color: var(--text-2); }
.muwhose .portrait { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }
.musgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 28px; }
.musplit { min-width: 0; }
.musplit > .mic { display: block; margin-bottom: 4px; }
.srow {
display: grid; grid-template-columns: 72px 40px 52px 1fr;
gap: 10px; align-items: center;
padding: 5px 0;
border-top: 1px solid var(--line);
font: 400 12px/1.3 var(--sans);
}
.srow .skey { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .srec { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.srow .spct { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); }
.srow .spct.up { color: var(--pos); }
.srow .spct.dn { color: var(--neg); }
.srow .lbar { margin-top: 0; }
.smore { display: block; margin-top: 8px; }
.sidesw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--side); flex: none; }
.mlrows { display: flex; flex-direction: column; }
.mlrow {
display: grid; grid-template-columns: 58px 1fr auto 64px auto 1fr; align-items: center; gap: 10px;
padding: 7px 0; border-top: 1px solid var(--line);
cursor: pointer; transition: background var(--fast);
}
.mlrow:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.mldate { font: 400 11.5px/1 var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mlside { display: flex; align-items: center; min-width: 0; }
.mlside.b { justify-content: flex-end; }
.mlside .tm.named {
width: auto; max-width: 100%; min-width: 0; margin: 0;
display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
padding-left: 9px; border-left: 3px solid var(--side);
text-align: left; font-size: 12.5px;
}
.mlside.b .tm.named { flex-direction: row-reverse; justify-content: flex-start; padding: 0 9px 0 0; border-left: 0; border-right: 3px solid var(--side); text-align: right; }
.mlside .tm > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlside .tm .lg { width: 20px; height: 20px; object-fit: contain; }
.mlseats { display: inline-flex; gap: 4px; flex: none; }
.mlseats .portrait { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.mlseats .mlname { font: 500 11px/1 var(--sans); color: var(--text-2); }
.mlscore { display: inline-flex; justify-content: center; align-items: baseline; gap: 4px; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.mlscore .lead { color: var(--text); font-weight: 650; }
.mlscore .trail, .mlscore .dash { color: var(--text-3); }
.mlpager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; font: 400 12px/1 var(--sans); color: var(--text-3); }
.mlpager .pgsaid { margin-right: auto; }
.mlpager .pgbtn { width: 28px; height: 26px; padding: 0; font-size: 14px; line-height: 1; }
.dhero {
position: relative; overflow: hidden; isolation: isolate;
display: grid; grid-template-columns: 1fr auto 1fr;
gap: 16px; align-items: start;
padding: 14px 18px 12px;
border: 1px solid var(--line); border-radius: 12px;
}
.dteam { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.dteam.side-red { align-items: flex-end; text-align: right; }
.dtname {
display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
font: 600 15.5px/1.2 var(--display);
}
.dtname > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dteam.side-red .dtname { flex-direction: row-reverse; }
.dtmark { width: 26px; height: 26px; object-fit: contain; flex: none; }
.dtleague { margin: 3px 0 0; font: 500 10.5px/1 var(--sans); color: var(--text-3); }
.dtnone { color: var(--text-3); font-style: italic; }
.dh2h { text-align: center; padding: 0 8px; }
.dhrec { font: 600 26px/1.1 var(--display); margin-top: 6px; font-variant-numeric: tabular-nums; }
.dhn { margin: 4px 0 0; font-size: 11.5px; color: var(--text-3); }
.fstrip { display: flex; gap: 3px; margin-top: 9px; }
.fdot {
width: 17px; height: 17px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 4px;
font: 500 9.5px/1 var(--sans);
cursor: pointer;
color: #fff;
transition: filter var(--fast);
}
.fdot.w { background: var(--pos-fill); }
.fdot.l { background: var(--neg-fill); opacity: 0.72; }
.fdot:hover { filter: brightness(1.15); }
.dtform { margin: 6px 0 0; font-size: 11.5px; color: var(--text-2); }
.dlanes { margin-top: 26px; }
.dlanes .bhead { margin-bottom: 14px; }
.lane {
position: relative; overflow: hidden; isolation: isolate;
display: grid;
grid-template-columns: 34px minmax(90px, 1fr) 104px minmax(150px, 190px) 104px minmax(90px, 1fr) 34px;
gap: 12px; align-items: center;
padding: 9px 0;
border-top: 1px solid var(--line);
transition: opacity var(--fast);
}
.lane.lcols { border-top: 0; padding: 2px 0 3px; align-items: end; }
.lcols span { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.lcols .cm { text-align: center; }
.lane .lfade {
position: absolute; z-index: -1; top: 50%; transform: translateY(-50%);
width: 140px; height: 140px;
opacity: calc(var(--crest) * 1.5);
}
.lfade.a {
left: 0;
-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 96%);
mask-image: linear-gradient(90deg, #000 30%, transparent 96%);
}
.lfade.b {
right: 0;
-webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 96%);
mask-image: linear-gradient(270deg, #000 30%, transparent 96%);
}
.lane .lchamp { min-width: 0; display: flex; align-items: center; }
.lane .lchamp.b { justify-content: flex-end; }
.lchamp .lname {
font: 600 13px/1.2 var(--display);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lwrline { display: flex; align-items: baseline; gap: 6px; }
.lwrline b { font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text); }
.lwrline .ln { font: 400 10.5px/1 var(--sans); color: var(--text-3); white-space: nowrap; }
.lwrline.mid { justify-content: center; }
.lbar {
--fill: color-mix(in srgb, var(--text-3) 50%, var(--track));
height: 4px; margin-top: 5px; border-radius: 999px;
}
.lbar.up { --fill: color-mix(in srgb, var(--pos-fill) 90%, var(--track)); }
.lbar.dn { --fill: color-mix(in srgb, var(--neg-fill) 90%, var(--track)); }
.lbar.marked {
background:
linear-gradient(90deg,
transparent calc(var(--b) - 1px),
color-mix(in srgb, var(--text) 65%, transparent) calc(var(--b) - 1px) calc(var(--b) + 1px),
transparent calc(var(--b) + 1px)),
var(--bar-paint);
}
.srec .lead { color: var(--pos); font-weight: 600; }
.srec .trail, .srec .dash { color: var(--text-3); }
.lh2h { text-align: center; }
.lh2h .lduel {
display: grid; grid-template-columns: auto 1fr auto;
gap: 7px; align-items: center; margin-top: 4px;
}
.lduel .lpct { font: 500 11px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); }
.lduel .lpct.lead { color: var(--text); font-weight: 650; }
.lduel .lpct.trail { color: var(--text-3); opacity: 0.8; }
.lduelbar {
--v: 50%;
height: 6px; border-radius: 999px;
background: linear-gradient(90deg, #3f7ad9 0 var(--v), #d8574c var(--v) 100%);
}
.lnone { font: 400 11px/1 var(--sans); color: var(--text-3); }
.dlanes .fold { margin: 0 0 2px; }
.dplayers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 26px; }
.dpside {
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--line); border-radius: 10px;
}
.dphead {
display: flex; align-items: center; gap: 8px;
margin: -10px -12px 6px; padding: 9px 12px 8px;
border-bottom: 1px solid var(--line);
}
.dphead .dpmark { width: 22px; height: 22px; object-fit: contain; flex: none; }
.dphead .mic { margin-top: 0; }
.dpside.side-red .dphead { flex-direction: row-reverse; text-align: right; }
.dpsnote { font: 400 11px/1.45 var(--sans); color: var(--text-3); }
.prow {
display: grid;
grid-template-columns: 30px 24px minmax(60px, 1fr) auto 64px;
gap: 8px; align-items: center;
padding: 6px 0;
border-top: 1px solid var(--line);
font-size: 12.5px;
}
.prow:first-of-type { border-top: 0; }
.prow .pwho { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
a.pwho { color: inherit; text-decoration: none; }
a.pwho:hover { text-decoration: underline; }
.prow .pstat { display: flex; align-items: baseline; gap: 5px; }
.prow .pstat b { font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.prow .pstat .ln { font: 400 10px/1 var(--sans); color: var(--text-3); }
.prow .pstat .pvs { font: 400 10px/1 var(--sans); color: var(--text-3); white-space: nowrap; }
.prow .pnone { grid-column: 4 / -1; font: 400 10.5px/1.3 var(--sans); color: var(--text-3); text-align: right; }
.prow .lbar { margin-top: 0; height: 5px; }
@media (max-width: 680px) {
.mubuild, .drgrid, .dplayers { grid-template-columns: 1fr; }
.dhero { gap: 10px; padding: 12px 12px 10px; }
.dhero .dh2h { padding: 0; }
.dhero .dhrec { margin-top: 2px; font-size: 22px; }
.dhero .fstrip { display: grid; grid-template-columns: repeat(5, 12px); gap: 2px; margin-top: 6px; }
.dhero .fdot { width: 12px; height: 12px; font-size: 7.5px; border-radius: 3px; }
.dhero .dtform { margin-top: 4px; font-size: 11px; }
.lane {
grid-template-columns: 34px 1fr 1fr;
grid-template-areas: "role champa champb" "wra wra wrb" "h2h h2h h2h";
}
.lane.lcols { display: none; }
.lane > .pos { grid-area: role; }
.lane .lchamp.a { grid-area: champa; }
.lane .lchamp.b { grid-area: champb; }
.lane .lwr.a { grid-area: wra; }
.lane .lwr.b { grid-area: wrb; }
.lane .lh2h { grid-area: h2h; }
}
.dscale { margin-top: 22px; }
.dscale .snote { font: 400 10.5px/1 var(--sans); color: var(--text-3); }
.sechead { justify-content: flex-start; align-items: center; gap: 10px; margin: 34px 0 12px; }
.sechead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec {
font: 600 13px/1.2 var(--sans);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-2);
white-space: nowrap;
}
.dlanes .sechead:first-child, .dscale .sechead:first-child { margin-top: 0; }
.acard.draft > .sechead { margin-bottom: 14px; }
.sverdict {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 16px;
padding: 12px 16px; border-radius: 12px;
border: 1px solid var(--line);
}
.svmark {
position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
height: 86px; width: 86px; object-fit: contain;
opacity: 0.18; pointer-events: none;
}
.sverdict.lean .svmark { opacity: 0.12; }
.svtext {
position: relative; display: flex; flex-direction: column; gap: 3px; padding-left: 26px;
flex: 1 1 auto; min-width: 0;
}
.sverdict.flat .svtext { padding-left: 0; }
.svline { font: 600 20px/1.25 var(--display); letter-spacing: -0.01em; color: var(--text); }
.svline.even { color: var(--text-2); font-weight: 500; }
.svline .tname { color: var(--side); }
.svnote { margin: 0; font: 400 11px/1.4 var(--sans); color: var(--text-3); }
.ribbar { position: relative; display: flex; justify-content: flex-end; margin-top: 12px; }
.rhelp { display: inline-flex; align-items: center; gap: 6px; }
.qmark {
width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 9px; line-height: 1;
}
.rpop {
display: none;
position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
width: min(430px, 92vw);
background: var(--ground); border: 1px solid var(--line-2); border-radius: 12px;
box-shadow: var(--float);
padding: 14px 16px 16px;
}
.ribbar.open .rpop { display: block; }
.rpophead {
margin: 0 0 10px;
font: 500 10.5px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-2);
}
.rpoptext { margin: 12px 0 0; font: 400 12.5px/1.65 var(--sans); color: var(--text-2); }
.rpoplink { display: inline-block; margin-top: 10px; font: 500 12px/1.4 var(--sans); color: var(--accent); text-decoration: none; }
.rpoplink:hover { text-decoration: underline; }
.rleg { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.rlegrow { display: inline-flex; align-items: center; gap: 9px; font: 400 12px/1.4 var(--sans); color: var(--text-2); }
.rlsw { width: 16px; height: 10px; border-radius: 2px; flex: none; }
.rlsw.lin { height: 2px; border-radius: 1px; background: var(--text); }
.rlsw.side-blue, .rlsw.side-red { background: color-mix(in srgb, var(--side) 32%, transparent); }
.rlsw.lean { background: color-mix(in srgb, var(--side) 13%, transparent); }
.rlsw.gry { background: color-mix(in srgb, var(--text-2) 30%, transparent); }
.rpopx {
position: absolute; top: 8px; right: 10px;
background: none; border: 0; cursor: pointer;
font: 400 16px/1 var(--sans); color: var(--text-3);
}
.rpopx:hover { color: var(--text); }
.rex { position: relative; height: 128px; }
.rex svg { position: absolute; inset: 0 0 18px 0; width: 100%; height: calc(100% - 18px); display: block; }
.rex .rmin { bottom: 2px; }
.rexcap {
position: absolute; top: 4px; transform: none;
font: 500 10px/1 var(--sans); letter-spacing: 0.04em;
color: var(--text-3);
}
.rexcap.side-red, .rexcap.side-blue { color: var(--side); }
.rib { position: relative; height: 260px; margin-top: 14px; }
.rib svg { position: absolute; inset: 0 0 16px 0; width: 100%; height: calc(100% - 16px); display: block; }
.rgrid { stroke: var(--line); fill: none; }
.rzero { stroke: var(--text-3); fill: none; }
.rline { stroke: var(--text); stroke-width: 2px; fill: none; }
.rseg { fill: var(--side); opacity: 0.14; }
.rseg.lean { opacity: 0.055; }
.rseg.even { fill: var(--text-2); opacity: 0.14; }
.rahead {
position: absolute; left: 8px;
display: inline-flex; align-items: center; gap: 6px;
font: 500 11px/1 var(--sans); color: var(--side);
}
.rahead img { height: 15px; width: 15px; object-fit: contain; }
.rahead.side-blue { top: 8px; }
.rahead.side-red { bottom: 24px; }
.rmin { position: absolute; bottom: 0; transform: translateX(-50%); font: 400 10px/1 var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rmin.last { transform: translateX(-100%); }
.rpp {
position: absolute; transform: translateY(-50%);
font: 400 10px/1 var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums;
padding: 1px 4px; border-radius: 4px;
background: color-mix(in srgb, var(--ground) 80%, transparent);
}
.rhair { position: absolute; top: 0; bottom: 16px; width: 0; border-left: 1px solid var(--line-2); display: none; pointer-events: none; }
.rhair.on { display: block; }
.rtip {
position: absolute; top: 10px; left: 8px; white-space: nowrap;
background: var(--ground); border: 1px solid var(--line-2); border-radius: 7px;
box-shadow: var(--float);
padding: 4px 9px; font: 400 11.5px/1.3 var(--sans); color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.rtip.flip { left: auto; right: 8px; }
.sclocks { position: relative; flex: none; margin-left: auto; display: flex; gap: 26px; align-items: flex-start; }
.sclock { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scteam { height: 26px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.scteam .scmark { height: 24px; width: 24px; object-fit: contain; }
.scteamname {
font: 600 10.5px/1.2 var(--sans); color: var(--text-2);
max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sclabel { font: 500 10.5px/1 var(--sans); color: var(--text-2); }
.scgrid {
display: grid; grid-template-columns: 18px 46px 18px 46px;
align-items: center; row-gap: 4px; column-gap: 4px;
}
.sccol { font: 500 9.5px/1 var(--sans); color: var(--text-3); text-align: center; }
.scicon { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; display: block; }
.scv {
font: 400 11px/1.4 var(--sans); font-variant-numeric: tabular-nums;
color: var(--text-2); text-align: center;
}
.scarr { font: 400 11px/1 var(--sans); text-align: center; }
.scarr.up { color: var(--pos); }
.scarr.down { color: var(--neg); }
.scarr.flat { color: var(--text-3); }
.sitenav { display: flex; align-items: center; align-self: stretch; gap: 16px; margin-left: 22px; }
.sitenav > a, .sitenav > .menu { position: relative; align-self: stretch; }
.sitenav > a[aria-current], .menubtn[aria-current] { color: var(--text); }
.sitenav > a[aria-current]::after, .menubtn[aria-current]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
border-radius: 2px 2px 0 0; background: currentColor;
}
.sitenav a {
font: 500 12.5px/1 var(--sans);
color: var(--text-2);
text-decoration: none;
transition: color var(--fast);
}
.sitenav a:hover { color: var(--text); }
.sitenav a:has(.navico) {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.navico { width: 15px; height: 15px; flex: none; }
.menu { position: relative; display: flex; align-items: center; }
.menubtn {
display: inline-flex; align-items: center; gap: 3px; padding: 0;
background: none; border: 0; cursor: pointer;
font: 500 12.5px/1 var(--sans); color: var(--text-2); transition: color var(--fast);
}
.menubtn:hover, .menu.open .menubtn { color: var(--text); }
.menubtn svg { width: 12px; height: 12px; transition: transform var(--fast); }
.menu.open .menubtn svg, .menu:hover .menubtn svg { transform: rotate(180deg); }
.menulist {
position: absolute; top: 100%; left: -14px; z-index: 30;
display: none; flex-direction: column; min-width: 172px;
margin-top: 8px; padding: 6px;
background: var(--ground); border: 1px solid var(--line-2); border-radius: 10px;
box-shadow: var(--float);
}
.menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.menu:hover .menulist, .menu:focus-within .menulist, .menu.open .menulist { display: flex; }
.sitenav .menulist a {
display: flex; align-items: center; gap: 11px;
padding: 8px 12px; border-radius: 7px;
color: var(--text); font: 500 13px/1.3 var(--sans);
}
.sitenav .menulist a:hover, .sitenav .menulist a:focus-visible { background: var(--s2); }
.menulist svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.sitenav .menulist a:hover svg { color: var(--text-2); }
.brand {
display: inline-flex; align-items: center; gap: 8px;
font: 600 13.5px/1 var(--display); letter-spacing: -0.01em;
color: var(--text); text-decoration: none;
}
.brand img { width: 20px; height: 20px; display: block; }
.pfoot {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-top: 96px; padding: 20px 0 32px;
border-top: 1px solid var(--line);
font: 400 12px/1.5 var(--sans); color: var(--text-3);
}
.pfoot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.pfoot a { color: var(--text-3); text-decoration: none; transition: color var(--fast); }
.pfoot a:hover { color: var(--text-2); }
.cpage { position: relative; }
.chero h1 { font-size: 40px; }
.cform2 { max-width: 620px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 16px; }
.c2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frow { display: flex; flex-direction: column; gap: 7px; }
.frow label {
font: 500 10.5px/1 var(--sans);
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-3);
}
.frow select {
appearance: none;
padding-right: 34px;
background-image:
linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
}
.frow select option { background: var(--s2); color: var(--text); }
.frow textarea { resize: vertical; min-height: 150px; }
.csend2 { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.chint { font: 400 11.5px/1.4 var(--sans); color: var(--text-3); text-align: center; }
.chint:empty { display: none; }
.cdirect { font: 400 12px/1.4 var(--sans); color: var(--text-3); text-decoration: none; }
.cdirect:hover { color: var(--text-2); text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cdoodle { position: absolute; width: 168px; height: auto; top: 330px; pointer-events: none; }
.cdoodle.left { left: -84px; }
.cdoodle.right { right: -84px; top: 380px; }
.cd-line { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
.cd-soft { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; opacity: 0.28; }
.cd-dot { fill: var(--accent-2); opacity: 0.85; }
@media (max-width: 1080px) { .cdoodle { display: none; } }
@media (max-width: 680px) { .c2col { grid-template-columns: 1fr; } .chero h1 { font-size: 30px; } }
.dgo { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; text-decoration: none; }
.dico { width: 20px; height: 20px; flex: none; }
.dcmds {
display: grid; grid-template-columns: 1fr 1fr; align-items: start;
gap: 16px; margin: 44px auto 0; max-width: 820px;
}
.dcmd { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.dcmd h2 { margin: 0 0 10px; font-size: 15px; }
.dcmd h2 code { font-size: 15px; color: var(--accent-2); }
.dcmd p { margin: 0 0 10px; font: 400 13.5px/1.6 var(--sans); color: var(--text-2); }
.dcmd > :last-child { margin-bottom: 0; }
.dcmd .dnote { color: var(--text-3); font-size: 12.5px; }
.dcmd code { font-size: 12.5px; }
.dcmd .dhead {
margin: 16px 0 8px;
font: 500 10.5px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-3);
}
.dtags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.dtags li {
padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
background: var(--s2); color: var(--text-2);
font: 500 11.5px/1.45 var(--sans);
}
.dtags + .dnote { margin-top: 10px; }
.dsubs {
display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; align-items: baseline;
margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid var(--line);
font: 400 12.5px/1.5 var(--sans);
}
.dsubs dt { color: var(--text); }
.dsubs dd { margin: 0; color: var(--text-3); }
.dshot { max-width: 820px; margin: 28px auto 0; }
.dshot img {
display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto;
border: 1px solid var(--line); border-radius: 12px;
}
.dshot figcaption {
margin-top: 10px; text-align: center;
font: 400 12.5px/1.6 var(--sans); color: var(--text-3);
}
@media (max-width: 680px) { .dcmds { grid-template-columns: 1fr; } }
.bmast { padding: 52px 0 0; }
.bmast h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.028em; }
.bmast p { margin: 12px 0 0; font-size: 15px; color: var(--text-2); }
.bsubrow { display: flex; align-items: center; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.bsubrow input { width: min(280px, 100%); }
.bfeat { display: block; max-width: 720px; margin: 48px 0 0; text-decoration: none; }
.bcover {
position: relative; overflow: hidden;
aspect-ratio: 720 / 320;
background: transparent;
border: 1px solid var(--line);
border-radius: 12px;
transition: border-color var(--fast);
}
.bcover svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bcover .rseg { opacity: 0.3; }
.bcover .rseg.lean { opacity: 0.12; }
.bcover .rseg.even { opacity: 0.2; }
.bfeat:hover .bcover { border-color: var(--line-2); }
.bctip { position: absolute; left: 56%; top: 26%; }
.bcnote { position: absolute; right: 14px; bottom: 10px; }
.bfeat h2 { margin: 18px 0 0; font-size: 26px; line-height: 1.25; letter-spacing: -0.015em; color: var(--text); }
.bfeat:hover h2 { color: var(--accent); }
.bfeat .mic { display: block; margin-top: 8px; }
.post {
display: grid; grid-template-columns: minmax(0, 1fr) min(660px, 100%) minmax(0, 1fr);
padding: 48px 0 0;
}
.post > * { grid-column: 2; min-width: 0; }
.post > .fig.wide { grid-column: 1 / -1; }
.post .pcrumb { margin: 0 0 14px; font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.post .pcrumb a { color: var(--text-3); text-decoration: none; }
.post .pcrumb a:hover { color: var(--text-2); }
.post h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.022em; }
@media (max-width: 600px) { .post h1 { font-size: 27px; } }
.post h2 { font-size: 20px; margin: 42px 0 0; }
.post p { margin: 16px 0 0; color: var(--text); font-size: 16px; line-height: 1.7; }
.post p a { color: var(--accent); text-decoration: none; }
.post p a:hover { text-decoration: underline; }
.fig { margin: 26px 0 0; padding: 18px 18px 14px; }
.figplot { position: relative; }
.figplot svg { position: absolute; inset: 0 0 16px 0; width: 100%; height: calc(100% - 16px); display: block; }
.figcap { margin: 12px 0 0; font: 400 12px/1.55 var(--sans); color: var(--text-3); }
.fline { fill: none; stroke-width: 2px; }
.fline.a { stroke: var(--accent); }
.fline.b { stroke: var(--text-2); }
.fmark { position: absolute; transform: translateY(-50%); font: 500 11px/1 var(--sans); }
.fmark.a { color: var(--accent); }
.fmark.b { color: var(--text-2); }
.post ul { margin: 14px 0 0; padding-left: 22px; color: var(--text); font-size: 16px; line-height: 1.7; }
.post li { margin-top: 8px; }
.post li a, .post td a, .post .figcap a { color: var(--accent); text-decoration: none; }
.post li a:hover, .post td a:hover, .post .figcap a:hover { text-decoration: underline; }
.fpicks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.fplabel, .fpvs { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.fpick {
appearance: none;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px 30px 6px 10px;
font: 500 13px/1.3 var(--sans);
color: var(--text);
background-image:
linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
transition: border-color var(--fast);
}
.fpick:focus { outline: none; border-color: var(--accent-2); }
.fpick.a { color: var(--accent); }
.fpick.b { color: var(--text-2); }
.fread { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.freadrow {
display: inline-flex; align-items: center; gap: 6px;
font: 400 12px/1.4 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.freadrow b { font-weight: 600; margin-right: 2px; }
.freadrow.a b { color: var(--accent); }
.freadrow.b b { color: var(--text-2); }
.freadrow .scv { font-size: 12px; }
.fgames { color: var(--text-3); }
.ftable { border-collapse: collapse; margin-top: 22px; font: 400 14px/1.5 var(--sans); }
.ftable th, .ftable td { padding: 8px 16px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftable th {
padding-top: 10px; padding-bottom: 10px;
font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.ftable td { border-top: 1px solid var(--line); color: var(--text); }
.ftable th:first-child, .ftable td:first-child { text-align: left; padding-left: 0; padding-right: 34px; }
.ftable th:last-child, .ftable td:last-child { padding-right: 0; }
.ftable .scarr { padding-left: 2px; padding-right: 2px; font-size: 13px; }
.ftable .champ { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.ftable .champ img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.ftable .champ:hover { text-decoration: underline; }
.figlive .dscale { margin-top: 0; }
.figlive .rpoplink { display: none; }
.shareable { position: relative; }
.shbtn {
display: inline-flex; align-items: center; gap: 6px;
transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.shbtn svg { width: 13px; height: 13px; }
.shbtn.corner { position: absolute; top: 12px; right: 12px; z-index: 2; }
.sharerow { display: flex; justify-content: flex-end; margin: 18px 0 -8px; }
.sharerow:first-child { margin-top: 0; }
.sharerow .shbtn.corner { position: static; }
.muhero + .sharerow { margin: 8px 0 -34px; }
.sharerow.ingap { margin: -8px 0 2px; }
.sgap {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 30px;
margin: -6px 0 6px;
}
.sgap:empty { display: none; }
.sgap > .shbtn { margin-left: auto; }
.sgap .dpsnote, .sgap .dhn, .sgap details.fold { margin: 0; }
.acard.draft > .dhero + .sgap { margin: 10px 0 0; }
.sgap + .dplayers { margin-top: 0; }
.shdlg {
width: min(560px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
padding: 0;
background: var(--ground);
border: 1px solid var(--line-2);
border-radius: 14px;
box-shadow: var(--float);
color: var(--text);
overflow: hidden;
}
.shdlg::backdrop { background: rgba(9, 9, 11, 0.55); backdrop-filter: blur(2px); }
.shhead {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 14px 12px 16px;
border-bottom: 1px solid var(--line);
}
.shhead h2 { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.shx {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: transparent; border: 0; border-radius: 7px;
color: var(--text-3);
transition: color var(--fast), background var(--fast);
}
.shx:hover { color: var(--text); background: var(--s2); }
.shx svg { width: 15px; height: 15px; }
.shdlg.shpic { width: fit-content; max-width: calc(100vw - 40px); }
.shpic .shx {
position: absolute; top: 10px; right: 10px; z-index: 1;
background: var(--ground); border: 1px solid var(--line); border-radius: 999px;
}
.shstage {
display: flex; align-items: center; justify-content: center;
padding: 16px;
overflow: hidden;
background: transparent;
}
.shstage img {
display: block; height: auto;
max-width: calc(100vw - 96px);
max-height: calc(100vh - 200px);
}
.shwait { padding: 40px 16px; min-width: 300px; font: 400 13px/1.5 var(--sans); color: var(--text-3); text-align: center; }
.shfoot { display: flex; justify-content: center; padding: 12px 14px; }
.shfoot:empty { display: none; }
.shcopy {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
background: var(--accent-2);
border: 0; border-radius: 8px;
color: #fff;
font: 500 13.5px/1.4 var(--sans);
transition: filter var(--fast);
}
.shcopy:hover { filter: brightness(1.08); }
.shcopy svg { width: 14px; height: 14px; }
.shfoot { gap: 10px; flex-wrap: wrap; }
.shlink { background: var(--panel-2, var(--panel)); color: var(--text); border: 1px solid var(--line); }
.shurl {
padding: 0 14px 12px; text-align: center;
font: 400 12px/1.5 var(--mono, var(--sans)); color: var(--text-3);
user-select: all; overflow-wrap: anywhere;
}
p.asof { margin: 10px 2px 0; font-size: 13px; color: var(--text-3); }
p.asof .flaglink { font-size: 13px; }
@media (max-width: 720px) {
.askhead {
position: relative;
display: grid; grid-template-columns: 1fr max-content;
column-gap: 10px; row-gap: 4px; align-items: center;
}
.askhead .seg { grid-row: 1 / 3; justify-self: start; }
.askhead .leagues, .askhead .leagues + .leagues {
grid-column: 2; margin-left: 0; justify-self: end;
}
.askhead .leagues summary { padding: 2px 0; }
.askhead .leagues { position: static; }
.askhead .leagues .lgbody { left: 0; right: 0; width: auto; top: calc(100% + 2px); }
.afloat .leagues .lgbody {
position: fixed; left: 12px; right: 12px; width: auto; top: 56px;
}
.field input, .combo input,
.frow input, .frow select, .frow textarea,
.bsubrow input, .entsearch input { font-size: 16px; }
#slash { display: none; }
.sitenav { gap: 20px; }
.sitenav a { padding: 10px 2px; }
.menulist { left: 50%; transform: translateX(-50%); }
.sitenav .menulist a { padding: 9px 12px; }
.menubtn { padding: 10px 2px; }
.icobtn { width: 38px; height: 38px; }
.seg button { padding: 8px 12px; }
.pg { width: 34px; height: 32px; }
.lg1 { padding: 6px 0; }
.lghead { padding: 4px 0; }
.tablewrap .tm.named { width: auto; }
.tablewrap .tm.named:not(.player) > span:last-child { display: none; }
.tablewrap, .mtablewrap {
background-image:
linear-gradient(90deg, var(--ground) 30%, transparent),
linear-gradient(270deg, var(--ground) 30%, transparent),
radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 24%, transparent), transparent),
radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 24%, transparent), transparent);
background-position: left, right, left, right;
background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
}
}
@media (max-width: 680px) {
.dlanes .lane { padding: 9px 10px; }
.muhero {
grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "wa wb" "mid mid";
gap: 8px 12px; padding: 14px 14px;
}
.muend.a { grid-area: a; }
.muend.b { grid-area: b; }
.muhero .lwr.a { grid-area: wa; }
.muhero .lwr.b { grid-area: wb; }
.mumid { grid-area: mid; margin-top: 4px; }
.muend .lfade { width: 120px; height: 120px; }
.muname .lname { font-size: 19px; }
.musgrid { grid-template-columns: 1fr; }
.mlrow { grid-template-columns: 1fr auto 56px auto 1fr; grid-template-areas: "date date date date date" "a sa score sb b"; gap: 4px 6px; }
.mldate { grid-area: date; }
.mlside.a { grid-area: a; }
.mlside.b { grid-area: b; }
.mlrow > .mlseats:first-of-type { grid-area: sa; }
.mlrow > .mlseats:last-of-type { grid-area: sb; }
.mlscore { grid-area: score; }
.mlside .tm.named .lg { display: none; }
.dh2h { text-align: center; padding: 0; }
.sverdict { flex-wrap: wrap; }
.svtext { width: 100%; padding-left: 0; text-align: center; align-items: center; }
.svmark { left: 50%; top: 8px; transform: translateX(-50%); height: 72px; width: 72px; }
.sclocks { margin-left: 0; width: 100%; justify-content: center; }
.muhero + .sharerow { margin: 8px 0 0; }
}
@media (max-width: 880px) {
.sitenav a[href="/discord"] .navword {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0);
}
}
@media (max-width: 660px) {
.navword {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0);
}
.sitenav .navnew {
position: absolute; top: calc(50% - 11px); right: -4px; width: 7px; height: 7px; padding: 0;
border-radius: 50%; font-size: 0; box-shadow: 0 0 0 2px var(--ground);
}
}
@media (max-width: 460px) {
.sitenav { gap: 8px; margin-left: 12px; }
.menubtn svg { display: none; }
.tools { gap: 2px; }
.pmhead { width: 32px; }
}
@media (max-width: 359px) {
.icobtn { width: 34px; }
.pmhead { width: 30px; }
}
@media (max-width: 720px) {
.bmast h1 { font-size: 30px; }
}
@media (max-width: 360px) {
.leagues.patches .lglist { grid-template-columns: repeat(3, max-content); }
}
@media (max-width: 350px) {
.askhead { column-gap: 6px; }
.askhead .seg button { padding: 8px 9px; }
.askhead .leagues .lgchip { padding: 2px 6px; }
}
.entpage { padding-top: 28px; }
.entnav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 26px; font: 500 12.5px/1 var(--sans); }
.entnav a { color: var(--text-3); text-decoration: none; padding: 6px 0; transition: color var(--fast); }
.entnav a:hover { color: var(--text); }
.entnav a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.enthead { display: flex; align-items: center; gap: 18px; }
.enthead .bigmark { width: 72px; height: 72px; flex: none; object-fit: contain; }
.enthead .bigmark.portrait { border-radius: 14px; }
.enthead .bigpic {
display: flex; align-items: flex-end; justify-content: center;
width: 84px; height: 76px; flex: none;
}
.enthead .bigpic img {
width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0.88;
-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.enthead .bigpic.none::before { width: 40px; height: 52px; }
.enthead h1 { margin: 0; font: 600 32px/1.1 var(--display); letter-spacing: -0.022em; }
.enthead .sub { margin: 8px 0 0; color: var(--text-2); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.enthead .sub .tm.named { width: auto; }
.entstats { margin: 30px 0 0; text-align: center; }
.entstats .among { margin: 0 0 14px; color: var(--text-3); font-size: 12.5px; }
.statrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 10px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; }
.stat b { font: 600 22px/1 var(--display); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat b i { font: 600 11px/1 var(--sans); font-style: normal; letter-spacing: 0.04em; color: var(--accent-2); margin-left: 5px; vertical-align: 8px; }
.stat .mic { white-space: nowrap; }
.entpage section .tablewrap { margin-top: 0; }
.entpage .sechead { display: flex; justify-content: center; }
.entpage .sechead::before { content: ""; flex: 1; height: 1px; background: var(--line); }
.entpage td .tm.named { width: auto; max-width: 220px; }
.entpage th, .entpage td { text-align: center; }
.entpage .tm.named.lgm { width: auto; }
.entpage a.tm, .entpage a.champ { text-decoration: none; color: inherit; }
.entpage a.tm:hover > span:last-child, .entpage a.champ:hover > span:last-child { text-decoration: underline; }
.entpage a.tmres { color: inherit; text-decoration: none; white-space: nowrap; }
.entpage a.tmres > span:last-child { margin-left: 6px; font-variant-numeric: tabular-nums; }
.entpage a.tmres:hover > span:last-child { text-decoration: underline; }
.entpage .champ img.portrait { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.entpage .w { color: var(--pos); font-weight: 500; }
.entpage .l { color: var(--neg); font-weight: 500; }
.tm .mk { position: relative; display: inline-flex; flex: none; }
.tm .mk i {
position: absolute; right: -2px; bottom: -1px; width: 6px; height: 6px; border-radius: 50%;
background: var(--pos); box-shadow: 0 0 0 1.5px var(--ground);
}
.tm.lost .mk i { display: none; }
.tm.lost > span:last-child { color: var(--text-3); }
.tm.lost .lg { opacity: 0.45; filter: grayscale(0.5); }
.entpage tr.opens { cursor: pointer; }
.entpage tr.opens:hover td { background: var(--pick-bg); }
.entpage section .interp { margin: 18px 0 8px; }
.entpage section h3 { margin: 22px 0 8px; font: 600 14px/1.3 var(--sans); display: flex; align-items: center; gap: 8px; }
.entpage section h3 .lgname { color: var(--text-3); font-weight: 400; }
.entpage section h3 .tm, .enthead .sub .tm { margin-inline: 0; }
.entpage .note { margin-top: 10px; }
.entpage .muted { color: var(--text-3); }
.entlist { --spine: 26px; display: flex; flex-wrap: wrap; row-gap: 4px; }
.entlist .entlink { display: flex; width: 25%; box-sizing: border-box; min-width: 0; padding: 5px 4px 5px var(--spine); }
.entlist .entlink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .entlist { --spine: 16px; } .entlist .entlink { width: 50%; } }
@media (min-width: 721px) and (max-width: 879px) { .entlist.counted .entlink { width: 33.333%; } }
@media (max-width: 520px) { .entlist.counted .entlink { width: 100%; } }
.entlist.qlist { display: grid; grid-template-columns: 1fr; }
.entlist.qlist .entlink { width: auto; padding: 5px 0; }
.entlist.qlist .entlink span { white-space: normal; }
.rolegrid { --role-spine: 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 18px; }
.rolecol .entlist { display: grid; grid-template-columns: 1fr; }
.rolecol .entlink { width: auto; padding-left: var(--role-spine); }
.rolehead, .subhead { display: block; margin: 2px 0 6px; text-align: center; font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.rolehead { text-align: left; padding-left: var(--role-spine); }
@media (max-width: 720px) {
.rolegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entpage .sec { white-space: normal; text-align: center; }
}
.twoupwrap { overflow-x: auto; }
.twoup { display: grid; grid-template-columns: repeat(5, max-content) 20px repeat(5, max-content); width: max-content; margin-inline: auto; align-items: center; gap: 4px 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.twoup .subhead { grid-column: 1 / -1; margin: 18px 0 6px; }
.twoup .subhead:first-child { margin-top: 0; }
.twoup .tu { text-align: center; white-space: nowrap; }
.twoup .tu.lead { justify-self: start; text-align: left; }
.twoup .tu i { font: 400 11px/1 var(--sans); font-style: normal; color: var(--text-3); margin-left: 4px; }
.twoup .tm.named { width: auto; }
.twoup .hot { color: var(--pos); font-weight: 500; }
.twoup .cold { color: var(--neg); font-weight: 500; }
.twoup .staple { color: var(--accent-2); font-weight: 500; }
.twoup .rare { color: var(--text-3); }
@media (max-width: 720px) {
.twoup { grid-template-columns: repeat(5, max-content); gap: 4px 8px; }
.twoup .gut { display: none; }
}
.entlink { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--text); text-decoration: none; font-size: 13.5px; }
.entlink img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.entlink img.portrait { border-radius: 4px; object-fit: cover; }
.entlink .lg.none { display: inline-block; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--track); transform: scale(0.72); }
.entlink:hover span { text-decoration: underline; }
.entfoot { margin-top: 40px; }
#related .sechead, #recent .sechead { justify-content: center; }
#related .sechead::before, #recent .sechead::before { content: ""; flex: 1; height: 1px; background: var(--line); }
#recent { margin-top: 12px; }
.rqgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.rqgroup {
min-width: 0; padding: 11px 14px 4px;
border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.rqgroup > .smlabel { display: block; margin-bottom: 6px; }
.rqlink {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 10px 0; border-top: 1px solid var(--line);
color: var(--text); text-decoration: none; font: 500 14px/1.35 var(--sans);
}
.rqlink span { min-width: 0; overflow-wrap: anywhere; }
.rqlink svg { flex: none; width: 14px; height: 14px; color: var(--text-3); }
.rqlink:hover, .rqlink:focus-visible, .rqlink:hover svg, .rqlink:focus-visible svg { color: var(--accent); }
@media (max-width: 720px) { .rqgroups { grid-template-columns: 1fr; } }
.entsel {
appearance: none; margin: 0 2px; padding: 4px 26px 4px 10px;
background-color: var(--ground);
background-image:
linear-gradient(45deg, transparent 50%, var(--text) 50%),
linear-gradient(135deg, var(--text) 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
background-size: 4px 4px; background-repeat: no-repeat;
border: 1px solid var(--text-2); border-radius: 7px;
font: 600 12px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text); cursor: pointer; transition: border-color var(--fast);
}
.entsel:hover, .entsel:focus { outline: none; border-color: var(--text); }
.sechead .sec:has(.entsel) { display: inline-flex; align-items: center; gap: 4px; }
.entsearch { margin: 22px 0 -10px; }
.entsearch input { width: 100%; max-width: 360px; box-sizing: border-box; }
@media (max-width: 600px) {
.enthead { gap: 12px; }
.enthead .bigmark { width: 52px; height: 52px; }
.enthead .bigpic { width: 62px; height: 56px; }
.enthead .bigpic.none::before { width: 30px; height: 38px; }
.enthead h1 { font-size: 27px; }
}
#matches:not(:empty) { margin: 20px 0 0; min-height: 166px; }
#matches:not(:empty) + .hero { padding-top: 40px; }
.smstrip { overflow: hidden; }
.smhead {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
height: 36px; padding: 10px 10px 0 14px;
}
.smlabel {
font: 500 11px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent);
}
.smseg button { padding: 3px 10px; font-size: 12px; }
.smtools { display: flex; align-items: center; gap: 12px; }
.smtier {
display: inline-flex; align-items: center; gap: 7px; flex: none;
padding: 2px 0; background: transparent; border: 0;
font: 500 12px/1.55 var(--sans); color: var(--text-3);
transition: color var(--fast);
}
.smtier:hover { color: var(--text-2); }
.smtier[aria-checked="true"] { color: var(--text); }
.smtrack {
position: relative; flex: none; width: 26px; height: 16px;
border: 1px solid var(--line-2); border-radius: 8px;
transition: background var(--fast), border-color var(--fast);
}
.smtrack::after {
content: ""; position: absolute; top: 2px; left: 2px;
width: 10px; height: 10px; border-radius: 50%; background: var(--text-3);
transition: transform var(--fast), background var(--fast);
}
.smtier:hover .smtrack { border-color: var(--text-3); }
.smtier[aria-checked="true"] .smtrack {
background: color-mix(in srgb, var(--text) 12%, transparent);
border-color: color-mix(in srgb, var(--text) 28%, transparent);
}
.smtier[aria-checked="true"] .smtrack::after { transform: translateX(10px); background: var(--text); }
.smscroll {
display: flex; gap: 10px; overflow-x: auto; height: 128px; padding: 10px 14px 14px;
scroll-snap-type: x proximity; scrollbar-width: none;
}
.smscroll::-webkit-scrollbar { display: none; }
.smcard, .smrow {
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: 10px; background: transparent;
color: inherit; text-decoration: none; overflow: hidden;
transition: border-color var(--fast);
}
.smcard { flex: 0 0 172px; height: 104px; scroll-snap-align: start; }
.smcard .smchead { flex: none; height: 31px; }
.smcard .smteam { flex: 1; padding-top: 0; padding-bottom: 0; }
.smcard .smline { gap: 6px; }
.smcard .smteam:nth-of-type(2) { padding-top: 4px; }
.smcard .smteam:last-child { padding-bottom: 5px; }
.smcard:hover, .smrow:hover { border-color: var(--line-2); }
.smchead, .smrhead {
display: flex; align-items: center; gap: 5px; padding: 7px 10px;
border-bottom: 1px solid var(--line); white-space: nowrap;
font: 500 12px/1.3 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.smchead > :not(.smlg), .smrhead > :not(.smlg) { flex: none; }
.smlg {
display: inline-flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0;
font-size: 11px; color: var(--text-3); letter-spacing: 0.02em;
}
.smlg .lgico { width: 14px; height: 14px; object-fit: contain; flex: none; }
.smlg span { overflow: hidden; text-overflow: ellipsis; }
.smbo { color: var(--text-3); }
.smlive { display: inline-flex; align-items: center; gap: 6px; color: var(--pos); font-weight: 600; }
.smlive::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--pos); box-shadow: 0 0 0 3px var(--pos-bg);
}
.smteam {
display: flex; align-items: center; gap: 8px; padding: 5px 10px;
font: 600 13.5px/1.3 var(--sans); color: var(--text);
}
.smteam:nth-of-type(2) { padding-top: 8px; }
.smteam:last-child { padding-bottom: 9px; }
.smteam .lg { width: 18px; height: 18px; object-fit: contain; flex: none; }
.smteam .lg.none { border-radius: 50%; background: var(--track); transform: scale(0.78); }
.smteam .smcode, .smteam .smname {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smteam .smname { display: none; }
.smteam .smscore { font-variant-numeric: tabular-nums; }
.smteam.lost { color: var(--text-3); }
.smcard, .smrow { position: relative; }
.smgo { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.smgo:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }
.smline { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: inherit; }
.smpm {
position: relative; z-index: 2; flex: none;
display: inline-flex; align-items: center; justify-content: center; gap: 2px;
height: 17px; margin: -1px 0; padding: 0 5px 0 4px;
border: 1px solid var(--pm-line); border-radius: 9px; background: var(--pm-bg);
color: var(--pm); text-decoration: none;
font: 600 11px/15px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0;
transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.smpm { align-items: baseline; }
.smpm .pmlogo { width: 9px; height: 9px; align-self: center; }
.smpm b { font-weight: 600; min-width: 5.2ch; text-align: center; }
.smpm:hover, .smpm:focus-visible { background: var(--pm-deep); border-color: var(--pm-deep); color: var(--pm-ink); outline: none; }
.smpm.pmflash { animation: smpmflash 1.4s ease-out; }
@keyframes smpmflash { from { box-shadow: 0 0 0 3px var(--pm-soft); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .smpm.pmflash { animation: none; } }
.smnone {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; min-height: 96px; padding: 14px 12px; text-align: center;
border: 1px dashed var(--line); border-radius: 10px; color: var(--text-3);
}
.smnone svg { width: 18px; height: 18px; margin-bottom: 4px; opacity: 0.8; }
.smnone b { font: 600 13px/1.3 var(--sans); color: var(--text-2); }
.smnone small { font: 500 11.5px/1.3 var(--sans); }
.smrail, .wteaser { display: none; }
@media (max-width: 720px) {
#matches:not(:empty) { margin-top: 14px; }
#matches:not(:empty) + .hero { padding-top: 28px; }
}
#matches.railonly { display: none; }
@media (min-width: 1440px) {
html:not(.norail) #matches:not(:empty), html:not(.norail) #matches.railonly {
display: block; position: absolute; top: -1px; bottom: 0;
left: 0; right: 0; margin: 0; min-height: 0; pointer-events: none;
}
html:not(.norail) main.wrap:has(> #matches .smrail) {
border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
margin-top: 20px; margin-bottom: 24px;
}
html:not(.norail) #matches:not(:empty) + .hero { padding-top: 40px; }
html:not(.norail) #matches .smstrip { display: none; }
html:not(.norail) #matches .smrail, html:not(.norail) #matches .wteaser {
display: block; position: absolute; top: 0; bottom: 0; width: var(--rail-w, 240px);
pointer-events: auto;
}
html:not(.norail) #matches .smrail {
width: min(var(--rail-w, 240px), 340px); right: calc(100% + 17px);
}
html:not(.norail) #matches .wteaser { left: calc(100% + 17px); }
html:not(.norail) main.wrap:has(> #matches .smrail) .toc { left: calc(100% + 41px); }
html:has(.acard.draft .toc) #matches .wteaser { display: none; }
.smstick {
position: sticky; top: calc(var(--bar) + 20px);
display: flex; flex-direction: column; gap: 12px;
max-height: calc(100vh - var(--bar) - 36px); overflow-y: auto; scrollbar-width: none;
}
.smstick::-webkit-scrollbar { display: none; }
.smpanel { padding: 9px 10px 10px; }
.smphead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.smtabs { display: flex; gap: 3px; margin: 8px 0 6px; }
.smtab {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
padding: 4px 0 3px; background: transparent; border: 1px solid transparent;
border-radius: 7px; color: var(--text-3);
transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.smtab small { font: 500 9px/1 var(--sans); letter-spacing: 0.06em; }
.smtab b { font: 600 13px/1.2 var(--display); }
.smtab:hover { color: var(--text-2); }
.smtab.on {
background: color-mix(in srgb, var(--text) 8%, transparent);
border-color: var(--line); color: var(--text);
}
.smlist { display: flex; flex-direction: column; gap: 5px; }
.smpanel .smlabel + .smlist { margin-top: 8px; }
.smrow { border-radius: 8px; }
.smrow .smrhead { padding: 4px 8px 3px; gap: 5px; font-size: 11px; }
.smrow .smteam { padding: 2px 8px; gap: 6px; font-size: 12.5px; }
.smrow .smteam:nth-of-type(2) { padding-top: 4px; }
.smrow .smteam:last-child { padding-bottom: 5px; }
.smrow .smteam .lg { width: 16px; height: 16px; }
.smrail, .wteaser { container-type: inline-size; }
.smrail .smseg { display: flex; margin: 8px 0 7px; }
.smrail .smseg button { flex: 1; }
}
@container (min-width: 300px) {
.smpanel { padding: 10px 12px 12px; }
.smrow .smrhead { padding: 5px 10px 4px; font-size: 11.5px; }
.smrow .smteam { padding: 3px 10px; gap: 8px; font-size: 13.5px; }
.smrow .smteam:nth-of-type(2) { padding-top: 5px; }
.smrow .smteam:last-child { padding-bottom: 6px; }
.smrow .smteam .lg { width: 18px; height: 18px; }
.smrow .smpm, .wtrow .smpm { font-size: 11.5px; }
}
@container (min-width: 340px) {
.smrow .smcode { display: none; }
.smrow .smname { display: block; }
}
.wtpanel { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.wttop { display: grid; gap: 12px; }
.wtleft { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wthead { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.wthead .navwlds { width: 28px; height: 28px; flex: none; }
.wtwords { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wtkick { font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.wtname { font: 600 22px/1 var(--display); letter-spacing: -0.03em; }
.wtcaps { display: flex; flex-wrap: wrap; gap: 6px; }
.wtfig {
position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: 5px;
padding: 6px 10px; border-radius: 999px; background: var(--lm-face); box-shadow: var(--lm-inner);
}
.wtfig b { font: 600 16px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wtfig:first-child b { background: var(--lm-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.wtfig.live b { background: none; color: var(--pos); }
.wtfig span { font: 500 9.5px/1 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); }
.wtfig::before, .wtgo::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
background: var(--lm-rim);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.wtfield { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px 4px; justify-items: center; text-decoration: none; }
.wtfield .lg { width: 100%; max-width: 24px; aspect-ratio: 1; height: auto; object-fit: contain; }
.wtfield .lg.none { border-radius: 50%; background: var(--track); transform: scale(0.78); }
@container (min-width: 400px) {
.wttop { grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; align-items: center; }
.wtfield { grid-template-columns: repeat(auto-fill, 22px); justify-content: end; gap: 6px; }
.wtfield .lg { width: 22px; max-width: none; }
}
.wtodds { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; column-gap: 10px; }
.wthd, .wtrow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.wthd { padding-bottom: 6px; }
.wthd .smlabel { grid-column: 1 / 3; white-space: nowrap; }
.wtcol {
justify-self: center; display: inline-flex; align-items: baseline; gap: 4px;
font: 600 9px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text-3); white-space: nowrap;
}
.wtcol img, .wtcol .pmlogo { flex: none; align-self: center; width: 11px; height: 11px; object-fit: contain; }
.wtcol .pmlogo { color: var(--pm); }
@container (max-width: 299px) { .wtcol > span { display: none; } }
.wtrow { padding: 6px 0; border-top: 1px solid var(--line); font: 500 13px/18px var(--sans); color: var(--text); }
.wtrow .lg { width: 18px; height: 18px; object-fit: contain; align-self: center; }
.wtrow .lg.none { border-radius: 50%; background: var(--track); transform: scale(0.78); }
.wtrow .smcode, .wtrow .smname {
grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.wtrow .smname { display: none; }
@container (min-width: 340px) {
.wtrow .smcode { display: none; }
.wtrow .smname { display: block; }
}
.wtmodel { justify-self: center; font: 600 13px/18px var(--sans); font-variant-numeric: tabular-nums; }
.wtrow .smpm, .wtnopm { justify-self: center; }
.wtgo {
position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 9px 12px; border-radius: 10px; background: var(--lm-face); box-shadow: var(--lm-inner);
color: var(--text); font: 600 12.5px/1 var(--sans); text-decoration: none;
transition: background var(--fast);
}
.wtgo svg { width: 14px; height: 14px; transition: transform var(--fast); }
.wtgo:hover, .wtgo:focus-visible { background: var(--lm-face-on); outline: none; }
.wtgo:hover svg, .wtgo:focus-visible svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .wtgo svg { transition: none; } }
.mphero { text-align: center; padding: 6px 0 14px; }
.mph1 {
position: absolute; width: 1px; height: 1px; margin: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.mpleague {
display: flex; align-items: center; justify-content: center; gap: 7px;
margin: 0 0 14px; font-size: 12.5px; color: var(--text-2);
}
.mpleague img.lg { width: 18px; height: 18px; object-fit: contain; }
.mpteams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.mpside {
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: inherit; text-decoration: none; min-width: 0;
}
.mpside img.bigmark { width: 72px; height: 72px; object-fit: contain; }
.mpside b { font: 600 20px/1.2 var(--display); letter-spacing: -0.01em; }
.mpside span { font-size: 12px; color: var(--text-3); letter-spacing: 0.04em; }
a.mpside:hover b { text-decoration: underline; }
.mpmid { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mpmid > b { font: 500 22px/1 var(--display); color: var(--text-3); }
.mpmid .mpscore { font: 500 36px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.mpstate { font: 500 10.5px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.mpprov { margin-left: 8px; font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 6px; vertical-align: 1px; }
.mprovnote { border-top: 1px solid var(--line); padding-top: 8px; }
.mpstate.live { color: var(--pos); }
.mpmid time { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mpnote { text-align: center; }
.mpsumline { margin: 0 0 12px; text-align: center; font: 500 15px/1.4 var(--sans); color: var(--text); }
.mpsumeven { color: var(--text-3); }
.mpsumcall { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 7px; white-space: nowrap; color: var(--text-3); }
.mpsumcall.hit { color: var(--pos); border-color: var(--pos-bg); background: var(--pos-bg); }
.mpsumsides { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; gap: 18px; }
.mpsumside .tablewrap table { width: 100%; }
.mpsumteam { margin: 0 0 6px; }
.mpsumteam .tm.named { width: auto; justify-content: flex-start; font-weight: 600; }
td.mpsumwho { text-align: left; font-weight: 600; white-space: nowrap; }
td.mpsumwho a { color: var(--text); text-decoration: none; }
td.mpsumwho a:hover { text-decoration: underline; }
td.mpsumch { white-space: nowrap; }
td.mpsumch .champ.icononly + .champ.icononly { margin-left: 3px; }
.mpsumside td:nth-child(n+4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 720px) {
td.mpsumlen, .mpsumgames th:last-child, td.mpsumkp, .mpsumside th:last-child { display: none; }
.mpsumgames th, .mpsumgames td, .mpsumside th, .mpsumside td { padding-left: 6px; padding-right: 6px; }
.mpsumgames table { width: auto; }
.mpsumgames th, .mpsumeven { white-space: normal; }
.mpsumgames th { vertical-align: bottom; }
.mpsumside td:nth-child(4) { word-spacing: -0.15em; }
td.mpsumch { white-space: normal; min-width: 66px; max-width: 70px; line-height: 0; }
td.mpsumch .champ.icononly img.portrait { width: 20px; height: 20px; }
td.mpsumch .champ.icononly { margin: 1px; }
td.mpsumch .champ.icononly + .champ.icononly { margin-left: 1px; }
}
.mptabs { margin: 0 auto 14px; }
.seg.mptabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mpstage .match.inline {
width: 100%; max-width: 640px; margin: 0 auto; padding: 0; border: 0; box-shadow: none;
background: transparent;
}
.mpstage .match.inline .mhead { display: none; }
.mpanalysis { display: flex; flex-direction: column; gap: 26px; }
.mpgame > .sechead { margin: 0 0 12px; gap: 10px; }
.mpwent { font: 400 12.5px/1.3 var(--sans); color: var(--text-3); white-space: nowrap; }
.mpdraft .mnote { text-align: center; }
.entpage .mpdraft .sechead { justify-content: flex-start; }
.entpage .mpdraft .sechead::before { content: none; }
.entpage .mpdraft .dscale .sechead { margin-top: 0; }
.mpfold { margin-top: 20px; border-top: 1px solid var(--line); }
.mpfold > summary {
display: flex; align-items: center; gap: 9px; padding: 12px 0; cursor: pointer; list-style: none;
font: 600 12px/1.2 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2);
}
.mpfold > summary::-webkit-details-marker { display: none; }
.mpfold > summary::before {
content: ""; width: 6px; height: 6px; margin: 0 2px 2px 3px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg); transition: transform var(--fast);
}
.mpfold[open] > summary::before { transform: rotate(45deg); margin-bottom: 4px; }
.mpfold > summary:hover { color: var(--text); }
.mpfold .dlanes { margin-top: 2px; }
@media (max-width: 680px) {
.mpgame > .sechead { flex-wrap: wrap; }
.mpwent { white-space: normal; }
}
.svout { margin: 4px 0 0; font: 500 12.5px/1.4 var(--sans); color: var(--text-2); }
.svout b { font-weight: 600; color: var(--side); }
.svoutk {
margin-right: 7px; font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-3);
}
.rend {
position: absolute; top: calc((100% - 16px) / 2); width: 0; pointer-events: none;
display: flex; flex-direction: column; align-items: center; gap: 3px;
transform: translateY(-100%);
}
.rendlab {
white-space: nowrap;
font: 500 11px/1 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums;
padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px;
background: color-mix(in srgb, var(--ground) 88%, transparent);
}
.rend.lo .rendlab { transform: translateX(calc(50% - 8px)); }
.rend.hi .rendlab { transform: translateX(calc(-50% + 8px)); }
.rendlab b { font-weight: 600; color: var(--side); }
.rendstem { display: block; width: 0; height: 22px; border-left: 1px dotted var(--text-2); }
.rendfoot {
display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--text-2);
margin-top: -1px; transform: translateY(50%);
}
.mplanes { display: flex; margin: 0 auto 18px; width: fit-content; max-width: 100%; }
.mplanes button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; }
.mplanes button .pos .oi.role { width: 15px; height: 15px; vertical-align: -3px; color: inherit; }
.mplanes button span:last-child { font-size: 12.5px; }
.mpwho .stpic.tm { align-items: center; }
.mpwho .stpic.tm img.lg { width: 64px; height: 64px; object-fit: contain; }
.mpduel {
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas: "wa vs wb" "ba vs bb"; align-items: center; gap: 10px 18px;
max-width: 760px; margin: 0 auto;
}
.mpwho { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.mpwho.a { grid-area: wa; }
.mpwho.b { grid-area: wb; }
.mpwho .stpic { margin-top: 0; height: 104px; }
.mpwho .stpic.none::before { width: 60px; height: 78px; }
.mpwho .mic { white-space: nowrap; }
.mpvs { grid-area: vs; border-collapse: collapse; align-self: center; }
.mpvs td, .mpvs th { padding: 5px 10px; text-align: center; white-space: nowrap; }
.mpvs th { font: 500 10.5px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.mpvs td { font: 500 16px/1.2 var(--display); color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 58px; }
.mpvs td.lead { color: var(--text); font-weight: 600; }
.mpvs tr + tr td, .mpvs tr + tr th { border-top: 1px solid var(--line); }
.mpbest { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; align-self: start; }
.mpbest.a { grid-area: ba; }
.mpbest.b { grid-area: bb; }
.mpbest .stpool { gap: 12px; }
.mpbest .stchamp .mic { font-size: 10.5px; }
.mpbl { letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.mpmeet {
display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "a rec b" "g g g" "gl gl gl";
align-items: center; gap: 4px 18px; margin: 2px 0 18px;
}
.mpflank { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: inherit; }
.mpflank:nth-child(1) { grid-area: a; justify-self: end; }
.mpflank:nth-child(3) { grid-area: b; justify-self: start; }
.mpflank img.lg { width: 32px; height: 32px; object-fit: contain; }
.mpflank .mic { font-weight: 600; letter-spacing: 0.06em; }
a.mpflank:hover .mic { color: var(--text); }
.mpmeet .mprec { grid-area: rec; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mprec b { font: 600 34px/1 var(--display); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mprec .mic, .mpgl { letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.n.trail { color: var(--text-3); font-weight: 500; }
.mpgames {
grid-area: g; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px;
font: 600 15px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--text);
}
.mpbar { display: flex; width: min(260px, 60%); height: 5px; border-radius: 3px; overflow: hidden; gap: 2px; }
.mpbar i { display: block; height: 100%; background: var(--text-3); opacity: 0.45; }
.mpbar .a { width: var(--a); }
.mpbar .b { flex: 1; }
.mpgames.alead .mpbar .a, .mpgames.blead .mpbar .b { background: var(--text); opacity: 1; }
.mpgl { grid-area: gl; text-align: center; }
.mpmore { display: flex; align-items: center; gap: 8px; margin: 8px auto 0; padding-left: 9px; }
.mpmore::before {
content: ""; width: 6px; height: 6px; margin: 0 2px 2px 3px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
}
.mpnone { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
td .lead { color: var(--text); font-weight: 600; }
.mpvenn {
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
gap: 6px 10px; margin: 0 0 16px;
}
.plab { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; white-space: nowrap; }
.plab.a { justify-self: end; }
.plab.m { justify-self: center; }
.plab.b { justify-self: start; }
.plab img.lg { width: 16px; height: 16px; object-fit: contain; }
.pside { display: flex; flex-wrap: wrap; align-items: start; gap: 6px 6px; }
.pside.a { justify-content: flex-end; }
.pside.b { justify-content: flex-start; }
.pboth {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 6px; min-width: 52px; max-width: 270px;
padding: 6px 8px 5px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent);
}
.pboth > .mic { align-self: center; padding: 4px 2px; white-space: nowrap; }
.pchip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 32px; }
.pchip .champ.icononly img.portrait { width: 30px; height: 30px; border-radius: 7px; }
.pchip a.champ:hover img.portrait { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.pchip > i { font: 600 10.5px/1 var(--sans); font-style: normal; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pboth .pchip > i { font-size: 9.5px; letter-spacing: -0.02em; }
.pboth .pchip { min-width: 40px; }
.pchip.banned::after {
content: ""; position: absolute; top: -4px; right: -3px; width: 11px; height: 11px; box-sizing: border-box;
border: 2px solid var(--neg); border-radius: 50%; background: var(--ground);
-webkit-mask: linear-gradient(135deg, #000 44%, transparent 44%, transparent 56%, #000 56%);
mask: linear-gradient(135deg, #000 44%, transparent 44%, transparent 56%, #000 56%);
}
@media (max-width: 600px) {
.mplanes button .lw { display: none; }
.mplanes button { padding: 6px 10px; }
.mpduel { grid-template-columns: 1fr 1fr; grid-template-areas: "wa wb" "vs vs" "ba bb"; gap: 10px 8px; }
.mpvs { width: 100%; }
.mpvs td, .mpvs th { padding: 4px 6px; }
.mpvs th { width: 40%; }
.mpvs td { font-size: 15px; }
.mpbest .stpool { gap: 8px; }
.mpmeet { gap: 4px 12px; }
.mpflank img.lg { width: 28px; height: 28px; }
.mprec b { font-size: 28px; }
.plab { font-size: 9px; letter-spacing: 0.04em; }
.pchip .champ.icononly img.portrait { width: 26px; height: 26px; }
.pchip { min-width: 28px; }
.pboth { max-width: 120px; }
}
.mpasks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mpboards {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.mpboards .mic { color: var(--text-3); margin-right: 4px; }
.mpboard { display: inline-flex; align-items: center; gap: 5px; padding-left: 9px; }
.mpboard > span:last-child { align-self: baseline; }
.mpboard .oi.role { width: 14px; height: 14px; }
@media (max-width: 520px) {
.mpboards { gap: 5px; }
.mpboards .mic { flex-basis: 100%; text-align: center; margin: 0 0 4px; }
.mpboard { gap: 4px; padding: 4px 8px 4px 6px; font-size: 12px; }
.mpboard .oi.role { width: 12px; height: 12px; }
}
.nextmatch {
display: flex; flex-direction: column; align-items: center; gap: 6px;
margin-left: auto; padding: 10px 18px 11px; flex: none; max-width: 50%;
border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
color: inherit; text-decoration: none;
transition: border-color var(--fast), background var(--fast);
}
.nextmatch:hover { border-color: var(--line-2); background: var(--s2); }
.nmlabel { font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.nmteams { display: flex; align-items: center; justify-content: center; gap: 12px; }
.nmside { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nmside:last-child { flex-direction: row-reverse; text-align: right; }
.nmside img.lg { width: 26px; height: 26px; object-fit: contain; flex: none; }
.nmside b { font: 600 14.5px/1.2 var(--display); letter-spacing: -0.01em; }
.nmside:first-child::after { content: "vs"; margin-left: 5px; font: 500 11px/1 var(--sans); color: var(--text-3); }
.nmline {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 8px;
font: 500 11.5px/1.3 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.nmline .tm.named { width: auto; }
.nmline .lgm img.lg { width: 14px; height: 14px; }
.nmline time { color: var(--text); }
.nmlive { color: var(--pos); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; }
.starters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.starter {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 8px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0;
}
.starter > .pos { position: absolute; top: 10px; left: 10px; }
.starter > .pos .oi.role { width: 16px; height: 16px; color: var(--text-2); }
a.stpic, a.bigpic { text-decoration: none; }
a.stpic:hover img { opacity: 1; }
.enthead .sub .pos + .pos { margin-left: -2px; }
.stpic {
position: relative; display: flex; align-items: flex-end; justify-content: center;
width: 100%; height: 96px; margin-top: 6px; overflow: hidden;
}
.stpic img {
display: block; max-width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.stpic.none::before, .bigpic.none::before {
content: ""; width: 56px; height: 72px; background: currentColor; color: var(--text-3); opacity: 0.22;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 112'%3E%3Ccircle cx='43' cy='30' r='24'/%3E%3Cpath d='M0 112c0-32 19-50 43-50s43 18 43 50z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 112'%3E%3Ccircle cx='43' cy='30' r='24'/%3E%3Cpath d='M0 112c0-32 19-50 43-50s43 18 43 50z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
.stname { max-width: 100%; }
.stpool.exline { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.exline b { font: 600 15px/1.2 var(--display); letter-spacing: -0.01em; }
.exline > span { font-size: 12.5px; color: var(--text-2); }
.exline .mic { flex-basis: 100%; text-align: center; }
.stname .tm.named { width: auto; max-width: 100%; }
.stname .tm.named > span { font: 600 15px/1.2 var(--display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stpool { display: flex; justify-content: center; gap: 10px; }
.stchamp { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.stchamp b { font: 600 11.5px/1 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.stpool .champ.icononly img.portrait { width: 30px; height: 30px; border-radius: 7px; }
.stpool a.champ:hover img.portrait { outline: 2px solid var(--accent-2); outline-offset: 1px; }
@media (max-width: 720px) {
.starters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stpic { height: 78px; }
.stname .tm.named > span { font-size: 13.5px; }
.enthead { flex-wrap: wrap; }
.nextmatch { margin: 4px 0 0; flex-basis: 100%; max-width: none; padding: 10px 14px; }
}
@media (max-width: 460px) {
.starters { gap: 6px; }
.starter { padding: 8px 4px 10px; }
.stpool { gap: 6px; }
.stpool .champ.icononly img.portrait { width: 26px; height: 26px; }
}
@media (max-width: 680px) {
.mpteams { gap: 10px; }
.mpside img.bigmark { width: 48px; height: 48px; }
.mpside b { font-size: 16px; }
.mpmid .mpscore { font-size: 28px; }
}
.pcharts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; align-items: start; }
.pchead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; text-align: left; margin: 0 0 10px; }
.pchead .entsel { margin-left: 0; }
.pplot { position: relative; min-height: 232px; }
.pplot svg { display: block; width: 100%; height: auto; overflow: visible; }
.pgrid { stroke: var(--line); fill: none; }
.ptick, .pmonth { font: 400 10.5px var(--sans); fill: var(--text-3); }
.ptick { font-variant-numeric: tabular-nums; }
.pbench { stroke: var(--text-2); stroke-width: 1px; fill: none; }
.plead { stroke: var(--text-3); stroke-width: 1px; fill: none; }
.pbenchlab { font: 500 10.5px var(--sans); fill: var(--text-2); }
.proll { stroke: var(--text); stroke-width: 2px; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.prollpt { fill: var(--text); }
.pband { opacity: 0.16; }
.pband.above { fill: var(--pos-fill); }
.pband.below { fill: var(--neg-fill); }
.pmark { fill: var(--accent); stroke: var(--ground); stroke-width: 2px; pointer-events: none; }
.pmark.edge { fill: var(--ground); stroke: var(--accent); stroke-width: 1.5px; }
.phit { fill: transparent; cursor: pointer; }
.pchnote { margin: 8px 0 0; min-height: 1.4em; font-size: 12px; color: var(--text-3); }
.pradar { width: 214px; flex: none; margin-left: auto; }
.pradar svg { display: block; width: 100%; height: auto; overflow: visible; }
.pradarsvg .pring { fill: none; stroke: var(--line); }
.pradarsvg .pring.median { stroke: var(--line-2); }
.paxis { stroke: var(--line); fill: none; }
.pshape { fill: var(--accent-2); fill-opacity: 0.16; stroke: var(--accent); stroke-width: 2px; stroke-linejoin: round; }
.pradlab { font: 500 10.5px var(--sans); fill: var(--text-2); cursor: help; }
.pplace { font: 600 9.5px var(--sans); fill: var(--accent-2); letter-spacing: 0.04em; }
.pradarsvg .phit { cursor: help; }
@media (max-width: 720px) {
.pradar { flex: 0 0 100%; width: 100%; margin: 4px 0 0; }
.pradar svg { max-width: 250px; margin-inline: auto; }
}
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pod {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 18px 12px 16px; border: 1px solid var(--line); border-radius: 14px; min-width: 0;
cursor: pointer; transition: border-color var(--fast), background var(--fast);
}
.pod:hover { border-color: var(--line-2); }
.pod.selected { border-color: var(--accent-2); background: var(--focus-bg); }
.podrank { position: absolute; top: 12px; left: 14px; font: 600 11px/1 var(--sans); letter-spacing: 0.08em; color: var(--text-3); }
.podpic { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.podring { position: absolute; inset: 0; width: 100%; height: 100%; }
.podring circle { fill: none; stroke-width: 4; }
.podring .track { stroke: var(--track); }
.podring .fill { stroke: var(--pos-fill); stroke-linecap: round; }
.podpic .champ.icononly img.portrait { width: 52px; height: 52px; border-radius: 50%; }
.podpic a.champ:hover img.portrait { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.podname .champ img.portrait { display: none; }
.podname .champ > span:last-child { font: 600 15.5px/1.2 var(--display); letter-spacing: -0.01em; }
.podrec { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.podrec b { font: 600 28px/1 var(--display); letter-spacing: -0.02em; }
.podrec span { font-size: 12px; color: var(--text-2); }
.podstats { display: flex; gap: 18px; margin-top: 4px; }
.podstat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.podstat b { font: 600 14px/1 var(--display); font-variant-numeric: tabular-nums; }
.podform { display: flex; gap: 3px; margin-top: 8px; }
.podform i { display: block; width: 9px; height: 9px; border-radius: 2px; cursor: pointer; opacity: 0.85; transition: transform var(--fast), opacity var(--fast); }
.podform i.w { background: var(--pos-fill); }
.podform i.l { background: var(--neg-fill); }
.podform i:hover { opacity: 1; transform: scale(1.3); }
.poolrows { margin-top: 16px; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.poolrow {
display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) 64px 56px 60px 66px; gap: 12px;
align-items: center; padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: background var(--fast);
}
.poolrow:hover { background: var(--focus-bg); }
.poolrow.selected { background: var(--pick-bg); }
.poolrow.head { cursor: default; padding-bottom: 2px; }
.poolrow.head:hover { background: none; }
.poolrow .mic { text-align: center; }
.poolrow .prname.mic { text-align: left; }
.prname { display: flex; justify-content: flex-start; min-width: 0; overflow: hidden; }
.prname .champ { min-width: 0; max-width: 100%; }
.prname .champ > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.prbar i { display: block; height: 8px; width: var(--v); min-width: 2px; border-radius: 0 4px 4px 0; background: var(--accent-2); opacity: 0.8; }
.poolrow .mic { white-space: nowrap; }
.prbar b { font: 500 12.5px/1 var(--sans); color: var(--text-2); }
.prnum { text-align: center; }
@media (max-width: 640px) {
.podium { gap: 8px; }
.pod { padding: 14px 6px 12px; gap: 4px; }
.podrank { top: 8px; left: 9px; }
.podpic { width: 60px; height: 60px; }
.podpic .champ.icononly img.portrait { width: 42px; height: 42px; }
.podname .champ > span:last-child { font-size: 13.5px; }
.podrec b { font-size: 22px; }
.podrec span { font-size: 11px; }
.podstats { flex-wrap: wrap; justify-content: center; gap: 4px 8px; max-width: 100%; }
.podstat b { font-size: 12.5px; }
.podstat .mic { font-size: 9px; }
.podform { flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.podform i { width: 7px; height: 7px; }
.poolrow { grid-template-columns: minmax(0, 1fr) 34px 42px 38px 40px 46px; gap: 5px; padding: 5px 2px; font-size: 12px; }
.poolrow .mic { font-size: 9px; letter-spacing: 0.05em; }
.prbar { display: block; text-align: center; }
.prbar i { display: none; }
.prbar b { font-size: 12px; color: var(--text); }
.entpage .prname .champ img.portrait { width: 20px; height: 20px; }
.enthead > div:not(.pradar) { flex: 1 1 0; min-width: 0; }
.plog th:nth-child(n + 7), .plog td:nth-child(n + 7) { display: none; }
.plog th, .plog td { padding: 7px 3px; }
.plog th { font-size: 9px; letter-spacing: 0.02em; }
.plog td.date { width: auto; }
.plog .champ > span:last-child { display: none; }
}
.dz { display: flex; flex-direction: column; gap: 28px; }
.dzblock { min-width: 0; }
.dzblock > .mic { display: block; margin-bottom: 10px; }
.pod.dpod { cursor: default; }
.pod.dpod:hover { border-color: var(--line); }
.dpod .podstats { gap: 22px; }
.dztwo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; align-items: start; }
.drows { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; font-size: 13px; }
.dz .podium + .drows { margin-top: 18px; }
.drow {
display: grid; grid-template-columns: minmax(84px, 145px) minmax(70px, 1fr) 44px 50px;
gap: 10px; align-items: center; padding: 5px 8px; border-radius: 8px;
transition: background var(--fast);
}
.drows.pool .drow { grid-template-columns: minmax(104px, 178px) minmax(120px, 1fr) 46px 52px 70px; }
.drow:not(.head) { cursor: help; }
.drow:not(.head):hover { background: var(--focus-bg); }
.drow.head { padding-bottom: 2px; }
.drow.head .mic { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow.head .mic:first-child { text-align: left; }
.drname { display: flex; align-items: center; min-width: 0; }
.drname .champ { min-width: 0; max-width: 100%; }
.drname .champ > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drbar { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 8px; min-width: 0; }
.drmeter {
--v: 0%; --ref: 0%; --mark: color-mix(in srgb, var(--text) 72%, transparent);
display: block; height: 9px; border-radius: 5px;
background:
linear-gradient(90deg, transparent 0 calc(var(--ref) - 1px), var(--mark) calc(var(--ref) - 1px) calc(var(--ref) + 1px), transparent calc(var(--ref) + 1px) 100%),
linear-gradient(90deg, var(--accent-2) 0 var(--v), var(--track) var(--v) 100%);
}
.drbar b { font: 600 12.5px/1 var(--display); text-align: right; }
.drlg, .drn, .drwon { text-align: right; white-space: nowrap; }
.drlg { color: var(--text-3); font-size: 12.5px; }
.drn { color: var(--text-2); font-size: 12.5px; }
.drwon { font-size: 12.5px; }
.drows .hot { color: var(--pos); font-weight: 500; }
.drows .cold { color: var(--neg); font-weight: 500; }
@media (max-width: 900px) {
.dztwo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
.dz { gap: 22px; }
.drow { grid-template-columns: minmax(70px, 1fr) minmax(44px, 1fr) 30px 36px; gap: 5px; padding: 5px 2px; font-size: 12px; }
.drows.pool .drow { grid-template-columns: minmax(64px, 1fr) minmax(40px, 1fr) 28px 32px 36px; }
.drbar { grid-template-columns: minmax(0, 1fr) 30px; gap: 5px; }
.drbar b { font-size: 11.5px; }
.drlg, .drn, .drwon { font-size: 11px; }
.drow.head .mic { font-size: 8.5px; letter-spacing: 0.04em; }
.entpage .drname .champ img.portrait { width: 20px; height: 20px; }
.dpod .podstats { gap: 4px 10px; }
}
.cmulanes { display: grid; width: fit-content; max-width: 100%; margin: 0 auto; }
.cmubox { min-width: 0; }
.cmubox + .cmubox { margin-top: 30px; }
.cmulane {
display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px;
font: 500 10.5px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.cmulane .pos { display: inline-flex; }
.cmubox .tablewrap { margin-top: 0; }
.cmubox table { min-width: 100%; }
.cmubox td { padding-top: 7px; padding-bottom: 7px; }
.cmubox td .champ img.portrait { width: 24px; height: 24px; border-radius: 6px; }
.cmubox td.cmuopp .champ { gap: 8px; font-weight: 500; }
.cmumeet { display: inline-grid; grid-template-columns: 84px 2.4em; align-items: center; gap: 8px; }
.cmumeet b { font: 600 13px/1 var(--display); text-align: left; font-variant-numeric: tabular-nums; }
.cmumeter {
display: block; height: 7px; border-radius: 4px;
background: linear-gradient(90deg, var(--accent-2) 0 var(--v), var(--track) var(--v) 100%);
}
.cmubox td.cmuwr { font-weight: 600; }
.cmubox .hot { color: var(--pos); }
.cmubox .cold { color: var(--neg); }
.cmubox td.cmudoor { padding-left: 14px; }
.cmudet { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; white-space: nowrap; }
.cmudet:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cmudet svg { width: 12px; height: 12px; flex: none; }
.cmubox .cmumore { margin-top: 6px; }
.cmupicks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.cmupick {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mic pct" "who pct" "rec pct";
align-items: center; gap: 6px 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line);
}
.cmupick .mic { grid-area: mic; }
.cmupick .champ { grid-area: who; gap: 8px; font-weight: 600; min-width: 0; }
.cmupick .champ img.portrait { width: 28px; height: 28px; border-radius: 7px; }
.cmupick b { grid-area: pct; font: 600 26px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cmupick .cmurec { grid-area: rec; justify-self: start; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: none; }
.cmupick .cmurec:hover { color: var(--text-2); text-decoration: underline; }
.cmupick.best { background: var(--pos-bg); border-color: color-mix(in srgb, var(--pos) 28%, var(--line)); }
.cmupick.worst { background: var(--neg-bg); border-color: color-mix(in srgb, var(--neg) 28%, var(--line)); }
.cmupick.best .mic, .cmupick.best b { color: var(--pos); }
.cmupick.worst .mic, .cmupick.worst b { color: var(--neg); }
@media (max-width: 640px) {
.cmudet { padding: 6px; }
.cmudet span { display: none; }
.cmubox th, .cmubox td { padding-left: 4px; padding-right: 4px; }
.cmubox td.cmudoor { padding-left: 4px; }
.cmubox table { width: auto; }
.cmubox th { white-space: normal; vertical-align: bottom; }
.cmumeet { grid-template-columns: auto; }
.cmumeter { display: none; }
.cmumeet b { text-align: center; }
.cmubox td .champ img.portrait { width: 20px; height: 20px; }
.cmupick { grid-template-areas: "mic mic" "who pct" "rec rec"; padding: 10px 12px; gap: 5px 8px; }
.cmupick .mic { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmupick .cmurec { white-space: nowrap; }
.cmupick b { font-size: 20px; }
.cmupick .champ img.portrait { width: 22px; height: 22px; }
}
@media (max-width: 380px) {
.cmupicks { grid-template-columns: minmax(0, 1fr); }
}
.cmpbtn {
--cmp-a: #3f6fcc; --cmp-b: #6570dd; --cmp-c: #8a93ec;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px 5px 9px; border-radius: 999px;
background: linear-gradient(115deg, var(--cmp-a) 0%, var(--cmp-b) 55%, var(--cmp-c) 100%);
color: #fff; text-decoration: none; white-space: nowrap;
font: 600 11.5px/1 var(--display); letter-spacing: 0.02em;
box-shadow: 0 1px 2px rgba(9, 9, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
transition: filter var(--fast), transform var(--fast), box-shadow var(--fast);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cmpbtn { --cmp-a: #22437f; --cmp-b: #444eab; --cmp-c: #5964cc; }
}
:root[data-theme="dark"] .cmpbtn { --cmp-a: #22437f; --cmp-b: #444eab; --cmp-c: #5964cc; }
.cmpbtn svg { width: 12px; height: 12px; flex: none; }
.cmpbtn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(47, 93, 179, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.cmpbtn:active { transform: none; }
.cmpbtn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.entpage td.cmp { padding-top: 5px; padding-bottom: 5px; }
.entpage td > .champ.icononly { vertical-align: middle; }
.entpage a.cmpbtn { color: #fff; }
.entpage a.cmpbtn:hover > span:last-child { text-decoration: none; }
.itz { display: flex; flex-direction: column; gap: 22px; margin-top: 14px; }
.itzsearch { display: flex; justify-content: center; }
.itzsearch .combo { flex: 0 1 420px; }
.itzsearch .cmenu { left: 50%; transform: translateX(-50%); max-width: min(360px, 92vw); }
.itz .islot {
display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0;
border-radius: 4px; background: var(--track); overflow: hidden; flex: none; cursor: pointer;
font: inherit; color: inherit; transition: outline-color var(--fast);
}
.itz .islot img.item { display: block; width: 100%; height: 100%; }
.itz .islot .iname { font-size: 8px; line-height: 1; color: var(--text-2); overflow: hidden; }
.itz .islot:hover, .itz .islot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.itz .islot.selected { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.itzblock > .mic { display: block; }
.itzcard {
display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin-inline: auto;
padding: 14px 16px 10px; border: 1px solid var(--line-2); border-radius: 14px;
}
.ichead { display: flex; align-items: center; gap: 12px; }
.icpic { position: relative; width: 60px; height: 60px; flex: none; display: grid; place-items: center; }
.icring { position: absolute; inset: 0; width: 100%; height: 100%; }
.icring circle { fill: none; stroke-width: 4; }
.icring .track { stroke: var(--track); }
.icring .fill { stroke: var(--accent-2); stroke-linecap: round; }
.icpic .islot, .icpic .islot img.item { width: 36px; height: 36px; border-radius: 8px; cursor: default; }
.icwho { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.icwho b { font: 600 17px/1.15 var(--display); letter-spacing: -0.02em; }
.icwho span { font-size: 12px; color: var(--text-2); }
.icclose {
margin-left: auto; align-self: flex-start; width: 26px; height: 26px; padding: 0; flex: none;
border: 0; border-radius: 50%; background: none; color: var(--text-3); font: 400 19px/1 var(--sans);
cursor: pointer; transition: background var(--fast), color var(--fast);
}
.icclose:hover { background: var(--s2); color: var(--text); }
.icstrip { border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.icrow {
display: grid; grid-template-columns: minmax(0, 1fr) 56px 80px; gap: 2px 10px;
align-items: baseline; padding: 7px 0 6px; border-bottom: 1px solid var(--line);
}
.icrow:last-child { border-bottom: 0; }
.iclabel { font-size: 13px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icrow.asked .iclabel { color: var(--text); font-weight: 500; }
.icval { font: 600 17px/1 var(--display); letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.icnum { font-size: 12.5px; color: var(--text-2); text-align: right; white-space: nowrap; }
.ishelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.itile {
display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
padding: 14px 6px 12px; border: 1px solid var(--line); border-radius: 12px;
cursor: pointer; transition: border-color var(--fast), background var(--fast);
}
.itile:hover { border-color: var(--line-2); }
.itile.selected { border-color: var(--accent-2); background: var(--focus-bg); }
.itile .islot, .itile .islot img.item { width: 40px; height: 40px; border-radius: 8px; }
.itile .islot .iname { font-size: 9px; }
.itile.selected .islot, .itile:hover .islot { outline: none; }
.itname { max-width: 100%; margin-top: 4px; font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itile > b { margin-top: 4px; font: 600 22px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.itwon { margin-top: 4px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.itgames { font-size: 11px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.itz .hot { color: var(--pos); font-weight: 500; }
.itz .cold { color: var(--neg); font-weight: 500; }
.itztwo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; align-items: start; }
.itztwo .itzblock { min-width: 0; }
.irows { display: flex; flex-direction: column; margin-top: 10px; font-variant-numeric: tabular-nums; font-size: 13px; }
.irow {
display: grid; grid-template-columns: minmax(0, 1fr) 104px 74px; gap: 10px; align-items: center;
padding: 5px 8px; border-radius: 8px; cursor: pointer; transition: background var(--fast);
}
.irow:hover { background: var(--focus-bg); }
.irow.selected { background: var(--pick-bg); }
.irname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.irname > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irbar { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; gap: 6px; }
.irbar i {
--v: 0%; display: block; height: 8px; border-radius: 4px;
background: linear-gradient(90deg, var(--pos-fill) 0 var(--v), var(--track) var(--v) 100%);
}
.irbar b { font: 600 12.5px/1 var(--display); text-align: right; }
.irnum { text-align: right; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.ibuilds { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ibuild { display: flex; align-items: center; gap: 14px; padding: 6px 8px; border-radius: 8px; }
.ibuild .ibox { gap: 3px; flex: none; }
.ibuild .islot .iname { font-size: 7px; }
.ibn { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.ibn b { font: 600 14px/1 var(--display); color: var(--text); }
.ibw { margin-left: auto; font-size: 12.5px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.itztwo { grid-template-columns: minmax(0, 1fr); }
.ishelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.itile { padding: 12px 4px 10px; }
.itile > b { font-size: 19px; }
.itwon { font-size: 11px; }
.itgames { font-size: 10px; }
.irow { grid-template-columns: minmax(0, 1fr) 92px 66px; padding: 5px 4px; }
.ibuild { gap: 10px; flex-wrap: wrap; }
.cmpbtn { padding: 4px 9px 4px 7px; font-size: 11px; gap: 5px; }
}
@media (max-width: 480px) {
.cmpbtn { padding: 6px; gap: 0; border-radius: 50%; }
.cmpbtn svg { width: 13px; height: 13px; }
.cmpbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.whero { text-align: center; margin: 4px 0 0; }
.wkick { display: block; font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.whero h1 { margin: 10px 0 0; font: 600 60px/1 var(--display); letter-spacing: -0.04em; }
.wclock { display: inline-flex; align-items: baseline; gap: 10px; margin: 18px 0 0; padding: 10px 22px; border: 1px solid var(--line); border-radius: 999px; }
.wclock b { font: 600 30px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wclock b i { font: 600 14px/1 var(--sans); font-style: normal; letter-spacing: 0.04em; color: var(--text-2); margin-left: 2px; }
.wclock span { font: 500 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.wclock.live b { color: var(--pos); }
.wcaps { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.wcaps .wclock { margin: 0; }
.wstat { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.wstat b { font: 600 22px/1 var(--display); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.wsec { margin-top: 40px; }
.wsec .sechead { position: relative; }
.wsec .sechead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wtools { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; padding-left: 10px; background: var(--ground); }
.wtool {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
background: transparent; border: 1px solid var(--line-2); border-radius: 6px;
font: 600 11px/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
color: var(--text-2); text-decoration: none; cursor: pointer;
transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.wtool:hover { color: var(--text); border-color: var(--text-2); }
.wline { margin: 10px auto 0; max-width: 640px; text-align: center; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.wtabs { display: flex; justify-content: center; margin: 18px auto 0; width: max-content; max-width: 100%; }
.wtabs { margin-top: 36px; }
.wtabs button { padding: 6px 16px; }
.wtabs button { white-space: nowrap; }
.wlenses { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px 24px; margin: 18px auto 0; }
.wlgroup { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.wlgroup .seg { margin: 0; }
.wlgroup button { white-space: nowrap; }
.wtray { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px auto 0; }
.wslot { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px dashed var(--line-2); border-radius: 999px; background: transparent; color: var(--text-3); font: 500 12px/1 var(--sans); cursor: pointer; transition: border-color var(--fast), background var(--fast), color var(--fast); }
.wslot i { width: 18px; height: 18px; border-radius: 50%; background: var(--track); color: var(--text-2); font: 700 10px/18px var(--sans); font-style: normal; text-align: center; flex: none; }
.wslot span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.wslot img.lg { width: 18px; height: 18px; object-fit: contain; }
.wslot:hover { border-color: var(--text-2); color: var(--text-2); }
.wslot.on { border-style: solid; border-color: var(--accent-2); background: var(--accent-bg); color: var(--text); }
.wslot.on i { background: var(--accent-2); color: #fff; }
.wslot.on:hover { border-color: var(--neg); }
.wband { margin-top: 26px; }
.wband h3 { margin: 0 0 12px; text-align: center; font: 600 15px/1.3 var(--display); letter-spacing: -0.01em; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wband h3 span { margin-top: 2px; }
.wgroups { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; }
.wgroup {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 10px; border: 1px solid var(--line); border-radius: 16px;
}
.wglabel { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); }
.wglabel .tm.named { width: auto; }
.wglabel .lgm img.lg { width: 16px; height: 16px; }
.wseats { display: flex; gap: 8px; }
.wtile {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
width: 78px; padding: 12px 6px 9px; background: transparent; border: 1px solid var(--line); border-radius: 12px;
color: var(--text); font: 500 12px/1 var(--sans); cursor: pointer;
transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.wtile:hover, .wtile:focus-visible, .wtile.lit { border-color: var(--text-2); background: var(--s2); outline: none; }
.wtile.a, .wtile.b { border-color: var(--accent-2); background: var(--accent-bg); }
.wtile.a::after, .wtile.b::after {
content: "A"; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
background: var(--accent-2); color: #fff; font: 700 10px/18px var(--sans); text-align: center;
box-shadow: 0 0 0 2px var(--ground);
}
.wtile.b::after { content: "B"; }
.wtile .wseed { position: absolute; top: 5px; left: 7px; font: 500 9.5px/1 var(--sans); color: var(--text-3); }
.wtile .wmark { width: 34px; height: 34px; object-fit: contain; }
.wtile .wcode { font: 600 12px/1 var(--sans); letter-spacing: 0.02em; max-width: 100%; white-space: nowrap; }
.wglabel .tm.named > span:last-child { overflow: visible; text-overflow: clip; }
.wtile .wlv { font: 500 11.5px/1 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.wtile .wbar { --fill: var(--accent-2); display: block; width: 100%; height: 4px; margin: 2px 0 0; border-radius: 2px; }
.wtile.empty { border-style: dashed; cursor: default; color: var(--text-3); justify-content: center; min-height: 105px; box-sizing: border-box; }
.wtile.empty .wcode { color: var(--text-2); white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
.wtile.empty .wwhen { font: 500 11px/1 var(--sans); color: var(--text-3); }
.wpops { display: none; }
.wdock { min-height: 240px; margin: 22px auto 0; max-width: 720px; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 14px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.wdock > .mpnone { margin: 0; }
.wpop { display: none; width: 100%; text-align: left; }
.wpop.shown { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px; align-items: start; }
.wpop.empty.shown { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 8px; }
.wpop .wphead, .wpop .wpath, .wpop .wtiles.model { grid-column: 1 / -1; }
.wpop .wtiles.league, .wpop .wtiles.intl { grid-column: 1; }
.wpop .wbands { grid-column: 2; margin: 0; }
.wpop .wdoors { grid-column: 2; margin: 0; justify-content: flex-end; align-self: end; }
.wphead { display: flex; align-items: center; gap: 12px; }
.wphead .wmark { width: 40px; height: 40px; object-fit: contain; flex: none; }
.wphead > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wphead b { font: 600 17px/1.2 var(--display); }
.wname { color: inherit; text-decoration: none; font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.wname:hover { text-decoration: underline; }
.wpath { margin: -6px 0 0; line-height: 1.6; white-space: normal; }
.wpath:empty { display: none; }
.wtiles { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start; }
.wtiles .wthead { flex: 0 0 100%; }
.wtiles .stat { align-items: flex-start; min-width: 0; gap: 5px; }
.wtiles .stat b { font-size: 19px; }
.wtiles .stat b i { font-size: 10px; margin-left: 4px; vertical-align: 6px; }
.wtiles .stat .mic { white-space: nowrap; }
.wtiles .stat .mic .wtrend { font-size: 10px; letter-spacing: 0; text-transform: none; margin-left: 4px; }
.wtiles .fstrip { margin: 0; gap: 2px; }
.wtiles .fdot, .wrun .fdot { width: 9px; height: 9px; border-radius: 2px; font-size: 0; cursor: default; }
.wbands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wbcap { grid-column: 1 / -1; margin-bottom: 2px; }
.wlb { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wlb b { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.wbar { --fill: var(--accent-2); display: block; height: 6px; margin: 0; border-radius: 3px; }
.wdoors { display: flex; gap: 6px; }
.wrunhead { margin: 8px 0 4px; }
.wrun { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.wrun .tm.named { width: auto; margin: 0; justify-content: flex-start; }
.wrun b { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.wpanel { margin-top: 22px; }
.wcmpform { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.wvs { font: 500 11px/1 var(--sans); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.wcmp { margin-top: 18px; }
.wchead2 { display: flex; align-items: center; justify-content: center; gap: 28px; }
.wcside { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.wcside .bigmark { width: 56px; height: 56px; object-fit: contain; }
.wcside b { font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; }
.wdoor { display: flex; justify-content: center; margin: 14px 0 6px; }
.wcmp section { margin-top: 26px; }
.wmeta { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; margin-top: 16px; }
.wmcol h3 { margin: 0 0 8px; text-align: center; font: 600 15px/1.3 var(--display); display: flex; flex-direction: column; gap: 3px; }
.wmcol h3 span { margin-top: 2px; }
.wchrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 90px 44px auto; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.wchrow img.portrait { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.wchname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wchname .wname { font-size: 13.5px; }
.wchname .mic { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wchrow.short { grid-template-columns: 28px minmax(0, 1fr) 80px 44px; }
.wchrow > b { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.wwas { white-space: nowrap; }
.wscale { font: 600 10px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.wscale.scales { color: var(--pos); }
.wrounds { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; width: max-content; max-width: 100%; margin-inline: auto; }
.wround { flex: none; width: 200px; }
.wsec h3.wsth { margin: 22px 0 8px; text-align: center; justify-content: center; }
.wmatch { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; font-size: 12.5px; }
a.wmatch:hover { border-color: var(--line-2); background: var(--s2); }
.wside { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wside:last-child { flex-direction: row-reverse; }
.wside img.lg { width: 18px; height: 18px; object-fit: contain; flex: none; }
.wside span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wside b { font-variant-numeric: tabular-nums; }
.wside.lost { color: var(--text-3); }
.wside.lost img.lg { opacity: 0.45; filter: grayscale(0.5); }
@media (max-width: 900px) {
.wmeta { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.whero h1 { font-size: 42px; }
.wsec .sechead { flex-wrap: wrap; }
.wtools { position: static; transform: none; order: 1; width: 100%; justify-content: center; padding: 8px 0 0; }
.wtabs { width: auto; overflow-x: auto; justify-content: flex-start; }
.wgroups { gap: 12px 16px; }
.wseats { flex-wrap: wrap; justify-content: center; }
.wtile { width: 72px; }
.wdock { min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wdock::before { display: none; }
.wdock > .mpnone { padding: 14px; }
.wpop.shown { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr; gap: 14px; max-height: 78vh; overflow-y: auto; padding: 16px 16px 24px; box-sizing: border-box; background: var(--ground); border-top: 1px solid var(--line-2); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.35); }
.wpop .wphead, .wpop .wpath, .wpop .wtiles, .wpop .wbands, .wpop .wdoors { grid-column: 1; }
.wpop .wdoors { justify-content: flex-start; }
.wpop .wclose { display: flex; }
.wchrow { grid-template-columns: 26px minmax(0, 1fr) 70px 40px; }
.wchrow .wscale { display: none; }
.wchead2 { gap: 16px; }
.wcside .bigmark { width: 44px; height: 44px; }
}
.wpop .wclose { display: none; position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-2); font-size: 20px; cursor: pointer; }
@property --sw0 { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --sw1 { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --sw2 { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.wmodel { margin-top: 18px; }
.wknobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 36px; max-width: 720px; margin: 0 auto 18px; padding: 14px 20px 10px; border-radius: 14px; }
.wknob { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 12px; }
.wknob .wdname { grid-row: 1; font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.wknob input[type="range"] { --p: 0%; grid-column: 2; -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }
.wknob input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--lm-mid) 0 var(--p), var(--lm-groove) var(--p) 100%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
.wknob input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--lm-mid) 0 var(--p), var(--lm-groove) var(--p) 100%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.wknob input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 0; border-radius: 50%; background: var(--lm-bead); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--fast); }
.wknob input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--lm-bead); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.25); }
.wknob input[type="range"]:hover::-webkit-slider-thumb, .wknob input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.wknob input[type="range"]:focus-visible { outline: none; }
.wknob input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-bg), 0 1px 3px rgba(0, 0, 0, 0.5); }
.wticks { grid-column: 2; display: flex; justify-content: space-between; padding: 0 4px; }
.wticks i { font: 500 10.5px/1 var(--sans); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); cursor: pointer; transition: color var(--fast); }
.wticks i.on { color: var(--text); }
.wproj { min-width: 0; transition: opacity var(--fast); }
.wmodel.busy .wproj { opacity: 0.72; }
.wwl { margin: 0 0 12px; text-align: center; font: 500 11.5px/1.5 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.wcrown { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px 18px; padding: 16px 20px; margin-bottom: 14px; border-radius: 14px; }
.wcrown.swap { animation: wswap 420ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes wswap { from { opacity: 0.2; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.wcmark { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.wcrname { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wcrname .wname { font-size: 20px; }
.wcrfig { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; align-self: last baseline; }
.wcrfig b { font: 600 26px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wcrname + .wcrfig b { font-size: 34px; }
.wtbd { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lm-groove); color: var(--text-3); font: 600 11px/1 var(--sans); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.wcmark.wtbd { font-size: 22px; }
.wrows { list-style: none; margin: 0; padding: 0; }
.wrow { display: grid; grid-template-columns: 22px 26px minmax(72px, 0.9fr) 92px minmax(120px, 2fr) 84px 84px; align-items: center; gap: 12px; padding: 7px 4px; border-top: 1px solid var(--line); transition: transform var(--move), opacity var(--move), background var(--fast); border-radius: 6px; }
.wrating { display: flex; align-items: baseline; gap: 6px; cursor: help; }
.wrating b { font: 600 14px/1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.wtrend { font: 600 10.5px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wtrend.up { color: var(--pos); }
.wtrend.down { color: var(--neg); }
.wtrend.flat { color: var(--text-3); }
.wunfilled { display: grid; grid-template-columns: 22px 26px minmax(72px, 0.9fr) 92px minmax(120px, 2fr) 84px 84px; align-items: center; gap: 12px; margin: 0; padding: 7px 4px; border-top: 1px solid var(--line); color: var(--text-3); }
.wunfilled .wrname b { color: var(--text-2); }
.wunfilled .wt8 { grid-column: 6; }
.wunfilled .wwin { grid-column: 7; }
.wunfilled .wt8 b, .wunfilled .wwin b { color: var(--text-2); }
.wodds { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 10px 0 0; font: 600 15px/1 var(--display); font-variant-numeric: tabular-nums; }
.wodds .wob5 { margin-left: 10px; font: 500 12px/1 var(--sans); color: var(--text-2); }
.wrow:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.wrow.born { opacity: 0; }
.wrank { font: 600 11px/1 var(--sans); color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.wrmark { width: 26px; height: 26px; object-fit: contain; }
.wrow .wtbd { width: 26px; height: 26px; }
.wrname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wrname b { font: 600 13px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrname .mic { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wswiss { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--lm-hi) 0 var(--sw0), var(--lm-mid) var(--sw0) var(--sw1), var(--lm-lo) var(--sw1) var(--sw2), var(--track) var(--sw2) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.35); transition: --sw0 var(--move), --sw1 var(--move), --sw2 var(--move); }
.wt8, .wwin { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wt8 .mic, .wwin .mic { white-space: nowrap; }
.wrhead {
display: grid; grid-template-columns: 22px 26px minmax(72px, 0.9fr) 92px minmax(120px, 2fr) 84px 84px;
align-items: end; gap: 12px; padding: 0 4px 8px;
font: 600 10px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.wrhead .wt8, .wrhead .wwin { display: block; text-align: center; }
.wkey { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.wkeyl { display: flex; align-items: center; gap: 4px; letter-spacing: 0.04em; }
.wkeyl i { width: 8px; height: 8px; border-radius: 2px; margin-left: 6px; }
.wkeyl .k0 { margin-left: 0; background: var(--lm-hi); }
.wkeyl .k1 { background: var(--lm-mid); }
.wkeyl .k2 { background: var(--lm-lo); }
.wrow .wt8 .mic, .wrow .wwin .mic, .wunfilled .wwin .mic {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.wt8 b, .wwin b { font: 600 13.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
.wwin b { font-size: 15px; }
:root {
--lm-hi: #262a34; --lm-mid: #6b7280; --lm-lo: #b4bac6;
--lm-fill: linear-gradient(180deg, #5f6675, #2d323d 55%, #40465380);
--lm-ink: #ffffff;
--lm-groove: rgba(9, 9, 11, 0.12);
--lm-bead: radial-gradient(circle at 35% 30%, #ffffff, #cfd4dc 45%, #7d8593 100%);
--lm-rim: conic-gradient(from 200deg, rgba(9, 9, 11, 0.42), rgba(9, 9, 11, 0.08) 28%, rgba(9, 9, 11, 0.34) 52%, rgba(9, 9, 11, 0.06) 76%, rgba(9, 9, 11, 0.42));
--lm-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.7));
--lm-face: linear-gradient(160deg, rgba(9, 9, 11, 0.045), rgba(9, 9, 11, 0.01) 45%, rgba(9, 9, 11, 0.035));
--lm-face-on: linear-gradient(160deg, rgba(9, 9, 11, 0.10), rgba(9, 9, 11, 0.03) 45%, rgba(9, 9, 11, 0.07));
--lm-inner: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(9, 9, 11, 0.06);
--lm-text: linear-gradient(100deg, #1a1d24 0%, #5b6170 18%, #0f1116 36%, #6b7280 52%, #16171c 70%, #4b5160 86%, #1a1d24 100%);
--lm-spec: rgba(255, 255, 255, 0.55);
}
:root[data-theme="dark"] {
--lm-hi: #eef1f6; --lm-mid: #a3abb9; --lm-lo: #5f6776;
--lm-fill: linear-gradient(180deg, #f4f6fa, #c3c9d4 55%, #9aa2b1);
--lm-ink: #0c0d11;
--lm-groove: rgba(255, 255, 255, 0.08);
--lm-bead: radial-gradient(circle at 35% 30%, #ffffff, #c9cfd9 45%, #6f7787 100%);
--lm-rim: conic-gradient(from 200deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.07) 28%, rgba(255, 255, 255, 0.4) 52%, rgba(255, 255, 255, 0.05) 76%, rgba(255, 255, 255, 0.55));
--lm-glass: linear-gradient(160deg, rgba(30, 32, 38, 0.72), rgba(16, 17, 20, 0.6) 50%, rgba(24, 26, 31, 0.7));
--lm-face: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.055));
--lm-face-on: linear-gradient(160deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.11));
--lm-inner: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
--lm-text: linear-gradient(100deg, #c9ced8 0%, #ffffff 18%, #8b93a3 36%, #f4f6fa 52%, #a5adbb 70%, #ffffff 86%, #c9ced8 100%);
--lm-spec: rgba(255, 255, 255, 0.16);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--lm-hi: #eef1f6; --lm-mid: #a3abb9; --lm-lo: #5f6776;
--lm-fill: linear-gradient(180deg, #f4f6fa, #c3c9d4 55%, #9aa2b1);
--lm-ink: #0c0d11;
--lm-groove: rgba(255, 255, 255, 0.08);
--lm-bead: radial-gradient(circle at 35% 30%, #ffffff, #c9cfd9 45%, #6f7787 100%);
--lm-rim: conic-gradient(from 200deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.07) 28%, rgba(255, 255, 255, 0.4) 52%, rgba(255, 255, 255, 0.05) 76%, rgba(255, 255, 255, 0.55));
--lm-glass: linear-gradient(160deg, rgba(30, 32, 38, 0.72), rgba(16, 17, 20, 0.6) 50%, rgba(24, 26, 31, 0.7));
--lm-face: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.055));
--lm-face-on: linear-gradient(160deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.11));
--lm-inner: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
--lm-text: linear-gradient(100deg, #c9ced8 0%, #ffffff 18%, #8b93a3 36%, #f4f6fa 52%, #a5adbb 70%, #ffffff 86%, #c9ced8 100%);
--lm-spec: rgba(255, 255, 255, 0.16);
}
}
.navwlds {
display: inline-block; width: 16px; height: 16px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12.2 24C12.1 23.9 12.1 23.1 12.1 22.1L12.1 20.3L13.3 19.6C14.5 18.9 15.4 18.4 15.4 18.4C15.4 18.4 15.4 18.5 14.8 19.3C13.9 20.4 13.1 21.8 12.5 23.3C12.2 23.9 12.2 24 12.2 24ZM5.1 19.8C4.4 19.7 3.8 19 3.8 18.3C3.8 17.9 4 17.6 4.3 17.2C5.1 16.5 8.9 13.4 9.2 13.3C9.4 13.2 11.2 13.2 11.3 13.2C11.4 13.3 10.9 13.5 9.6 14.3L9 14.7L9 15.3L8.9 15.9L8.2 17C6.6 19.2 6.3 19.5 6 19.7C5.8 19.8 5.4 19.8 5.1 19.8ZM18.5 19.8C18.1 19.6 17.9 19.5 17 18.2C16.8 17.9 16.3 17.3 16 16.8L15.4 15.9L15.4 15.3L15.3 14.7L14.6 14.2C13.1 13.4 13 13.3 13 13.2C13.1 13.2 14.7 13.2 15 13.2C15.2 13.3 15.2 13.3 16 13.9C17.7 15.2 19.7 17 20.1 17.4C20.4 17.7 20.5 18.2 20.4 18.7C20.2 19.4 19.3 20 18.5 19.8ZM12 19.4C11.7 19.3 11.3 19.1 10.3 18.5L9.5 18.1L9.5 16.5L9.5 15L10.1 14.7C10.4 14.5 11 14.2 11.4 14C11.8 13.7 12.1 13.5 12.1 13.5C12.2 13.5 12.5 13.7 12.8 13.9C14.3 14.8 14.7 15 14.7 15.1C14.8 15.2 14.8 16.6 14.8 17.5L14.8 18.1L14.1 18.4C13.8 18.6 13.2 18.9 12.9 19.1C12.6 19.3 12.2 19.5 12.2 19.5C12.2 19.5 12.1 19.5 12 19.4ZM12.1 15.3L12.1 14.6L12 14.6C11.9 14.6 10.8 15.1 10.7 15.3L10.6 15.3L10.7 15.4C10.8 15.4 11.1 15.7 11.4 15.9L12.1 16.3L12.1 16.2C12.1 16.2 12.1 15.8 12.1 15.3ZM18.4 15.1C17.4 14.3 16.2 13.3 15.8 13C15.5 12.8 15.4 12.7 15.2 12.7C15.1 12.7 14.4 12.7 13.6 12.7L12.1 12.6L11.9 12.3C11.2 11.4 10.4 10.7 9.5 10.3C9.2 10.1 9.2 10.2 9.3 9.6C9.8 7.9 10.4 6.9 11.2 6.8C11.4 6.7 11.6 6.7 12.1 6.9C12.1 6.9 12.1 6.9 12.1 6.1C12.1 4.8 12.1 4.8 12.6 5C13.4 5.2 13.6 5.6 14.6 7.8C14.9 8.7 15.2 9.3 15.5 9.9L15.8 10.4L15.3 11C15.1 11.3 14.8 11.6 14.8 11.6C14.8 11.6 14.8 11.6 14.8 11.7C14.8 11.7 15.4 11.8 16.2 11.9C17.2 12 17.6 12.1 17.6 12.1C17.6 12.1 17.6 12.3 17.5 12.4C17.4 12.6 17.4 12.7 17.4 12.7C17.4 12.8 17.5 12.9 18.5 13.8C19.4 14.6 20.7 15.7 20.7 15.7C20.7 15.8 20.7 15.8 20.4 15.8C20.2 15.8 19.9 15.8 19.7 15.9C19.6 15.9 19.4 15.9 19.4 15.9C19.3 15.9 18.9 15.5 18.4 15.1ZM3.5 14.8C2.6 13.3 2 12.2 1.5 10.7C1 8.9 0.7 7.5 0.5 5.2C0.5 4.2 0.5 3.9 0.4 3.2L0.4 2.4L2 2.4L3.6 2.4L4 1.6C4.5 0.8 4.9 0.2 5 0.1C5-0 5 0 6 1.1C6.9 2.1 7.2 2.4 7.4 2.4C7.5 2.3 7.7 2.1 7.9 1.8C8.3 1.3 8.7 0.8 8.9 0.6L9.1 0.4L9.7 0.9C10 1.1 10.3 1.3 10.3 1.3C10.3 1.3 10.4 1.3 10.5 1.2C11.6 0.6 12.8 0.7 13.8 1.3L13.9 1.3L14 1.3C14.1 1.2 14.3 1 14.6 0.8C15.1 0.5 15.1 0.5 15.2 0.5C15.3 0.6 15.9 1.3 16.4 1.9C16.7 2.4 16.8 2.4 17 2.3C17.2 2.2 17.6 1.8 18.1 1.2C18.8 0.5 19.2 0 19.2 0C19.3 0 19.8 0.9 20.4 2.1L20.6 2.4L22.2 2.4L23.8 2.4L23.8 2.6C23.8 2.8 23.8 3.1 23.8 3.5C23.6 7.5 23.2 10 22.1 12.4C21.6 13.4 20.8 14.8 20.6 14.9C20.5 14.9 20.3 14.8 20.1 14.6L19.9 14.4L20.1 14C21 12.6 21.6 11.1 22 9.8C22.5 8.2 22.7 6.2 22.8 4.3L22.8 3.3L21.4 3.3L20 3.3L19.7 2.8C19.4 2.1 19.1 1.7 19.1 1.7C19 1.6 18.8 1.9 18.1 2.7L17.6 3.3L16.8 3.3L16.1 3.3L16 3.1C15.8 2.7 15.3 2 15.1 1.8L15 1.7L15 1.8C14.9 1.8 14.7 2 14.4 2.2L13.9 2.5L13.8 2.5C13.3 2 12.8 1.8 12.2 1.8C11.6 1.7 11.1 1.9 10.5 2.4C10.4 2.5 10.3 2.5 10.3 2.5C10.3 2.5 10.1 2.4 9.9 2.3C9.5 1.9 9.3 1.8 9.2 1.8C9.1 1.8 8.5 2.6 8.2 3.1L8.1 3.3L7.4 3.3L6.7 3.3L6.2 2.7C5.7 2.1 5.2 1.6 5.2 1.7C5.1 1.7 4.9 2.1 4.5 2.8L4.2 3.3L3.6 3.3C3.3 3.3 2.7 3.3 2.2 3.3L1.4 3.3L1.4 3.8C1.5 5.7 1.6 6.6 1.8 7.6C2.2 10.1 2.9 12 4.2 14.1C4.4 14.3 4.5 14.6 4.6 14.7L4.6 14.8L4.6 14.8C4.5 14.9 4 15.4 3.9 15.4C3.9 15.4 3.7 15.1 3.5 14.8ZM5 13.7C4.3 12.6 3.6 11.1 3.2 9.9C3 9.1 2.7 8 2.8 8C2.8 8 3 8.2 3.3 8.5C3.5 8.8 3.8 9 3.8 9C3.8 9 3.7 8.7 3.6 8.4C3.5 7.9 3.3 7.4 3.3 7C3.1 6.2 2.9 4.5 3 4.4C3.1 4.4 3.4 4.3 4 4.3L4.5 4.3L4.8 3.7C5 3.3 5.2 3.1 5.2 3.1C5.2 3.1 5.3 3.5 5.4 4C5.5 5 5.6 5.2 5.7 5.8C6 6.8 6.4 7.6 6.8 7.9C6.9 8 6.9 7.9 6.8 7.7C6.6 6.9 6.5 5.8 6.4 4.9L6.4 4.3L7.6 4.3C8.5 4.3 8.8 4.3 8.8 4.3C8.8 3.8 9.1 3 9.3 2.8C9.4 2.8 9.5 2.9 10 3.2C10.5 3.6 10.6 3.7 10.6 3.6C10.6 3.4 11 3 11.3 2.8C11.8 2.5 12.5 2.5 13 2.8C13.2 2.9 13.5 3.3 13.5 3.4C13.6 3.7 13.7 3.6 14.2 3.2C14.5 3 14.7 2.9 14.8 2.8C14.9 2.8 14.9 2.8 15 2.8C15.2 3 15.4 3.9 15.5 4.3C15.5 4.3 15.7 4.3 16.6 4.3L17.8 4.3L17.8 4.5C17.8 4.6 17.8 4.8 17.8 5C17.8 5.8 17.7 6.5 17.5 7.3C17.4 7.5 17.4 7.8 17.4 7.9L17.4 8L17.4 7.9C17.6 7.8 18 7.1 18.2 6.7C18.5 6 18.8 4.8 18.9 3.6C19 3.2 19 3.1 19 3.1C19.1 3.1 19.2 3.4 19.5 3.9L19.7 4.3L20.3 4.3C20.7 4.4 21 4.4 21.1 4.4L21.2 4.4L21.2 4.9C21.2 6.1 20.9 7.7 20.5 8.6C20.5 8.8 20.4 9 20.4 9C20.4 9 20.5 8.9 21 8.5C21.3 8.2 21.5 8 21.5 8C21.5 8.1 21.1 9.9 20.8 10.5C20.4 11.8 19.4 13.7 19.2 13.7C19.1 13.7 17.9 12.7 17.9 12.7C17.9 12.7 18 12.5 18.2 12.2C18.3 11.9 18.4 11.7 18.4 11.7C18.4 11.7 18.1 11.6 17.1 11.5C16 11.4 15.8 11.3 15.7 11.3C15.7 11.3 15.8 11.1 16 10.8C16.2 10.6 16.2 10.5 16.2 10.5C16.2 10.4 16.1 10 15.8 9.4C15.5 8.8 15.3 8.3 14.9 7.5C14.2 5.7 13.9 5.2 13.4 4.8C12.7 4.4 11.9 4.3 11.3 4.8C10.7 5.2 10.3 5.8 9.5 7.9C9 8.8 8.9 9.2 8.6 9.8L8.3 10.4L8.6 10.9C8.8 11.2 9 11.4 9 11.5C9.1 11.6 9.1 11.6 7.7 11.8C6.3 12 6.3 12 6.3 12C6.3 12.1 6.4 12.2 6.5 12.4C6.7 12.8 6.7 12.8 6.4 13.1C6.2 13.3 5.3 14.1 5.3 14.1C5.3 14.1 5.1 13.9 5 13.7ZM13.3 11.5C13.6 11.3 13.9 11.1 14.4 10.9C15 10.6 15 10.6 14.9 10.4C14.9 10.2 14.8 10.2 14.6 10.3C14.2 10.5 13.6 11 13.2 11.4C12.7 11.8 12.8 11.9 13.3 11.5ZM12.4 10.4C12.5 10.3 12.7 10.2 12.7 10.1C12.7 9.9 12.9 9.4 13.1 9C13.4 8.7 13.5 8.3 13.5 7.9L13.5 7.9L12.1 7.9L10.8 7.9L10.8 8.1C10.9 8.5 11 8.7 11.2 9.1C11.4 9.4 11.5 9.7 11.6 9.9C11.7 10.4 12 10.5 12.4 10.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12.2 24C12.1 23.9 12.1 23.1 12.1 22.1L12.1 20.3L13.3 19.6C14.5 18.9 15.4 18.4 15.4 18.4C15.4 18.4 15.4 18.5 14.8 19.3C13.9 20.4 13.1 21.8 12.5 23.3C12.2 23.9 12.2 24 12.2 24ZM5.1 19.8C4.4 19.7 3.8 19 3.8 18.3C3.8 17.9 4 17.6 4.3 17.2C5.1 16.5 8.9 13.4 9.2 13.3C9.4 13.2 11.2 13.2 11.3 13.2C11.4 13.3 10.9 13.5 9.6 14.3L9 14.7L9 15.3L8.9 15.9L8.2 17C6.6 19.2 6.3 19.5 6 19.7C5.8 19.8 5.4 19.8 5.1 19.8ZM18.5 19.8C18.1 19.6 17.9 19.5 17 18.2C16.8 17.9 16.3 17.3 16 16.8L15.4 15.9L15.4 15.3L15.3 14.7L14.6 14.2C13.1 13.4 13 13.3 13 13.2C13.1 13.2 14.7 13.2 15 13.2C15.2 13.3 15.2 13.3 16 13.9C17.7 15.2 19.7 17 20.1 17.4C20.4 17.7 20.5 18.2 20.4 18.7C20.2 19.4 19.3 20 18.5 19.8ZM12 19.4C11.7 19.3 11.3 19.1 10.3 18.5L9.5 18.1L9.5 16.5L9.5 15L10.1 14.7C10.4 14.5 11 14.2 11.4 14C11.8 13.7 12.1 13.5 12.1 13.5C12.2 13.5 12.5 13.7 12.8 13.9C14.3 14.8 14.7 15 14.7 15.1C14.8 15.2 14.8 16.6 14.8 17.5L14.8 18.1L14.1 18.4C13.8 18.6 13.2 18.9 12.9 19.1C12.6 19.3 12.2 19.5 12.2 19.5C12.2 19.5 12.1 19.5 12 19.4ZM12.1 15.3L12.1 14.6L12 14.6C11.9 14.6 10.8 15.1 10.7 15.3L10.6 15.3L10.7 15.4C10.8 15.4 11.1 15.7 11.4 15.9L12.1 16.3L12.1 16.2C12.1 16.2 12.1 15.8 12.1 15.3ZM18.4 15.1C17.4 14.3 16.2 13.3 15.8 13C15.5 12.8 15.4 12.7 15.2 12.7C15.1 12.7 14.4 12.7 13.6 12.7L12.1 12.6L11.9 12.3C11.2 11.4 10.4 10.7 9.5 10.3C9.2 10.1 9.2 10.2 9.3 9.6C9.8 7.9 10.4 6.9 11.2 6.8C11.4 6.7 11.6 6.7 12.1 6.9C12.1 6.9 12.1 6.9 12.1 6.1C12.1 4.8 12.1 4.8 12.6 5C13.4 5.2 13.6 5.6 14.6 7.8C14.9 8.7 15.2 9.3 15.5 9.9L15.8 10.4L15.3 11C15.1 11.3 14.8 11.6 14.8 11.6C14.8 11.6 14.8 11.6 14.8 11.7C14.8 11.7 15.4 11.8 16.2 11.9C17.2 12 17.6 12.1 17.6 12.1C17.6 12.1 17.6 12.3 17.5 12.4C17.4 12.6 17.4 12.7 17.4 12.7C17.4 12.8 17.5 12.9 18.5 13.8C19.4 14.6 20.7 15.7 20.7 15.7C20.7 15.8 20.7 15.8 20.4 15.8C20.2 15.8 19.9 15.8 19.7 15.9C19.6 15.9 19.4 15.9 19.4 15.9C19.3 15.9 18.9 15.5 18.4 15.1ZM3.5 14.8C2.6 13.3 2 12.2 1.5 10.7C1 8.9 0.7 7.5 0.5 5.2C0.5 4.2 0.5 3.9 0.4 3.2L0.4 2.4L2 2.4L3.6 2.4L4 1.6C4.5 0.8 4.9 0.2 5 0.1C5-0 5 0 6 1.1C6.9 2.1 7.2 2.4 7.4 2.4C7.5 2.3 7.7 2.1 7.9 1.8C8.3 1.3 8.7 0.8 8.9 0.6L9.1 0.4L9.7 0.9C10 1.1 10.3 1.3 10.3 1.3C10.3 1.3 10.4 1.3 10.5 1.2C11.6 0.6 12.8 0.7 13.8 1.3L13.9 1.3L14 1.3C14.1 1.2 14.3 1 14.6 0.8C15.1 0.5 15.1 0.5 15.2 0.5C15.3 0.6 15.9 1.3 16.4 1.9C16.7 2.4 16.8 2.4 17 2.3C17.2 2.2 17.6 1.8 18.1 1.2C18.8 0.5 19.2 0 19.2 0C19.3 0 19.8 0.9 20.4 2.1L20.6 2.4L22.2 2.4L23.8 2.4L23.8 2.6C23.8 2.8 23.8 3.1 23.8 3.5C23.6 7.5 23.2 10 22.1 12.4C21.6 13.4 20.8 14.8 20.6 14.9C20.5 14.9 20.3 14.8 20.1 14.6L19.9 14.4L20.1 14C21 12.6 21.6 11.1 22 9.8C22.5 8.2 22.7 6.2 22.8 4.3L22.8 3.3L21.4 3.3L20 3.3L19.7 2.8C19.4 2.1 19.1 1.7 19.1 1.7C19 1.6 18.8 1.9 18.1 2.7L17.6 3.3L16.8 3.3L16.1 3.3L16 3.1C15.8 2.7 15.3 2 15.1 1.8L15 1.7L15 1.8C14.9 1.8 14.7 2 14.4 2.2L13.9 2.5L13.8 2.5C13.3 2 12.8 1.8 12.2 1.8C11.6 1.7 11.1 1.9 10.5 2.4C10.4 2.5 10.3 2.5 10.3 2.5C10.3 2.5 10.1 2.4 9.9 2.3C9.5 1.9 9.3 1.8 9.2 1.8C9.1 1.8 8.5 2.6 8.2 3.1L8.1 3.3L7.4 3.3L6.7 3.3L6.2 2.7C5.7 2.1 5.2 1.6 5.2 1.7C5.1 1.7 4.9 2.1 4.5 2.8L4.2 3.3L3.6 3.3C3.3 3.3 2.7 3.3 2.2 3.3L1.4 3.3L1.4 3.8C1.5 5.7 1.6 6.6 1.8 7.6C2.2 10.1 2.9 12 4.2 14.1C4.4 14.3 4.5 14.6 4.6 14.7L4.6 14.8L4.6 14.8C4.5 14.9 4 15.4 3.9 15.4C3.9 15.4 3.7 15.1 3.5 14.8ZM5 13.7C4.3 12.6 3.6 11.1 3.2 9.9C3 9.1 2.7 8 2.8 8C2.8 8 3 8.2 3.3 8.5C3.5 8.8 3.8 9 3.8 9C3.8 9 3.7 8.7 3.6 8.4C3.5 7.9 3.3 7.4 3.3 7C3.1 6.2 2.9 4.5 3 4.4C3.1 4.4 3.4 4.3 4 4.3L4.5 4.3L4.8 3.7C5 3.3 5.2 3.1 5.2 3.1C5.2 3.1 5.3 3.5 5.4 4C5.5 5 5.6 5.2 5.7 5.8C6 6.8 6.4 7.6 6.8 7.9C6.9 8 6.9 7.9 6.8 7.7C6.6 6.9 6.5 5.8 6.4 4.9L6.4 4.3L7.6 4.3C8.5 4.3 8.8 4.3 8.8 4.3C8.8 3.8 9.1 3 9.3 2.8C9.4 2.8 9.5 2.9 10 3.2C10.5 3.6 10.6 3.7 10.6 3.6C10.6 3.4 11 3 11.3 2.8C11.8 2.5 12.5 2.5 13 2.8C13.2 2.9 13.5 3.3 13.5 3.4C13.6 3.7 13.7 3.6 14.2 3.2C14.5 3 14.7 2.9 14.8 2.8C14.9 2.8 14.9 2.8 15 2.8C15.2 3 15.4 3.9 15.5 4.3C15.5 4.3 15.7 4.3 16.6 4.3L17.8 4.3L17.8 4.5C17.8 4.6 17.8 4.8 17.8 5C17.8 5.8 17.7 6.5 17.5 7.3C17.4 7.5 17.4 7.8 17.4 7.9L17.4 8L17.4 7.9C17.6 7.8 18 7.1 18.2 6.7C18.5 6 18.8 4.8 18.9 3.6C19 3.2 19 3.1 19 3.1C19.1 3.1 19.2 3.4 19.5 3.9L19.7 4.3L20.3 4.3C20.7 4.4 21 4.4 21.1 4.4L21.2 4.4L21.2 4.9C21.2 6.1 20.9 7.7 20.5 8.6C20.5 8.8 20.4 9 20.4 9C20.4 9 20.5 8.9 21 8.5C21.3 8.2 21.5 8 21.5 8C21.5 8.1 21.1 9.9 20.8 10.5C20.4 11.8 19.4 13.7 19.2 13.7C19.1 13.7 17.9 12.7 17.9 12.7C17.9 12.7 18 12.5 18.2 12.2C18.3 11.9 18.4 11.7 18.4 11.7C18.4 11.7 18.1 11.6 17.1 11.5C16 11.4 15.8 11.3 15.7 11.3C15.7 11.3 15.8 11.1 16 10.8C16.2 10.6 16.2 10.5 16.2 10.5C16.2 10.4 16.1 10 15.8 9.4C15.5 8.8 15.3 8.3 14.9 7.5C14.2 5.7 13.9 5.2 13.4 4.8C12.7 4.4 11.9 4.3 11.3 4.8C10.7 5.2 10.3 5.8 9.5 7.9C9 8.8 8.9 9.2 8.6 9.8L8.3 10.4L8.6 10.9C8.8 11.2 9 11.4 9 11.5C9.1 11.6 9.1 11.6 7.7 11.8C6.3 12 6.3 12 6.3 12C6.3 12.1 6.4 12.2 6.5 12.4C6.7 12.8 6.7 12.8 6.4 13.1C6.2 13.3 5.3 14.1 5.3 14.1C5.3 14.1 5.1 13.9 5 13.7ZM13.3 11.5C13.6 11.3 13.9 11.1 14.4 10.9C15 10.6 15 10.6 14.9 10.4C14.9 10.2 14.8 10.2 14.6 10.3C14.2 10.5 13.6 11 13.2 11.4C12.7 11.8 12.8 11.9 13.3 11.5ZM12.4 10.4C12.5 10.3 12.7 10.2 12.7 10.1C12.7 9.9 12.9 9.4 13.1 9C13.4 8.7 13.5 8.3 13.5 7.9L13.5 7.9L12.1 7.9L10.8 7.9L10.8 8.1C10.9 8.5 11 8.7 11.2 9.1C11.4 9.4 11.5 9.7 11.6 9.9C11.7 10.4 12 10.5 12.4 10.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.navcb {
display: inline-block; width: 16px; height: 16px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.6a7.6 7.6 0 1 1 0 15.2a7.6 7.6 0 1 1 0-15.2ZM12 3.2a6 6 0 1 0 0 12a6 6 0 1 0 0-12ZM7.7 9.4a4.3 4.3 0 0 1 3.7-4.3c.5-.1.9.3.9.8s-.3.8-.7.8a2.7 2.7 0 0 0-2.3 2.7c0 .4-.4.8-.8.8s-.8-.3-.8-.8ZM7.3 22.4h9.4c.7 0 1.1-.7.8-1.3l-1.2-2.2a1 1 0 0 0-.9-.5H8.6a1 1 0 0 0-.9.5l-1.2 2.2c-.3.6.1 1.3.8 1.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.6a7.6 7.6 0 1 1 0 15.2a7.6 7.6 0 1 1 0-15.2ZM12 3.2a6 6 0 1 0 0 12a6 6 0 1 0 0-12ZM7.7 9.4a4.3 4.3 0 0 1 3.7-4.3c.5-.1.9.3.9.8s-.3.8-.7.8a2.7 2.7 0 0 0-2.3 2.7c0 .4-.4.8-.8.8s-.8-.3-.8-.8ZM7.3 22.4h9.4c.7 0 1.1-.7.8-1.3l-1.2-2.2a1 1 0 0 0-.9-.5H8.6a1 1 0 0 0-.9.5l-1.2 2.2c-.3.6.1 1.3.8 1.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.navnew {
position: relative; top: -1px; flex: none; padding: 2px 4px; border-radius: 999px;
font: 700 7.5px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
color: #fff; background: var(--accent-2);
}
.wtile, .wclock, .wstat, .seg.liquid, .wdock, .wknobs, .wcrown, .wpop.shown, .wmatch { position: relative; isolation: isolate; border-color: transparent; }
.wtile::before, .wclock::before, .wstat::before, .seg.liquid::before, .wdock::before, .wknobs::before, .wcrown::before, .wmatch::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
background: var(--lm-rim);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.wtile { background: var(--lm-face); box-shadow: var(--lm-inner); }
.wtile:hover, .wtile:focus-visible, .wtile.lit { background: var(--lm-face-on); transform: translateY(-1px); }
.wtile.a, .wtile.b { background: var(--accent-bg); }
.wtile.empty { background: transparent; box-shadow: none; }
.wtile.empty::before { opacity: 0.45; }
.wtile .wmark { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.wclock, .wstat, .wknobs, .wcrown { background: var(--lm-face); box-shadow: var(--lm-inner); }
.wclock b { background: var(--lm-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.wclock.live b { background: none; color: var(--pos); }
.wcrname + .wcrfig b { background: var(--lm-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.wliquid { background: var(--lm-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wsheen 9s linear infinite; }
@keyframes wsheen { from { background-position: 0% 0; } to { background-position: 220% 0; } }
.seg.liquid { background: var(--lm-glass); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: var(--lm-inner), 0 4px 14px rgba(0, 0, 0, 0.12); border-radius: 10px; }
.seg.liquid.thumbed button { position: relative; z-index: 1; }
.seg.liquid.thumbed button.on { background: transparent; border-color: transparent; box-shadow: none; }
.seg.liquid .thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 7px; background: var(--lm-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.28); transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity var(--fast); will-change: transform; }
.seg.liquid.thumbed button.on { color: var(--lm-ink); }
.seg.liquid.thumbed button.on:hover { color: var(--lm-ink); }
.wdock { background: var(--lm-glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: var(--lm-inner), 0 10px 30px rgba(0, 0, 0, 0.12); }
.wchrow img.portrait { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45); }
.wphead .wmark, .wcside .bigmark { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.wchrow, .wrun, .wrow { border-top-color: transparent; background-image: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent); background-size: 100% 1px; background-repeat: no-repeat; background-position: top; }
.wrow:hover { background-image: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent), linear-gradient(color-mix(in srgb, var(--text) 4%, transparent), color-mix(in srgb, var(--text) 4%, transparent)); background-size: 100% 1px, 100% 100%; }
@media (prefers-reduced-motion: reduce) {
.wliquid { animation: none; }
.seg.liquid .thumb { transition: none; }
.wcrown.swap { animation: none; }
}
@media (max-width: 900px) {
.wknobs { grid-template-columns: 1fr; }
.wcrown { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
.wcrown .wcrfig:last-child { display: none; }
.wcmark { width: 52px; height: 52px; }
}
@media (max-width: 720px) {
.wrow, .wrhead { grid-template-columns: 18px 24px minmax(60px, 1fr) 66px minmax(50px, 1.2fr) 78px; gap: 8px; }
.wrow .wt8, .wrhead .wt8, .wkeyl { display: none; }
.wrating { flex-direction: column; gap: 3px; }
.wknob { grid-template-columns: 1fr; }
.wknob input[type="range"], .wticks { grid-column: 1; }
.wcrown { padding: 14px; gap: 6px 12px; }
.wcrfig b { font-size: 22px; }
.wcrname + .wcrfig b { font-size: 28px; }
.wcrname .wname { font-size: 17px; }
.wcaps { gap: 8px; }
.wclock { flex-wrap: wrap; justify-content: center; row-gap: 4px; padding: 10px 16px; }
.wclock b { font-size: 26px; }
.wstat { padding: 8px 14px; }
}
@media (max-width: 520px) {
.wcrown { grid-template-columns: 44px repeat(2, minmax(0, 1fr)); }
.wcmark { width: 44px; height: 44px; }
.wcrname { grid-column: 2 / -1; }
.wcrfig { grid-row: 2; align-items: flex-start; }
.wcrname + .wcrfig { grid-column: 2; }
.wcrname + .wcrfig + .wcrfig { grid-column: 3; }
}
@media (max-width: 720px) {
.wdock { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wdock::before { display: none; }
.wdock { isolation: auto; }
.wpop.shown { position: fixed; isolation: auto; }
.wpop .wclose { display: flex; }
.wunfilled { grid-template-columns: 18px 24px minmax(60px, 1fr) 66px minmax(50px, 1.2fr) 78px; gap: 8px; }
.wunfilled .wt8 { display: none; }
.wunfilled .wwin { grid-column: 6; }
}
.wseat { position: relative; display: flex; }
.wpriced .wgroups { row-gap: 30px; }
.wpriced .wseats { padding-bottom: 8px; }
.wpmtag {
position: absolute; left: 50%; bottom: -11px; z-index: 3; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px;
border: 1px solid var(--pm-line); background: var(--ground); color: var(--pm); text-decoration: none;
font: 600 11px/1 var(--sans); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
box-shadow: 0 1px 3px var(--pm-soft);
transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.wpmtag .pmlogo { width: 10px; height: 10px; }
.wpmtag:hover, .wpmtag:focus-visible, .wtile.lit + .wpmtag {
background: var(--pm); border-color: var(--pm); color: var(--pm-ink);
transform: translate(-50%, -1px); box-shadow: 0 6px 14px -6px var(--pm-glow); outline: none;
}
.wpmtag.inline { position: static; transform: none; box-shadow: none; }
.wpmtag.inline:hover, .wpmtag.inline:focus-visible { transform: none; }
.wtile .wbar[data-sign="pm"] { --fill: var(--pm); }
.wtile .wbar[data-sign="ink"] { --fill: var(--text); }
.wstat.wpmcap { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); text-decoration: none; transition: color var(--fast), background var(--fast), transform var(--fast); }
.wstat.wpmcap b { color: var(--pm); }
.wstat.wpmcap .pmlogo { width: 16px; height: 16px; color: var(--pm); }
.wstat.wpmcap:hover, .wstat.wpmcap:focus-visible { background: var(--pm); color: var(--pm-ink); transform: translateY(-1px); outline: none; }
.wstat.wpmcap:hover b, .wstat.wpmcap:hover .pmlogo, .wstat.wpmcap:focus-visible b, .wstat.wpmcap:focus-visible .pmlogo { color: var(--pm-ink); }
.wpop .wtiles.market { grid-column: 1 / -1; align-items: flex-end; row-gap: 14px; }
.wthead .pmlogo, .wrunhead .pmlogo, .wrhead .wpmc .pmlogo { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; color: var(--pm); }
.pmbuy.sm { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 30px 10px 14px; border-radius: 12px; }
.pmbuy.sm b { font-size: 24px; line-height: 1; }
.pmbuy.sm::after { top: 50%; right: 11px; transform: translateY(-50%); }
.pmbuy.sm:hover::after, .pmbuy.sm:focus-visible::after { transform: translate(1px, calc(-50% - 1px)); }
.wpmcol .wrow, .wpmcol .wrhead, .wpmcol .wunfilled { grid-template-columns: 22px 26px minmax(72px, 0.9fr) 92px minmax(120px, 2fr) 76px 76px 82px; }
.wpmc { display: flex; justify-content: center; }
.wrhead .wpmc { display: block; text-align: center; color: var(--pm); white-space: nowrap; }
@media (max-width: 720px) {
.wpmcol .wrow, .wpmcol .wrhead, .wpmcol .wunfilled { grid-template-columns: 18px 24px minmax(60px, 1fr) 66px minmax(50px, 1.2fr) 78px; }
.wpmc { display: none; }
.wrhead .wpmc { display: none; }
}
:root { --pm: #1652f0; --pm-deep: #0f43cf; --pm-ink: #ffffff; --pm-soft: rgba(22, 82, 240, 0.22); --pm-bg: rgba(22, 82, 240, 0.08); --pm-line: rgba(22, 82, 240, 0.32); --pm-glow: rgba(22, 82, 240, 0.55); --model-ink: var(--text); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --pm: #6d94ff; --pm-deep: #8eacff; --pm-ink: #08090a; --pm-soft: rgba(109, 148, 255, 0.26); --pm-bg: rgba(109, 148, 255, 0.12); --pm-line: rgba(109, 148, 255, 0.38); --pm-glow: rgba(109, 148, 255, 0.45); --model-ink: #c3c7cf; }
}
:root[data-theme="dark"] { --pm: #6d94ff; --pm-deep: #8eacff; --pm-ink: #08090a; --pm-soft: rgba(109, 148, 255, 0.26); --pm-bg: rgba(109, 148, 255, 0.12); --pm-line: rgba(109, 148, 255, 0.38); --pm-glow: rgba(109, 148, 255, 0.45); --model-ink: #c3c7cf; }
.pmlogo {
display: inline-block; width: 15px; height: 15px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='430 474 1227 1227'%3E%3Cpath transform='translate(0 2184) scale(.1 -.1)' d='M10445 15709 c-2667 -764 -4860 -1391 -4872 -1394 l-23 -5 0 -3345 0 -3344 23 -7 c79 -25 9722 -2782 9724 -2780 2 1 2 2761 1 6133 l-3 6129 -4850 -1387z m3915 -1910 c0 -1939 -1 -2041 -17 -2037 -160 43 -7100 2032 -7105 2037 -7 6 7068 2037 7105 2040 16 1 17 -102 17 -2040z m-4263 -1806 c1976 -565 3591 -1028 3590 -1029 -4 -4 -7141 -2045 -7169 -2051 l-28 -5 0 2056 c0 1131 3 2056 8 2056 4 0 1623 -462 3599 -1027z m4263 -3864 l0 -2041 -27 5 c-16 3 -1617 460 -3560 1016 -1942 556 -3535 1011 -3539 1011 -4 0 -4 3 0 7 5 6 7095 2040 7119 2042 4 1 7 -918 7 -2040z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='430 474 1227 1227'%3E%3Cpath transform='translate(0 2184) scale(.1 -.1)' d='M10445 15709 c-2667 -764 -4860 -1391 -4872 -1394 l-23 -5 0 -3345 0 -3344 23 -7 c79 -25 9722 -2782 9724 -2780 2 1 2 2761 1 6133 l-3 6129 -4850 -1387z m3915 -1910 c0 -1939 -1 -2041 -17 -2037 -160 43 -7100 2032 -7105 2037 -7 6 7068 2037 7105 2040 16 1 17 -102 17 -2040z m-4263 -1806 c1976 -565 3591 -1028 3590 -1029 -4 -4 -7141 -2045 -7169 -2051 l-28 -5 0 2056 c0 1131 3 2056 8 2056 4 0 1623 -462 3599 -1027z m4263 -3864 l0 -2041 -27 5 c-16 3 -1617 460 -3560 1016 -1942 556 -3535 1011 -3539 1011 -4 0 -4 3 0 7 5 6 7095 2040 7119 2042 4 1 7 -918 7 -2040z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pmbuy::after, .pmbdoor::after {
content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 11L11 5M6.5 5H11v4.5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 11L11 5M6.5 5H11v4.5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: opacity var(--fast), transform var(--fast);
}
.pmmove { font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pmmove.up { color: var(--pos); }
.pmmove.down { color: var(--neg); }
.pmmove.flat { color: var(--text-3); }
.pmtri { display: inline-block; width: 0.62em; height: 0.52em; margin-right: 0.14em; vertical-align: 0.1em; background: currentColor; }
.pmmove.up .pmtri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pmmove.down .pmtri { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pmflash { animation: pmflash 1.4s ease-out; }
@keyframes pmflash { from { background-color: var(--pm-soft); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .pmflash { animation: none; } }
.pmseries { display: grid; row-gap: 10px; max-width: 760px; margin: 0 auto; }
.pmrow { display: grid; grid-template-columns: 104px minmax(0, 1fr) 104px; column-gap: 20px; }
.pmbuy, .pmfig, .pmtrack {
position: relative; display: grid; grid-template-rows: 11px 28px 9px; row-gap: 3px; align-items: center; justify-items: center;
min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 12px;
}
.pmtrack { justify-items: stretch; padding-inline: 0; }
.pmtrack .pmsplit { grid-row: 2; }
.pmrow .mic { line-height: 11px; white-space: nowrap; }
.pmcap { font: 600 8.5px/9px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; opacity: 0.72; }
.pmbuy {
border-color: var(--pm-line); background: var(--pm-bg); color: var(--pm); text-decoration: none; cursor: pointer;
transition: transform var(--fast), background var(--fast), color var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.pmbuy::after { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; opacity: 0.55; }
.pmbuy b, .pmfig b { font: 600 25px/28px var(--display); letter-spacing: -0.03em; }
.pmbuy b { color: inherit; }
.pmbuyk { display: inline-flex; align-items: center; gap: 4px; font: 600 10px/11px var(--sans); letter-spacing: 0.09em; text-transform: uppercase; }
.pmbuyk .pmlogo { width: 11px; height: 11px; }
.pmbuy:hover, .pmbuy:focus-visible { transform: translateY(-2px); background: var(--pm); border-color: var(--pm); color: var(--pm-ink); box-shadow: 0 14px 30px -14px var(--pm-glow); outline: none; }
.pmbuy:hover::after, .pmbuy:focus-visible::after { opacity: 1; transform: translate(1px, -1px); }
.pmfig { border-color: var(--line-2); }
.pmfig b { color: var(--text-2); }
.pmfig.lead b { color: var(--text); }
.pmfig .pmcap { color: var(--text-3); opacity: 1; }
.pmword {
grid-row: 1; align-self: end; justify-self: center; margin-bottom: -7px;
display: inline-flex; align-items: center; gap: 6px; font: 600 13px/14px var(--display); letter-spacing: -0.005em;
white-space: nowrap; color: var(--text); text-decoration: none;
}
a.pmword { color: var(--pm); }
a.pmword:hover { text-decoration: underline; }
.pmword .pmlogo, .pmword img { width: 14px; height: 14px; object-fit: contain; }
.pmlive { grid-row: 3; justify-self: center; display: inline-flex; align-items: center; gap: 5px; font: 600 8.5px/9px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.pmlive i { width: 6px; height: 6px; border-radius: 50%; background: #e0483c; animation: livepulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pmlive i { animation: none; } }
.pmsplit { display: flex; gap: 2px; height: 8px; }
.pmsplit i { display: block; height: 100%; background: var(--pm-soft); }
.pmsplit .a { width: var(--a); border-radius: 4px 0 0 4px; }
.pmsplit .b { flex: 1; border-radius: 0 4px 4px 0; }
.pmsplit.alead .a, .pmsplit.blead .b { background: var(--pm); }
.pmsplit.ink i { background: var(--track); }
.pmsplit.ink.alead .a, .pmsplit.ink.blead .b { background: var(--model-ink); }
.pmbstats .stat b .pmmove { font: inherit; letter-spacing: inherit; }
.pmcard.pmbook {
position: relative; max-width: 760px; margin: 26px auto 0; overflow: hidden;
border: 1px solid var(--line); border-radius: 14px;
transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.pmcard.pmbook:has(.pmbdoor:hover), .pmcard.pmbook:has(.pmbdoor:focus-visible) {
border-color: var(--pm-line); box-shadow: 0 14px 32px -20px var(--pm-glow); transform: translateY(-1px);
}
.pmbdoor { position: relative; display: block; color: inherit; text-decoration: none; outline: none; }
.pmbdoor::after { position: absolute; top: 1px; right: 12px; color: var(--pm); opacity: 0; }
.pmbdoor:hover::after, .pmbdoor:focus-visible::after { opacity: 1; }
.pmbhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 7px 8px 7px 16px; }
.pmseg { padding: 2px; }
.pmseg button { padding: 3px 10px; font-size: 12px; }
.pmseg .sm { display: none; }
.pmbcols, .pmlv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px; text-align: center; }
.pmbcols { padding-bottom: 8px; font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); }
.pmlv { position: relative; height: 27px; align-items: center; font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); }
.pmlv::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: var(--d); }
.pmlv.ask::before { background: var(--neg-bg); }
.pmlv.bid::before { background: var(--pos-bg); }
.pmlv span { position: relative; }
.pmlv .p { font-weight: 600; }
.pmlv.ask .p { color: var(--neg); }
.pmlv.bid .p { color: var(--pos); }
.pmmid { display: flex; align-items: center; justify-content: center; gap: 36px; height: 32px; padding: 0 16px; border-block: 1px solid var(--line); font: 500 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.pmmid span { display: inline-flex; align-items: baseline; gap: 7px; }
.pmmid i { font-style: normal; }
.pmmid b { font: 600 10.5px/1 var(--sans); letter-spacing: 0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.pmbstats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.pmbstats .stat { min-width: 0; gap: 6px; padding: 13px 6px 12px; }
.pmbstats .stat + .stat { border-left: 1px solid var(--line); }
.pmbstats .stat b { font-size: 16px; }
.pmcard.pmgames, .pmcard.pmfb, .pmcard.pmkills {
--pmchip: 68px;
max-width: 760px; margin: 26px auto 0; overflow: hidden;
border: 1px solid var(--line); border-radius: 14px;
}
.pmcard .tablewrap { margin: 0; }
.pmcard .tablewrap table.pmtable { width: 100%; table-layout: fixed; border: 0; }
.pmtable col.pmcl { width: 150px; }
.pmktable col.pmcl { width: 196px; }
.pmtable th { position: static; height: 46px; padding: 0 8px; border-bottom: 0; background: none; cursor: default; vertical-align: middle; }
.pmtable th:hover { color: var(--text-3); }
.pmtable td { height: 50px; padding: 0 8px; border-bottom: 0; border-top: 1px solid var(--line); vertical-align: middle; }
.pmtable .pmcorner { padding-left: 16px; text-align: left; white-space: normal; }
.pmtable .pmcorner .mic { line-height: 1.35; }
.pmtable .pmlabel { padding-left: 16px; text-align: left; white-space: normal; font: 500 13.5px/1.25 var(--sans); color: var(--text); }
.pmtable .pmlabel small { display: block; margin-top: 4px; font: 500 11px/1 var(--sans); color: var(--text-3); }
.pmtable .pmteam { font: 600 12.5px/1 var(--sans); letter-spacing: 0.03em; color: var(--text); white-space: nowrap; }
.pmtable .pmteam img.lg { width: 18px; height: 18px; object-fit: contain; vertical-align: -5px; margin-right: 7px; }
.pmchip {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
box-sizing: border-box; width: var(--pmchip, 68px); height: 30px; padding: 0 8px; border-radius: 8px;
border: 1px solid var(--pm-line); background: var(--pm-bg); color: var(--pm); text-decoration: none;
font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle;
transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.pmchip .pmlogo { width: 10px; height: 10px; }
.pmtable td .pmchip b { font: inherit; }
.pmchip:hover, .pmchip:focus-visible { background: var(--pm); border-color: var(--pm); color: var(--pm-ink); transform: translateY(-1px); box-shadow: 0 8px 18px -12px var(--pm-glow); outline: none; }
.pmtable .pmprice { text-align: center; }
.pmpair { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.pmod {
display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; width: 62px;
font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2);
}
.pmod img { width: 12px; height: 12px; object-fit: contain; }
.pmod.lead { color: var(--text); }
.pmtable td .pmod b { font: inherit; }
.pmtable tr[data-book] { cursor: pointer; }
.pmtable tr[data-book] td { transition: background var(--fast); }
.pmtable tr[data-book]:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.pmtable tr.pmsel td { background: color-mix(in srgb, var(--text) 5.5%, transparent); }
.pmtable tr.pmsel td:first-child { box-shadow: inset 2px 0 0 var(--text-2); }
.pmktable thead tr:first-child th { height: 40px; padding-top: 10px; vertical-align: bottom; }
.pmktable thead tr:first-child .pmcorner { vertical-align: top; padding-top: 19px; }
.pmktable .pmkline { text-align: center; }
.pmktable .pmkline span {
display: inline-block; width: calc(2 * var(--pmchip) + 6px); padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums;
}
.pmktable .pmkway { height: 32px; }
.pmktable .pmkway span, .pmktable .pmkr span, .pmktable .pmnone { display: inline-block; width: var(--pmchip); text-align: center; }
.pmktable .o { text-align: right; padding-right: 3px; }
.pmktable .u { text-align: left; padding-left: 3px; }
.pmrecs td { height: 44px; border-top: 0; background: color-mix(in srgb, var(--text) 3%, transparent); }
.pmrecs tr:first-child td { border-top: 1px solid var(--line); }
.pmkr span { font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); }
.pmkr.lead span { font-weight: 600; color: var(--text); }
.pmkrec .pmlabel { white-space: nowrap; font-size: 13px; }
.pmkrec .pmlabel img.lg { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 8px; }
.pmkrec .pmlabel small { display: inline; margin: 0 0 0 8px; }
.pmnone { font: 500 13px/1 var(--sans); color: var(--text-3); }
.pmftable .pmfrec td { height: 54px; }
.pmftable .pmfrec .pmlabel { font-size: 13px; color: var(--text-2); }
.pmfr { text-align: center; }
.pmfr b { display: block; font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); }
.pmfr small { display: block; margin-top: 5px; font: 500 10.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-3); }
.pmfr.lead b { font-weight: 600; color: var(--text); }
@media (max-width: 720px) {
.pmrow { grid-template-columns: 86px minmax(0, 1fr) 86px; column-gap: 10px; }
.pmbuy, .pmfig { padding-inline: 5px; }
.pmbuy::after { right: 6px; }
.pmbuy b, .pmfig b { font-size: 22px; }
.pmword { font-size: 12px; }
.pmbstats .stat { padding-inline: 2px; }
.pmbstats .stat b { font-size: 14px; }
.pmbstats .mic { font-size: 9px; letter-spacing: 0.04em; }
.pmcard.pmgames, .pmcard.pmfb, .pmcard.pmkills { --pmchip: 54px; }
.pmtable col.pmcl { width: 86px; }
.pmktable col.pmcl { width: 78px; }
.pmtable th, .pmtable td { padding: 0 4px; }
.pmtable .pmcorner, .pmtable .pmlabel { padding-left: 12px; }
.pmtable .pmlabel { font-size: 13px; }
.pmchip { height: 28px; padding: 0 5px; gap: 3px; font-size: 12px; }
.pmchip .pmlogo { width: 9px; height: 9px; }
.pmpair { gap: 6px; }
.pmod { width: 50px; gap: 3px; font-size: 12px; }
.pmod img { width: 10px; height: 10px; }
.pmktable .o { padding-right: 2px; }
.pmktable .u { padding-left: 2px; }
.pmktable .pmkline span { width: calc(2 * var(--pmchip) + 4px); }
.pmkrec .pmlabel img.lg { width: 14px; height: 14px; margin-right: 5px; }
.pmkrec .pmlabel small { display: block; margin: 4px 0 0; }
.pmseg .lg { display: none; }
.pmseg .sm { display: inline; }
}
@media (max-width: 400px) {
.pmcard.pmgames, .pmcard.pmfb, .pmcard.pmkills { --pmchip: 48px; }
.pmtable col.pmcl { width: 78px; }
.pmktable col.pmcl { width: 70px; }
.pmtable .pmcorner, .pmtable .pmlabel { padding-left: 10px; }
.pmchip { padding: 0 4px; }
.pmpair { gap: 4px; }
.pmod { width: 46px; font-size: 11.5px; }
.pmod img { width: 9px; height: 9px; }
.pmbstats .stat .mic { white-space: normal; line-height: 1.25; text-align: center; }
}
@media (max-width: 340px) {
.pmcard.pmgames, .pmcard.pmfb, .pmcard.pmkills { --pmchip: 44px; }
.pmtable col.pmcl { width: 74px; }
.pmktable col.pmcl { width: 64px; }
.pmpair { flex-direction: column; }
.pmod { width: auto; justify-content: center; }
.pmgtable td:has(.pmpair) { height: 64px; }
.pmktable .o { padding-right: 1px; }
.pmktable .u { padding-left: 1px; }
}
.cbhead { text-align: center; max-width: 760px; margin: 0 auto; }
.cbkick { margin: 0; }
.cbkick a { color: inherit; text-decoration: none; }
.cbkick a:hover { color: var(--text); text-decoration: underline; }
.cbhead h1 { margin: 12px 0 0; font: 600 30px/1.18 var(--display); letter-spacing: -0.022em; text-wrap: balance; }
.cbnote { margin: 10px 0 0; color: var(--text-2); font-size: 14px; }
.cbthrough { margin: 10px 0 0; }
.cbverdict {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); margin: 28px 0 0;
border: 1px solid var(--line); border-radius: 14px; background: var(--s1);
}
.cbverdict > .cbpick {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
padding: 26px 20px; border-right: 1px solid var(--line);
}
.cbverdict > .cbwhy { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 24px 28px; }
.cbour { margin: 0; }
.cbwho { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cbwho .bigmark { width: 64px; height: 64px; flex: none; object-fit: contain; }
.cbwho .bigmark.portrait { border-radius: 14px; object-fit: cover; }
.cbwho .bigpic { display: flex; align-items: flex-end; justify-content: center; width: 72px; height: 66px; flex: none; }
.cbwho .bigpic img {
width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0.88;
-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.cbwho .bigpic.none::before { width: 34px; height: 46px; }
.cbwhoname { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cbname { font: 600 28px/1.1 var(--display); letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
a.cbname:hover { text-decoration: underline; }
.cbword { display: flex; align-items: center; gap: 12px; font: 600 40px/1 var(--display); letter-spacing: -0.03em; }
.cbword .pos .oi.role { width: 30px; height: 30px; }
.cbwhy .cbline { margin: 0; max-width: none; text-wrap: pretty; }
.cbwhy .statrow { justify-content: flex-start; gap: 16px 26px; }
.cbwhy .stat { align-items: flex-start; }
.cbdoors { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cbsub { margin: -4px 0 12px; text-align: center; }
.entpage tr.cbmark td { background: var(--pick-bg); }
.cbkey { display: flex; flex-direction: column; gap: 26px; margin: 26px 0 0; }
.cbindex .cbkey { margin-top: 30px; }
.entpage .cbsethead {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px;
font: 600 18px/1.2 var(--display); letter-spacing: -0.015em; color: var(--text);
}
.cbrows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--s1); overflow: hidden; }
.cbrow {
position: relative; display: grid; align-items: baseline; column-gap: 18px;
grid-template-columns: 34px minmax(0, 1fr) minmax(0, 190px) 150px;
padding: 13px 18px; border-top: 1px solid var(--line); transition: background var(--fast);
}
.cbrow:first-child { border-top: 0; }
.cbrow:hover { background: var(--s2); }
.cbrow[aria-current] { background: var(--pick-bg); box-shadow: inset 2px 0 0 var(--accent-2); }
.cbpts {
justify-self: start; padding: 4px 6px; border-radius: 6px; background: var(--s2);
font: 600 10.5px/1 var(--sans); letter-spacing: 0.03em; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.cbq { font: 500 14.5px/1.42 var(--sans); color: var(--text); text-decoration: none; text-wrap: pretty; }
.cbq::after { content: ""; position: absolute; inset: 0; }
.cbrow:hover .cbq { text-decoration: underline; text-underline-offset: 3px; }
.cbq:focus-visible { outline: none; }
.cbq:focus-visible::after { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.cbans { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cbans > b { align-self: baseline; font: 600 15px/1.3 var(--display); color: var(--text); }
.cbans img.cbface { width: 20px; height: 20px; flex: none; object-fit: contain; }
.cbans img.cbface.portrait { border-radius: 5px; object-fit: cover; }
.cbans .pos .oi.role { width: 18px; height: 18px; }
.cbfig { justify-self: end; text-align: right; }
.cbfig b { font: 600 15px/1.3 var(--sans); color: var(--accent-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cbfig .mic { display: block; margin-top: 5px; line-height: 1.25; }
@media (max-width: 720px) {
.cbhead h1 { font-size: 23px; }
.cbname { font-size: 23px; }
.cbword { font-size: 32px; }
.cbwho .bigmark { width: 52px; height: 52px; }
.cbverdict { grid-template-columns: 1fr; }
.cbverdict > .cbpick { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 16px; }
.cbverdict > .cbwhy { padding: 18px 16px; }
.cbwhy .statrow { justify-content: center; }
.cbwhy .stat { align-items: center; }
.cbwhy .cbline { text-align: center; }
.cbdoors { justify-content: center; }
.cbrow {
grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "pts q q" ". ans fig";
row-gap: 9px; column-gap: 12px; padding: 12px 14px;
}
.cbpts { grid-area: pts; }
.cbq { grid-area: q; }
.cbans { grid-area: ans; }
.cbfig { grid-area: fig; }
}