/* Crossfare — a lit road sign. Ground #0A0605, one sodium accent #FF6A1F. */
:root{
  --ground:#0A0605; --panel:#120A07; --panel2:#180E09; --ink:#F7EAE2; --mute:#9C8377;
  --acc:#FF6A1F; --hot:#FFD2B0; --dim:#57301B; --line:#2A1A12;
  --marquee:60px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:400 14px/1.5 "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-top:calc(var(--marquee) + env(safe-area-inset-top));
}
a{color:inherit}
code{font:inherit;word-break:break-all}

/* ---------- the marquee: fixed at every width, carries the buy ---------- */
.marquee{
  position:fixed; inset:0 0 auto 0; z-index:60; height:calc(var(--marquee) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 12px 0; display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#160C07 0%, #0E0705 100%);
  border-bottom:1px solid var(--line); box-shadow:0 10px 30px -18px #000;
}
.sign{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
.sign img{width:30px;height:30px;display:block;filter:drop-shadow(0 0 8px rgba(255,106,31,.55))}
.sign span{font:700 24px/1 Antonio,"Arial Narrow",sans-serif;letter-spacing:.06em;color:var(--hot);text-shadow:0 0 12px rgba(255,106,31,.6)}
.tick{flex:1 1 auto;min-width:0;color:var(--mute);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none}
.fareBuy{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;text-decoration:none;
  padding:7px 12px;border-radius:999px;border:1px solid var(--acc);
  background:radial-gradient(120% 140% at 50% 0%,rgba(255,106,31,.26),rgba(255,106,31,.07));
  box-shadow:0 0 18px -4px rgba(255,106,31,.6), inset 0 0 12px -6px var(--acc);
}
.fareBuy b{font:700 15px/1 Antonio,sans-serif;letter-spacing:.05em;color:var(--hot)}
.fareBuy i{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.fareBuy[data-live="1"]{animation:lamp 3.2s ease-in-out infinite}
@keyframes lamp{0%,100%{box-shadow:0 0 18px -4px rgba(255,106,31,.6), inset 0 0 12px -6px var(--acc)}
                50%{box-shadow:0 0 26px 0px rgba(255,106,31,.85), inset 0 0 14px -4px var(--acc)}}
.hook{
  flex:0 0 auto;background:transparent;color:var(--mute);border:1px solid var(--line);border-radius:999px;
  padding:7px 11px;font:400 11px/1 "Space Mono",monospace;cursor:pointer;letter-spacing:.04em
}
.hook.on{color:var(--hot);border-color:var(--dim)}

/* ---------- ways ---------- */
.ways{display:flex;gap:4px;padding:10px 12px 0;max-width:1180px;margin:0 auto;flex-wrap:wrap}
.ways a{
  text-decoration:none;color:var(--mute);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:var(--panel)
}
.ways a[aria-current="page"]{color:var(--hot);border-color:var(--dim);background:var(--panel2)}

main{max-width:1180px;margin:0 auto;padding:12px 12px 40px}

/* ---------- stage ---------- */
.stage{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.plate{order:1} .booth{order:2} .side{order:3}   /* on a phone the action sits right under the road */
.plate{
  position:relative;background:radial-gradient(120% 90% at 50% 10%,#150C07 0%,#0B0604 70%);
  border:1px solid var(--line);border-radius:10px;padding:8px 8px 0;overflow:hidden
}
.roadmap{display:block;width:100%;height:auto}
.verdict{
  padding:12px 10px 14px;border-top:1px dashed var(--line);margin-top:4px;
  font-size:12px;color:var(--mute);line-height:1.6
}
.verdict b{color:var(--hot);font-weight:400}
.verdict .big{display:block;font:700 30px/1.05 Antonio,sans-serif;letter-spacing:.02em;color:var(--hot);margin-bottom:4px;
  text-shadow:0 0 16px rgba(255,106,31,.45)}

/* svg pieces */
.arcLine{fill:none;stroke:var(--dim);stroke-width:3;stroke-linecap:round}
.arcLine.free{stroke-dasharray:5 7;stroke:#3A2115}
.arcLine.on{stroke:var(--acc);stroke-width:4.5}
.arcGlow{fill:none;stroke:var(--acc);stroke-width:12;opacity:.20;stroke-linecap:round;filter:blur(3px)}
.flow{fill:none;stroke:var(--hot);stroke-width:1.6;stroke-dasharray:6 14;opacity:.85;animation:roll 1.1s linear infinite}
@keyframes roll{to{stroke-dashoffset:-20}}
.node{fill:#0B0604;stroke:var(--dim);stroke-width:2}
.node.live{stroke:var(--acc)}
.nodeDot{fill:var(--hot)}
.nodeName{fill:var(--mute);font:400 9px "Space Mono",monospace;letter-spacing:.14em;text-anchor:middle}
.tag{cursor:pointer}
.tagBox{fill:#130B07;stroke:var(--line);stroke-width:1;rx:4}
.tag.taken .tagBox{stroke:var(--dim)}
.tag.on .tagBox{stroke:var(--acc);fill:#1E0F07}
.tag.sel .tagBox{stroke:var(--hot);stroke-width:2}
.tagNum{font:700 15px Antonio,sans-serif;text-anchor:middle;fill:var(--mute)}
.tag.taken .tagNum{fill:var(--ink)} .tag.on .tagNum{fill:var(--hot)}
.tagSub{font:400 7px "Space Mono",monospace;text-anchor:middle;fill:#6B5347;letter-spacing:.1em}

/* ---------- side ---------- */
.side{display:grid;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px}
.card h3{margin:0 0 10px;font:400 10px/1 "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.pots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pot{border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--panel2)}
.pot .n{font:700 26px/1 Antonio,sans-serif;color:var(--hot);display:block;letter-spacing:.01em}
.pot .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:block;margin-top:5px}
.bar{height:3px;background:#20130C;border-radius:2px;overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--acc);box-shadow:0 0 8px var(--acc);transition:width 1s linear}

.routes{display:grid;gap:7px}
.routeline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel2)}
.routeline.best{border-color:var(--acc);background:#1A0E08}
.routeline .rn{font-size:11px;color:var(--mute);letter-spacing:.03em;min-width:0;overflow-wrap:anywhere}
.routeline.best .rn{color:var(--ink)}
.routeline .rc{font:700 20px/1 Antonio,sans-serif;color:var(--mute)}
.routeline.best .rc{color:var(--hot)}
.routeline .shut{font-size:10px;color:#6B5347;letter-spacing:.06em}

.moves{display:grid;gap:0}
.move{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line);font-size:11px}
.move>span{min-width:0;overflow-wrap:anywhere}
.move:last-child{border-bottom:0}
.move .w{color:var(--mute)} .move .f{color:var(--hot);font:700 15px/1 Antonio,sans-serif}
.move .t{color:#6B5347;font-size:10px}
.quiet{color:#6B5347;font-size:11px;line-height:1.7}

/* ---------- the booth (keypad) ---------- */
.booth{margin-top:14px;background:linear-gradient(180deg,#160D08,#0D0705);border:1px solid var(--line);border-radius:10px;padding:14px}
.booth .who{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.booth .who b{font:700 22px/1 Antonio,sans-serif;color:var(--hot);letter-spacing:.02em}
.booth .who span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.readout{
  display:flex;align-items:baseline;justify-content:center;gap:10px;padding:14px 10px;margin-bottom:12px;
  background:#0A0604;border:1px solid var(--dim);border-radius:8px
}
.readout .num{font:700 58px/.9 Antonio,sans-serif;color:var(--hot);text-shadow:0 0 22px rgba(255,106,31,.5);min-width:2ch;text-align:center}
.readout .cap{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  font:700 26px/1 Antonio,sans-serif;padding:14px 0;cursor:pointer;transition:background .12s,border-color .12s
}
.key:active{background:#24140C;border-color:var(--acc)}
.key.small{font:400 11px/1 "Space Mono",monospace;letter-spacing:.08em;color:var(--mute)}
.pay{
  width:100%;margin-top:10px;padding:15px;border-radius:8px;border:1px solid var(--acc);cursor:pointer;
  background:radial-gradient(120% 200% at 50% 0%,rgba(255,106,31,.32),rgba(255,106,31,.08));
  color:var(--hot);font:700 20px/1 Antonio,sans-serif;letter-spacing:.06em;
  box-shadow:0 0 22px -8px var(--acc)
}
.pay:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.boothNote{margin:9px 0 0;font-size:11px;color:var(--mute);line-height:1.6;text-align:center}
.boothNote b{color:var(--hot);font-weight:400}

/* ---------- tables / rounds / wallet / rules ---------- */
.slab{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px}
.slab h2{margin:0 0 4px;font:700 26px/1.05 Antonio,sans-serif;color:var(--hot);letter-spacing:.02em}
.slab h4{margin:14px 0 6px;font:400 10px/1 "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.slab p{margin:0 0 10px;color:#C9B2A4;font-size:13px;line-height:1.75}
.slab p b{color:var(--hot);font-weight:400}
.grid6{display:grid;grid-template-columns:1fr;gap:7px}
.arcrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel2)}
.arcrow>span{min-width:0}
.arcrow.on{border-color:var(--acc);background:#1A0E08}
.arcrow .nm{font-size:12px;color:var(--ink)}
.arcrow .ow{font-size:10px;color:#6B5347;display:block;margin-top:3px;word-break:break-all;line-height:1.4}
.arcrow .fr{font:700 22px/1 Antonio,sans-serif;color:var(--mute);min-width:2.2ch;text-align:right}
.arcrow.on .fr{color:var(--hot)}
.arcrow .tk{font-size:10px;color:var(--mute);text-align:right;display:block;margin-top:3px}
.pill{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pill.win{border-color:var(--acc);color:var(--hot)}
.headline{font:700 34px/1.02 Antonio,sans-serif;color:var(--hot);letter-spacing:.01em;margin:4px 0 8px;text-shadow:0 0 20px rgba(255,106,31,.35)}
.lede{color:#C9B2A4;font-size:13px;line-height:1.8;margin:0 0 4px}

/* ---------- the verge ---------- */
.verge{max-width:1180px;margin:0 auto;padding:18px 12px 44px;border-top:1px solid var(--line);color:var(--mute);font-size:11px}
.vrow{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:4px 0;align-items:baseline}
.vrow span{color:#6B5347;letter-spacing:.1em;text-transform:uppercase;font-size:9px}
.vrow code{color:#C9B2A4;font-size:10px;overflow-wrap:anywhere}
.vlinks{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 6px}
.vlinks a{color:var(--acc);text-decoration:none;font-size:11px}
.vnote{margin:6px 0 0;color:#6B5347}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:90;background:#1B0F08;border:1px solid var(--acc);
  color:var(--hot);padding:11px 16px;border-radius:999px;font-size:12px;box-shadow:0 0 30px -10px var(--acc)}
.wl{display:grid;gap:8px}
.wl button{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:12px;cursor:pointer;font:inherit}
.wl img{width:22px;height:22px;border-radius:5px}
.sheet{position:fixed;inset:0;z-index:80;background:rgba(5,3,2,.82);display:flex;align-items:flex-end;justify-content:center}
.sheet .box{background:var(--panel);border:1px solid var(--line);border-radius:12px 12px 0 0;padding:16px;width:100%;max-width:520px}
.sheet h3{margin:0 0 12px;font:400 11px/1 "Space Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ---------- narrow phones: the mark carries the identity, the pill carries the buy ---------- */
@media (max-width:429px){
  .marquee{gap:8px;padding-left:10px;padding-right:10px}
  .sign span{display:none}
  .fareBuy{padding:6px 10px;gap:5px}
  .fareBuy b{font-size:14px}
  .fareBuy i{font-size:9px}
  .hook{padding:6px 9px;font-size:10px}
}

/* ---------- wider: a real measure, bigger instrument ---------- */
@media (min-width:640px){
  .tick{display:block}
  .grid6{grid-template-columns:1fr 1fr}
  .keypad{gap:10px}
}
@media (min-width:720px){
  body{font-size:15px}
  main{padding:18px 20px 56px}
  .ways{padding:14px 20px 0}
  .headline{font-size:46px}
  .verdict .big{font-size:38px}
  .readout .num{font-size:74px}
  .pot .n{font-size:32px}
  .verge{padding:22px 20px 56px}
}
/* ---------- desktop: the page recomposes ---------- */
@media (min-width:1000px){
  :root{--marquee:64px}
  .marquee{padding-left:22px;padding-right:22px;gap:16px}
  .sign span{font-size:28px}
  .stage{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:20px}
  .plate{padding:14px 14px 0}
  .side{position:sticky;top:calc(var(--marquee) + 16px)}
  .booth{grid-column:1 / 2;margin-top:0}
  .stage{grid-template-areas:"plate side" "booth side"}
  .plate{grid-area:plate} .side{grid-area:side} .booth{grid-area:booth}
  .headline{font-size:54px}
  .verdict{padding:16px 6px 18px}
  .verdict .big{font-size:44px}
  .grid6{grid-template-columns:1fr 1fr 1fr}
  .verge{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;align-items:start}
  .vlinks{grid-column:1 / -1}
  .vnote{grid-column:1 / -1}
}