@font-face{font-family:Readex;src:url(/assets/fonts/readex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}
@font-face{font-family:Readex;src:url(/assets/fonts/readex-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+27F2-27F3;font-display:swap}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#05060b;color:#f2f2f2;font-family:Readex,system-ui,sans-serif;overflow:hidden;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
canvas{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;
  touch-action:none;cursor:grab;display:block}
canvas:active{cursor:grabbing}

.hud{position:fixed;top:0;inset-inline:0;background:linear-gradient(#05060bf0 55%,#05060b00);padding-bottom:28px!important;z-index:1;padding:calc(env(safe-area-inset-top) + 18px) 20px 0;pointer-events:none;
  text-shadow:0 2px 0 #000}
.hud h1{font-size:clamp(26px,6vw,44px);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.hud p{color:#9a9ca6;font-size:14px;margin-top:6px}
.live{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:#c9cbd3;
  border:1px solid #2a2c36;background:#05060bcc;padding:5px 10px}
.live i{width:8px;height:8px;background:#3dff7a;animation:blink 1s steps(2) infinite}
.live.stale i{background:#ffb13d}
@keyframes blink{50%{opacity:.15}}

.tools{z-index:3;position:fixed;bottom:calc(env(safe-area-inset-bottom) + 16px);inset-inline-end:16px;display:flex;gap:8px}
.tools button,.tools a{font:inherit;font-size:15px;color:#fff;background:#0b0c14ee;border:1px solid #33364a;
  min-width:48px;height:48px;padding:0 14px;display:grid;place-items:center;text-decoration:none;cursor:pointer;
  touch-action:manipulation;transition:transform .08s}
.tools button{font-size:22px}
.tools button:active,.tools a:active{transform:scale(.92);background:#1a1c2a}

#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.lb{position:absolute;left:0;top:0;white-space:nowrap;font-size:12px;line-height:1;padding:5px 7px 6px;
  background:#05060bd9;border:1px solid #3a3d52;color:#fff;will-change:transform;transition:opacity .2s}
.lb::after{content:"";position:absolute;left:50%;bottom:-5px;width:1px;height:5px;background:#3a3d52}
.lb.l1{border-color:#8a8fb0}
.lb.l2{border-color:#fff;box-shadow:0 0 0 1px #fff}
.lb.down{border-color:#ff4d3d;color:#ffb4ab}
.lb.down::before{content:"● ";color:#ff4d3d}
.lb.bot{background:#0b2a33;border-color:#5ff0ff;color:#bff9ff;font-size:13px}
.lb.hide{opacity:0}

.card{z-index:4;position:fixed;inset-inline:12px;bottom:calc(env(safe-area-inset-bottom) + 76px);max-width:380px;
  background:#07080ff2;border:1px solid #3a3d52;padding:18px 18px 14px;animation:up .18s steps(4)}
@media (min-width:700px){.card{inset-inline-start:auto;inset-inline-end:16px;bottom:80px}}
@keyframes up{from{transform:translateY(24px);opacity:0}}
.card h2{font-size:22px;font-weight:400}
.card p{color:#a4a6b0;font-size:14px;margin:6px 0 14px;line-height:1.6}
.card dl{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #23252f}
.card dl div{padding-top:10px}
.card dt{font-size:11px;color:#777a86}
.card dd{font-size:15px;margin-top:2px}
#close{position:absolute;top:6px;inset-inline-end:6px;width:40px;height:40px;background:none;border:0;color:#999;
  font-size:26px;cursor:pointer;touch-action:manipulation}
.nogl{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:#aaa}
@media (max-width:480px){.lb{font-size:11px;padding:4px 6px 5px}.lb.bot{font-size:12px}}