/* ============================================================
   Allure of Kingdoms: Ancient Past — royal parchment theme v2
   Cinzel for royalty, MedievalSharp for game chrome, IM Fell for prose.
   Light theme only. Mobile-first. Emoji are the art style.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Alegreya:ital,wght@0,400;0,500;0,700;1,400&family=IM+Fell+English:ital@1&display=swap');

:root {
  /* Palette */
  --parchment:      #f1e6cb;
  --parchment-deep: #e5d5ac;
  --paper:          #faf4e1;
  --paper-bright:   #fffbee;
  --ink:            #2c1f12;  /* darker for contrast/readability */
  --ink-soft:       #6d5940;
  --royal:          #5b3a8c;
  --royal-deep:     #3f2566;
  --royal-night:    #2c1a49;
  --gold:           #c9a227;
  --gold-bright:    #e9c94f;
  --gold-deep:      #a5831c;
  --ok:             #4a7c3a;
  --ok-bg:          #e6efdc;
  --err:            #a0522d;
  --err-bg:         #f4e1d6;
  --line:           #d3bf90;
  --line-soft:      rgba(211, 191, 144, 0.55);

  --font-royal:   'Cinzel', Georgia, serif;             /* titles, headings, buttons */
  --font-display: 'Cinzel', Georgia, serif;             /* nav, badges (alias) */
  --font-body:    'Alegreya', Georgia, serif;           /* readable body text */
  --font-quote:   'IM Fell English', Georgia, serif;    /* flavor quotes only */

  --shadow-card: 0 2px 5px rgba(56, 39, 26, 0.14), 0 8px 24px rgba(56, 39, 26, 0.07);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 18% 8%,  rgba(122, 100, 72, 0.07), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(122, 100, 72, 0.09), transparent 50%),
    radial-gradient(ellipse at 55% 35%, rgba(255, 255, 255, 0.30), transparent 60%),
    linear-gradient(180deg, rgba(56, 39, 26, 0.05), transparent 140px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.65;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: var(--royal); }
a:hover { color: var(--royal-deep); }

h1, h2, h3 {
  font-family: var(--font-royal);
  font-weight: 700;
  color: var(--royal-deep);
  line-height: 1.22;
  margin: 0.4em 0 0.5em;
}
h1 { font-size: 1.7rem; letter-spacing: 0.02em; }
h2 { font-size: 1.22rem; }

/* Page titles get centered flourishes */
main > h1 {
  text-align: center;
  margin: 0.5em 0 0.8em;
}
main > h1::before { content: '❦  '; color: var(--gold-deep); font-size: 0.75em; }
main > h1::after  { content: '  ❦'; color: var(--gold-deep); font-size: 0.75em; }

.muted { color: var(--ink-soft); }  /* no italic: small italic text reads badly */

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.55rem 1rem;
  background:
    radial-gradient(ellipse at 50% -60%, rgba(233, 201, 79, 0.28), transparent 60%),
    linear-gradient(180deg, var(--royal) 0%, var(--royal-night) 100%);
  border-bottom: 3px double var(--gold);
  box-shadow: 0 3px 10px rgba(44, 26, 73, 0.4);
}

.logo {
  font-family: var(--font-royal);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #f4df9a 20%, var(--gold) 55%, #f4df9a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  white-space: nowrap;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
.logo:hover { filter: drop-shadow(0 1px 4px rgba(233, 201, 79, 0.7)); }

.nav {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #e6d8bb;
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 7px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav a:hover {
  background: rgba(233, 201, 79, 0.18);
  color: #fff;
}
.nav a.active {
  background: rgba(233, 201, 79, 0.22);
  border-color: rgba(233, 201, 79, 0.55);
  color: var(--gold-bright);
}

/* ---------- Stats bar ---------- */

.stats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  padding: 0.5rem 0.9rem;
  background: linear-gradient(180deg, var(--parchment-deep), #ddc99b);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -2px 4px rgba(56, 39, 26, 0.07);
  font-size: 0.95rem;
}

.stat {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* numbers don't jiggle when they change */
  background: var(--paper-bright);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.12rem 0.7rem;
  box-shadow: 0 1px 2px rgba(56, 39, 26, 0.1);
}
.stat b { font-weight: 700; }
.stat-ico { font-size: 1.1rem; line-height: 1; }
.stat small { color: var(--ink-soft); font-size: 0.78rem; }

.stat-rank {
  font-family: var(--font-royal);
  font-weight: 600;
  color: var(--royal-deep);
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, var(--paper-bright), #f7ecca);
}

/* Little progress bars (energy, xp) */
.bar {
  display: inline-block;
  width: 74px;
  height: 10px;
  background: rgba(56, 39, 26, 0.18);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
  border: 1px solid rgba(56, 39, 26, 0.22);
  box-shadow: inset 0 1px 2px rgba(56, 39, 26, 0.25);
}
.bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.bar-xp .bar-fill {
  background: linear-gradient(90deg, var(--royal), #9a72d8);
}

/* ---------- Main layout ---------- */

.content {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 1.1rem 0.9rem 2.5rem;
}

/* ---------- Cards ---------- */

.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 251, 238, 0.6), transparent 30%),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card), inset 0 0 46px rgba(211, 191, 144, 0.22);
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem;
}
/* gold accent rule across the top of every card */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-bright) 50%, var(--gold) 75%, transparent);
  opacity: 0.75;
}
.card > h2 {
  margin-top: 0.1em;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.35em;
}
.card h2 small { font-family: var(--font-body); font-weight: 400; font-size: 0.72em; }

/* ---------- Item rows ---------- */

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.3rem;
  border-top: 1px solid var(--line-soft);
  border-radius: 6px;
  transition: background 0.15s;
}
.row:hover { background: rgba(255, 251, 238, 0.75); }
.row:first-of-type { border-top: 0; }
.row-info { min-width: 0; }
.row-info > b { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; }
.row-info small { font-size: 0.92rem; line-height: 1.5; display: inline-block; margin-top: 0.1rem; }
.row form { margin: 0; flex-shrink: 0; display: flex; gap: 0.4rem; }

.row-locked { opacity: 0.55; filter: saturate(0.35); }
.row-locked .btn { pointer-events: none; }
.row-locked:hover { background: transparent; }

/* ---------- Buttons: chunky & tactile ---------- */

.btn {
  position: relative;
  font-family: var(--font-royal);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 0.92rem;
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper-bright), #eadfbe);
  border: 2px solid #c4ae7c;
  border-bottom-width: 4px;
  border-radius: 10px;
  padding: 0.48rem 1.2rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 3px rgba(56, 39, 26, 0.18);
  transition: transform 0.06s, border-bottom-width 0.06s, filter 0.15s, box-shadow 0.15s;
}
.btn:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 7px rgba(56, 39, 26, 0.25); }
.btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.btn-primary {
  color: #f7edd3;
  background: linear-gradient(180deg, #8257c0 0%, var(--royal) 55%, var(--royal-deep) 100%);
  border-color: var(--royal-night);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 4px rgba(44, 26, 73, 0.4);
}
.btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 10px rgba(91, 58, 140, 0.5);
}

.btn-gold {
  color: #45350a;
  background: linear-gradient(180deg, #f2d96e 0%, var(--gold) 60%, var(--gold-deep) 100%);
  border-color: #8a6d14;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 4px rgba(138, 109, 20, 0.4);
}
.btn-gold:hover {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 12px rgba(201, 162, 39, 0.55);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  border-bottom-width: 4px;
  filter: saturate(0.5);
}

/* Big call-to-action variant (auth, rank-up) */
.btn-big {
  font-size: 1.05rem;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  width: 100%;
  text-align: center;
}

/* ---------- Flash messages ---------- */

.flash {
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 0.6rem 0.95rem;
  margin: 0 0 1rem;
  box-shadow: 0 1px 3px rgba(56, 39, 26, 0.12);
}
.flash[hidden] { display: none; }

/* the live action-feedback flash floats as a toast so it's visible no matter
   how far down the page the clicked button was */
#flash {
  position: fixed;
  top: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(92vw, 480px);
  width: max-content;
  margin: 0;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(44, 26, 73, 0.35);
  animation: toast-in 0.25s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.flash-ok  { background: var(--ok-bg);  border-color: var(--ok);  color: #33552a; }
.flash-err { background: var(--err-bg); border-color: var(--err); color: #7c3c1d; }

/* ---------- Flavor box: a quote from a scroll ---------- */

.flavor-box { margin: 1.1rem 0; }
.flavor-box:empty { display: none; }

.flavor-line {
  font-family: var(--font-quote); /* the old-manuscript font lives here now */
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  border-left: 4px solid var(--gold);
  background: rgba(250, 244, 225, 0.8);
  border-radius: 0 9px 9px 0;
  padding: 0.45rem 0.9rem;
  margin: 0.35rem 0;
  box-shadow: 0 1px 2px rgba(56, 39, 26, 0.08);
}
.flavor-line::before { content: '“'; color: var(--gold-deep); }
.flavor-line::after  { content: '”'; color: var(--gold-deep); }

/* ---------- Tables (leaderboard) ---------- */

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: 0 0 1.1rem;
}
.table th {
  font-family: var(--font-royal);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  color: #f0e4c3;
  background: linear-gradient(180deg, var(--royal), var(--royal-deep));
  padding: 0.55rem 0.85rem;
  border-bottom: 2px solid var(--gold);
}
.table td {
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--line-soft);
}
.table tr:nth-child(even) td { background: rgba(229, 213, 172, 0.35); }
.table tr:hover td { background: rgba(233, 201, 79, 0.14); }

/* ---------- Badges & rank requirements ---------- */

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--royal-deep);
  background: linear-gradient(180deg, var(--paper-bright), #f7ecca);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.08rem 0.65rem;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(56, 39, 26, 0.12);
}

.progress-req {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0.6rem 0 1rem;
}
.req {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.16rem 0.75rem;
  font-size: 0.92rem;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(56, 39, 26, 0.08);
}
.req-met   { border-color: var(--ok);  background: var(--ok-bg); }
.req-unmet { border-color: var(--err); background: var(--err-bg); opacity: 0.9; }

/* ---------- Rank-up banner: the dopamine moment ---------- */

.rankup-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  font-family: var(--font-royal);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--royal-deep);
  background:
    radial-gradient(ellipse at 50% -30%, rgba(233, 201, 79, 0.4), transparent 60%),
    linear-gradient(180deg, #fdf6df, #f3e2ac);
  border: 3px double var(--gold);
  border-radius: 14px;
  padding: 1.4rem 1rem;
  margin: 0 0 1.2rem;
  animation: rankup-glow 2.2s ease-in-out infinite;
}
.rankup-banner::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: rankup-shimmer 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rankup-shimmer {
  0%   { left: -60%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}
@keyframes rankup-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(201, 162, 39, 0.35); }
  50%      { box-shadow: 0 0 32px rgba(201, 162, 39, 0.6); }
}

/* ============================================================
   Landing page
   ============================================================ */

/* Full-width royal banner behind the title */
.hero-banner {
  text-align: center;
  padding: 3rem 1rem 2.4rem;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(233, 201, 79, 0.25), transparent 55%),
    radial-gradient(ellipse at 50% -40%, rgba(154, 114, 216, 0.35), transparent 60%),
    linear-gradient(180deg, var(--royal-night) 0%, var(--royal-deep) 60%, var(--royal) 100%);
  border-bottom: 4px double var(--gold);
  box-shadow: 0 4px 18px rgba(44, 26, 73, 0.45);
}

.hero-crest {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 2px 6px rgba(233, 201, 79, 0.55));
  animation: crest-bob 3.5s ease-in-out infinite;
}
@keyframes crest-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.hero-title {
  font-family: var(--font-royal);
  font-weight: 800;
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  letter-spacing: 0.05em;
  margin: 0;
  background: linear-gradient(180deg, #f8e7ae 15%, var(--gold-bright) 45%, var(--gold) 70%, #f4dd93 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.hero-sub {
  font-family: var(--font-royal);
  font-weight: 600;
  font-size: clamp(1rem, 3vw, 1.35rem);
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* balance the letter-spacing */
  text-transform: uppercase;
  color: #cbb4ec;
  margin: 0.5rem 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-banner .tagline {
  color: #b9a7d6;
  font-family: var(--font-quote);
  font-size: 1.15rem;
  font-style: italic;
  min-height: 1.8em;
  margin: 1rem auto 0;
  max-width: 36em;
  transition: opacity 0.45s ease;
}
.tagline.is-fading { opacity: 0; }

/* Legacy hero block (credits page etc.) */
.hero { text-align: center; padding: 2.2rem 0.5rem 1rem; }
.hero .logo, .hero h1 { font-size: 2.4rem; display: inline-block; }
.hero .tagline {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.15rem;
  margin: 0.4rem auto 0;
  max-width: 34em;
}

/* Pitch + auth, side by side on desktop */
.landing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  align-items: start;
  margin-top: 1.8rem;
}

.pitch { padding-top: 0.4rem; }
.pitch-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.65rem 0.2rem;
}
.pitch-item + .pitch-item { border-top: 1px dashed var(--line-soft); }
.pitch-ico { font-size: 1.7rem; line-height: 1.25; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(56,39,26,0.25)); }
.pitch-item b { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; color: var(--royal-deep); }
.pitch-item p { margin: 0.1rem 0 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Auth panel with tabs ---------- */

.auth-card {
  max-width: 430px;
  width: 100%;
  margin: 0 auto;
  padding-top: 1.1rem;
}

.auth-tabs input[type='radio'] { display: none; }

.tab-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.tab-labels label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
  color: var(--ink-soft);
  background: linear-gradient(180deg, #efe3c2, #e2d1a5);
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.tab-labels label:hover { filter: brightness(1.04); color: var(--ink); }

#tab-login:checked    ~ .tab-labels label[for='tab-login'],
#tab-register:checked ~ .tab-labels label[for='tab-register'] {
  color: #f7edd3;
  background: linear-gradient(180deg, #8257c0, var(--royal-deep));
  border-color: var(--royal-night);
  border-bottom-color: var(--gold);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 8px rgba(63, 37, 102, 0.35);
}

.auth-tabs .auth-form { display: none; margin: 0; }
#tab-login:checked    ~ #pane-login    { display: block; }
#tab-register:checked ~ #pane-register { display: block; }

.auth-form label {
  display: block;
  font-family: var(--font-royal);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--royal-deep);
  margin: 0.7rem 0 0.25rem;
}
.auth-form input[type='text'],
.auth-form input[type='email'],
.auth-form input[type='password'] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.55rem 0.8rem;
  box-shadow: inset 0 2px 4px rgba(56, 39, 26, 0.12);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--royal);
  box-shadow: inset 0 2px 4px rgba(56, 39, 26, 0.1), 0 0 0 3px rgba(91, 58, 140, 0.22);
}
.auth-form .btn { margin-top: 1.1rem; }

select {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.45rem 0.6rem;
  max-width: 200px;
}
select:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgba(91, 58, 140, 0.22); }
.auth-form .auth-hint {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-style: italic;
  margin: 0.6rem 0 0;
}

/* ---------- Footer ---------- */

.footer {
  text-align: center;
  padding: 1.1rem 0.9rem 1.5rem;
  color: var(--ink-soft);
  border-top: 3px double var(--line);
  background: linear-gradient(180deg, var(--parchment-deep), #d9c493);
}
.footer a { color: var(--royal); }
.footer::before {
  content: '❦';
  display: block;
  color: var(--gold-deep);
  margin-bottom: 0.3rem;
}

/* ---------- Small screens ---------- */

@media (max-width: 720px) {
  .landing-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .pitch { order: 2; }        /* auth first on phones */
  .auth-card { order: 1; }
}

@media (max-width: 640px) {
  h1 { font-size: 1.45rem; }

  .topbar { padding: 0.45rem 0.6rem; }
  .nav { flex: 1 1 100%; }

  .stats-bar {
    gap: 0.3rem 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
  }
  .stat { padding: 0.1rem 0.55rem; }
  .bar { width: 52px; }

  .content { padding: 0.9rem 0.7rem 2rem; }

  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .row .btn { width: 100%; }

  .hero-banner { padding: 2.2rem 0.8rem 1.8rem; }
}