/* ============================================================
   BASHCOIN — reset, shell, CRT backdrop
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--tracking);
  color:var(--text);
  background:var(--bg-0);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
button{font:inherit;color:inherit;border:0;padding:0;background:none;cursor:pointer;text-align:left}
input{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
::-webkit-scrollbar{width:0;height:0}
::selection{background:var(--primary);color:var(--on-primary)}

.num,.tnum{font-variant-numeric:tabular-nums}
.display{font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ---------- focus ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}
.tabbar :focus-visible{outline-offset:-2px}
[aria-hidden="true"]{pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   CRT backdrop
   ============================================================ */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg-0)}

/* the phosphor wash coming off the tube */
.aurora__blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.22;will-change:transform}
.aurora__blob--gold{width:70vw;height:70vw;left:-10vw;top:-6vh;
  background:radial-gradient(circle,var(--phos-500),transparent 70%);
  animation:breathe 14s ease-in-out infinite}
.aurora__blob--violet{width:60vw;height:60vw;right:-18vw;bottom:6vh;
  background:radial-gradient(circle,var(--amber-500),transparent 70%);opacity:.12;
  animation:breathe 19s ease-in-out infinite reverse}
.aurora__blob--cyan{display:none}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* the character grid the whole interface sits on */
.aurora__grid{position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(79,227,143,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,227,143,.055) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(130% 90% at 50% 10%,#000 10%,transparent 78%);
  mask-image:radial-gradient(130% 90% at 50% 10%,#000 10%,transparent 78%)}

/* scanlines + vignette + grain, the three things that say "tube" */
.aurora__noise{position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(
      180deg,
      var(--scanline) 0,
      var(--scanline) 1px,
      transparent 1px,
      transparent var(--scanline-size)
    ),
    radial-gradient(130% 100% at 50% 50%,transparent 52%,rgba(0,0,0,.72) 100%);
  opacity:.75}
.aurora__noise::after{content:"";position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3,end) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}}

/* ---------- app shell ---------- */
.frame{position:fixed;inset:0;z-index:1}

.app{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;
  padding-top:var(--sat);
  padding-bottom:calc(var(--tabbar-h) + var(--sab));
}
.view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:var(--sp-2) var(--pad) var(--sp-6);scroll-behavior:smooth;
  scroll-padding-bottom:calc(var(--tabbar-h) + var(--sp-4));
  scroll-padding-top:var(--sp-4)}
.view--locked{overflow:hidden}

/* page transition: content types itself in rather than sliding */
.page{animation:pageIn var(--t-enter) var(--e-out) both}
@keyframes pageIn{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.stagger>*{animation:riseIn var(--t) var(--e-out) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.05s}
.stagger>*:nth-child(3){animation-delay:.08s}
.stagger>*:nth-child(4){animation-delay:.11s}
.stagger>*:nth-child(5){animation-delay:.14s}
.stagger>*:nth-child(6){animation-delay:.17s}
.stagger>*:nth-child(n+7){animation-delay:.2s}
@keyframes riseIn{from{opacity:0;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}

/* the blinking block cursor, used anywhere a prompt waits */
.caret{display:inline-block;width:.62em;height:1.05em;vertical-align:-.16em;
  background:var(--primary);box-shadow:var(--glow-phos);
  animation:blink 1.06s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:var(--sp-3);padding:0 var(--sp-6);background:var(--bg-0);
  font-size:var(--fs-sub);color:var(--primary);transition:opacity var(--t-exit) var(--e-in)}
.boot.is-done{opacity:0;pointer-events:none}
.boot__coin{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
  font-size:var(--fs-label);color:var(--text-3);animation:none}
.boot__coin::before{content:"bashcoin v1.0 · tty0 · phosphor"}
.boot__name{font-weight:700;letter-spacing:.3em;font-size:var(--fs-h3);color:var(--text);text-indent:.3em}
.boot__name::after{content:"";display:inline-block;width:.6em;height:1em;vertical-align:-.14em;
  margin-left:.2em;background:var(--primary);animation:blink 1.06s steps(1,end) infinite}
.boot__bar{width:min(260px,70%);height:10px;border:1px solid var(--stroke-strong);
  border-radius:0;background:none;overflow:hidden;padding:1px}
.boot__bar i{display:block;height:100%;width:0;border-radius:0;background:var(--primary);
  box-shadow:var(--glow-phos);animation:bootFill 1.3s var(--e-step) infinite}
@keyframes bootFill{from{width:0}to{width:100%}}

@media (prefers-reduced-motion:reduce){
  .aurora__blob,.aurora__noise::after,.caret,.boot__name::after,.boot__bar i,
  .coin,.coin__ring--2,.hud__boost.is-live,.daily__cell.is-today{animation:none!important}
  .page,.stagger>*{animation:none!important;opacity:1!important;transform:none!important}
  .aurora__noise{background-image:radial-gradient(130% 100% at 50% 50%,transparent 52%,rgba(0,0,0,.72) 100%)}
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:80ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   WIDE SCREENS — the app becomes a terminal window on a desk
   On a real phone (android|ios detected via tg.js), this block is
   never reached because the `data-platform=mobile` rule below
   overrides it. Only desktop Telegram clients get a framed view.
   ============================================================ */
@media (min-width:520px){
  body{background:#020503}

  /* The frame must never be wider or taller than what is actually on screen.
     `100%` (not `100vw`) so a scrollbar never inflates it past the viewport,
     and `dvh` so a collapsing Telegram WebView chrome cannot clip the frame.
     Without both, a phone whose CSS width crosses 520 while its visible area
     is narrower gets the desktop frame cut off on the right. */
  .frame{
    --frame-w:min(420px,100%);
    --frame-h:min(880px,94vh);
    inset:auto;left:50%;top:50%;
    width:var(--frame-w);height:var(--frame-h);
    max-width:100%;max-height:100dvh;
    transform:translate(-50%,-50%);
    border-radius:var(--r-xl);
    overflow:hidden;
    border:1px solid var(--stroke-strong);
    box-shadow:0 0 0 1px rgba(0,0,0,.9),0 40px 120px rgba(0,0,0,.85),
               0 0 90px rgba(79,227,143,.12);
    background:var(--bg-0);
  }
  .aurora{opacity:.45}

  .app,.tabbar,.fx-layer,.toasts,.scrim,.boot{position:absolute}
  .boot{inset:0}
  .app{inset:0}
  .fx-layer{inset:0}
  .tabbar{left:0;right:0;bottom:0}
  .toasts{left:0;right:0;top:8px}
  .scrim{inset:0}
  .sheet{max-width:none}

  :root{--sat:0px;--sab:0px}
  .boot{border-radius:var(--r-xl)}
  .tapzone{--coin:226px}
  .view>*{max-width:none}
}

/* Real phones always get the full-bleed layout, no frame. A phone whose
   CSS width triggers the 520px breakpoint still gets the mobile layout. */
[data-platform="mobile"]{background:var(--bg-0)}
[data-platform="mobile"] .frame{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  transform:none;left:0;top:0;border-radius:0;border:0;box-shadow:none;
}
[data-platform="mobile"] .aurora{opacity:1}
[data-platform="mobile"] .app,[data-platform="mobile"] .tabbar,
[data-platform="mobile"] .fx-layer,[data-platform="mobile"] .toasts,
[data-platform="mobile"] .scrim,[data-platform="mobile"] .boot{position:fixed}

@media (min-width:520px) and (max-height:700px){
  .frame{--frame-h:96vh}
  .tapzone{--coin:min(190px,36vh)}
}