/* Layout: a field journal walked top to bottom. A sticky game-UI bar, a dashed trail down the left that links every
   section's waypoint plate, ground tint shifting biome by biome, and content folded until it's wanted. */
:root{
  --ground:#e4eaee; --paper:#f8fafb; --paper-2:#eef3f6; --ink:#121a2c; --ink-2:#435069; --ink-3:#545f74; --line:#c6d0db;
  --ui:#21304e; --ui-2:#2d3f66; --ui-rim:#4a6091; --ui-ink:#eef3fb; --ui-ink-2:#aebcd6;
  --plate:#e3e9f0; --plate-2:#c2cddb; --plate-rim:#1a2440;
  --vine:#226b36; --leaf:#5cbf5a; --bloom:#b8306f; --lasso:#0e6f7a; --wood:#8a5a2c; --wood-2:#5e3a1b; --wood-hi:#b07a44; --gold:#7f5c06; --coin:#f2c53d;
  --tint:transparent; --shadow:rgba(18,26,44,.16); --hard:rgba(18,26,44,.22); --ik:#141a2e;
  --common:#5f685c; --uncommon:#2a7a37; --rare:#2462a8; --epic:#7a3cb0; --legendary:#b4560a;
  --fire:#c2421a; --water:#1d70b5; --earth:#86601f; --nature:#368a2c; --wind:#4f7489;
  --display:"Pixelify Sans","Courier New",monospace; --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --px:4px; --bar:56px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0c121e; --paper:#151e33; --paper-2:#1a253d; --ink:#e8eef7; --ink-2:#a8b6cc; --ink-3:#8190a8; --line:#2a3854;
  --ui:#18233c; --ui-2:#22325a; --ui-rim:#3d5487; --ui-ink:#eef3fb; --ui-ink-2:#a9b8d3;
  --plate:#d9e1ea; --plate-2:#a9b6c7; --plate-rim:#0a0f1c;
  --vine:#6fd27c; --leaf:#7fd877; --bloom:#ff82bb; --lasso:#62dbe6; --wood:#b37a45; --wood-2:#7a4d26; --wood-hi:#d39a5e; --gold:#f0c24e; --coin:#f2c53d;
  --shadow:rgba(0,0,0,.4); --hard:rgba(0,0,0,.55); --ik:#0a0f1c;
  --common:#a6aea2; --uncommon:#79cf85; --rare:#80b5f5; --epic:#c597f5; --legendary:#f5a865;
  --fire:#f58a63; --water:#73b8f0; --earth:#d8ab62; --nature:#8bd479; --wind:#a3c3d4; color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0c121e; --paper:#151e33; --paper-2:#1a253d; --ink:#e8eef7; --ink-2:#a8b6cc; --ink-3:#8190a8; --line:#2a3854;
  --ui:#18233c; --ui-2:#22325a; --ui-rim:#3d5487; --ui-ink:#eef3fb; --ui-ink-2:#a9b8d3;
  --plate:#d9e1ea; --plate-2:#a9b6c7; --plate-rim:#0a0f1c;
  --vine:#6fd27c; --leaf:#7fd877; --bloom:#ff82bb; --lasso:#62dbe6; --wood:#b37a45; --wood-2:#7a4d26; --wood-hi:#d39a5e; --gold:#f0c24e; --coin:#f2c53d;
  --shadow:rgba(0,0,0,.4); --hard:rgba(0,0,0,.55); --ik:#0a0f1c;
  --common:#a6aea2; --uncommon:#79cf85; --rare:#80b5f5; --epic:#c597f5; --legendary:#f5a865;
  --fire:#f58a63; --water:#73b8f0; --earth:#d8ab62; --nature:#8bd479; --wind:#a3c3d4; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{background:var(--ground);color:var(--ink);font:17px/1.6 var(--body);-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ui)}
a{color:var(--lasso);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--lasso);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:.01em}
h1{font-size:clamp(2.1rem,6.4vw,3.6rem)}
h2{font-size:clamp(1.6rem,4.2vw,2.3rem)}
h3{font-size:1.3rem;font-weight:500}
h4{font-size:1rem;font-weight:500}
p{margin:0}
ul,ol{margin:0}
.muted{color:var(--ink-2)}
.small{font-size:.88rem}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
kbd,code{font-size:.85em;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* Pixel icons */
svg.i{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;image-rendering:pixelated}
svg.i.x2{width:32px;height:32px}
svg.i.x3{width:48px;height:48px}
svg.i.x4{width:64px;height:64px}
/* The game's round icon bubble */
.ib{--s:40px;width:var(--s);height:var(--s);flex:none;display:inline-grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0,var(--plate) 45%,var(--plate-2) 100%);
  box-shadow:inset 0 0 0 2px var(--plate-rim),inset 0 -3px 0 2px rgba(0,0,0,.12),0 2px 0 var(--hard)}
.ib.s{--s:28px}.ib.m{--s:48px}.ib.l{--s:64px}.ib.xl{--s:88px}
/* Stepped pixel corners */
.px{clip-path:polygon(0 var(--px),var(--px) var(--px),var(--px) 0,calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)))}
/* The game's slate UI plate */
.plate{background:linear-gradient(180deg,var(--ui-2),var(--ui));color:var(--ui-ink);box-shadow:inset 0 0 0 2px var(--ui-rim),inset 0 3px 0 2px rgba(255,255,255,.06),inset 0 -4px 0 2px rgba(0,0,0,.22)}

/* Top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ui);color:var(--ui-ink);box-shadow:0 2px 0 var(--hard)}
.top-in{display:flex;align-items:center;gap:10px;height:var(--bar);max-width:1180px;margin:0 auto;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:8px;color:var(--ui-ink);text-decoration:none;font:700 1.08rem/1 var(--display);white-space:nowrap}
.brand .ib{--s:34px;position:relative;overflow:hidden}
/* The sword fills its bubble at twice its pixel size: the pommel crops at the rim, the tip stays clear. */
.brand .ib svg.i{width:32px;height:32px;transform:translate(0,2px)}
.brand .ib::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px var(--plate-rim);pointer-events:none}
.chips{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:center}
.chips::-webkit-scrollbar{display:none}
.chips a{display:flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;color:var(--ui-ink-2);font:500 .92rem/1 var(--display);padding:10px 10px;border-radius:6px;position:relative}
.chips a:hover{color:var(--ui-ink);background:rgba(255,255,255,.06)}
.chips a[aria-current="true"]{color:var(--ui-ink);background:rgba(255,255,255,.1)}
.chips a[aria-current="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:3px;background:var(--leaf)}
.now{display:none;align-items:center;gap:8px;flex:1;min-width:0;font:500 1rem/1.1 var(--display);color:var(--ui-ink)}
.now span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tocbtn{display:none}
.sync{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ui-ink-2);white-space:nowrap}
.sync::before{content:"";width:8px;height:8px;background:var(--ui-ink-2)}
.sync.on::before{background:var(--leaf)}
.progress{position:absolute;left:0;bottom:-3px;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:repeating-linear-gradient(90deg,var(--leaf) 0 8px,var(--vine) 8px 12px)}
@media (max-width:1060px){.chips a .lab{display:none}.chips a{padding:10px 9px}}
@media (max-width:720px){.chips,.sync,.brand .wm{display:none}.now,.tocbtn{display:flex}}
.tocbtn{align-items:center;gap:8px;font:500 .95rem/1 var(--display);color:var(--ui-ink);background:var(--ui-2);border:0;box-shadow:inset 0 0 0 2px var(--ui-rim);padding:0 12px;height:40px;cursor:pointer}
.sheet{position:fixed;left:0;right:0;top:calc(var(--bar) + env(safe-area-inset-top,0px));z-index:19;max-height:calc(100dvh - var(--bar) - env(safe-area-inset-top,0px));overflow:auto;background:var(--ground);box-shadow:0 12px 30px var(--shadow);padding:14px max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}

/* Bands: each section is a full-width band with its own biome tint */
main{display:block}
.band{background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 9%,var(--ground)),var(--ground) 70%);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:56px 40px}
.band.forest{--tint:#3f9a4f}.band.grass{--tint:#7cbc4a}.band.gold{--tint:#d9a330}.band.wet{--tint:#2f9a96}.band.wood{--tint:#a2672f}.band.stone{--tint:#6f86a6}.band.sea{--tint:#2f74c0}.band.dusk{--tint:#8a5cc8}
.col{max-width:1000px;margin:0 auto;display:grid;gap:20px}
.wide{max-width:1180px;margin:0 auto;display:grid;gap:20px}
/* The trail: a dashed path down the left of every section, through each waypoint plate */
.sec{position:relative;display:grid;gap:20px}
.col,.sec,.tabpanel{grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){
  .sec{padding-left:80px}
  .sec::before{content:"";position:absolute;left:27px;top:0;bottom:-96px;width:4px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--wood) 55%,transparent) 0 10px,transparent 10px 20px)}
  .band:last-of-type .sec::before{bottom:0}
}
.wp{display:flex;align-items:center;gap:14px}
.wp .mark{width:58px;height:58px;display:grid;place-items:center;flex:none;position:relative;z-index:1}
@media (min-width:980px){.wp .mark{position:absolute;left:0;top:-4px}.wp{min-height:58px}}
.eyebrow{font:700 .78rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--vine)}
.wp .eyebrow{display:block;margin-bottom:8px}
.lede{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.next{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:var(--ink);padding:14px 16px;border:2px dashed color-mix(in srgb,var(--wood) 50%,transparent);border-radius:8px;font:500 1.05rem/1.2 var(--display)}
.next:hover{border-style:solid;background:var(--paper)}
.next small{display:block;font:400 .8rem/1.3 var(--body);color:var(--ink-3)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--ui) 0,var(--ui) calc(100% - 46px),var(--ground) calc(100% - 46px));color:var(--ui-ink);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:40px 0}
.hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px;align-items:center}
.hero .eyebrow{color:var(--leaf)}
.hero h1{color:#fff;margin-top:10px}
.hero h1 em{font-style:normal;color:var(--leaf)}
.hero .lede{color:var(--ui-ink-2);margin-top:14px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.frame{position:relative;padding:8px;background:var(--ui-2);box-shadow:inset 0 0 0 3px var(--ui-rim),0 6px 0 var(--hard)}
.frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.keyart img{aspect-ratio:auto}
.showcase{margin:0 0 28px}
.showcase img{image-rendering:pixelated}
.frame .tagline{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;background:var(--paper);color:var(--ink);font:500 .9rem/1 var(--display);padding:8px 12px 8px 8px;box-shadow:0 3px 0 var(--hard),inset 0 0 0 2px var(--plate-rim)}
.stats{max-width:1180px;margin:34px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{display:flex;align-items:center;gap:12px;background:var(--paper);color:var(--ink);padding:14px;box-shadow:0 3px 0 var(--hard),inset 0 0 0 1px var(--line)}
.stat b{display:block;font:700 1.7rem/1 var(--display)}
.stat span{font-size:.85rem;color:var(--ink-2)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:28px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{background:linear-gradient(180deg,var(--ui) 0,var(--ui) calc(100% - 90px),var(--ground) calc(100% - 90px))}}

/* Buttons: the game's wooden sign, and a slate one */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;font:700 1rem/1 var(--display);text-decoration:none;cursor:pointer;border:0;color:#fff7ea;
  background:linear-gradient(180deg,var(--wood-hi),var(--wood) 55%,var(--wood-2));box-shadow:inset 0 0 0 2px var(--wood-2),inset 0 3px 0 2px rgba(255,255,255,.18),0 3px 0 var(--hard)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--wood-2),0 1px 0 var(--hard)}
.btn.slate{color:var(--ui-ink);background:linear-gradient(180deg,var(--ui-2),var(--ui));box-shadow:inset 0 0 0 2px var(--ui-rim),0 3px 0 var(--hard)}
.btn.ghost{color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--hard)}
button{font:inherit;color:inherit}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;cursor:pointer;background:var(--paper);color:var(--ink);font:500 .98rem/1 var(--display);box-shadow:inset 0 0 0 2px var(--line),0 2px 0 var(--hard)}
.seg button[aria-pressed="true"]{background:var(--ui);color:var(--ui-ink);box-shadow:inset 0 0 0 2px var(--ui-rim),0 2px 0 var(--hard)}

/* Cards */
.card{background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow);padding:18px;display:grid;gap:12px;min-width:0}
.card.hi{box-shadow:inset 0 0 0 2px var(--bloom),0 3px 0 var(--shadow)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}}
@media (max-width:560px){.g2{grid-template-columns:1fr}}
.row{display:flex;align-items:center;gap:12px;min-width:0}
.row > div{min-width:0}
.ribbon{justify-self:start;display:inline-flex;align-items:center;gap:8px;font:700 .82rem/1 var(--display);letter-spacing:.04em;color:#fff7ea;padding:8px 12px;background:linear-gradient(180deg,var(--wood-hi),var(--wood));box-shadow:inset 0 0 0 2px var(--wood-2)}

/* Contents tiles */
.toc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:900px){.toc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.toc a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:12px;text-decoration:none;color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow);border-radius:8px;min-height:72px}
.toc a:hover{box-shadow:inset 0 0 0 2px var(--lasso),0 3px 0 var(--shadow)}
.toc .ib{grid-row:span 2}
.toc b{font:500 1.02rem/1.15 var(--display)}
.toc span{font-size:.8rem;color:var(--ink-3);line-height:1.3}
.toc .p{color:var(--vine);font-weight:700}

/* Facts list: icon + one line */
.facts{list-style:none;padding:0;display:grid;gap:10px}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.facts li .ib{margin-top:-2px}
.facts b{font-weight:700}
.facts li > span:last-child{min-width:0;overflow-wrap:break-word}
code{overflow-wrap:anywhere}

/* Fold: a disclosure row with an icon bubble */
details.fold{background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow)}
details.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:60px}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary .t{flex:1;min-width:0;display:grid;gap:2px}
details.fold > summary .t b{font:500 1.08rem/1.2 var(--display)}
details.fold > summary .t span{font-size:.85rem;color:var(--ink-3)}
.chev{width:28px;height:28px;flex:none;display:grid;place-items:center;transition:transform .2s}
.chev::before{content:"";width:8px;height:8px;border-right:3px solid var(--ink-2);border-bottom:3px solid var(--ink-2);transform:translateY(-2px) rotate(45deg)}
details[open] > summary .chev,[aria-expanded="true"] .chev{transform:rotate(180deg)}
details.fold > .in{padding:0 16px 16px 66px;display:grid;gap:10px}
@media (max-width:560px){details.fold > .in{padding-left:16px}}

/* Hints: nudge, hint, answer */
details.hint{border-radius:6px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
details.hint > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 10px;font:500 .95rem/1 var(--display);min-height:40px}
details.hint > summary::-webkit-details-marker{display:none}
details.hint > .in{padding:0 12px 12px;display:grid;gap:8px}
details.hint details.hint{background:var(--paper)}
details.spoil{border-radius:6px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bloom) 60%,transparent);background:color-mix(in srgb,var(--bloom) 5%,var(--paper))}
details.spoil > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 12px;font:500 .98rem/1.1 var(--display);color:var(--bloom);min-height:44px}
details.spoil > summary::-webkit-details-marker{display:none}
details.spoil > .in{padding:0 14px 14px;display:grid;gap:10px}

/* Tags */
.tag{display:inline-flex;align-items:center;gap:5px;font:700 .68rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:4px;vertical-align:2px;white-space:nowrap}
.tag.dev{background:color-mix(in srgb,var(--vine) 15%,transparent);color:var(--vine)}
.tag.data{background:color-mix(in srgb,var(--lasso) 15%,transparent);color:var(--lasso)}
.tag.com{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.tag.chk{color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--ink-3)}
.tag.miss{background:var(--bloom);color:#fff}
.ach{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;padding:3px 9px 3px 4px;border-radius:99px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 70%,transparent);color:var(--gold);white-space:nowrap}
.ach .n{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.ach.got{background:color-mix(in srgb,var(--gold) 18%,transparent)}
.warn{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border-radius:6px;background:color-mix(in srgb,var(--bloom) 8%,var(--paper));box-shadow:inset 3px 0 0 var(--bloom)}

/* The lasso checkbox */
.bub{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin:0;flex:none;border-radius:50%;cursor:pointer;position:relative;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff 0,var(--plate) 50%,var(--plate-2));box-shadow:inset 0 0 0 2px var(--plate-rim)}
.bub::after{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8fbff,#3fc8d6 60%,#0f8f9c);transform:scale(0);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.bub:checked::after{transform:scale(1)}
.bub.pop{animation:lasso .5s ease-out}
@keyframes lasso{0%{box-shadow:inset 0 0 0 2px var(--plate-rim),0 0 0 14px color-mix(in srgb,var(--lasso) 0%,transparent)}35%{box-shadow:inset 0 0 0 2px var(--plate-rim),0 0 0 9px color-mix(in srgb,var(--lasso) 55%,transparent)}100%{box-shadow:inset 0 0 0 2px var(--plate-rim),0 0 0 0 color-mix(in srgb,var(--lasso) 0%,transparent)}}
.hit{display:grid;place-items:center;width:44px;height:44px;flex:none;margin:-8px}

/* Session */
.quest{list-style:none;padding:0;display:grid;gap:8px}
.quest li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.quest li a{color:var(--ink);text-decoration:none;font-weight:700}
.quest li small{display:block;color:var(--ink-3);font-size:.8rem}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--ink-2);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);border-radius:99px;padding:3px 9px 3px 5px;white-space:nowrap}

/* Tracks */
.tracks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.tracks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tracks button{display:grid;justify-items:center;gap:6px;text-align:center;padding:14px 10px;border:0;cursor:pointer;background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow)}
.tracks button b{font:500 1rem/1 var(--display)}
.tracks button span{font-size:.78rem;color:var(--ink-3);line-height:1.3}
.tracks button[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--bloom),0 3px 0 var(--shadow)}
.tip{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border-radius:6px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.tip .who{display:block;font:700 .68rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.tip.for-you{background:color-mix(in srgb,var(--bloom) 7%,var(--paper));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bloom) 55%,transparent)}
.tip.for-you .who{color:var(--bloom)}

/* Rules: numbered cards */
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:r}
@media (max-width:900px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rules{grid-template-columns:1fr}}
.rule{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:14px;background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow)}
.rule b{font:500 1.05rem/1.15 var(--display)}
.rule p{grid-column:1 / -1;font-size:.92rem;color:var(--ink-2)}

/* Phases on the trail */
.phase{background:var(--paper);border-radius:10px;box-shadow:inset 0 0 0 1px var(--line),0 4px 0 var(--shadow);position:relative}
.phase-ban{position:relative;aspect-ratio:16/5;background:var(--ui);border-radius:10px 10px 0 0;overflow:hidden}
.phase-ban img{width:100%;height:100%;object-fit:cover;display:block}
.phase-ban .lvl{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;font:500 .9rem/1 var(--display);padding:8px 12px 8px 8px}
@media (max-width:560px){.phase-ban{aspect-ratio:16/7}}
.phase-head{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:16px 18px 12px}
.phase-head h3{font-size:1.45rem}
.phase-head p{grid-column:1;color:var(--ink-2);font-size:.95rem}
.ring{grid-row:1 / span 2;grid-column:2;width:64px;height:64px;position:relative;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .bg{stroke:var(--paper-2)}
.ring .fg{stroke:var(--lasso);stroke-linecap:butt;transition:stroke-dashoffset .4s}
.ring b{font:700 .95rem/1 var(--display)}
.phase-tools{display:flex;justify-content:flex-end;padding:0 14px 8px}
.linkbtn{border:0;background:none;color:var(--lasso);font:700 .85rem/1 var(--body);cursor:pointer;padding:8px 4px;min-height:36px}
.ring-mark{display:none}
@media (min-width:980px){.ring-mark{display:grid;position:absolute;left:-80px;top:22px;width:58px;height:58px;place-items:center}}
.steps{list-style:none;padding:0;margin:0}
.step{border-top:1px solid var(--line)}
.step-row{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 18px;min-height:58px}
.step-row label{flex:1;min-width:0;cursor:pointer;font-weight:700;line-height:1.35}
.step .meta{display:flex;align-items:center;gap:6px;flex:none}
.step .meta .i{opacity:.95}
.step .tog{border:0;background:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;margin:-6px -8px -6px 0;border-radius:6px}
.step .tog:hover{background:var(--paper-2)}
.step .body{padding:0 18px 16px 62px;display:grid;gap:10px;color:var(--ink-2)}
.step .body[hidden]{display:none}
.step.done .step-row label{color:var(--ink-3);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-3) 50%,transparent)}
@media (max-width:560px){.step .body{padding-left:18px}.step .meta .mins{display:none}}
.badges{display:flex;flex-wrap:wrap;gap:6px}

/* Goals */
.goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:900px){.goals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.goals{grid-template-columns:1fr}}
.goal{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:14px;background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow);cursor:pointer}
.goal b{font:500 1rem/1.2 var(--display)}
.goal span{grid-column:2 / -1;font-size:.8rem;color:var(--ink-3)}
.goal.done{box-shadow:inset 0 0 0 2px var(--gold),0 3px 0 var(--shadow)}

/* Pets */
.podium{display:grid;gap:8px}
.podium h4{display:flex;align-items:center;gap:8px}
.bars{display:grid;gap:6px}
.barrow{display:grid;grid-template-columns:7.5em 1fr 3em;gap:8px;align-items:center;font-size:.85rem}
.barrow i{display:block;height:10px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.barrow i::after{content:"";position:absolute;inset:0;width:var(--w);background:repeating-linear-gradient(90deg,var(--c,var(--vine)) 0 6px,color-mix(in srgb,var(--c,var(--vine)) 75%,#000) 6px 8px)}
.barrow em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.moves{display:grid;gap:10px}
.mv{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.mv b{font:500 1rem/1.2 var(--display)}
.pchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pchip{font-size:.8rem;padding:2px 8px;border-radius:99px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.pchip.st{font-weight:700;box-shadow:inset 0 0 0 1px var(--ink-3)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search{display:flex;align-items:center;gap:8px;flex:1 1 220px;min-width:0;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line);padding:0 12px;height:46px;border-radius:6px}
.search input{border:0;background:none;outline:none;font:inherit;color:var(--ink);flex:1;min-width:0;height:100%}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--lasso)}
select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);border:0;box-shadow:inset 0 0 0 2px var(--line);border-radius:6px;padding:0 10px;height:46px}
.habs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.habs button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:0;cursor:pointer;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:99px;padding:0 12px 0 6px;height:40px;font-size:.88rem}
.habs button[aria-pressed="true"]{background:var(--ui);color:var(--ui-ink);box-shadow:inset 0 0 0 1px var(--ui-rim)}
.pets{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pet{background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow);padding:12px 12px 10px;display:grid;gap:8px;min-width:0}
.pet.caught{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--lasso) 70%,transparent),0 3px 0 var(--shadow)}
.pet-top{display:flex;align-items:center;gap:10px}
.pet-top h4{font-size:1.1rem;flex:1;min-width:0}
.pet-top small{display:block;font:400 .78rem/1.2 var(--body);color:var(--ink-3)}
.stat3{display:grid;gap:4px}
.stat3 .barrow{grid-template-columns:1.2em 1fr 2.6em;font-size:.8rem}
.count{display:flex;align-items:center;gap:2px}
.count button{width:34px;height:34px;border:0;cursor:pointer;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);font:700 1.05rem/1 var(--display);border-radius:6px}
.count output{min-width:2.2em;text-align:center;font:700 1.05rem/1 var(--display)}
.pips{display:flex;gap:3px}
.pips i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--lasso)}
.pips i.on{background:var(--lasso)}
.pet-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;border-top:1px solid var(--line);padding-top:8px}
.pet-foot details{margin-left:auto}
.pet-foot details[open]{flex-basis:100%;margin-left:0}
.pet details summary{list-style:none;cursor:pointer;font-size:.85rem;color:var(--lasso);font-weight:700;display:flex;align-items:center;gap:6px;min-height:32px}
.pet details summary::-webkit-details-marker{display:none}
.pet details .in{display:grid;gap:4px;font-size:.85rem;color:var(--ink-2);padding-top:4px}
.el{display:inline-block;font-size:.76rem;padding:2px 7px;border-radius:4px;margin:0 3px 3px 0;box-shadow:inset 0 0 0 1px currentColor;white-space:nowrap}
.el.Fire{color:var(--fire)}.el.Water{color:var(--water)}.el.Earth{color:var(--earth)}.el.Nature{color:var(--nature)}.el.Wind{color:var(--wind)}
.el.st{font-weight:700;background:color-mix(in srgb,currentColor 10%,transparent)}

/* Builds */
.style-card .row h3{font-size:1.35rem}
.range{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-3)}
.range i{width:22px;height:8px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.range i.on{background:var(--wood)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;font-size:.92rem}
.chain{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;counter-reset:c}
.chain li{list-style:none;flex:0 0 auto;display:grid;justify-items:center;gap:6px;width:96px;text-align:center;font-size:.8rem;line-height:1.25;position:relative}
.chain li b{font:500 .9rem/1.15 var(--display)}
.chain li::before{counter-increment:c;content:counter(c);position:absolute;top:-4px;left:18px;z-index:1;font:700 .75rem/1 var(--display);background:var(--wood);color:#fff7ea;padding:3px 5px}
.chain li + li::after{content:"";position:absolute;left:-14px;top:22px;width:20px;height:4px;background:repeating-linear-gradient(90deg,var(--wood) 0 4px,transparent 4px 7px)}
.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;position:relative}
.timeline::before{content:"";position:absolute;left:8%;right:8%;top:30px;height:4px;background:repeating-linear-gradient(90deg,var(--wood) 0 8px,transparent 8px 14px)}
.timeline > div{display:grid;justify-items:center;text-align:center;gap:4px;font-size:.82rem;position:relative}
.timeline .lv{font:700 .78rem/1 var(--display);background:var(--ui);color:var(--ui-ink);padding:4px 7px}
.timeline b{font:500 .92rem/1.2 var(--display)}
@media (max-width:640px){.timeline{grid-template-columns:1fr;justify-items:start}.timeline::before{left:30px;right:auto;top:8%;bottom:8%;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--wood) 0 8px,transparent 8px 14px)}.timeline > div{grid-template-columns:48px 1fr;column-gap:14px;row-gap:3px;justify-items:start;text-align:left;align-items:center}.timeline > div .ib{grid-row:span 3}}

/* Tabs */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:3px solid var(--ui)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:0;cursor:pointer;padding:0 14px;height:46px;background:var(--paper);color:var(--ink-2);font:500 .98rem/1 var(--display);box-shadow:inset 0 0 0 1px var(--line)}
.tabs button[aria-selected="true"]{background:var(--ui);color:var(--ui-ink);box-shadow:none}
.tabpanel{padding-top:14px;display:grid;gap:10px}
.scroll{overflow-x:auto;background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
th{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2);position:sticky;top:0}
th.sort{cursor:pointer}
th.sort:hover{color:var(--ink)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
td:first-child,th:first-child{position:sticky;left:0;background:var(--paper);z-index:1}
th:first-child{background:var(--paper-2);z-index:2}
td .nm{display:inline-flex;align-items:center;gap:8px}
.rar{font-weight:700}
.rar.Common{color:var(--common)}.rar.Uncommon{color:var(--uncommon)}.rar.Rare{color:var(--rare)}.rar.Epic{color:var(--epic)}.rar.Legendary{color:var(--legendary)}
.mini{display:inline-block;width:60px;height:8px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);vertical-align:middle;margin-left:8px;position:relative}
.mini::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--c,var(--vine))}
.agrid{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:6px}
.agrid > *{padding:8px;border-radius:6px;font-size:.9rem;min-width:0}
.agrid .h{font:700 .72rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:end}
.agrid .rh{display:flex;align-items:center;gap:6px;font:500 .95rem/1 var(--display)}
.agrid .c{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:2px}
.agrid .c b{font-weight:700}
@media (max-width:560px){.agrid{gap:3px}.agrid > *{padding:5px;font-size:.78rem}.agrid .rh span{display:none}}
.trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.trophy{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:10px 12px;background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.trophy .bub{grid-row:span 2}
.trophy b{font:500 .98rem/1.2 var(--display)}
.trophy span{font-size:.8rem;color:var(--ink-3)}
.trophy.got{box-shadow:inset 0 0 0 2px var(--gold)}

/* FAQ, Ask, footer */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
@media (max-width:760px){.faq{grid-template-columns:1fr}}
.ask textarea{width:100%;min-height:96px;resize:vertical;font:inherit;color:var(--ink);background:var(--paper-2);border:0;box-shadow:inset 0 0 0 2px var(--line);border-radius:6px;padding:12px}
.ask textarea:focus{box-shadow:inset 0 0 0 2px var(--lasso);outline:none}
.answer{white-space:pre-wrap;background:var(--paper-2);border-radius:8px;padding:14px;box-shadow:inset 3px 0 0 var(--lasso)}
.answer:empty{display:none}
.file{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem;color:var(--ink-2)}
.file input{max-width:200px;font-size:.85rem}
footer{background:var(--ui);color:var(--ui-ink-2);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
footer a{color:var(--ui-ink)}
footer h2{color:var(--ui-ink);font-size:1.4rem}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;width:48px;height:48px;border:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.totop.on{opacity:1;pointer-events:auto}
figure{margin:0;display:grid;gap:6px}
figure img{width:100%;display:block;border-radius:6px}
figcaption{font-size:.85rem;color:var(--ink-3)}
.stamp{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--ink-2)}
a.stamp{text-decoration:none}
a.stamp:hover{color:var(--ink);text-decoration:underline}

/* Field notes board: imageboard posts with blog-style threads */
.nb-compose{gap:14px}
.nb-compose form{display:grid;gap:12px}
.nb-types{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.nb-types legend{margin-bottom:6px}
.nb-types label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;cursor:pointer;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line);font:500 .95rem/1 var(--display)}
.nb-types input{position:absolute;opacity:0;width:1px;height:1px}
.nb-types input:checked + span{color:var(--ui-ink)}
.nb-types label:has(input:checked){background:var(--ui);box-shadow:inset 0 0 0 2px var(--ui-rim);color:var(--ui-ink)}
.nb-types label:has(input:focus-visible){outline:3px solid var(--lasso);outline-offset:2px}
.nb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nb-row > label{display:grid;gap:4px;font-size:.85rem;color:var(--ink-2);flex:1 1 200px}
.nb-row input[type=text],.nb-compose textarea,.nb-reply textarea,.nb-reply input{font:inherit;color:var(--ink);background:var(--paper-2);border:0;box-shadow:inset 0 0 0 2px var(--line);border-radius:6px;padding:10px 12px}
.nb-compose textarea{min-height:120px;resize:vertical}
.nb-row input:focus,.nb-compose textarea:focus,.nb-reply textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--lasso)}
.nb-preview img{max-height:160px;border-radius:6px;display:block}
.nb-msg{min-height:1.2em}
.nb-msg.err{color:var(--bloom)}
.nb-note{padding:12px 14px;border-radius:8px;background:var(--paper-2);box-shadow:inset 3px 0 0 var(--gold);font-size:.92rem;color:var(--ink-2)}
.nb-filters button{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:99px;padding:0 12px;height:38px;font-size:.88rem}
.nb-filters button[aria-pressed="true"]{background:var(--ui);color:var(--ui-ink);box-shadow:none}
.nb-filters .n{font-variant-numeric:tabular-nums;opacity:.75}
.nb-feed{display:grid;gap:12px}
.nb-thread{background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow);padding:6px 0}
.nb-post{padding:10px 14px;display:block;scroll-margin-top:90px}
.nb-post > .nb-h{margin-bottom:8px}
.nb-post > .nb-f{margin-top:8px}
.nb-img{margin-bottom:6px}
.nb-post.flash{animation:nbflash 1.6s ease-out}
@keyframes nbflash{0%{background:color-mix(in srgb,var(--lasso) 22%,transparent)}100%{background:transparent}}
.nb-post.is-hidden{opacity:.55}
.nb-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.84rem;color:var(--ink-3)}
.nb-h .nb-name{color:var(--vine);font-weight:700}
.nb-no{font:500 .9rem/1 var(--display);color:var(--ink-2)}
.nb-no a{color:inherit;text-decoration:none}
.nb-no a:hover{color:var(--lasso)}
.nb-type{display:inline-flex;align-items:center;gap:5px;font:700 .7rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:4px}
.nb-type.t-correction{background:color-mix(in srgb,var(--bloom) 14%,transparent);color:var(--bloom)}
.nb-type.t-missing{background:color-mix(in srgb,var(--lasso) 14%,transparent);color:var(--lasso)}
.nb-type.t-idea{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.nb-type.t-art{background:color-mix(in srgb,var(--vine) 15%,transparent);color:var(--vine)}
.nb-status{font:700 .7rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:4px;box-shadow:inset 0 0 0 1px currentColor}
.nb-status.s-added{color:var(--vine)}
.nb-status.s-wontadd{color:var(--ink-3)}
.nb-tog{margin-left:auto;border:0;background:none;cursor:pointer;font:700 .9rem/1 var(--display);color:var(--ink-3);padding:6px;min-width:32px;min-height:32px}
.nb-tog:hover{color:var(--ink)}
.nb-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.nb-body .gt{color:var(--vine)}
.nb-body a.ql{color:var(--lasso);font-weight:700;text-decoration:none}
.nb-img{margin:0;float:left;margin-right:14px;max-width:min(220px,45%)}
.nb-img img{display:block;width:100%;border-radius:6px;cursor:zoom-in;box-shadow:inset 0 0 0 1px var(--line)}
.nb-img.big{float:none;max-width:100%;margin-right:0}
.nb-img.big img{cursor:zoom-out}
.nb-img figcaption{font-size:.75rem}
.nb-clear{clear:both}
.nb-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nb-f button,.nb-f select{font-size:.82rem;min-height:34px;border:0;cursor:pointer;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);border-radius:6px;padding:0 10px;color:var(--ink)}
.nb-replies{margin:0 14px 6px 26px;border-left:3px dashed color-mix(in srgb,var(--wood) 45%,transparent);display:grid}
.nb-replies .nb-post{padding-left:12px}
.nb-more{margin:0 14px 8px 26px}
.nb-reply{margin:4px 14px 10px 26px;display:grid;gap:8px}
.nb-reply textarea{min-height:80px}
.nb-collapsed .nb-body,.nb-collapsed .nb-img,.nb-collapsed .nb-f,.nb-collapsed .nb-replies,.nb-collapsed .nb-more,.nb-collapsed .nb-reply{display:none}
.nb-collapsed .nb-hiddenline{display:block}
.nb-hiddenline{display:none;font-size:.82rem;color:var(--ink-3);padding:0 14px 8px}
.nb-empty{text-align:center;padding:28px 16px;display:grid;justify-items:center;gap:8px;color:var(--ink-2)}
@media (max-width:560px){.nb-img{max-width:40%}.nb-replies,.nb-more,.nb-reply{margin-left:12px}}
[hidden]{display:none!important}
.nb-row > label.file{display:inline-flex;flex:0 1 auto;align-items:center;gap:8px;color:var(--ink-2)}

/* Step footer: stuck and helped taps, and "Add a tip" */
.step-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px dashed var(--line);padding-top:10px}
.no-cm .step-f{display:none}
.tapb{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 8px;border:0;cursor:pointer;border-radius:99px;background:var(--paper-2);color:var(--ink-2);font:500 .85rem/1 var(--body);box-shadow:inset 0 0 0 1px var(--line)}
.tapb .n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.tapb .n:empty{display:none}
.tapb[aria-pressed="true"]{background:color-mix(in srgb,var(--lasso) 18%,var(--paper));color:var(--ink);box-shadow:inset 0 0 0 2px var(--lasso)}
.tapb:disabled{opacity:.55;cursor:default}
.tapb:focus-visible{outline:3px solid var(--lasso);outline-offset:2px}
.step-f .linkbtn{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.rtips{display:grid;gap:8px}
.rtips:empty{display:none}
.rtip{box-shadow:inset 3px 0 0 var(--vine),inset 0 0 0 1px var(--line)}
.rtip .who{color:var(--vine)}
.step .meta .tipc,.step .meta .stuckc{padding:2px 8px 2px 4px;font-size:.75rem}
.step .meta .stuckc{color:var(--bloom)}
@media (max-width:560px){.step .meta .stuckc{display:none}}
.nb-stepline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:8px 10px;border-radius:6px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
#nb-compose{scroll-margin-top:90px}

/* Shrine Riddle Book */
.rb-form .rb-lab{display:grid;gap:4px;font-size:.85rem;color:var(--ink-2)}
.rb-form textarea{font:inherit;color:var(--ink);background:var(--paper-2);border:0;box-shadow:inset 0 0 0 2px var(--line);border-radius:6px;padding:10px 12px;resize:vertical;min-height:84px}
.rb-form textarea:focus,.rb-add input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--lasso)}
.rb-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.rb-list .nb-empty{grid-column:1/-1}
.rb-card{background:var(--paper);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow);padding:14px 16px;display:grid;gap:10px;align-content:start;scroll-margin-top:90px;min-width:0}
.rb-card.is-hidden,.rb-ans li.is-hidden{opacity:.5}
.rb-card.flash{animation:nbflash 1.6s ease-out}
.rb-card > p,.rb-card > .linkbtn{margin:0;justify-self:start}
.rb-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rb-h b{font:500 1.05rem/1.2 var(--display)}
.rb-rhyme{margin:0;padding:12px 14px;border-radius:6px;background:var(--paper-2);box-shadow:inset 3px 0 0 var(--gold);font:500 1.1rem/1.45 var(--display);color:var(--ink)}
.rb-rhyme::before{content:"\201C"}
.rb-rhyme::after{content:"\201D"}
.rb-ans{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rb-ans li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line)}
.rb-food{display:flex;align-items:center;gap:8px;flex:1 1 160px;min-width:0}
.rb-food > span{display:grid;gap:2px}
.rb-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rb-add input{flex:1 1 160px;min-width:0;font:inherit;color:var(--ink);background:var(--paper-2);border:0;box-shadow:inset 0 0 0 2px var(--line);border-radius:6px;padding:0 12px;height:44px}
.rb-add .btn{min-height:44px}
.rb-add .nb-msg{flex-basis:100%;margin:0}
.rb-add .nb-msg:empty{display:none}
#riddles .filters .btn{flex:none}

/* The "/" search */
.srchbtn{display:flex;align-items:center;gap:8px;flex:none;font:500 .95rem/1 var(--display);color:var(--ui-ink);background:var(--ui-2);border:0;box-shadow:inset 0 0 0 2px var(--ui-rim);padding:0 10px;height:40px;cursor:pointer}
.srchbtn kbd{background:transparent;border-color:var(--ui-rim);color:var(--ui-ink-2);font-family:var(--body)}
.srchbtn:focus-visible{outline:3px solid var(--lasso);outline-offset:2px}
@media (max-width:1060px){.srchbtn .lab,.srchbtn kbd{display:none}}
.srch{border:0;padding:0;width:min(640px,calc(100vw - 24px));max-height:min(640px,calc(100dvh - 48px));margin:8vh auto auto;background:var(--paper);color:var(--ink);border-radius:10px;box-shadow:0 0 0 1px var(--line),0 18px 50px rgba(0,0,0,.45);flex-direction:column;overflow:hidden}
.srch[open]{display:flex}
.srch::backdrop{background:rgba(8,12,22,.62)}
.srch-in{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.srch-in .search{flex:1}
.srch-in input::-webkit-search-cancel-button{display:none}
.srch-x{border:0;background:var(--paper-2);color:var(--ink-2);border-radius:6px;padding:0 12px;cursor:pointer;font:inherit;font-size:.85rem;box-shadow:inset 0 0 0 1px var(--line)}
.srch-list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1;overscroll-behavior:contain}
.srch-list li[role=option]{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border-radius:6px;cursor:pointer}
.srch-list li[aria-selected=true]{background:color-mix(in srgb,var(--lasso) 16%,var(--paper));box-shadow:inset 0 0 0 2px var(--lasso)}
.srch-list b{display:block;font-weight:700;line-height:1.3}
.srch-list small{display:block;color:var(--ink-2);font-size:.82rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-list mark{background:color-mix(in srgb,var(--gold) 38%,transparent);color:inherit;border-radius:2px}
.srch-none{padding:18px 12px;color:var(--ink-2)}
.srch-hint{margin:0;padding:8px 14px;border-top:1px solid var(--line)}
.srch-hint kbd{margin-right:2px}
@media (max-width:560px){.srch{margin-top:10px;max-height:calc(100dvh - 20px)}.srch-hint{display:none}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}
.flash{animation:nbflash 1.6s ease-out}

/* Party planner */
.party-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:860px){.party-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.party-slots{grid-template-columns:minmax(0,1fr)}}
.pslot{display:grid;gap:8px;align-content:start;padding:10px;border-radius:8px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.pslot select{width:100%;min-width:0}
.pslot-card{display:grid;gap:8px;min-width:0}
.pslot-card:empty{display:none}
.pslot-card .row{gap:10px}
.jobs{display:flex;flex-wrap:wrap;gap:6px}
.jobs:empty{display:none}
.job{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;padding:2px 9px 2px 4px;border-radius:99px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.party-check{display:grid;gap:14px}
.party-check h4{font-size:1.02rem;margin-bottom:8px}
.pc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px}
.pc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;padding:9px 10px;border-radius:6px;background:var(--paper-2);box-shadow:inset 4px 0 0 var(--c,var(--line)),inset 0 0 0 1px var(--line)}
.pc.ok{--c:var(--vine)}
.pc.learn{--c:var(--gold)}
.pc.no{--c:var(--bloom)}
.pc-s{font:700 .66rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-left:4px;vertical-align:1px}
.pc small{display:block;color:var(--ink-2);font-size:.82rem;line-height:1.4;margin-top:2px}

/* Patch Radar */
.radar-list{display:grid;gap:10px}
.patch .in ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.patch summary .t small{display:block}
.patch .vtag{font:700 .7rem/1 var(--body);letter-spacing:.06em;padding:3px 6px;border-radius:4px;background:color-mix(in srgb,var(--lasso) 16%,transparent);color:var(--lasso);margin-left:6px;vertical-align:2px}
.radar-live{padding:12px 14px;border-radius:8px;background:color-mix(in srgb,var(--gold) 12%,var(--paper));box-shadow:inset 4px 0 0 var(--gold),inset 0 0 0 1px var(--line)}
.radar-live.ok{background:var(--paper);box-shadow:inset 4px 0 0 var(--vine),inset 0 0 0 1px var(--line)}
.since{position:relative;max-width:1180px;margin:10px auto 0;padding:10px 44px 10px 14px;border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:inset 4px 0 0 var(--lasso),inset 0 0 0 1px var(--line),0 3px 0 var(--shadow);font-size:.92rem}
.since-wrap{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.since-wrap{display:grid;gap:8px}
.since .linkbtn{padding:0 2px;min-height:0;font-size:inherit}
.since button.since-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--ink-2);font-size:1.3rem;line-height:1;cursor:pointer;width:36px;height:36px;border-radius:6px}
.since button:hover{background:var(--paper-2)}

/* Wildapedia.com's own pages */
.page{padding-block:20px 56px}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:50;background:var(--paper);color:var(--ink);padding:8px 12px}
.chips a[aria-current="page"]{color:var(--ui-ink);background:rgba(255,255,255,.1)}
.chips a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:3px;background:var(--leaf)}
.crumbs{color:var(--ink-2)}
/* Four links fit beside the brand down to phone width, so keep their words longer than the guide does. */
.top.site .chips a .lab{display:inline}
@media (max-width:720px){.top.site .chips{display:flex;justify-content:flex-start}.top.site .chips a{padding:10px 6px;font-size:.84rem;gap:4px}}
.page tbody th{font:700 1rem/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);background:none;position:static;white-space:normal}
.page thead th{position:static}
.crumbs a{color:var(--ink-2)}
.page h1{font-size:clamp(1.9rem,5vw,3rem)}
.page .h3{font-size:1.2rem}
.page .card table{width:100%;border-collapse:collapse}
.page .card th .i{margin-right:6px;vertical-align:-3px}
.page .scroll{box-shadow:none}
.row-card{grid-template-columns:auto 1fr auto;align-items:center}
@media (max-width:560px){.row-card{grid-template-columns:auto 1fr}.row-card .btn{grid-column:1/-1;justify-self:start}}
.links{line-height:2}
.pgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pcard{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px;background:var(--paper);border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--line),0 3px 0 var(--shadow);text-decoration:none;color:var(--ink)}
.pcard:hover{box-shadow:inset 0 0 0 2px var(--lasso),0 3px 0 var(--shadow)}
.pcard > span:last-child{display:grid;gap:2px;min-width:0}
.rhyme-h1{font-size:clamp(1.7rem,4.6vw,2.6rem)}
.rhyme-h1::before{content:"\201C"}
.rhyme-h1::after{content:"\201D"}
.ans{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ans li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.ans li b{font:500 1.1rem/1.2 var(--display)}
.chatline{margin:0;padding:8px 12px;border-radius:6px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);overflow-wrap:anywhere}
.cmdline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cmdline code{flex:1 1 280px;min-width:0;padding:10px 12px;overflow-wrap:anywhere;white-space:normal}
footer .col p{margin:0}