/* ============================================================
   THE ROUNDABOUT™ — shared design system
   Road-sign signage: motorway blue, reflective white, amber.
   Zero build. Linked by every page.
   ============================================================ */

:root{
  --blue:#123a86; --blue-deep:#0c2a63; --blue-line:#2f57a6;
  --white:#f3f6fa; --amber:#f5a623; --green:#12915a;
  --brown:#7a5230; --yellow:#f2d045; --ink:#0a1a3f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--white);
  background:var(--blue-deep);
  background-image:radial-gradient(120% 90% at 50% -10%, #1a4aa0 0%, var(--blue) 42%, var(--blue-deep) 100%);
  background-attachment:fixed;
  font-family:"Overpass",system-ui,-apple-system,sans-serif;
  line-height:1.45; letter-spacing:.005em;
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:clamp(18px,4vw,40px) clamp(16px,4vw,32px) 48px;
}
.mono{font-family:"Overpass Mono",ui-monospace,monospace}
.wrap{width:100%; max-width:760px}
a{color:var(--amber)}

/* ---- masthead ---- */
header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--white)}
.badge{width:40px; height:40px; border-radius:50%; border:3px solid var(--white);
  position:relative; flex:none; display:grid; place-items:center}
.badge svg{width:24px; height:24px}
.brand h1{font-size:clamp(1.15rem,4.5vw,1.5rem); font-weight:900; letter-spacing:.02em;
  margin:0; text-transform:uppercase}
.brand .tm{font-size:.5em; vertical-align:super; font-weight:800; opacity:.85}
.odo{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  color:rgba(243,246,250,.72); text-align:right}
.odo b{color:var(--amber); font-weight:600}
.odo .reset{display:block; margin-top:3px; background:none; border:none; cursor:pointer;
  color:rgba(243,246,250,.55); font-family:"Overpass Mono",monospace; font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; padding:0; text-decoration:underline}
.odo .reset:hover{color:var(--white)}

.tagline{margin:22px 0 4px; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(243,246,250,.66)}

/* ---- the roundabout ---- */
.junction{position:relative; margin:8px auto 4px; width:min(100%,560px); aspect-ratio:1/.86}
.ring{position:absolute; inset:0; margin:auto; width:min(86vw,440px); height:min(86vw,440px);
  transition:transform 1s cubic-bezier(.18,.72,.12,1)}
.ring svg{width:100%; height:100%; display:block; overflow:visible}
.ring .road{fill:none; stroke:rgba(243,246,250,.14); stroke-width:34}
.ring .kerb{fill:none; stroke:rgba(243,246,250,.5); stroke-width:2.5}
.ring .arrow{fill:var(--amber)}
.ring .lane{stroke:rgba(243,246,250,.55); stroke-width:2.5; stroke-dasharray:6 12; fill:none}

.sign{position:absolute; inset:0; margin:auto; width:min(74vw,360px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:8px 6px}
.panel{background:var(--white); color:var(--ink); border-radius:14px; border:4px solid var(--ink);
  box-shadow:0 14px 40px rgba(6,20,54,.5), inset 0 0 0 2px var(--white);
  padding:clamp(16px,4vw,26px) clamp(16px,4.5vw,30px); width:100%; min-height:132px;
  display:flex; align-items:center; justify-content:center}
.proverb{font-weight:800; font-size:clamp(1.1rem,4.5vw,1.65rem); line-height:1.22;
  letter-spacing:-.01em; margin:0; transition:opacity .28s ease}
.proverb.swap{opacity:0}
.proverb .tm{font-size:.58em; vertical-align:super; font-weight:800}
.attrib{display:block; margin-top:12px; font-family:"Overpass Mono",monospace; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:#5a6b8c; font-weight:600}
.stat{display:block; margin-top:7px; font-family:"Overpass Mono",monospace; font-size:.62rem;
  letter-spacing:.08em; color:#8a97b0}

/* ---- reveal ---- */
.reveal{max-width:560px; margin:2px auto 0; overflow:hidden; max-height:0; opacity:0;
  transition:max-height .4s ease, opacity .4s ease, margin .4s ease}
.reveal.open{max-height:220px; opacity:1; margin:14px auto 0}
.reveal p{background:rgba(245,166,35,.12); border-left:3px solid var(--amber);
  border-radius:0 8px 8px 0; padding:12px 16px; margin:0; font-size:.92rem; color:#ffe6bd}

/* ---- buttons ---- */
button{font-family:inherit; cursor:pointer; border:none; border-radius:999px; font-weight:800;
  letter-spacing:.01em; transition:transform .08s ease, background .15s ease,
  box-shadow .15s ease, opacity .15s ease}
button:active{transform:translateY(1px)}
button:focus-visible{outline:3px solid var(--amber); outline-offset:3px}
.controls{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:24px 0 6px}
.go{background:var(--amber); color:#3a2600; padding:15px 30px; font-size:1.02rem;
  box-shadow:0 8px 22px rgba(245,166,35,.34)}
.go:hover{background:#ffb63a}
.ghost{background:transparent; color:var(--white); padding:15px 22px;
  box-shadow:inset 0 0 0 2px rgba(243,246,250,.5); font-size:.94rem}
.ghost:hover{box-shadow:inset 0 0 0 2px var(--white)}

/* ---- energy gauge (segmented) ---- */
.settings{display:flex; flex-direction:column; gap:16px; align-items:center; margin:22px 0 4px}
.field{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; max-width:420px}
.field-label{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,246,250,.6)}
.gauge{display:flex; width:100%; background:rgba(243,246,250,.08); border-radius:999px;
  padding:4px; box-shadow:inset 0 0 0 1px rgba(243,246,250,.14)}
.gauge button{flex:1; background:transparent; color:rgba(243,246,250,.7); padding:9px 6px;
  font-size:.82rem; border-radius:999px; font-weight:800}
.gauge button[aria-pressed="true"]{background:var(--amber); color:#3a2600;
  box-shadow:0 4px 12px rgba(245,166,35,.34)}

/* ---- category select ---- */
.field select{width:100%; appearance:none; font-family:inherit; font-weight:800; font-size:.92rem;
  color:var(--white); background:rgba(243,246,250,.08); border:2px solid rgba(243,246,250,.28);
  border-radius:12px; padding:12px 40px 12px 16px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 4l5 6 5-6' stroke='%23f5a623' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center}
.field select:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
.field select option{color:#0a1a3f}

/* ---- exits (themes) ---- */
.exits-label{text-align:center; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,246,250,.6); margin:26px 0 12px}
.exits{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.exit{padding:8px 14px; border-radius:8px; font-size:.82rem; font-weight:800; letter-spacing:.01em;
  border:2px solid transparent; color:#fff; background:var(--sc,#2f57a6); opacity:.62;
  transition:opacity .15s, transform .08s, box-shadow .15s}
.exit[data-ink="dark"]{color:var(--ink)}
.exit:hover{opacity:.9}
.exit[aria-pressed="true"]{opacity:1;
  box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 6px 16px rgba(6,20,54,.4)}
.exit:active{transform:translateY(1px)}

/* ---- footer ---- */
footer{margin-top:34px; text-align:center; width:100%; max-width:760px}
.foot-stat{font-size:.82rem; color:rgba(243,246,250,.72)}
.foot-stat b{color:var(--white); font-weight:800}
.fineprint{margin-top:12px; font-size:.66rem; letter-spacing:.06em; color:rgba(243,246,250,.42)}
.fineprint a{color:rgba(243,246,250,.6)}
.nav{margin-top:16px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.nav a{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,246,250,.6);
  text-decoration:none}
.nav a:hover{color:var(--white)}

/* ---- toast ---- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--white); color:var(--ink); font-weight:800; font-size:.86rem; padding:10px 18px;
  border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; box-shadow:0 10px 30px rgba(6,20,54,.5)}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---- prose pages (about / terms / privacy) ---- */
.page{max-width:640px; margin:14px auto 0}
.eyebrow{font-family:"Overpass Mono",monospace; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin:30px 0 6px}
.page h2{font-size:clamp(1.6rem,6vw,2.3rem); font-weight:900; letter-spacing:-.01em; margin:0 0 18px}
.page h3{font-size:1.05rem; font-weight:800; margin:28px 0 6px; color:#cfe0ff}
.page p{margin:0 0 15px; color:rgba(243,246,250,.9)}
.page .lede{font-size:1.12rem; color:#fff}
.page ul{margin:0 0 15px; padding-left:20px; color:rgba(243,246,250,.9)}
.page li{margin:0 0 7px}
.pull{border-left:3px solid var(--amber); padding:4px 0 4px 18px; margin:22px 0;
  font-weight:800; font-size:1.15rem; color:#fff}
.backlink{display:inline-block; margin:34px 0 0; font-family:"Overpass Mono",monospace;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--white); box-shadow:inset 0 0 0 2px rgba(243,246,250,.4);
  padding:11px 20px; border-radius:999px}
.backlink:hover{box-shadow:inset 0 0 0 2px var(--white)}

@media (prefers-reduced-motion: reduce){
  .ring{transition:none}
  .proverb{transition:opacity .12s}
  body{background-attachment:scroll}
}
@media (max-width:480px){
  .go,.ghost{width:100%}
  .controls{flex-direction:column; align-items:stretch}
}