/* UMC public site — component layer.
   Ports the imported tournament-site design (heavy black borders + hard offset
   shadows, condensed display type, IBM Plex Mono for numbers) into plain CSS.

   Theming: neutral colors go through role tokens
   (--text-primary / --text-inverse / --surface-card / --surface-ink / --bg-page)
   so dark mode is a single token swap at the bottom of this file — no filters. */
@import url("./styles.css");

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg-page);
  font-family:var(--font-body);
  color:var(--text-primary);
  font-size:15px;
  line-height:1.55;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
::selection{ background:var(--umc-blue-600); color:#fff; }

.disp{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--umc-ink-500); }
.pixel{ image-rendering:pixelated; }

/* ---- layout ---- */
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:900px; margin:0 auto; padding:0 32px; }
.wrap-slim{ max-width:640px; margin:0 auto; padding:0 32px; }
.section{ padding:44px 0 20px; }
.section-last{ padding-bottom:64px; }

/* ---- header ---- */
.hdr{
  position:sticky; top:0; z-index:10; background:var(--surface-card);
  border-bottom:3px solid var(--text-primary);
  display:flex; align-items:center; gap:24px; padding:12px 32px;
}
.hdr__logo{ height:40px; cursor:pointer; }
.nav{ display:flex; gap:4px; flex-wrap:wrap; }
.nav a{
  padding:8px 14px; border:none; background:transparent;
  color:var(--umc-ink-500); font-family:var(--font-display); font-weight:800;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radius-sm); cursor:pointer;
}
.nav a.is-active{ background:var(--surface-ink); color:var(--text-inverse); }
.hdr__spacer{ flex:1; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; font-family:var(--font-display); font-weight:800;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-inverse); background:var(--surface-ink);
  border:2px solid var(--text-primary); border-radius:var(--radius-sm);
  cursor:pointer; box-shadow:var(--shadow-hard-sm);
  transition:all .12s var(--ease-out); white-space:nowrap;
}
.btn:hover{ background:var(--surface-ink-hover); }
.btn:active{ box-shadow:0 0 0 #000; transform:translate(3px,3px); }
.btn--secondary{ color:var(--text-primary); background:var(--surface-card); }
.btn--secondary:hover{ background:var(--umc-surface-2); }
.btn--red{ color:#fff; background:var(--umc-red-600); }
.btn--red:hover{ background:var(--umc-red-700); }
.btn--blue{ color:#fff; background:var(--umc-blue-600); }
.btn--blue:hover{ background:var(--umc-blue-700); }
.btn--ghost{
  color:var(--text-primary); background:transparent; border-color:transparent;
  box-shadow:none;
}
.btn--ghost:hover{ background:var(--umc-surface-2); }
.btn--ghost:active{ transform:none; box-shadow:none; }
.btn--sm{ padding:7px 14px; font-size:11px; }
.btn--lg{ padding:15px 28px; font-size:15px; }
.btn .ico{ width:15px; height:15px; }

/* ---- tags / pills ---- */
.tag{
  display:inline-block; padding:4px 11px; font-family:var(--font-display);
  font-weight:900; text-transform:uppercase; font-size:11px; letter-spacing:.1em;
  background:var(--surface-card); color:var(--text-primary); border:2px solid var(--text-primary);
  border-radius:999px;
}
.tag--solid{ background:var(--surface-ink); color:var(--text-inverse); }
.tag--red{ background:var(--umc-red-50); color:var(--umc-red-700); border-color:var(--umc-red-600); }
.tag--blue{ background:var(--umc-blue-50); color:var(--umc-blue-700); border-color:var(--umc-blue-600); }

/* ---- section title (heading + rule) ---- */
.stitle{ display:flex; align-items:baseline; gap:16px; margin-bottom:24px; }
.stitle h2{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; font-size:32px; margin:0; }
.stitle__rule{ height:3px; flex:1; background:var(--text-primary); }

/* ---- crest ---- */
.crest{
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-ink); color:var(--text-inverse); border:2px solid var(--text-primary);
  border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:900;
  text-transform:uppercase;
}
.crest--red{ background:var(--umc-red-600); color:#fff; }
.crest--blue{ background:var(--umc-blue-600); color:#fff; }

/* ---- generic card ---- */
.card{
  background:var(--surface-card); border:3px solid var(--text-primary);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-hard);
}
.card--pad{ padding:24px; }

/* ---- hero ---- */
.hero{
  padding:52px 0; border-bottom:3px solid var(--text-primary);
  background:linear-gradient(180deg,var(--surface-card),var(--bg-page));
}
.hero__grid{ display:flex; gap:56px; align-items:center; flex-wrap:wrap; }
.hero__col-main{ flex:1 1 460px; }
.hero__col-side{ flex:1 1 360px; max-width:420px; display:flex; flex-direction:column; gap:16px; }
.hero h1{ font-family:Arial, Helvetica, sans-serif; font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; font-size:64px; line-height:1; margin:0 0 18px; }
.hero__lede{ font-size:18px; line-height:1.55; color:var(--umc-ink-700); max-width:460px; margin:0 0 26px; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

.server-card{
  background:#0b0b0c; border:3px solid var(--text-primary); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hard-red); padding:20px 24px; color:#fff;
  transition:box-shadow .15s var(--ease-out);
}
.server-card:hover{ box-shadow:-5px 5px 0 var(--umc-blue-600); }
.server-card__addr{ font-family:var(--font-mono); font-weight:700; font-size:26px; letter-spacing:.01em; }

/* ---- "how a match works" steps ---- */
.steps{ display:flex; gap:20px; flex-wrap:wrap; }
.step{
  flex:1 1 280px; background:var(--surface-card); border:3px solid var(--text-primary);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-hard); padding:24px;
  transition:transform .12s var(--ease-out);
}
.step:hover{ transform:translate(-2px,-2px); }
.step__top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.step__n{ font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--umc-ink-300); }
.step__ico{ width:44px; height:44px; border:2px solid var(--text-primary); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; }
.step__ico .ico{ width:22px; height:22px; }
.step h3{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:20px; margin:0 0 8px; }
.step p{ font-size:14px; line-height:1.55; color:var(--umc-ink-700); margin:0; }

/* ---- how-to-play rule blocks ---- */
.rule{ display:flex; gap:24px; align-items:flex-start; margin-bottom:28px; }
.rule__n{ flex:0 0 auto; width:64px; height:64px; background:var(--surface-ink); color:var(--text-inverse);
  border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:900; font-size:26px; box-shadow:var(--shadow-hard-sm); }
.rule__body{ flex:1; padding-top:2px; }
.rule__body h3{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:24px; margin:0 0 8px; }
.rule__body p{ font-size:16px; line-height:1.6; color:var(--umc-ink-700); margin:0; max-width:680px; }
.lede{ font-size:18px; line-height:1.6; color:var(--umc-ink-700); max-width:680px; margin:0 0 36px; }
.callout{
  background:var(--surface-card); border:3px solid var(--text-primary); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hard); padding:20px 24px; display:flex; align-items:center; gap:16px; margin:8px 0 36px;
}
.callout .ico{ width:26px; height:26px; flex:0 0 auto; }

/* ---- data tables ---- */
.tbl{
  border:3px solid var(--text-primary); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-hard); background:var(--surface-card);
}
.tbl__scroll{ overflow-x:auto; }
.tbl__head, .tbl__row{ display:grid; gap:8px; align-items:center; }
.tbl__head{
  padding:10px 18px; background:var(--surface-ink); color:var(--text-inverse);
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:9px; letter-spacing:.12em;
}
.tbl__row{
  padding:11px 18px; border-bottom:2px solid var(--umc-line-200);
  text-decoration:none; color:inherit;
}
.tbl__row:last-child{ border-bottom:none; }
a.tbl__row{ cursor:pointer; }
a.tbl__row:hover{ background:var(--umc-surface-2); }
.tbl__row--alt{ background:var(--umc-surface-2); }

/* leaderboard grid */
.lb-grid{ grid-template-columns:56px 1fr 90px 90px 90px; }
.lb-grid--eff{ grid-template-columns:56px 1fr 90px 90px 90px 90px; }
.lb-min{ min-width:640px; }
.lb-min--eff{ min-width:700px; }
.rank{ font-family:var(--font-mono); font-weight:700; font-size:17px; }
.player-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{ width:28px; height:28px; border:2px solid var(--text-primary); border-radius:4px; image-rendering:pixelated; flex:0 0 auto; }
.handle{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-cell{ display:flex; align-items:center; gap:8px; }
.team-dot{ width:12px; height:12px; border-radius:3px; border:1.5px solid var(--text-primary); flex:0 0 auto; }
.team-dot--red{ background:var(--umc-red-600); }
.team-dot--blue{ background:var(--umc-blue-600); }
.team-dot--neutral{ background:var(--surface-ink); }
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.num-lg{ font-family:var(--font-mono); font-weight:700; font-size:16px; }

/* pagination */
.pager{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; flex-wrap:wrap; }
.pager__info{ font-family:var(--font-mono); font-size:13px; color:var(--umc-ink-500); }
.pager__nav{ display:flex; gap:10px; }
.btn.is-disabled{ opacity:.4; pointer-events:none; }

/* ---- player profile ---- */
.profile-top{ display:flex; gap:28px; align-items:stretch; flex-wrap:wrap; margin-bottom:32px; }
.skin-card{
  flex:0 0 240px; border:3px solid var(--text-primary); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:24px 16px 20px; min-height:300px;
}
.skin-card--red{ background:var(--umc-red-50); box-shadow:var(--shadow-hard-red); }
.skin-card--blue{ background:var(--umc-blue-50); box-shadow:var(--shadow-hard-blue); }
.skin-card--neutral{ background:var(--umc-surface-2); box-shadow:var(--shadow-hard); }
.skin{ height:220px; image-rendering:pixelated; display:block; }
.profile-id{ flex:1 1 460px; display:flex; flex-direction:column; }
.profile-id__row{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.profile-id h1{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; font-size:52px; margin:0; line-height:1; word-break:break-word; }
.profile-id__sub{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:11px; letter-spacing:.14em; color:var(--umc-ink-500); margin-top:4px; }
.statgrid{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.statbox{
  flex:1; min-width:96px; background:var(--surface-card); border:2px solid var(--text-primary);
  border-radius:var(--radius-md); padding:12px 14px; box-shadow:var(--shadow-hard-sm);
}
.statbox__label{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:9px; letter-spacing:.14em; color:var(--umc-ink-500); }
.statbox__value{ font-family:var(--font-mono); font-weight:700; font-size:26px; line-height:1.1; }

/* recent-match grid */
.rm-grid{ grid-template-columns:130px 90px 110px 1fr 40px; }
.rm-min{ min-width:640px; }

/* ---- match detail ---- */
.scoreline{ background:var(--surface-card); border:3px solid var(--text-primary); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hard); padding:28px 32px; margin-bottom:14px; }
.scoreline__meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.scoreline__stage{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:11px; letter-spacing:.14em; color:var(--umc-ink-500); }
.scoreline__id{ font-family:var(--font-mono); font-size:13px; color:var(--umc-ink-500); }
.scoreline__main{ display:flex; align-items:center; gap:24px; justify-content:center; flex-wrap:wrap; }
.side{ flex:1; text-align:center; min-width:140px; }
.side--dim{ opacity:.6; }
.side__name{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:30px; margin-top:12px; }
.side__win{ display:inline-block; margin-top:8px; color:#fff; border:2px solid var(--text-primary); border-radius:999px;
  padding:3px 14px; font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:10px; letter-spacing:.14em; }
.side__win--red{ background:var(--umc-red-600); }
.side__win--blue{ background:var(--umc-blue-600); }
.bigscore{ font-family:var(--font-mono); font-weight:700; font-size:72px; line-height:1; white-space:nowrap; }
.bigscore .dash{ color:var(--umc-ink-300); }
.bigscore .red{ color:var(--umc-red-600); }
.bigscore .blue{ color:var(--umc-blue-600); }
.chips{ display:flex; justify-content:center; gap:10px; margin-top:22px; flex-wrap:wrap; }
.chip{ border:2px solid var(--text-primary); border-radius:var(--radius-sm); padding:6px 14px; font-size:12px;
  display:flex; gap:8px; align-items:center; font-family:var(--font-display); font-weight:900; text-transform:uppercase; }
.chip .muted{ color:var(--umc-ink-500); }

.sb-grid{ grid-template-columns:1fr 60px 60px 60px 80px 70px 70px; }
.sb-min{ min-width:660px; }
.sb-team-head{ padding:10px 18px; color:var(--text-inverse); font-family:var(--font-display); font-weight:900;
  text-transform:uppercase; font-size:15px; letter-spacing:.06em; border-bottom:3px solid var(--text-primary);
  display:flex; justify-content:space-between; }
.sb-team-head--red{ background:var(--umc-red-600); color:#fff; }
.sb-team-head--blue{ background:var(--umc-blue-600); color:#fff; }
.sb-team-head--neutral{ background:var(--surface-ink); }
.sb-player{ display:flex; align-items:center; gap:10px; }
.sb-player__role{ font-size:10px; color:var(--umc-ink-500); }

/* ---- lookup box ---- */
.lookup{ background:var(--surface-card); border:3px solid var(--text-primary); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hard); padding:26px; }
.lookup__title{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:20px; margin-bottom:14px; }
.lookup__tabs{ display:flex; gap:6px; margin-bottom:14px; border-bottom:3px solid var(--text-primary); }
.lookup__tab{ position:relative; top:3px; padding:8px 14px; border:none; cursor:pointer;
  background:transparent; color:var(--umc-ink-500); font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; font-size:12px; letter-spacing:.08em; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.lookup__tab.is-active{ background:var(--surface-ink); color:var(--text-inverse); }
.lookup__form{ display:flex; gap:10px; }
.field{ flex:1; display:flex; align-items:center; gap:8px; background:var(--surface-card); border:2px solid var(--text-primary);
  border-radius:var(--radius-sm); padding:10px 14px; }
.field .ico{ width:16px; height:16px; color:var(--umc-ink-500); }
.field input{ flex:1; border:none; outline:none; font:inherit; font-size:15px; background:transparent; min-width:0; color:inherit; }
.lookup__hint{ margin-top:12px; font-size:12px; color:var(--umc-ink-500); }
.lookup__hint b{ cursor:pointer; }
.notice{ margin-top:20px; background:var(--umc-surface-2); border:2px solid var(--text-primary);
  border-radius:var(--radius-md); padding:14px 18px; color:var(--text-primary); font-size:14px; }

/* ---- footer ---- */
.ftr{ background:var(--surface-ink); color:var(--text-inverse); padding:32px; margin-top:8px; }
.ftr__inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:16px; }
.ftr__brand{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:22px; }
.ftr__mail{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:10px; letter-spacing:.14em; color:var(--umc-ink-300); }

/* ---- misc ---- */
.backlink{ margin-bottom:20px; }
.empty{ padding:40px 18px; text-align:center; color:var(--umc-ink-500); font-size:15px; }

@media (max-width:720px){
  .wrap, .wrap-narrow, .wrap-slim{ padding:0 18px; }
  .hero h1{ font-size:48px; }
  .profile-id h1{ font-size:40px; }
  .bigscore{ font-size:52px; }
  .stitle h2{ font-size:26px; }
  .hdr{ padding:12px 18px; gap:14px; flex-wrap:wrap; }
}

/* ============================================================
   DARK THEME
   A real token swap (no invert filter). Toggled by adding
   .umc-dark to the <html> element (see base.html).
   Light mode is the default in tokens/colors.css; this only
   overrides the neutral role tokens + a few team-tinted washes.
   ============================================================ */
.umc-dark{
  color-scheme: dark;

  /* neutral roles */
  --umc-black: #e9e9ec;         /* legacy alias — some templates use it inline */
  --text-primary: #e9e9ec;      /* body text + the heavy borders */
  --text-inverse: #101013;      /* text sitting on the light "ink" blocks */
  --surface-ink: #e9e9ec;       /* primary fills: buttons, table heads, footer */
  --surface-ink-hover: #cfcfd4;
  --surface-card: #17181b;      /* cards / panels / header */
  --bg-page: #0e0e11;           /* page background */

  --umc-ink-700: #c4c4ca;       /* secondary body text */
  --umc-ink-500: #9a9aa2;       /* muted labels / nav */
  --umc-ink-300: #74747c;       /* faint numerals, dashes */
  --umc-line-200: #26262b;      /* table row dividers */
  --umc-surface-2: #212227;     /* sunken fills, row hover, notice */
}

/* team-tinted washes: the light 50-level tints would glare on dark,
   so give them dark tints with legible light-team text */
.umc-dark .tag--red{ background:#2a1418; color:#f2909b; }
.umc-dark .tag--blue{ background:#141a34; color:#9fb0f5; }
.umc-dark .skin-card--red{ background:#22131a; }
.umc-dark .skin-card--blue{ background:#141834; }

/* big score reads brighter on the dark panel */
.umc-dark .bigscore .blue{ color:#6f86ff; }

/* drop the red offset shadow on the server card entirely in dark mode */
.umc-dark .server-card,
.umc-dark .server-card:hover{ box-shadow:none; }

/* keep the footer a calm dark band (a full-width light band would glare),
   separated from the page by a light top rule */
.umc-dark .ftr{ background:#17181b; color:#e9e9ec; border-top:3px solid var(--text-primary); }
.umc-dark .ftr__mail{ color:#9a9aa2; }