/* Astonia: Evolution site, styled after the game client's HUD: black stone panels, thin olive frames,
   charcoal buttons with a red outline for the selected one, Roboto labels, gold title lettering.
   Layout: fixed left sidebar on wide screens, sticky top bar + slide-in drawer on phones.
   One dark look on purpose (it is the game's look), so there is no light theme. */
:root {
  --ink:#070807;        /* behind everything */
  --stone:#1a1b19;      /* panel fill under the stone texture */
  --slot:#0e0f0e;       /* empty hotbar slot */
  --frame:#5e5a42;      /* olive frame line */
  --frame-hi:#8d8763;   /* frame on hover */
  --sel:#b81d20;        /* selected-button red */
  --text:#e7e6e0; --dim:#a3a091;
  --gold:#d6a74e; --gold-hi:#f0c870;
  --hp:#c8202a; --mana:#2a4bc8; --endu:#1fae2a;
  --display:"Cinzel", "Trajan Pro", Georgia, serif;
  --ui:"Roboto", "Segoe UI", Arial, sans-serif;
  --side:256px;
  --tex:url("img/stone.webp");
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-padding-top:72px; }
body { margin:0; background:var(--ink) var(--tex); color:var(--text); font:17px/1.6 var(--ui); }
img { max-width:100%; height:auto; display:block; }
a { color:var(--gold); text-underline-offset:3px; }
a:hover { color:var(--gold-hi); }
:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
code { font:15px/1.4 Consolas, "Roboto Mono", monospace; background:var(--slot); border:1px solid var(--frame); padding:1px 5px; }

/* A HUD panel: stone fill, a thin olive frame, a black gap, and a faint inner frame line. */
.panel, .card, .beast, .side, .topbar {
  background:var(--stone) var(--tex);
  border:2px solid var(--frame);
  box-shadow:inset 0 0 0 2px #000, inset 0 0 0 3px rgba(94,90,66,.45);
}

/* ---------- game buttons ---------- */
.btns { display:flex; flex-wrap:wrap; gap:10px; }
.btn, .menu-btn, .side li a {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#121312; border:2px solid var(--frame); color:var(--text);
  font:400 16px/1 var(--ui); text-decoration:none; padding:11px 22px; cursor:pointer;
  box-shadow:inset 0 0 0 1px #000;
}
.btn:hover, .menu-btn:hover, .side li a:hover { border-color:var(--frame-hi); color:#fff; background:#1b1c1a; }
.btn.primary { border-color:var(--sel); }
.btn.primary:hover { border-color:#e0383a; }

/* ---------- side navigation ---------- */
.topbar { display:none; }
.side {
  position:fixed; inset:0 auto 0 0; width:var(--side); z-index:20; border-width:0 2px 0 0;
  display:flex; flex-direction:column; overflow-y:auto;
  padding:calc(20px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.side .brand { display:block; padding:0 6px 14px; }
.side .vitals { margin:0 0 4px; gap:8px; }
.side .vitals .orb { width:34px; height:34px; }
.side .vitals .bar { flex-direction:column; align-items:stretch; gap:4px; padding:5px 8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.side .vitals .bar i { flex:none; height:4px; }
.side h3 { margin:18px 2px 8px; font:400 15px/1 var(--ui); color:var(--dim); }
.side ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.side li a { display:flex; width:100%; padding:10px 12px; font-size:15px; position:relative; }
.side li a[aria-current="page"] { border-color:var(--sel); color:#fff; }
.side li a .ext { font-size:13px; color:var(--dim); position:absolute; right:10px; }
.side .foot { margin-top:auto; padding:18px 2px 0; font-size:13px; line-height:1.5; color:var(--dim); }
.side .foot a { color:var(--dim); }
[data-optional][hidden] { display:none !important; }
.scrim { display:none; }

/* ---------- page frame ---------- */
.page { margin-left:var(--side); min-width:0; background:rgba(0,0,0,.45); min-height:100vh; }
main { max-width:1040px; margin:0 auto; padding:32px 40px 48px; }
footer.site { max-width:1040px; margin:0 auto; padding:20px 40px 40px; border-top:2px solid var(--frame); color:var(--dim); font-size:14px; }
footer.site a { color:var(--dim); }

/* ---------- type ---------- */
h1, h2 { font-family:var(--display); font-weight:600; color:var(--gold); text-wrap:balance; letter-spacing:.03em;
  text-shadow:0 1px 0 #000, 0 0 14px rgba(214,167,78,.18); }
h1 { font-size:clamp(30px, 5vw, 46px); line-height:1.15; margin:0 0 10px; }
h2 { font-size:clamp(22px, 3vw, 28px); line-height:1.2; margin:0 0 10px; }
h3 { font:500 18px/1.3 var(--ui); color:var(--text); margin:0 0 6px; }
p { margin:0 0 14px; max-width:66ch; }
.lede { font-size:19px; color:var(--text); }
.dim { color:var(--dim); }
.eyebrow { font:500 12px/1 var(--ui); letter-spacing:.24em; text-transform:uppercase; color:#e0383a; margin:0 0 10px; }
section + section { margin-top:56px; }

/* ---------- hero ---------- */
.hero { position:relative; margin:-32px -40px 40px; overflow:hidden; border-bottom:2px solid var(--frame); }
.hero > img { width:100%; height:clamp(300px, 52vw, 560px); object-fit:cover; }
.hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,8,7,.1) 0%, rgba(7,8,7,0) 35%, rgba(7,8,7,.78) 80%, rgba(7,8,7,.92) 100%); }
.hero .over { position:absolute; left:40px; right:40px; bottom:28px; z-index:1; }
.hero .over .logo { width:min(460px, 80%); margin:0 0 6px -8px; filter:drop-shadow(0 4px 10px #000); }
.hero .over p { text-shadow:0 2px 8px #000; font-size:19px; margin-bottom:16px; }
.page-head { margin:0 0 28px; }
.page-head .banner { margin:-32px -40px 28px; position:relative; border-bottom:2px solid var(--frame); }
.page-head .banner img { width:100%; height:clamp(180px, 30vw, 320px); object-fit:cover; }
.page-head .banner::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,8,7,0) 45%, rgba(7,8,7,.85)); }

/* ---------- vitals strip: the HUD's hitpoint orb, endurance bar and mana orb ---------- */
.vitals { display:flex; align-items:center; gap:12px; margin:0 0 18px; max-width:460px; }
.orb { flex:none; width:44px; height:44px; border-radius:50%; border:3px solid var(--frame);
  box-shadow:0 0 0 1px #000, inset -5px -7px 12px rgba(0,0,0,.45), inset 4px 5px 9px rgba(255,255,255,.22); }
.orb.hp { background:radial-gradient(circle at 35% 30%, #f07b7e, var(--hp) 45%, #6d0d12); }
.orb.mana { background:radial-gradient(circle at 35% 30%, #8fa6ff, var(--mana) 45%, #13246d); }
.bar { flex:1; min-width:0; border:2px solid var(--frame); background:var(--slot); padding:6px 10px; display:flex; align-items:center; gap:10px; font-size:13px; white-space:nowrap; }
.bar i { flex:1; height:6px; background:var(--endu); display:block; }

/* ---------- feature cards and figures ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px; }
.card { display:flex; flex-direction:column; min-width:0; text-decoration:none; color:var(--text); padding:6px; }
.card img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:1px solid #000; }
.card .body { padding:12px 10px 10px; }
.card p { font-size:15px; margin:0; color:var(--dim); }
a.card:hover { border-color:var(--frame-hi); }
a.card:hover h3 { color:#fff; }

.shots { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin:18px 0 0; }
figure { margin:0; min-width:0; }
figure img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:2px solid var(--frame); box-shadow:0 0 0 1px #000; background:var(--slot); }
figcaption { font-size:14px; color:var(--dim); margin-top:6px; }
.wide { margin:18px 0 0; }
.wide img { aspect-ratio:auto; }
figure.tall img { aspect-ratio:3/4; object-position:50% 20%; }
figure.top img { object-position:50% 0%; }
figure.armoury { max-width:560px; margin:18px auto 0; }
#gear h3 { margin-top:30px; }
figure.armoury img { aspect-ratio:auto; object-fit:contain; }

.split { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:center; }

/* Feature lists: each item is marked with a small hotbar slot. */
.facts { list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px 28px; }
.facts li { padding-left:26px; position:relative; font-size:16px; }
.facts li::before { content:""; position:absolute; left:0; top:.32em; width:14px; height:14px; border:2px solid var(--frame); background:var(--gold); box-shadow:inset 0 0 0 2px #000; }
.facts b { color:#fff; font-weight:500; }

.panel { padding:22px 24px; }

/* Steps as numbered hotbar slots, like the 1-2-3 keys on the action bar. */
.steps { counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.steps li { counter-increment:step; position:relative; padding:12px 14px 12px 72px; min-height:68px;
  background:var(--slot); border:2px solid var(--frame); box-shadow:inset 0 0 0 1px #000; }
.steps li::before { content:counter(step); position:absolute; left:10px; top:10px; width:46px; height:46px;
  border:2px solid var(--frame); background:#121312; color:#fff; font:500 14px/1 var(--ui); padding:4px 0 0 5px; box-sizing:border-box; }
.steps li p { margin:0; font-size:16px; }

/* ---------- bestiary ---------- */
.beasts { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; margin-top:18px; }
.beast { min-width:0; padding:5px; }
.beast img { width:100%; height:auto; aspect-ratio:400/442; object-fit:cover; background:#262830; border:1px solid #000; }
.beast div { padding:8px 6px 6px; }
.beast h3 { font-size:16px; margin:0 0 2px; }
.beast p { font-size:13px; line-height:1.45; color:var(--dim); margin:0; }

/* ---------- wiki (wiki.html + wiki.js) ---------- */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wiki-bar { position:sticky; top:0; z-index:5; padding:12px; display:grid; gap:10px; }
.wiki-search input { width:100%; font:400 18px/1.2 var(--ui); color:var(--text); background:var(--slot);
  border:2px solid var(--frame); box-shadow:inset 0 0 0 1px #000; padding:11px 12px; border-radius:0; -webkit-appearance:none; appearance:none; }
.wiki-search input:focus { border-color:var(--frame-hi); outline:none; }
.wiki-tabs { display:flex; gap:6px; }
.wiki-tabs button { flex:1 1 0; min-width:0; background:#121312; border:2px solid var(--frame); color:var(--text);
  font:400 15px/1.2 var(--ui); padding:9px 6px; cursor:pointer; box-shadow:inset 0 0 0 1px #000; }
.wiki-tabs button span { color:var(--dim); font-size:13px; }
.wiki-tabs button:hover { border-color:var(--frame-hi); }
.wiki-tabs button[aria-selected="true"] { border-color:var(--sel); color:#fff; }
.wiki-tools { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.wiki-tools label { display:flex; flex-direction:column; gap:2px; min-width:0; }
.wiki-tools label[hidden] { display:none; }
.wiki-tools span { color:var(--dim); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.wiki-tools select { width:100%; min-width:0; font:400 15px/1.2 var(--ui); color:var(--text); background:#121312;
  border:2px solid var(--frame); box-shadow:inset 0 0 0 1px #000; padding:7px 6px; border-radius:0; }
.wiki-tools select:focus { border-color:var(--frame-hi); outline:none; }
.wiki-tools select.on { border-color:var(--sel); }
.wiki-count { margin:12px 0 8px; font-size:14px; }
.wiki-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px; }
.wiki-list a { display:flex; align-items:center; gap:10px; padding:5px 10px 5px 5px; min-height:58px; text-decoration:none; color:var(--text);
  background:var(--slot); border:2px solid var(--frame); box-shadow:inset 0 0 0 1px #000; }
.wiki-list a:hover, .wiki-list a:focus-visible { border-color:var(--frame-hi); color:#fff; }
.wiki-text { min-width:0; display:flex; flex-direction:column; }
.wiki-text b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wiki-text small { color:var(--dim); font-size:13px; }
/* Original sprites: tiny pixel art, scaled up without smoothing. */
.wiki-icon { flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#121312; border:1px solid #000; }
.wiki-icon img { max-width:100%; max-height:100%; width:auto; height:auto; image-rendering:pixelated; border:0; box-shadow:none; aspect-ratio:auto; }
.wiki-icon.small { width:26px; height:26px; background:none; border:0; }
.wiki-icon.big { width:112px; height:132px; border:2px solid var(--frame); }
.wiki-more { margin-top:12px; }
.wiki-more[hidden] { display:none; }
.wiki-note code { white-space:nowrap; }
dialog.wiki-entry { padding:0; border:2px solid var(--frame); background:var(--stone) var(--tex); color:var(--text);
  width:min(720px, 94vw); max-height:88vh; box-shadow:0 0 40px #000; }
dialog.wiki-entry::backdrop { background:rgba(0,0,0,.8); }
.wiki-entry-body { padding:18px 20px 22px; overflow:auto; max-height:88vh; position:relative; }
.wiki-close { position:sticky; top:0; float:right; background:#121312; border:2px solid var(--frame); color:var(--text);
  font:15px var(--ui); padding:7px 14px; cursor:pointer; z-index:1; }
.wiki-close:hover { border-color:var(--frame-hi); }
.wiki-head { display:flex; gap:16px; align-items:center; margin:0 0 12px; }
.wiki-head h2 { margin:0 0 4px; }
.wiki-sub, .wiki-ids { margin:0; font-size:14px; color:var(--dim); }
.wiki-ids { font-family:Consolas, "Roboto Mono", monospace; }
.wiki-desc { font-style:italic; }
.wiki-stats { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0 0 14px; font-size:15px; }
.wiki-stats dt { color:var(--gold); }
.wiki-stats dd { margin:0; }
.wiki-entry h3 { margin:16px 0 8px; color:var(--gold); font-size:16px; }
.wiki-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.wiki-chips a { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 4px; background:#121312; border:2px solid var(--frame);
  color:var(--text); text-decoration:none; font-size:14px; }
.wiki-chips a:hover { border-color:var(--frame-hi); color:#fff; }
.wiki-spots { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:4px 16px; font-size:14px; }
.wiki-spots li { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid rgba(94,90,66,.4); padding:3px 0; }
.wiki-spots code { font-size:13px; white-space:nowrap; }

/* ---------- gallery lightbox ---------- */
.gallery figure img { cursor:zoom-in; }
dialog.lightbox { padding:0; border:2px solid var(--frame); background:var(--stone) var(--tex); color:var(--text); max-width:min(1200px, 94vw); }
dialog.lightbox::backdrop { background:rgba(0,0,0,.85); }
dialog.lightbox img { width:100%; height:auto; max-height:80vh; object-fit:contain; border:0; box-shadow:none; aspect-ratio:auto; }
dialog.lightbox p { margin:0; padding:10px 12px; font-size:15px; color:var(--dim); display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:none; }
dialog.lightbox button { background:#121312; border:2px solid var(--frame); color:var(--text); font:14px var(--ui); padding:4px 12px; cursor:pointer; }
dialog.lightbox button:hover { border-color:var(--frame-hi); }

/* ---------- credits ---------- */
.credits li { margin:6px 0; }
.legal { font-size:14px; color:var(--dim); }

/* ---------- map of Aston ---------- */
.map-scroll { overflow-x:auto; border:2px solid var(--frame); box-shadow:0 0 0 1px #000; background:#0e0f0e; -webkit-overflow-scrolling:touch; }
.map-scroll:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.map-svg { display:block; width:100%; min-width:860px; height:auto; }
.map-svg text { font-family:var(--ui); font-weight:600; paint-order:stroke; stroke:#000; stroke-width:5px; stroke-linejoin:round; fill:#fff; }
.map-svg .t-shop { font-size:16px; fill:#ffe08a; }
.map-svg .t-svc { font-size:16px; fill:#b4f5ae; }
.map-svg .t-danger { font-size:16px; fill:#ffc4ba; }
.map-svg .t-street { font-size:14px; font-style:italic; fill:#fff; }
.map-svg .t-other { font-size:15px; fill:#f4efdc; }
.map-svg .t-exit { font-size:17px; fill:#fff; }
.map-svg .t-start { font:600 20px var(--display); fill:var(--gold-hi); letter-spacing:.08em; stroke-width:5px; }
.map-svg .t-zone { font:600 16px var(--display); fill:#f0e6c8; }
.map-svg .t-home { font:600 20px var(--display); fill:var(--gold-hi); }
.map-svg .danger { fill:rgba(20,0,0,.30); stroke:#e0383a; stroke-width:2; stroke-dasharray:6 4; }
.map-svg .zone { fill:none; stroke:rgba(240,230,200,.55); stroke-width:1.5; stroke-dasharray:5 4; }
.map-svg .home { fill:none; stroke:var(--gold); stroke-width:2.5; }
.map-svg .shop { fill:#f0c870; stroke:#000; stroke-width:2; }
.map-svg .svc { fill:#5fcf58; stroke:#000; stroke-width:2; }
.map-svg .start { fill:var(--gold-hi); stroke:#000; stroke-width:2.5; }
.map-svg .quest circle { fill:#2a4bc8; stroke:#fff; stroke-width:2; }
.map-svg .quest text { font:600 13px var(--ui); stroke:none; fill:#fff; }
.map-svg .exit { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 2px #000); }
.map-key { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 10px; font-size:14px; color:var(--dim); }
.map-key span { display:inline-flex; align-items:center; gap:6px; }
.map-key i { display:inline-block; width:14px; height:14px; border:2px solid #000; font:600 10px/10px var(--ui); color:#fff; text-align:center; font-style:normal; }
.map-key .k-start { background:var(--gold-hi); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); border:0; }
.map-key .k-shop { background:#f0c870; border-radius:50%; }
.map-key .k-svc { background:#5fcf58; }
.map-key .k-quest { background:#2a4bc8; border-color:#fff; border-radius:50%; width:18px; height:18px; line-height:14px; }
.map-key .k-danger { background:rgba(200,32,42,.2); border:2px dashed #e0383a; }
.map-hint { font-size:14px; margin:8px 0 0; }
.map-lists { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.places { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.places li { font-size:15px; line-height:1.45; padding:8px 12px; background:var(--slot); border:1px solid var(--frame); }
.places b, .quests b { color:#fff; font-weight:500; }
.xy { font:13px Consolas, "Roboto Mono", monospace; color:var(--dim); white-space:nowrap; }
.quests { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.quests li { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; padding:10px 12px; background:var(--slot); border:1px solid var(--frame); }
.quests .qn { flex:none; width:26px; height:26px; border-radius:50%; background:#2a4bc8; border:2px solid #fff; color:#fff; font:600 13px/22px var(--ui); text-align:center; }

/* ---------- phones and narrow windows ---------- */
@media (max-width: 960px) {
  .topbar {
    display:flex; align-items:center; justify-content:space-between; gap:12px; border-width:0 0 2px 0;
    position:sticky; top:0; z-index:30; height:calc(58px + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) 12px 0 14px;
  }
  .topbar .brand { display:flex; align-items:center; gap:8px; text-decoration:none; }
  .topbar .brand .a { height:34px; width:34px; }
  .topbar .brand .word { height:28px; width:auto; }
  .menu-btn { padding:9px 14px; font-size:15px; }
  .menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display:block; width:16px; height:2px; background:currentColor; position:relative; content:""; }
  .menu-btn .bars::before { position:absolute; top:-5px; } .menu-btn .bars::after { position:absolute; top:5px; }
  .side { transform:translateX(-100%); transition:transform .25s ease; width:min(290px, 84vw); z-index:40; box-shadow:0 0 40px #000, inset 0 0 0 2px #000; }
  .side .brand { display:none; }
  body.nav-open .side { transform:none; }
  .scrim { display:block; position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.65); opacity:0; pointer-events:none; transition:opacity .25s; }
  body.nav-open .scrim { opacity:1; pointer-events:auto; }
  body.nav-open { overflow:hidden; }
  .page { margin-left:0; }
  main { padding:24px 16px 40px; }
  footer.site { padding:20px 16px 32px; }
  .hero { margin:-24px -16px 28px; overflow:visible; }
  .hero > img { height:240px; }
  .hero .over { position:relative; left:auto; right:auto; bottom:auto; margin-top:-64px; padding:0 16px; }
  .hero .over .logo { width:min(210px, 60%); }
  .hero .over p { font-size:17px; }
  .page-head .banner { margin:-24px -16px 22px; }
  .split, .map-lists { grid-template-columns:1fr; }
  .wiki-bar { top:calc(58px + env(safe-area-inset-top, 0px)); margin:0 -16px; border-width:0 0 2px; padding:10px 16px; }
  .wiki-tabs button { font-size:14px; padding:9px 2px; }
  .wiki-tools select { font-size:16px; padding:6px 2px; }
  .wiki-list { grid-template-columns:1fr; }
  dialog.wiki-entry { width:100vw; max-width:100vw; height:100%; max-height:100%; margin:0; border-width:0; }
  .wiki-entry-body { max-height:100%; height:100%; padding:calc(14px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .wiki-head { align-items:flex-start; }
  .wiki-icon.big { width:84px; height:100px; }
  .wiki-stats { grid-template-columns:1fr; gap:0; }
  .wiki-stats dd { margin:0 0 8px; }
  section + section { margin-top:44px; }
  body { font-size:16px; }
  .lede { font-size:17px; }
}
@media (max-width: 420px) {
  .shots, .cards { grid-template-columns:1fr; }
  .beasts { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
}
/* Without JavaScript the drawer can't open, so the menu shows as a plain list under the top bar. */
html:not(.js) .side { position:static; transform:none; width:auto; box-shadow:none; }
html:not(.js) .menu-btn { display:none; }
@media (min-width: 961px) { html:not(.js) .side { position:fixed; width:var(--side); } }
@media (prefers-reduced-motion: reduce) { .side, .scrim { transition:none; } }