:root{
  --bg:#0E1411; --panel:#151E19; --panel2:#1A2620;
  --felt:#1C4A38; --felt-dk:#123227;
  --bone:#ECE5D4; --bone-dim:#B9B3A3; --bone-mute:#7E8880;
  --brass:#C2A24E; --brass-hi:#E0C173; --brass-lo:#8E7434;
  --clay:#BB5A43; --jade:#5FB98B;
  --line:rgba(236,229,212,.10);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--bone); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding:0 0 64px; min-height:100vh;
}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
header{padding:56px 0 8px;text-align:center}
.chip{
  width:60px;height:60px;margin:0 auto 22px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--felt),var(--felt-dk));
  border:2.5px solid var(--brass); position:relative;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.chip::after{
  content:"";position:absolute;inset:11px;border-radius:50%;
  border:1.5px solid rgba(236,229,212,.55);
}
h1{
  font-family:var(--serif); font-weight:600; font-size:2.6rem;
  margin:0 0 6px; letter-spacing:-.02em; line-height:1.1;
}
.tag{color:var(--brass);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 26px}
.creed{
  color:var(--bone-dim); font-size:1.02rem; max-width:34rem; margin:0 auto;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0;
}
.creed b{color:var(--bone);font-weight:600}
h2{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-mute);
  margin:44px 0 14px; font-weight:500;
}
a.game{
  display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brass-lo);
  border-radius:10px; padding:18px 20px; margin-bottom:12px;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
a.game:hover,a.game:focus-visible{
  background:var(--panel2); border-left-color:var(--brass-hi);
  transform:translateX(2px); outline:none;
}
.gname{font-family:var(--serif);font-size:1.32rem;font-weight:600;margin:0 0 5px}
.glesson{color:var(--bone-dim);font-size:.93rem;margin:0 0 13px}
.gstats{display:flex;flex-wrap:wrap;gap:7px}
.stat{
  font-family:var(--mono); font-size:.72rem; padding:3px 9px;
  border-radius:4px; background:rgba(236,229,212,.05);
  border:1px solid var(--line); color:var(--bone-dim); white-space:nowrap;
}
.stat.good{color:var(--jade);border-color:rgba(95,185,139,.3)}
.stat.bad{color:var(--clay);border-color:rgba(187,90,67,.3)}
.stat.gold{color:var(--brass-hi);border-color:rgba(194,162,78,.35)}
.soon{opacity:.62;border-left-color:var(--bone-mute);cursor:default}
.soon:hover{transform:none;background:var(--panel);border-left-color:var(--bone-mute)}
.note{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; color:var(--bone-dim); font-size:.9rem; margin-top:14px;
}
.note b{color:var(--bone)}
footer{
  margin-top:46px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--bone-mute); font-size:.8rem; text-align:center;
}
footer a{color:var(--brass);text-decoration:none}
footer a:hover{text-decoration:underline}
.rg{margin-top:12px;font-size:.78rem}
@media(max-width:520px){
  header{padding-top:38px}
  h1{font-size:2.1rem}
  .wrap{padding:0 16px}
}

/* ---- added for the rebuilt menu ---- */

/* the overall line at the top: what you have done across every game */
.tally{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin:0 0 26px;
}
.tally .t{text-align:center}
.tally .tv{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--brass-hi);line-height:1}
.tally .tl{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-mute);margin-top:6px}
.tally .tv.none{color:var(--bone-mute);font-size:1.1rem}
.tally-note{color:var(--bone-mute);font-size:.84rem;margin:-18px 0 26px;text-align:center}

/* per-game progress, under the stat pills */
.gprog{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--bone-mute);
}
.gprog b{font-family:var(--mono);color:var(--bone);font-weight:600}
.gprog .fresh{color:var(--bone-mute);font-style:italic}
.gprog .leaks{color:var(--clay)}
.gprog .done{color:var(--jade)}

/* a small ring showing today's reps against today's goal */
.gring{width:26px;height:26px;flex:none;transform:rotate(-90deg)}
.gring circle{fill:none;stroke-width:4}
.gring .bg{stroke:var(--line)}
.gring .fg{stroke:var(--brass);stroke-linecap:round}
.gring .fg.met{stroke:var(--jade)}

/* which games have been rebuilt, and which are still the originals */
.gbadge{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;margin-left:8px;vertical-align:middle;
  border:1px solid;font-weight:600;
}
.gbadge.built{color:var(--jade);border-color:rgba(95,185,139,.35);background:rgba(95,185,139,.08)}
.gbadge.original{color:var(--bone-mute);border-color:var(--line)}
.groupnote{color:var(--bone-mute);font-size:.86rem;margin:-10px 0 16px;line-height:1.55}

/* "Start here" — the original markup used this class and nothing ever
   defined it, so the recommendation rendered as plain text next to the
   game's name. */
.startpill{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;padding:3px 8px;border-radius:5px;margin-left:8px;vertical-align:middle;
  color:#1a1408;background:var(--brass);
}
a.game.start{
  border-color:rgba(194,162,78,.4);
  background:linear-gradient(180deg,rgba(194,162,78,.07),var(--panel) 120px);
}