/* FreeGoldPips — mineral ground, bottle-green ink, brass for the one thing that matters: the clock track. */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ground: #E7EBE4;
  --surface: #F5F7F2;
  --ink: #12241D;
  --muted: #56685E;
  --line: #C3CCC3;
  --brass: #9A6A12;
  --brass-hi: #DDA933;
  --closed: #A1382A;
  --ok: #276343;
  --radius: 4px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0D1814; --surface: #13221C; --ink: #E3E9E2; --muted: #94A69B;
    --line: #2A3C34; --brass: #E3B242; --brass-hi: #F0C65E; --closed: #E0786A; --ok: #7BC79B;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.55;
}
a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
h1, h2 { line-height: 1.15; font-stretch: 112%; font-weight: 720; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 5vw, 2.25rem); }
h2 { font-size: 1.3rem; }
small { color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }

/* ---------- Header ---------- */
.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  max-width: 720px; margin: 0 auto; padding: 1.1rem 16px .9rem;
}
.mark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 800; font-stretch: 125%; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.01em;
}
.mark .bar {
  width: 22px; height: 14px; background: var(--brass-hi);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.top nav { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .98rem; }
.top nav a { text-decoration: none; color: var(--muted); padding: .2rem 0; border-bottom: 2px solid transparent; }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass-hi); }

main { max-width: 720px; margin: 0 auto; padding: 0 16px 3rem; }
.flash {
  margin: .5rem 0 1rem; padding: .7rem .9rem; border-left: 4px solid var(--ok);
  background: var(--surface);
}

/* ---------- Play stage ---------- */
.stage { padding: 1.5rem 0 2rem; }
.quote-label { margin: 0; color: var(--muted); font-size: .95rem; }
.quote-price {
  margin: .1rem 0 0; font-weight: 780; font-stretch: 125%;
  font-size: clamp(3rem, 14vw, 5.6rem); line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.quote-sub { margin: .4rem 0 0; color: var(--muted); font-size: .95rem; }

/* The round track: the full round drawn to scale, a brass entry window and a needle for "now". */
.track { margin: 2.2rem 0 .6rem; --entry-share: 33.333%; }
.track-bar {
  position: relative; height: 20px; display: flex;
  border: 1px solid var(--ink); border-radius: 2px;
}
.seg { display: block; height: 100%; }
.seg-entry { width: var(--entry-share); background: var(--brass-hi); border-right: 1px solid var(--ink); transition: background-color .4s; }
.seg-wait {
  flex: 1;
  background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--ink) 14%, transparent) 6px 7px);
}
.track[data-phase="waiting"] .seg-entry { background: color-mix(in srgb, var(--brass-hi) 35%, var(--surface)); }
.needle {
  position: absolute; top: -9px; bottom: -9px; left: 0; width: 3px; margin-left: -1.5px;
  background: var(--ink);
}
.needle::before {
  content: ''; position: absolute; top: -7px; left: 50%; width: 11px; height: 11px;
  background: var(--ink); transform: translateX(-50%) rotate(45deg);
}
.track-legend {
  display: grid; grid-template-columns: var(--entry-share) 1fr;
  margin-top: .55rem; font-size: .85rem; color: var(--muted); text-align: center;
}
.track[data-phase="entries"] .track-legend span:first-child,
.track[data-phase="waiting"] .track-legend span:last-child { color: var(--ink); font-weight: 650; }

.clock { margin: 1.2rem 0 1.4rem; font-size: 1.15rem; }
.clock strong {
  font-stretch: 125%; font-weight: 760; font-size: 1.6rem; font-variant-numeric: tabular-nums; margin-left: .25rem;
}
.track[data-phase="waiting"] ~ .clock strong { color: var(--muted); }

.predict label { display: block; font-weight: 600; margin-bottom: .45rem; }
.predict-row {
  display: flex; align-items: stretch; border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.predict-row:focus-within { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.dollar { display: flex; align-items: center; padding: 0 .1rem 0 .9rem; font-size: 1.6rem; font-weight: 700; font-stretch: 125%; color: var(--muted); }
.predict-row input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 1.6rem; font-weight: 700; font-stretch: 125%; font-variant-numeric: tabular-nums;
  padding: .6rem .5rem;
}
.predict-row input:focus { outline: none; }
.form-msg { min-height: 1.5em; margin: .5rem 0 0; font-size: .95rem; }
.form-msg[data-ok="1"] { color: var(--ok); }
.form-msg[data-ok="0"] { color: var(--closed); }

.my-entries { list-style: none; padding: 0; margin: .8rem 0 0; }
.my-entries li {
  display: flex; align-items: baseline; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line);
}
.my-entries li:last-child { border-bottom: 1px solid var(--line); }
.my-entries strong { font-stretch: 125%; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.my-entries em { margin-left: auto; font-style: normal; color: var(--ok); font-size: .9rem; }
.bonus-note { color: var(--muted); font-size: .95rem; margin: .8rem 0 0; }
.prize { margin: 1.5rem 0 0; font-weight: 600; }
.signin-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }

/* ---------- Buttons & forms ---------- */
.btn {
  display: inline-block; border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--ink); color: var(--ground); font: inherit; font-weight: 700;
  padding: .75rem 1.2rem; text-decoration: none;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 85%, var(--brass)); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-lock { border-radius: 0; padding: 0 1.3rem; white-space: nowrap; }
.btn-quiet { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-quiet:hover { background: var(--surface); }

.form { display: grid; gap: 1rem; margin-top: 1rem; }
.form label { display: grid; gap: .3rem; font-weight: 600; }
.form label small { font-weight: 400; }
.form input:not([type="checkbox"]) {
  font: inherit; padding: .65rem .75rem; border: 1px solid var(--muted); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.form .check { display: flex; align-items: center; gap: .55rem; font-weight: 400; }
.form .check input { width: 1.15rem; height: 1.15rem; accent-color: var(--ink); }
.errors { color: var(--closed); border-left: 4px solid var(--closed); padding: .4rem .9rem; background: var(--surface); }
.errors p { margin: .2rem 0; }
.note { border-left: 4px solid var(--brass-hi); padding: .4rem .9rem; background: var(--surface); }

/* ---------- Panels & content ---------- */
.panel { padding: 1.6rem 0; border-top: 1px solid var(--line); }
main > .panel:first-of-type, .stage + .panel { border-top: 0; }
.narrow { max-width: 440px; }
.lede { color: var(--muted); margin-top: 0; }
.aside { margin-top: 1.4rem; color: var(--muted); }
.crumbs { margin: 0 0 .3rem; font-size: .95rem; }

.last { padding: 1.6rem 0; border-top: 2px solid var(--ink); }
.last-grid, .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.last-grid dt, .facts dt { color: var(--muted); font-size: .88rem; }
.last-grid dd, .facts dd { margin: .1rem 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.last-grid dd { font-stretch: 115%; font-size: 1.2rem; }
.my-place { font-weight: 600; }
.last-line { font-weight: 650; }

.how { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.how ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.how li { margin-bottom: .6rem; }
.how li::marker { font-weight: 800; font-stretch: 125%; color: var(--brass); }

.table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: .85rem; padding: .5rem .6rem .5rem 0; border-bottom: 2px solid var(--ink); }
.tbl td { padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tbl .num { text-align: right; }
.tbl tr.is-me td { background: color-mix(in srgb, var(--brass-hi) 22%, transparent); }
.pager { display: flex; gap: 1.5rem; }

.wins { padding: 0; list-style: none; counter-reset: w; margin: 0; }
.wins li { display: flex; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); counter-increment: w; }
.wins li::before { content: counter(w); color: var(--muted); width: 1.6rem; }
.wins strong { margin-left: auto; font-stretch: 125%; }

.hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; word-break: break-all;
  padding: .7rem .9rem; background: var(--surface); border-left: 4px solid var(--brass-hi); }
.canon { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; max-height: 260px; overflow: auto;
  padding: .8rem; background: var(--surface); border: 1px solid var(--line); white-space: pre; }
.verify-out[data-ok="1"] { color: var(--ok); font-weight: 600; }
.verify-out[data-ok="0"] { color: var(--closed); font-weight: 600; }

.invite { display: flex; gap: .5rem; margin: 1rem 0; }
.invite input { flex: 1; min-width: 0; font: inherit; font-size: .95rem; padding: .65rem .75rem; border: 1px solid var(--muted);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.refs { list-style: none; padding: 0; margin: 0; }
.refs li { display: flex; gap: 1rem; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.refs em { font-style: normal; color: var(--muted); font-size: .92rem; text-align: right; }

.prose { max-width: 66ch; }
.prose h2 { margin-top: 1.6rem; }
.draft-note { border-left: 4px solid var(--closed); padding: .4rem .9rem; background: var(--surface); }

.foot { max-width: 720px; margin: 0 auto; padding: 1.5rem 16px 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.foot p { margin: .3rem 0; }

@media (max-width: 480px) {
  .btn-lock { padding: 0 .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}