/* guide.css -- How to play (/guide/).
   Page-only pieces: the chapter index in the hero, the annotated play menu,
   the keyboard + mouse diagram, the match timeline, the ability HUD replica,
   ranked tiles, rank ladder, gold ledger and the tips grid. */

.page-guide {
  --c-move: var(--sky);
  --c-shoot: var(--gold);
  --c-sprint: var(--green);
  --c-ability: #BD75F2;
  --c-chat: #F28CB1;
  --c-other: #C6D1E3;
}

/* ---------------------------------------------------------------- hero + chapter index */

.guide-hero { min-height: 0; padding-bottom: clamp(40px, 5vw, 64px); }
.guide-hero .page-hero__bg img { width: 150%; max-width: none; margin-left: -50%; opacity: .7; object-position: 50% 30%; }
.guide-hero.page-hero--media::before {
  background:
    linear-gradient(90deg, rgba(12, 12, 10, .95) 0%, rgba(12, 12, 10, .86) 42%, rgba(12, 12, 10, .5) 78%, rgba(12, 12, 10, .35) 100%),
    linear-gradient(180deg, rgba(12, 12, 10, .3), transparent 30%, transparent 62%, var(--bg));
}
@media (max-width: 760px) {
  .guide-hero.page-hero--media::before { background: linear-gradient(180deg, rgba(12, 12, 10, .82), rgba(12, 12, 10, .9) 60%, var(--bg)); }
}
.guide-toc { margin-top: clamp(28px, 4vw, 44px); }
.guide-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-toc a {
  height: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; align-content: start;
  padding: 14px 16px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
  background: rgba(16, 16, 14, .74); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .2s, transform .2s var(--ease), background .2s;
}
.guide-toc a:hover { color: var(--ink); border-color: var(--sky); background: rgba(21, 24, 29, .92); transform: translateY(-2px); }
.guide-toc__n { grid-row: span 2; font: 400 1.45rem/1.05 var(--display); color: var(--sky); font-variant-numeric: tabular-nums; }
.guide-toc__t { font: 400 1.08rem/1.25 var(--round); }
.guide-toc__d { font-size: .86rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 1000px) { .guide-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .guide-toc ol { gap: 8px; }
  .guide-toc a { padding: 11px 12px; column-gap: 9px; }
  .guide-toc__n { font-size: 1.1rem; grid-row: auto; }
  .guide-toc__t { font-size: .98rem; }
  .guide-toc__d { display: none; }
}

/* ---------------------------------------------------------------- shared bits */

.shot { margin: 0; }
.shot a { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--bg-deep); cursor: zoom-in; }
.shot img { width: 100%; height: auto; transition: transform .6s var(--ease), filter .3s; }
.shot a:hover img { transform: scale(1.02); filter: brightness(1.06); }
.shot figcaption, .menu-map__figure figcaption { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.feature__media.shot { border: 0; box-shadow: none; background: none; overflow: visible; border-radius: 0; }
.feature__media.shot::after { display: none; }

/* A screenshot cropped to its interesting part: the frame keeps --ar, the
   image is drawn --z times as wide and pulled up and left by --ox / --oy
   (shares of the frame's width). The lightbox still opens the whole frame. */
.shot a.crop { aspect-ratio: var(--ar); }
.shot a.crop img { display: block; width: calc(100% * var(--z)); max-width: none; height: auto; margin-left: calc(-100% * var(--ox)); margin-top: calc(-100% * var(--oy)); transform-origin: 50% 30%; }

.cls { --cc: var(--sky); display: inline-flex; align-items: center; gap: .55em; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cls::before { content: ""; width: .72em; height: .72em; border-radius: 50%; flex: none; background: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 22%, transparent); }

.caps { text-transform: uppercase; letter-spacing: .04em; font-family: var(--label); font-size: .92em; color: var(--ink); }

/* small-screen tables: each row becomes a little card */
@media (max-width: 680px) {
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable tr { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
  .rtable tr:last-child { border-bottom: 0; }
  .rtable td { position: relative; padding: 4px 0 4px 6.6rem; border: 0; text-align: left; }
  .rtable td::before { content: attr(data-label); position: absolute; left: 0; top: 7px; width: 6rem; font: 700 .68rem/1.6 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .rtable td:first-child { padding: 0 0 6px; font: 400 1.1rem/1.3 var(--round); color: var(--ink); }
  .rtable td:first-child::before { display: none; }
  .rtable td.num { text-align: left; }
  .rtable tbody tr:hover td { background: none; }
}

/* ---------------------------------------------------------------- 01 getting started */

.guide-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.guide-steps > li { padding-right: 24px; }
.guide-steps .guide-steps__more { font-size: .93rem; color: var(--muted); }

.menu-map { display: grid; gap: clamp(28px, 4vw, 52px); margin-top: clamp(48px, 7vw, 88px); align-items: start; }
@media (min-width: 1000px) { .menu-map { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.menu-map__figure { margin: 0; }
.menu-map__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--bg-deep); }
.menu-map__frame a { display: block; cursor: zoom-in; }
.menu-map__frame img { width: 100%; height: auto; }
.menu-map__pin {
  position: absolute; left: var(--px); top: var(--py); width: 28px; height: 28px; margin: -14px 0 0 -14px;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  font: 700 .8rem/1 var(--label); color: var(--sky-ink);
  background: radial-gradient(circle at 35% 30%, #B8ECFF, var(--sky) 60%, var(--sky-deep));
  box-shadow: 0 0 0 3px rgba(12, 12, 10, .9), 0 4px 14px rgba(0, 0, 0, .55);
}
@media (max-width: 640px) {
  .menu-map__pin { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: .64rem; box-shadow: 0 0 0 2px rgba(12, 12, 10, .9), 0 2px 8px rgba(0, 0, 0, .5); }
}
.menu-notes { margin-top: 22px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.menu-notes__title { margin: 0 0 12px; font: 700 .76rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.menu-notes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.menu-notes__list li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--ink-soft); }
.menu-notes__list b { color: var(--ink); }
.menu-notes__icon { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--gold); background: rgba(64, 181, 227, .1); border: 1px solid rgba(64, 181, 227, .28); }
.menu-notes__icon .icon { width: 17px; height: 17px; }
.menu-notes__foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: .9rem; color: var(--muted); }
.menu-map__key h3 { margin-bottom: .25em; }
.menu-map__key > p { margin-bottom: 14px; }
.menu-key { list-style: none; margin: 0; padding: 0; counter-reset: mk; display: grid; }
.menu-key li { counter-increment: mk; position: relative; padding: 9px 0 9px 40px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }
.menu-key li:last-child { border-bottom: 0; }
.menu-key li::before {
  content: counter(mk); position: absolute; left: 0; top: 10px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .78rem/1 var(--label); color: var(--sky-ink);
  background: radial-gradient(circle at 35% 30%, #B8ECFF, var(--sky) 60%, var(--sky-deep));
}
.menu-key b { display: block; font: 400 1.04rem/1.3 var(--round); color: var(--ink); }
@media (min-width: 640px) and (max-width: 999px) {
  .menu-key { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .menu-key li:nth-last-child(2) { border-bottom: 0; }
}

/* ---------------------------------------------------------------- 02 controls: keyboard + mouse */

.controls-deck {
  margin: 0; padding: clamp(18px, 3.2vw, 36px); border-radius: var(--radius-lg); border: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(64, 181, 227, .08), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
}
.controls-deck__board { display: grid; gap: clamp(22px, 3vw, 44px); align-items: center; }
@media (min-width: 960px) { .controls-deck__board { grid-template-columns: minmax(0, 1fr) 280px; } }

.kb-wrap { container-type: inline-size; }
.kb { --cols: 18.25; position: relative; width: 100%; aspect-ratio: 18.25 / 6.25; --gap: max(2px, .45cqw); font-size: clamp(7px, 1.65cqw, 14px); }
.kb__k {
  position: absolute; box-sizing: border-box;
  left: calc(var(--x) * 100% / var(--cols)); top: calc(var(--y) * 100% / 6.25);
  width: calc(var(--w, 1) * 100% / var(--cols) - var(--gap)); height: calc(100% / 6.25 - var(--gap));
  display: grid; place-items: center; overflow: hidden; white-space: nowrap;
  border-radius: max(3px, .85cqw); border: 1px solid #363C46; border-bottom-width: max(2px, .4cqw);
  background: linear-gradient(180deg, #20242B, #171A20);
  font: 700 1em/1 var(--label); letter-spacing: .02em; color: #7A808C;
}
.kb__k--mod { font-size: .78em; }
.kb__k--move, .kb__k--shoot, .kb__k--sprint, .kb__k--ability, .kb__k--chat, .kb__k--other {
  color: #fff; border-color: var(--kc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 42%, #20242B), color-mix(in srgb, var(--kc) 22%, #171A20));
  box-shadow: 0 0 max(6px, 1.6cqw) -2px color-mix(in srgb, var(--kc) 70%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.kb__k--move { --kc: var(--c-move); }
.kb__k--shoot { --kc: var(--c-shoot); }
.kb__k--sprint { --kc: var(--c-sprint); }
.kb__k--ability { --kc: var(--c-ability); }
.kb__k--chat { --kc: var(--c-chat); }
.kb__k--other { --kc: var(--c-other); box-shadow: none; background: linear-gradient(180deg, #2E343E, #22262E); }
/* phones: a laptop's board, 15 keys wide, so every key the legend names is on
   it at a readable size. The arrows come in under the right Shift (--xm, --wm
   move a key here); the right Win, Menu, Ctrl and Shift make room. */
@media (max-width: 600px) {
  .kb { --cols: 15; aspect-ratio: 15 / 6.25; font-size: 3.1cqw; --gap: max(2px, .65cqw); }
  .kb__k {
    left: calc(var(--xm, var(--x)) * 100% / var(--cols));
    width: calc(var(--wm, var(--w, 1)) * 100% / var(--cols) - var(--gap));
  }
  .kb__k--full { display: none; }
  .kb__k--mod { font-size: .86em; }
}

.mouse { display: block; width: 100%; max-width: 290px; height: auto; margin-inline: auto; overflow: visible; }
.mouse__body { fill: #20242B; stroke: #3C434E; stroke-width: 2; }
.mouse__btn { stroke: #0C0D10; stroke-width: 3; }
.mouse__btn--shoot { fill: color-mix(in srgb, var(--c-shoot) 55%, #20242B); }
.mouse__btn--sprint { fill: color-mix(in srgb, var(--c-sprint) 55%, #20242B); }
.mouse__wheel { fill: color-mix(in srgb, var(--c-ability) 70%, #20242B); stroke: #0C0D10; stroke-width: 2; }
.mouse__wheel-lines { stroke: rgba(16, 16, 14, .55); stroke-width: 1.5; }
.mouse__side { fill: color-mix(in srgb, var(--c-ability) 70%, #20242B); stroke: #0C0D10; stroke-width: 1.5; }
.mouse__leaders path { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mouse__t { font: 700 15px/1 var(--label); fill: var(--ink); letter-spacing: .02em; }
.mouse__s { font: 400 11.5px/1 var(--body); fill: var(--muted); }
.mouse__s--foot { font-size: 12.5px; fill: var(--ink-soft); }

.controls-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: clamp(20px, 3vw, 28px); padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: .92rem; color: var(--muted); }
.lg { display: inline-flex; align-items: flex-start; gap: 8px; }
.lg > span { min-width: 0; }
.lg::before { content: ""; margin-top: .22em; width: 14px; height: 14px; border-radius: 4px; flex: none; border: 2px solid var(--kc); background: color-mix(in srgb, var(--kc) 35%, #171A20); }
.lg b { color: var(--ink); font-family: var(--label); letter-spacing: .02em; }
.lg--move { --kc: var(--c-move); }
.lg--shoot { --kc: var(--c-shoot); }
.lg--sprint { --kc: var(--c-sprint); }
.lg--ability { --kc: var(--c-ability); }
.lg--chat { --kc: var(--c-chat); }
.lg--other { --kc: var(--c-other); }

.controls-grid { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: clamp(40px, 6vw, 64px); align-items: start; }
@media (min-width: 1000px) { .controls-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.controls-table td:first-child { color: var(--ink); font-weight: 600; }
@media (min-width: 681px) { .controls-table th:nth-child(1) { width: 34%; } .controls-table th:nth-child(2) { width: 38%; } }
.controls-table kbd { margin: 1px 0; }
.ctl-none { color: var(--faint) !important; }
@media (max-width: 680px) { .controls-table .ctl-none { display: none; } }
.controls-note { font-size: .9rem; margin: -6px 0 0; }

.controls-cards { display: grid; gap: 18px; }
.ctl-card { position: relative; padding: 22px 24px 20px; border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); }
.ctl-card h3 { font-size: 1.3rem; margin: 0 0 14px; padding-right: 52px; }
.ctl-card__icon { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--sky); background: rgba(64, 181, 227, .12); border: 1px solid rgba(64, 181, 227, .25); }
.ctl-card__icon .icon { width: 22px; height: 22px; }
.ctl-opts { margin: 0; display: grid; gap: 12px; }
.ctl-opts > div { padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .05); }
.ctl-opts dt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 400 1.06rem/1.3 var(--round); color: var(--ink); margin-bottom: 4px; }
.ctl-opts dt .chip { font-size: .66rem; padding: .3em .6em; }
.ctl-opts dd { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.ctl-card__foot { margin: 14px 0 0; font-size: .93rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- 03 first match */

.match-flow { position: relative; list-style: none; margin: 0 0 clamp(48px, 7vw, 80px); padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.match-flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sky), var(--green) 50%, var(--gold)); opacity: .45; }
.match-flow li { position: relative; text-align: center; }
.mf__icon {
  position: relative; z-index: 1; width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; color: var(--sky);
  background: radial-gradient(circle at 35% 30%, var(--surface-3), var(--surface-2)); border: 2px solid #3C434E;
  box-shadow: 0 0 0 7px var(--bg), 0 8px 18px -6px rgba(0, 0, 0, .6);
}
.mf__icon .icon { width: 26px; height: 26px; }
.match-flow li:nth-child(2) .mf__icon { color: #7FDCC0; }
.match-flow li:nth-child(3) .mf__icon { color: var(--green); }
.match-flow li:nth-child(4) .mf__icon { color: #C9D97A; }
.match-flow li:nth-child(5) .mf__icon { color: var(--gold); }
.match-flow h3 { font-size: 1.2rem; margin: 0 0 .35em; }
.match-flow p { margin: 0; font-size: .94rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .match-flow { grid-template-columns: 1fr; gap: 0; }
  .match-flow::before { left: 28px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: linear-gradient(180deg, var(--sky), var(--green) 50%, var(--gold)); }
  .match-flow li { text-align: left; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; padding-bottom: 20px; }
  .match-flow li:last-child { padding-bottom: 0; }
  .mf__icon { grid-row: span 2; margin: 0; }
  .match-flow h3 { margin-top: 6px; }
}

.length-block { margin-bottom: clamp(44px, 6vw, 72px); }
.length-wrap { margin-bottom: 0; }
.length-table { font-variant-numeric: tabular-nums; }
.length-table thead th { text-align: center; font: 400 1.1rem/1 var(--display); letter-spacing: .02em; text-transform: none; color: var(--sky); }
.length-table tbody th[scope="row"] { width: 18%; background: var(--surface); color: var(--muted); }
.length-table td { text-align: center; color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .length-table th, .length-table td { padding: 10px 5px; font-size: .84rem; }
  .length-table thead th { font-size: .95rem; }
  .length-table tbody th[scope="row"] { font-size: .64rem; letter-spacing: .06em; padding-left: 10px; }
}
.rules-list { margin-top: .4em; }

.after-grid { display: grid; gap: clamp(16px, 2.4vw, 24px); margin-top: clamp(44px, 6vw, 72px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.after-card .card__body, .rejoin-card .card__body { gap: .7rem; }
.after-grid .card__text { font-size: .97rem; }
.rejoin-card { border-color: rgba(64, 181, 227, .32); background: linear-gradient(180deg, rgba(64, 181, 227, .07), var(--surface) 60%); }
.rejoin-card .card__icon { color: var(--green); background: rgba(64, 181, 227, .12); border-color: rgba(64, 181, 227, .3); }

/* ---------------------------------------------------------------- 04 abilities */

.hud-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin: 6px 0 18px; padding: 18px 20px; border-radius: var(--radius); background: rgba(0, 0, 0, .22); border: 1px solid var(--line-soft); }
.hud-demo__chips { display: grid; grid-template-columns: auto auto; align-items: center; gap: 10px 14px; }
.hud-demo__cap { font: 700 .72rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ab-chip {
  --ac: #EB5C52; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 9px 0 14px; border-radius: 999px; border: 2px solid var(--ac); background: rgba(8, 10, 14, .78);
  font: 700 .95rem/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.ab-chip .icon { width: 20px; height: 20px; color: var(--ac); }
.ab-chip__key { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); font-size: .74rem; letter-spacing: 0; }
.ab-chip--cooling { border-color: color-mix(in srgb, var(--ac) 40%, transparent); color: rgba(255, 255, 255, .55); }
.ab-chip--cooling .icon { color: #9AA0AC; }
.ab-chip--cooling::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 45%; background: rgba(255, 255, 255, .07); }
/* the game's own token (a Meteor: half its stamina gone, its Comet cooling) with its two tubes named */
.token-diagram { width: 200px; max-width: 100%; height: auto; flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.td-leader { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 3 3; }
.td-label { font: 700 14px/1 var(--label); fill: var(--ink-soft); letter-spacing: .03em; }

.ab-rest { margin-top: clamp(36px, 5vw, 56px); padding: clamp(20px, 3vw, 28px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); }
.ab-rest h3 { margin-bottom: .7em; }
.ab-rest__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ab-rest__list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-soft); }
.ab-rest__icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--c-ability); background: rgba(189, 117, 242, .12); border: 1px solid rgba(189, 117, 242, .3); }
.ab-rest__icon .icon { width: 20px; height: 20px; }

.ab-table td:nth-child(2) { color: var(--ink); font-family: var(--round); font-size: 1.02rem; white-space: nowrap; }
.ab-table td:nth-child(3) { font-style: italic; }
@media (min-width: 681px) { .ab-table td.num, .ab-table th.num { white-space: nowrap; text-align: right; } }
@media (max-width: 680px) {
  .ab-table td:nth-child(2) { white-space: normal; }
  .ab-table td:nth-child(3) { min-height: 46px; } /* its label takes two lines */
}

.good-to-know { margin-top: clamp(32px, 5vw, 48px); }
.good-to-know__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 32px; margin-top: .4em; }

/* ---------------------------------------------------------------- 05 ranked */

.kinds { display: grid; gap: 12px; }
.kind { --kc: var(--gold); padding: 16px 20px 18px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--kc); background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 10%, var(--surface)), var(--surface) 60%); }
.kind--ranked { --kc: #F8C104; }
.kind--casual { --kc: #59D1BD; }
.kind--bots { --kc: #C8CCCB; }
.kind__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 6px; }
.kind__name { margin: 0; font-size: 1.35rem; letter-spacing: .03em; text-transform: uppercase; }
.kind__tag { font: 700 .82rem/1.2 var(--label); letter-spacing: .04em; color: var(--kc); }
.kind p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.elo-block { margin-top: clamp(44px, 6vw, 72px); }
.elo-block__text { max-width: 820px; }
.elo-block__text p { color: var(--ink-soft); }
.ranks { list-style: none; margin: 22px 0 clamp(28px, 4vw, 40px); padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rank {
  --rk: #fff; position: relative; overflow: hidden; padding: 18px 10px 14px; text-align: center; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--rk) 38%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--rk) 15%, var(--surface-2)), var(--surface) 75%);
}
.rank::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rk); }
.rank__gem {
  display: block; width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rk) 45%, white), var(--rk) 58%, color-mix(in srgb, var(--rk) 60%, black));
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--rk) 60%, transparent), inset 0 -2px 4px rgba(0, 0, 0, .25);
}
.rank__name { display: block; font: 400 1.12rem/1.15 var(--round); color: var(--ink); }
.rank__elo { display: block; margin-top: 4px; font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.elo-note { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.elo-note .card__icon { flex: none; }
.elo-note h3 { font-size: 1.2rem; margin: 4px 0 .35em; }
.elo-note p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ---------------------------------------------------------------- 06 challenges */

.ch-table td:first-child { color: var(--ink); font: 400 1.05rem/1.3 var(--round); white-space: nowrap; }
.ch-table .ch-stars { white-space: nowrap; color: var(--gold); font-weight: 700; }
@media (max-width: 680px) { .ch-table td:first-child { white-space: normal; } .ch-table .ch-stars { white-space: normal; } }
.ch-note { font-size: .9rem; margin: -6px 0 0; }
.ch-split { margin-top: clamp(44px, 6vw, 72px); align-items: start; }
@media (min-width: 900px) { .ch-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ch-rewards > p { color: var(--ink-soft); }
.reward-table th[scope="row"] { font: 400 1.05rem/1.2 var(--round); color: var(--ink); background: none; text-transform: none; letter-spacing: 0; }
.reward-table th.num, .reward-table td.num { text-align: right; }
.kit-tag { display: inline-block; margin-left: 4px; padding: .15em .45em; border-radius: 5px; font: 700 .7rem/1.3 var(--label); letter-spacing: .06em; text-transform: uppercase; color: #0B1220; background: var(--r-uncommon); vertical-align: .1em; }
tr:last-child .kit-tag { background: var(--r-rare); }
@media (max-width: 520px) {
  .reward-table th, .reward-table td { padding: 10px 8px; }
  .reward-table td.num { white-space: nowrap; }
  .kit-tag { font-size: .6rem; padding: .1em .35em; margin-left: 2px; }
}
.ch-small { font-size: .92rem; color: var(--muted); }
.ch-stats { margin-top: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-stats .stat { padding: 18px 10px; }
.ch-stats .stat__num { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.ch-shots { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.ch-shots .shot a { border-radius: var(--radius); box-shadow: var(--shadow); }
.ch-shots figcaption { font-size: .85rem; }
@media (max-width: 520px) { .ch-shots { grid-template-columns: 1fr; } }
.ch-checks { margin-top: 24px; }

/* ---------------------------------------------------------------- 07 gold */

.gold-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.gold-card { padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); }
.gold-card h3 { display: flex; align-items: center; gap: 12px; font-size: 1.55rem; margin-bottom: .6em; }
.gold-card h3 .icon { width: 26px; height: 26px; color: var(--sky); }
.gold-card h4 { font: 400 1.12rem/1.3 var(--round); margin: 0 0 .3em; color: var(--ink); }
.gold-card__note { margin: 16px 0 0; font-size: .92rem; color: var(--muted); }
.coin, .ledger__amt::before {
  display: inline-block; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFEFB8, var(--gold) 52%, var(--gold-deep));
  box-shadow: inset 0 0 0 2px rgba(150, 100, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
}
.coin { width: 24px; height: 24px; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.ledger li:last-child { border-bottom: 0; }
.ledger__what { color: var(--ink); }
.ledger__what small { display: block; font-size: .84rem; color: var(--muted); margin-top: 1px; }
.ledger__amt { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 400 1.25rem/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger__amt::before { content: ""; width: .8em; height: .8em; }
.ledger__amt--word { font-size: 1.05rem; }
.spend { display: grid; gap: 14px; margin-bottom: 20px; }
.spend__item { padding: 14px 16px; border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .05); }
.spend__item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.price-wrap { margin-bottom: 0; }
.price-table th[scope="row"] { background: none; padding-block: 9px; }
.price-table td.num, .price-table th.num { text-align: right; }
.price-table td.num { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- 08 tips */

.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.tip { position: relative; padding: 22px 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--bg) 140%); transition: border-color .2s, transform .2s var(--ease); }
.tip:hover { border-color: #4A525E; transform: translateY(-2px); }
.tip__n { display: block; margin-bottom: 10px; font: 400 2rem/1 var(--display); color: var(--sky); letter-spacing: .02em; }
.tip__n--red { color: var(--team-red); }
.tip h3 { font-size: 1.22rem; margin: 0 0 .4em; }
.tip p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.tip kbd { font-size: .74em; }

@media (prefers-reduced-motion: reduce) {
  .guide-toc a:hover, .tip:hover, .shot a:hover img { transform: none; }
}