.front{margin:0;background:#fff;color:#111;font-family:"Arial Narrow",Arial,sans-serif}
.front a{color:inherit}
.front-header{background:#000;color:#fff}
.front-nav{max-width:1220px;margin:auto;min-height:100px;padding:16px 24px;display:flex;gap:38px;align-items:center}
.front-nav img{width:65px;display:block}
.front-nav nav{display:flex;gap:24px;flex-wrap:wrap}
.front-nav a{font-size:.85rem;font-weight:800;text-transform:uppercase}
.front-member{margin-left:auto;white-space:nowrap}
.front-hero{height:clamp(210px,calc(100svh - 400px),620px);display:grid;place-items:center;text-align:center;color:white;background:linear-gradient(0deg,#101010 0%,transparent 40%),url('/assets/qsm-agent-mono.webp') center 38%/cover no-repeat,#141414}
.front-hero p{font-weight:700;letter-spacing:.1em;margin:0 0 10px}
.front-hero h1{font-family:inherit;line-height:1;letter-spacing:-.035em;font-weight:900;font-size:clamp(2.1rem,4.1vw,5.5rem);margin:0;text-shadow:0 2px 14px #0009}
.front-roster,.front-milestones{width:min(88%,1420px);margin:auto}
.front-intro{max-width:680px;text-align:center;margin:0 auto;padding:20px 0 54px;line-height:1.6}
.front-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}
.player{position:relative;aspect-ratio:5/8;background:#171717;color:#fff;overflow:hidden}
.player summary{list-style:none;cursor:pointer;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.player summary::-webkit-details-marker{display:none}
.portrait{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(130deg,#ffffff12 0 1px,transparent 1px 85px),linear-gradient(145deg,#29282c,#0b0b0c)}
.portrait img{width:46%;opacity:.56}
.player strong{position:relative;display:block;background:#0a0a0a;color:white;padding:20px 8px;text-align:center;text-transform:uppercase;font-size:clamp(.9rem,1.7vw,1.65rem)}
.player-info{position:absolute;inset:auto 0 0;text-align:center;background:#ddd;color:#111;padding:50px 10px 24px;clip-path:polygon(0 21%,100% 0,100% 100%,0 100%);pointer-events:none;border-bottom:6px solid #d00079}
.player-info span{display:block;margin-top:8px;overflow-wrap:anywhere}
.player[open] strong{margin-bottom:102px}
.front-milestones{padding:76px 0 90px;text-align:center}
.front-milestones h2{font-size:clamp(1.9rem,3vw,3.4rem);color:#111;margin:0 0 32px}
.front-event{display:grid;grid-template-columns:50px minmax(60px,1fr) 2fr;align-items:center;gap:16px;border-bottom:1px solid #222;padding:16px 0;margin-bottom:22px;text-align:left}
.front-event img{width:40px}
.front-footer{display:block;background:#000;color:#fff;padding:64px max(6%,24px) 28px}
.front-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:44px}
.front-footer-grid img{width:86px}
.front-footer-grid h2{font-size:1.2rem;color:#ff329f;margin:0 0 14px}
.front-footer-grid a{display:block;margin-bottom:10px}
.front-footer p{font-size:.8rem;color:#aaa}
@media(max-width:750px){.front-grid,.front-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.front-nav{gap:14px;min-height:76px;padding:12px}.front-nav nav{gap:9px}.front-nav a{font-size:.7rem}.front-nav img{width:45px}.front-hero{background-position:center}.front-grid{gap:12px}}
.front-hero p{display:inline-block;padding:.4em .8em;background:#101010;color:#fff;line-height:1.2}
.front-hero h1{text-shadow:0 2px 8px #000,0 0 22px #000}
.front-hero p{background:none;margin:12px 0 0;padding:0;color:#fff;text-shadow:0 2px 6px #000,0 0 10px #000}
.portrait img{width:100%;height:100%;object-fit:cover;opacity:1;image-rendering:auto}
.player .player-info{display:block;transform:translateX(102%);visibility:hidden;transition:transform .28s ease,visibility .28s;pointer-events:auto}
.player[open] .player-info,.player:not(.player-unlocked):focus-within .player-info{transform:translateX(0);visibility:visible}
.player[open] strong{margin-bottom:0}
.player-social:empty{display:none}
.player-social a{display:inline-block;background:#a60061;color:#fff;padding:8px 14px;margin-top:10px;font-weight:700}
@media(hover:hover){.player:not(.player-unlocked):hover .player-info{transform:translateX(0);visibility:visible}}
@media(prefers-reduced-motion:reduce){.player .player-info{transition:none}}
.player::details-content{content-visibility:visible;overflow:visible}

/* Full-height portrait with a diagonal profile panel. */
.player summary{position:relative}
.player summary:focus-visible{outline:3px solid #ff329f;outline-offset:-4px}
.player .portrait img{width:48%;height:auto;object-fit:contain;opacity:.52}
.player .player-info{padding:0;clip-path:none;border:0;background:none;text-transform:none;pointer-events:none}
.player-profile{background:#ada1a1;color:#111;clip-path:polygon(0 22%,100% 0,100% 100%,0 100%);padding:clamp(36px,5vw,72px) 6px 14px}
.player-profile h2{margin:0 0 10px;color:inherit;font-size:clamp(.95rem,2vw,1.8rem);line-height:1.1;text-transform:uppercase;overflow-wrap:anywhere}
.player-role{display:inline-block;background:#0a0a0a;color:#fff;padding:5px 12px;text-transform:uppercase;font-size:.8rem}
.player-profile p{margin:8px 0 0;font-size:.82rem;line-height:1.2}
.player-profile .player-riot{font-size:.74rem}
.player .player-social{display:flex;justify-content:center;align-items:center;min-height:44px;padding:4px;background:#a60061;color:white;font-size:.73rem}
.player .player-social span,.player .player-social a{margin:0}
.player .player-social a{pointer-events:auto}

.player-profile{background:#a09292;clip-path:polygon(0 30%,100% 0,100% 100%,0 100%);padding:clamp(48px,5.3vw,78px) 6px 14px}
.player-profile h2{font-family:"Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-stretch:condensed;font-weight:800;margin-bottom:18px}
.player-role{color:#e9dddd;transform:skewX(-10deg);padding:7px 14px}
.player-role span{display:inline-block;transform:skewX(10deg)}
.player-profile p{margin-top:9px;letter-spacing:.035em}
.player .player-social{min-height:46px;background:#d10078}
.player .player-social a{display:grid;place-items:center;background:transparent;padding:4px 12px}

@font-face{font-family:"Roboto Condensed";src:url("/assets/roboto-condensed-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto Condensed";src:url("/assets/roboto-condensed-700.ttf") format("truetype");font-weight:700;font-display:swap}
.player-profile,.player-profile h2{font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif;font-stretch:normal}
.player-profile h2,.player-role{font-weight:700;letter-spacing:normal}
.player-profile p{font-weight:400;letter-spacing:normal;font-size:.95rem}
.player-role{font-size:.92rem}

.player .portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:1}

.player .player-social{gap:clamp(2px,1vw,10px)}
.player .player-social a{padding:5px;min-width:28px}
.player-profile h2{font-weight:700;line-height:1.1}
.player-role{font-weight:700;line-height:1.2}

.player-profile {
  padding: clamp(38px, 4.45vw, 60px) 6px 12px;
  clip-path: polygon(0 clamp(34px, 4.15vw, 56px), 100% 0, 100% 100%, 0 100%);
  background: #a09292;
  color: #080808;
}
.player-profile h2 {
  font-size: clamp(18px, 2.15vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 clamp(10px, 1.45vw, 20px);
}
.player-profile .player-role {
  padding: 0 12px;
  font-size: 16px;
  line-height: 34px;
  font-weight: 700;
}
.player-profile p {
  margin: 8px 0 0;
  font-size: clamp(12px, 1.2vw, 16px);
  line-height: 19px;
}
.player .player-social { height: 46px; box-sizing: border-box; gap: 6px; }
.player .player-social a { width: 37px; padding: 0; height: 44px; }

.front-opening{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:#101010}
.front-opening .front-hero{flex:1 0 auto}
.front-brand{position:relative;flex:none;display:flex;flex-direction:column;background:#101010;color:#fff}
.front-brand .front-intro{display:grid;align-content:center;justify-items:center;max-width:none;margin:0;padding:clamp(12px,1.6vh,20px) 20px;background:radial-gradient(ellipse at bottom,#371127,#111 72%)}
.front-intro h2{margin:0;font:900 clamp(1.8rem,5vw,4.5rem)/1.05 "Arial Narrow",Arial,sans-serif;letter-spacing:-.035em}
.front-intro h2 span{display:inline-block;color:#ff53b0}
.front-intro p{margin:14px 0 0;color:#ded7dc;font:800 clamp(1rem,1.55vw,1.35rem)/1.25 Arial,sans-serif;letter-spacing:.015em}
.logo-rail{overflow:hidden;background:#171417;border-block:1px solid #ffffff22;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.logo-rail-mono{background:#101010}
.logo-rail-mono img{filter:grayscale(1);opacity:.62}
.logo-track{display:flex;width:max-content;animation:qsm-logo-slide 28s linear infinite}
.logo-sequence{display:grid;grid-template-columns:repeat(5,minmax(0,1fr) auto);place-items:center;width:max(100vw,560px);flex:none;padding:12px 0}
.logo-sequence img{width:clamp(54px,7vw,112px);height:clamp(46px,6vw,88px);object-fit:contain}
.logo-question{padding-inline:clamp(6px,2vw,30px);font:900 clamp(1.3rem,2.2vw,2rem)/1 Arial,sans-serif;color:#ff53b0}
.logo-rail-mono .logo-question{color:#aaa}
.logo-pause,.logo-pause+label{position:absolute;z-index:1;right:12px;bottom:8px}
.logo-pause{right:167px}
.logo-pause+label{font-size:.75rem;padding:3px 6px;background:#101010;color:#fff;cursor:pointer}
.logo-pause:checked~.logo-rail .logo-track{animation-play-state:paused}
.front-opening+.front-roster{padding-top:clamp(28px,5vw,72px)}
@keyframes qsm-logo-slide{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none}.logo-sequence{width:100%;min-width:0}.logo-track{width:100%}.logo-sequence img{max-width:100%}.logo-question{padding-inline:4px}.logo-pause,.logo-pause+label{display:none}}

.prime-profile-logo{display:block;width:34px;height:22px;object-fit:contain}
.front-event .prime-event-logo{background:#151515;border-radius:3px;padding:4px}

.player .player-info{background:rgba(160,146,146,.68)}
.player-stats{position:absolute;z-index:1;top:5px;left:8px;display:grid;text-align:left;line-height:1.1;color:#101010}
.player-stats span{margin:0;font-size:clamp(11px,1.2vw,16px);font-weight:800}
.player-stats small{margin-top:2px;font-size:clamp(9px,.9vw,12px);font-weight:800}
.player-stats .wr-negative{color:#780b18}
.player-stats .wr-even{color:#002c82}
.player-stats .wr-positive{color:#004c23}
.player-country{display:flex;align-items:center;justify-content:center;gap:7px}
.country-flag{flex:none;outline:1px solid #0004;border-radius:2px}

.player .player-info{background:rgba(35,29,38,.76)}
.player-profile{background:#b4a5b0}
.player-stats{color:#fff;left:7px;top:4px;gap:2px}
.player-stats small{margin:0;padding:1px 4px;border-radius:3px;justify-self:start;background:#26212a}
.player-stats .wr-negative{color:#ff9ca9}
.player-stats .wr-even{color:#9bc8ff}
.player-stats .wr-positive{color:#9ce9b6}
.player-profile .player-country{position:relative;min-height:21px;gap:5px}
.player-profile .player-level{position:absolute;left:clamp(1px,1vw,12px);margin:0;padding:1px 4px;border:1px solid #f07dbb;border-radius:3px;background:#211922;color:#ffe0f1;font:700 clamp(9px,1vw,12px)/16px monospace;white-space:nowrap}
.country-flag{width:clamp(15px,1.65vw,23px);height:clamp(10px,1.1vw,15px);display:block}

.player-info .player-stats {
  padding: 4px 7px;
  border-radius: 4px;
  background: #19151d;
  color: #fff;
  box-shadow: 0 0 0 1px #ffffff30;
}
.player-info .player-stats small {
  padding: 0;
  background: transparent;
}

.front-header{--front-nav-height:100px}
.front-nav{box-sizing:border-box;height:var(--front-nav-height)}
.front-opening{min-height:calc(100vh - 100px);min-height:calc(100svh - 100px)}
.front-opening .front-hero{height:auto;min-height:220px;background-position:center top}
.logo-rail .logo-sequence{padding-block:7px}
.logo-rail .logo-sequence img{width:clamp(36px,4.5vw,72px);height:clamp(30px,3.6vw,56px)}
.front:has(.logo-pause:checked) .front-opening .logo-track{animation-play-state:paused}
.front-event .tafelrunde-logo{width:50px}
@media(max-width:750px){
  .front-header{--front-nav-height:76px}
  .front-opening{min-height:calc(100vh - 76px);min-height:calc(100svh - 76px)}
}

.front-roster {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(40px, 5vw, 76px) 6% clamp(50px, 7vw, 104px);
  color: #fff;
  background:
    radial-gradient(ellipse at top, #3b1531, transparent 60%),
    repeating-linear-gradient(135deg, #ffffff08 0 1px, transparent 1px 72px),
    #121017;
  border-bottom: 4px solid #e30085;
}
.roster-heading { text-align: center; margin-bottom: clamp(24px, 4vw, 52px); }
.roster-heading p { margin: 0 0 10px; color: #ff67ba; font-weight: 800; letter-spacing: .16em; font-size: .8rem; }
.roster-heading h2 { margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; text-transform: uppercase; }
.front-roster .front-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1420px;
  margin-inline: auto;
}
.front-roster .player {
  flex: 0 0 calc((100% - 66px) / 4);
  box-shadow: 0 0 0 1px #ff60b745, 0 8px 28px #0007;
}
@media (max-width: 750px) {
  .front-roster .player { flex-basis: calc((100% - 12px) / 2); }
}

.logo-rail:not(.logo-rail-mono) .logo-question{transform:rotate(180deg)}
.player-info .player-stats{
  display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 8px;
  padding:4px 7px;background:#17111b;box-shadow:0 0 0 1px #ff65b65e;
}
.player-info .stats-period{
  grid-column:1/-1;color:#f3aed4;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
}
.player-info .stats-games{color:#fff;white-space:nowrap;font-size:clamp(10px,1vw,15px)}
.player-info .player-stats small{margin:0;padding-left:7px;border-left:1px solid #ffffff40;white-space:nowrap}
.logo-controls{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:5px 12px;background:#151217}
.logo-controls .logo-pause,.logo-controls .logo-pause+label{position:static}
.front:has(.logo-pause:checked) .logo-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.logo-controls{display:none}}

.player-profile {
  background: linear-gradient(145deg, #302333, #19131d 75%);
  color: #fff4fb;
  padding: clamp(46px, 5vw, 70px) clamp(8px, 4%, 16px) 13px;
  clip-path: polygon(0 21%, 100% 0, 100% 100%, 0 100%);
}
.player-profile h2 {
  font: italic 950 clamp(1.05rem, 2vw, 1.9rem)/1 system-ui, sans-serif;
  letter-spacing: -.055em;
  text-align: right;
  margin: 0 0 13px;
}
.roster-details, .roster-flags, .roster-role, .roster-level {
  display: flex;
  align-items: center;
}
.roster-details { justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.roster-role, .roster-level {
  gap: 4px;
  padding: 4px 5px;
  background: #110c14;
  border: 1px solid #68435c;
  border-radius: 4px;
  font: 800 clamp(.57rem, 1vw, .8rem)/1.15 system-ui, sans-serif;
}
.roster-role svg { width: 1.3em; height: 1.3em; color: #f7b8dc; }
.roster-level { color: #ff94d0; font-size: .85rem; }
.roster-level small { font-size: .53rem; }
.split-flag {
  position: relative;
  display: inline-block;
  width: 23px;
  height: 15px;
  overflow: hidden;
  border-radius: 2px;
}
.split-flag svg { position: absolute; inset: 0; }
.split-flag svg:first-child { clip-path: inset(0 50% 0 0); }
.split-flag svg:last-child { clip-path: inset(0 0 0 50%); }
.player-profile .roster-since {
  margin: 10px 0 0;
  text-align: right;
  color: #e3c2d6;
  font: 650 .66rem/1.2 system-ui, sans-serif;
}
.roster-since time { color: #fff4fb; white-space: nowrap; }

.roster-flags .country-flag, .roster-flags .split-flag {
  width: 34px;
  height: 17px;
}
.champ-podium {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 5px;
  margin: 0 0 9px;
  padding: 0;
  list-style: none;
}
.champ-podium li {
  --medal: #e5bc61;
  display: grid;
  width: clamp(22px, 3.1vw, 34px);
  border: 1px solid var(--medal);
  border-radius: 4px;
  overflow: hidden;
  background: #18121c;
  color: var(--medal);
}
.champ-podium .champ-rank-2 { --medal: #c7ccd5; }
.champ-podium .champ-rank-3 { --medal: #cb9674; }
.champ-podium img { width: 100%; height: auto; aspect-ratio: 1; }
.champ-podium span {
  padding: 2px 0;
  font: 800 9px/1 system-ui, sans-serif;
}
.champ-podium .champ-rank-1 span { padding-top: 6px; }
.champ-podium .champ-rank-2 span { padding-top: 4px; }

.player-info .roster-ugg {
  grid-column: 1 / -1;
  justify-self: start;
  pointer-events: auto;
  padding: 3px 1px;
  color: #f3aed4;
  font: 750 10px/1 system-ui, sans-serif;
}
.roster-ugg:hover { text-decoration: underline; }
.champ-trigger {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.champ-trigger:focus-visible { outline: 2px solid white; outline-offset: -2px; }
.champ-trigger:hover img { filter: brightness(1.25); }
.champ-dialog {
  width: min(320px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid #df6dac;
  border-radius: 12px;
  background: linear-gradient(145deg, #302333, #19131d 75%);
  color: #fff4fb;
  box-shadow: 0 16px 55px #0009;
}
.champ-dialog::backdrop { background: #09060bb8; }
.champ-dialog form { position: absolute; top: 8px; right: 9px; }
.champ-dialog button {
  border: 0;
  border-radius: 5px;
  background: #120c16;
  color: inherit;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 20px;
}
.champ-heading { display: flex; gap: 12px; align-items: center; padding-right: 20px; }
.champ-heading img { border-radius: 7px; border: 1px solid #df6dac; }
.champ-heading p { margin: 0 0 4px; color: #f3aed4; font-size: .7rem; }
.champ-heading h2 { margin: 0; color: inherit; font-size: 1.3rem; }
.champ-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.champ-values div { padding: 9px; border-radius: 6px; background: #110c14; font-size: .74rem; }
.champ-values strong { display: block; margin-top: 4px; font-size: 1.2rem; }
.champ-values .wr-negative { color: #ff9ca9; }
.champ-values .wr-even { color: #9bc8ff; }
.champ-values .wr-positive { color: #9ce9b6; }

.stats-dock {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 7px;
  display: grid;
  justify-items: start;
  gap: 4px;
}
.player-info .stats-dock .player-stats { position: static; }
.player-info .roster-ugg {
  padding: 3px 6px;
  border: 1px solid #9b547b;
  border-radius: 4px;
  background: #17111b;
  color: #ffd6ef;
  font: italic 900 10px/1 system-ui, sans-serif;
  cursor: pointer;
}
.ugg-options { display: grid; gap: 8px; margin-top: 14px; }
.ugg-options a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px;
  border: 1px solid #68435c;
  border-radius: 6px;
  color: inherit;
  background: #110c14;
}
.ugg-options small { color: #f3aed4; }

.roster-ugg img { display: block; width: 36px; height: auto; }