/* Progress meters (js/hud.js). Sits in the side column above the trades list; compact on phones. */
#progress{display:grid;gap:10px}
#progress .pr{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
#progress .pr b{font-weight:900;letter-spacing:.02em}
#progress .pr span{opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
#progress .pbar{height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:5px}
#progress .pbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffd166,#ff8a3d,#ff4f8b);transition:width .35s ease-out}
#progress .pbar.lv i{background:linear-gradient(90deg,#7ee081,#2fb5a5)}
#progress .pbar.bd i{background:linear-gradient(90deg,#9b8cff,#5ad1ff)}
#progress .pnote{font-size:12px;opacity:.75;margin-top:4px}
#progress .bust.hot .pbar{box-shadow:0 0 0 2px rgba(255,209,102,.5),0 0 16px rgba(255,138,61,.7)}
@media (prefers-reduced-motion:no-preference){#progress .bust.hot .pbar i{animation:pmPulse .7s ease-in-out infinite}}
@keyframes pmPulse{50%{filter:brightness(1.35)}}
/* Tension meter: 4 stage segments with a fill; the fill's colour follows the stage. */
#progress .tseg{position:relative;display:grid;grid-template-columns:30fr 20fr 30fr 20fr;gap:3px;height:14px;margin-top:5px}
#progress .tseg i{border-radius:4px;background:rgba(255,255,255,.1)}
#progress .tseg em{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;mix-blend-mode:screen;transition:background .4s}
#pmTen[data-stage="0"] em{background:#5ad1ff}
#pmTen[data-stage="1"] em{background:linear-gradient(90deg,#5ad1ff,#ffd166)}
#pmTen[data-stage="2"] em{background:linear-gradient(90deg,#5ad1ff,#ffd166,#ff8a3d)}
#pmTen[data-stage="3"] em,#pmTen[data-stage="4"] em{background:linear-gradient(90deg,#5ad1ff,#ffd166,#ff8a3d,#ff3355)}
#pmTen[data-stage="5"] em{background:#9b8cff}
#pmTen[data-stage="3"] .pr span,#pmTen[data-stage="4"] .pr span{color:#ff6b7f;font-weight:900}
#pmTen.buy .tseg{animation:tenBuy .5s ease-out}
#pmTen.sell .tseg{animation:tenSell .6s ease-out}
#pmTen.up .pr span{animation:tenUp .8s ease-out}
@keyframes tenBuy{0%{box-shadow:0 0 0 2px #7ee081,0 0 14px #7ee081}100%{box-shadow:none}}
@keyframes tenSell{0%{box-shadow:0 0 0 2px #ff3355,0 0 14px #ff3355;transform:translateX(-3px)}30%{transform:translateX(3px)}100%{box-shadow:none;transform:none}}
@keyframes tenUp{0%{transform:scale(1.5)}100%{transform:none}}
@media (prefers-reduced-motion:no-preference){#pmTen[data-stage="3"] .tseg{animation:pmPulse .5s ease-in-out infinite}}
/* "How it works" panel (js/about.js). Off-screen until opened; the text stays in the DOM for crawlers. */
#about{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(10,6,18,.6);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
#about.open{opacity:1;visibility:visible}
#about .about-in{position:relative;width:min(640px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#1e1530;border:3px solid #1a0d06;border-radius:18px;padding:22px 24px;font-weight:700;line-height:1.5;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#about h2{font-family:'Lilita One',sans-serif;font-weight:400;font-size:28px;margin:0 0 10px}
#about h3{font-size:16px;margin:16px 0 4px;color:#ffd166}
#about p,#about li{font-size:14px;margin:4px 0}
#about ol,#about ul{padding-left:20px;margin:4px 0}
#about a{color:#7ee0ff}
#about .small{opacity:.7;font-size:12px;margin-top:14px}
#about .about-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:inherit;font-size:22px;cursor:pointer}
body.stream #about-open{display:none}
#sound[aria-pressed="true"]{outline:2px solid rgba(126,224,129,.6);outline-offset:-2px}
/* Phones: meters become a single compact strip; the level note hides. */
@media (max-width:640px){
  #progress{gap:6px;padding:10px 12px}
  #progress .pr{font-size:12px}
  #progress .pnote{display:none}
  #progress .pbar{height:8px;margin-top:3px}
}
/* Stream layout (1920x1080): larger type. */
#progress.stream .pr{font-size:18px}
#progress.stream .pbar{height:14px}
#progress.stream .pnote{font-size:15px}