/* Layout: an olive field-dispatch band up top, a sticky contents strip, then order sheets in one 52rem column.
   One dark theme for everyone, like most game news pages: a warm olive-black ground, soft off-white body text
   (never pure white), brighter only for headings. */
:root {
  --paper: #171A12;
  --sheet: #1F2318;
  --ink: #CDD1BF;
  --head: #E6E8DA;
  --muted: #949985;
  --rule: #33382A;
  --olive: #A7B46C;
  --band: #222816;
  --band-ink: #E2E4D3;
  --band-muted: #A9AF92;
  --brass: #D2AE58;
  --brass-bg: #29231A;
  --stamp: #D97A6F;
  --fix: #86B6C4;
  --display: "Stardos Stencil", "Arial Black", Impact, sans-serif;
  --body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
h1, h2, h3, b, strong { color: var(--head); }
.hero h1 { color: var(--band-ink); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.7;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.col { max-width: 52rem; margin: 0 auto; }

h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.05; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.4rem, 8vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); }
h3 { font-family: var(--body); font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin: 0; }
p { margin: 0; }
a { color: var(--olive); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.label, .tag, .eyebrow, .back, .nav-links a { font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }

/* Hero band */
.hero { background: var(--band); color: var(--band-ink); padding-top: env(safe-area-inset-top, 0px); }
.hero .col { position: relative; padding-block: 2rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.hero .eyebrow, .hero .back { color: var(--band-muted); font-size: .85rem; text-decoration: none; }
.hero .back:hover { color: var(--band-ink); }
.hero .lede { font-size: 1.2rem; color: var(--band-muted); max-width: 38rem; }
.stamp {
  position: absolute; right: 0; top: 2.4rem; transform: rotate(-8deg);
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .12em; line-height: 1.15; text-align: center;
  color: var(--stamp); border: 3px solid var(--stamp); padding: .45rem .8rem;
  animation: stamp .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes stamp { from { transform: rotate(-8deg) scale(1.6); } to { transform: rotate(-8deg) scale(1); } }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(238,240,226,.18); border: 1px solid rgba(238,240,226,.18); margin-top: .5rem; }
.glance div { background: var(--band); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.glance b { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--band-ink); font-variant-numeric: tabular-nums; }
.glance span { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--band-muted); line-height: 1.3; }

/* Contents strip */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); border-bottom: 1px solid var(--rule); }
.nav-row { display: flex; align-items: center; gap: .5rem; padding-block: .55rem; }
.nav-links { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.nav-links a { font-size: .8rem; text-decoration: none; color: var(--muted); padding: .2rem .6rem; border: 1px solid var(--rule); background: var(--sheet); white-space: nowrap; }
.nav-links a:hover { color: var(--head); border-color: var(--olive); }
.nav-jump { display: none; flex: 1; min-width: 0; }
.nav-jump select { width: 100%; font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: .85rem;
  color: var(--head); background: var(--sheet); border: 1px solid var(--rule); padding: .35rem .5rem; border-radius: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-cta, .btn { flex: none; font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; text-decoration: none;
  background: var(--olive); color: var(--paper); padding: .3rem .85rem; border: 1px solid var(--olive); }
.nav-cta { font-size: .85rem; }
.nav-cta:hover, .btn:hover { filter: brightness(1.12); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .4rem; }
.hero-cta .btn { font-size: .95rem; padding: .55rem 1.2rem; }
.hero-cta span { color: var(--band-muted); font-size: .98rem; }

/* Sections */
main .col { display: flex; flex-direction: column; gap: 3rem; padding-block: 2.5rem 3rem; }
section { display: flex; flex-direction: column; gap: 1.1rem; }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-bottom: .6rem; border-bottom: 3px solid var(--ink); }
.tag { padding: .1rem .5rem; border: 1.5px solid currentColor; font-size: .75rem; }
.tag.new { color: var(--olive); }
.tag.chg { color: var(--brass); }
.tag.fix { color: var(--fix); }
.short { font-size: 1.2rem; font-weight: 500; max-width: 42rem; }
.note { font-size: .98rem; color: var(--muted); max-width: 42rem; }
.sub { font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; font-size: .9rem; color: var(--muted); margin-top: .5rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14.5rem, 100%), 1fr)); gap: 1rem; }
.card { min-width: 0; background: var(--sheet); border: 1px solid var(--rule); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.card .label { font-size: .78rem; color: var(--olive); }
.card p { font-size: 1rem; }

ul.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .8rem; max-width: 44rem; }
ul.points li { padding-left: 1.3rem; position: relative; }
ul.points li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: .5rem; background: var(--olive); }
kbd { font-family: var(--label); font-weight: 600; font-size: .92em; padding: .02rem .45rem; border: 1px solid var(--rule); border-bottom-width: 3px; background: var(--sheet); white-space: nowrap; }

/* Legendary pairs */
.guns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1rem; }
.gun { min-width: 0; background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.gun > h3 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; padding: .85rem 1.1rem .35rem; }
.half { padding: .35rem 1.1rem; font-size: .98rem; }
.half b { display: block; font-weight: 600; }
.plus { padding: 0 1.1rem; font-family: var(--display); color: var(--muted); line-height: 1; }
.pair { margin-top: auto; background: var(--brass-bg); border-top: 2px solid var(--brass); padding: .7rem 1.1rem .85rem; font-size: .98rem; }
.gun .half:last-of-type { padding-bottom: .9rem; }
.pair .label { display: block; color: var(--brass); font-size: 1rem; letter-spacing: .12em; }

.ammo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: .75rem; }
.round { min-width: 0; background: var(--sheet); border: 1px solid var(--rule); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.tracer { height: 4px; width: 100%; border-radius: 2px; }
.tracer.orange { background: linear-gradient(90deg, transparent, #E8862A); }
.tracer.blue { background: linear-gradient(90deg, transparent, #4AA3E8); }
.tracer.red { background: linear-gradient(90deg, transparent, #E0463A); }
.tracer.plain { background: linear-gradient(90deg, transparent, var(--muted)); }
.round .tier { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--muted); }
.round .tier.leg { color: var(--brass); }
.round p { font-size: .95rem; }

/* Honours cap scale */
.scale { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--rule); background: var(--sheet); }
.scale div { padding: .6rem .3rem; text-align: center; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: .2rem; }
.scale div:last-child { border-right: 0; }
.scale b { font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--olive); font-variant-numeric: tabular-nums; }
.scale div:last-child b { color: var(--brass); }
.scale span { font-family: var(--label); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--muted); }

.multi { display: flex; flex-wrap: wrap; gap: .5rem; }
.multi span { font-family: var(--label); font-weight: 600; font-size: .95rem; padding: .2rem .7rem; border: 1px solid var(--rule); background: var(--sheet); }
.multi b { font-family: var(--display); color: var(--olive); }

.fixes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: .6rem 1.5rem; }
.fixes li { position: relative; padding-left: 1.7rem; font-size: 1rem; min-width: 0; }
.fixes li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--fix); }

.ask { border: 2px dashed var(--olive); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

footer { border-top: 1px solid var(--rule); }
footer .col { padding-block: 1.2rem 2rem; font-family: var(--label); color: var(--muted); font-size: .9rem; }

/* Index list */
.list { display: flex; flex-direction: column; gap: 1rem; }
.entry { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit; background: var(--sheet); border: 1px solid var(--rule); border-left: 6px solid var(--olive); padding: 1.4rem 1.5rem; }
.entry:hover h2, .entry:focus-visible h2 { color: var(--olive); }
.entry .tag { align-self: flex-start; }
.entry .go { font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--olive); font-size: .9rem; }

@media (max-width: 40rem) {
  .nav-links { display: none; }
  .nav-jump { display: block; }
  .stamp { position: static; align-self: flex-start; margin-top: .25rem; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scale { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scale div { border-bottom: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stamp { animation: none; }
}

/* Feedback form */
.fb { background: var(--sheet); border: 1px solid var(--rule); padding: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.fb-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.fb label, .fb-label { font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; font-size: .85rem; color: var(--head); }
.fb .opt { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: .85rem; }
.fb input[type="text"], .fb textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--head); background: var(--paper);
  border: 1px solid var(--rule); padding: .65rem .8rem; border-radius: 0;
}
.fb textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.fb input::placeholder, .fb textarea::placeholder { color: var(--muted); }
.fb input:focus, .fb textarea:focus { outline: 2px solid var(--olive); outline-offset: 0; border-color: var(--olive); }
.fb-count { align-self: flex-end; font-family: var(--label); font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-drop {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; cursor: pointer;
  padding: 1.3rem 1rem; border: 2px dashed var(--rule); background: var(--paper);
  text-transform: none !important; letter-spacing: 0 !important; font-family: var(--body) !important; font-weight: 400 !important; font-size: 1rem !important; color: var(--ink) !important;
}
.fb-drop:hover, .fb-drop.over, .fb-drop:focus-within { border-color: var(--olive); }
.fb-drop b { color: var(--olive); }
.fb-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fb-preview { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .6rem; border: 1px solid var(--rule); background: var(--paper); }
.fb-preview img { width: 7rem; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule); }
.fb-preview span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .95rem; }
.fb button { font-family: var(--label); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; font-size: .95rem; cursor: pointer; border-radius: 0; }
#fb-remove { background: none; color: var(--muted); border: 1px solid var(--rule); padding: .35rem .8rem; }
#fb-remove:hover { color: var(--head); border-color: var(--olive); }
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
#fb-send { background: var(--olive); color: var(--paper); border: 0; padding: .7rem 1.4rem; }
#fb-send:hover { filter: brightness(1.1); }
#fb-send:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.fb-status { font-size: .98rem; min-height: 1.5em; flex: 1; min-width: 12rem; color: var(--muted); }
.fb-status[data-kind="ok"] { color: var(--olive); }
.fb-status[data-kind="error"] { color: var(--stamp); }