/* Cobblemon Conquest — shared stylesheet.
   Palette sampled from the banner logo: Pokeball red, silver, and the charcoal used for its outlines.
   Square corners throughout: the subject is made of blocks, and rounded cards would fight that. */

:root{
  --ground:#1B1E24;
  --panel:#23272F;
  --panel-2:#2A2F38;
  --rule:#343A45;
  --rule-soft:#2C313A;

  --ink:#E9EBEF;
  --ink-soft:#AEB4C0;
  --ink-faint:#7E8695;

  --red:#D8232A;
  --silver:#E6E8EC;

  --sapphire:#4E9BD6;
  --ruby:#DE5A61;
  --emerald:#4FB27A;
  --gold:#E3B341;

  --max:860px;      /* reading column — measured for ~70 characters at 16px */
  --wide:860px;     /* header aligns exactly with the reading column */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--sapphire);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible{outline:2px solid var(--sapphire);outline-offset:3px;}

/* ---------------- masthead ---------------- */
.masthead{
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,#20242B 0%,var(--ground) 100%);
}
.masthead-in{
  max-width:var(--wide);margin:0 auto;padding:22px 24px 0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.brand{display:block;flex:none;}
.brand img{width:238px;height:auto;}

nav.top{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:-1px;}
nav.top a{
  display:block;padding:9px 16px;color:var(--ink-soft);font-size:15px;
  border-bottom:3px solid transparent;white-space:nowrap;
}
nav.top a:hover{color:var(--ink);text-decoration:none;background:var(--panel);}
nav.top a.on{color:var(--ink);border-bottom-color:var(--red);font-weight:600;}

/* ---------------- page ---------------- */
main{max-width:var(--max);margin:0 auto;padding:44px 24px 90px;}

h1{
  font-size:clamp(31px,4.2vw,42px);line-height:1.12;margin:0 0 14px;
  font-weight:800;letter-spacing:-.02em;text-wrap:balance;
}
h2{
  font-size:25px;margin:48px 0 14px;font-weight:700;letter-spacing:-.01em;
  padding-bottom:9px;border-bottom:1px solid var(--rule);text-wrap:balance;
}
h3{font-size:17px;margin:26px 0 8px;font-weight:700;}
p{margin:0 0 15px;color:var(--ink-soft);}
p.lead{font-size:19px;color:var(--ink);line-height:1.6;}
strong{color:var(--ink);font-weight:600;}
ul,ol{color:var(--ink-soft);padding-left:24px;}
li{margin-bottom:8px;}
em{color:var(--ink-soft);}
code{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.87em;
  background:var(--panel-2);border:1px solid var(--rule);padding:1px 6px;color:var(--silver);
}
hr{border:none;border-top:1px solid var(--rule);margin:36px 0;}

/* ---------------- the join bar: the most important thing on the site ---------------- */
.join{
  background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--red);
  padding:22px 24px;margin:26px 0 34px;
}
.join .label{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 8px;font-weight:600;
}
.ip{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:clamp(20px,3.4vw,29px);font-weight:600;color:var(--silver);word-break:break-all;
}
.join .meta{margin:10px 0 0;font-size:14px;color:var(--ink-faint);}

/* ---------------- panels ---------------- */
/* Two columns on purpose: eight cards make four even rows, where three columns leave a ragged
   two-card row that reads as unfinished. */
.grid{display:grid;gap:15px;grid-template-columns:repeat(2,1fr);margin:20px 0 8px;}
.card{background:var(--panel);border:1px solid var(--rule);padding:17px 19px;}
.card h3{margin:0 0 7px;font-size:16.5px;}
.card p{margin:0;font-size:15px;line-height:1.6;}
.card .k{
  font-family:ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:7px;
}

.note{
  background:var(--panel-2);border:1px solid var(--rule);border-left:3px solid var(--gold);
  padding:16px 20px;margin:22px 0;
}
.note p{margin:0;}
.note p + p{margin-top:9px;}

/* ---------------- tables ---------------- */
.tw{overflow-x:auto;margin:20px 0;border:1px solid var(--rule);}
table{border-collapse:collapse;width:100%;min-width:480px;background:var(--panel);}
th{
  text-align:left;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;padding:11px 15px;background:var(--panel-2);
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
td{padding:10px 15px;border-bottom:1px solid var(--rule-soft);font-size:15px;color:var(--ink-soft);vertical-align:top;}
tr:last-child td{border-bottom:none;}
td.n{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink);}
td code{background:transparent;border:none;padding:0;color:var(--silver);}
td strong{color:var(--ink);}

.tag{
  display:inline-block;font-family:ui-monospace,Consolas,monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;
  white-space:nowrap;vertical-align:middle;
}
.t-sap{color:var(--sapphire);} .t-rub{color:var(--ruby);} .t-eme{color:var(--emerald);}
.t-gold{color:var(--gold);} .t-free{color:var(--ink-faint);}
h2 .tag{font-size:10px;margin-left:6px;vertical-align:middle;}

/* ---------------- footer ---------------- */
footer{
  border-top:1px solid var(--rule);margin-top:64px;padding:26px 0 0;
  color:var(--ink-faint);font-size:13.5px;
}
footer a{color:var(--ink-soft);}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px;}

/* ---------------- responsive ---------------- */
@media (max-width:720px){
  .masthead-in{padding:18px 18px 0;align-items:flex-start;flex-direction:column;gap:14px;}
  .brand img{width:210px;}
  nav.top{margin-bottom:0;width:100%;}
  nav.top a{padding:8px 12px;font-size:14.5px;}
  main{padding:32px 18px 70px;}
  .grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

/* ---------------- store link ----------------
   Marked out from the other nav items because it is the only one that leaves the site, and the only
   one that is an action rather than a page. Red, matching the logo, so it reads as the call to action
   without needing a button in the middle of a nav bar. */
nav.top a.store{color:var(--red);font-weight:600;}
nav.top a.store:hover{color:#F0454C;background:var(--panel);}
nav.top a.store::after{content:"\2197";font-size:.8em;margin-left:5px;opacity:.75;}

.cta{
  display:inline-block;background:var(--red);color:#fff;font-weight:600;font-size:16px;
  padding:12px 24px;border:1px solid var(--red);margin:6px 0 4px;
}
.cta:hover{background:#B81D24;border-color:#B81D24;color:#fff;text-decoration:none;}
.cta-note{font-size:14px;color:var(--ink-faint);margin:10px 0 0;}