/* Brand art supplied by the project owner: ui/ko-logo-*.png (badge) and
   ui/ko-banner-* (hero strip). Loaded AFTER ko.css so these win. */
.komark{width:34px;height:32px;object-fit:contain;display:block;border-radius:50%}
.brand .komark{filter:drop-shadow(0 0 10px rgba(255,106,22,.35))}
.kobanner{margin:14px 0 0;border:1px solid var(--line,#2a2118);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  background:#0a0a0c;line-height:0}
.kobanner img{width:100%;height:auto;display:block}
@media (max-width:640px){.kobanner{margin-top:10px}}

/* The banner now carries the light sweep that used to live on the hero. .hud-sweep is
   position:absolute;inset:0, so the banner must be the positioned ancestor. */
.kobanner{position:relative}
.kobanner .hud-sweep{z-index:2}
.kobanner picture,.kobanner img{position:relative;z-index:1}

/* Hero without the two fighter cut-outs: it is a rank readout now, so drop the height
   that only existed to fit 332px character art and let the content set the size. */
.hero-lite{min-height:0}
.hero-lite .hero-core{padding:26px 24px;gap:40px}
@media (max-width:640px){.hero-lite .hero-core{padding:20px 14px;gap:18px}}

/* ---- rank readout typography ----------------------------------------------
   The block was laid out around 332px character art. Without it the vertical rhythm
   collapsed: .tname runs at line-height:1, and CJK glyphs fill their em box far more
   than Latin, so the title crowded the kicker above and collided with the empty .lpbar
   below — which then read as an underline glued to the text. Give every line real
   space instead of shrinking the type. */
.hero-lite .rank-meta{min-width:min(300px,100%)}
.hero-lite .rank-meta .kicker{display:block;margin-bottom:10px;opacity:.9}
.hero-lite .rank-meta .tname{line-height:1.18;letter-spacing:2px;margin:0 0 4px;
  text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero-lite .rank-meta .lpbar{margin:16px 0 12px}
.hero-lite .rank-meta .sub{line-height:1.6;opacity:.85}
/* the emblem no longer competes with artwork, so it can sit a size smaller */
.hero-lite .emblem{width:132px;height:132px}

/* depth, so the block does not read as a flat empty panel now that the art is gone */
.hero-lite{background:
  radial-gradient(560px 220px at 50% 130%, rgba(255,106,22,.13), transparent 62%),
  radial-gradient(420px 300px at 12% -10%, rgba(80,150,210,.06), transparent 60%),
  linear-gradient(180deg,rgba(20,24,40,.5),rgba(6,8,15,.6))}

@media (max-width:720px){
  .hero-lite .emblem{width:104px;height:104px}
  .hero-lite .rank-meta{text-align:center;min-width:0}
  .hero-lite .rank-meta .lpbar{margin-left:auto;margin-right:auto}
}

/* ---- logged-out call to action --------------------------------------------
   Before a wallet is connected the ranked CTA is dead (btnMatch is disabled), which
   left the page with nothing to do. Offer the training ground instead: it needs no
   wallet, and it is the cheapest way to get a visitor into the game. ranked.js swaps
   which one is visible the moment login succeeds. */
/* CA row: address chips + the copy button token.js injects after launch. */
.ca-copy{margin-left:8px;background:transparent;color:var(--accent,#ff6a16);border:1px solid var(--accent,#ff6a16);
  border-radius:4px;padding:2px 10px;font-size:12px;font-family:inherit;cursor:pointer;vertical-align:middle}
.ca-copy:hover{background:var(--accent,#ff6a16);color:#160c02}
.pitch .ca + .ca{margin-left:10px}

.cta-guest{display:block;text-align:center;text-decoration:none}
.cta-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:12px}
.cta-hint{color:var(--muted,#8892a6);font-size:13px}