/* Snuffwick — the ring. Dark oil, one ember. Pixel edges, no curves where a square will do. */
:root{
  --oil:#0C0906; --oil2:#15100B; --oil3:#1E1710;
  --ink:#F2E8DA; --dim:#9C8E7E; --faint:#5E5346;
  --ember:#FF7A18; --emberlow:#8A3F06; --ash:#4A4038;
  --edge:#2A211A;
  --disp:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --strip:52px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--oil); color:var(--ink); font-family:var(--mono); font-size:14px; line-height:1.55;
  padding-top:var(--strip); overflow-x:hidden;
  background-image:radial-gradient(120% 60% at 50% -10%, rgba(255,122,24,.10), transparent 60%);
}
a{color:var(--ember); text-decoration:none}
b{font-weight:700}
em{font-style:normal; color:var(--ember)}

/* ---------- the fixed strip: identity, phase, the buy, the wallet ---------- */
.emberstrip{
  position:fixed; top:0; left:0; right:0; height:var(--strip); z-index:40;
  display:flex; align-items:center; gap:10px; padding:0 10px;
  background:linear-gradient(180deg, #120D08 0%, #0E0A07 100%);
  border-bottom:2px solid var(--edge);
  box-shadow:0 1px 0 rgba(255,122,24,.16), 0 10px 26px rgba(0,0,0,.55);
}
.stripmark{display:flex; align-items:center; gap:7px; color:var(--ink); flex:0 0 auto}
.stripmark img{image-rendering:pixelated; display:block}
.stripmark span{font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:.06em}
@media (max-width:400px){.stripmark span{font-size:18px} .stripbuy{padding:8px 9px; font-size:11px} .stripwire{padding:7px 8px; font-size:11px}}
.stripgap{display:none; flex:1 1 auto; min-width:0; color:var(--dim); font-size:11px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (min-width:600px){.stripgap{display:block}}
.stripbuy{
  flex:0 0 auto; background:var(--ember); color:#1A0C02; font-weight:700; font-size:12px;
  padding:8px 11px; border:2px solid #FFA45C; box-shadow:0 0 0 1px #6A2F04, 0 0 18px rgba(255,122,24,.45);
  text-transform:lowercase; letter-spacing:.02em;
}
.stripbuy.cold{background:transparent; color:var(--dim); border-color:var(--ash); box-shadow:none}
.stripwire{
  flex:0 0 auto; background:transparent; color:var(--ink); font-family:var(--mono); font-size:12px;
  border:2px solid var(--ash); padding:7px 10px; cursor:pointer;
}
.stripwire.wired{border-color:var(--ember); color:var(--ember)}

/* ---------- deck ---------- */
.deck{max-width:1180px; margin:0 auto; padding:18px 14px 44px; display:grid; gap:18px}
.crier{font-family:var(--disp); font-weight:800; font-size:clamp(38px,11vw,58px); line-height:.92;
  margin:6px 0 10px; letter-spacing:.005em; text-transform:uppercase}
.underline{color:var(--dim); margin:0 0 18px; max-width:56ch}
.underline b{color:var(--ink)}

/* ---------- the ring ---------- */
.ringwrap{position:relative; width:100%; max-width:520px; margin:0 auto; aspect-ratio:1/1}
#ring{width:100%; height:100%; display:block; touch-action:manipulation}
.lamp{cursor:pointer}
.lampbase{fill:#3A2E24}
.lampfoot{fill:#241C15}
.flame{fill:var(--ember)}
.flame.core{fill:#FFD9A3}
.lamp.doomed .flame{fill:#6E5B49}
.lamp.doomed .flame.core{fill:#8A7663}
.lamp.doomed .lampbase{fill:#2A231C}
.lamp.dark .lampbase{fill:#241D17}
.lamp.lit .flicker{animation:flick .9s steps(2,end) infinite}
.lamp.picked .lampbase{fill:var(--ember)}
.lampnum{fill:var(--faint); font-family:var(--mono); font-size:9px}
.lamp.lit .lampnum{fill:var(--dim)}
.lamp.picked .lampnum{fill:var(--ember)}
.ringrim{fill:none; stroke:var(--edge); stroke-width:1}
@keyframes flick{0%{opacity:1}50%{opacity:.62}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.lamp.lit .flicker{animation:none}}

.dial{position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none}
.dialcap{color:var(--faint); font-size:10px; letter-spacing:.22em; text-transform:uppercase}
.dialnum{font-family:var(--disp); font-weight:800; font-size:clamp(34px,10vw,52px); line-height:1; color:var(--ink);
  text-shadow:0 0 26px rgba(255,122,24,.35)}
.dialsub{color:var(--dim); font-size:11px; margin-top:4px; max-width:150px}

/* ---------- the bench: the one action ---------- */
.bench{margin-top:16px; border:2px solid var(--edge); background:var(--oil2); padding:14px}
.benchhead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.benchhead h2{font-family:var(--disp); font-weight:700; font-size:26px; margin:0; letter-spacing:.03em; text-transform:uppercase}
.verdict{font-size:11px; padding:3px 7px; border:1px solid currentColor}
.verdict.good{color:#7BD88F}
.verdict.bad{color:#FF6B57}
.verdict.idle{color:var(--faint)}
.benchgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0}
.cell{background:var(--oil3); border:1px solid var(--edge); padding:8px}
.cell dt{color:var(--faint); font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin:0}
.cell dd{margin:2px 0 0; font-size:15px; font-family:var(--disp); font-weight:700; letter-spacing:.03em}
.pourrow{display:flex; gap:8px; margin-top:10px}
.pourrow input{
  flex:1 1 auto; min-width:0; background:var(--oil); border:2px solid var(--ash); color:var(--ink);
  font-family:var(--mono); font-size:15px; padding:11px 12px;
}
.pourrow input:focus{outline:none; border-color:var(--ember)}
.pourgo{
  flex:0 0 auto; background:var(--ember); color:#1A0C02; border:2px solid #FFA45C; font-family:var(--mono);
  font-weight:700; font-size:14px; padding:11px 16px; cursor:pointer;
}
.pourgo[disabled]{background:var(--ash); border-color:var(--ash); color:var(--faint); cursor:not-allowed}
.quick{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.quick button{background:transparent; border:1px solid var(--ash); color:var(--dim); font-family:var(--mono);
  font-size:11px; padding:5px 9px; cursor:pointer}
.quick button:hover{border-color:var(--ember); color:var(--ember)}
.benchnote{color:var(--dim); font-size:12px; margin:10px 0 0}
.benchnote b{color:var(--ink)}

/* ---------- plain words ---------- */
.plainly{margin-top:20px; border-top:2px solid var(--edge); padding-top:16px}
.plainly h2{font-family:var(--disp); font-weight:700; font-size:24px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.04em}
.steps{margin:0; padding-left:18px; color:var(--dim)}
.steps li{margin-bottom:9px}
.steps b{color:var(--ink)}
.aside-note{color:var(--faint); font-size:12px; margin-top:12px; border-left:2px solid var(--emberlow); padding-left:10px}

/* ---------- the watch column ---------- */
.watch{display:grid; gap:14px; align-content:start}
.card{border:2px solid var(--edge); background:var(--oil2); padding:12px}
.cardcap{color:var(--faint); font-size:10px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 8px}
.bigline{font-family:var(--disp); font-weight:800; font-size:32px; line-height:1; letter-spacing:.02em}
.bigline.ember{color:var(--ember)}
.subline{color:var(--dim); font-size:12px; margin-top:4px}
.rows{display:grid; gap:6px}
.row{display:flex; justify-content:space-between; gap:10px; font-size:12px; border-bottom:1px dotted var(--edge); padding-bottom:5px}
.row:last-child{border-bottom:0; padding-bottom:0}
.row span:first-child{color:var(--dim); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row b{white-space:nowrap}
.hush{color:var(--faint); font-size:12px; font-style:normal}
.tapeline{display:flex; justify-content:space-between; gap:8px; font-size:11px; padding:5px 0; border-bottom:1px dotted var(--edge)}
.tapeline:last-child{border-bottom:0}
.tapeline .who{color:var(--dim)}
.tapeline .lampref{color:var(--ember)}
.ledgerrow{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:baseline; font-size:12px;
  padding:7px 0; border-bottom:1px dotted var(--edge)}
.ledgerrow:last-child{border-bottom:0}
.pill{display:inline-block; border:1px solid var(--ash); color:var(--dim); font-size:10px; padding:1px 6px}
.pill.lit{border-color:var(--ember); color:var(--ember)}

/* ---------- foot ---------- */
.foot{border-top:2px solid var(--edge); padding-top:16px; display:grid; gap:12px; color:var(--dim); font-size:12px}
.footrow{display:flex; gap:10px; align-items:center}
.footrow img{image-rendering:pixelated}
.footrow b{display:block; font-family:var(--disp); font-size:20px; letter-spacing:.05em; color:var(--ink); text-transform:uppercase}
.addrs{display:grid; gap:4px; font-size:11px; word-break:break-all}
.addrs i{font-style:normal; color:var(--faint)}
.footnav{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- the snuffer ---------- */
.snuffer{position:fixed; inset:0; z-index:60; background:rgba(6,4,2,.82); display:flex; align-items:flex-end; justify-content:center}
.snuffer[hidden]{display:none !important}
.snuffercard{width:100%; max-width:460px; background:var(--oil2); border:2px solid var(--edge); border-bottom:0; padding:14px}
.snufferhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.snufferhead b{font-family:var(--disp); font-size:22px; text-transform:uppercase; letter-spacing:.04em}
.snufferhead button{background:none; border:0; color:var(--dim); font-size:26px; line-height:1; cursor:pointer}
.wl{display:grid; gap:8px}
.wl button{display:flex; align-items:center; gap:10px; background:var(--oil3); border:1px solid var(--edge);
  color:var(--ink); font-family:var(--mono); font-size:13px; padding:10px; cursor:pointer}
.wl img{width:20px; height:20px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:80; background:var(--oil3);
  border:2px solid var(--ember); color:var(--ink); font-size:12px; padding:9px 13px; max-width:90vw}

/* ---------- a wider measure ---------- */
@media (min-width:720px){
  body{font-size:15px}
  .deck{padding:26px 24px 56px; gap:24px}
  .ringwrap{max-width:560px}
  .benchgrid{gap:10px}
  .bench{padding:18px}
}

/* ---------- desktop: the ring keeps the left, the watch takes the right ---------- */
@media (min-width:1000px){
  :root{--strip:58px}
  .deck{grid-template-columns:minmax(0,1fr) 352px; align-items:start; padding:32px 28px 64px; gap:28px}
  .stage{grid-column:1; min-width:0}
  .watch{grid-column:2; position:sticky; top:calc(var(--strip) + 24px)}
  .foot{grid-column:1 / -1}
  .crier{font-size:clamp(48px,3.8vw,62px); margin-top:0}
  .underline{font-size:16px; margin-bottom:8px}
  .stripgap{font-size:12px}
  /* the object keeps the left of the stage, the action stands beside it, the words run under both */
  .stage{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start}
  .crier, .underline, .plainly{grid-column:1 / -1}
  .ringwrap{grid-column:1; max-width:none; margin:0}
  .bench{grid-column:2; margin-top:0; align-self:start; position:sticky; top:calc(var(--strip) + 24px)}
  .benchgrid{grid-template-columns:1fr 1fr}
  .benchgrid .cell:first-child{grid-column:1 / -1}
  .dialnum{font-size:clamp(40px,3.4vw,52px)}
}