/* PokeAFK website — self-contained stylesheet (no build step).
   Pixel-art design system derived from the PokeAFK logo:
   night navy · Rotom orange · ice blue · laurel gold.
   Display face: Press Start 2P (self-hosted). Body: system sans. */

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #081120;           /* night navy (logo backdrop) */
  --bg-2: #0d1a2f;
  --panel: #101f36;
  --panel-2: #16294a;
  --border: #23406e;       /* steel blue */
  --edge: #050b16;         /* hard pixel outline */
  --text: #eaf2ff;
  --muted: #8fa3c4;
  --primary: #f7941e;      /* Rotom orange */
  --primary-2: #ffb339;    /* ember */
  --primary-deep: #b35f0a;
  --accent: #ffc93c;       /* laurel gold */
  --link: #4fc1ff;         /* ice blue */
  --blue-deep: #1d6fd8;
  --radius: 0;             /* pixels have corners */
  --shadow: 4px 4px 0 rgba(3, 7, 14, 0.55);
  --maxw: 1120px;
  --pixel: "Press Start 2P", "Courier New", monospace;

  --tier-legendary: #ff9d2b;   /* orange */
  --tier-mythical: #c084fc;    /* purple */
  --tier-ultra-beast: #ff6ec7; /* pink */
  --green: #4ade80;
}

* { box-sizing: border-box; }

/* ---- Scrollbars: one thin square bar, everywhere ------------------------------- */
/* Global on purpose. Firefox inherits `scrollbar-*` from `html`, and an unqualified
   `::-webkit-scrollbar` already matches every element — so the page scrollbar, every
   `.table-wrap` (32 of them across the wiki and /admin), the admin log pane, and every
   textarea and select are covered without touching a single template.
   Square, via --radius — a rounded thumb is off-brand in a design that has no round corners.
   Identical block lives in play_service's app.css; the two apps share these tokens exactly. */
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(29, 111, 216, 0.16), transparent 62%),
    radial-gradient(800px 420px at 88% 12%, rgba(247, 148, 30, 0.07), transparent 55%),
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.014) 0 25%, transparent 0 50%,
      rgba(255, 255, 255, 0.014) 0 75%, transparent 0) 0 0 / 24px 24px,
    var(--bg);
  color: var(--text);
  font: 16px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------------- Nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(8, 17, 32, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--edge);
  box-shadow: 0 3px 0 rgba(35, 64, 110, 0.55);
}
.nav-inner { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 28px; height: 28px; display: block; }
.brand-word { font-family: var(--pixel); font-size: 13px; letter-spacing: 0; color: var(--primary-2); text-shadow: 2px 2px 0 var(--edge); }
.brand-word b { font-weight: 400; color: var(--link); }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted); font-family: var(--pixel); font-size: 9px;
  padding: 9px 10px; border: 2px solid transparent; white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--panel); border-color: var(--border); text-decoration: none; }
.nav-drop { position: relative; }
.nav-drop .caret { font-size: 7px; vertical-align: 2px; }
.nav-drop .drop-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 30;
  min-width: 190px; padding: 6px;
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--border), var(--shadow);
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display: grid; }
.nav-drop .drop-menu a { display: block; padding: 10px 12px; }
.nav-links a.cta {
  color: var(--edge); background: var(--primary);
  border: 2px solid var(--edge);
  box-shadow: 2px 2px 0 var(--edge);
}
.nav-links a.cta:hover { background: var(--primary-2); border-color: var(--edge); color: var(--edge); }
.nav-links a.cta:active { transform: translate(2px, 2px); box-shadow: none; }

.locale-switch { display: flex; gap: 0; margin-left: 12px; border: 2px solid var(--border); padding: 0; }
.locale-switch a { font-family: var(--pixel); font-size: 8px; color: var(--muted); padding: 7px 8px; }
.locale-switch a:hover { color: var(--text); text-decoration: none; }
.locale-switch a.on { color: var(--edge); background: var(--link); }

.nav-account { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.nav-account .email { font-size: 13px; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account a { color: var(--muted); font-family: var(--pixel); font-size: 9px; padding: 9px 10px; border: 2px solid transparent; white-space: nowrap; }
.nav-account a:hover { color: var(--text); background: var(--panel); border-color: var(--border); text-decoration: none; }
.linkish { background: none; border: 2px solid transparent; color: var(--muted); font-family: var(--pixel); font-size: 9px; cursor: pointer; padding: 9px 10px; }
.linkish:hover { color: var(--text); background: var(--panel); border-color: var(--border); }

/* ---------------- Dialog-box panels (signature) ----------------
   Every panel is a Game-Boy-style textbox: dark outer frame,
   light inner keyline, hard offset shadow. */
.panel {
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--border), var(--shadow);
  padding: 22px;
}

/* auth forms */
.auth-wrap { max-width: 440px; margin: 0 auto; }
.auth-form { display: grid; gap: 4px; }
.auth-form label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.auth-form input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 2px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 15px; border-radius: 0; }
.auth-form input:focus { outline: none; border-color: var(--primary); box-shadow: 2px 2px 0 var(--edge); }
.auth-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.auth-alt { text-align: center; color: var(--muted); margin-top: 16px; font-size: 14px; }

/* "or" divider between the password form and Google sign-in: a rule across the
   full width with the label knocked out of the middle. */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 2px; background: var(--border); }
/* .auth-form .btn only reaches inside the form; this link sits outside it. */
.auth-google { width: 100%; justify-content: center; }
.auth-google-mark { flex: none; }

/* starter picker */
.starter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.starter-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--border); background: var(--panel); cursor: pointer; text-align: center; }
.starter-card:hover { box-shadow: inset 0 0 0 2px var(--primary), var(--shadow); }
.starter-card input { accent-color: var(--primary); }
.starter-card img { image-rendering: pixelated; }
.starter-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primary), var(--shadow); background: var(--panel-2); }
.starter-name { font-family: var(--pixel); font-size: 10px; text-transform: capitalize; }
@media (max-width: 600px) { .starter-grid { grid-template-columns: 1fr; } }

/* farm HUD */
.muted { color: var(--muted); }
.hud-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 2px solid var(--bg-2); font-size: 14.5px; }
.hud-row:last-child { border-bottom: none; }
.hud-row span { color: var(--muted); }
.hud-row b { font-variant-numeric: tabular-nums; font-size: 16px; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.cap { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; text-transform: capitalize; text-align: center; }
.cap img { width: 56px; height: 56px; image-rendering: pixelated; }

/* ---------------- Layout ---------------- */
main { padding: 40px 0 72px; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-family: var(--pixel); font-size: 20px; line-height: 1.5; margin: 0 0 10px; color: var(--primary-2); text-shadow: 2px 2px 0 var(--edge); }
.page-head p { color: var(--muted); margin: 0; max-width: 70ch; }
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.section-title { font-family: var(--pixel); font-size: 14px; line-height: 1.6; margin: 38px 0 16px; color: var(--link); text-shadow: 2px 2px 0 var(--edge); }
.section-title::before { content: "▶ "; color: var(--primary); }

/* ---------------- Hero ---------------- */
.hero { padding: 8px 0 10px; text-align: center; }
/* The logo is capped against the VIEWPORT, not just a pixel width: at its full 680px
   the logo + h1 + lead consumed all 768px of a standard laptop and pushed the sign-up
   button below the fold, which is the one thing this hero exists to show. */
.hero-logo {
  display: block; width: min(680px, 92%); height: auto;
  max-height: 30vh; object-fit: contain; margin: 0 auto -10px;
}
.hero h1 {
  font-family: var(--pixel);
  font-size: clamp(15px, 2.6vw, 24px); line-height: 1.8; margin: 0 0 16px;
  text-shadow: 3px 3px 0 var(--edge);
}
.hero h1 .grad { color: var(--link); }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 62ch; margin: 0 auto 20px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; }
/* The hero asks for one thing, so its primary button is visibly the primary thing on
   the page — the secondary "I already have an account" stays at base size. */
.btn.lg { font-size: 12px; padding: 17px 26px; }
.hero-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
/* The pixel display font has a 15px floor and does not reflow, so a 24-character
   label is wider than a 350px content box. On phones the CTAs stack full-width and
   drop a step in size rather than overflowing the container. */
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { justify-content: center; }
  .btn.lg { font-size: 10px; padding: 15px 12px; }
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pixel); font-size: 10px; line-height: 1.4;
  padding: 13px 18px; border: 3px solid var(--edge);
  background: var(--panel); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--border), var(--shadow);
  cursor: pointer;
}
.btn:hover { text-decoration: none; background: var(--panel-2); }
.btn:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px var(--border); }
.btn.primary {
  color: var(--edge); background: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary-2), var(--shadow);
}
.btn.primary:hover { background: var(--primary-2); }
.btn.primary:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px var(--primary-2); }

/* ---------------- Cards / grids ---------------- */
.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature h3 { margin: 6px 0 6px; font-family: var(--pixel); font-size: 11px; line-height: 1.6; color: var(--text); }
.feature p { color: var(--muted); margin: 0; font-size: 14.5px; }
.feature .ico { font-size: 22px; }

/* ---------------- Pokédex grid ---------------- */
.dex-toolbar { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mon {
  display: block; background: var(--panel);
  border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--border);
  padding: 12px; text-align: center; position: relative;
}
.mon:hover { text-decoration: none; box-shadow: inset 0 0 0 2px var(--primary), var(--shadow); transform: translate(-2px, -2px); }
.mon .no { position: absolute; top: 10px; left: 12px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mon .sprite { width: 96px; height: 96px; margin: 4px auto 2px; image-rendering: pixelated; display: block; }
.mon .name { font-family: var(--pixel); font-size: 9px; line-height: 1.5; text-transform: capitalize; color: var(--text); }
.mon .types { display: flex; gap: 5px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.mon .rar { position: absolute; top: 10px; right: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; }

/* ---------------- Type & rarity badges ---------------- */
.type { display: inline-block; padding: 3px 8px; border: 2px solid var(--edge); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #081120; }
/* type shown as its pixel-art sprite (title= gives the name on hover) — bare icon, no chip */
.type-ico { display: inline-block; image-rendering: pixelated; vertical-align: middle; }
.type-normal { background: #9099a1; } .type-fire { background: #ff9d55; } .type-water { background: #4d90d5; color:#fff; }
.type-electric { background: #f4d23c; } .type-grass { background: #63bc5a; } .type-ice { background: #73cec0; }
.type-fighting { background: #ce4069; color:#fff; } .type-poison { background: #ab6ac8; color:#fff; } .type-ground { background: #d97746; color:#fff; }
.type-flying { background: #8fa8dd; } .type-psychic { background: #fa7179; color:#fff; } .type-bug { background: #90c12c; }
.type-rock { background: #c7b78b; } .type-ghost { background: #5269ad; color:#fff; } .type-dragon { background: #0b6dc3; color:#fff; }

.tier-legendary { color: var(--tier-legendary); }
.tier-mythical { color: var(--tier-mythical); }
.tier-ultra-beast { color: var(--tier-ultra-beast); }
.pill { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border: 2px solid currentColor; }

/* ---------------- Detail page ---------------- */
.detail { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
.detail .art { background: var(--panel); border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--border), var(--shadow); padding: 18px; text-align: center; }
.detail .art img { width: 100%; max-width: 220px; image-rendering: pixelated; }
.stat-row { display: grid; grid-template-columns: 92px 42px 1fr; align-items: center; gap: 10px; margin: 7px 0; }
.stat-row .lbl { color: var(--muted); font-size: 13px; }
.stat-row .val { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.bar { height: 12px; border: 2px solid var(--edge); background: var(--bg-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--primary) 0 8px, var(--primary-2) 8px 16px); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.evo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.evo .arrow { color: var(--primary); }

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--border), var(--shadow); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 2px solid var(--bg-2); white-space: nowrap; }
thead th { color: var(--link); font-family: var(--pixel); font-size: 8px; letter-spacing: 0; text-transform: uppercase; position: sticky; top: 0; background: var(--panel-2); }
tbody tr:hover { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Type chart matrix */
.matrix td, .matrix th { text-align: center; padding: 6px 8px; border: 1px solid var(--border); }
.matrix .head { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; }
.m2 { background: rgba(74, 222, 128, 0.18); color: #86efac; font-weight: 800; }
.mh { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.m0 { background: rgba(148, 163, 184, 0.14); color: var(--muted); }
.m1 { color: #47536420; }

/* ---------------- Subscription ---------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { background: var(--panel); border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--border), var(--shadow); padding: 24px; display: flex; flex-direction: column; }
.plan.highlight { box-shadow: inset 0 0 0 2px var(--primary), var(--shadow); position: relative; }
.plan .tag { position: absolute; top: -13px; left: 20px; background: var(--primary); color: var(--edge); font-family: var(--pixel); font-size: 8px; padding: 5px 10px; border: 2px solid var(--edge); text-transform: uppercase; }
.plan h3 { margin: 0 0 8px; font-family: var(--pixel); font-size: 13px; line-height: 1.5; }
.plan .tagline { color: var(--muted); font-size: 14px; margin: 0 0 16px; min-height: 40px; }
.plan .price { font-size: 34px; font-weight: 850; letter-spacing: -0.02em; }
.plan .price small { font-size: 15px; color: var(--muted); font-weight: 600; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 9px; font-size: 14.5px; align-items: flex-start; }
.plan li::before { content: "▸"; color: var(--green); font-weight: 900; }
.plan .btn { margin-top: auto; justify-content: center; }
.fair { margin-top: 26px; border: 3px solid var(--edge); border-left: 6px solid var(--accent); background: var(--panel); box-shadow: inset 0 0 0 2px var(--border), var(--shadow); padding: 16px 20px; }
.fair b { color: var(--accent); }

/* Star Shard store */
.ss-amount { margin: 6px 0 14px; }
.ss-total { font-size: 30px; font-weight: 850; letter-spacing: -0.02em; color: var(--accent); display: block; }
.ss-total small { font-size: 15px; color: var(--muted); font-weight: 700; }
/* The Star Shard icon, everywhere it appears. It used to be an <img> with hand-typed inline
   styles that disagreed between pages (0.95em here, 0.9em there), so alignment shifted from
   page to page. Sizing is the only thing left to the call site; matches play_service's
   .cur-icon so the currency reads identically on the site and in the game. */
.ss-ico { vertical-align: -0.12em; margin-right: 5px; image-rendering: auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.ss-bonus { font-size: 13px; color: var(--muted); }
.vip-hint { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(255, 201, 60, 0.10); border: 2px solid rgba(255, 201, 60, 0.35); padding: 3px 10px; margin-bottom: 12px; }
.price-ss { font-size: 30px; font-weight: 850; letter-spacing: -0.02em; }
.price-ss .unit { font-size: 15px; color: var(--accent); font-weight: 700; }
.price .was { font-size: 16px; font-weight: 600; color: var(--muted); text-decoration: line-through; margin-right: 8px; }
.beta-pill { display: inline-block; vertical-align: middle; margin-left: 8px; background: var(--green); color: var(--edge); font-family: var(--pixel); font-size: 8px; padding: 4px 8px; border: 2px solid var(--edge); text-transform: uppercase; }

/* ---------------- Guides ---------------- */
.guide-body p { margin: 0 0 14px; }
.tag-list { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; color: var(--muted); background: var(--panel-2); border: 2px solid var(--border); padding: 3px 10px; }

/* ---------------- News ---------------- */
.news-item { padding: 16px 0; border-bottom: 2px solid var(--panel-2); }
.news-item h4 { margin: 0 0 4px; font-size: 16px; }
.news-item .date { color: var(--link); font-family: var(--pixel); font-size: 8px; }
.news-item p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }

/* ---------------- Flash / banners ---------------- */
.banner { border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--border); background: var(--panel); padding: 14px 18px; margin-bottom: 18px; }
.banner.warn { box-shadow: inset 0 0 0 2px #7c5b16; background: rgba(255, 201, 60, 0.08); color: var(--accent); }

/* ---------------- Footer ---------------- */
.footer { border-top: 3px solid var(--edge); box-shadow: 0 -3px 0 rgba(35, 64, 110, 0.55) inset; color: var(--muted); font-size: 13.5px; padding: 28px 0; }
.footer .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--text); }

/* ---------------- Motion ---------------- */
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.blink { animation: blink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  .mon:hover { transform: none; }
  .btn:active, .nav-links a.cta:active { transform: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 820px) {
  .grid.cols-3, .plans { grid-template-columns: 1fr; }
  .grid.cols-2 { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .prov-two { grid-template-columns: 1fr; }
  .prov-two .h { display: none; }
  .prov-stat { grid-template-columns: 52px 50px 1fr 42px; gap: 8px; }
  .nav-inner { height: auto; padding: 10px 0; flex-wrap: wrap; }
  .nav-links { width: 100%; }
  .hero h1 { line-height: 2; }
}

/* ---------------- Admin panel (unlinked GM tool) ---------------- */
.admin-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.admin-nav a { font-family: var(--pixel); font-size: 9px; text-transform: uppercase; padding: 7px 12px; border: 2px solid var(--border); background: var(--panel); color: var(--text); text-decoration: none; }
.admin-nav a.on, .admin-nav a:hover { border-color: var(--primary); color: var(--primary); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 8px; }
.admin-stats div { display: flex; flex-direction: column; }
.admin-stats b { font-size: 22px; font-weight: 850; letter-spacing: -0.02em; }
.admin-stats span { font-size: 12px; color: var(--muted); }
.row-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.row-form input[type="text"], .row-form input[type="number"], .row-form input[type="datetime-local"], .row-form select { background: var(--panel-2); border: 2px solid var(--border); color: var(--text); padding: 8px 10px; font: inherit; min-width: 0; }
.row-form input:focus, .row-form select:focus { outline: none; border-color: var(--primary); }
.admin-pager { display: flex; gap: 10px; align-items: center; margin: 14px 0; }
.iv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.iv-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.iv-grid input { width: 100%; background: var(--panel-2); border: 2px solid var(--border); color: var(--text); padding: 6px 8px; font: inherit; }
.admin-actions { display: grid; gap: 12px; margin-top: 10px; }
.admin-team { border: 2px solid var(--border); padding: 10px 12px; margin-top: 10px; }
.admin-team-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.admin-team-mons { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-team-mon { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--text); text-decoration: none; padding: 6px 8px; border: 2px solid transparent; }
.admin-team-mon:hover { border-color: var(--primary); text-decoration: none; }

/* ---------------- Admin area dashboards (drill-downs) ---------------- */
.panel-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.panel-link:hover { box-shadow: inset 0 0 0 2px var(--primary), var(--shadow); text-decoration: none; }
.panel-link h3 { color: var(--text); }
.panel-link .open-hint { margin-top: 10px; font-family: var(--pixel); font-size: 8px; color: var(--primary); text-transform: uppercase; }
.chart-box { position: relative; height: 260px; margin-top: 10px; }
.days-switch { display: inline-flex; border: 2px solid var(--border); }
.days-switch a { font-family: var(--pixel); font-size: 8px; color: var(--muted); padding: 7px 10px; }
.days-switch a.on, .days-switch a:hover { color: var(--primary); text-decoration: none; }

/* ---------------- Admin chat/log inspector (/admin/users/:id/chat) ---------------- */
.log-pane {
  height: 300px; overflow-y: auto; margin-top: 10px; padding: 10px;
  background: var(--panel-2); border: 2px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6;
}
.log-row { word-break: break-word; }
.log-ts { color: var(--muted); }
.log-status { font-family: var(--pixel); font-size: 8px; text-transform: uppercase; }
.log-status.ok { color: #7fc96b; }
.log-status.err { color: #ef4444; }

/* ---------------- Wiki items (/wiki/items and the item detail page) ---------------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.filters input[type="search"], .filters select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--panel-2);
  border: 2px solid var(--border); padding: 8px 10px; min-width: 200px;
}
.filters input[type="search"]:focus, .filters select:focus { outline: none; border-color: var(--primary); }
.filters .check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); cursor: pointer; }
.filters #item-count { margin-left: auto; font-size: 13px; }

.sprite-sm { width: 28px; height: 28px; image-rendering: pixelated; vertical-align: -0.5em; }
.item-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.item-link:hover { color: var(--primary); }

.src-badge {
  display: inline-block; font-size: 11px; color: var(--muted); background: var(--panel-2);
  border: 2px solid var(--border); padding: 2px 7px; margin: 2px 4px 2px 0; white-space: nowrap;
}
.src-badge.src-shop { color: var(--accent); }
.src-badge.src-zone-drop, .src-badge.src-species-drop { color: #7fc96b; }
.src-badge.src-reward { color: var(--primary); }
.src-badge.src-casino { color: #d97ad9; }

.src-block { margin-bottom: 18px; }
.src-block:last-child { margin-bottom: 0; }
.src-block h4 { margin: 0 0 6px; font-family: var(--pixel); font-size: 9px; text-transform: uppercase; color: var(--primary); }
.src-block p.muted { margin: 0 0 8px; font-size: 13px; white-space: normal; }

.bullets { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.9; }
.bullets li { white-space: normal; }

.learner { display: inline-block; margin-right: 10px; line-height: 1.9; }
.cat-chip { text-transform: capitalize; }

/* ---------------- Public provenance ledger (/provenance) ---------------- */
/* Hashes and the sealed record are the evidence, so they must be readable and selectable
   in full — never truncated by CSS. Monospace stack matches .log-pane, the one existing
   monospace surface on the site. */
.prov-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; word-break: break-all; color: var(--muted);
}
.prov-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
  background: var(--panel-2); border: 2px solid var(--border); padding: 10px; margin: 8px 0 0;
}
.prov-lookup { margin-bottom: 18px; }
.prov-lookup-row { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.prov-lookup-row input {
  flex: 1 1 280px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}

/* Verdict banner. Three states on purpose: a pre-ledger or not-yet-sealed record is
   NEUTRAL, never a red cross — it has done nothing wrong. */
.prov-verdict h2 { margin: 0 0 6px; font-size: 18px; }
.prov-verdict.prov-ok { border-left: 6px solid var(--green); }
.prov-verdict.prov-bad { border-left: 6px solid #ce4069; }
.prov-verdict.prov-neutral { border-left: 6px solid var(--muted); }

.prov-checks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.prov-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; align-items: start; }
.prov-checks .muted { grid-column: 2; font-size: 12px; }
.prov-mark { font-weight: 800; }
.prov-checks li.prov-pass .prov-mark { color: var(--green); }
.prov-checks li.prov-fail .prov-mark { color: #ce4069; }
.prov-checks li.prov-skip .prov-mark { color: var(--muted); }
.prov-step { font-weight: 600; }

.pill.prov-ok { color: var(--green); }
.pill.prov-bad { color: #ce4069; }

.prov-history { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.prov-history li { border-left: 2px solid var(--border); padding-left: 10px; }
.prov-tech summary { cursor: pointer; font-weight: 600; }

/* ---- The certificate's subject: avatar + identity ---- */
/* Reuses .detail (260px art + 1fr) so it inherits the wiki's art frame and the ≤820px
   collapse. Deliberately carries no stats — the verdict banner must stay the first claim
   a reader meets, so it has to remain above the fold. */
.prov-ident { margin-bottom: 18px; }
.prov-ident .page-head { margin-bottom: 0; }
/* bare .types is only styled under .mon, so the art column needs its own rule */
.prov-ident .types { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.prov-ident .art > .prov-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.prov-mon-line { font-size: 15px; margin: 0 0 6px; }
.prov-mon-line .mon-name { text-transform: capitalize; font-weight: 700; }
.prov-mon-line .sep { color: var(--muted); }
.prov-shiny { color: var(--accent); text-shadow: 0 0 6px rgba(255, 201, 60, 0.55); }

/* ---- IV / effective-stat rows ----
   NOT .stat-row: that one's bar is tuned to the 0..255 base-stat domain (stat_pct/1 divides
   by 255), so a perfect 31 IV would render as a 12% bar. Own markup, own scale. */
.prov-stats { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.prov-stat { display: grid; grid-template-columns: 58px 54px 1fr 46px; align-items: center;
  gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--bg-2); font-size: 12.5px; }
.prov-stat:last-child { border-bottom: none; }
.prov-stat-lbl { color: var(--muted); font-weight: 700; }
.prov-stat-iv { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.prov-stat-iv i { color: var(--muted); font-style: normal; font-weight: 400; font-size: 10px; }
.prov-stat-val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.prov-stat .bar { height: 8px; }
/* the nature's raised/lowered stat. A class, not an inline style: it is a repeated visual
   rule and this stylesheet is hand-maintained. */
.prov-stat.up .prov-stat-lbl, .prov-stat.up .prov-stat-val { color: #e07a5f; }
.prov-stat.down .prov-stat-lbl, .prov-stat.down .prov-stat-val { color: #6c9bd2; }
.prov-stat-total { display: flex; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; font-size: 13px; }

/* ---- Quality tiers ----
   Mapped onto this site's existing palette rather than copied from play_service. Colour only,
   never a filled pill: boxed, it out-shouted the species name next to it. */
:root {
  --q-unstable: #7a8aa6;
  --q-diluted: #8fa3c4;
  --q-refined: #4ade80;
  --q-potent: #4fc1ff;
  --q-pristine: #c084fc;
  --q-absolute: #ffc93c;
}
.q-unstable { color: var(--q-unstable); }
.q-diluted { color: var(--q-diluted); }
.q-refined { color: var(--q-refined); }
.q-potent { color: var(--q-potent); }
.q-pristine { color: var(--q-pristine); }
.q-absolute { color: var(--q-absolute); text-shadow: 0 0 6px rgba(255, 201, 60, 0.4); }

/* ---- "Where it is now" ----
   Neutral by design and never green: today's values are recorded, not proven. Same grey the
   neutral verdict uses, so the visual vocabulary stays consistent. */
.prov-today { border-left: 6px solid var(--muted); }
.prov-two { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 16px; font-size: 14.5px; }
.prov-two .h { color: var(--link); font-family: var(--pixel); font-size: 8px;
  text-transform: uppercase; align-self: end; }
.prov-two .k { color: var(--muted); }
.prov-two .num { font-variant-numeric: tabular-nums; }
.prov-evolved { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prov-moves { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.prov-moves span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border: 2px solid var(--border); background: var(--panel-2); font-size: 12px; }

/* GM-edited birth field, flagged on the row itself and not only in the banner. Same red as
   .prov-bad. */
.prov-changed { color: #ce4069; font-weight: 700; font-size: 12px; margin-left: 6px; }

.prov-ball { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: -0.35em; margin-right: 6px; }

/* ---- IV hexagon (CoreComponents.stat_hex) ---- */
/* Ported from play_service; see the ⚠ note on the component. Domain is a fixed 0..31. */
.stat-hex { display: block; width: 100%; max-width: 230px; margin: 0 auto 10px; }
.stat-hex-lbl { font-family: var(--pixel); font-size: 7px; }
.stat-hex-val { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }