:root{
  /* Softened for long sessions: the ground is lifted off black and the ink
     settled, so body text sits near 9:1 instead of a glaring 13:1. */
  --bg:#1b1815; --panel:#221e1a; --panel2:#2a251f; --line:#3d362d; --line2:#2e2823;
  --text:#c6bdb0; --muted:#99907f; --gold:#b8a478; --golddim:#9a8a5c;
  --uniq:#b8a478; --danger:#b0564a; --field:#1c1814;
  /* The one cool colour, taken from the sapphire in the logo and lifted until
     it sits at gold's weight rather than above it. Reserved for the single
     call to action: on an all-warm page it reads as different, not louder. */
  --join:#8fbcd9; --joinfill:#1e2c3a;
  /* The game colours uniques gold and sets green. Its own values are
     #C7B377 and #00FF00; the gold is already ours, muted, and the green is
     lifted to sit at the same weight so the pair differs by hue, not volume. */
  --set:#6bbd76;
  /* Outline of a piece not yet found. Light enough to be seen on every
     ground it sits on (3.3:1), while the fill is what says "found". */
  --empty:#7f7462;
}

*{ box-sizing:border-box }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  padding:28px 16px 80px;
}

.wrap{ max-width:940px; margin:0 auto }

h1,h2,h3,h4{ font-family:Georgia,"Times New Roman",serif; font-weight:600; margin:0 }
h1{ font-size:30px; color:var(--gold); letter-spacing:.5px }
h2{ font-size:22px }
h3{ font-size:17px; color:var(--gold) }
h4{ font-size:13px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); font-family:inherit }
.sub{ color:var(--muted); margin:6px 0 0; font-size:14px }
.hint{ color:var(--muted); font-size:12px; margin:0 }
.previous{ font-size:13px; color:var(--muted); margin:6px 0 0 }
.kicker{ font-size:11px; text-transform:uppercase; letter-spacing:1.6px; color:var(--golddim) }
.muted{ color:var(--muted) }
.empty{ color:var(--muted); font-size:13px; font-style:italic; margin:10px 0 }

/* header + stats */
header.top{ padding-bottom:4px }
.nav{ display:flex; gap:2px; margin:14px 0 22px; border-bottom:1px solid var(--line2) }
.nav a{ padding:8px 14px; color:var(--muted); text-decoration:none; font-size:14px;
  border-bottom:2px solid transparent; margin-bottom:-1px }
.nav a:hover{ color:var(--text) }
.nav a.on{ color:var(--gold); border-bottom-color:var(--golddim) }
.nav .navright{ margin-left:auto; display:flex; align-items:center; gap:2px }
.nav .navright form{ margin:0 }
button.linkish{ background:none; border:none; color:var(--muted); font-size:14px; padding:8px 12px }
button.linkish:hover{ color:var(--text); border:none }
/* narrow single-column pages: title, then one card (sign in, sign up, password) */
.wrap.authpage{ max-width:392px }
.authpage .top{ text-align:center; padding-bottom:0; margin-top:3vh }
.authpage .nav{ justify-content:center }
.authpage .top h1{ font-size:26px }
.authpage .card{ padding:24px 22px; margin-top:22px }
.authpage .card h3{ font-size:19px }
.authpage .card .sub{ margin-top:4px }
form.stacked{ margin-top:18px }
form.stacked .field{ margin-bottom:14px }
form.stacked .field span{ display:block }
form.stacked input[type=submit]{ width:100%; margin-top:4px; padding:10px 12px }
.alt{ margin:18px 0 0; padding-top:15px; border-top:1px solid var(--line2);
  font-size:13px; color:var(--muted); text-align:center }
.alt a{ color:var(--gold); text-decoration:none }
.alt a:hover{ text-decoration:underline }
.alt .dot{ padding:0 6px; color:var(--line) }
select{ font:inherit; background:var(--field); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:8px 10px; width:100% }
.formerror{ color:#d9a79c; font-size:13px; margin:0 0 14px; padding:9px 11px;
  background:#2e201c; border:1px solid var(--danger); border-radius:6px }
/* One block per character, its sharing nested inside it: two rows side by side
   in a flat list read as four unrelated bars. */
ul.charlist{ list-style:none; margin:14px 0; padding:0; display:grid; gap:18px }
li.charcard{ padding:12px 14px; background:var(--panel2);
  border:1px solid var(--line2); border-left:3px solid var(--line2); border-radius:6px }
li.charcard.on{ border-color:var(--golddim); border-left-color:var(--gold); background:#272117 }
.charhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.charhead .charname{ color:var(--gold); font-family:Georgia,serif; font-size:17px; margin-right:10px }
.characts{ display:flex; align-items:center; gap:8px }

.sharebox{ margin-top:12px; padding:10px 11px; border:1px solid var(--line2);
  border-radius:6px; background:var(--panel) }
.sharebox.off{ border-style:dashed; background:none }
.sharebox .kicker{ display:block; margin-bottom:6px }
.sharebox .hint{ margin:0 0 8px }
.sharebtns{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px }
.sharebtns .quiet{ margin-left:auto }
/* .sm was used by the markup but never defined; a link styled as one has to
   match the buttons beside it exactly. */
button.sm, input[type=submit].sm{ padding:5px 10px; font-size:12px }
a.sm{ display:inline-block; padding:5px 10px; font-size:12px; line-height:normal;
  text-decoration:none; border:1px solid var(--line); border-radius:6px;
  background:var(--panel2); color:var(--text); transition:.12s }
a.sm:hover{ border-color:var(--golddim); color:var(--gold) }
button.sm.quiet{ color:var(--muted); border-color:var(--line2) }
button.sm.quiet:hover{ color:var(--danger); border-color:var(--danger) }
.sharebtns .pushright{ margin-left:auto }
input.shareurl{ width:100%; font-size:13px; color:var(--gold) }
@media (max-width:520px){ .sharebtns .pushright{ margin-left:0 } }
.hero{ padding:5vh 0 24px }
.hero h1{ font-size:clamp(26px, 5vw, 36px); line-height:1.15; color:var(--gold); margin:8px 0 0; max-width:22ch }
.hero .rule{ font-size:16px; line-height:1.55; color:var(--text); margin:16px 0 0; max-width:58ch }
.hero .rule em{ color:var(--uniq); font-style:normal }
.hero .who{ color:var(--muted); font-size:14px; margin:18px 0 0 }
.hero .who strong{ color:var(--uniq); font-weight:400 }
.joinbox{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.joinbox .joincopy{ flex:1; min-width:230px }
.joinbox h3{ margin:0 }
a.joinbtn{ display:inline-block; background:var(--joinfill); border:1px solid var(--join); color:var(--join);
  font-weight:600; text-decoration:none; padding:11px 20px; border-radius:6px; white-space:nowrap }
a.joinbtn:hover{ background:#26374a }
.sharefoot{ text-align:center; color:var(--muted); font-size:13px; margin:24px 0 0 }
.sharefoot a{ color:var(--gold) }
.card.start{ text-align:left }
.latest dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; margin:14px 0 0 }
.latest dl > div{ background:var(--panel2); border:1px solid var(--line2); border-radius:6px; padding:9px 11px }
.latest dt{ font-size:11px; text-transform:uppercase; letter-spacing:1.1px; color:var(--muted); margin-bottom:4px }
.latest dd{ margin:0; font-size:15px }
.latest dd.item{ color:var(--uniq) }
.latest .sub{ margin-top:12px }
.badge{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--gold);
  border:1px solid var(--golddim); border-radius:20px; padding:2px 8px; white-space:nowrap }
.alsofound{ font-size:13px; color:var(--uniq); padding:4px 8px 0 }
ol.repeated{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px }
ol.repeated li{ display:flex; align-items:baseline; gap:10px; padding:8px 10px;
  background:var(--panel2); border:1px solid var(--line2); border-radius:6px }
ol.repeated .rank{ font-family:Georgia,serif; font-size:13px; color:var(--golddim); min-width:14px }
ol.repeated .dupname{ flex:1; color:var(--uniq) }
ol.repeated .count{ font-family:Georgia,serif; color:var(--muted) }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:14px }
.stat{ background:var(--panel); border:1px solid var(--line2); border-radius:8px; padding:10px 12px }
.stat b{ display:block; font-size:22px; font-family:Georgia,serif; color:var(--gold); line-height:1.2 }
.stat span{ font-size:11px; text-transform:uppercase; letter-spacing:1.1px; color:var(--muted) }

/* cards */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:18px }
.card.current{ border-color:var(--golddim); box-shadow:0 10px 26px -22px rgba(0,0,0,.7) }
.chead{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px }
.sect{ border-top:1px solid var(--line2); margin-top:18px; padding-top:16px }

/* run counter */
.grid{ display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:start }
.runner{ background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:16px; text-align:center }
.big{ font-family:Georgia,serif; font-size:52px; line-height:1; color:var(--gold) }
.runner .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin-top:4px }
.rowbtns{ display:flex; gap:8px; margin-top:14px }
.rowbtns .grow{ flex:1 }
.rowbtns .grow button{ width:100% }

/* buttons */
button, input[type=submit]{
  font:inherit; cursor:pointer; border-radius:6px; padding:8px 12px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); transition:.12s;
}
button:hover, input[type=submit]:hover{ border-color:var(--golddim); color:var(--gold) }
button.primary, input[type=submit].primary{ background:#322a1e; border-color:var(--golddim); color:var(--gold); font-weight:600 }
button.primary:hover, input[type=submit].primary:hover{ background:#3b3224 }
input[type=submit].gold{ background:#362e20; border-color:var(--golddim); color:var(--gold); font-weight:600 }
button.x, a.x{ padding:2px 8px; text-decoration:none; font-size:14px; border-color:transparent; background:none; color:var(--muted); line-height:1.4 }
button.x:hover, a.x:hover{ color:var(--danger); border-color:transparent }
.key{ display:inline-block; margin-left:6px; font-size:10px; border:1px solid var(--golddim); border-radius:3px; padding:0 4px; opacity:.7 }

/* button_to renders a form; keep it from breaking layouts */
form.button_to{ display:inline }

/* fields */
input[type=text], input[type=number], input[type=email], input[type=password],
input[type=search], input[type=tel], input[type=url], select{
  font:inherit; background:var(--field); color:var(--text);
  border:1px solid var(--line); border-radius:6px; padding:8px 10px; width:100%;
}
input:focus, select:focus{ outline:none; border-color:var(--golddim) }
.field label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:1.1px; color:var(--muted); margin-bottom:5px }
.field{ margin-bottom:8px }

form.inline{ display:grid; grid-template-columns:1fr 90px auto; gap:8px; margin-top:12px }
form.drop{ margin-top:10px }
.dropfields{ display:grid; gap:8px }
.droprow{ display:flex; gap:8px; margin-top:8px }
td.exits .item{ padding:2px 0 }   /* colour comes from .item / .item.set */
.typeahead{ position:relative }
ul.suggestions{ position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); margin:0; padding:4px;
  list-style:none; background:var(--panel2); border:1px solid var(--golddim); border-radius:6px;
  box-shadow:0 14px 28px -18px rgba(0,0,0,.7); max-height:240px; overflow-y:auto }
ul.suggestions[hidden]{ display:none }
ul.suggestions li{ padding:6px 8px; border-radius:4px; cursor:pointer; font-size:14px; color:var(--uniq) }
ul.suggestions li:hover, ul.suggestions li.on{ background:#342c1f }
/* naming a zone, then choosing how to record it */
form.newzone{ display:grid; gap:10px; margin:12px 0 10px }
.twoways{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.twoways input[type=submit], .twoways button{ width:100% }

/* writing up a zone that is already finished */
form.logcleared{ margin-top:4px }
.zonefacts{ display:grid; grid-template-columns:1fr 120px; gap:10px }
.zonefacts input[type=number]{ text-align:center }
.loggedrows{ display:grid; gap:8px }
.loggedrow{ display:grid; grid-template-columns:82px 1fr auto; gap:8px; align-items:center }
.loggedrow input.run{ text-align:center }
.exitbox{ display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer;
  font-size:12px; color:var(--muted); padding:0 2px }
.exitbox input{ accent-color:var(--golddim); width:auto; margin:0 }
.exitbox:hover{ color:var(--gold) }
@media (max-width:660px){
  .twoways{ grid-template-columns:1fr }
  .zonefacts{ grid-template-columns:1fr }
  .loggedrow{ grid-template-columns:72px 1fr }
  .exitbox{ grid-column:1 / -1 }
}

/* duplicates */
ul.dropslist{ list-style:none; margin:10px 0; padding:0 }
ul.dropslist li{ display:flex; align-items:center; gap:8px; padding:5px 8px; border:1px solid var(--line2); border-radius:6px; background:var(--panel2); margin-bottom:6px }
.dropform{ flex:1; display:grid; grid-template-columns:auto 62px 1fr; gap:8px; align-items:center }
.dropform input{ padding:4px 8px; font-size:14px }
.runlabel{ font-family:Georgia,serif; color:var(--muted); font-size:13px }
.runnum{ text-align:center; color:var(--muted) }
.dropform.static .runnum{ font-family:Georgia,serif; font-size:13px }
.item{ flex:1; color:var(--uniq) }
.item.set{ color:var(--set) }

/* history */
.scroll{ overflow-x:auto; margin-top:12px }
table{ width:100%; border-collapse:collapse; font-size:14px }
th{ text-align:left; font:600 11px/1 "Segoe UI",sans-serif; text-transform:uppercase; letter-spacing:1.1px; color:var(--muted); padding:0 8px 8px; border-bottom:1px solid var(--line) }
td{ padding:6px 8px; border-bottom:1px solid var(--line2); vertical-align:middle }
td input{ padding:5px 7px; font-size:14px }
td.rowactions{ width:74px; white-space:nowrap }
td.n{ width:40px; color:var(--muted); font-family:Georgia,serif }
td.num{ width:90px } td.mf{ width:96px } td.dropsmenu{ position:relative; width:64px }
td.dropsmenu summary{ display:inline-block; cursor:pointer; list-style:none; font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:20px; padding:1px 10px }
td.dropsmenu summary::-webkit-details-marker{ display:none }
td.dropsmenu summary::marker{ content:"" }
td.dropsmenu summary:hover, td.dropsmenu details[open] summary{ color:var(--gold); border-color:var(--golddim) }
.dropspanel{ position:absolute; z-index:30; right:0; top:calc(100% + 6px); width:min(520px, 72vw);
  background:var(--panel2); border:1px solid var(--golddim); border-radius:8px; padding:10px 12px;
  box-shadow:0 16px 32px -18px rgba(0,0,0,.75); text-align:left }
.dropspanel .panelhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px }
.dropspanel .kicker{ margin:0 }
.dropspanel ul.dropslist{ margin:0 }
/* the table only needs to scroll when it cannot fit; letting it be visible on
   wide screens keeps the drops panel from being clipped by the scroll box */
@media (min-width:900px){ .scroll{ overflow:visible } }

/* flash */
.flash{ border-radius:6px; padding:10px 14px; margin-bottom:18px; font-size:14px; border:1px solid var(--golddim); background:#2e2719; color:var(--gold) }
.flash.alert{ border-color:var(--danger); background:#2e201c; color:#d9a79c }

@media (max-width:660px){
  .grid{ grid-template-columns:1fr }
  form.inline{ grid-template-columns:1fr 90px }
  form.inline input[type=submit]{ grid-column:1 / -1 }
  .droprow{ flex-direction:column }
}

/* one item's chronicle */
.chronicle h2.item{ margin:0 }
.headline{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:18px 0 20px;
  text-align:center }
.headline .big{ display:block; font-size:30px; line-height:1.1; color:var(--gold) }
.headline .lbl{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:1.1px;
  color:var(--muted); margin-top:4px }

/* A tick per zone, played left to right: a stub where nothing fell, a bar
   where it did, full height where it fell more than once. */
.strip{ display:flex; align-items:flex-end; gap:1px; height:34px; overflow-x:auto;
  padding:0 1px; background:var(--panel2); border:1px solid var(--line2); border-radius:6px }
.tick{ flex:1 1 0; min-width:2px; height:28%; background:var(--line); border-radius:1px }
.tick.on{ height:62%; background:var(--gold) }
.tick.many{ height:100% }
.tick.open{ background:var(--join) }
.striplabel{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted);
  margin:6px 2px 20px }
.striplabel .mark{ color:var(--golddim) }

dl.chron{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; align-items:baseline }
dl.chron dt{ font-size:11px; text-transform:uppercase; letter-spacing:1.1px; color:var(--muted) }
dl.chron dd{ margin:0; font-size:14px }
dl.chron strong{ color:var(--gold); font-weight:600 }
.chainlist{ display:block; font-size:12px; color:var(--muted); margin-top:3px }

/* the short version, on stats and the shared page */
.nemehead{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:12px 0 10px; flex-wrap:wrap }
.nemename a{ text-decoration:none; border-bottom:1px dotted var(--line) }
.nemename a:hover{ border-bottom-color:var(--golddim) }
.nemerank{ font-size:12px; color:var(--muted); white-space:nowrap }
.nemefacts{ margin:0; font-size:14px; color:var(--muted) }
.nemefacts strong{ color:var(--gold); font-weight:600 }
.nemesis .striplabel{ margin-bottom:12px }
@media (max-width:660px){
  .headline{ grid-template-columns:1fr; gap:14px }
  dl.chron{ grid-template-columns:1fr; gap:2px 0 }
  dl.chron dd{ margin-bottom:10px }
}

/* the set board: the whole collection at once, a tile per set */
.progress{ height:8px; border-radius:4px; background:var(--panel2);
  border:1px solid var(--line2); overflow:hidden }
.progress span{ display:block; height:100%; background:var(--set); border-radius:3px }

ul.board{ list-style:none; margin:10px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)); gap:10px }
.settile{ display:flex; flex-direction:column; gap:8px; padding:10px 11px;
  border:1px solid var(--line2); border-radius:8px; background:var(--panel2) }
.tname{ font-size:13px; line-height:1.35 }
.tnote{ font-size:11px; color:var(--muted); margin-top:auto }
.tnote.done{ color:var(--set); text-transform:uppercase; letter-spacing:1.1px }
.tnote.need{ color:var(--gold) }

/* The game paints set items green; a finished set earns the same. */
.settile.done{ border-color:var(--set); background:#20291f }

/* One segment per piece, equal width, so pieces stay countable and every
   tile's bar lines up with its neighbours. */
.dots{ display:flex; gap:3px; height:8px }
.dot{ flex:1 1 0; border-radius:2px; background:none;
  box-shadow:inset 0 0 0 1px var(--empty) }
.dot.got{ background:var(--set); box-shadow:none }

ul.board.faint .settile{ background:none; border-style:dashed }
ul.board.faint .tname{ color:var(--muted) }
ul.board.faint{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) }

.setsum .nemefacts + .nemefacts{ margin-top:4px }
.setsum .progress{ margin:10px 0 4px }
details.setgroup{ margin-top:14px }
details.setgroup > summary{ cursor:pointer; list-style:none; font-size:11px;
  text-transform:uppercase; letter-spacing:1.1px; color:var(--muted);
  padding:4px 0; border-bottom:1px solid var(--line2) }
details.setgroup > summary::-webkit-details-marker{ display:none }
details.setgroup > summary::before{ content:"\25B8"; display:inline-block;
  margin-right:7px; transition:transform .12s ease }
details.setgroup[open] > summary::before{ transform:rotate(90deg) }
details.setgroup > summary:hover{ color:var(--gold) }
details.setgroup > summary:focus-visible{ outline:1px solid var(--golddim); outline-offset:2px }
@media (max-width:480px){ ul.board, ul.board.faint{ grid-template-columns:1fr 1fr } }

/* Contents worth reading: each entry carries its section's figure. Two
   columns, filled top to bottom, so nine entries take five lines. */
nav.contents ul{ list-style:none; margin:12px 0 0; padding:0; columns:2; column-gap:26px }
nav.contents li{ break-inside:avoid }
nav.contents a{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:5px 7px; border-radius:5px; text-decoration:none; transition:.12s }
nav.contents a:hover{ background:var(--panel2) }
nav.contents a:hover .clabel{ color:var(--gold) }
.clabel{ font-size:14px; color:var(--text) }
.cfigure{ font-size:13px; color:var(--gold); white-space:nowrap }
@media (max-width:560px){ nav.contents ul{ columns:1 } }

/* An anchored section should not start hard against the viewport edge. */
[id="latest_zone"], [id="totals"], [id="most_duplicated"], [id="nemesis"], [id="sets"],
[id="toughest_zones"], [id="worst_zone"], [id="busiest_run"], [id="cleared_zones"]{
  scroll-margin-top:16px }

@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth } }