/* Monster at Majette — built on the five-phase design system.
   Committed single dark world; every colour painted explicitly. */

:root{
  /* neutrals: green-biased black, not neutral grey */
  --ground:#080B0A;
  --raised:#101614;
  --raised-2:#161E1B;
  --ink:#E9EFEA;
  --ink-soft:#93A69F;
  --ink-faint:#66766F;
  --line:#1E2C28;
  --line-soft:#16211E;

  /* five-phase semantic hues, dark-mode variants */
  --navy:#1B3A5C;
  --navy-text:#6FB6DE;          /* the only interactive colour */
  --navy-tint:rgba(111,182,222,.14);

  --ob:#E46F60;      --ob-tint:#3B1D16;      /* p5 — danger / out of bounds */
  --mando:#DFA742;   --mando-tint:#3A2A0E;   /* p4 — mando, drop zone, retee */
  --water:#6C98C5;   --water-tint:#17293B;   /* p2 — water carries */
  --safe:#47AD98;    --safe-tint:#123028;    /* p3 — in bounds, relief */
  --monster:#D370A6; --monster-tint:#2A1421; /* pink — the Monster's voice */
  --cyan:#27BFCE;    --cyan-tint:#0E2C30;    /* rarest touch */

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  --f-voice:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-display:'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --tabbar-h:64px;
  --topbar-h:56px;
  --shadow-md:0 10px 30px rgba(0,0,0,.5);
  --shadow-lg:0 20px 50px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
button{font-family:inherit;color:inherit;}
a{color:var(--navy-text);}
:focus-visible{outline:2px solid var(--navy-text); outline-offset:2px; border-radius:4px;}

/* ---------- shell ---------- */
.app{
  min-height:100dvh;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
.wrap{max-width:980px;margin:0 auto;padding:0 18px;}

.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(8,11,10,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.topbar-in{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:12px;
  max-width:980px; margin:0 auto; padding:0 18px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
}
.brand img{width:30px;height:30px;object-fit:contain;filter:invert(1) brightness(1.6);opacity:.92;}
.brand-txt{font-family:var(--f-display);font-weight:700;font-size:13.5px;letter-spacing:.02em;line-height:1.15;}
.brand-txt span{display:block;font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase;}
.topbar .spacer{flex:1;}

/* Topbar layout control. Reads as a control on every screen: it names itself,
   shows the peg colour, and carries a chevron. */
.layout-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--raised); border:1px solid var(--navy-text); color:var(--ink);
  border-radius:var(--r-pill); padding:6px 11px 6px 9px; cursor:pointer;
  transition:background .18s;
}
.layout-pill:hover{background:var(--navy-tint);}
.layout-pill .peg{width:13px;height:13px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.5);}
.layout-pill .txt{
  display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; gap:2px;
}
.layout-pill .k{
  font-family:var(--f-mono); font-size:8px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
.layout-pill .v{
  font-family:var(--f-display); font-weight:700; font-size:12.5px; letter-spacing:.01em;
}
.layout-pill .chev{display:flex;flex-shrink:0;color:var(--navy-text);}
.layout-pill .chev svg{width:13px;height:13px;stroke-width:2.2;}

/* Current-layout bar, repeated at the top of the hole list and each hole. */
.layout-bar{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:var(--raised); border:1px solid var(--line); border-left:3px solid var(--navy-text);
  border-radius:var(--r-md); padding:11px 14px; margin-bottom:16px;
  transition:border-color .18s, background .18s;
}
.layout-bar:hover{background:var(--raised-2);}
.layout-bar .peg{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.5);}
.layout-bar .lb-txt{flex:1;min-width:0;}
.layout-bar .lb-k{
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); display:block;
}
.layout-bar .lb-v{
  font-family:var(--f-display); font-weight:700; font-size:14.5px; display:block; margin-top:2px;
}
.layout-bar .lb-v small{
  font-family:var(--f-mono); font-weight:500; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-left:8px;
}
.layout-bar .lb-cta{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy-text); display:flex; align-items:center; gap:5px; flex-shrink:0;
}
.layout-bar .lb-cta svg{width:13px;height:13px;stroke-width:2.2;}

/* Four-up picker on the course page — the first real choice a visitor makes. */
.layout-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(min-width:760px){.layout-picker{grid-template-columns:repeat(4,1fr);}}
.lp{
  background:var(--raised); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:15px 14px; cursor:pointer; text-align:left; width:100%;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .18s, background .18s;
}
.lp:hover{border-color:var(--navy-text);}
.lp[aria-pressed="true"]{border-color:var(--navy-text);background:var(--navy-tint);}
.lp .lp-top{display:flex;align-items:center;gap:8px;}
.lp .peg{width:15px;height:15px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.5);}
.lp .lp-nm{font-family:var(--f-display);font-weight:700;font-size:15px;}
.lp .lp-tier{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.lp .lp-tot{
  font-family:var(--f-mono);font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.lp .lp-on{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-text);display:none;align-items:center;gap:5px;
}
.lp .lp-on svg{width:12px;height:12px;stroke-width:2.4;}
.lp[aria-pressed="true"] .lp-on{display:flex;}
.lp[aria-pressed="true"] .lp-tot{color:var(--ink);}
.peg-blue{background:#2b4fb0;} .peg-white{background:#e8e8e8;} .peg-red{background:#c8302c;}
.peg-alt{background:linear-gradient(135deg,#e8e8e8 50%,#2b4fb0 50%);}

/* ---------- bottom tab bar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:rgba(8,11,10,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
}
.tabbar button{
  flex:1; background:none; border:none; cursor:pointer;
  height:var(--tabbar-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); position:relative;
  transition:color .18s;
}
.tabbar button svg{width:21px;height:21px;stroke-width:1.6;}
.tabbar button[aria-current="page"]{color:var(--navy-text);}
.tabbar button[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:30px; height:2px; background:var(--navy-text); border-radius:0 0 3px 3px;
}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 10px;
}
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0;}
h1{font-size:clamp(30px,8vw,46px);font-weight:700;letter-spacing:-.025em;line-height:1.03;}
h2{font-size:clamp(21px,5vw,27px);font-weight:700;letter-spacing:-.015em;line-height:1.15;}
h3{font-size:17px;font-weight:700;letter-spacing:-.01em;}
p{margin:0 0 14px;}
p:last-child{margin-bottom:0;}
.lede{font-size:16.5px;color:var(--ink-soft);}

.voice{
  font-family:var(--f-voice); font-weight:400;
  font-size:clamp(19px,4.6vw,24px); line-height:1.34; letter-spacing:.004em;
  color:var(--monster);
}

section{padding:34px 0;}
section + section{border-top:1px solid var(--line-soft);}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:44px 0 38px;
  border-bottom:1px solid var(--line);
}
.hero canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.5; pointer-events:none;
}
.hero .wrap{position:relative;}
.hero-owl{
  width:min(190px,46vw); margin:0 auto 20px;
  filter:invert(1) brightness(1.5);
  opacity:.9;
}
.hero h1{text-align:center;}
.hero h1 em{
  font-style:normal; display:block;
  font-family:var(--f-mono); font-weight:500;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ob); margin-bottom:12px;
}
.hero .sub{
  text-align:center; margin:16px auto 0; max-width:44ch;
  color:var(--ink-soft); font-size:15px;
}

.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; margin-top:26px;
}
.stat-strip div{background:var(--raised);padding:13px 8px;text-align:center;}
.stat-strip b{
  display:block; font-family:var(--f-display); font-weight:700; font-size:20px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.stat-strip span{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- generic cards ---------- */
.card{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px;
}
.card + .card{margin-top:12px;}
.card-label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); display:block; margin-bottom:12px;
}
.stack{display:flex;flex-direction:column;gap:12px;}
.grid2{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:620px){.grid2{grid-template-columns:1fr 1fr;}}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:14.5px;
  padding:13px 20px; border-radius:var(--r-sm); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .18s,border-color .18s,color .18s;
}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-primary:hover{background:#24507A;}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-secondary:hover{border-color:var(--navy-text);color:var(--navy-text);}
.btn-block{width:100%;}
.btn-sm{padding:9px 15px;font-size:13px;}

/* ---------- hazard chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.04em;
  padding:5px 10px 5px 8px; border-radius:var(--r-pill);
  border:1px solid transparent; white-space:nowrap;
}
.chip svg{width:12px;height:12px;flex-shrink:0;stroke-width:2;}
.chip-ob{background:var(--ob-tint);color:var(--ob);border-color:#5A2C21;}
.chip-mando{background:var(--mando-tint);color:var(--mando);border-color:#5A431A;}
.chip-water{background:var(--water-tint);color:var(--water);border-color:#2C4A63;}
.chip-safe{background:var(--safe-tint);color:var(--safe);border-color:#1F4A3F;}

/* ---------- hole list ---------- */
.hole-list{display:flex;flex-direction:column;gap:9px;}
.hole-row{
  display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:13px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r-md);
  padding:13px 15px 13px 11px;
  transition:border-color .18s, background .18s;
}
.hole-row:hover{border-color:var(--navy-text);background:var(--raised-2);}
.hole-num{
  font-family:var(--f-display); font-weight:700; font-size:26px; line-height:1;
  font-variant-numeric:tabular-nums; text-align:center; color:var(--ink-faint);
}
.hole-row:hover .hole-num{color:var(--navy-text);}
.hole-row .body{min-width:0;}
.hole-name{
  display:block;
  font-family:var(--f-display); font-weight:700; font-size:15.5px;
  text-transform:uppercase; letter-spacing:-.005em; line-height:1.18;
}
.hole-epi{
  display:block;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--monster); margin-top:4px; line-height:1.3;
}
.hole-meta{
  text-align:right; font-family:var(--f-mono); font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; line-height:1.45;
}
.hole-meta b{display:block;font-size:15px;color:var(--ink);font-weight:600;}
.hole-row .flags{display:flex;gap:4px;justify-content:flex-end;margin-top:5px;}
.flagdot{width:6px;height:6px;border-radius:50%;}
.fd-ob{background:var(--ob);} .fd-water{background:var(--water);}
.fd-mando{background:var(--mando);} .fd-safe{background:var(--safe);}

/* ---------- hole detail ---------- */
.hole-head{
  display:flex; align-items:flex-start; gap:14px; padding:22px 0 16px;
}
.hole-head .big{
  font-family:var(--f-display); font-weight:700; font-size:52px; line-height:.85;
  font-variant-numeric:tabular-nums; letter-spacing:-.045em; color:var(--ink-faint);
}
.hole-head h1{font-size:clamp(23px,6.4vw,32px);text-transform:uppercase;letter-spacing:-.02em;}
.hole-head .epi{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--monster); margin-top:6px;
}

.scoreline{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; margin-bottom:16px;
}
.scoreline div{background:var(--raised);padding:11px 6px;text-align:center;}
.scoreline b{
  display:block; font-family:var(--f-display); font-weight:700; font-size:19px;
  font-variant-numeric:tabular-nums;
}
.scoreline span{
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.scoreline .peg{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);vertical-align:-1px;
}

.glance-chips{margin-bottom:16px;}

/* One line above the scoreline saying whose numbers these are. */
.layout-tag{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:none; padding:0 2px 8px; cursor:pointer; text-align:left;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.layout-tag:hover{color:var(--ink);}
.layout-tag .peg{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.5);}
.layout-tag .swap{
  margin-left:auto; display:flex; align-items:center; gap:5px; color:var(--navy-text); flex-shrink:0;
}
.layout-tag .swap svg{width:12px;height:12px;stroke-width:2.2;}

.mapframe{
  position:relative; background:#0d1211;
  border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; margin:0 auto 16px; width:fit-content; max-width:100%;
}
/* Portrait map on a portrait screen: cap it so the whole hole fits one glance.
   aspect-ratio holds the box open before the file arrives, so the frame does
   not collapse and then shove the page down on a slow connection. */
.mapframe img{
  display:block; width:auto; max-width:100%; max-height:64dvh; height:auto;
  margin:0 auto; aspect-ratio:660/1337; background:#0d1211;
}
.mapframe .zoom{
  position:absolute; right:10px; bottom:10px;
  background:rgba(8,11,10,.86); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r-pill); padding:7px 13px; cursor:pointer;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
}
.mapframe .zoom svg{width:13px;height:13px;stroke-width:2;}
.maplegend{
  display:flex; flex-wrap:wrap; gap:12px; padding:10px 14px;
  border-top:1px solid var(--line); background:var(--raised-2);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}
.maplegend i{display:inline-flex;align-items:center;gap:5px;font-style:normal;}
.maplegend .sw{width:14px;height:3px;border-radius:2px;}
.maplegend .dot{width:9px;height:9px;border-radius:50%;border:2px solid;}

.lightbox{
  position:fixed; inset:0; z-index:90; background:rgba(4,6,5,.97);
  display:none; align-items:center; justify-content:center;
  overflow:auto; padding:16px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:none;width:660px;height:auto;border-radius:var(--r-sm);}
.lightbox .close{
  position:fixed; top:calc(14px + env(safe-area-inset-top)); right:14px;
  background:var(--raised); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r-pill); padding:10px 16px; cursor:pointer;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- lore block ---------- */
.lore{
  background:var(--monster-tint);
  border:1px solid #4A2A45;
  border-radius:var(--r-md);
  padding:22px 20px;
  position:relative;
}
.lore .lore-label{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--monster); display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.lore .lore-label svg{width:15px;height:15px;stroke-width:1.6;}
.lore blockquote{
  margin:0 0 18px; padding:0 0 0 15px;
  border-left:2px solid var(--monster);
}
.lore h4{
  font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px;
}
.lore .para + .para{margin-top:16px;}
.lore p{color:var(--ink-soft);font-size:14.5px;}
.lore .toll p{color:var(--ink);}
.edited-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--cyan-tint);color:var(--cyan);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);margin-left:auto;
}

.tipbox{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--safe-tint); border:1px solid #1F4A3F;
  border-radius:var(--r-md); padding:16px 18px;
}
.tipbox svg{width:18px;height:18px;color:var(--safe);flex-shrink:0;margin-top:2px;stroke-width:2;}
.tipbox h4{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--safe); margin:0 0 5px;
}
.tipbox p{font-size:14.5px;color:var(--ink);}

.obbox{
  background:var(--raised); border:1px solid var(--line);
  border-left:3px solid var(--ob); border-radius:var(--r-md); padding:16px 18px;
}
.obbox h4{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ob); margin:0 0 8px;
}
.obbox p{font-size:14px;color:var(--ink-soft);}

/* ---------- prev / next tee bar ---------- */
.teebar{
  position:fixed; left:0; right:0;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index:44;
  background:rgba(8,11,10,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:none;
}
.teebar.show{display:block;}
.teebar-in{
  max-width:980px; margin:0 auto; padding:9px 12px;
  display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center;
}
.teebtn{
  display:flex; align-items:center; gap:9px;
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 13px; cursor:pointer; min-height:46px; text-align:left;
  transition:border-color .18s;
}
.teebtn:hover:not(:disabled){border-color:var(--navy-text);}
.teebtn:disabled{opacity:.3;cursor:default;}
.teebtn.next{justify-content:flex-end;text-align:right;}
.teebtn svg{width:16px;height:16px;flex-shrink:0;stroke-width:2;color:var(--navy-text);}
.teebtn > span{min-width:0;overflow:hidden;}
.teebtn .lbl{
  display:block;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.teebtn .val{
  display:block;font-family:var(--f-display);font-weight:700;font-size:12.5px;
  text-transform:uppercase;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.teebar .counter{
  font-family:var(--f-mono); font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; padding:0 4px; text-align:center; white-space:nowrap;
}

/* ---------- bestiary ---------- */
.beast-grid{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:700px){.beast-grid{grid-template-columns:1fr 1fr;}}
.beast{
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px; cursor:pointer; text-align:left; width:100%;
  transition:border-color .18s,background .18s;
}
.beast:hover{border-color:var(--navy-text);background:var(--raised-2);}
.beast .top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.beast .no{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.beast h3{text-transform:uppercase;letter-spacing:-.01em;font-size:16px;}
.beast .epi{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--monster);margin-bottom:10px;
}
.beast .v{font-family:var(--f-voice);font-size:16.5px;line-height:1.36;color:var(--ink-soft);}

/* ---------- list / rules ---------- */
.rulelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.rulelist li{
  display:flex;gap:11px;font-size:14.5px;color:var(--ink-soft);line-height:1.5;
}
.rulelist li::before{
  content:""; width:5px;height:5px;border-radius:50%;background:var(--ob);
  flex-shrink:0;margin-top:9px;
}
/* Documented history. A real sequence, so it gets a real rail. */
.timeline{list-style:none;margin:0;padding:0;position:relative;}
.timeline::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line);
}
.timeline li{position:relative;padding:0 0 22px 24px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
  content:""; position:absolute; left:0; top:5px; width:11px; height:11px; border-radius:50%;
  background:var(--ground); border:2px solid var(--line);
}
.timeline li:last-child::before{border-color:var(--navy-text);}
.tl-when{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.tl-what{
  display:block; font-family:var(--f-display); font-weight:700; font-size:15.5px; margin:3px 0 5px;
}
.tl-detail{display:block;font-size:14px;color:var(--ink-soft);line-height:1.55;}

.deflist{display:flex;flex-direction:column;gap:16px;}
.deflist dt{
  font-family:var(--f-display);font-weight:700;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.01em;margin-bottom:4px;
}
.deflist dd{margin:0;font-size:14.5px;color:var(--ink-soft);}

/* ---------- layout sheet ---------- */
.sheet{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(4,6,5,.7);
}
.sheet.open{display:flex;}
.sheet-in{
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  width:100%; max-width:520px; padding:22px 18px calc(26px + env(safe-area-inset-bottom));
  max-height:88dvh; overflow:auto;
}
@media(min-width:620px){
  .sheet{align-items:center;}
  .sheet-in{border-radius:var(--r-lg);}
}
.sheet h3{margin-bottom:4px;}
.sheet .hint{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px;}
.opt{
  display:flex; gap:13px; align-items:flex-start; width:100%; text-align:left;
  background:var(--ground); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:15px; cursor:pointer; margin-bottom:9px;
  transition:border-color .18s,background .18s;
}
.opt:hover{border-color:var(--navy-text);}
.opt[aria-pressed="true"]{border-color:var(--navy-text);background:var(--navy-tint);}
.opt .peg{width:17px;height:17px;border-radius:50%;flex-shrink:0;margin-top:2px;border:1px solid rgba(255,255,255,.45);}
.opt .nm{font-family:var(--f-display);font-weight:700;font-size:15.5px;}
.opt .tier{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;}
.opt .bl{font-size:13px;color:var(--ink-soft);line-height:1.45;}
.opt .tot{font-family:var(--f-mono);font-size:11px;color:var(--navy-text);margin-top:7px;font-variant-numeric:tabular-nums;}

/* ---------- lore studio ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
}
.field textarea,.field input,.field select{
  font-family:var(--f-body);font-size:14.5px;color:var(--ink);
  background:var(--ground);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;width:100%;line-height:1.55;
}
.field textarea{resize:vertical;min-height:96px;}
.field select{font-family:var(--f-mono);font-size:13px;}
.field textarea:focus,.field input:focus,.field select:focus{
  outline:none;border-color:var(--navy-text);box-shadow:0 0 0 3px var(--navy-tint);
}
.field .help{font-size:12px;color:var(--ink-faint);}
.studio-actions{display:flex;flex-wrap:wrap;gap:9px;}
.savebar{
  font-family:var(--f-mono);font-size:11px;color:var(--safe);
  display:flex;align-items:center;gap:7px;min-height:20px;
}
.savebar svg{width:14px;height:14px;stroke-width:2;}

.footer{
  padding:30px 0 40px; border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); line-height:1.7;
}
.footer a{color:var(--ink-soft);}

/* ---------- desktop ---------- */
.navlinks{display:none;gap:2px;}
.navlinks button{
  background:none;border:none;cursor:pointer;padding:8px 13px;border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .18s,background .18s;
}
.navlinks button:hover{color:var(--ink);background:var(--raised);}
.navlinks button[aria-current="page"]{color:var(--navy-text);background:var(--navy-tint);}

@media(min-width:900px){
  .hole-two{display:grid;grid-template-columns:minmax(0,330px) 1fr;gap:28px;align-items:start;}
  .hole-two .mapcol{position:sticky;top:calc(var(--topbar-h) + 18px);}
  .navlinks{display:flex;}
  .tabbar{display:none;}
  .teebar{bottom:0;}
  .app{padding-bottom:80px;}
  .wrap{padding:0 26px;}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}