/* ============================================================
   NewWolf v3 — MORNING RANCH 晨光牧场（用户 2026-11-06 选定）
   基底：浅天蓝 #eef6fd → #d9ebfa、白面板（蓝白，非米白）；
   主强调：天蓝 #4aa3e8 / 深天蓝 #2f7fc4（链接、筹码、次按钮）；
   次强调：麦金 #e3a93c / #f0bc52、深金 #b97f1e（主 CTA、字标点缀，
   金色只用于填充+深色文字、边框与大字，不用于小字正文）；
   文字：深岩蓝 #22304a。无深色页底、无粉绿、无米白面板。
   结构与质感基准：NestEgg 官网（粘性顶栏 / 衬线大字 / 圆角硬边面板 /
   柔和多层阴影 / 胶囊导航与语言切换），配色为本项目晨光向原创。
   ============================================================ */
:root {
  --bg-0: #d9ebfa;
  --bg-1: #eef6fd;
  --bg-2: #e2f0fc;
  --panel: #ffffff;
  --panel-hi: #eef6fd;
  --card: #ffffff;
  --card-2: #eef6fd;
  --field: #ffffff;
  --ink: #22304a;
  --ink-soft: #3d5173;
  --muted: #7186a3;
  --sky: #4aa3e8;
  --sky-deep: #2f7fc4;
  --sky-soft: #dceefb;
  --gold: #e3a93c;
  --gold-2: #f0bc52;
  --gold-deep: #b97f1e;
  --line: #33506e;
  --edge: #a9cdf0;
  --edge-soft: #cfe5f8;
  --good: #178a46;
  --bad: #d84a2f;
  --bad-bg: #fdeeea;
  --rust: #c2501e;
  --disp: Georgia, "Times New Roman", "Songti SC", "STSong", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --sh: rgba(51, 80, 110, .28);
  --panel-shadow: 6px 6px 0 rgba(51, 80, 110, .13), inset 0 2px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 2px rgba(240, 188, 82, .16), 0 26px 44px -22px rgba(51, 80, 110, .35);
  --card-shadow: 3px 3px 0 rgba(51, 80, 110, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font: 400 15px/1.65 var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 50% -6%, rgba(240, 188, 82, .20), rgba(240, 188, 82, 0) 60%),
    radial-gradient(900px 480px at 88% 0%, rgba(74, 163, 232, .13), rgba(74, 163, 232, 0) 55%),
    linear-gradient(180deg, var(--bg-1), var(--sky-soft) 720px, var(--bg-0));
  background-color: var(--bg-1);
  min-height: 100vh;
}

img, svg, video { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--sky-deep); }
::selection { background: rgba(227, 169, 60, .35); }

.wrap { width: min(1060px, calc(100% - 28px)); margin: 0 auto; }
.mono { word-break: break-all; font-family: var(--mono); }

/* ---------------- 顶栏（粘性） ---------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(238, 246, 253, .98));
  border-bottom: 3px solid var(--gold-deep);
  box-shadow: 0 3px 0 rgba(51, 80, 110, .16);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand-mark {
  width: 38px; height: 31px;
  flex: none;
  filter: drop-shadow(2px 2px 0 rgba(51, 80, 110, .6));
}
.brand-mark svg { width: 100%; height: 100%; image-rendering: pixelated; }
.brand-name {
  font: 700 23px/1 var(--disp);
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name b { color: var(--gold-deep); font-weight: 700; }
.brand-sub {
  display: block;
  font: 700 9.5px var(--mono);
  letter-spacing: .14em;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
}
nav.main {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-content: center;
  margin-left: 6px;
}
nav.main a {
  font: 700 13px var(--mono);
  letter-spacing: .03em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 20px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
nav.main a:hover { background: rgba(74, 163, 232, .14); color: var(--sky-deep); }
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.header-count { display: flex; align-items: center; gap: 8px; }
.count-label {
  font: 700 11px var(--mono);
  letter-spacing: .05em;
  color: var(--gold-deep);
  border: 2px solid var(--gold-deep);
  border-radius: 20px;
  padding: 4px 10px;
  background: rgba(227, 169, 60, .13);
  white-space: nowrap;
}
.count-digits { display: flex; gap: 5px; }
.digit {
  min-width: 37px;
  background: var(--card);
  border: 2px solid var(--edge);
  border-radius: 9px;
  box-shadow: 2px 2px 0 rgba(51, 80, 110, .5);
  padding: 2px 4px;
  text-align: center;
}
.digit b { display: block; font: 700 15px/1.2 var(--mono); color: var(--ink); }
.digit span { font-size: 9.5px; color: var(--muted); }
.lang-toggle {
  display: flex;
  border: 2.5px solid var(--gold-deep);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(51, 80, 110, .55);
  flex: none;
  background: var(--card);
}
.lang-toggle button {
  font: 700 12px var(--mono);
  padding: 6px 13px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.lang-toggle button.on { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #3a2a05; }
.btn-game {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 13.5px var(--sans);
  color: #3a2a05;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border: 3px solid var(--line);
  border-radius: 11px;
  padding: 8px 16px;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(51, 80, 110, .3), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .15);
  white-space: nowrap;
  transition: filter .15s ease, transform .05s ease, box-shadow .05s ease;
}
.btn-game:hover { filter: brightness(1.07); }
.btn-game:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(51, 80, 110, .6); }
.demo-tag {
  font: 700 10px var(--mono);
  background: rgba(58, 42, 5, .14);
  border: 1.5px solid rgba(58, 42, 5, .4);
  border-radius: 12px;
  padding: 1px 6px;
  color: #3a2a05;
}

/* ---------------- 邀请人横幅 ---------------- */
.ref-banner {
  display: none;
  border: 3px solid var(--gold-deep);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  padding: 13px 16px;
  margin: 18px auto 0;
}
.ref-banner.show { display: block; }
.ref-banner.warn { background: var(--bad-bg); border-color: var(--rust); }
.ref-banner p { margin: 0; }
.ref-kicker { font: 700 11px var(--mono); letter-spacing: .08em; color: var(--gold-deep); margin-bottom: 5px !important; text-transform: uppercase; }
.ref-banner.warn .ref-kicker { color: var(--bad); }

/* ---------------- Hero ---------------- */
.hero-scene {
  position: relative;
  margin-top: 57px;
  border-bottom: 3px solid var(--gold-deep);
  background: var(--sky-soft);
  overflow: hidden;
}
.hero-scene img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.hero-scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(238, 246, 253, 0), rgba(238, 246, 253, .5));
  pointer-events: none;
}
.hero-title {
  position: absolute;
  left: clamp(14px, 4vw, 46px);
  bottom: clamp(12px, 3vw, 30px);
  z-index: 2;
  pointer-events: none;
}
.hero-title h1 {
  font: 700 clamp(46px, 8.5vw, 96px)/0.95 var(--disp);
  color: var(--ink);
  letter-spacing: .01em;
  margin: 0;
  text-shadow: 2px 2px 0 #ffffff, 4px 4px 0 rgba(240, 188, 82, .65), 6px 6px 0 rgba(34, 48, 74, .16),
    8px 10px 22px rgba(51, 80, 110, .28), 0 0 16px rgba(255, 255, 255, .7);
}
.hero-title h1 .wolfw { color: var(--gold-deep); }
.hero-title .tagline {
  font: 700 clamp(16px, 2.6vw, 25px) var(--disp);
  color: var(--ink);
  margin-top: 10px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .85), 0 0 26px rgba(240, 188, 82, .45);
}
.hero-title .tagline .amp { color: var(--gold-deep); }
.hero-intro { margin: 24px auto 0; }
.kicker {
  display: inline-block;
  font: 700 11px var(--mono);
  letter-spacing: .07em;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #3a2a05;
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 12px;
  box-shadow: 2px 2px 0 rgba(51, 80, 110, .5);
}
.hero-lead { margin: 0 0 18px; max-width: 48em; color: var(--ink-soft); font-size: 15.5px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.status-strip { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.status-chip {
  font: 700 12.5px var(--mono);
  letter-spacing: .02em;
  border: 2.5px solid var(--gold-deep);
  border-radius: 20px;
  padding: 7px 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 2.5px 2.5px 0 rgba(51, 80, 110, .55);
}
.status-chip b { color: var(--sky-deep); font-weight: 700; }
.status-chip.cool { border-color: var(--edge); background: var(--card-2); }
.status-chip.cool b { color: var(--ink); }

/* ---------------- 通用按钮 ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 700 13.5px var(--sans);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #e8f3fd);
  border: 3px solid var(--line);
  border-radius: 11px;
  box-shadow: 3px 3px 0 rgba(51, 80, 110, .3), inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -3px 0 rgba(51, 80, 110, .12);
  padding: 10px 17px;
  text-decoration: none;
  min-height: 44px;
  transition: filter .15s ease, transform .05s ease, box-shadow .05s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(51, 80, 110, .6); }
.btn-amber {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #3a2a05;
  box-shadow: 3px 3px 0 rgba(51, 80, 110, .3), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.btn-barn {
  background: linear-gradient(180deg, var(--sky), var(--sky-deep));
  color: #ffffff;
}
.btn-wide { width: 100%; }
.btn[disabled] { cursor: not-allowed; opacity: .55; filter: saturate(.5); }
.btn[disabled]:hover { filter: saturate(.5); }

/* ---------------- 分区与面板 ---------------- */
.section { margin: 30px auto 0; scroll-margin-top: 128px; }
.panel {
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 3px solid var(--gold-deep);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
.strip {
  background: linear-gradient(180deg, #e8f3fd, #dceefb);
  border-bottom: 3px solid var(--gold);
  padding: 13px 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.strip h2 {
  margin: 0;
  font: 700 clamp(19px, 2.6vw, 24px)/1.15 var(--disp);
  color: var(--ink);
  letter-spacing: .01em;
}
.strip span { font: 700 11.5px var(--mono); letter-spacing: .04em; color: var(--gold-deep); white-space: nowrap; }
.panel-body { padding: 20px; }
.panel-body > p:first-child { margin-top: 0; }
.panel-body ul { padding-left: 1.25em; }
.panel-body li { margin: 5px 0; color: var(--ink-soft); }
.panel-body li strong, .panel-body p strong { color: var(--ink); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card {
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 16px;
}
.card h3 { margin: 0 0 9px; font: 700 17px var(--disp); color: var(--ink); }
label { display: block; font: 700 12.5px var(--mono); letter-spacing: .03em; color: var(--ink-soft); margin: 12px 0 6px; }
.field {
  width: 100%;
  border: 2.5px solid var(--edge);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  padding: 10px 13px;
  min-height: 44px;
  outline: none;
}
.field::placeholder { color: #8aa3bd; }
.field:focus { border-color: var(--sky); box-shadow: inset 0 0 0 2px rgba(74, 163, 232, .3); background: #f4faff; }
select.field { appearance: auto; }
.result {
  margin-top: 12px;
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  background: var(--card-2);
  padding: 12px;
  display: none;
}
.result.show { display: block; }
.result .row { display: flex; gap: 9px; align-items: center; margin-top: 8px; }
.result code {
  flex: 1;
  background: var(--field);
  border: 2px solid var(--edge-soft);
  border-radius: 8px;
  padding: 8px 10px;
  word-break: break-all;
  font: 13px var(--mono);
  color: var(--sky-deep);
}
.msg { min-height: 1.4em; margin: 9px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.msg.err { color: var(--bad); font-weight: 700; }
.msg.ok { color: var(--good); font-weight: 700; }
.note { font-size: 13.5px; color: var(--muted); }
.inline-ex {
  background: var(--field);
  border: 2px solid var(--edge-soft);
  border-radius: 6px;
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--sky-deep);
  word-break: break-all;
}

.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rule {
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 16px;
}
.rule h3 { margin: 0 0 9px; font: 700 17px var(--disp); color: var(--sky-deep); }
.rule ul { margin: 8px 0 0; padding-left: 1.2em; }
.rule li { margin: 4px 0; color: var(--ink-soft); }
.rule p { color: var(--ink-soft); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--field);
  margin: 12px 0;
  font: 13px var(--mono);
  border-radius: 10px;
  overflow: hidden;
}
th, td { border: 1.5px solid var(--edge-soft); padding: 7px 9px; text-align: left; vertical-align: top; color: var(--ink-soft); }
th { background: var(--sky-soft); color: var(--sky-deep); font-weight: 700; }
td:first-child { color: var(--ink); font-weight: 700; }

.tpl {
  background: var(--field);
  border: 2.5px solid var(--edge);
  border-radius: 10px;
  padding: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  font: 13px/1.6 var(--mono);
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.tools-list { display: grid; gap: 16px; }
.tool-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------------- 数据格 / 分布 / 狼列表 ---------------- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-box {
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #e9f4fd);
  padding: 12px 14px;
  box-shadow: 2.5px 2.5px 0 rgba(51, 80, 110, .16);
}
.stat-box .note { margin: 0; font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.stat-box b { display: block; font: 700 19px/1.35 var(--mono); color: var(--ink); margin-top: 3px; word-break: break-all; }
.tabs-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stack { display: grid; gap: 12px; }
.animal-card { margin-bottom: 12px; }
.animal-card h3 { margin-bottom: 6px; }
.dist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.dist-col {
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 12px 16px;
}
.dist-col h4 { margin: 0 0 8px; font: 700 16px var(--disp); color: var(--sky-deep); }
.dist-col p { margin: 3px 0; display: flex; justify-content: space-between; color: var(--ink-soft); font-family: var(--mono); font-size: 13.5px; }
.dist-col p b { color: var(--ink); }
.wolf-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--card-2);
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 10px 13px; margin-bottom: 10px; flex-wrap: wrap;
  color: var(--ink-soft);
}
.shield-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(227, 169, 60, .16); border: 2px solid var(--gold-deep);
  border-radius: 12px;
  box-shadow: 2px 2px 0 rgba(51, 80, 110, .5);
  padding: 1px 8px; margin-left: 6px;
  font: 700 12px var(--mono); color: var(--gold-deep);
  vertical-align: middle; white-space: nowrap;
}
.greyed { opacity: .5; filter: grayscale(.6); }
.confirm-box { background: #fbf0cd; border-color: var(--gold-deep); }
.gate-note {
  display: none;
  border: 2.5px solid var(--rust);
  border-radius: 10px;
  background: var(--bad-bg);
  color: #8c3a22;
  padding: 11px 13px;
  font-size: 13.5px;
  margin: 0 0 14px;
}
.warn-note { border: 2.5px solid var(--rust); border-radius: 10px; background: var(--bad-bg); color: #8c3a22; padding: 11px 13px; }

/* ---------------- 铸造进度（置顶区） ---------------- */
.mint-progress { margin-bottom: 16px; }
.prog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.prog-stat .note { margin: 0; font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.prog-stat b { display: block; font: 700 19px/1.35 var(--mono); color: var(--ink); margin-top: 3px; word-break: break-all; }
.prog-bar {
  position: relative;
  height: 22px;
  margin-top: 34px;
  background: var(--sky-soft);
  border: 2.5px solid var(--edge);
  border-radius: 11px;
}
.prog-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--sky), var(--gold-2));
  border-radius: 8px;
  transition: width .6s ease;
}
.prog-marker {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  background: var(--gold-deep);
  border-radius: 2px;
}
.prog-marker span {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 700 11px var(--mono);
  letter-spacing: .03em;
  color: var(--gold-deep);
}
.mint-progress .note { margin-top: 10px; }

/* ---------------- 备用折叠 ---------------- */
.backup {
  margin-top: 16px;
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.backup summary { cursor: pointer; padding: 13px 16px; font-weight: 700; list-style: none; color: var(--ink); }
.backup summary::-webkit-details-marker { display: none; }
.backup summary::before { content: "+ "; color: var(--gold-deep); font-family: var(--mono); }
.backup[open] summary::before { content: "- "; }
.backup .card { border: none; box-shadow: none; padding-top: 0; background: transparent; }

/* ---------------- 弹窗 ---------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(34, 48, 74, .45);
  padding: 24px 12px;
  overflow: auto;
}
.modal.show { display: block; }
.modal-card {
  width: min(540px, 100%);
  margin: 8vh auto;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 3px solid var(--gold-deep);
  border-radius: 14px;
  box-shadow: 8px 8px 0 rgba(51, 80, 110, .25);
  overflow: hidden;
}
.modal-body { padding: 18px; color: var(--ink-soft); }
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 13px 0;
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 10px;
  padding: 11px;
  font-family: var(--sans);
  letter-spacing: normal;
  color: var(--ink-soft);
}
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--sky); flex: none; }
.timer {
  font: 700 42px/1 var(--mono);
  color: var(--gold-deep);
  text-align: center;
  border: 2.5px solid var(--edge);
  border-radius: 12px;
  background: var(--field);
  padding: 14px;
  margin: 13px 0;
  display: none;
}
.timer.show { display: block; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------------- 页脚 ---------------- */
.site-footer {
  margin-top: 40px;
  background: linear-gradient(180deg, #e8f3fd, #d9ebfa);
  border-top: 3px solid var(--gold-deep);
  text-align: center;
  padding: 22px 12px 30px;
}
.site-footer .f-brand { font: 700 24px var(--disp); color: var(--ink); }
.site-footer .f-brand b { color: var(--gold-deep); }
.site-footer p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
  .header-count { display: none; }
}
@media (max-width: 760px) {
  .header-inner { gap: 9px; padding: 7px 0; }
  nav.main { order: 3; flex: 1 1 100%; margin-left: 0; }
  nav.main a { padding: 5px 9px; font-size: 12px; }
  .header-right { gap: 8px; }
  .brand-name { font-size: 19px; }
  .hero-scene { margin-top: 96px; }
  .grid-2, .rule-grid, .dist-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .prog-stats { grid-template-columns: 1fr 1fr; }
  .panel-body { padding: 15px; }
  .result .row { flex-direction: column; align-items: stretch; }
  .section { scroll-margin-top: 150px; }
  .strip { flex-direction: column; gap: 2px; }
  .strip span { white-space: normal; }
}