/* Shyline — a drafting sheet with one instrument on it. Ground + one accent; the line at the bell is the only white. */
:root{
  --ground:#0C1018; --plate:#111621; --grid:#1A2231;
  --ink:#DCE4F2; --faint:#6E7C93; --ghost:#3A465C;
  --accent:#3D9CFF; --accent-dim:#1E4E85; --hot:#F4F8FF;
  --cur:56px; --rail:74px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ground);color:var(--ink)}
body{
  font:400 14px/1.5 "Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;background-position:center top;
}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font:inherit}
.dsp{font-family:"Big Shoulders Display",Impact,Haettenschweiler,sans-serif;font-weight:900;letter-spacing:.02em}
.etch{color:var(--faint);letter-spacing:.14em;text-transform:uppercase;font-size:10px}

#sheet{max-width:1020px;margin:0 auto;padding:20px 15px 128px;min-height:100vh}

/* ---- nameplate: the title is engraved on the instrument; there is no bar ---- */
.nameplate{display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--grid);padding-bottom:8px}
.nameplate h1{
  font-family:"Big Shoulders Display",Impact,Haettenschweiler,sans-serif;font-weight:900;
  font-size:clamp(40px,14vw,88px);line-height:.8;margin:0;color:var(--accent);text-shadow:0 0 30px rgba(61,156,255,.3)
}
.nameplate .rev{margin-left:auto;text-align:right;line-height:1.5;padding-bottom:4px}
.nameplate .rev b{display:block;color:var(--ink);font-weight:500;font-size:12px}
.ask{
  font-family:"Big Shoulders Display",Impact,Haettenschweiler,sans-serif;font-weight:700;
  font-size:clamp(19px,5.4vw,30px);line-height:1.06;margin:11px 0 16px;max-width:26ch
}
.ask em{font-style:normal;color:var(--accent)}

/* ---- the instrument ---- */
.instrument{display:block}
.gauge{position:relative;height:min(41vh,420px);min-height:286px;user-select:none;touch-action:none;margin-bottom:20px}

.track{position:absolute;left:var(--cur);top:0;bottom:0;width:var(--rail);
  background:linear-gradient(180deg,#0E1420,#090D14);border:1px solid var(--accent-dim);border-radius:3px;
  box-shadow:inset 0 0 44px rgba(61,156,255,.1)}
.tick{position:absolute;left:0;height:1px;background:var(--accent);opacity:.3;width:15px}
.tick.maj{width:28px;opacity:.7}
.tick.foot b{top:-17px}
.tick b{position:absolute;left:34px;top:-8px;white-space:nowrap;font-size:10px;font-weight:500;color:var(--faint);letter-spacing:.05em}

.pins{position:absolute;left:calc(var(--cur) + var(--rail));right:0;top:0;bottom:0;pointer-events:none}
.nick{position:absolute;left:5px;height:2px;width:20px;background:var(--accent);opacity:.7;border-radius:2px;transform:translateY(-1px)}
.nick.mine{width:32px;height:3px;opacity:1;box-shadow:0 0 12px rgba(61,156,255,.9)}
.nick.over{background:var(--ghost);opacity:.5}
.nick.won{background:var(--hot);opacity:1;box-shadow:0 0 15px rgba(244,248,255,.75)}
.tag{position:absolute;left:42px;right:0;font-size:10px;color:var(--faint);letter-spacing:.03em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transform:translateY(-50%)}
.tag.mine{color:var(--accent)}
.tag.over{color:var(--ghost);text-decoration:line-through}
.tag.won{color:var(--hot)}

.cursor{position:absolute;left:0;width:calc(var(--cur) + var(--rail));height:0}
.cursor .arrow{position:absolute;right:-2px;top:-11px;width:0;height:0;border:11px solid transparent;
  border-right-color:var(--accent);filter:drop-shadow(-3px 0 11px rgba(61,156,255,.8))}
.cursor .bar{position:absolute;left:2px;right:18px;top:-1px;height:2px;background:var(--accent);opacity:.5}
.gauge.set .cursor .arrow{border-right-color:var(--hot);filter:drop-shadow(-3px 0 12px rgba(244,248,255,.55))}
.gauge.set .cursor .bar{background:var(--hot);opacity:.4}

.theline{position:absolute;left:0;right:0;height:0;pointer-events:none}
.theline .rule{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--hot);
  box-shadow:0 0 20px rgba(244,248,255,.5);transform-origin:left;animation:print .6s cubic-bezier(.2,.8,.2,1) both}
.theline b{position:absolute;right:0;top:-27px;font-family:"Big Shoulders Display",Impact,sans-serif;
  font-weight:900;font-size:23px;color:var(--hot)}
.theline .etch{position:absolute;left:2px;top:5px}
@keyframes print{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.shade{position:absolute;left:0;right:0;top:0;background:rgba(12,16,24,.6);pointer-events:none}

/* ---- readout ---- */
.readout{display:flex;flex-direction:column;gap:10px}
.digits{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:clamp(54px,17vw,104px);
  line-height:.76;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.digits.idle{color:var(--ghost)}
.digits small{display:block;font-family:"Roboto Mono",monospace;font-size:9.5px;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-top:8px}
.gang{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grid);border:1px solid var(--grid);border-radius:3px;overflow:hidden}
.gang div{background:var(--ground);padding:8px 9px;min-width:0}
.gang b{display:block;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;font-size:20px;
  line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gang b.hi{color:var(--accent)}
.gang .etch{display:block;margin-top:4px;font-size:9px}
.dim{display:flex;align-items:baseline;gap:10px;border-bottom:1px dashed var(--grid);padding-bottom:6px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.dim b{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;font-size:21px;color:var(--ink);
  margin-left:auto;letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums}
.dim b.hi{color:var(--accent)}
.nudge{display:flex;gap:7px}
.nudge button{border:1px solid var(--accent-dim);border-radius:3px;padding:10px 0;flex:1;color:var(--accent);
  font-size:11px;letter-spacing:.1em}
.nudge button:active{background:rgba(61,156,255,.14)}
.lever{display:block;width:100%;padding:16px 12px;border:0;border-radius:3px;background:var(--accent);color:#04070D;
  font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:25px;letter-spacing:.05em;line-height:1;
  box-shadow:0 0 36px rgba(61,156,255,.28)}
.lever[disabled]{background:transparent;color:var(--ghost);box-shadow:none;border:1px solid var(--grid);cursor:default}
.lever.ghost{background:none;border:1px solid var(--accent);color:var(--accent);box-shadow:none}
.note{font-size:11.5px;color:var(--faint);line-height:1.5}
.note a{border-bottom:1px solid var(--accent-dim)}

/* ---- plates, stripes, callouts ---- */
.plate{border:1px solid var(--grid);border-radius:3px;background:var(--plate);padding:13px 14px;margin-top:10px}
.plate.lead{border-color:var(--accent-dim)}
.plate h3{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;font-size:23px;margin:0 0 5px}
.plate p{margin:0;color:var(--faint);font-size:12.5px;line-height:1.62}
.plate p + p{margin-top:9px}
.plate p b{color:var(--ink);font-weight:500}
.stripe{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--grid);font-size:12.5px}
.stripe:last-child{border-bottom:0}
.stripe .no{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:19px;color:var(--ghost);min-width:40px}
.stripe .mid{min-width:0;color:var(--faint);font-size:11.5px}
.stripe .mid u{display:block;text-decoration:none;color:var(--ink);font-size:12.5px}
.stripe .res{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stripe .res u{display:block;text-decoration:none;font-size:9.5px;color:var(--faint);letter-spacing:.11em;text-transform:uppercase}
.stripe .res b{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:21px}
.stripe.roll .res b{color:var(--ghost)}
.callout{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:1px;background:var(--grid);
  border:1px solid var(--grid);border-radius:3px;margin-top:14px;overflow:hidden}
.callout div{background:var(--ground);padding:10px 11px}
.callout b{display:block;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:25px;
  line-height:1;font-variant-numeric:tabular-nums}
.callout .etch{display:block;margin-top:6px}
.sectionhead{display:flex;align-items:baseline;gap:10px;margin:26px 0 0}
.sectionhead h2{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;font-size:25px;margin:0}
.sectionhead .etch{margin-left:auto}
.empty{color:var(--ghost);font-size:12.5px;padding:16px 0}

/* ---- title block (a drawing's, not a nav bar) ---- */
#titleblock{position:fixed;left:0;right:0;bottom:0;background:rgba(12,16,24,.95);backdrop-filter:blur(8px);
  border-top:1px solid var(--accent-dim);padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:center;z-index:20}
.tb-nav{display:flex;gap:15px}
.tb-nav a{color:var(--faint);letter-spacing:.11em;text-transform:uppercase;font-size:10px}
.tb-nav a.on{color:var(--accent)}
.tb-ca{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--faint);font-size:10.5px}
.tb-ca code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.tb-ca button{color:var(--faint);border:1px solid var(--grid);border-radius:2px;padding:1px 6px;font-size:9.5px}
.tb-ca #buy{margin-left:auto;white-space:nowrap;border:1px solid var(--accent);border-radius:2px;padding:3px 9px;
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase}
.tb-soc{display:flex;gap:11px}
.tb-soc a{color:var(--faint);font-size:10px;letter-spacing:.11em;text-transform:uppercase}

/* ---- drawer + chits ---- */
#drawer[hidden]{display:none!important}
#drawer{position:fixed;inset:0;background:rgba(5,7,11,.74);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.dr-box{width:100%;max-width:520px;background:var(--plate);border:1px solid var(--accent-dim);border-radius:3px 3px 0 0;
  padding:15px 15px calc(20px + env(safe-area-inset-bottom))}
.dr-head{display:flex;align-items:center;margin-bottom:11px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dr-head button{margin-left:auto;color:var(--faint)}
.wl{display:flex;flex-direction:column;gap:8px}
.wl button{display:flex;align-items:center;gap:10px;border:1px solid var(--grid);border-radius:3px;padding:12px;font-size:13px;width:100%}
.wl img{width:20px;height:20px;border-radius:4px}
.chit{position:fixed;left:50%;bottom:108px;transform:translateX(-50%);background:var(--accent);color:#04070D;
  padding:9px 15px;border-radius:2px;font-size:12px;z-index:60;max-width:88vw;text-align:center}

@media (min-width:760px){
  :root{--cur:66px;--rail:88px}
  #sheet{padding:28px 22px 118px}
  .instrument{display:grid;grid-template-columns:392px minmax(0,1fr);gap:40px;align-items:start}
  .readout{max-width:420px}
  .gauge{height:min(70vh,590px);margin-bottom:0}
  .ask{font-size:32px;max-width:30ch}
  #titleblock{grid-template-columns:auto 1fr auto;padding:9px 22px}
  .tb-ca{grid-column:2;justify-content:center}
}