/* ============================================================
   Roll to Run Club — styles
   Theme: obsidian + brass, tavern-at-night, not costume-shop
   ============================================================ */

:root{
  --bg:        #0f0d0c;
  --bg-2:      #15120f;
  --panel:     #1a1613;
  --line:      #2b241d;
  --ink:       #ece3d4;   /* parchment */
  --ink-dim:   #a29684;
  --ink-faint: #6d6357;
  --ink-soft:  #8a7f6f;   /* flavour text: quiet, but not a whisper */
  --gold:      #c9a24a;
  --gold-hi:   #e6c477;
  --strava:    #fc4c02;
  --serif: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

/* The hidden attribute must always win over our own display rules. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:70px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* faint vignette + parchment grain */
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(201,162,74,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 105%, rgba(201,162,74,.05), transparent 60%);
  background-attachment:fixed;
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:720px; }
.center{ text-align:center; }
.section{ padding:96px 0; border-top:1px solid var(--line); }
.section-hero{ padding-top:120px; border-top:0; }

/* ---------- top nav (deliberately quiet) ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:rgba(15,13,12,.78);
  border-bottom:1px solid rgba(43,36,29,.8);
}
.topbar-inner{
  max-width:1080px; margin:0 auto; padding:0 24px;
  height:56px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.wordmark{
  font-family:var(--serif); font-weight:600; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; opacity:.9;
}
.wordmark:hover{ color:var(--gold-hi); }
.nav{ display:flex; gap:22px; }
.nav a{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none; font-weight:500;
  transition:color .18s ease;
}
.nav a:hover, .nav a.is-active{ color:var(--gold); }

/* ---------- type ---------- */
.display{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(38px, 7vw, 68px); line-height:1.06;
  letter-spacing:.005em; margin:0 0 20px; color:var(--gold);
}
.heading{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px, 4vw, 36px); line-height:1.2; margin:0 0 18px;
}
.lede{ font-size:clamp(16.5px,2vw,19px); color:var(--ink-dim); max-width:56ch; margin:0; }
/* The instruction, lifted out of the paragraph and given its own line. */
.lede-cta{
  font-size:clamp(18px,2.3vw,22px); font-weight:600; color:var(--gold);
  max-width:58ch; margin:18px 0 0;
}

/* ---------- hero ----------
   Copy on the left, the mark beside it. The columns are sized to the content
   rather than stretched, so the mark sits just past the text instead of being
   pinned to the far right of the page. */
.hero{
  display:grid;
  grid-template-columns:minmax(0,max-content) auto;
  grid-template-areas:
    "head mark"
    "body mark";
  justify-content:start;
  align-items:center;
  column-gap:clamp(24px,3.5vw,52px);
  margin:0 0 52px;
}
.hero .display{ grid-area:head; }
.hero-body{ grid-area:body; }
.hero-mark{ grid-area:mark; align-self:center; width:clamp(104px,12vw,132px); height:auto; }
.hl-line{ display:inline; }

.body{ color:var(--ink-dim); margin:0 0 18px; }
.muted{ color:var(--ink-faint); }
.fineprint{ font-size:14px; font-weight:500; color:var(--ink-dim); margin-top:16px; }

/* ---------- step labels ---------- */
.step-label{
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 20px;
}
.step-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border:1px solid var(--line); border-radius:50%;
  color:var(--gold); font-size:11px; letter-spacing:0;
}

/* ---------- dice picker ---------- */
.dice-grid{
  display:grid; gap:12px; margin:0 0 64px;
  grid-template-columns:repeat(6, 1fr);
}
.die-btn{
  appearance:none; cursor:pointer; font-family:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 10px 14px; color:var(--ink-dim);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .12s ease;
}
.die-btn:hover{ border-color:#493c2c; color:var(--ink); transform:translateY(-2px); }
.die-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.die-btn svg{ width:44px; height:44px; display:block; }
.die-btn .ico{ stroke:currentColor; stroke-width:2.4; fill:none;
  stroke-linejoin:round; stroke-linecap:round; }
.die-name{ font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.06em; }
.die-range{ font-size:12px; font-weight:500; letter-spacing:.08em; color:var(--ink-soft); }
.die-btn.is-on{
  color:var(--gold-hi); border-color:var(--gold);
  background:linear-gradient(180deg, rgba(201,162,74,.13), rgba(201,162,74,.04));
  box-shadow:0 0 0 1px rgba(201,162,74,.25), 0 10px 30px -12px rgba(201,162,74,.5);
}
.die-btn.is-on .die-range{ color:var(--gold); }

/* ---------- 3D stage ---------- */
.stage-wrap{
  display:grid; grid-template-columns:1fr 260px; gap:24px; align-items:stretch;
}
.stage{
  position:relative; min-height:400px; border-radius:16px; cursor:pointer;
  border:1px solid var(--line);
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(201,162,74,.09), transparent 70%),
    linear-gradient(180deg, var(--bg-2), #0c0a09);
  overflow:hidden;
}
.stage:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* A pool of light that rises around the die once a number has landed. */
.stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .9s ease;
  background:radial-gradient(44% 40% at 50% 44%, rgba(255,210,122,.20), transparent 72%);
}
.stage.has-result::after{ opacity:1; }
.stage canvas{ display:block; width:100%; height:100%; }
.stage-hint{
  position:absolute; left:0; right:0; bottom:16px; text-align:center;
  font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); pointer-events:none; transition:opacity .3s ease;
}
.stage.is-rolling .stage-hint{ opacity:0; }

/* no-WebGL fallback */
.stage-fallback{ position:absolute; inset:0; display:grid; place-items:center; }
.fallback-die{
  font-family:var(--serif); font-size:96px; font-weight:700; color:var(--gold);
  width:180px; height:180px; display:grid; place-items:center;
  border:2px solid var(--gold); border-radius:20px;
  background:rgba(201,162,74,.06);
}
.fallback-die.spin{ animation:fspin .6s linear infinite; }
@keyframes fspin{ to{ transform:rotate(360deg); } }

/* ---------- result panel ---------- */
.result{
  border:1px solid var(--line); border-radius:16px; background:var(--panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; text-align:center; padding:28px 20px;
}
.result-idle{
  font-family:var(--serif); font-size:16px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim);
}
.result-number{
  font-family:var(--serif); font-weight:700; font-size:88px; line-height:1;
  color:var(--gold-hi); text-shadow:0 0 40px rgba(201,162,74,.35);
}
.result-unit{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-top:8px;
}
.result-caption{ font-size:15px; font-weight:500; color:var(--ink-dim); margin-top:16px; max-width:24ch; }
.result-live{ animation:pop .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes pop{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:scale(1); } }

/* ---------- controls ---------- */
.stage-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:18px; flex-wrap:wrap;
}
.stage-controls .fineprint{ margin:0; }
.btn{
  appearance:none; cursor:pointer; font-family:var(--serif); font-weight:600;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 26px; border-radius:10px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  transition:transform .12s ease, filter .2s ease, background .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--gold); color:#1a1408; }
/* Fixed width so the button doesn't jump about as the label changes
   between Roll, Rolling and Roll again. */
#rollBtn{ min-width:172px; justify-content:center; }
.btn-primary:hover{ background:var(--gold-hi); }
.btn-primary:disabled{ opacity:.45; cursor:default; }
.btn-strava{ background:var(--strava); color:#fff; font-size:14px; padding:16px 30px; margin-top:10px; }
.btn-strava:hover{ filter:brightness(1.08); }

.units{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.unit-btn{
  appearance:none; cursor:pointer; background:transparent; border:0;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); padding:10px 16px; transition:all .18s ease;
}
.unit-btn.is-on{ background:rgba(201,162,74,.14); color:var(--gold); }

/* ---------- about ---------- */
.rules{ list-style:none; padding:0; margin:0; }
.rules li{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.rules li:last-child{ border-bottom:0; }
.rules strong{ color:var(--ink); font-weight:600; }
.rules div{ color:var(--ink-dim); font-size:16px; }
.rule-n{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); color:var(--gold);
  display:grid; place-items:center; font-family:var(--serif); font-size:13px;
}

/* ---------- merch ---------- */
.coming-soon{
  display:inline-block; margin-top:14px; padding:12px 26px;
  border:1px dashed var(--line); border-radius:10px;
  font-family:var(--serif); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); padding:28px 0 40px; }
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .stage-wrap{ grid-template-columns:1fr; }
  .stage{ min-height:340px; }
  .result{ padding:22px; }
  .result-number{ font-size:68px; }
  .section{ padding:72px 0; }
  .section-hero{ padding-top:56px; }
}
@media (max-width:760px){
  /* Flex rather than grid here: the paragraph spanning both grid columns was
     stealing width from the headline and squashing it onto three lines.
     Wrapping it to its own full-width row avoids that entirely. */
  .hero{
    display:flex; flex-wrap:wrap; align-items:center;
    column-gap:clamp(16px,5vw,30px);
    margin-bottom:44px;
  }
  .hero .display{ flex:0 1 auto; margin-bottom:0; }
  .hero-mark{ flex:none; width:clamp(84px,22vw,116px); }
  .hero-body{ flex:1 0 100%; margin-top:20px; }
  /* Roll for / distance. on two lines, with the mark alongside both. */
  .hl-line{ display:block; }
}

@media (max-width:600px){
  .dice-grid{ grid-template-columns:repeat(3, 1fr); }
  /* The wordmark already goes home, so the Roll link is just clutter here. */
  .nav a:first-child{ display:none; }
  .nav{ gap:15px; }
  .nav a{ font-size:10.5px; letter-spacing:.1em; }
  .wordmark{ font-size:12.5px; letter-spacing:.1em; }
  .topbar-inner{ padding:0 18px; }
  .wrap{ padding:0 18px; }
  .stage-controls{ justify-content:center; text-align:center; }
}

/* The wordmark grew by a word, so small phones need the bar tightened
   or MERCH falls off the right edge. */
@media (max-width:430px){
  .topbar-inner{ padding:0 12px; gap:8px; }
  .wordmark{ font-size:11px; letter-spacing:.04em; }
  .nav{ gap:11px; }
  .nav a{ font-size:9.5px; letter-spacing:.04em; }
}