/* Scout's site. The app's own look: night background, soul cyan for us, rose for them, amber for «Про»;
   Unbounded for headings, Onest for text. Layout: a centred column, account and admin pages with a side menu. */
:root {
  color-scheme: dark;
  --bg: #0f1015; --bg-2: #15161d; --bg-3: #1b1d26; --edge: rgba(255, 255, 255, 0.07); --edge-2: rgba(255, 255, 255, 0.13);
  --text: #eef0f4; --muted: #949aaa; --faint: #6f7585;
  --ours: #3ee0cf; --ours-2: rgba(62, 224, 207, 0.13); --ours-ink: #061412;
  --theirs: #ff5c7a; --theirs-2: rgba(255, 92, 122, 0.13);
  --pro: #ffc56b; --pro-2: rgba(255, 197, 107, 0.13); --good: #59e39a;
  --ui: "Onest", "Segoe UI", system-ui, sans-serif; --display: "Unbounded", "Onest", sans-serif;
  --r: 14px; --r-l: 20px; --pill: 999px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px)); --gutter-r: max(20px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--text);
  font: 400 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; background: var(--bg);
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 560px at 6% -12%, rgba(62, 224, 207, 0.11), transparent 62%),
              radial-gradient(820px 520px at 100% -8%, rgba(255, 92, 122, 0.08), transparent 60%); }
a { color: var(--ours); text-underline-offset: 3px; text-decoration-color: rgba(62, 224, 207, 0.4); }
a:hover { text-decoration-color: var(--ours); }
:focus-visible { outline: 2px solid var(--ours); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 12px; }
h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.12; }
h2 { font-size: clamp(21px, 3vw, 28px); line-height: 1.2; }
h3 { font-size: 17px; line-height: 1.3; }
h4 { font-size: 16px; margin: 0 0 6px; }
p { margin: 0 0 12px; }
small { color: var(--muted); font-size: 0.82em; }
.muted { color: var(--muted); } .bad { color: var(--theirs); }
.fine { color: var(--faint); font-size: 14px; }
.big { font-size: 19px; font-weight: 600; margin: 4px 0 8px; }

/* ---- the frame ---- */
.top > .bar, footer > .bar { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.top { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); background: rgba(15, 16, 21, 0.78);
  border-bottom: 1px solid var(--edge); }
.top .bar { display: flex; align-items: center; gap: 22px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand img { width: 58px; height: 58px; border-radius: 15px; }
.brand span { display: grid; gap: 3px; }
.brand b { display: block; font: 500 22px/1 var(--display); }
.brand small { font-size: 13px; line-height: 1; }
nav.pub { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav.pub a, nav.acct a { color: var(--muted); text-decoration: none; padding: 7px 11px; border-radius: 10px; font-weight: 500; }
nav.pub a:hover, nav.acct a:hover, nav.pub a[aria-current] { color: var(--text); background: var(--bg-3); }
nav.acct { display: flex; gap: 6px; align-items: center; }
nav.acct a.navbtn { color: var(--text); border: 1px solid var(--edge-2); display: inline-flex; align-items: center; gap: 8px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava { width: 22px; height: 22px; border-radius: 50%; flex: none; }
nav.acct a.navbtn.primary { background: var(--ours); color: var(--ours-ink); border-color: transparent; }
nav.acct a.navbtn.dl { color: var(--ours); border-color: rgba(62, 224, 207, 0.45); background: var(--ours-2); }
nav.acct a.navbtn.dl:hover { background: rgba(62, 224, 207, 0.22); }
/* the phone header: one row (logo, download, menu); the menu drops down with the sections, sign-in and RU / EN */
.mdl, .mmenu { display: none; }
@media (max-width: 1100px) {
  nav.pub, nav.acct { display: none; }
  .top .bar { flex-wrap: nowrap; }
  .mdl { display: grid; place-items: center; margin-left: auto; width: 42px; height: 42px; border-radius: 12px; color: var(--ours);
    background: var(--ours-2); border: 1px solid rgba(62, 224, 207, 0.45); }
  .mdl svg { width: 20px; height: 20px; }
  .mmenu { display: block; border: 0; padding: 0; }
  .mmenu summary { display: grid; grid-template-columns: 20px; justify-content: center; align-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border-radius: 12px;
    border: 1px solid var(--edge-2); background: var(--bg-3); cursor: pointer; }
  .mmenu summary::after, .mmenu[open] summary::after { content: none; }
  .mmenu summary i { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.2s, opacity 0.2s; }
  .mmenu[open] summary i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mmenu[open] summary i:nth-child(2) { opacity: 0; }
  .mmenu[open] summary i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mpanel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 14px; padding: 14px var(--gutter-r) 18px var(--gutter-l);
    background: #0f1015; border-bottom: 1px solid var(--edge-2); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.9); }
  .mpanel nav { display: grid; gap: 2px; }
  .mpanel nav a { padding: 12px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 17px; }
  .mpanel nav a[aria-current] { color: var(--ours); background: var(--ours-2); }
  .macct { display: flex; flex-wrap: wrap; gap: 8px; }
  .macct a { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px;
    border-radius: 12px; border: 1px solid var(--edge-2); color: var(--text); text-decoration: none; font-weight: 600; }
  .macct a.navbtn.primary { background: var(--ours); color: var(--ours-ink); border-color: transparent; }
  .macct a.navbtn.dl { display: none; }
  .mpanel .langsw { justify-self: start; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--edge-2); }
  .mpanel .langsw a { padding: 7px 14px; border-radius: 999px; font: 700 13px/1 var(--ui); color: var(--muted); text-decoration: none; }
  .mpanel .langsw a[aria-current] { color: var(--ours-ink); background: var(--ours); }
}
@media (min-width: 601px) and (max-width: 1100px) {
  /* a tablet: the menu is a card under the button, not a sheet across the screen */
  .mpanel { left: auto; right: var(--gutter-r); top: calc(100% + 8px); width: 340px; padding: 14px; border: 1px solid var(--edge-2);
    border-radius: 18px; }
}

/* RU / EN: a small pill pair at the end of the header */
nav.acct .langsw { display: inline-flex; gap: 2px; margin-left: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--edge-2); }
nav.acct .langsw a { padding: 5px 9px; border-radius: 999px; font: 700 12px/1 var(--ui); letter-spacing: 0.04em; color: var(--muted); }
nav.acct .langsw a:hover { color: var(--text); background: var(--bg-3); }
nav.acct .langsw a[aria-current] { color: var(--ours-ink); background: var(--ours); }
.navbtn svg, .btn svg { width: 18px; height: 18px; flex: none; }
main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 40px var(--gutter-r) 72px var(--gutter-l); }
footer { border-top: 1px solid var(--edge); color: var(--faint); font-size: 14.5px; }
footer .bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px; }
footer .flinks { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--muted); text-decoration: none; } footer a:hover { color: var(--text); }

/* ---- buttons, forms, notes ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px;
  border-radius: 12px; border: 1px solid var(--edge-2); background: var(--bg-3); color: var(--text); font: 600 15px/1.2 var(--ui);
  text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.btn:hover { background: #23262f; border-color: rgba(255, 255, 255, 0.22); }
.btn:active { transform: scale(0.985); }
.btn.primary { background: var(--ours); color: var(--ours-ink); border-color: transparent; }
.btn.primary:hover { background: #66ecdd; }
.btn.big { min-height: 52px; padding: 12px 24px; font-size: 16px; }
.btn.steam { width: 100%; background: #1b2838; border-color: #2a475e; color: #e5eef6; }
.btn.steam:hover { background: #22344a; }
.btn.steam svg { width: 20px; height: 20px; }
.btn.danger { border-color: rgba(255, 92, 122, 0.5); color: #ffb6c4; background: transparent; }
.btn.danger:hover { background: var(--theirs-2); }
.btn.ghost { background: transparent; width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.stack { display: grid; gap: 8px; margin-bottom: 12px; }
.form { display: grid; gap: 14px; }
.form.inline { display: flex; gap: 10px; margin: 0 0 18px; }
.form.inline input { flex: 1; min-width: 0; }
label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); font-weight: 500; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--edge-2);
  background: rgba(0, 0, 0, 0.28); color: var(--text); font: 400 16px/1.4 var(--ui); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ours); box-shadow: 0 0 0 3px var(--ours-2); }
.note { padding: 12px 15px; border-radius: 12px; margin-bottom: 16px; background: var(--theirs-2);
  border: 1px solid rgba(255, 92, 122, 0.35); color: #ffd5de; }
.note.ok { background: var(--ours-2); border-color: rgba(62, 224, 207, 0.35); color: #cbfbf5; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--faint); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--edge); }
.links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 16px; font-size: 14.5px; }

/* ---- blocks ---- */
.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.card { background: var(--bg-2); border: 1px solid var(--edge); border-radius: var(--r-l); padding: 22px; margin-bottom: 16px; }
.card h3 { margin-bottom: 10px; }
.card.danger { border-color: rgba(255, 92, 122, 0.25); }
.auth { padding: 30px 28px; }
.auth h1 { font-size: 28px; margin-bottom: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid2 .card { margin-bottom: 0; }
.grid2 + .card, .grid2 + .grid2 { margin-top: 16px; }
.pagehead { max-width: 720px; margin-bottom: 36px; }
.lead { color: var(--muted); font-size: 18px; max-width: 62ch; }
.eyebrow { color: var(--ours); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; margin-bottom: 14px; }
.tag { display: inline-block; font: 600 12.5px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 9px;
  border-radius: var(--pill); background: var(--bg-3); color: var(--muted); }
.tag.builds { background: var(--ours-2); color: var(--ours); }
.tag.pro { background: var(--pro-2); color: var(--pro); }

/* home: the hero over market-style charts drifting left (candles cyan up, rose down) and the eye turning behind;
   on the right the lobby as Scout shows it while the map loads, rows landing one by one under a scan line */
html, body { overflow-x: clip; }
.free { --acc: #c9d1e3; } .builds { --acc: var(--ours); } .pro { --acc: var(--pro); }
.hero2 { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px; align-items: center; min-height: min(840px, calc(100svh - 64px)); margin-top: -40px; padding: 56px 0 72px; }
.hero2 > :not(.hero-bg) { position: relative; z-index: 1; }
.hero2 h1 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.08; }
.hero-text .lead { margin-bottom: 4px; }
.hero-bg { position: absolute; inset: 0 calc(50% - 50vw); z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 60% 40%, #000 35%, transparent 88%);
          mask-image: radial-gradient(ellipse 80% 90% at 60% 40%, #000 35%, transparent 88%); }
.hero-bg .grid { position: absolute; inset: 0; background-size: 64px 64px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); }
.market { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 30%, #000 60%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 30%, #000 60%); }
.mk { position: absolute; left: 0; display: block; max-width: none; animation: drift linear infinite; }
@keyframes drift { to { transform: translateX(calc(-1 * var(--w))); } }
.mk.candles { top: 50%; opacity: 0.55; animation-duration: 110s; }
.mk.line { top: 12%; opacity: 0.4; animation-duration: 170s; }
.eye { position: absolute; left: calc(50% + 340px); top: 50%; width: 1000px; aspect-ratio: 1; opacity: 0.13;
  background: linear-gradient(160deg, var(--ours) 30%, var(--theirs));
  -webkit-mask: url(glyph.png) center / contain no-repeat; mask: url(glyph.png) center / contain no-repeat;
  transform: translate(-50%, -50%); animation: eye-turn 160s linear infinite; }
@keyframes eye-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }

.lobby { position: relative; margin: 0; padding: 18px; border-radius: 24px; overflow: hidden; background: rgba(21, 22, 29, 0.74);
  border: 1px solid var(--edge-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(62, 224, 207, 0.06), 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.lobby-top { display: flex; align-items: center; gap: 16px; padding: 2px 4px 14px; margin-bottom: 14px; border-bottom: 1px solid var(--edge);
  color: var(--muted); font-size: 14px; white-space: nowrap; }
.lobby-live { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.lobby-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ours); box-shadow: 0 0 0 0 rgba(62, 224, 207, 0.6);
  animation: live 1.8s ease-out infinite; }
@keyframes live { 70%, 100% { box-shadow: 0 0 0 8px rgba(62, 224, 207, 0); } }
.lobby-load { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.lobby-load .bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lobby-load .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ours), #9ef7ee); transform-origin: left;
  animation: load 2.6s cubic-bezier(0.3, 0.7, 0.4, 1) 0.2s both; }
@keyframes load { from { transform: scaleX(0.05); } }
.lobby-done { color: var(--ours); font-weight: 600; animation: appear 0.4s ease-out 2.5s both; }
@keyframes appear { from { opacity: 0; } }
/* the two sides as the game names them, like a scoreboard over the columns */
.lobby-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px;
  margin: 0 0 14px; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--edge);
  background: linear-gradient(90deg, rgba(62, 224, 207, 0.12), transparent 42%, transparent 58%, rgba(255, 92, 122, 0.12)); }
.lobby-vs b { font: 500 16px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-vs b.ours { color: var(--ours); text-align: right; text-shadow: 0 0 18px rgba(62, 224, 207, 0.45); }
.lobby-vs b.theirs { color: var(--theirs); text-shadow: 0 0 18px rgba(255, 92, 122, 0.45); }
.lobby-vs span { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--bg-3); border: 1px solid var(--edge-2); }
.lobby-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lcol h3 { font: 700 13.5px/1 var(--display); letter-spacing: 0.04em; margin: 0 4px 10px; }
.lcol.ours h3 { color: var(--ours); } .lcol.theirs h3 { color: var(--theirs); }
.lcol ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lp { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: 13px; background: var(--glass); border: 1px solid var(--edge);
  animation: lp-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.4s + var(--i) * 0.11s); }
@keyframes lp-in { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } }
.lp.me { background: linear-gradient(90deg, var(--ours-2), var(--glass) 70%); border-color: rgba(62, 224, 207, 0.3); }
.lp:has(.lp-party) { box-shadow: inset 3px 0 0 #b79cff; }
.lp:has(.lp-party[data-p="c"]) { box-shadow: inset 3px 0 0 #b6e35a; }
.lp-hero { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; background: var(--bg-3); }
.ours .lp-hero { box-shadow: 0 0 0 1.5px rgba(62, 224, 207, 0.55); } .theirs .lp-hero { box-shadow: 0 0 0 1.5px rgba(255, 92, 122, 0.55); }
.lp-who { min-width: 0; line-height: 1.25; }
.lp-who b { font-size: 14px; font-weight: 600; unicode-bidi: isolate; }
.lp-who em { font: 600 12px/1 var(--ui); font-style: normal; padding: 3px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.lp-you { color: var(--ours); background: var(--ours-2); }
.lp-party { color: #b79cff; background: rgba(183, 156, 255, 0.12); }
.lp-party[data-p="c"] { color: #b6e35a; background: rgba(182, 227, 90, 0.12); }   /* a second party on one side: lime */
.lp-who small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-form { display: flex; gap: 3px; margin-top: 5px; }
.lp-form i { width: 12px; height: 4px; border-radius: 2px; background: rgba(255, 92, 122, 0.55); }
.lp-form i.w { background: var(--ours); }
.lp-rank { display: grid; justify-items: center; gap: 3px; }
.lp-rank img { width: 46px; height: auto; aspect-ratio: 512 / 404; object-fit: contain;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--rc) 50%, transparent)); }
.lp-rank b { font: 700 14px/1 var(--display); font-variant-numeric: tabular-nums; }
.lp-rank b.good { color: var(--ours); } .lp-rank b.bad { color: var(--theirs); }
.lobby-hint { margin: 14px 2px 0; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; color: #dccfff;
  background: rgba(183, 156, 255, 0.08); border: 1px solid rgba(183, 156, 255, 0.25); animation: appear 0.5s ease-out 2.3s both; }
.lobby-hint b { color: #b79cff; }
.scan { position: absolute; inset: 0 0 auto; height: 140px; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent, rgba(62, 224, 207, 0.08) 75%, rgba(62, 224, 207, 0.45) 99%, transparent);
  animation: scan 2s cubic-bezier(0.45, 0, 0.55, 1) 0.3s both; }
@keyframes scan { from { opacity: 1; transform: translateY(-140px); } 85% { opacity: 1; } to { opacity: 0; transform: translateY(640px); } }

/* the three parts of Scout, each in its plan's colour: a light that follows the pointer, «Про» with a running border */
.tiers { padding: 24px 0 80px; }
.tiers-head { max-width: 780px; margin-bottom: 30px; }
.tiers-head h2, .final h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.15; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 30px;
  border-radius: 24px; background: var(--glass); border: 1px solid var(--edge); color: var(--text); text-decoration: none;
  transition: border-color 0.25s; }
.tile.free { grid-column: span 5; } .tile.builds { grid-column: span 7; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; transition: opacity 0.3s;
  background: radial-gradient(460px circle at var(--mx, 30%) var(--my, 0%), color-mix(in srgb, var(--acc) 15%, transparent), transparent 65%); }
.tile::after { content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: 0.8; }
.tile:hover { border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.tile:hover::before { opacity: 1; }
.tile h3 { font-size: clamp(24px, 2.2vw, 30px); margin: 0; color: var(--acc); }
.tile p { color: var(--muted); max-width: 58ch; margin: 0; }
.plan-chip { align-self: flex-start; font: 600 13.5px/1 var(--ui); padding: 7px 12px; border-radius: 999px; color: var(--acc);
  background: color-mix(in srgb, var(--acc) 11%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent); }
.perks { list-style: none; padding: 0; margin: 6px 0 2px; display: grid; gap: 10px 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.perks li { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 15px; }
.perks i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: var(--acc);
  background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent),
  0 0 14px -2px color-mix(in srgb, var(--acc) 55%, transparent); }
.perks i svg { width: 13px; height: 13px; }
.perks li.base { color: var(--muted); font-weight: 400; grid-column: 1 / -1; }
.perks li.base i { color: var(--muted); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px var(--edge-2); }
.waysrow { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.waysrow > img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1.5px rgba(62, 224, 207, 0.55); }
.ways { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--edge); }
.ways button { padding: 7px 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 500 14.5px/1.2 var(--ui); color: var(--muted); transition: color 0.15s, background 0.15s; }
.ways button:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.ways button[aria-pressed="true"] { color: var(--ours-ink); background: var(--ours); font-weight: 600; }
.phases[hidden] { display: none; }
.phases img { animation: item-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--n) * 40ms); }
@keyframes item-in { from { opacity: 0; transform: translateY(4px) scale(0.94); } }
.tile-more { align-self: flex-start; font-size: 14px; color: var(--acc); }
.waysrow small { color: var(--faint); font-size: 13.5px; }
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: auto; padding-top: 14px; }
.ph > span { display: block; color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.ph > div { display: flex; gap: 8px; flex-wrap: wrap; }
.ph img { width: 56px; height: 56px; padding: 5px; border-radius: 12px; object-fit: contain; background: var(--bg-2);
  border: 1px solid var(--edge); border-top: 3px solid; }
.ph img.w { border-top-color: #e3a54b; } .ph img.v { border-top-color: #59c76a; } .ph img.s { border-top-color: #b07cf0; }
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.tile.pro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 48px;
  align-content: start; border-color: transparent; animation: spin 7s linear infinite;
  background: linear-gradient(160deg, #1f1c1a, var(--bg-2) 55%) padding-box,
              conic-gradient(from var(--spin), transparent 0 55%, var(--pro) 72%, #ff8f6b 80%, transparent 92%) border-box,
              linear-gradient(var(--edge-2), var(--edge-2)) border-box; }
@keyframes spin { to { --spin: 360deg; } }
.tile.pro > * { grid-column: 1; }
.tile.pro > .plan-chip { justify-self: start; }
.tile.pro > .calls { grid-column: 2; grid-row: 1 / span 5; align-self: end; }
.calls { display: grid; gap: 10px; align-content: center; }
.call { display: flex; gap: 16px; align-items: baseline; margin: 0; padding: 13px 16px; border-radius: 14px; color: var(--text);
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--edge); font-size: 15px; }
.tile .call { max-width: none; }
.call time { flex: none; min-width: 62px; font: 700 14px/1 var(--display); color: var(--pro); font-variant-numeric: tabular-nums; }
.call.coach { border-color: rgba(255, 197, 107, 0.35); background: linear-gradient(90deg, var(--pro-2), rgba(0, 0, 0, 0.3) 70%); }

/* fair play: big and plain — the game feeds Scout one way only (packets run along the read line), nothing goes back;
   then what Scout sees and what it never does */
.fair3 { position: relative; overflow: hidden; margin-bottom: 80px; padding: 64px 56px 44px; border-radius: 32px;
  border: 1px solid rgba(62, 224, 207, 0.2);
  background: radial-gradient(700px 360px at 50% 0%, rgba(62, 224, 207, 0.1), transparent 70%), var(--bg-2); }
.fair-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.fair-head h2 { font-size: clamp(32px, 4vw, 52px); margin: 18px 0 12px; }
.fair-head .lead { margin: 0 auto; }
.safe-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 600;
  font-size: 14px; color: var(--good); background: rgba(89, 227, 154, 0.1); border: 1px solid rgba(89, 227, 154, 0.35); }
.safe-chip svg { width: 18px; height: 18px; }
.flow { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; align-items: center; gap: 0; max-width: 980px;
  margin: 0 auto 44px; }
.node { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; border-radius: 22px; text-align: center;
  background: var(--glass); border: 1px solid var(--edge-2); }
.node b { font: 500 18px/1.2 var(--display); }
.node small { color: var(--muted); font-size: 14px; }
.node-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--text);
  background: var(--bg-3); }
.node-ico svg { width: 26px; height: 26px; }
.node img { border-radius: 12px; }
.node.scout { border-color: rgba(62, 224, 207, 0.45); box-shadow: 0 0 40px -10px rgba(62, 224, 207, 0.35); }
.pipe { display: grid; gap: 34px; padding: 0 2px; }
.track { position: relative; height: 2px; }
.track span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 14.5px; }
.track.read { background: linear-gradient(90deg, rgba(62, 224, 207, 0.25), var(--ours)); }
.track.read::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-right: 0;
  border-left: 9px solid var(--ours); }
.track.read span { bottom: 12px; color: var(--ours); font-weight: 600; }
.track.read i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--ours);
  box-shadow: 0 0 12px var(--ours); animation: packet 2.4s linear infinite; animation-delay: calc(var(--k) * -0.8s); }
@keyframes packet { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }
.track.write { background: repeating-linear-gradient(90deg, rgba(255, 92, 122, 0.55) 0 8px, transparent 8px 16px); }
.track.write span { top: 16px; color: #ffb6c4; }
.track.write em { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-weight: 700; color: var(--theirs);
  background: var(--bg-2); border: 1.5px solid var(--theirs); }
.fcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.fcard { padding: 26px 28px; border-radius: 22px; background: var(--glass); border: 1px solid var(--edge); }
.fcard h3 { font-size: 20px; margin-bottom: 16px; }
.fcard.yes h3 { color: var(--ours); } .fcard.no h3 { color: var(--theirs); }
.fcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fcard li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.fcard li::before { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px;
  font-weight: 700; margin-top: 1px; }
.fcard.yes li::before { content: "✓"; color: var(--ours); background: var(--ours-2); }
.fcard.no li::before { content: "✕"; color: var(--theirs); background: var(--theirs-2); }
.fair3 > .fine { text-align: center; margin: 0; }

/* how to install: four steps in a row, numbered because they are a sequence */
.howto { margin-bottom: 80px; }
.howto h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 24px; }
.install { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.install li { counter-increment: step; display: grid; align-content: start; gap: 8px; padding: 24px 22px; border-radius: 20px;
  background: var(--glass); border: 1px solid var(--edge); }
.install li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font: 700 15px/1 var(--display); color: var(--ours); background: var(--ours-2); border: 1px solid rgba(62, 224, 207, 0.4);
  margin-bottom: 6px; }
.install b { font-size: 16.5px; }
.install span { color: var(--muted); font-size: 14.5px; }
kbd { font: 600 14px/1 var(--ui); padding: 3px 7px; border-radius: 6px; color: var(--text); background: var(--bg-3);
  border: 1px solid var(--edge-2); border-bottom-width: 2px; white-space: nowrap; }
.pagehead .btn + .fine { margin-top: 10px; }
.pagehead > .btn { margin-top: 22px; }
.final { text-align: center; padding: 8px 0 24px; }
.final .lead { margin: 0 auto; }
.final .row { justify-content: center; }
.planrow { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pchip { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 18px; border-radius: 999px; font-size: 14px;
  color: var(--muted); text-decoration: none; border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
  background: color-mix(in srgb, var(--acc) 7%, transparent); transition: background 0.2s; }
.pchip b { color: var(--acc); font-weight: 600; }
.pchip:hover { background: color-mix(in srgb, var(--acc) 15%, transparent); }

@media (max-width: 1100px) {
  .hero2 { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px; }
  .eye { left: 50%; top: 62%; }
}
@media (max-width: 860px) {
  .bento > .tile { grid-column: 1 / -1; }
  .tile.pro { display: flex; }
  .fair3 { padding: 40px 20px 30px; border-radius: 24px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* stacked: the pipe becomes two labels between the boxes, the read one pointing down, the write one struck out */
  .pipe { gap: 8px; padding: 0; }
  .track { height: auto; background: none !important; display: flex; justify-content: center; }
  .track i, .track.read::after, .track.write em { display: none; }
  .track span { position: static; transform: none; white-space: normal; text-align: center; padding: 9px 14px; border-radius: 12px;
    font-size: 14px; }
  .track.read span { background: var(--ours-2); border: 1px solid rgba(62, 224, 207, 0.4); }
  .track.read span::before { content: "↓ "; }
  .track.write span { background: var(--theirs-2); border: 1px dashed rgba(255, 92, 122, 0.5); }
  .track.write span::before { content: "✕ "; color: var(--theirs); }
  .fcards { grid-template-columns: minmax(0, 1fr); }
  .install { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hero2 { padding-top: 36px; }
  .hero2 .row .btn, .final .row .btn { flex: 1 1 100%; }
  .lobby { padding: 12px; border-radius: 20px; }
  .lobby-cols { grid-template-columns: minmax(0, 1fr); }
  .lobby-top { flex-wrap: wrap; gap: 8px 14px; }
  .lobby-load { order: 3; flex-basis: 100%; }
  .lobby-vs { padding: 9px 10px; gap: 8px; } .lobby-vs b { font-size: 14px; white-space: normal; }
  .lp { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; }
  .lp-hero { width: 34px; height: 34px; border-radius: 9px; }
  .lp-rank { grid-auto-flow: column; align-items: center; gap: 6px; } .lp-rank img { width: 34px; }
  .lp-form { margin-top: 3px; }
  .tile { padding: 22px; }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .install { grid-template-columns: minmax(0, 1fr); }
  nav.acct a.navbtn.dl { padding-inline: 9px; font-size: 0; gap: 0; }
  nav.acct a.navbtn.dl svg { width: 20px; height: 20px; }
}

/* features: a radar on top with the twelve of a lobby as blips, a sticky menu with a sliding pill, then each plan's
   band (its own background) of cards that each show a small piece of what Scout puts on screen */
.fhero { position: relative; isolation: isolate; text-align: center; margin-top: -40px; padding-top: 24px; --R: min(560px, 44vw); }
.radar { position: relative; height: var(--R); overflow: hidden; margin: 0 auto -56px; max-width: calc(var(--R) * 2 + 120px);
  -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.radar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62, 224, 207, 0.5), transparent); }
.rings i { position: absolute; left: 50%; bottom: 0; width: calc(var(--k) / 7 * var(--R) * 2); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07); transform: translate(-50%, 50%); }
.sweep { position: absolute; left: 50%; bottom: 0; width: calc(var(--R) * 2); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, 50%); animation: sweep 6s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 300deg, rgba(62, 224, 207, 0.03) 310deg, rgba(62, 224, 207, 0.2) 359deg,
              rgba(62, 224, 207, 0.7) 360deg); }
@keyframes sweep { from { transform: translate(-50%, 50%) rotate(0deg); } to { transform: translate(-50%, 50%) rotate(360deg); } }
.blip { position: absolute; left: calc(50% + cos(var(--a)) * var(--r) * var(--R)); bottom: calc(sin(var(--a)) * var(--r) * var(--R));
  transform: translate(-50%, 50%); }
.blip .hp { width: 40px; height: 40px; border-radius: 50%; opacity: 0.55; animation: ping 6s ease-out infinite; animation-delay: var(--pd); }
@keyframes ping { 0% { opacity: 1; transform: scale(1.18); } 35%, 100% { opacity: 0.45; transform: scale(1); } }
.js .fhero:not(.in) .blip { opacity: 0; }
.fhero.in .blip { animation: pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 0.07s); }
.fhero-text { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.fhero h1 { font-size: clamp(36px, 5vw, 66px); line-height: 1.05; }
.fhero .lead { margin: 0 auto; }

.fnav { position: sticky; top: 90px; z-index: 5; display: flex; justify-content: center; margin: 36px 0 12px; pointer-events: none; }
.fnav-in { position: relative; display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; pointer-events: auto;
  background: rgba(21, 22, 29, 0.82); border: 1px solid var(--edge-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.9); }
.fnav a { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 18px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-weight: 600; transition: color 0.25s; white-space: nowrap; }
.fnav a small { font-size: 13.5px; font-weight: 500; color: inherit; opacity: 0.75; }
.fnav a:hover { color: var(--text); }
.fnav a[aria-current] { color: #12141a; }
.fnav .pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: #c9d1e3;
  transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), background 0.4s; }
.fnav .pill[data-plan="builds"] { background: var(--ours); } .fnav .pill[data-plan="pro"] { background: var(--pro); }

.fband { position: relative; isolation: isolate; padding: 64px 0 56px; scroll-margin-top: 130px; }
.fband-bg { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.fband-bg > div { position: absolute; inset: 0; }
.fband-head { max-width: 780px; margin-bottom: 30px; }
.fband-head h2 { font-size: clamp(32px, 3.8vw, 52px); color: var(--acc); margin: 16px 0 10px; }
.fgroup { display: flex; align-items: center; gap: 14px; margin: 38px 0 16px; font: 500 24px/1.2 var(--display); scroll-margin-top: 140px; }
.fgroup::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 45%, transparent), transparent); }
.fband-head + .fx-grid { margin-top: 0; }

.bg-dots { background-image: radial-gradient(rgba(201, 209, 227, 0.13) 1px, transparent 1.6px); background-size: 24px 24px; }
.bg-dots::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(201, 209, 227, 0.75) 1.2px, transparent 1.8px);
  background-size: 24px 24px; -webkit-mask: radial-gradient(circle, #000, transparent 70%) 0 30% / 620px 620px no-repeat;
  mask: radial-gradient(circle, #000, transparent 70%) 0 30% / 620px 620px no-repeat; animation: dot-sweep 16s ease-in-out infinite alternate; }
@keyframes dot-sweep { to { -webkit-mask-position: 100% 70%; mask-position: 100% 70%; } }
.bg-items img { position: absolute; left: calc(var(--x) * 1%); bottom: -90px; width: 64px; height: 64px; border-radius: 14px; opacity: 0;
  animation: float var(--t) linear var(--d) infinite; }
@keyframes float { 0% { transform: translateY(0) rotate(-10deg); opacity: 0; } 12%, 85% { opacity: 0.14; }
  100% { transform: translateY(-1500px) rotate(10deg); opacity: 0; } }
.bg-glow { background: radial-gradient(520px 360px at 84% 22%, rgba(255, 197, 107, 0.1), transparent 70%),
                        radial-gradient(480px 320px at 8% 78%, rgba(255, 143, 107, 0.06), transparent 70%); }

.fx-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.fx { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: 22px;
  background: rgba(21, 22, 29, 0.78); border: 1px solid var(--edge); transition: border-color 0.25s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px -30px rgba(0, 0, 0, 0.9); }
.fx.w2 { grid-column: span 2; } .fx.w3 { grid-column: span 3; } .fx.w4 { grid-column: span 4; }
.fx::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.45; transition: opacity 0.3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc) 13%, transparent), transparent 65%); }
.fx::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; opacity: 0.6;
  background: linear-gradient(90deg, transparent, var(--acc), transparent); }
.fx:hover { border-color: color-mix(in srgb, var(--acc) 38%, transparent); }
.fx:hover::before { opacity: 1; }
.fx-vis { flex: 1; display: grid; align-content: center; gap: 12px; min-height: 220px; padding: 24px 24px 8px; }
.fx-text { padding: 8px 24px 24px; }
.fx-text h4 { font: 500 18px/1.25 var(--display); margin: 0 0 6px; }
.fx-text p { margin: 0; color: var(--muted); font-size: 14.5px; }
.js .fx:not(.in) .pop { opacity: 0; }
.fx.in .pop { animation: pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.1s + var(--i) * 0.08s); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.94); } }
@keyframes grow { from { width: 0; } }
.vnote { color: var(--faint); font-size: 13px; }
.hp { display: block; border-radius: 12px; object-fit: cover; background: var(--bg-3); }
.hp.ours { box-shadow: 0 0 0 1.5px rgba(62, 224, 207, 0.6); } .hp.theirs { box-shadow: 0 0 0 1.5px rgba(255, 92, 122, 0.6); }
.rk { display: block; height: auto; aspect-ratio: 512 / 404; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--rc) 55%, transparent)); }
.it-ic { display: block; padding: 3px; border-radius: 11px; object-fit: contain; background: var(--bg-2); border: 1px solid var(--edge);
  border-top: 3px solid var(--edge-2); }
.it-ic.w { border-top-color: #e3a54b; } .it-ic.v { border-top-color: #59c76a; } .it-ic.s { border-top-color: #b07cf0; }

/* lobby */
.t12 { display: flex; justify-content: center; gap: 10px; }
.t12 + .t12 { margin-top: 6px; }
.t12 .pop { position: relative; }
.t12 .hp { width: 52px; height: 52px; }
.t12.ours .hp { box-shadow: 0 0 0 1.5px rgba(62, 224, 207, 0.6); } .t12.theirs .hp { box-shadow: 0 0 0 1.5px rgba(255, 92, 122, 0.6); }
.t12 .rk { position: absolute; right: -9px; bottom: -8px; width: 28px; }
.t12-bar { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 460px; margin: 14px auto 0; font-size: 14px; }
.t12-bar .bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.t12-bar .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8d97ad, #e6ebf5); transform-origin: left; }
.fx.in .t12-bar .bar i { animation: load 1.6s cubic-bezier(0.3, 0.7, 0.4, 1) 0.2s both; }
.t12-bar b { color: var(--text); } .t12-bar small { color: var(--muted); font-size: 13.5px; }
.party { display: flex; align-items: center; justify-content: center; }
.party .pop { display: grid; justify-items: center; gap: 6px; }
.party .pop b { font-size: 13.5px; font-weight: 600; }
.party .link { width: 26px; height: 2px; margin-bottom: 22px; background: #b79cff; box-shadow: 0 0 10px #b79cff; }
.party-note { margin: 0; text-align: center; font-size: 14.5px; color: #dccfff; }
.party-note b { color: #b79cff; }
.party-solo { display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0.55; font-size: 13.5px; color: var(--muted); }
.party-solo .hp { border-radius: 8px; }
.tagwho { display: flex; align-items: center; gap: 10px; }
.tagwho small { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tg { padding: 4px 9px; border-radius: 999px; border: 1px solid; font-size: 13px; font-weight: 600; }
.tg.good { color: var(--ours); border-color: rgba(62, 224, 207, 0.4); background: var(--ours-2); }
.tg.bad { color: var(--theirs); border-color: rgba(255, 92, 122, 0.4); background: var(--theirs-2); }
.pct { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; font-size: 13.5px; }
.pct > span { color: var(--muted); }
.pct > b { grid-column: 1 / -1; color: var(--ours); font-size: 13.5px; }
.pct-track { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.pct-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 1%); border-radius: 6px;
  background: linear-gradient(90deg, rgba(62, 224, 207, 0.25), var(--ours)); }
.pct-cut { position: absolute; left: 85%; top: -4px; bottom: -4px; width: 1px; background: rgba(255, 255, 255, 0.45); }
.fx.in .pct-fill { animation: grow 1.2s cubic-bezier(0.3, 0.7, 0.4, 1) 0.3s both; }
.meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.meta li { display: grid; grid-template-columns: 30px 76px minmax(0, 1fr) 50px; align-items: center; gap: 10px; font-size: 14px; }
.meta .hp { width: 30px; height: 30px; border-radius: 8px; }
.mbar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.mbar i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: 6px; background: linear-gradient(90deg, rgba(201, 209, 227, 0.2), #c9d1e3); }
.fx.in .mbar i { animation: grow 1.1s cubic-bezier(0.3, 0.7, 0.4, 1) 0.3s both; }
.meta b { text-align: right; font: 700 13.5px/1 var(--display); }
.meta b.good { color: var(--ours); } .meta b.bad { color: var(--theirs); }
.brawl-head { display: flex; align-items: baseline; gap: 10px; }
.brawl-head b { font: 500 16px var(--display); } .brawl-head span { color: var(--muted); font-size: 14px; }
.bopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bopt { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 10px; border-radius: 14px; text-align: center;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--edge); }
.bopt small { font-size: 12.5px; line-height: 1.2; color: var(--muted); }
.bopt.best { border-color: color-mix(in srgb, var(--acc) 65%, transparent); background: color-mix(in srgb, var(--acc) 8%, transparent);
  box-shadow: 0 0 26px -8px color-mix(in srgb, var(--acc) 70%, transparent); }
.bopt.best small { color: var(--text); }
.bopt em { position: absolute; top: -9px; padding: 4px 9px; border-radius: 999px; font: 700 12px/1 var(--ui); font-style: normal;
  color: #12141a; background: var(--acc); }

/* builds */
.fx .waysrow { margin-top: 0; }
.counters { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.counters li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px 40px; align-items: center; gap: 10px; }
.counters .why b { display: block; font-size: 14.5px; } .counters .why small { color: var(--muted); font-size: 13px; }
.counters .arr { width: 18px; color: var(--ours); }
.counters .itn { display: none; }
/* the Scout tab as the game's shop draws it (tab and card art from the game files): the tab rail, a paper panel with
   the teal header, «Сейчас брать» and the cards already bought */
.gshop { display: flex; align-items: flex-start; gap: 0; }
.gtabs { display: grid; gap: 6px; padding-top: 8px; flex: none; }
.gtabs img { display: block; width: 40px; height: 40px; border-radius: 8px 0 0 8px; object-fit: cover; opacity: 0.85; }
.gscout { display: grid; place-items: center; width: 48px; height: 44px; border-radius: 9px 0 0 9px; background: var(--ours);
  box-shadow: -3px 4px 14px -4px rgba(62, 224, 207, 0.7); }
.gscout img { width: 30px; height: 30px; }
.gpanel { flex: 1; min-width: 0; overflow: hidden; border-radius: 4px 12px 12px 12px; color: #f4ece0;
  background: radial-gradient(120% 80% at 30% 0%, #c2b293, #a8967a 70%); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9); }
.ghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px;
  background: linear-gradient(180deg, #74cfde, #5bbccd); color: #12262b; }
.ghead b { display: block; font: 700 16px/1.1 var(--display); }
.ghead small { display: block; font-size: 12px; color: #1f4950; }
.gsave { display: grid; gap: 1px; padding: 5px 10px; border-radius: 6px; background: #1f2428; color: #fff; text-align: right; }
.gsave small { font-size: 11px; color: #9fb3b8; }
.gsave b { font: 600 13px/1.1 var(--ui); }
.gnow, .gline { margin: 10px; padding: 8px 10px 10px; border-radius: 6px; }
.gnow { background: rgba(26, 74, 76, 0.55); box-shadow: inset 0 0 0 2px var(--ours); }
.gline { background: rgba(0, 0, 0, 0.22); }
.gsec { display: block; margin-bottom: 8px; font-weight: 700; font-size: 14px; color: #fff; }
.gnow .gsec { color: var(--ours); text-align: center; }
.gsec i { font-style: normal; font-weight: 500; font-size: 12px; color: #e6dccb; margin-left: 6px; }
.grow { display: flex; justify-content: center; gap: 8px; }
.gline .grow { justify-content: flex-start; }
.gcard { position: relative; display: grid; justify-items: center; align-content: start; width: 70px; height: 100px; padding: 6px 4px 0;
  border-radius: 5px; overflow: visible; text-align: center; }
.gbk { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; z-index: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); }
.gic { position: relative; z-index: 1; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.gcard b { position: relative; z-index: 1; margin-top: 3px; font-size: 12px; line-height: 1.1; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.gcard .gt { position: absolute; top: 3px; right: 5px; z-index: 1; font: 700 10px/1 var(--ui); font-style: normal; color: rgba(255, 255, 255, 0.8); }
.gcard .glbl { position: absolute; top: -9px; left: 50%; z-index: 2; transform: translateX(-50%); padding: 3px 7px; border-radius: 4px;
  font: 700 10.5px/1 var(--ui); font-style: normal; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em;
  color: #0c2a2c; background: var(--ours); }
.gnow .grow { padding-top: 8px; }
.gcard.owned .gbk, .gcard.owned .gic { opacity: 0.55; }
.gok { position: absolute; right: -5px; bottom: -5px; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; color: var(--ours-ink); background: var(--ours); }
.gok svg { width: 12px; height: 12px; }
.v-mod .gtabs { display: flex; padding-top: 0; }
.v-mod .gtabs img, .v-mod .gscout { border-radius: 8px; }
.mine-head { display: flex; justify-content: space-between; align-items: baseline; }
.mine-head small { color: var(--muted); font-size: 13.5px; }
.mine-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mine-add { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 13px;
  border: 1px dashed rgba(62, 224, 207, 0.6); background: var(--ours-2); }
.mine-add em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ours); }
.switch-row { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14.5px; }
.sw { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.sw.on { background: var(--ours); }
.sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.sw.on i { transform: translateX(16px); }

/* Про */
.timer { display: flex; align-items: center; gap: 18px; }
.timer svg { width: 96px; height: 96px; transform: rotate(-90deg); flex: none; }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 6; }
.ring { fill: none; stroke: var(--pro); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 6px rgba(255, 197, 107, 0.6)); }
.timer b { display: block; font: 700 32px/1 var(--display); color: var(--pro); font-variant-numeric: tabular-nums; }
.timer small { color: var(--muted); }
.callchips { display: flex; flex-wrap: wrap; gap: 6px; }
.callchips span { padding: 4px 10px; border-radius: 999px; font-size: 13px; color: #ffe0ad; background: rgba(255, 197, 107, 0.07);
  border: 1px solid rgba(255, 197, 107, 0.3); }
.bubble { margin: 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--edge-2); font-size: 14px; }
.wchance { display: flex; height: 36px; overflow: hidden; border-radius: 10px; font: 700 14px/36px var(--display); }
.wchance span { padding: 0 12px; white-space: nowrap; }
.wchance .ours { width: calc(var(--p) * 1%); color: #c9fff8; background: linear-gradient(90deg, rgba(62, 224, 207, 0.2), rgba(62, 224, 207, 0.55)); }
.wchance .theirs { flex: 1; text-align: right; color: #ffd5de; background: linear-gradient(90deg, rgba(255, 92, 122, 0.5), rgba(255, 92, 122, 0.18)); }
.fx.in .wchance .ours { animation: grow 1.2s cubic-bezier(0.3, 0.7, 0.4, 1) 0.2s both; }
.lane { display: flex; align-items: center; gap: 10px; }
.lane .vs { color: var(--faint); font-size: 13px; }
.lane .hard { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; font-style: normal;
  color: var(--theirs); background: var(--theirs-2); }
.swap { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 14.5px;
  background: rgba(255, 197, 107, 0.08); border: 1px solid rgba(255, 197, 107, 0.3); }
.swap svg { width: 20px; flex: none; color: var(--pro); }
.swap .hp { border-radius: 8px; }
.chat { display: grid; gap: 8px; }
.msg { margin: 0; padding: 10px 13px; border-radius: 14px 14px 14px 4px; font-size: 14.5px;
  background: linear-gradient(90deg, var(--pro-2), rgba(0, 0, 0, 0.3)); border: 1px solid rgba(255, 197, 107, 0.28); }
.msg b { display: block; margin-bottom: 2px; font-size: 12.5px; color: var(--pro); }
.msg.typing { justify-self: start; display: inline-flex; gap: 4px; padding: 12px 14px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--pro); animation: blink 1.2s infinite; }
.msg.typing i:nth-child(2) { animation-delay: 0.2s; } .msg.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.rcard { display: flex; align-items: center; gap: 12px; }
.rcard > div { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 2px 10px; }
.rcard .stars { grid-column: 1 / -1; display: flex; gap: 2px; }
.rcard .stars i { font-style: normal; font-size: 19px; color: rgba(255, 255, 255, 0.2); }
.rcard .stars i.on { color: #ffd27a; text-shadow: 0 0 10px rgba(255, 210, 122, 0.5); }
.rnotes { display: flex; flex-wrap: wrap; gap: 6px; }
.known { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.known li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.known li b { display: block; font-size: 14.5px; } .known li small { color: var(--muted); font-size: 13px; }
.sync { display: flex; align-items: center; justify-content: center; gap: 12px; }
.dev { display: grid; justify-items: center; gap: 4px; }
.dev svg { width: 50px; height: 50px; color: var(--pro); }
.dev small { color: var(--muted); font-size: 13px; }
.dev.acct svg { width: 40px; height: 40px; color: var(--muted); }
.wire { position: relative; flex: 1; max-width: 90px; height: 2px; margin-bottom: 18px;
  background: repeating-linear-gradient(90deg, rgba(255, 197, 107, 0.5) 0 6px, transparent 6px 12px); }
.wire i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; opacity: 0; background: var(--pro);
  box-shadow: 0 0 10px var(--pro); animation: hop-a 3s linear infinite; }
.wire.b i { animation-name: hop-b; }
@keyframes hop-a { 0% { left: 0; opacity: 0; } 6%, 42% { opacity: 1; } 46%, 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes hop-b { 0%, 50% { left: 0; opacity: 0; } 56%, 92% { opacity: 1; } 96%, 100% { left: calc(100% - 10px); opacity: 0; } }
.synced { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.synced span { padding: 4px 10px; border-radius: 999px; font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--edge-2); }

@media (max-width: 1100px) {
  .fx.w2 { grid-column: span 3; } .fx.w4 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx.w2, .fx.w3, .fx.w4 { grid-column: auto; }
  .fnav { top: 70px; margin-top: 28px; }
  .fnav a { padding: 8px 12px; }
  .fnav a small { display: none; }
  .fhero { --R: 46vw; }
  .blip .hp { width: 26px; height: 26px; }
  .t12 { gap: 6px; } .t12 .hp { width: 40px; height: 40px; } .t12 .rk { width: 22px; right: -6px; }
  .fx-vis { padding: 18px 16px 6px; min-height: 0; } .fx-text { padding: 8px 16px 18px; }
  .ghead b { font-size: 14px; } .gsave small, .gsave b { white-space: nowrap; }
}

/* tables (the comparison on the pricing page, the admin) */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--edge); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 14px; }
.ribbon { position: absolute; top: -11px; right: 18px; font: 600 12.5px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--pro); color: #251a05; padding: 6px 9px; border-radius: var(--pill); }
details { border-bottom: 1px solid var(--edge); padding: 6px 0; scroll-margin-top: 80px; }
summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ours); font-weight: 400; font-size: 22px; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { color: var(--muted); }
.prose h2 { font-size: 20px; margin-top: 26px; }
.prose li { margin-bottom: 6px; color: var(--muted); }

/* pricing: a faint grid with each plan's colour glowing over its card in turn, the plans as cards (a running border on «Про»), the
   comparison by part of Scout (a switch hides what all plans share; the column under the pointer lights up) */
.phero { position: relative; isolation: isolate; margin-top: -40px; padding: 84px 0 48px; text-align: center; }
.phero-bg { position: absolute; inset: 0 calc(50% - 50vw) -360px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 35%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 55% 70% at 50% 35%, #000 20%, transparent 80%); }
.phero-bg i { position: absolute; top: 30%; left: 50%; width: 600px; height: 460px; margin-left: -300px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 34%, transparent), transparent);
  opacity: 0.5; animation: breathe 9s ease-in-out infinite; }
.phero-bg i.free { translate: -470px 0; } .phero-bg i.pro { translate: 470px 0; animation-delay: 6s; }
.phero-bg i.builds { animation-delay: 3s; }
@keyframes breathe { 0%, 100% { opacity: 0.45; } 30% { opacity: 1; } }
.phero h1 { font-size: clamp(38px, 5vw, 66px); }
.phero .lead { margin: 0 auto; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin: 12px 0 88px; }
.pcard { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 32px 30px 30px;
  border-radius: 26px; background: rgba(21, 22, 29, 0.88); border: 1px solid var(--edge-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -40px rgba(0, 0, 0, 0.9); }
.pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0.5; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%); }
.pcard:hover::before { opacity: 1; }
.pcard.builds { border-color: rgba(62, 224, 207, 0.35); }
.pcard.pro { border-color: transparent; transform: translateY(-10px); animation: spin 7s linear infinite;
  background: linear-gradient(160deg, #211d19, #15161d 60%) padding-box,
              conic-gradient(from var(--spin), transparent 0 55%, var(--pro) 72%, #ff8f6b 80%, transparent 92%) border-box,
              linear-gradient(rgba(255, 197, 107, 0.35), rgba(255, 197, 107, 0.35)) border-box;
  box-shadow: 0 40px 90px -50px rgba(255, 197, 107, 0.45); }
.pprice { display: flex; align-items: baseline; gap: 10px; }
.pprice b { font: 500 48px/1 var(--display); color: var(--acc); }
.pcard.free .pprice b { color: var(--text); }
.pprice small { color: var(--muted); font-size: 15px; }
.pdesc { margin: 0; color: var(--muted); }
.pcard .perks { grid-template-columns: minmax(0, 1fr); margin: 6px 0 4px; gap: 11px; }
.pcta { margin-top: auto; padding-top: 10px; }
.pcta .btn { width: 100%; }
.pcard.builds .pcta .btn { background: var(--ours); color: var(--ours-ink); border-color: transparent; }
.pcard.builds .pcta .btn:hover { background: #66ecdd; }
.pcard.pro .pcta .btn { background: var(--pro); color: #241a05; border-color: transparent; }
.pcard.pro .pcta .btn:hover { background: #ffd48e; }

.cmp, .payqa { margin-bottom: 88px; }
.payqa > .fine { margin-top: 16px; }
.cmp h2, .payqa h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 22px; }
.ctable { border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 15px; }
.ctable th, .ctable td { border-bottom: 1px solid var(--edge); vertical-align: middle; transition: background 0.2s; }
.ctable thead th { padding: 18px 12px 16px; text-align: center; border-bottom-color: var(--edge-2); }
.ctable thead th:first-child { text-align: left; }
.ctable thead th span { display: block; font: 500 18px/1.2 var(--display); color: var(--acc); }
.ctable thead th.free span { color: var(--text); }
.ctable thead th small { color: var(--muted); font-size: 14px; font-weight: 500; }
.ctable thead th[data-col="3"] { border-radius: 16px 16px 0 0; box-shadow: inset 0 3px 0 var(--pro); }
.ctable [data-col="3"] { background: rgba(255, 197, 107, 0.05); }
.ctable th[scope="row"] { padding: 13px 12px; text-align: left; font-weight: 500; color: var(--text); }
.ctable td { width: 17%; padding: 10px 12px; text-align: center; }
.ctable .sec th { padding: 28px 12px 10px; text-align: left; font: 500 15px var(--display); color: var(--muted); border-bottom-color: var(--edge-2); }
.ctable[data-hot="1"] [data-col="1"], .ctable[data-hot="2"] [data-col="2"] { background: rgba(255, 255, 255, 0.045); }
.ctable[data-hot="3"] [data-col="3"] { background: rgba(255, 197, 107, 0.11); }
.ctable.diffonly tr.same { display: none; }
.ctable .yes, .ctable .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.ctable .yes svg, .ctable .no svg { width: 14px; height: 14px; }
.ctable .no { color: rgba(255, 255, 255, 0.2); }
.ctable [data-col="1"] .yes { color: #c9d1e3; background: rgba(201, 209, 227, 0.12); }
.ctable [data-col="2"] .yes { color: var(--ours); background: var(--ours-2); }
.ctable [data-col="3"] .yes { color: var(--pro); background: var(--pro-2); box-shadow: 0 0 14px -4px rgba(255, 197, 107, 0.6); }
.ctable .switch-row { color: var(--muted); font-size: 14.5px; font-weight: 500; cursor: pointer; }
.switch-row input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; min-height: 0;
  padding: 0; margin: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); cursor: pointer; transition: background 0.2s; }
.switch-row input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform 0.2s; }
.switch-row input:checked { background: var(--ours); }
.switch-row input:checked::before { transform: translateX(16px); }
.switch-row input:focus { box-shadow: none; }
.switch-row input:focus-visible { outline: 2px solid var(--ours); outline-offset: 3px; }

/* questions as cards that open in place (numbered where they are a list to read through) */
:root { interpolate-size: allow-keywords; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; gap: 14px;
  counter-reset: q; }
.qcard { padding: 0; border: 1px solid var(--edge); border-radius: 18px; background: rgba(21, 22, 29, 0.82);
  transition: border-color 0.25s, background 0.25s; scroll-margin-top: 90px; }
.qcard:hover { border-color: var(--edge-2); }
.qcard[open] { border-color: rgba(62, 224, 207, 0.35); background: rgba(62, 224, 207, 0.045); }
.qcard summary { align-items: center; gap: 14px; padding: 18px 20px; font-size: 16px; }
.qcard summary::after, .qcard[open] summary::after { content: none; }
.qcard summary span { flex: 1; }
.qgrid.num .qcard summary::before { counter-increment: q; content: counter(q, decimal-leading-zero); flex: none; min-width: 26px;
  font: 700 14px/1 var(--display); color: var(--ours); }
.qcard summary i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); }
.qcard summary i::before, .qcard summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px;
  border-radius: 2px; background: var(--ours); transform: translate(-50%, -50%); transition: transform 0.25s; }
.qcard summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qcard[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qcard p { margin: 0; padding: 0 20px 18px; color: var(--muted); }
.qgrid.num .qcard p { padding-left: 60px; }
.qcard::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; }
.qcard[open]::details-content { block-size: auto; }

@media (max-width: 960px) {
  .pcards { grid-template-columns: minmax(0, 1fr); max-width: 540px; margin-inline: auto; }
  .pcard.pro { transform: none; }
}
@media (max-width: 600px) {
  .qgrid.num .qcard p { padding-left: 20px; }
  /* the comparison fits the phone: three narrow plan columns, the feature names wrap */
  .ctable { min-width: 0; font-size: 14px; }
  .ctable td { width: 60px; padding: 9px 2px; }
  .ctable th[scope="row"] { padding: 11px 8px 11px 0; }
  .ctable thead th { padding: 14px 2px 12px; }
  .ctable thead th:first-child { padding-left: 0; }
  .ctable thead th span { font: 700 12.5px/1.2 var(--ui); }
  .ctable thead th small { font-size: 11.5px; }
  .ctable .sec th { padding: 24px 0 8px; }
  .ctable .yes, .ctable .no { width: 24px; height: 24px; }
  .ctable .switch-row { font-size: 13px; }
}

/* download: the button with the file's facts over a dot field that a light passes through, a setup window ticking
   through what the installer and the first start do, then the four steps on a rail, what's needed, what to do when
   something goes wrong */
.dhero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 56px;
  align-items: center; margin-top: -40px; padding: 76px 0 84px; }
.dhero-bg { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background-image: radial-gradient(rgba(62, 224, 207, 0.12) 1px, transparent 1.6px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 62% 45%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 85% at 62% 45%, #000 20%, transparent 80%); }
.dhero-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(62, 224, 207, 0.85) 1.2px, transparent 1.8px);
  background-size: 26px 26px; -webkit-mask: radial-gradient(circle, #000, transparent 70%) 20% 50% / 560px 560px no-repeat;
  mask: radial-gradient(circle, #000, transparent 70%) 20% 50% / 560px 560px no-repeat; animation: dot-sweep 14s ease-in-out infinite alternate; }
.dhero h1 { font-size: clamp(38px, 5vw, 66px); }
.dlbtn { position: relative; margin-top: 26px; padding-inline: 30px; }
.dlbtn::before { content: ""; position: absolute; inset: -8px; pointer-events: none; --c: rgba(62, 224, 207, 0.75); transition: inset 0.2s;
  background: linear-gradient(var(--c), var(--c)) 0 0 / 14px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 14px,
              linear-gradient(var(--c), var(--c)) 100% 0 / 14px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 14px,
              linear-gradient(var(--c), var(--c)) 0 100% / 14px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 14px,
              linear-gradient(var(--c), var(--c)) 100% 100% / 14px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 14px;
  background-repeat: no-repeat; }
.dlbtn:hover::before { inset: -12px; }
.fileinfo { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 24px 0 0; }
.fileinfo div { display: grid; gap: 2px; }
.fileinfo dt { color: var(--faint); font-size: 13px; }
.fileinfo dd { margin: 0; font-size: 14.5px; font-weight: 600; }
.fileinfo .sha dd { font: 500 14px ui-monospace, Consolas, monospace; color: var(--muted); }

.setupwin { margin: 0; overflow: hidden; border-radius: 18px; background: #0c0d12; border: 1px solid var(--edge-2);
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(62, 224, 207, 0.06); }
.wbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; color: var(--muted);
  border-bottom: 1px solid var(--edge); background: rgba(255, 255, 255, 0.02); }
.wbar .dots { display: flex; gap: 6px; }
.wbar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.wbody { padding: 22px 22px 24px; }
.wprog { display: block; height: 6px; margin-bottom: 20px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.wprog i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--ours), #9ef7ee);
  animation: load 3.2s cubic-bezier(0.4, 0.2, 0.3, 1) 0.3s both; }
.setupwin ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.setupwin li { display: flex; align-items: center; gap: 12px; font-size: 15px;
  animation: lp-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.5s + var(--i) * 0.55s); }
.setupwin li i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: var(--ours);
  background: var(--ours-2); box-shadow: 0 0 0 1px rgba(62, 224, 207, 0.4); }
.setupwin li i svg { width: 12px; height: 12px; }
.setupwin li small { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; color: var(--faint); border: 1px solid var(--edge-2); }
.wdone { margin: 20px 0 0; padding: 12px 14px; border-radius: 12px; font-weight: 600; color: #cbfbf5; background: var(--ours-2);
  border: 1px solid rgba(62, 224, 207, 0.35); animation: appear 0.5s ease-out 3.6s both; }

.install-tl { margin-bottom: 84px; }
.install-tl h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 26px; }
.dmore h2 { font-size: 26px; margin-bottom: 20px; }
.timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; border-left: 2px dashed rgba(62, 224, 207, 0.3); }
.tstep { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 22px; }
.tnum { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 700 17px var(--display); color: var(--ours); background: var(--bg); border: 2px solid rgba(62, 224, 207, 0.55);
  box-shadow: 0 0 22px -6px rgba(62, 224, 207, 0.7); }
.tcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 28px; padding: 24px 26px;
  border-radius: 20px; background: rgba(21, 22, 29, 0.85); border: 1px solid var(--edge); }
.tcard h3 { font-size: 20px; margin-bottom: 6px; }
.tcard p { margin: 0; color: var(--muted); }
.tvis { justify-self: end; width: 100%; max-width: 420px; }
.v-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--edge-2); }
.v-file b { display: block; } .v-file small { color: var(--muted); }
a.v-file { color: var(--text); text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.1s; }
a.v-file:hover { border-color: rgba(62, 224, 207, 0.6); background: var(--ours-2); }
a.v-file:active { transform: scale(0.99); }
.v-file .fgo { margin-left: auto; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--ours-ink);
  background: var(--ours); }
.ficon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--ours); background: var(--ours-2); }
.ficon svg { width: 22px; height: 22px; }
.v-smart { display: grid; gap: 12px; padding: 16px 18px; border-radius: 12px; color: #e8f1ff;
  background: linear-gradient(160deg, #143152, #0e2239); border: 1px solid rgba(120, 170, 230, 0.35); }
.v-smart b { font-size: 15px; }
.v-smart .ln { justify-self: start; padding: 2px 6px; border-radius: 6px; font-size: 14.5px; color: #cfe3ff; text-decoration: underline;
  animation: hint 2.4s ease-in-out infinite; }
.v-smart .bn { justify-self: end; padding: 7px 14px; border-radius: 6px; font-size: 14px; background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35); animation: hint 2.4s ease-in-out 1.2s infinite; }
@keyframes hint { 0%, 100% { box-shadow: 0 0 0 2px var(--ours); } 50% { box-shadow: 0 0 0 6px rgba(62, 224, 207, 0.2); } }
.v-mod { display: grid; gap: 12px; }
.chip-ok { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ours); background: var(--ours-2); }
.chip-ok svg { width: 12px; height: 12px; }
.v-login { display: grid; gap: 8px; }
.v-login .btn { width: 100%; }

.dmore { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 36px; margin-bottom: 40px; }
.req { padding: 28px; border-radius: 22px; background: rgba(21, 22, 29, 0.85); border: 1px solid var(--edge); }
.req h2 { font-size: 26px; }
.req .perks { grid-template-columns: minmax(0, 1fr); margin-bottom: 18px; }
.dmore .qgrid { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 960px) {
  .dhero, .tcard, .dmore { grid-template-columns: minmax(0, 1fr); }
  .dhero { gap: 36px; }
  .tvis { justify-self: start; }
}
@media (max-width: 600px) {
  .tstep { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .tnum { width: 34px; height: 34px; font-size: 14px; }
  .timeline::before { left: 16px; }
  .tcard { padding: 18px; }
  .v-file { padding: 12px; gap: 12px; }
  .v-file .fgo { display: none; }
}

/* questions: the eye turning behind the heading, a sticky column with search and the sections (the one in view lit),
   each section's questions as cards in a grid */
.fqhero { position: relative; isolation: isolate; max-width: 860px; margin-top: -40px; padding: 84px 0 46px; }
.fq-eye { position: absolute; z-index: -1; right: -420px; top: 50%; width: 640px; aspect-ratio: 1; opacity: 0.1;
  background: linear-gradient(160deg, var(--ours) 30%, var(--theirs));
  -webkit-mask: url(glyph.png) center / contain no-repeat; mask: url(glyph.png) center / contain no-repeat;
  transform: translateY(-50%); animation: eye-spin 140s linear infinite; }
@keyframes eye-spin { to { transform: translateY(-50%) rotate(360deg); } }
.fqhero h1 { font-size: clamp(38px, 5vw, 66px); }
.fqwrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; gap: 44px; margin-bottom: 60px; min-height: 70vh; }
.fqside { position: sticky; top: 100px; display: grid; gap: 18px; }
.fqsearch { position: relative; display: block; }
.fqsearch svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; color: var(--faint); transform: translateY(-50%); }
.fqsearch input { padding-left: 42px; border-radius: 14px; background: rgba(21, 22, 29, 0.85); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fqnav { display: grid; gap: 4px; border-left: 1px solid var(--edge); }
.fqnav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 0 12px 12px 0;
  color: var(--muted); text-decoration: none; font-weight: 500; transition: color 0.2s, background 0.2s; }
.fqnav a::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: transparent; transition: background 0.2s; }
.fqnav a i, .fqnav a svg { display: block; width: 18px; height: 18px; }
.fqnav a small { margin-left: auto; font-size: 13px; color: var(--faint); }
.fqnav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.fqnav a[aria-current] { color: var(--ours); background: var(--ours-2); }
.fqnav a[aria-current]::before { background: var(--ours); }
.qgroup { margin-bottom: 44px; scroll-margin-top: 90px; }
.qgroup h2 { display: flex; align-items: center; gap: 14px; font-size: 24px; margin-bottom: 16px; }
.qgroup h2 i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; color: var(--ours);
  background: var(--ours-2); box-shadow: 0 0 0 1px rgba(62, 224, 207, 0.3), 0 0 24px -8px rgba(62, 224, 207, 0.6); }
.qgroup h2 svg { width: 21px; height: 21px; }
.fqbody .qgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.fqnone { color: var(--muted); }
@media (max-width: 900px) {
  .fqwrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fqside { position: static; }
  .fqnav { grid-auto-flow: column; justify-content: start; overflow-x: auto; border-left: 0; padding-bottom: 4px; }
  .fqnav a { border-radius: 999px; white-space: nowrap; }
  .fqnav a::before { display: none; }
}
@media (max-width: 600px) {
  /* on a phone the sections ride along under the header while the questions scroll */
  .fqside { display: contents; }
  .fqnav { position: sticky; top: 60px; z-index: 4; margin: -12px calc(-1 * var(--gutter-r)) -12px calc(-1 * var(--gutter-l));
    padding: 8px var(--gutter-r) 8px var(--gutter-l); background: rgba(15, 16, 21, 0.92); -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge); scrollbar-width: none; }
  .fqnav::-webkit-scrollbar { display: none; }
  .qgroup { scroll-margin-top: 130px; }
}

/* account and admin */
.acctwrap { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.side { position: sticky; top: 84px; display: grid; gap: 14px; }
.who { padding: 4px 6px; }
.who b { display: block; word-break: break-all; }
.tabs { display: grid; gap: 2px; }
.tabs a { color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: 10px; font-weight: 500; }
.tabs a:hover { background: var(--bg-3); color: var(--text); }
.tabs a[aria-current] { background: var(--ours-2); color: var(--ours); }
.content { min-width: 0; }
.content h1 { font-size: 28px; margin-bottom: 20px; }
.feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.feats li { display: flex; justify-content: space-between; gap: 12px; }
.on { color: var(--good); font-weight: 600; } .off { color: var(--faint); }
.plain { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.ref { display: grid; gap: 10px; margin-bottom: 10px; }
.ref code { font: 600 24px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.12em; color: var(--ours); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 20px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; word-break: break-word; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stats div { background: var(--bg-2); border: 1px solid var(--edge); border-radius: var(--r); padding: 14px 16px; }
.stats b { display: block; font: 500 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: 14.5px; }

@media (max-width: 860px) {
  .acctwrap { grid-template-columns: 1fr; gap: 16px; }
  .side { position: static; }
  .tabs { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .tabs a { white-space: nowrap; }
  .btn.ghost { width: auto; }
}
@media (max-width: 600px) {
  main { padding-top: 28px; }
  .top .bar { gap: 10px; flex-wrap: nowrap; min-height: 60px; }
  .brand img { width: 40px; height: 40px; border-radius: 11px; } .brand b { font-size: 18px; }
  .form.inline { flex-direction: column; }
  .auth { padding: 22px 18px; }
  .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; }
}

/* a shared build */
.bhead { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.hero-img { width: 88px; height: 88px; border-radius: 18px; object-fit: cover; background: var(--bg-3); border: 1px solid var(--edge-2); }
.bhead h1 { margin: 0; }
.bhead .eyebrow { margin-bottom: 6px; }
.phase { padding: 18px 0; border-top: 1px solid var(--edge); }
.phead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.phead h2 { margin: 0; font-size: 20px; }
.items-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.it { display: grid; justify-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 14px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--edge); border-top: 3px solid var(--edge-2); min-width: 0; }
.it.w { border-top-color: #e3a54b; } .it.v { border-top-color: #59c76a; } .it.s { border-top-color: #b07cf0; }
.it img { width: 56px; height: 56px; object-fit: contain; }
.it b { font-size: 14px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.it small { font-size: 13px; color: var(--faint); }
.it.unk { color: var(--faint); place-content: center; min-height: 100px; }
.optlabel { margin: 14px 0 8px; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }

/* my ratings of players */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge-2); color: var(--muted); text-decoration: none; font-size: 14px; }
.chip.on, .chip:hover { color: var(--text); border-color: var(--ours); background: var(--ours-2); }
.plist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pl { background: var(--bg-2); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; }
.plhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.plhead b { font-size: 16px; }
.stars { color: var(--pro); letter-spacing: 0.06em; }
.plform { margin: 0; }
.plform select { width: auto; min-width: 84px; }

/* admin charts */
.chart svg { width: 100%; height: 120px; display: block; }
.chart .bar { fill: var(--ours); } .chart .bar.zero { fill: var(--edge-2); }
.chead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.caxis { display: flex; justify-content: space-between; color: var(--faint); font-size: 13px; margin-top: 6px; }

/* names can be anything (Steam allows very wide letters): never wider than their place */
.who { min-width: 0; }
.who > * { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.acct a.navbtn { line-height: 1.2; }
nav.acct a.navbtn, .who > *, .plhead b, td { unicode-bidi: isolate; }
.side, .content, .acctwrap > * { min-width: 0; }
td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* the players he rated — the Scout app's own cards («Игроки»), same classes and look */
:root { --glass: rgba(255, 255, 255, 0.035); --glass-2: rgba(255, 255, 255, 0.06); }
.glass { background: var(--glass); border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.8); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; margin-top: 6px; }
.person { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
  border-radius: 12px; transition: background-color 160ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .person:hover { background: var(--glass-2); border-color: var(--edge-2); } }
.person > img, .person .noava { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); display: block; }
.person b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; }
.person b a { color: var(--text); text-decoration: none; }
.person b a:hover { color: var(--ours); }
.person small { color: var(--muted); font-size: 13px; }
.oldnames { display: block; font-size: 12.5px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record { display: grid; gap: 4px; justify-items: end; font-size: 13.5px; text-align: right; }
.record span { color: var(--muted); white-space: nowrap; }
.record b { display: inline; font-weight: 600; }
.record b.ok { color: var(--good); } .record b.bad { color: var(--theirs); } .record b.muted { color: var(--faint); }
.wr-corner { display: grid; justify-items: end; line-height: 1.05; margin-bottom: 4px; }
.wr-corner b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.wr-corner small { font-size: 12px; white-space: nowrap; }
.wr-corner.good b { color: var(--ours); } .wr-corner.bad b { color: var(--theirs); }
.person-rate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; margin-top: 6px; }
.person-rate .stars { display: inline-flex; gap: 2px; margin: 0; }
.star { background: none; border: 0; padding: 0 2px; font-size: 18px; line-height: 1; cursor: pointer; color: rgba(255, 255, 255, 0.22);
  transition: transform 120ms ease-out, color 120ms ease; }
.star:hover { transform: scale(1.15); color: rgba(255, 210, 122, 0.7); } .star:active { transform: scale(0.95); }
.star.on { color: #ffd27a; }
.nchip { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1; padding: 4px 9px; border-radius: 999px;
  margin: 2px 4px 2px 0; border: 1px solid; white-space: nowrap; }
.nchip.n { color: #c9c3ff; border-color: rgba(160, 150, 255, 0.4); background: rgba(160, 150, 255, 0.12); }
.nchip.bad { color: var(--theirs); border-color: rgba(255, 92, 122, 0.45); background: rgba(255, 92, 122, 0.12); }
.nchip.mid { color: #ffd27a; border-color: rgba(255, 210, 122, 0.45); background: rgba(255, 210, 122, 0.12); }
.nchip.good { color: var(--ours); border-color: rgba(62, 224, 207, 0.45); background: rgba(62, 224, 207, 0.12); }
.notebox { border: 0; padding: 0; }
.notebox summary.note-btn { list-style: none; display: inline-block; background: none; border: 1px dashed rgba(255, 255, 255, 0.18);
  color: var(--muted); border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 400; cursor: pointer; }
.notebox summary.note-btn::after { content: none; }
.notebox summary.note-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.35); }
.notebox[open] { flex: 1 1 100%; }
.notebox[open] .form { margin: 8px 0 0; }
.steamlink { margin-left: auto; font-size: 13px; color: var(--muted); }
/* the rank as the game shows it: the badge in its own proportions (512×404, the sub-rank numeral on it), the tier in
   capitals in its colour, the sub-rank as six pips */
.rankrow { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; --rcl: color-mix(in srgb, var(--rc, #9aa) 75%, white); }
.rankrow img { width: 64px; height: auto; aspect-ratio: 512 / 404; flex: none; object-fit: contain;
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--rc, #000) 35%, transparent)); }
.rankrow div { display: grid; gap: 6px; }
.rankrow div > span:first-child { font: 700 14px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rcl);
  white-space: nowrap; }
.rankrow .pips { display: flex; gap: 4px; }
.rankrow .pips i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.12); }
.rankrow .pips i.on { background: var(--rcl); box-shadow: 0 0 6px color-mix(in srgb, var(--rc, #fff) 60%, transparent); }
.rankrow.none span { font: 400 14px var(--ui); color: var(--faint); }
.person { align-items: start; }