/* ===========================================================================
   PFGlobal — styled after the original Canaan / Pet Forest portal.

   The original site was warm parchment, wooden signboards and creeping vines
   over a pale cream page, with the class line-up standing at a glowing portal
   across the header. Everything here follows that: the textures, the header
   plate and the vine sprigs ARE the original site's own furniture, resized by
   web/build_assets.py; the layout around them is rebuilt in CSS so it reflows
   on a phone, which the 2010 fixed-width original never did.

   Publisher marks (gPotato, XPEC, OMG, Hangame) are deliberately absent.
   ========================================================================= */

:root {
  /* parchment and ink */
  --paper:     #fbf0d5;
  --paper-2:   #f4e3ba;
  --paper-3:   #ecd4a0;
  --page:      #fdf6e6;

  --ink:       #4a3720;
  --ink-2:     #6d5636;
  --ink-3:     #927a52;

  /* wood, leaf, lantern */
  --wood:      #8a5c33;
  --wood-dk:   #5d3c1f;
  --wood-lt:   #b07c48;
  --leaf:      #6fa844;
  --leaf-dk:   #4d7c2c;
  --gold:      #f0a939;
  --gold-dk:   #d1861c;
  --gold-lt:   #ffc971;
  --sky:       #5aa9d6;
  --berry:     #c8503c;

  --ok-bg:     #e8f3d8;
  --ok-line:   #8cbb5e;
  --ok-ink:    #3f6b1e;
  --err-bg:    #fbe3de;
  --err-line:  #d9907f;
  --err-ink:   #963120;
  --info-bg:   #e2f0f8;
  --info-line: #8dc2dd;
  --info-ink:  #245b78;

  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 6px 20px rgba(93, 60, 31, .18);
  --shadow-lg: 0 14px 40px rgba(93, 60, 31, .26);

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
          "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --wrap: 1180px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  background-color: var(--page);
  background-image: url("../img/bg-page.jpg");
  background-repeat: repeat-x;
  background-position: top center;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; display: block; }
a { color: var(--gold-dk); text-decoration: none; }
a:hover { color: var(--berry); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; font-weight: 800; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

/* The site hides things with the `hidden` attribute (auth state, unconfigured
   buttons, wizard steps). Author rules that set `display` — .btn is inline-flex
   — beat the user-agent's [hidden] rule, so make the attribute win outright. */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); font-size: .875rem; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--wood-dk); padding: 10px 16px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ----------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #fffaf0 0%, var(--paper-2) 100%);
  border-bottom: 3px solid var(--wood);
  box-shadow: 0 3px 12px rgba(93, 60, 31, .16);
}
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 88px; }

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-logo { width: auto; height: 76px; max-width: 160px; object-fit: contain; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  color: var(--ink); padding: 9px 13px; border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 700; white-space: nowrap; position: relative;
}
.nav a:hover { color: var(--wood-dk); background: rgba(240, 169, 57, .18); text-decoration: none; }
.nav a.is-current { color: var(--leaf-dk); }
.nav a.is-current::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 3px; border-radius: 3px; background: var(--leaf);
}
/* Signing up is the one thing a first-time visitor is here to do, so Register
   is a lantern-coloured pill in a row of plain links rather than one more of
   them. It is still the same nav <a>, so the mobile menu keeps working. */
.nav a.nav-cta {
  background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 55%, var(--gold-dk) 100%);
  color: var(--wood-dk); border: 2px solid var(--wood-dk); border-radius: 999px;
  padding: 7px 16px; margin-left: 6px; font-weight: 900;
  box-shadow: 0 3px 0 var(--wood-dk);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
}
.nav a.nav-cta:hover { color: var(--wood-dk); filter: brightness(1.06); }
.nav a.nav-cta.is-current::after { display: none; }

.head-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lang {
  display: inline-flex; border: 2px solid var(--wood-lt); border-radius: 999px;
  overflow: hidden; background: #fffaf0;
}
.lang button {
  appearance: none; border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-size: .8rem; font-weight: 800; padding: 5px 12px;
  cursor: pointer; line-height: 1.4;
}
.lang button:hover { color: var(--wood-dk); background: rgba(240, 169, 57, .2); }
.lang button.is-active { background: var(--gold); color: var(--wood-dk); }

.nav-toggle {
  display: none; appearance: none; background: #fffaf0;
  border: 2px solid var(--wood-lt); border-radius: var(--radius-sm);
  width: 42px; height: 38px; cursor: pointer; color: var(--wood-dk);
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2.5px; border-radius: 2px;
  background: currentColor; position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }

/* ------------------------------------------------------------------- hero */
/* The header plate is an <img>, not a background, so it is never cropped: it
   simply scales with the viewport the way the original's fixed 1718px plate
   did at its one size. The sky behind it only shows on screens wider than the
   plate. No text is laid over the artwork - the copy lives on parchment below,
   which is also how the original was arranged. */
.hero-banner {
  background: #cfe9f5 url("../img/hero-sky.jpg") center bottom / cover no-repeat;
  border-bottom: 4px solid var(--wood);
  overflow: hidden;
}
.hero-plate {
  width: 100%; max-width: 1718px; height: auto; margin: 0 auto; display: block;
}
/* The plate is 2.11:1, so at full width it is 675px tall on a 1440 screen -
   the header and the artwork together then fill a 768px laptop on their own,
   and the sign-in panel below has nowhere to go. Capping the height against
   the VIEWPORT (not the width) is what keeps the fold usable on short screens.
   The crop is anchored to the TOP because that is where the characters' heads
   and the sky are; what gets trimmed is the foreground path at the bottom,
   which the parchment panel covers anyway. */
@media (min-width: 900px) {
  .hero-plate {
    max-height: 51vh; object-fit: cover; object-position: center top;
  }
}

.hero-bar {
  background: linear-gradient(180deg, var(--paper-2) 0%, rgba(253, 246, 230, 0) 100%);
  border-bottom: 2px solid rgba(138, 92, 51, .25);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 40px; align-items: center;
  padding: clamp(30px, 4.5vw, 54px) 0 clamp(34px, 5vw, 60px);
}

/* Sign in has to be reachable WITHOUT SCROLLING. The plate above is a
   2.11:1 image at full viewport width, so on a normal laptop it alone is
   taller than the fold and everything here - the pitch, Sign in, Register -
   started below it, off screen. So on a wide screen the parchment is pulled
   up ONTO the lower part of the plate, which is open ground in the artwork:
   the characters stand at the left and right edges and are not covered.

   This is the one place the site lays content over the art. It is done with
   a negative margin rather than absolute positioning so the panel still
   takes part in normal flow - it cannot overlap what follows, and it grows
   downward safely if the copy or the form ever gets taller.

   Below 900px the pull is removed entirely and the old stacked order comes
   back: a phone has no room to put a form over a picture and keep either
   legible. */
@media (min-width: 900px) {
  .hero-bar {
    background: none; border-bottom: 0;
    margin-top: calc(-1 * clamp(90px, 11vw, 190px));
    position: relative; z-index: 1;
  }
  .hero-grid {
    background: linear-gradient(180deg, rgba(253, 246, 230, .97), rgba(250, 238, 214, .97));
    border: 3px solid var(--wood);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(60, 36, 12, .28);
    padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px);
  }
}
.hero-copy { max-width: 560px; }
.hero-copy h1 { color: var(--wood-dk); text-shadow: 0 1px 0 #fffaf0; }
.hero-copy .lede { font-size: 1.06rem; color: var(--ink-2); max-width: 48ch; }
.kicker {
  display: inline-block; font-size: .76rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--wood-dk);
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  border: 2px solid #fff3d6; padding: 4px 14px; border-radius: 999px;
  margin-bottom: 14px; box-shadow: var(--shadow);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 20px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 800; font-size: .97rem;
  padding: 11px 22px; border-radius: 999px; cursor: pointer; text-align: center;
  border: 2px solid var(--wood-dk);
  transition: transform .12s ease, filter .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 55%, var(--gold-dk) 100%);
  color: var(--wood-dk); box-shadow: 0 4px 0 var(--wood-dk), var(--shadow);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
}
.btn-primary:hover { color: var(--wood-dk); }
.btn-primary:active { box-shadow: 0 2px 0 var(--wood-dk); }
.btn-ghost {
  background: linear-gradient(180deg, #fffaf0, var(--paper-2));
  color: var(--wood-dk); box-shadow: 0 4px 0 rgba(93, 60, 31, .55), var(--shadow);
}
.btn-ghost:hover { color: var(--wood-dk); }
.btn-leaf {
  background: linear-gradient(180deg, #8fca63 0%, var(--leaf) 55%, var(--leaf-dk) 100%);
  color: #fff; box-shadow: 0 4px 0 var(--leaf-dk), var(--shadow);
  text-shadow: 0 1px 2px rgba(40, 70, 20, .5);
}
.btn-leaf:hover { color: #fff; }
.btn-discord { background: linear-gradient(180deg, #7b86f8, #5865f2); color: #fff;
               border-color: #3b45b5; box-shadow: 0 4px 0 #3b45b5, var(--shadow); }
.btn-discord:hover { color: #fff; }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 7px 15px; font-size: .86rem; border-width: 2px; }
/* The mirror of .btn-sm, for the one place a page has a single action and
   nothing to balance it against: the installer button on download.html. */
.btn-lg { padding: 15px 30px; font-size: 1.1rem; }

/* ----------------------------------------------------------- status badge */
.status {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 250, 240, .94); border: 2px solid var(--wood-lt);
  border-radius: 999px; padding: 6px 15px; font-size: .875rem;
  font-weight: 800; color: var(--ink); margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.status.is-online  .dot { background: var(--leaf); box-shadow: 0 0 0 4px rgba(111, 168, 68, .25); }
.status.is-offline .dot { background: var(--berry); }

/* ------------------------------------------------------- parchment panels */
.card, .panel {
  background-color: var(--paper);
  background-image: url("../img/parchment.jpg");
  background-size: 256px;
  border: 2px solid var(--wood-lt);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 253, 240, .55);
}
.card-lg { padding: 30px; }
.panel { box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255, 253, 240, .55); }
.card h2, .card h3, .panel h2 { margin-top: 0; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
  border-bottom: 2px dashed rgba(138, 92, 51, .35); padding-bottom: 10px;
}
.card-head h2, .card-head h3 { margin-bottom: 0; }

/* vines, as the original dressed its side panels */
.vined { position: relative; }
.vined::before, .vined::after {
  content: ""; position: absolute; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
}
.vined::before {
  top: -16px; left: -12px; width: 128px; height: 52px;
  background-image: url("../img/vine-top.png");
}
.vined::after {
  bottom: -14px; left: -10px; width: 140px; height: 50px;
  background-image: url("../img/vine-bottom.png"); background-position: bottom left;
}

/* ---------------------------------------------------------------- section */
.section { padding: clamp(44px, 6vw, 76px) 0; position: relative; }
.section-alt {
  background: linear-gradient(180deg, rgba(244, 227, 186, .75), rgba(244, 227, 186, .35));
  border-block: 2px solid rgba(138, 92, 51, .3);
}
/* A scene plate behind a section, washed out enough to read text over. */
.section-scene { background-size: cover; background-position: center; position: relative; }
.section-scene > .wrap { position: relative; z-index: 2; }
.section-scene::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(253,246,230,.9), rgba(253,246,230,.82));
}
.section-head { max-width: 62ch; margin-bottom: 32px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: 1.03rem; margin-bottom: 0; }

/* the wooden signboard heading */
.signboard {
  display: inline-block; color: #fff5dd; font-weight: 900;
  padding: 11px 34px 13px; margin: 0 0 14px;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  text-shadow: 0 2px 0 rgba(60, 34, 14, .8);
  border-image: url("../img/wood-bar.png") 12 62 14 62 fill stretch;
  border-width: 12px 62px 14px; border-style: solid;
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ------------------------------------------------------------ class cards */
.class-card {
  background: var(--paper); border: 2px solid var(--wood-lt);
  border-radius: var(--radius); overflow: hidden; text-align: center;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.class-card:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold);
}
.class-art { position: relative; aspect-ratio: 420 / 520; overflow: hidden; }
.class-art img { width: 100%; height: 100%; object-fit: cover; }
.class-art::after {                       /* let the name plate sit on the art */
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, rgba(251,240,213,0), var(--paper) 92%);
}
.class-body { padding: 0 16px 18px; margin-top: -14px; position: relative; z-index: 2; }
.class-body h3 { margin-bottom: 5px; font-size: 1.15rem; color: var(--wood-dk); }
.class-body p { color: var(--ink-2); font-size: .88rem; margin-bottom: 0; }

/* ---------------------------------------------------------------- feature */
.feature { display: flex; gap: 15px; align-items: flex-start; }
.feature-art {
  flex: 0 0 auto; width: 92px; height: 92px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.9), rgba(244,227,186,0) 70%);
}
.feature-art img { max-height: 92px; width: auto; filter: drop-shadow(0 4px 6px rgba(93,60,31,.3)); }
.feature h3 { font-size: 1.04rem; margin-bottom: 4px; color: var(--wood-dk); }
.feature p { color: var(--ink-2); font-size: .92rem; margin-bottom: 0; }

/* ------------------------------------------------------------ screenshots */
.shots { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shot {
  border: 3px solid var(--wood); border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow); background: var(--wood-dk);
  transition: transform .18s ease;
}
.shot:hover { transform: scale(1.03); }
.shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------------- news */
.news-item {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 2px dashed rgba(138, 92, 51, .3);
  align-items: baseline; flex-wrap: wrap;
}
.news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.news-date { color: var(--ink-3); font-size: .82rem; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.news-body { flex: 1 1 260px; }
.news-body h3 { font-size: 1rem; margin-bottom: 3px; }
.news-body p { color: var(--ink-2); font-size: .9rem; margin-bottom: 0; }
.tag {
  display: inline-block; font-size: .7rem; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  background: var(--gold); color: var(--wood-dk); flex: 0 0 auto;
  border: 1px solid var(--gold-dk);
}
.tag-event  { background: #d9a3e8; border-color: #9b62ad; color: #4a1d59; }
.tag-notice { background: #9ed5ee; border-color: #4e93b5; color: #14435c; }

/* ------------------------------------------------------------------ forms */
.field { margin-bottom: 15px; }
.field > label {
  display: block; font-size: .86rem; font-weight: 800; color: var(--wood-dk);
  margin-bottom: 6px;
}
.field .hint { display: block; color: var(--ink-3); font-size: .8rem; margin-top: 6px; }
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], select, textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  background: #fffdf5; border: 2px solid var(--wood-lt);
  border-radius: var(--radius-sm); padding: 10px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: #b3a184; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-dk);
  box-shadow: 0 0 0 3px rgba(240, 169, 57, .3);
}
input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%238a5c33' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
  background-size: 11px; padding-right: 34px;
}
.otp-input {
  font-size: 1.7rem; letter-spacing: .42em; text-align: center;
  font-variant-numeric: tabular-nums; padding: 13px; font-weight: 800;
  color: var(--wood-dk);
}
.form-foot {
  margin-top: 16px; padding-top: 14px; border-top: 2px dashed rgba(138, 92, 51, .35);
  font-size: .88rem; color: var(--ink-2); display: flex; flex-wrap: wrap;
  gap: 8px; justify-content: space-between;
}

/* --------------------------------------------------------------- messages */
.msg {
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: .9rem;
  margin-bottom: 15px; border: 2px solid transparent; font-weight: 600;
}
.msg.is-error { background: var(--err-bg);  border-color: var(--err-line);  color: var(--err-ink); }
.msg.is-ok    { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok-ink); }
.msg.is-info  { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.notice {
  background: rgba(240, 169, 57, .16); border: 2px dashed var(--gold-dk);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: .87rem;
  color: var(--ink);
}

/* ------------------------------------------------------------ login panel */
.login-panel h2 { font-size: 1.3rem; color: var(--wood-dk); }
.login-panel .login-links {
  align-items: center; flex-direction: column; gap: 10px; justify-content: center;
  text-align: center;
}
/* Registering is a first-class action, not a footnote: on index.html and
   login.html alike it is a full-width button directly under Sign in, sharing
   its width so the pair reads as two choices rather than one button and some
   small print. Only the gap is new - everything else is .btn .btn-leaf. */
.reg-btn { margin-top: 10px; }
.signed-in-box { text-align: center; }
.signed-in-box .who {
  font-size: 1.24rem; font-weight: 900; color: var(--leaf-dk); margin: 6px 0 16px;
  word-break: break-all;
}

/* ------------------------------------------------------------------ table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 2px dashed rgba(138, 92, 51, .28); }
th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 900; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.chip {
  display: inline-block; font-size: .74rem; font-weight: 800; padding: 2px 10px;
  border-radius: 999px; background: var(--paper-3); color: var(--ink-2);
  border: 1px solid rgba(138, 92, 51, .4);
}
.chip-ok     { background: var(--ok-bg);  color: var(--ok-ink);  border-color: var(--ok-line); }
.chip-wait   { background: #fdeecb;       color: #8a5c10;        border-color: var(--gold-dk); }
.chip-danger { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.chip-vip    { background: linear-gradient(180deg, var(--gold-lt), var(--gold));
               color: var(--wood-dk); border-color: var(--gold-dk); }

/* --------------------------------------------------------------- packages */
.pkg-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pkg {
  position: relative; text-align: center; cursor: pointer;
  background: #fffdf5; border: 3px solid var(--wood-lt);
  border-radius: var(--radius); padding: 20px 16px 16px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pkg:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pkg.is-sel {
  border-color: var(--gold-dk); background: #fff6e0;
  box-shadow: 0 0 0 3px rgba(240, 169, 57, .35), var(--shadow);
}
.pkg input { position: absolute; opacity: 0; pointer-events: none; }
.pkg .stones { font-size: 1.5rem; font-weight: 900; color: var(--gold-dk); }
.pkg .stones small { font-size: .7rem; font-weight: 800; color: var(--ink-3); display: block; }
.pkg .bonus { font-size: .8rem; color: var(--leaf-dk); font-weight: 800; margin-top: 3px; }
.pkg .price {
  margin-top: 11px; padding-top: 11px; border-top: 2px dashed rgba(138, 92, 51, .3);
  font-size: 1.06rem; font-weight: 900; color: var(--wood-dk);
}
/* Below a method's floor: visibly unavailable, still readable so the player
   can see WHY the cheap package went away rather than thinking it vanished. */
.pkg.is-off {
  opacity: .45; cursor: not-allowed; filter: saturate(.35);
  border-style: dashed;
}
.pkg.is-off:hover { transform: none; box-shadow: none; }
.pkg-note, .final-note { margin-top: 10px; font-size: .82rem; }
.final-note { margin-top: 12px; text-align: center; }
.pkg .ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold-lt), var(--gold)); color: var(--wood-dk);
  font-size: .66rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 999px; border: 2px solid var(--wood-dk);
  white-space: nowrap;
}

.method-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.method {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: #fffdf5; border: 3px solid var(--wood-lt);
  border-radius: var(--radius-sm); padding: 12px 15px; font-weight: 800;
  color: var(--ink); transition: border-color .15s ease, background .15s ease;
}
.method:hover { border-color: var(--gold); }
.method.is-sel { border-color: var(--gold-dk); background: #fff6e0; }
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method .radio {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  border: 3px solid var(--wood-lt); position: relative; background: #fff;
}
.method.is-sel .radio { border-color: var(--gold-dk); }
.method.is-sel .radio::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--gold);
}

.pay-box { background-color: #fffaef; }
.ref-code {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.16rem; font-weight: 800; color: var(--wood-dk);
  background: #fff3d6; border: 2px dashed var(--gold-dk);
  padding: 8px 15px; border-radius: var(--radius-sm); letter-spacing: .04em;
}
.pay-account {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: #fffdf5; border: 2px solid var(--wood-lt); border-radius: var(--radius-sm);
  padding: 10px 13px; word-break: break-all; font-size: .95rem; color: var(--wood-dk);
}

/* ------------------------------------------------------------------ steps */
.step { margin-bottom: 26px; }
.step > h3 {
  font-size: .84rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold-dk); margin-bottom: 12px;
}

/* An ordered list of things that happen in order - download.html is the only
   page that has one. Named -list to keep it apart from .step above, which is a
   wizard SECTION on topup.html. The reset above strips <ul> of its markers but
   leaves <ol> with the browser's, and a bare browser <ol> is the one thing on
   this site that would look unstyled, so the numbers are drawn here as lantern
   discs in the same palette as the buttons. */
.step-list { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.step-list li {
  counter-increment: step; position: relative;
  padding-left: 48px; margin-bottom: 16px; color: var(--ink-2);
}
.step-list li:last-child { margin-bottom: 0; }
.step-list li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  border: 2px solid var(--wood-dk); color: var(--wood-dk);
  font-weight: 900; font-size: .9rem; line-height: 1;
}

/* ------------------------------------------------------------------- page */
.page { padding: clamp(30px, 5vw, 56px) 0 clamp(48px, 7vw, 80px); }
.page-narrow { max-width: 520px; margin: 0 auto; }
.page-mid { max-width: 880px; margin: 0 auto; }
.page-head { text-align: center; margin-bottom: 26px; }
.page-head p { color: var(--ink-2); margin-bottom: 0; }

/* ---------------------------------------------------------------- discord */
.discord-cta {
  background: linear-gradient(135deg, rgba(88, 101, 242, .14), rgba(255, 250, 240, .9));
  border: 3px solid #5865f2; border-radius: var(--radius);
  padding: clamp(24px, 4vw, 38px); text-align: center; box-shadow: var(--shadow);
}
.discord-cta svg { width: 46px; height: 46px; margin: 0 auto 12px; }
.discord-cta p { color: var(--ink-2); max-width: 48ch; margin-inline: auto; }

/* ----------------------------------------------------------------- footer */
.site-foot {
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3));
  border-top: 4px solid var(--wood);
  padding: 42px 0 24px; margin-top: auto; font-size: .9rem; color: var(--ink-2);
}
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; margin-bottom: 28px; }
.foot-grid h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--wood-dk); margin-bottom: 11px;
}
.foot-grid li { margin-bottom: 6px; }
.foot-grid a { color: var(--ink-2); }
.foot-grid a:hover { color: var(--berry); }
.foot-note {
  border-top: 2px dashed rgba(138, 92, 51, .4); padding-top: 18px; color: var(--ink-3);
  font-size: .82rem; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { max-width: none; }
  .login-panel { max-width: 420px; }
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .site-head .wrap { min-height: 72px; }
  .brand-logo { height: 56px; max-width: 118px; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 2px; background: var(--paper);
    border-bottom: 3px solid var(--wood); padding: 10px 16px 16px;
    display: none; box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 11px 12px; }
  .nav a.is-current::after { display: none; }
  .nav-toggle { display: inline-flex; order: 3; }
  .head-tools { margin-left: auto; }
  .site-head .wrap { position: relative; gap: 10px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .grid-5, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .card, .panel { padding: 20px; }
  .vined::before, .vined::after { display: none; }
  .signboard { border-width: 10px 40px 12px; padding: 9px 14px 11px; }
}

@media (max-width: 420px) {
  /* The class cards are portraits and still read at half a phone's width, so
     they stay paired; the feature rows are text and go full width. */
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: 1fr; }
  .pkg-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .btn:hover, .class-card:hover, .pkg:hover, .shot:hover { transform: none; }
}