:root {
    --bg: #050607;
    --surface: #0c0e0f;
    --surface-2: #151819;
    --border: #262c2e;
    --text: #f2f5f5;
    --muted: #8f9a9a;
    --accent: #2dd4bf;
    --accent-2: #2dd4bf;
    --accent-ink: #031614;
    --teal-rgb: 45, 212, 191;
    --high: #ef5350;
    --mid: #f0b429;
    --note: #58a6ff;
    --low: #3fb950;
    --unknown: #727c7d;
    --radius: 12px;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--text); }
  body { font: 14px/1.45 "Segoe UI", system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
  button, input, textarea { font: inherit; color: inherit; }
  a { color: inherit; }
  header.top {
    padding: 6px 16px; border-bottom: 1px solid rgba(var(--teal-rgb), .28); background: rgba(5, 6, 7, .86);
    backdrop-filter: blur(8px); box-shadow: 0 1px 18px rgba(var(--teal-rgb), .07);
    position: sticky; top: 0; z-index: 5;
  }
  header .bar { display: flex; align-items: center; gap: 8px; max-width: 1480px; margin: 0 auto; }
  header .bar textarea {
    flex: 1; min-width: 160px; height: 40px; min-height: 40px; resize: none; padding: 4px 10px;
    overflow: auto; white-space: normal; line-height: 1.35;
  }
  .mini { padding: 5px 10px; font-size: 13px; }
  .history { position: absolute; z-index: 60; background: var(--surface); border: 1px solid rgba(var(--teal-rgb), .35);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); padding: 6px; max-width: calc(100vw - 32px); }
  .hist-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 6px; font-size: 12px; color: var(--muted); }
  .hist-head .linkish { background: none; border: none; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
  .hist-row { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; background: none; border: none;
    border-radius: 7px; padding: 7px 8px; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
  .hist-row:hover { background: rgba(var(--teal-rgb), .10); }
  .hist-names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hist-at { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .toggle.mini { padding: 5px 9px; }
  header .hints { max-width: 1480px; margin: 0 auto; display: flex; gap: 14px; flex-wrap: wrap; }
  header .hints .hint { margin-top: 3px; min-height: 0; font-size: 11.5px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: .3px; }
  .brand { cursor: help; }
  .brand .logo { width: 28px; height: 28px; display: block; flex: none; }
  .brand .logo svg { width: 100%; height: 100%; display: block; }
  .brand .wordmark b { color: var(--accent-2); font-weight: 700; }
  .brand .wordmark { display: inline-flex; align-items: center; }
  .brand .clip { display: inline-block; overflow: hidden; max-width: 0; transition: max-width .5s cubic-bezier(.2, .8, .2, 1); }
  .brand .clip > * { display: inline-block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .brand .clip.l > span { transform: translateX(100%); }
  .brand .clip.r > b { transform: translateX(-100%); }
  .brand:is(:hover, .open) .clip { max-width: 4em; }
  .brand:is(:hover, .open) .clip.l > span, .brand:is(:hover, .open) .clip.r > b { transform: none; }
  @media (prefers-reduced-motion: reduce) { .brand .clip, .brand .clip > * { transition: none; } }
  .wall { position: relative; z-index: 2; display: inline-block; width: .22em; height: 1.08em; margin: 0 .1em 0 .16em;
    vertical-align: -.15em; border-radius: 1px; background: #ffffff;
    box-shadow: inset -.06em 0 0 #b8c4c4, .07em 0 0 var(--wall-gap, var(--surface)); }
  .wall + b, .wall + .clip { position: relative; z-index: 1; margin-left: -.2em; }
  :root { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 .5H64M.5 0V64' stroke='%232dd4bf' stroke-opacity='.07'/%3E%3Cpath d='M0 4V0H4' fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.5'/%3E%3C/svg%3E"); }
  html { background: radial-gradient(ellipse 85% 75% at 50% 35%, transparent 30%, var(--bg) 100%), var(--pattern), var(--bg);
    background-attachment: fixed; }
  html body { background: transparent; }
  body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
  body::before { inset: -30%;
    background: radial-gradient(38% 30% at 30% 32%, rgba(var(--teal-rgb), .17), transparent 70%),
      radial-gradient(34% 26% at 72% 62%, rgba(16, 150, 136, .20), transparent 70%),
      radial-gradient(28% 22% at 48% 84%, rgba(255, 255, 255, .05), transparent 70%),
      radial-gradient(24% 20% at 82% 22%, rgba(120, 255, 236, .07), transparent 70%);
    animation: bg-aurora 38s ease-in-out infinite alternate; }
  @keyframes bg-aurora { 0% { transform: rotate(0) scale(1); opacity: .8; } 50% { transform: rotate(14deg) scale(1.12) translate(3%, -2%); opacity: 1; }
    100% { transform: rotate(-10deg) scale(1.05) translate(-4%, 3%); opacity: .85; } }
  body::after { inset: 0; transform: translateX(-110%);
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .035) 42%, rgba(var(--teal-rgb), .10) 50%, rgba(255, 255, 255, .035) 58%, transparent 70%);
    animation: bg-sheen 14s cubic-bezier(.45, 0, .25, 1) 2.5s infinite; }
  @keyframes bg-sheen { 0% { transform: translateX(-110%); } 45%, 100% { transform: translateX(110%); } }
  @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
  :root { --smoke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.9 0 0 0 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  #fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  #fx .smoke { position: absolute; inset: -40%; background: var(--smoke) 0 0 / 900px 900px; opacity: .11;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
    animation: smoke-drift 14s ease-in-out infinite alternate; }
  #fx .smoke.s2 { background-size: 1400px 1400px; opacity: .08; animation-duration: 22s; animation-direction: alternate-reverse; }
  @keyframes smoke-drift { from { transform: translate3d(-4%, 3%, 0) rotate(-3deg) scale(1); } to { transform: translate3d(6%, -6%, 0) rotate(5deg) scale(1.12); } }
  #fx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40vh;
    background: radial-gradient(60% 100% at 50% 100%, rgba(255, 120, 32, .30), rgba(255, 72, 0, .10) 50%, transparent 78%);
    animation: fire-flicker 2.6s ease-in-out infinite alternate; transform-origin: bottom; }
  @keyframes fire-flicker { 0% { opacity: .7; transform: scaleY(.94); } 30% { opacity: 1; } 55% { opacity: .78; transform: scaleY(1.05); } 80% { opacity: .95; } 100% { opacity: .82; transform: scaleY(.98); } }
  #fx .embers i { position: absolute; bottom: -8px; left: var(--x); width: 3px; height: 3px; border-radius: 50%;
    background: #ffd08a; box-shadow: 0 0 8px 3px rgba(255, 120, 40, .7); opacity: 0;
    animation: ember var(--d) linear var(--t) infinite; }
  @keyframes ember { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 8% { opacity: .85; }
    60% { opacity: .5; } 100% { transform: translate3d(var(--sway), -75vh, 0) scale(.4); opacity: 0; } }
  #fx .embers i:nth-child(1) { --x:6%; --d:11s; --t:0s; --sway:30px; }
  #fx .embers i:nth-child(2) { --x:14%; --d:14s; --t:4s; --sway:-20px; }
  #fx .embers i:nth-child(3) { --x:23%; --d:12s; --t:7s; --sway:40px; }
  #fx .embers i:nth-child(4) { --x:31%; --d:16s; --t:2s; --sway:-35px; }
  #fx .embers i:nth-child(5) { --x:42%; --d:13s; --t:9s; --sway:25px; }
  #fx .embers i:nth-child(6) { --x:51%; --d:15s; --t:5s; --sway:-30px; }
  #fx .embers i:nth-child(7) { --x:60%; --d:12s; --t:1s; --sway:35px; }
  #fx .embers i:nth-child(8) { --x:69%; --d:17s; --t:8s; --sway:-25px; }
  #fx .embers i:nth-child(9) { --x:77%; --d:11s; --t:3s; --sway:20px; }
  #fx .embers i:nth-child(10) { --x:85%; --d:14s; --t:10s; --sway:-40px; }
  #fx .embers i:nth-child(11) { --x:93%; --d:13s; --t:6s; --sway:30px; }
  #fx .embers i:nth-child(12) { --x:37%; --d:18s; --t:12s; --sway:-15px; }
  @media (prefers-reduced-motion: reduce) { #fx .smoke, #fx::after { animation: none; } #fx .embers { display: none; } }
  #splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
    background: var(--pattern), var(--bg); animation: splash-out .3s ease-in .85s forwards; cursor: pointer; }
  #splash::before { content: ""; position: absolute; inset: -30%;
    background: radial-gradient(closest-side at 38% 42%, rgba(255, 255, 255, .10), transparent),
      radial-gradient(closest-side at 62% 58%, rgba(var(--teal-rgb), .26), transparent);
    animation: splash-bg 1.2s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes splash-bg { from { transform: rotate(-25deg) scale(1.5); opacity: 0; } 40% { opacity: 1; } to { transform: rotate(10deg) scale(1); opacity: 1; } }
  #splash .in { position: relative; display: grid; justify-items: center; gap: 14px; }
  #splash .icon { width: 108px; height: 108px; animation: splash-pop .35s cubic-bezier(.2, .9, .3, 1.3) both; }
  #splash .icon svg { width: 100%; height: 100%; display: block; }
  #splash .word { --wall-gap: var(--bg); display: flex; align-items: center; font-size: 40px; font-weight: 700; letter-spacing: .5px; }
  #splash .word b { color: var(--accent-2); display: inline-block; text-shadow: 0 0 18px rgba(var(--teal-rgb), .45); }
  #splash .clip { display: inline-block; overflow: hidden; padding: 0 .04em; }
  #splash .clip.l > span { display: inline-block; animation: from-wall-l .4s cubic-bezier(.2, .8, .2, 1) .25s both; }
  #splash .clip.r > b { animation: from-wall-r .4s cubic-bezier(.2, .8, .2, 1) .33s both; }
  #splash .word .wall { animation: wall-up .2s ease-out .1s both; transform-origin: bottom; }
  @keyframes from-wall-l { from { transform: translateX(110%); } to { transform: none; } }
  @keyframes from-wall-r { from { transform: translateX(-110%); } to { transform: none; } }
  @keyframes wall-up { from { transform: scaleY(0); } to { transform: none; } }
  #splash .slogan { margin: 0; font-size: 17px; animation: splash-flash .6s ease-out .35s both; }
  @keyframes splash-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
  @keyframes splash-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes splash-flash { 0% { opacity: 0; filter: brightness(2.2); } 35% { opacity: 1; filter: brightness(2.2) drop-shadow(0 0 10px rgba(var(--teal-rgb), .7)); } 100% { opacity: 1; filter: none; } }
  @keyframes splash-out { to { opacity: 0; visibility: hidden; } }
  @media (prefers-reduced-motion: reduce) { #splash, #splash *, #splash::before { animation-duration: .01s !important; animation-delay: 0s !important; } #splash { animation: splash-out .2s 1s forwards; } }
  .brand small { color: var(--muted); font-weight: 400; font-size: 12px; }
  main { width: 100%; max-width: 1480px; margin: 0 auto; padding: 12px 20px 30px; flex: 1; }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
  .card.player { --muted: #9fd6cd; }
  .input { padding: 10px 12px; }
  .sr { position: absolute; left: -9999px; }
  .input label { display: block; font-weight: 600; margin-bottom: 8px; }
  textarea {
    width: 100%; min-height: 46px; height: 46px; resize: vertical; padding: 6px 10px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px; outline: none;
  }
  textarea:focus, input:focus { border-color: var(--accent); }
  .row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
  .hints { flex: 1 1 280px; min-width: 0; }
  .hints .hint { margin-top: 0; min-height: 0; }
  body.has-results .watch-hint { display: none; }
  .row > input {
    flex: 1; min-width: 220px; padding: 8px 12px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 8px; outline: none;
  }
  .hint { color: var(--muted); font-size: 12px; margin-top: 8px; min-height: 18px; }
  .hint:empty { display: none; }
  .watch-hint { color: var(--note); margin-top: 4px; }
  .watch-hint > div::before { content: "● "; animation: pulse 1.6s infinite; }
  @keyframes pulse { 50% { opacity: .3; } }
  .toggle {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface-2); cursor: pointer; user-select: none; white-space: nowrap;
  }
  .toggle input { accent-color: var(--accent); margin: 0; }
  button { cursor: pointer; border-radius: 8px; padding: 8px 14px; border: 1px solid var(--border); background: var(--surface-2); }
  button:hover { border-color: #3c4648; }
  button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; padding: 8px 22px; }
  button.primary:hover { filter: brightness(1.08); box-shadow: 0 0 14px rgba(var(--teal-rgb), .35); }
  button:disabled { opacity: .55; cursor: default; }
  button.ghost { background: transparent; }
  .banner {
    margin-top: 14px; padding: 10px 14px; border-radius: 10px; display: flex; gap: 12px; align-items: center;
    background: #2a2210; border: 1px solid #5a4614; color: #f5d690;
  }
  .banner.error { background: #2b1414; border-color: #5c2323; color: #f3aaaa; }
  .banner span { flex: 1; }
  .banner button { padding: 5px 12px; }
  .summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; align-items: center; }
  .chip { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; }
  .chip b { font-weight: 700; }
  .chip.high { border-color: var(--high); color: #ffb3b1; }
  .summary .lobby { flex-basis: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .summary .lobby .mchips { display: flex; gap: 6px; flex-wrap: wrap; }
  .summary .spacer, .row .spacer { flex: 1; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
  .deep-cols { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2.6fr); gap: 6px 22px; align-items: start; }
  .deep-cols > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .deep-cols .deep-part + .deep-part { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
  .deep-cols .maprow { grid-template-columns: 100px 36px 1fr 36px 58px; font-size: 12px; }
  @media (max-width: 1000px) { .deep-cols { grid-template-columns: 1fr; } }
  .card-foot { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
  .card-foot > details { flex: 1 1 auto; min-width: 0; }
  .card-foot > details[open] { flex-basis: 100%; }
  .deep { padding: 14px 16px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
  .deep-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
  .muted-line { color: var(--muted); font-size: 12px; }
  .maptable { display: flex; flex-direction: column; gap: 4px; }
  .maprow { display: grid; grid-template-columns: 120px 44px 1fr 44px 70px; gap: 8px; align-items: center; font-size: 13px; }
  .maprow .mcount, .maprow .mwin { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
  .maprow .mbar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
  .maprow .mbar i { display: block; height: 100%; background: var(--muted); }
  .maprow .mbar i.hi { background: var(--low); } .maprow .mbar i.lo { background: var(--high); }
  .maptag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 1px 6px; border-radius: 4px; justify-self: start; }
  .maptag.best { background: #12301a; color: var(--low); } .maptag.worst { background: #3b1414; color: var(--high); }
  .veto { font-size: 13px; color: var(--accent); }
  .stack { font-size: 13px; color: var(--note); }
  .match-head { padding: 10px 14px; margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
  .match-head .map { font-size: 18px; font-weight: 700; }
  .match-head .meta { color: var(--muted); font-size: 13px; }
  .match-head .score { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .match-head .score .win { color: var(--low); } .match-head .score .loss { color: var(--high); }
  .match-head .links { margin-left: auto; align-items: center; }
  .match-head .deep-toggle { font-size: 12px; padding: 4px 10px; }
  .team-title { margin: 12px 0 8px; font-size: 15px; display: flex; gap: 10px; align-items: baseline; }
  .team-title small { color: var(--muted); font-weight: 400; }
  .team-title .team-hide { margin-left: auto; font-size: 11px; padding: 2px 8px; }
  .team-title .win { color: var(--low); } .team-title .loss { color: var(--high); }
  .subratings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .lt-block { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 2px; }
  .lt-block .subratings { flex: 1 1 260px; }
  .lt-credit { font-size: 10px; color: var(--muted); text-decoration: none; white-space: nowrap; border: 1px solid var(--border);
    border-radius: 3px; padding: 1px 6px; }
  .lt-credit:hover { color: var(--text); }
  .deep-head .lt-credit { margin-left: auto; }
  .card-foot .lt-credit { margin-left: auto; border: 0; padding: 0; }
  .lt-credit .lt-logo { height: 32px; width: auto; display: block; }
  .lt-credit:has(.lt-logo) { border: 0; padding: 0; }
  a.lt-view { color: #F84982; font-weight: 700; }
  .sig.trait .adv { color: var(--muted); font-size: 0.92em; }
  .subr { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
  .subr b { color: var(--text); font-size: 12px; }
  .subbar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
  .subbar i { display: block; height: 100%; background: var(--muted); }
  .subbar i.good { background: var(--low); } .subbar i.bad { background: var(--high); }
  .subbar i.gold { background: #ffd166; } .subbar i.down { background: #f7a35c; }
  .subr b.good { color: var(--low); } .subr b.bad { color: var(--high); } .subr b.gold { color: #ffd166; } .subr b.down { color: #f7a35c; }
  .deep-stats {
    display: grid; grid-template-columns: minmax(0, 1fr); font-size: 12px;
    margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border);
  }
  .deep-stats > .dlabel { color: #5eead4; font-weight: 700; letter-spacing: .4px; font-size: 10.5px; padding-top: 7px; margin-bottom: 3px; }
  .deep-stats > .dlabel:first-child { padding-top: 0; }
  .deep-stats > .dlabel[title] { cursor: help; text-decoration: underline dotted rgba(94, 234, 212, .45); text-underline-offset: 3px; justify-self: start; }
  .deep-stats > .dval { min-width: 0; overflow-wrap: anywhere; padding-bottom: 7px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
  .deep-stats > .dval:last-child { border-bottom: 0; padding-bottom: 0; }
  .deep-stats .mchip { white-space: normal; max-width: 100%; }
  .dlabel { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
  .dval i { color: var(--muted); font-style: normal; }
  .dval .good { color: var(--low); } .dval .bad { color: var(--high); }
  .dnote { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
  .mchips { display: flex; flex-wrap: wrap; gap: 4px; }
  .pool-box { display: flex; flex-direction: column; gap: 6px; }
  .pool-mode { display: flex; gap: 6px; align-items: center; cursor: pointer; }
  .pool-maps { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
  .pool-maps label { display: flex; gap: 4px; align-items: center; cursor: pointer; }
  .pool-maps label.disabled { opacity: .5; cursor: default; }
  .pool-mode input, .pool-maps input { accent-color: var(--accent); }
  .maprow.off-pool { opacity: .4; }
  .maptag.offpool { background: var(--surface-2); color: var(--muted); }
  .mchip.off-pool { opacity: .35; }
  .plan { margin: 2px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
  .plan li::marker { color: var(--accent); font-weight: 700; }
  .plan b { color: var(--text); }
  .lineup { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
  .mchip.role-entry b { color: var(--high); } .mchip.role-support b { color: var(--note); }
  .mchip.role-lurker b { color: var(--mid); } .mchip.role-rifler b { color: var(--muted); }
  .mchip.role-awper b { color: var(--accent); }
  .map-sides { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
  html.idle body::before, html.idle body::after, html.idle .watch-hint > div::before,
  html.idle .mchip.gold, html.idle .mchip.gold::after, html.idle .tag.gold, html.idle .tag.gold::after,
  html.idle .skeleton::after, html.idle .spin, html.idle .lv-perf b.gold,
  html.idle #fx .smoke, html.idle #fx::after, html.idle #fx .embers i { animation-play-state: paused !important; }
  .mchip.toxic-chat { background: transparent; color: #e9a5d6; border: 1px dashed #7a3a68; font-style: italic; cursor: pointer; }
  .mchip.toxic-chat:hover { background: rgba(240, 143, 208, .08); border-style: solid; }
  .mchip { padding: 2px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
  .mchip i { font-size: 11px; }
  .mchip.good { border-color: #2b6a3a; background: #12301a; color: #9be2a9; }
  .mchip.bad { border-color: #6a2b2b; background: #301212; color: #f0a3a3; }
  .mchip.spike { border-color: #1d6fa3; background: rgba(56, 189, 248, .12); color: #7dd3fc; font-weight: 600; }
  .mchip.habit { border-color: #4c3d8f; background: #1c1736; color: #c9b8ff; }
  .more-style > summary { cursor: pointer; color: var(--muted); font-size: 12px; margin: 2px 0 4px; }
  .mchip.gold { border-color: #8a6d12; background: #2e2408; color: #ffd166; font-weight: 600; }
  .mchip.gold, .tag.gold { position: relative; overflow: hidden; animation: gold-pulse 3.6s ease-in-out infinite; }
  .mchip.gold::after, .tag.gold::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 55%, rgba(255, 236, 170, .38), transparent 75%);
    opacity: 0; animation: gold-pulse-in 3.6s ease-in-out infinite; }
  .essence .mchip.gold:nth-child(2), .essence .mchip.gold:nth-child(2)::after { animation-delay: .45s; }
  .essence .mchip.gold:nth-child(3), .essence .mchip.gold:nth-child(3)::after { animation-delay: .9s; }
  .essence .mchip.gold:nth-child(4), .essence .mchip.gold:nth-child(4)::after { animation-delay: 1.35s; }
  @keyframes gold-pulse-in { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  @keyframes gold-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
    50% { box-shadow: 0 0 8px 1px rgba(255, 209, 102, .32), 0 0 14px 2px rgba(255, 209, 102, .10); } }
  :is(.mchip, .tag, .pill, .form-badge, .mood, .cc-wrap, .celeb, .lv):is([title], [data-tip]) { transition: box-shadow .15s; }
  :is(.mchip, .tag, .pill, .form-badge, .mood, .cc-wrap, .celeb, .lv):is([title], [data-tip]):hover {
    box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .09), 0 0 0 1px rgba(255, 255, 255, .28); }
  :is(#results, header, .levels) :is([title], [data-tip]):not(:is(.mchip, .tag, .pill, .form-badge, .mood, .lv, a, button, input, textarea, .card)) {
    transition: box-shadow .15s, color .15s; border-radius: 4px; }
  :is(#results, header, .levels) :is([title], [data-tip]):not(:is(.mchip, .tag, .pill, .form-badge, .mood, .lv, a, button, input, textarea, .card)):hover {
    box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .06); color: #fff; }
  @media (prefers-reduced-motion: reduce) { .mchip.gold, .mchip.gold::after, .tag.gold, .tag.gold::after { animation: none; } }
  .card.player.enter { animation: card-in .45s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0s); }
  @keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  .card.player.flash { animation: card-flash 1.4s ease-out; }
  @keyframes card-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--accent-2), 0 0 22px rgba(var(--teal-rgb), .45); } 100% { box-shadow: 0 0 0 0 transparent; } }
  [data-goto] { cursor: pointer; text-decoration: underline dotted rgba(255, 255, 255, .35); text-underline-offset: 3px; }
  [data-goto]:hover { color: var(--accent-2); }
  .avatar.ring-risk { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--high); }
  .avatar.ring-warn { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--mid); }
  .avatar.ring-elite { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #ffd166, 0 0 10px rgba(255, 209, 102, .35); }
  .card-foot details[open] > .why { animation: open-down .22s ease-out; }
  @keyframes open-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  #toasts { position: fixed; right: 16px; bottom: 60px; z-index: 250; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
  .toast { background: #0b1111; color: #fff; font-weight: 600; font-size: 13px; padding: 9px 13px; border-radius: 9px;
    border: 1px solid #1f4440; border-left: 3px solid var(--accent-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    animation: toast-in .25s ease-out both, toast-out .35s ease-in 3.2s forwards; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
  .mapico { display: inline-grid; place-items: center; min-width: 26px; height: 15px; padding: 0 3px; margin-right: 4px; border-radius: 3px;
    font-size: 8.5px; font-weight: 800; letter-spacing: .4px; color: #050607; vertical-align: 1px; }
  .big-only, .game-only { display: contents; }
  body.dense .player .big-only, body:not(.dense) .player .game-only { display: none; }
  body.dense .grid > * { flex: 1 1 250px; min-width: 230px; max-width: 320px; }
  body.dense .player .card-foot > .links { order: 5; flex-basis: 100%; }
  .links a.link-steam { background: #171a21; border-color: #2a475e; color: #66c0f4; }
  .links a.link-steam:hover { border-color: #66c0f4; }
  .links a.link-faceit { background: #1f1f1f; border-color: #ff5500; color: #ff5500; }
  .links a.link-faceit:hover { background: #2a1a10; }
  .links a.lt-view { border-color: #F84982; }
  body.dense .player .why .sig, .card-foot details .why .sig { display: block; }
  body.dense .player .why .sig > .tag, .card-foot details .why .sig > .tag { display: inline-block; margin-bottom: 2px; }
  body.dense .player .why .sig > .pts, .card-foot details .why .sig > .pts { margin-left: 6px; }
  body.dense .player .why .sig > span:last-child,
  .card-foot details .why .sig > span:last-child { display: block; }
  .why .why { padding: 0; }
  body.dense .player { font-size: 12.5px; padding: 8px 10px; gap: 6px; }
  body.dense .player .head { gap: 7px; }
  body.dense .player .avatar { width: 28px; height: 28px; border-radius: 6px; font-size: 11px; }
  body.dense .player .kv.weapon { display: none; }
  .state-rows { display: contents; }
  body.dense .player .state-rows { display: flex; flex-direction: column; row-gap: 4px; }
  body.dense .player .state-rows > .kv { grid-template-columns: auto 1fr; border-top: 0; padding-top: 0; }
  body.dense .player .pills { gap: 4px; }
  body.dense .player .pill { font-size: 9px; padding: 0 4px; letter-spacing: .2px; }
  body.dense .player .levels .peak { display: none; }
  body.dense .player .card-foot { align-items: center; }
  body.dense .player .card-foot > .lt-credit { order: -1; margin-left: 0; }
  body.dense .player .card-foot .lt-logo { height: 24px; }
  .tempo-aggr { color: #f08a5d; } .tempo-calm { color: #58a6ff; } .tempo-even { color: #2dd4bf; }
  .card.deep.compact { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; }
  .card.deep.compact .lineup { margin: 0; }
  .deep-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .deep-foot .lt-logo { height: 24px; }
  .deep-foot > details { flex: 1 1 auto; }
  .deep-foot > details[open] { flex-basis: 100%; }
  .deep-more > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
  .mchip.risk-mid b, .mchip.risk-mid { color: var(--mid); } .mchip.risk-high b, .mchip.risk-high { color: var(--high); }
  body.dense .player .pill .pw, body.dense .player .pill .p100 { display: none; }
  .pill .pq { display: none; } body.dense .player .pill .pq { display: inline; }
  .deep-head .copy-team { margin-left: auto; }
  .chat-lines { display: grid; gap: 3px; margin-top: 4px; }
  .chat-line q { color: var(--text); } .chat-line q::before, .chat-line q::after { color: var(--muted); }
  .chat-line small { color: var(--muted); }
  .chat-line.hate { color: var(--high); font-weight: 700; }
  .chip-more { margin-left: 3px; font-size: 9px; font-weight: 800; opacity: .8; vertical-align: 4px; }
  .src-link { margin-left: 6px; font-size: 11px; color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); }
  .src-link:hover { color: var(--accent-2); border-color: var(--accent-2); }
  .chat-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 0 5px; border-radius: 3px; margin-right: 5px; }
  .chat-kind.insult { background: #3a1d33; color: #f08fd0; } .chat-kind.threat { background: #3b1414; color: var(--high); }
  #tip { position: fixed; z-index: 300; max-width: 380px; padding: 8px 11px; border-radius: 8px; pointer-events: none;
    background: #0b1111; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: pre-line;
    border: 1px solid #1f4440; box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--teal-rgb), .12);
    opacity: 0; transition: opacity .12s; }
  #tip.on { opacity: 1; }
  #tip.rich { white-space: normal; max-width: 420px; }
  #tip .tip-adv { color: #9fb3c8; font-weight: 500; margin-top: 2px; }
  #tip .tip-gold { color: #ffd166; font-weight: 600; margin-top: 4px; }
  #tip .tip-sub { margin: 9px 0 4px; padding-top: 7px; border-top: 1px solid #2a4170; color: #5eead4; font-size: 11px;
    text-transform: uppercase; letter-spacing: .5px; }
  #tip .tip-item { margin: 5px 0; font-weight: 500; }
  #tip .tip-head { font-weight: 700; color: #5eead4; margin-bottom: 6px; }
  #tip .tip-head ~ .tip-item { margin: 0; padding: 7px 0; }
  #tip .tip-head ~ .tip-item + .tip-item { border-top: 1px solid #2a4170; }
  #tip .tip-head ~ .tip-item:last-child { padding-bottom: 0; }
  #tip .tip-what { margin-top: 3px; }
  #tip .tip-item .mchip { font-size: 10.5px; padding: 0 6px; margin-right: 4px; animation: none; box-shadow: none; }
  #tip .tip-item .mchip::after { display: none; }
  .mchip.down { border-color: #7a4a14; background: #2c1a08; color: #f7a35c; }
  .mchip.small { opacity: .6; border-style: dashed; }
  .vire .form-badge { cursor: help; font-size: 11px; justify-self: start; }
  .form-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 1px 7px; border-radius: 4px; margin-right: 4px; }
  .form-badge.up { background: #12301a; color: var(--low); }
  .form-badge.flat { background: #3b2f0e; color: var(--mid); }
  .form-badge.down { background: #3b1414; color: var(--high); }
  .strong-side { font-weight: 700; }
  .side-ct { color: #5d9cec; font-weight: 700; }
  .side-t { color: #e8a43a; font-weight: 700; }
  .player.sus-1 { background: #251819; border-color: rgba(239, 83, 80, .6); }
  .player.sus-2 { background: #2a1517; border-color: rgba(239, 83, 80, .85); box-shadow: 0 0 0 1px rgba(239, 83, 80, .35), 0 0 18px rgba(239, 83, 80, .15); }
  .player.sus-1 .stat, .player.sus-1 details, .player.sus-1 .matchline { background: #171113; }
  .player.sus-2 .stat, .player.sus-2 details, .player.sus-2 .matchline { background: #1d1012; }
  .stale { color: var(--mid); cursor: help; border-bottom: 1px dotted var(--mid); }
  .trend { margin-left: 6px; font-weight: 700; font-size: 11px; }
  .trend.up { color: var(--low); } .trend.down { color: var(--high); }
  .matchline { font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
  .matchline b { color: var(--text); font-weight: 600; }
  .player { position: relative; }
  .player .close {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0; line-height: 20px;
    border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 16px;
  }
  .player .close:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }
  .player .risks { margin-right: 18px; }
  .player { padding: 14px; border-left: 4px solid var(--unknown); display: flex; flex-direction: column; gap: 12px; }
  .player.r-high { border-left-color: var(--high); }
  .player.r-mid { border-left-color: var(--mid); }
  .player.r-note { border-left-color: var(--note); }
  .player.r-low { border-left-color: var(--low); }
  .head { display: flex; gap: 12px; align-items: center; }
  .avatar {
    width: 48px; height: 48px; border-radius: 10px; flex: none; object-fit: cover;
    background: var(--surface-2); display: grid; place-items: center; font-weight: 700; color: var(--muted);
  }
  .who { flex: 1; min-width: 0; }
  .who .name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .who .sub { color: var(--muted); font-size: 12px; }
  .who .sub .celeb { color: #e3b341; font-weight: 600; cursor: help; }
  .risks { display: flex; gap: 6px; }
  .risk {
    width: 92px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
    text-align: center; cursor: help;
  }
  .risk .t { font-size: 10px; letter-spacing: .8px; color: var(--muted); text-transform: uppercase; }
  .risk .v { font-weight: 700; font-size: 13px; }
  .risk .bar { height: 4px; border-radius: 2px; background: var(--border); margin-top: 5px; overflow: hidden; }
  .risk .bar i { display: block; height: 100%; }
  .risk.high { border-color: var(--high); } .risk.high .v { color: var(--high); } .risk.high .bar i { background: var(--high); }
  .risk.mid .v { color: var(--mid); } .risk.mid .bar i { background: var(--mid); }
  .risk.note .v { color: var(--note); } .risk.note .bar i { background: var(--note); }
  .risk.low .v { color: var(--low); } .risk.low .bar i { background: var(--low); }
  .risk.unknown .v { color: var(--muted); }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stats.wide { grid-template-columns: repeat(4, 1fr); }
  .stat .v.pos { color: var(--low); }
  .stat .v.neg { color: var(--high); }
  .stat .v small { color: var(--muted); font-weight: 400; }
  .stat { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; }
  .stat .k { display: block; font-size: 11px; color: var(--muted); }
  .stat .v { font-weight: 600; }
  .stat .v.bad { color: var(--high); }
  .stat .v.unknown { color: var(--unknown); }
  .lvl {
    display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; box-sizing: border-box; border-radius: 50%;
    font-weight: 800; font-size: 11px; letter-spacing: -.3px; line-height: 1; font-variant-numeric: tabular-nums;
    border: 2px solid currentColor; margin-right: 4px; vertical-align: middle;
  }
  .f-1 { color: #c8ccd2; } .f-2 { color: #34c759; } .f-4 { color: #ffc800; } .f-8 { color: #ff8a00; } .f-10 { color: #fe1f00; }
  .prem { position: relative; display: inline-flex; align-items: center; height: 20px; padding: 0 8px 0 14px; border-radius: 4px;
    font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; transform: skewX(-12deg); vertical-align: middle; }
  .prem::before { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 2px; background: currentColor; opacity: .8;
    box-shadow: 4px 0 0 currentColor; }
  .prem > span { display: inline-block; transform: skewX(12deg); }
  .p-gray { background: #3b4250; color: #d4d9e0; } .p-cyan { background: #1d4f63; color: #8fdcff; }
  .p-blue { background: #1f3a78; color: #9db8ff; } .p-purple { background: #4b2a7a; color: #d2b0ff; }
  .p-pink { background: #6e2464; color: #ffaef0; } .p-red { background: #6e1f22; color: #ff9c9c; }
  .p-gold { background: #6b5212; color: #ffd75e; }
  details { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
  details summary { cursor: pointer; padding: 7px 10px; color: var(--muted); font-size: 13px; user-select: none; }
  details[open] summary { border-bottom: 1px solid var(--border); }
  .why { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
  .sig { display: flex; gap: 8px; align-items: baseline; }
  .tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 1px 6px; border-radius: 4px; flex: none; }
  .tag.smurf { background: #3b2f0e; color: var(--mid); }
  .tag.cheat { background: #3b1414; color: var(--high); }
  .tag.note { background: #10263f; color: var(--note); }
  .tag.weak { background: #3b1414; color: var(--high); }
  .tag.strong { background: #12301a; color: var(--low); }
  .tag.habit { background: #221a42; color: #c9b8ff; }
  .tag.gold { background: #3a2f0e; color: #ffd166; }
  .tag.rel { background: #2c1a08; color: #f7a35c; }
  .hint-line { display: block; color: var(--muted); font-size: 12px; }
  .deep-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-top: 4px; }
  .deep .sig { font-size: 13px; }
  #results :is([title], [data-tip]):not(a):not(button):not(summary):not(.name) { cursor: help; }
  .trow { font-size: 12.5px; display: flex; flex-direction: column; gap: 1px; }
  .trow .tline { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .trow .tlabel { font-weight: 600; } .tlabel.weak { color: #ff8f8a; } .tlabel.strong { color: var(--low); } .tlabel.note { color: var(--note); } .tlabel.habit { color: #c9b8ff; }
  .trow .tadv { color: var(--muted); font-size: 12px; }
  .deep-block { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  .deep-block .deep-sub { margin-top: 0; }
  .deep-block.suspects { border-color: #6b2a2a; background: rgba(240, 80, 80, .06); }
  .deep-block.exploit { border-color: #24502f; }
  .deep-block.threat { border-color: #6b4a14; }
  .deep-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .deep-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 1100px) { .deep-pair, .deep-extras { grid-template-columns: 1fr; } }
  .trow i { color: var(--muted); font-style: normal; }
  .pts { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; width: 30px; }
  .extra { color: var(--muted); font-size: 12px; }
  .err { color: #e38b8b; font-size: 12px; }
  .ok { color: var(--low); }
  .links { display: flex; gap: 6px; flex-wrap: wrap; }
  .links a {
    text-decoration: none; font-size: 12px; padding: 4px 10px; border-radius: 6px;
    background: var(--surface-2); border: 1px solid var(--border);
  }
  .links a:hover { border-color: var(--accent); }
  .skeleton { height: 230px; position: relative; overflow: hidden; }
  .skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), rgba(var(--teal-rgb), .12), transparent);
    animation: shimmer 1.4s infinite;
  }
  @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  .empty { margin-top: 28px; padding: 24px; }
  .empty h2 { margin: 0 0 14px; font-size: 16px; }
  .slogan { margin: 0 0 18px; font-size: 20px; font-weight: 700; background: linear-gradient(90deg, #ffffff, var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .about-body .slogan { font-size: 15px; margin: 0 0 10px; }
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .step { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
  .step > b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); margin-bottom: 8px; }
  .step p { margin: 0; color: var(--muted); }
  .legend { margin-top: 14px; color: var(--muted); font-size: 13px; }
  footer .linkish { background: none; border: none; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
  .about-body { max-width: 620px; font-size: 13px; line-height: 1.5; }
  .about-body h4 { margin: 12px 0 4px; font-size: 13px; }
  .about-body p { margin: 0 0 6px; }
  footer { position: sticky; bottom: 0; z-index: 4; text-align: center; color: var(--muted); font-size: 12px; padding: 7px 24px;
    border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); }
  dialog {
    width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 14px; padding: 0;
  }
  dialog::backdrop { background: rgba(0,0,0,.6); }
  .dlg-head { padding: 16px 18px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 16px; }
  .dlg-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
  .key .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .key .what { color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
  .key input { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; outline: none; }
  .key .state { font-size: 12px; }
  .key .state.on { color: var(--low); } .key .state.off { color: var(--muted); }
  .key a { font-size: 12px; color: var(--accent); }
  .dlg-section { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-top: 4px; }
  .lang-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .lang-row select {
    padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  }
  .dlg-foot { padding: 12px 18px 16px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); }
  .grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .grid > * { flex: 0 1 400px; min-width: 370px; }
  .player { padding: 10px 12px; gap: 8px; }
  .head { gap: 9px; }
  .avatar { width: 38px; height: 38px; border-radius: 8px; }
  .who .name { font-size: 14px; }
  .who .sub { font-size: 11px; }
  .risk { width: auto; min-width: 74px; padding: 3px 7px; white-space: nowrap; }
  .risk .t { font-size: 9px; }
  .risk .v { font-size: 12px; }
  .risk .bar { margin-top: 3px; height: 3px; }
  .stats, .stats.wide { gap: 4px; }
  .stat { padding: 3px 7px; border-radius: 6px; }
  .stat .k { font-size: 10px; }
  .stat .v { font-size: 13px; }
  .lvl { width: 20px; height: 20px; font-size: 10px; }
  .prem { height: 18px; padding: 0 6px 0 13px; font-size: 11px; }
  .subratings { gap: 8px; }
  .matchline { padding: 4px 8px; font-size: 11px; }
  details summary { padding: 4px 8px; font-size: 12px; }
  .why { padding: 6px 8px 8px; gap: 4px; font-size: 12px; }
  .sig { gap: 6px; }
  .hint-line { font-size: 11px; }
  .tag { font-size: 9px; padding: 1px 5px; }
  .links { gap: 4px; }
  .links a { font-size: 11px; padding: 2px 7px; }
  .deep-stats > .dlabel { padding-top: 5px; }
  .deep-stats > .dval { padding-bottom: 5px; }
  .mchip { padding: 1px 6px; font-size: 11px; }
  .levels { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; }
  .levels .lv-weapon > .lv { flex-basis: 100%; }
  .levels .k { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; margin-right: 2px; }
  .levels .pos { color: var(--low); } .levels .neg { color: var(--high); } .levels .unknown { color: var(--unknown); }
  .stats.five { grid-template-columns: .9fr 1fr .75fr 1.25fr 1.1fr; }
  .stats.five .stat { padding: 3px 6px; min-width: 0; }
  .stats.five .stat .v { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .stats.five .stat .v.unknown { white-space: normal; font-size: 11px; overflow-wrap: anywhere; }
  .stats.five .stat .v small.trend { display: block; margin: 0; font-weight: 400; color: var(--muted); }
  .seura { font-size: 12px; }
  .seura.kv { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline; padding-top: 5px; border-top: 1px solid var(--border); }
  .seura.kv .mchips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: baseline; }
  .seura i { color: var(--muted); font-style: normal; }
  .why.quick { padding: 0; }
  .tag.comment { background: #3a2f0b; color: var(--mid); }
  .quote { color: var(--muted); font-style: italic; }
  .links a.stream { margin-left: auto; background: #2a1d45; border-color: #6441a5; color: #cdb6ff; }
  .links a.stream:hover { border-color: #9b6bff; }
  .cc { font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 0 4px; margin-right: 5px; border-radius: 3px;
        background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); vertical-align: 1px; cursor: help; }
  .cc-wrap { cursor: help; white-space: nowrap; }
  .info-tip { cursor: help; }
  .flag { width: 20px; height: 15px; margin-right: 4px; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
  .peak { color: var(--muted); font-size: 11px; cursor: help; }
  .seura .good { color: var(--low); font-weight: 600; } .seura .bad { color: var(--high); font-weight: 600; }
  .why > .sig + .subratings, .why > .extra + .subratings { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
  .tag.toxic { background: #3a1d33; color: #f08fd0; }
  .tag.boosted { background: #1d2c3f; color: #8fc1f0; }
  .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -2px; }
  .pill { white-space: nowrap; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 0 6px;
          border-radius: 4px; cursor: help; }
  .pill.toxic { background: #3a1d33; color: #f08fd0; } .pill.boosted { background: #1d2c3f; color: #8fc1f0; }
  .pill.smurf { background: #3b2f0e; color: var(--mid); } .pill.cheat { background: #3b1414; color: var(--high); }
  .pill.high { outline: 1px solid currentColor; }
  .pill { background-image: linear-gradient(90deg, color-mix(in srgb, currentColor 24%, transparent) var(--fill, 0%), transparent var(--fill, 0%)); }
  .spin { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .miss { color: var(--muted); font-size: 11px; font-style: italic; }
  .lt-wait { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
  .pills-wait { display: inline-flex; align-items: center; }
  .pill.low { opacity: .65; font-weight: 600; }
  .mood { font-weight: 700; padding: 0 6px; border-radius: 4px; }
  .mood.tilt, .mood.off_form { background: #3b1414; color: var(--high); } .mood.hot, .mood.in_form { background: #12301a; color: var(--low); }
  .live-state { color: var(--low); font-weight: 700; font-size: 13px; }
  .party-line { font-size: 12px; color: var(--note); margin: -4px 0 8px; }
  .party-line i { color: var(--muted); font-style: normal; }
  .clines { display: flex; flex-direction: column; gap: 3px; }
  .cline .tag { margin: 0 2px; }
  .risk-word { font-weight: 700; } .risk-word.high { color: var(--high); } .risk-word.mid { color: var(--mid); }
  .hidden { display: none !important; }
  @media (max-width: 560px) {
    main { padding: 16px; }
    header.top { padding: 6px 10px; }
    header .bar { flex-wrap: wrap; }
    header .bar textarea { flex-basis: 100%; order: 5; }
    .grid > * { flex-basis: 100%; min-width: 0; }
    .stats, .stats.wide, .stats.five { grid-template-columns: repeat(3, 1fr); }
    .head { flex-wrap: wrap; }
  }
  .account { display: none; align-items: center; gap: 8px; white-space: nowrap; }
  html.web .account { display: inline-flex; }
  html.web .app-only { display: none !important; }
  .account .quota { font-size: 12px; color: var(--muted, #8a96a6); }
  .card.wait { min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 6px; text-align: center; filter: grayscale(1); opacity: .6; position: relative; overflow: hidden; cursor: help; }
  .card.wait .wname { font-weight: 600; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card.wait .wsid { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted, #8a96a6); }
  .card.wait .wline { font-size: 13px; color: var(--muted, #8a96a6); }
  .card.wait .wpro { font-size: 12px; }
  .card.wait.busy::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), rgba(var(--teal-rgb), .12), transparent);
    animation: shimmer 1.4s infinite; }
  html.idle .card.wait.busy::after { animation-play-state: paused; }
  #keyList.key-list { display: flex; flex-direction: column; gap: 14px; }
  body.doc-page main.doc { max-width: 820px; line-height: 1.6; }
  .doc h1 { font-size: 24px; margin: 22px 0 2px; }
  .doc h2 { font-size: 16px; margin: 20px 0 6px; color: #5eead4; }
  .doc ul { padding-left: 20px; }
  .doc h3 { font-size: 14px; margin: 12px 0 4px; color: #f87171; text-transform: uppercase; letter-spacing: .06em; }
  .doc li { margin: 4px 0; }
  .doc a { color: #7ab8ff; }
  .doc code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
  .doc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .doc-date, .doc-note { color: var(--muted); font-size: 12px; }
  .doc-optout { padding: 14px 18px; margin-top: 24px; }
  .doc-optout h2 { margin-top: 0; }
  .doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
  .doc a.btn { display: inline-block; text-decoration: none; border-radius: 8px; padding: 8px 22px; font-weight: 700;
    background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
  .doc-status { font-weight: 600; }
  .doc-status.ok { color: var(--low); } .doc-status.err { color: var(--high); }
  body.doc-page[data-lang="fi"] [lang="en"], body.doc-page[data-lang="en"] [lang="fi"] { display: none; }
  .doc-langs button[aria-pressed="true"] { border-color: var(--accent); }
  .web-only { display: none; }
  html.web .web-only { display: inline; }
  html.web div.web-only { display: block; }
  #clearLocal { margin-top: 8px; }
  [data-goto-chat] { cursor: pointer; }
  .mchip.toxic-chat[data-goto-chat]:hover, .pill[data-goto-chat]:hover { filter: brightness(1.25); }
  .sig[data-goto-chat]:hover span:last-child { text-decoration: underline dotted; text-underline-offset: 3px; }
  .deep-stats > .row-flash { animation: row-flash 1.6s ease-out; border-radius: 4px; }
  @keyframes row-flash { 0%, 35% { background: rgba(240, 143, 208, .22); } 100% { background: transparent; } }
  .mchip.info { background: transparent; border-color: #34403f; color: var(--text, #e6edf5); }
  .mchip.info b { font-weight: 700; }
  .mchip.info b.pos { color: var(--low); } .mchip.info b.neg { color: var(--high); }
  .lv-maps { display: contents; }
  .levels .lv-maps > .lv { flex-basis: 100%; display: flex; gap: 4px; align-items: center; }
  .mapbadge { font-size: 9px; font-weight: 700; letter-spacing: .4px; padding: 0 5px; line-height: 15px; border-radius: 4px; color: #fff; cursor: help; }
  .mapbadge.best { background: #1f7a4d; } .mapbadge.worst { background: #a33a3a; } .mapbadge.even { background: #4b5563; }
  .lv-perf { display: contents; }
  .levels .lv-perf > .lv { flex-basis: 100%; }
  .lv-perf b.pos { color: var(--low); } .lv-perf b.neg { color: var(--high); }
  .lv-perf b.gold { background: linear-gradient(100deg, #b8860b 0%, #ffd166 30%, #fff6d5 45%, #ffd166 60%, #b8860b 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 6px rgba(255, 209, 102, .45)); animation: gold-text 2.8s linear infinite; }
  @keyframes gold-text { from { background-position: 100% 0; } to { background-position: -150% 0; } }
  @media (prefers-reduced-motion: reduce) { .lv-perf b.gold { animation: none; background-position: 50% 0; } }
  .levels .lv.wpn-none { color: var(--muted); font-size: 12px; }
  .profile-row { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; padding-bottom: 7px; margin-bottom: 1px; border-bottom: 1px dashed var(--border); }
  .profile-row .mchip.info { border-radius: 999px; border-color: rgba(var(--teal-rgb), .30);
    background: rgba(var(--teal-rgb), .05); }
  .studio { position: absolute; right: 14px; bottom: 50%; transform: translateY(50%); display: flex; color: var(--muted); opacity: .7; }
  .studio svg { width: 24px; height: 24px; display: block; }
  footer { padding-left: 44px; padding-right: 44px; }
  .player .col-a, .player .col-b { display: contents; }
  body.focus #denseBtn { display: none; }
  body.focus #summary { display: none; }
  body.focus .player .pill { font-size: 11.5px; padding: 2px 9px; }
  body.focus .grid { display: block; }
  body.focus .grid > .player { max-width: 1080px; margin: 4px auto 0; padding: 16px 20px; gap: 12px;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 22px; font-size: 13.5px; }
  body.focus .player > .head, body.focus .player > .card-foot { grid-column: 1 / -1; }
  body.focus .player .col-a, body.focus .player .col-b { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
  body.focus .player .col-b { border-left: 1px solid var(--border); padding-left: 20px; }
  body.focus .player .avatar { width: 56px; height: 56px; border-radius: 11px; }
  body.focus .player .who .name { font-size: 20px; }
  body.focus .player .who .sub { font-size: 13px; }
  body.focus .player .levels { font-size: 14px; }
  body.focus .player .seura { font-size: 13px; }
  body.focus .player .mchip { font-size: 12px; }
  body.focus .player .mapbadge { font-size: 10px; line-height: 17px; padding: 0 6px; }
  @media (max-width: 760px) { body.focus .grid > .player { display: flex; flex-direction: column; }
    body.focus .player .col-b { border-left: 0; padding-left: 0; } }
  .essence.split { display: flex; flex-direction: column; gap: 6px; }
  .essence.split .ess-line { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: start; }
  .essence.split .ess-k { font-size: 11px; color: var(--muted); padding-top: 2px; }
  body.focus .player :is(.col-a, .col-b) > .why { padding-left: 0; padding-right: 0; }
  body.focus .player :is(.focus-stats, .focus-maps) { border-top: 1px solid var(--border); padding-top: 10px; }
  body.focus .player .focus-maps .mchip { font-size: 12px; }
  .why .sig.trait, .why .map-sides .sig, .why.map-tags .sig, body.focus .player .why .sig { display: block; }
  :is(.why .sig.trait, .why .map-sides .sig, .why.map-tags .sig, body.focus .player .why .sig) > .tag { display: inline-block; margin-bottom: 3px; }
  :is(.why .sig.trait, .why .map-sides .sig, .why.map-tags .sig, body.focus .player .why .sig) > .pts { margin-left: 6px; }
  :is(.why .sig.trait, .why .map-sides .sig, .why.map-tags .sig, body.focus .player .why .sig) > span:last-child { display: block; }
  .why.map-tags { gap: 9px; }
  .result-actions { display: flex; gap: 6px; }
  .result-actions:empty { display: none; }
  .wpn-other { display: inline; margin-left: 8px; background: none; border: 0; }
  .wpn-other > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; color: var(--muted);
    padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; list-style: none; }
  .wpn-other > summary::-webkit-details-marker { display: none; }
  .wpn-other > summary::after { content: "▾"; } .wpn-other[open] > summary::after { content: "▴"; }
  .wpn-other > summary:hover { color: var(--text); border-color: rgba(var(--teal-rgb), .45); }
  .wpn-other .wpn-rest { display: block; margin-top: 6px; }
  .wpn-other[open] > summary { border-bottom: 1px solid var(--border); }
  .mchip.cat { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; padding: 3px 9px 4px; }
  .mchip.cat .cat-name { font-weight: 700; }
  .mchip.cat .cat-items { font-size: 10.5px; font-weight: 400; opacity: .85; line-height: 1.3; }
  .essence.split .mchips { align-items: flex-start; }
  .essence.split .ess-singles { display: contents; }
  .essence.split .mchips { gap: 5px 6px; }
  .mchip.info.cheat-flag { border-color: var(--high); background: rgba(239, 83, 80, .14); color: #ffb4b2; font-weight: 700; }
  .app-only-note { color: var(--muted); font-size: 12px; font-style: italic; }
  .app-only-src { font-style: normal; opacity: .8; }
  .stat .load-inv { padding: 1px 10px; font-size: 12px; margin-top: 2px; }
  .focus-maps .fmap { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
  .focus-maps .fmap:last-child { border-bottom: 0; }
  .focus-maps .fmap-tags { display: flex; flex-direction: column; gap: 4px; margin: 5px 0 2px 4px; font-size: 12px; }
  .focus-maps .fmap-tags .sig { display: block; }
  .focus-maps .fmap-tags .sig > .tag { display: inline-block; margin-bottom: 2px; }
  .focus-maps .fmap-tags .sig > span:last-child { display: block; }
  .form-badge.flat.strong { background: #12301a; color: var(--low); }
  .form-badge.flat.weak { background: #3b1414; color: var(--high); }
  body.focus .player > .head { padding-right: 26px; }
  body.focus .player > .head .stats.five { margin-left: auto; flex: 0 1 600px; min-width: 0; }
  @media (max-width: 760px) { body.focus .player > .head .stats.five { flex-basis: 100%; margin-left: 0; } }
  .lvl-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .lvl-row > .levels { flex: 1 1 170px; min-width: 0; }
  .bw-maps { display: flex; gap: 6px; flex: 0 1 auto; }
  .bw { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 2px 8px 3px; border-radius: 6px; line-height: 1.25; }
  .bw.best { background: rgba(63, 185, 80, .12); border: 1px solid rgba(63, 185, 80, .5); }
  .bw.worst { background: rgba(239, 83, 80, .12); border: 1px solid rgba(239, 83, 80, .5); }
  .bw.even { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .18); }
  .bw-k { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .bw.best .bw-k { color: var(--low); } .bw.worst .bw-k { color: var(--high); }
  .bw-map { font-size: 12px; font-weight: 700; display: flex; align-items: center; }
  .bw-v { font-size: 10.5px; color: var(--muted); }
  .mchip.cat .cat-items { display: flex; flex-direction: column; gap: 1px; }
  .mchip.cat .cat-item::before { content: "•"; margin-right: 5px; opacity: .8; }
  .step p b { color: var(--text); }
  .step code.url { display: block; margin: 6px 0; padding: 5px 8px; border-radius: 6px; background: var(--bg);
    border: 1px solid var(--border); font: 12.5px/1.3 ui-monospace, Consolas, monospace; color: var(--muted); overflow-wrap: anywhere; }
  .step code.url + code.url { color: var(--text); border-color: rgba(var(--teal-rgb), .45); }
  .step code.url .pp { color: var(--accent); font-weight: 700; }
  .step .step-h { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
  .beta-badge { display: none; align-self: center; margin-left: -2px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
    letter-spacing: .08em; color: var(--accent-ink); background: var(--accent); cursor: help; white-space: nowrap; }
  html.web .beta-badge { display: inline-block; }
  .beta-note { display: none; margin: 10px 0 18px; padding: 9px 14px 9px 40px; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: #fde68a; background: linear-gradient(90deg, rgba(245,158,11,.20), rgba(245,158,11,.08)) , var(--surface);
    border: 1px solid rgba(245,158,11,.55); border-left: 4px solid #f59e0b; position: relative; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
  .beta-note::before { content: "β"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #1a1204; background: #f59e0b; }
  html.web .beta-note { display: block; }
  .member { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 1px 7px 1px 5px; border-radius: 999px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .1em; line-height: 16px; cursor: help; width: max-content; }
  .member svg { width: 13px; height: 13px; flex: none; }
  .member.supporter { color: var(--accent); background: rgba(var(--teal-rgb), .1); border: 1px solid rgba(var(--teal-rgb), .45); }
  .member.pro { color: #06100f; border: 1px solid rgba(255,255,255,.35);
    background: linear-gradient(110deg, #2dd4bf, #a7f3d0 30%, #fde68a 50%, #2dd4bf 70%, #14b8a6); background-size: 250% 100%;
    animation: pro-shine 3.2s linear infinite; box-shadow: 0 0 10px rgba(var(--teal-rgb), .45); }
  .member.pro svg { animation: pro-eye 3.2s ease-in-out infinite; }
  @keyframes pro-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
  @keyframes pro-eye { 0%, 86%, 100% { transform: scaleY(1); } 92% { transform: scaleY(.15); } }
  @media (prefers-reduced-motion: reduce) { .member.pro, .member.pro svg { animation: none; } }
  .quota.member-q.pro { color: #06100f; background: var(--accent); border-color: var(--accent); }
  .player .cmp-btn { position: absolute; top: 6px; right: 34px; z-index: 2; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px;
    font-weight: 700; color: #06100f; background: var(--accent); border: 1px solid var(--accent); cursor: pointer; }
  .player .cmp-btn:hover { filter: brightness(1.1); }
  .player .cmp-btn.locked { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
  .player .cmp-btn.locked:hover { color: var(--text); filter: none; }
  .cmp-wait { display: flex; align-items: center; gap: 8px; color: var(--muted); }
  .cmp-pitch h4 { margin: 0 0 6px; }
  .cmp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
  .cmp-actions .btn svg { width: 15px; height: 15px; vertical-align: -3px; }
  .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
  .plan { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
  .plan.pro { border-color: rgba(var(--teal-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--teal-rgb), .2) inset; }
  .plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .plan-top .member { margin-top: 0; }
  .plan ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 3px; flex: 1; }
  .plan button { align-self: stretch; }
  .plan-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
  .quota.member-q.pro, .plans-btn { color: #06100f; background: var(--accent); border-color: var(--accent); }
  .wpro[data-plans] { cursor: pointer; text-decoration: underline dotted; }
  #compare { width: min(660px, calc(100vw - 32px)); }
  .cmp-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 4px 0 2px; }
  .cmp-side { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
  .cmp-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 800;
    background: var(--surface-2); border: 2px solid var(--border); box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
  .cmp-side.you .cmp-av { border-color: var(--accent); box-shadow: 0 0 16px rgba(var(--teal-rgb), .35); }
  .cmp-name { font-weight: 800; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmp-side.you .cmp-name { color: var(--accent); }
  .cmp-ranks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; min-height: 20px; }
  .cmp-ranks .member { margin-top: 0; }
  .cmp-vs-mid { font-size: 26px; font-weight: 900; letter-spacing: .04em; font-style: italic; color: var(--muted);
    text-shadow: 0 0 18px rgba(var(--teal-rgb), .35); }
  .cmp-verdict { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding: 9px 12px;
    border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
  .cmp-verdict b { font-size: 15px; }
  .cmp-verdict span { color: var(--muted); font-size: 12.5px; }
  .cmp-verdict.fav { border-color: rgba(34,197,94,.45); } .cmp-verdict.fav b { color: var(--low); }
  .cmp-verdict.dog { border-color: rgba(239,68,68,.45); } .cmp-verdict.dog b { color: var(--high); }
  .cmp-stats { display: grid; gap: 2px; }
  .cmp-stat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; padding: 5px 2px 6px; border-radius: 6px; }
  .cmp-stat:hover { background: rgba(255,255,255,.03); }
  .cmp-stat > b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .cmp-stat > b:first-child { text-align: left; } .cmp-stat > b:nth-child(3) { text-align: right; }
  .cmp-label { color: var(--muted); font-size: 12px; text-align: center; white-space: nowrap; }
  .cmp-stat b.win { color: var(--low); } .cmp-stat b.lose { color: var(--high); opacity: .9; } .cmp-stat b.gold { color: #fbbf24; }
  .cmp-bars { grid-column: 1 / -1; display: flex; gap: 3px; height: 6px; margin-top: 4px; }
  .cmp-bars i { flex: 1 1 0; position: relative; border-radius: 3px; background: rgba(255,255,255,.05); overflow: hidden; }
  .cmp-bars i::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--w); border-radius: 3px; background: #6b7280;
    animation: cmp-grow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: inherit; }
  .cmp-bars i:first-child::after { right: 0; } .cmp-bars i:last-child::after { left: 0; }
  .cmp-bars i.win::after { background: var(--low); } .cmp-bars i.lose::after { background: var(--high); opacity: .8; }
  .cmp-bars i.gold::after { background: linear-gradient(90deg, #f59e0b, #fde68a); box-shadow: 0 0 8px rgba(251,191,36,.6); }
  @keyframes cmp-grow { from { width: 0; } }
  @media (prefers-reduced-motion: reduce) { .cmp-bars i::after { animation: none; } }
  .cmp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  .cmp-col, .cmp-tips { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
  .cmp-col.good { border-color: rgba(34,197,94,.35); } .cmp-col.bad { border-color: rgba(239,68,68,.35); }
  .cmp-col h4, .cmp-tips h4 { margin: 0 0 6px; font-size: 13px; }
  .cmp-col ul, .cmp-tips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
  .cmp-col li { display: flex; justify-content: space-between; gap: 8px; }
  .cmp-col b.win { color: var(--low); } .cmp-col b.lose { color: var(--high); }
  .cmp-nothing { margin: 0; color: var(--muted); font-size: 13px; }
  .cmp-tips { border-color: rgba(var(--teal-rgb), .4); }
  .cmp-tips li { padding-left: 18px; position: relative; line-height: 1.4; }
  .cmp-tips li::before { position: absolute; left: 0; font-weight: 800; }
  .cmp-tips li.down::before { content: "!"; color: var(--high); } .cmp-tips li.up::before { content: "↑"; color: var(--low); }
  @media (max-width: 520px) { .cmp-av { width: 52px; height: 52px; } .cmp-vs-mid { font-size: 20px; } .cmp-label { white-space: normal; } }
  .pro-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
  .pro-tools-k { font-size: 10px; font-weight: 900; letter-spacing: .12em; color: #06100f; background: var(--accent); border-radius: 4px; padding: 2px 6px; }
  .pro-tool.locked { color: var(--muted); }
  .tool-h { margin: 6px 0 0; font-size: 14px; }
  .team-avs { display: flex; justify-content: center; }
  .team-avs img, .team-avs span { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); margin-left: -8px;
    background: var(--surface-2); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
  .team-avs > :first-child { margin-left: 0; }
  .cmp-side.you .team-avs img, .cmp-side.you .team-avs span { border-color: rgba(var(--teal-rgb), .7); }
  .threats { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
  .threat { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface-2); }
  .threat.high { border-color: rgba(239,68,68,.5); } .threat.mid { border-color: rgba(245,158,11,.4); }
  .threat-n { font-weight: 900; font-size: 15px; color: var(--muted); width: 16px; text-align: center; }
  .threat.high .threat-n { color: var(--high); }
  .cmp-av.sm { width: 36px; height: 36px; font-size: 12px; border-width: 1px; }
  .threat-who { min-width: 0; }
  .threat-name { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .threat-tip { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  .threat-flag { font-size: 10.5px; font-weight: 700; color: var(--high); border: 1px solid rgba(239,68,68,.5); border-radius: 999px; padding: 0 6px; }
  .threat-top { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--high); white-space: nowrap; }
  .player > .card-tools { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: -6px 28px 0 0; }
  body.focus .player > .card-tools { grid-column: 1 / -1; margin-bottom: -6px; }
  .player .card-tools .cmp-btn { position: static; display: inline-flex; align-items: center; gap: 5px; height: 24px; line-height: 1; }
  .player .note-btn { width: 26px; justify-content: center; padding: 0; }
  .player .note-btn svg { width: 14px; height: 14px; }
  .player .note-btn:not(.locked) { color: var(--text); background: var(--surface-2); border-color: var(--border); }
  .player .note-btn.has { border-color: var(--accent); }
  .pnote { margin-top: 3px; font-size: 12px; color: #fde68a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .note-text { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
  .lock-ic { width: 12px; height: 12px; flex: none; vertical-align: -1px; opacity: .85; }
  .player.m-pro:not(.sus-1):not(.sus-2) { border-color: rgba(var(--teal-rgb), .45);
    background: linear-gradient(160deg, rgba(45,212,191,.10), rgba(45,212,191,.03) 50%, rgba(167,243,208,.07)), var(--surface); }
  .player.m-pro::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
    animation: pro-card-glow 4s ease-in-out infinite; }
  .player.m-pro::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(167,243,208,.07) 46%, rgba(253,230,138,.09) 50%, rgba(45,212,191,.06) 54%, transparent 62%) no-repeat;
    background-size: 300% 100%; animation: pro-card-shine 7s ease-in-out infinite; }
  @keyframes pro-card-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--teal-rgb), .12), 0 0 14px rgba(var(--teal-rgb), .10); }
    50% { box-shadow: 0 0 0 1px rgba(var(--teal-rgb), .28), 0 0 22px rgba(var(--teal-rgb), .22); } }
  @keyframes pro-card-shine { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -20% 0; } }
  @media (prefers-reduced-motion: reduce) { .player.m-pro::after, .player.m-pro::before { animation: none; } }
  .member.legend { color: #1a1204; border: 1px solid rgba(255,236,170,.6);
    background: linear-gradient(110deg, #b45309, #f59e0b 25%, #fde68a 45%, #fff7d6 50%, #fde68a 55%, #f59e0b 75%, #b45309); background-size: 250% 100%;
    animation: pro-shine 2.6s linear infinite; box-shadow: 0 0 12px rgba(251,191,36,.55); }
  .member.legend svg { animation: legend-crown 2.6s ease-in-out infinite; }
  @keyframes legend-crown { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1px) rotate(-6deg); } }
  .player.m-legend, .player.m-pro { isolation: isolate; }
  .player.m-legend:not(.sus-1):not(.sus-2) { border-color: rgba(251,191,36,.7); border-left-color: #f59e0b;
    background: linear-gradient(160deg, rgba(251,191,36,.22), rgba(180,83,9,.10) 45%, rgba(251,191,36,.16)), var(--surface); }
  .player.m-legend::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(253,230,138,.10) 44%, rgba(255,247,214,.16) 50%, rgba(251,191,36,.10) 56%, transparent 65%) no-repeat;
    background-size: 300% 100%; animation: pro-card-shine 5s ease-in-out infinite; }
  .player.m-legend::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
    animation: legend-card-glow 2.8s ease-in-out infinite; }
  @keyframes legend-card-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(251,191,36,.25), 0 0 16px rgba(251,191,36,.16); }
    50% { box-shadow: 0 0 0 1px rgba(251,191,36,.55), 0 0 30px rgba(251,191,36,.35); } }
  .player.m-legend .who .name { color: #fde68a; }
  @media (prefers-reduced-motion: reduce) { .member.legend, .member.legend svg, .player.m-legend::before, .player.m-legend::after { animation: none; } }
  .quota.member-q.legend { color: #1a1204; background: linear-gradient(110deg, #f59e0b, #fde68a); border-color: #f59e0b; }
  .plan.legend { border-color: rgba(251,191,36,.6); background: linear-gradient(160deg, rgba(251,191,36,.10), transparent 55%), var(--surface-2);
    box-shadow: 0 0 18px rgba(251,191,36,.15); }
  .plan.legend button { color: #1a1204; background: linear-gradient(110deg, #f59e0b, #fde68a); border-color: #f59e0b; font-weight: 800; }
  .plan-best { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
  .plans { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  footer .hall-link { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #fbbf24; text-decoration: none; font-weight: 700; }
  footer .hall-link:hover { color: #fde68a; text-decoration: underline; }
  html.web footer { padding-left: 170px; padding-right: 170px; }
  @media (max-width: 760px) { footer .hall-link { position: static; transform: none; margin-left: 8px; }
    html.web footer { padding-left: 44px; padding-right: 44px; } }
  #hall { width: min(620px, calc(100vw - 32px)); }
  .hall-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .hall-tab { flex: 1 1 150px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-weight: 800; cursor: pointer; }
  .hall-tab small { opacity: .7; font-weight: 600; margin-left: 4px; }
  .hall-tab.legend.on { color: #1a1204; border-color: #f59e0b; background: linear-gradient(110deg, #f59e0b, #fde68a 50%, #f59e0b); background-size: 250% 100%;
    animation: pro-shine 3s linear infinite; box-shadow: 0 0 14px rgba(251,191,36,.35); }
  .hall-tab.pro.on { color: #06100f; border-color: var(--accent); background: linear-gradient(110deg, #2dd4bf, #a7f3d0 50%, #2dd4bf); background-size: 250% 100%;
    animation: pro-shine 3.4s linear infinite; }
  .hall-tab.supporter.on { color: var(--accent); border-color: rgba(var(--teal-rgb), .6); background: rgba(var(--teal-rgb), .1); }
  .hall-list { margin: 12px 0 0; padding: 4px 2px; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px; max-height: min(52vh, 460px); overflow-y: auto; }
  .hall-list li { border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
  .hall-list a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px 10px; color: var(--text); text-decoration: none; text-align: center; }
  .hall-list a:hover .hall-name { text-decoration: underline; }
  .hall-list img, .hall-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface); font-weight: 800; font-size: 18px; }
  .hall-name { font-weight: 700; font-size: 13px; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hall-list.legend li { border-color: rgba(251,191,36,.55); background: linear-gradient(160deg, rgba(251,191,36,.12), transparent 60%), var(--surface-2);
    animation: legend-card-glow 2.8s ease-in-out infinite; }
  .hall-list.legend .hall-name { color: #fde68a; text-shadow: 0 0 10px rgba(251,191,36,.45); }
  .hall-list.legend img { box-shadow: 0 0 0 2px #f59e0b, 0 0 12px rgba(251,191,36,.5); }
  .hall-list.pro li { border-color: rgba(var(--teal-rgb), .45); animation: pro-card-glow 4s ease-in-out infinite; }
  .hall-list.pro .hall-name { color: #a7f3d0; }
  .hall-list.pro img { box-shadow: 0 0 0 2px var(--accent); }
  .hall-list.supporter .hall-name { color: var(--accent); }
  .hall-empty { margin-top: 14px; text-align: center; color: var(--muted); }
  .hall-what { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
  .hall-plans.linkish { display: block; margin-top: 4px; background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 12px; }
  .hall-marks { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
  .who .hall-marks { display: inline-flex; margin: 0 0 0 5px; vertical-align: 2px; }
  .hall-tenure { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; padding: 1px 6px; border-radius: 999px; white-space: nowrap;
    color: #a7f3d0; background: rgba(var(--teal-rgb), .14); border: 1px solid rgba(var(--teal-rgb), .5); }
  .hall-early { font-size: 8.5px; white-space: nowrap; font-weight: 800; letter-spacing: .08em; padding: 1px 6px; border-radius: 999px;
    color: #e9d5ff; background: rgba(168, 85, 247, .18); border: 1px solid rgba(192, 132, 252, .55); }
  .hall-me { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; cursor: pointer; }
  @media (prefers-reduced-motion: reduce) { .hall-tab.on, .hall-list li { animation: none; } }
  .rep-head { display: flex; align-items: center; gap: 12px; }
  .rep-head .cmp-av { width: 56px; height: 56px; }
  .rep-head .member { margin-left: auto; }
  .rep-sub { color: var(--muted); font-size: 12.5px; }
  .rep-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .rep-tile { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
  .rep-tile span { color: var(--muted); font-size: 11.5px; }
  .rep-tile b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .rep-tile b.pos { color: var(--low); } .rep-tile b.neg { color: var(--high); }
  .rep-chart { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
  .rep-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-top: -6px; }
  .rep-legend .g { color: var(--low); } .rep-legend .r { color: var(--high); } .rep-legend .t { color: var(--accent); } .rep-legend .y { color: #fbbf24; }
  .rep-notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
  .player.m-legend { --lg1: #f59e0b; --lg2: #fde68a; --lgrgb: 251,191,36; --lgdrgb: 180,83,9; }
  .player.m-legend.t-ember { --lg1: #f97316; --lg2: #fdba74; --lgrgb: 249,115,22; --lgdrgb: 153,27,27; }
  .player.m-legend.t-ice { --lg1: #38bdf8; --lg2: #e0f2fe; --lgrgb: 125,211,252; --lgdrgb: 30,64,175; }
  .player.m-legend.t-void { --lg1: #a855f7; --lg2: #e9d5ff; --lgrgb: 168,85,247; --lgdrgb: 46,16,101; }
  .player.m-legend.t-emerald { --lg1: #10b981; --lg2: #a7f3d0; --lgrgb: 52,211,153; --lgdrgb: 6,78,59; }
  .player.m-legend.t-rose { --lg1: #ec4899; --lg2: #fbcfe8; --lgrgb: 244,114,182; --lgdrgb: 131,24,67; }
  .player.m-legend:not(.sus-1):not(.sus-2) { border-color: rgba(var(--lgrgb), .7); border-left-color: var(--lg1);
    background: linear-gradient(160deg, rgba(var(--lgrgb), .22), rgba(var(--lgdrgb), .12) 45%, rgba(var(--lgrgb), .16)), var(--surface); }
  .player.m-legend::before { background-image: linear-gradient(115deg, transparent 35%, rgba(var(--lgrgb), .10) 44%, rgba(255,255,255,.14) 50%, rgba(var(--lgrgb), .10) 56%, transparent 65%); }
  .player.m-legend::after { animation-name: legend-theme-glow; }
  @keyframes legend-theme-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--lgrgb), .25), 0 0 16px rgba(var(--lgrgb), .16); }
    50% { box-shadow: 0 0 0 1px rgba(var(--lgrgb), .55), 0 0 30px rgba(var(--lgrgb), .35); } }
  .player.m-legend .who .name { color: var(--lg2); }
  .themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .theme-pick { position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 14px 12px; border-radius: 12px; border: 1px solid; cursor: pointer;
    color: var(--lg2); font: inherit; text-align: left; }
  .theme-pick.on { outline: 2px solid var(--lg1); outline-offset: 2px; }
  .theme-pick small { margin-left: auto; font-weight: 800; }
  .theme-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--lg2), var(--lg1)); box-shadow: 0 0 10px rgba(var(--lgrgb), .6); }
  .account .acct { display: inline-flex; align-items: center; gap: 6px; }
  .account .acct svg { width: 15px; height: 15px; flex: none; opacity: .9; }
  .account .plans-btn { font-weight: 800; }
  .tier-chip, .quota-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 13px; line-height: inherit;
    border: 1px solid transparent; border-radius: 8px; position: relative; overflow: hidden; cursor: help; }
  .quota-chip { color: var(--muted); border-color: var(--border); }
  .tier-chip { font-weight: 800; letter-spacing: .02em; }
  .tier-chip svg { width: 15px; height: 15px; flex: none; }
  .tier-chip.legend { color: #1a1204; background: linear-gradient(135deg, #f59e0b, #fde68a 55%, #f59e0b); border-color: rgba(255,236,170,.7);
    box-shadow: 0 0 12px rgba(251,191,36,.35); }
  .tier-chip.pro { color: #06100f; background: linear-gradient(135deg, #14b8a6, #a7f3d0 55%, #2dd4bf); border-color: rgba(167,243,208,.6); }
  .tier-chip.supporter { color: var(--accent); background: rgba(var(--teal-rgb), .1); border-color: rgba(var(--teal-rgb), .5); }
  .member.pro, .member.legend, .hall-tab.legend.on, .hall-tab.pro.on { animation: none; background-size: 100% 100%; position: relative; overflow: hidden; }
  .member.pro::after, .member.legend::after, .tier-chip.pro::after, .tier-chip.legend::after, .hall-tab.legend.on::after, .hall-tab.pro.on::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 44%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.18) 56%, transparent 62%);
    transform: translateX(-130%); animation: shine-sweep 4.8s cubic-bezier(.45, .05, .25, 1) infinite; }
  .member.legend::after, .tier-chip.legend::after, .hall-tab.legend.on::after { animation-duration: 3.4s; }
  @keyframes shine-sweep { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }
  .member > *, .tier-chip > *, .hall-tab > * { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: reduce) { .member::after, .tier-chip::after, .hall-tab::after { animation: none; display: none; } }
  @property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes beam-spin { to { --beam: 360deg; } }
  @keyframes aurora-drift { 0% { background-position: 0% 0%, 100% 100%; } 100% { background-position: 60% 40%, 40% 60%; } }
  .player.m-pro::before, .player.m-legend::before {
    inset: -1px; padding: 1.5px; background-size: auto; background-repeat: no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
  .player.m-pro::before { background-image: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(45,212,191,.9) 320deg, #a7f3d0 345deg, transparent 360deg);
    animation: beam-spin 7s linear infinite; }
  .player.m-legend::before { padding: 2px;
    background-image: conic-gradient(from var(--beam), transparent 0deg 110deg, rgba(var(--lgrgb), .95) 160deg, var(--lg2) 175deg, transparent 180deg 290deg, rgba(var(--lgrgb), .95) 340deg, var(--lg2) 355deg, transparent 360deg);
    animation: beam-spin 5s linear infinite; }
  .player.m-pro::after { background-image: radial-gradient(ellipse 60% 50% at 20% 10%, rgba(45,212,191,.16), transparent 70%),
      radial-gradient(ellipse 55% 45% at 85% 90%, rgba(167,243,208,.09), transparent 70%);
    background-size: 160% 160%, 160% 160%; background-repeat: no-repeat;
    animation: pro-card-glow 4s ease-in-out infinite, aurora-drift 14s ease-in-out infinite alternate; }
  .player.m-legend::after { background-image: radial-gradient(ellipse 80% 55% at 50% -8%, rgba(var(--lgrgb), .30), transparent 70%),
      radial-gradient(ellipse 50% 40% at 90% 100%, rgba(var(--lgrgb), .12), transparent 70%);
    background-size: 140% 140%, 160% 160%; background-repeat: no-repeat;
    animation: legend-theme-glow 2.8s ease-in-out infinite, aurora-drift 10s ease-in-out infinite alternate; }
  @media (prefers-reduced-motion: reduce) { .player.m-pro::before, .player.m-legend::before, .player.m-pro::after, .player.m-legend::after { animation: none; } }
  .member.supporter { position: relative; overflow: hidden; }
  .member.supporter::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
    background: linear-gradient(105deg, transparent 40%, rgba(167,243,208,.45) 50%, transparent 60%);
    animation: shine-sweep 6.5s cubic-bezier(.45, .05, .25, 1) infinite; }
  .tier-chip.supporter::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
    background: linear-gradient(105deg, transparent 40%, rgba(167,243,208,.35) 50%, transparent 60%);
    animation: shine-sweep 6.5s cubic-bezier(.45, .05, .25, 1) infinite; }
  .player.m-supporter:not(.sus-1):not(.sus-2) { border-color: rgba(var(--teal-rgb), .32);
    background: radial-gradient(ellipse 70% 45% at 0% 0%, rgba(var(--teal-rgb), .08), transparent 70%), var(--surface); }
  @media (prefers-reduced-motion: reduce) { .member.supporter::after, .tier-chip.supporter::after { animation: none; display: none; } }
  .member.supporter { color: #e9d5ff; background: rgba(168,85,247,.18); border: 1px solid rgba(192,132,252,.6); box-shadow: 0 0 8px rgba(168,85,247,.25); }
  .tier-chip.supporter { color: #f3e8ff; background: linear-gradient(135deg, rgba(126,34,206,.55), rgba(168,85,247,.35)); border-color: rgba(192,132,252,.6); }
  .hall-tab.supporter.on { color: #f3e8ff; border-color: rgba(192,132,252,.7); background: linear-gradient(135deg, rgba(126,34,206,.5), rgba(168,85,247,.3)); }
  .hall-list.supporter li { border-color: rgba(192,132,252,.4); }
  .hall-list.supporter .hall-name { color: #d8b4fe; }
  .hall-list.supporter img { box-shadow: 0 0 0 2px #a855f7; }
  .plan.supporter { border-color: rgba(192,132,252,.45); }
  .member.supporter::after, .tier-chip.supporter::after { background: linear-gradient(105deg, transparent 38%, rgba(243,232,255,.5) 50%, transparent 62%);
    animation: supporter-flash 5s ease-in-out infinite; }
  @keyframes supporter-flash { 0%, 70% { transform: translateX(-130%); } 92%, 100% { transform: translateX(130%); } }
  .player.m-supporter:not(.sus-1):not(.sus-2) { border-color: rgba(168,85,247,.55); border-left-color: #a855f7;
    background: radial-gradient(ellipse 70% 50% at 0% 0%, rgba(168,85,247,.14), transparent 70%), var(--surface); }
  .player.m-supporter .who .name { color: #e9d5ff; }
  .player.m-pro:not(.sus-1):not(.sus-2) { border-color: rgba(52,211,153,.6); border-left-color: #10b981;
    background: linear-gradient(155deg, rgba(16,185,129,.20), rgba(13,148,136,.07) 48%, rgba(52,211,153,.15)), var(--surface); }
  .player.m-pro .who .name { color: #a7f3d0; }
  .player.m-pro::after { background-image:
      linear-gradient(115deg, transparent 30%, rgba(167,243,208,.10) 44%, rgba(255,255,255,.09) 50%, rgba(52,211,153,.10) 56%, transparent 70%),
      radial-gradient(ellipse 60% 50% at 20% 10%, rgba(52,211,153,.22), transparent 70%),
      radial-gradient(ellipse 55% 45% at 85% 90%, rgba(167,243,208,.12), transparent 70%);
    background-size: 300% 100%, 160% 160%, 160% 160%; background-repeat: no-repeat;
    animation: pro-card-glow 4s ease-in-out infinite, card-flow 9s ease-in-out infinite, card-breathe 4s ease-in-out infinite; }
  .player.m-legend::after { background-image:
      linear-gradient(115deg, transparent 28%, rgba(var(--lgrgb), .14) 43%, rgba(255,255,255,.12) 50%, rgba(var(--lgrgb), .14) 57%, transparent 72%),
      radial-gradient(ellipse 80% 55% at 50% -8%, rgba(var(--lgrgb), .34), transparent 70%),
      radial-gradient(ellipse 50% 40% at 90% 100%, rgba(var(--lgrgb), .16), transparent 70%);
    background-size: 300% 100%, 140% 140%, 160% 160%; background-repeat: no-repeat;
    animation: legend-theme-glow 2.8s ease-in-out infinite, card-flow 7s ease-in-out infinite, card-breathe 2.8s ease-in-out infinite; }
  @keyframes card-flow { 0%, 100% { background-position: 110% 0, 0% 0%, 100% 100%; } 50% { background-position: -10% 0, 50% 35%, 40% 60%; } }
  @keyframes card-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .member.supporter::after, .tier-chip.supporter::after { animation: none; display: none; } }
  @keyframes tag-pan { from { background-position: 200% 0; } to { background-position: 0% 0; } }
  .member.pro, .tier-chip.pro, .hall-tab.pro.on {
    background: linear-gradient(110deg, #2dd4bf, #a7f3d0 25%, #fde68a 50%, #a7f3d0 75%, #2dd4bf); background-size: 200% 100%;
    animation: tag-pan 2.4s linear infinite; }
  .member.legend, .tier-chip.legend, .hall-tab.legend.on {
    background: linear-gradient(110deg, var(--lg1, #f59e0b), var(--lg2, #fde68a) 25%, #fff7d6 50%, var(--lg2, #fde68a) 75%, var(--lg1, #f59e0b));
    background-size: 200% 100%; animation: tag-pan 2s linear infinite; }
  .member.legend { box-shadow: 0 0 12px rgba(var(--lgrgb, 251,191,36), .55); border-color: rgba(255,255,255,.45); }
  .member.legend svg:first-child { animation: legend-crown 2.6s ease-in-out infinite; }
  .member.legend svg:last-child { animation: pro-eye 3.2s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .member.pro, .member.legend, .tier-chip.pro, .tier-chip.legend, .hall-tab.on { animation: none; } }
  .player.m-supporter { isolation: isolate; }
  .player.m-supporter::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; padding: 1.5px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    background-image: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(168,85,247,.85) 320deg, #e9d5ff 345deg, transparent 360deg);
    animation: beam-spin 8s linear infinite; }
  .player.m-supporter::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
    background-image: radial-gradient(ellipse 60% 50% at 15% 10%, rgba(168,85,247,.13), transparent 70%),
      radial-gradient(ellipse 50% 45% at 90% 95%, rgba(192,132,252,.07), transparent 70%);
    background-size: 160% 160%, 160% 160%; background-repeat: no-repeat;
    animation: aurora-drift 16s ease-in-out infinite alternate, card-breathe 5s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .player.m-supporter::before, .player.m-supporter::after { animation: none; } }
  .player[class*="beam-"] { isolation: isolate; }
  .player[class*="beam-"]::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; padding: 2px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    background-image: conic-gradient(from var(--beam), transparent 0deg 200deg, rgba(var(--beam-rgb), .95) 300deg, rgba(255,255,255,.85) 340deg, transparent 360deg);
    background-size: auto; animation: beam-spin 3.6s linear infinite; }
  .player.beam-cheat { --beam-rgb: 239,68,68; }
  .player.beam-smurf { --beam-rgb: 245,158,11; }
  .player.beam-boosted { --beam-rgb: 96,165,250; }
  @media (prefers-reduced-motion: reduce) { .player[class*="beam-"]::before { animation: none; } }
  button.tier-chip { font: inherit; font-size: 13px; font-weight: 800; padding: 5px 11px; cursor: pointer; line-height: inherit; }
  button.tier-chip:hover { filter: brightness(1.08); }
  .tier-chip.legend { box-shadow: none; }
  .mem-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
  .mem-head b { font-size: 17px; }
  .mem-head .member { margin-top: 0; }
  .mem-perks { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
  .tier-chip:where(.legend), .hall-tab:where(.legend) { margin: 0; }
  .plan:where(.legend) { margin: 0; color: inherit; font-size: 13px; }
  .mem-head:where(.legend) { margin: 0; color: inherit; font-size: inherit; }
  .member:where(.legend) { margin: 3px 0 0; }
  .rep-train { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(var(--teal-rgb), .4); background: var(--surface-2); }
  .rep-train h4 { margin: 0 0 8px; font-size: 13.5px; }
  .rep-train ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .rep-train li { display: grid; gap: 2px; font-size: 13px; line-height: 1.4; }
  .rep-train li b { color: var(--high); font-size: 12.5px; }
  .rep-train p { margin: 0; color: var(--muted); font-size: 13px; }
  .maps-more { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
  .maps-more > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; font-size: 13px; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 8px; }
  .maps-more > summary::-webkit-details-marker { display: none; }
  .maps-more > summary::before { content: "▸"; transition: transform .15s; }
  .maps-more[open] > summary::before { transform: rotate(90deg); }
  .maps-more > summary:hover { color: var(--text); }
  .maps-more > .focus-maps { padding: 0 12px 10px; }