/* ============================================================
   BASHCOIN — screens
   ============================================================ */

/* ---------- session header ---------- */
.topbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;
  border-bottom:1px solid var(--stroke)}
.topbar__user{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-width:0;
  min-height:var(--tap);padding:0 var(--sp-1);border-radius:var(--r-sm);
  transition:background var(--t-press) linear}
.topbar__user:active{background:var(--surface-2)}
.topbar__user>span:last-child{display:block;min-width:0}
.topbar__name{display:block;font-size:var(--fs-sub);font-weight:700;line-height:1.3;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the login line: user@bashcoin */
.topbar__name::after{content:"@bashcoin";color:var(--text-3);font-weight:400}
.topbar__rank{display:flex;align-items:center;gap:.5ch;font-size:var(--fs-badge);
  font-weight:400;color:var(--text-3)}
.topbar__rank::before{content:"tier:";color:var(--primary);opacity:.7}
.topbar__rank svg{width:13px;height:13px;flex:none}
.topbar__actions{display:flex;gap:var(--sp-1)}

.page__title{font-size:var(--fs-h3);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  line-height:var(--lh-tight);margin:var(--sp-4) 0 var(--sp-1);color:var(--text)}
.page__title::before{content:"$ ";color:var(--primary);font-weight:400}
.page__sub{font-size:var(--fs-label);font-weight:400;color:var(--text-3);margin-bottom:var(--sp-4)}
.page__sub::before{content:"# ";color:var(--text-3)}

/* ============================================================
   HOME — the key you hold down
   ============================================================ */
/* The coin's size lives in one variable so the space around it can be
   derived from it. The dashed orbit reaches 13% of the coin's width past its
   edge; the margins below clear that, so the decoration never runs up into
   the energy panel or down into the hint, whatever the screen size. */
.tapzone{--coin:min(56vw,226px);--orbit:calc(var(--coin) * .14);
  position:relative;display:grid;place-items:center;
  margin-top:calc(var(--orbit) + var(--sp-5));
  padding-bottom:calc(var(--orbit) + var(--sp-2));perspective:700px}

.coin{
  position:relative;
  width:var(--coin);
  aspect-ratio:1;
  border:0;background:none;border-radius:50%;
  transform-style:preserve-3d;
  transition:transform var(--t-press) var(--e-out);
  animation:coinIdle 6s ease-in-out infinite;
}
@keyframes coinIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.coin.is-hit{animation:none}
.coin:active{transform:scale(.955)}

/* the tube glow the token sits in */
.coin__halo{position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(79,227,143,.3),transparent 62%);
  filter:blur(16px);transition:opacity var(--t-press) linear}
.coin:active .coin__halo{opacity:.65}

/* orbits: one static, one stepping round like a scanner */
.coin__ring{position:absolute;inset:-5%;border-radius:50%;
  border:1px solid rgba(79,227,143,.3)}
.coin__ring--2{inset:-13%;border:1px dashed rgba(79,227,143,.4);
  animation:spin 18s steps(36,end) infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* HUD targeting brackets, drawn with four corner rules */
.coin__brackets{position:absolute;inset:-3%;pointer-events:none;
  background:
    linear-gradient(var(--primary),var(--primary)) 0 0/14px 2px no-repeat,
    linear-gradient(var(--primary),var(--primary)) 0 0/2px 14px no-repeat,
    linear-gradient(var(--primary),var(--primary)) 100% 0/14px 2px no-repeat,
    linear-gradient(var(--primary),var(--primary)) 100% 0/2px 14px no-repeat,
    linear-gradient(var(--primary),var(--primary)) 0 100%/14px 2px no-repeat,
    linear-gradient(var(--primary),var(--primary)) 0 100%/2px 14px no-repeat,
    linear-gradient(var(--primary),var(--primary)) 100% 100%/14px 2px no-repeat,
    linear-gradient(var(--primary),var(--primary)) 100% 100%/2px 14px no-repeat;
  opacity:.65;transition:opacity var(--t-press) linear,transform var(--t-press) var(--e-out)}
.coin:active .coin__brackets{opacity:1;transform:scale(.97)}

.coin__svg{position:relative;display:block;width:100%;height:100%;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,179,71,.3))}

/* the CRT line pattern laid over the token, clipped to the disc */
.coin__scan{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.38) 0 1px,transparent 1px 3px);
  opacity:.55}

/* the command the button stands for */
.coin__tag{position:absolute;left:50%;bottom:-13%;transform:translateX(-50%);
  padding:2px 8px;border-radius:2px;background:var(--bg-0);
  border:1px solid var(--stroke-strong);
  font-size:var(--fs-badge);font-weight:700;color:var(--primary);letter-spacing:.08em}

.tap-hint{margin-top:var(--sp-3);font-size:var(--fs-label);font-weight:400;color:var(--text-3);
  text-align:center;min-height:18px}
.tap-hint b{color:var(--brand);font-weight:700}

/* ---------- mining log ---------- */
.log{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);min-height:74px;
  background:var(--bg-1);border:1px solid var(--stroke);border-radius:var(--r-sm);
  font-size:var(--fs-badge);line-height:1.75;color:var(--text-3);overflow:hidden}
.log__line{display:flex;gap:.8ch;white-space:nowrap;animation:logIn var(--t-fast) var(--e-out) both}
@keyframes logIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.log__line::before{content:">";color:var(--primary);opacity:.8}
.log__line b{color:var(--success);font-weight:700}
.log__line i{font-style:normal;color:var(--text-3);margin-left:auto}
.log__line--idle::before{content:"#";opacity:.5}

/* ---------- energy + boosts ---------- */
.hud{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);
  padding:var(--sp-2) var(--sp-3);background:var(--bg-1);
  border:1px solid var(--stroke);border-radius:var(--r-sm)}
.energy{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-width:0}
.energy__ic{width:16px;height:16px;flex:none;color:var(--primary)}
.energy__ic svg{width:100%;height:100%}
.energy__body{flex:1;min-width:0}
.energy__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);margin-bottom:4px}
.energy__val{font-size:var(--fs-label);font-weight:700}
.energy__val i{font-style:normal;color:var(--text-3);font-weight:400}
.energy__meta{font-size:var(--fs-label);font-weight:400;color:var(--text-3);white-space:nowrap}

.hud__boost{position:relative;width:var(--tap);height:var(--tap);flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--text-3);
  background:transparent;border:1px solid var(--stroke-strong);
  transition:color var(--t-press) linear,border-color var(--t-press) linear}
.hud__boost svg{width:var(--icon-md);height:var(--icon-md)}
.hud__boost:active{transform:translateY(1px)}
.hud__boost i{position:absolute;right:-1px;bottom:-1px;min-width:15px;height:14px;padding:0 3px;
  border-radius:2px;display:grid;place-items:center;font-style:normal;
  font-size:var(--fs-badge);font-weight:700;line-height:1;
  background:var(--bg-1);color:var(--text-3);border:1px solid var(--stroke-strong)}
.hud__boost.is-ready{border-color:var(--primary);color:var(--primary)}
.hud__boost.is-ready i{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.hud__boost.is-spent{opacity:.35}
.hud__boost.is-live{border-color:var(--brand);color:var(--brand);box-shadow:var(--glow-amber);
  animation:pulseGold 1s steps(2,end) infinite}

/* ---------- combo ---------- */
.combo{position:fixed;left:50%;top:calc(var(--sat) + 58px);transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:.6ch;padding:4px 10px;border-radius:var(--r-sm);
  font-size:var(--fs-badge);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--bg-1);border:1px solid var(--brand);color:var(--brand);
  opacity:0;transition:opacity var(--t-press) linear;pointer-events:none}
.combo svg{width:13px;height:13px}
.combo.is-on{opacity:1}

/* ============================================================
   LEADERS — like `top`, dressed up
   Grid: 4px. Content width at 390px: 358px (16px gutters).
   Place colours: gold / silver / bronze, the league palette.
   ============================================================ */
.lb{--gold-c:#FFC83D;--silver-c:#C9CEE0;--bronze-c:#CD7F32}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin:var(--sp-4) 0 var(--sp-3)}
.lb-head .page__title{margin:0}
.lb-live{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:2px;
  border:1px solid var(--stroke);font-size:var(--fs-badge);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.lb-live i{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:lb-pulse 2s var(--e-out) infinite}
@keyframes lb-pulse{0%{box-shadow:0 0 0 0 rgba(79,227,143,.55)}70%,100%{box-shadow:0 0 0 6px rgba(79,227,143,0)}}

/* ---------- your place ---------- */
.lb-me{padding:var(--sp-4);overflow:hidden;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(255,179,71,.10),transparent 55%),
    linear-gradient(180deg,var(--surface),var(--bg-1))}
.lb-me::after{border-color:var(--brand)}
.lb-me__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.lb-me__rankbox{display:flex;flex-direction:column;gap:2px;min-width:0}
.lb-me__rank{font-size:44px;line-height:48px;font-weight:800;letter-spacing:-.02em;color:var(--text);
  text-shadow:0 0 18px rgba(79,227,143,.22)}
.lb-me__hash{font-size:24px;font-weight:700;color:var(--primary);margin-right:2px;vertical-align:14px}
.lb-me__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2);padding-top:2px}
.lb-me__pct{height:24px;display:inline-flex;align-items:center;padding:0 8px;border-radius:2px;
  background:var(--primary);color:var(--on-primary);font-size:var(--fs-badge);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.lb-me__league{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:2px;
  border:1px solid var(--lc);color:var(--lc);font-size:var(--fs-badge);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.lb-me__total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px dashed var(--stroke)}
.lb-me__total b{font-size:var(--fs-lead);font-weight:800;color:var(--brand);white-space:nowrap}
.lb-me__next{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  margin-top:var(--sp-3);font-size:var(--fs-label);color:var(--text-3)}
.lb-me__next b{color:var(--text)}
.lb-me__gap{color:var(--primary);font-weight:700}
.lb-me__bar{display:block;height:4px;margin-top:var(--sp-2);background:var(--bg-0);
  border:1px solid var(--stroke);overflow:hidden}
.lb-me__bar i{display:block;height:100%;background:linear-gradient(90deg,rgba(79,227,143,.25),var(--primary));
  box-shadow:0 0 8px rgba(79,227,143,.5);transform-origin:left;animation:lb-grow .9s var(--e-out) both}
@keyframes lb-grow{from{transform:scaleX(0)}}
.lb-me__note{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0 0;
  font-size:var(--fs-label);color:var(--text-3)}
.lb-me__note--top{color:var(--brand);font-weight:700}
.lb-me__note svg{width:16px;height:16px}
.lb-seg{margin-top:var(--sp-4)}

/* ---------- podium ---------- */
.lb-podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:var(--sp-2);
  margin:var(--sp-8) 0 0}
.lb-pod{--rc:var(--bronze-c);display:flex;flex-direction:column;align-items:center;min-width:0;
  animation:lb-rise .5s var(--e-out) both;animation-delay:calc(var(--i) * 70ms)}
.lb-pod--1{--rc:var(--gold-c)}
.lb-pod--2{--rc:var(--silver-c)}
@keyframes lb-rise{from{opacity:0;transform:translateY(12px)}}
.lb-pod__ava{position:relative;margin-bottom:var(--sp-2)}
.lb-pod .ava{width:48px;height:48px;font-size:var(--fs-sub);border:2px solid var(--rc);color:var(--rc);
  box-shadow:0 0 0 3px var(--bg-0),0 0 0 4px color-mix(in srgb,var(--rc) 35%,transparent)}
.lb-pod--1 .ava{width:60px;height:60px;font-size:var(--fs-body);
  box-shadow:0 0 0 3px var(--bg-0),0 0 0 4px color-mix(in srgb,var(--rc) 45%,transparent),
    0 0 28px -4px color-mix(in srgb,var(--rc) 60%,transparent)}
.lb-pod__badge{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;display:grid;place-items:center;
  border-radius:2px;background:var(--rc);color:#120D02;font-size:11px;font-weight:800;
  box-shadow:0 0 0 2px var(--bg-0)}
.lb-pod__crown{position:absolute;left:50%;top:-24px;width:20px;height:20px;margin-left:-10px;color:var(--rc);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rc) 70%,transparent));animation:lb-float 3s ease-in-out infinite}
.lb-pod__crown svg{width:20px;height:20px;fill:color-mix(in srgb,var(--rc) 25%,transparent)}
@keyframes lb-float{50%{transform:translateY(-3px)}}
.lb-pod__name{max-width:100%;padding:0 2px;font-size:var(--fs-label);font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:16px}
.lb-pod .lb-tag{margin:4px 0 0}
.lb-pod__val{margin-top:4px;font-size:11px;font-weight:700;color:var(--brand);line-height:16px;white-space:nowrap}
.lb-pod__plinth{position:relative;width:100%;margin-top:var(--sp-2);display:grid;place-items:center;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--rc) 35%,var(--stroke));border-bottom:0;border-top:2px solid var(--rc);
  background:
    repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.18) 3px 4px),
    linear-gradient(180deg,color-mix(in srgb,var(--rc) 16%,transparent),transparent 85%)}
.lb-pod__plinth span{font-size:28px;font-weight:800;line-height:1;color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--rc) 75%,transparent);letter-spacing:.02em}
.lb-pod--1 .lb-pod__plinth{height:80px;box-shadow:0 -12px 32px -16px var(--rc)}
.lb-pod--1 .lb-pod__plinth span{font-size:36px}
.lb-pod--2 .lb-pod__plinth{height:56px}
.lb-pod--3 .lb-pod__plinth{height:40px}
.lb-pod.is-me .lb-pod__name{color:var(--primary)}

/* ---------- table ---------- */
.lb-table{margin-top:0;padding-top:var(--sp-5);border-top:1px solid var(--stroke)}
.lb-cols{font-size:var(--fs-badge);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.lb-list{list-style:none;margin:0;padding:0}
.lb-row{position:relative;display:grid;grid-template-columns:28px 36px minmax(0,1fr) auto;align-items:center;
  column-gap:var(--sp-3);min-height:60px;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-1);
  border-bottom:1px solid var(--stroke);animation:lb-in .38s var(--e-out) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes lb-in{from{opacity:0;transform:translateY(6px)}}
.lb-row__pos{font-size:var(--fs-sub);font-weight:700;color:var(--text-3);text-align:right}
.lb-row.is-top .lb-row__pos{color:var(--text-2)}
.lb-row__ava{width:36px;height:36px;font-size:11px}
.lb-row__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.lb-row__name{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-sub);font-weight:700;
  color:var(--text);line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row__league{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-badge);font-weight:500;
  letter-spacing:.04em;color:var(--lc);line-height:14px}
.lb-row__league svg{flex:none}
.lb-row__val{font-size:var(--fs-label);font-weight:800;color:var(--brand);text-align:right;white-space:nowrap}
.lb-row__bar{position:absolute;left:68px;right:var(--sp-2);bottom:-1px;height:2px;pointer-events:none}
.lb-row__bar i{display:block;height:100%;background:linear-gradient(90deg,rgba(255,179,71,.05),rgba(255,179,71,.55));
  transform-origin:left;animation:lb-grow .7s var(--e-out) both;animation-delay:calc(var(--i) * 28ms + .15s)}
.lb-row.is-me{background:linear-gradient(90deg,rgba(79,227,143,.10),rgba(79,227,143,.02));
  box-shadow:inset 2px 0 0 var(--primary)}
.lb-row.is-me .lb-row__pos{color:var(--primary)}
.lb-row.is-me .lb-row__bar i{background:linear-gradient(90deg,rgba(79,227,143,.1),var(--primary))}
.lb-tag{flex:none;display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:2px;
  background:var(--primary);color:var(--on-primary);font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;line-height:1}
.lb-gap{display:flex;justify-content:center;height:28px;align-items:center;color:var(--text-3);
  letter-spacing:.3em;border-bottom:1px dashed var(--stroke)}
.lb-hint{text-align:center;margin-top:var(--sp-4)}

/* ---------- leagues ---------- */
.lb-ladder{margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.lb-leagues{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.lb-leagues::-webkit-scrollbar{display:none}
.lb-league{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:2px;
  border:1px dashed var(--stroke);color:var(--text-3);font-size:var(--fs-badge);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.lb-league.is-done{border-style:solid;color:var(--text-2)}
.lb-league.is-cur{border:1px solid var(--lc);color:var(--lc);
  background:color-mix(in srgb,var(--lc) 12%,transparent);box-shadow:0 0 16px -6px var(--lc)}

/* ---------- loading ---------- */
.lb-skel-pod{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:var(--sp-2);align-items:end;margin-top:var(--sp-8)}
.lb-skel-pod span{display:block;height:96px;border:1px solid var(--stroke);border-bottom:0}
.lb-skel-pod span:nth-child(2){height:136px}
.lb-skel-pod span:nth-child(3){height:80px}
.lb-skel{display:grid;grid-template-columns:28px 36px 1fr 88px;column-gap:var(--sp-3);align-items:center;
  min-height:60px;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-1);border-bottom:1px solid var(--stroke)}
.lb-skel>span,.lb-skel i,.lb-skel-pod span{
  background:linear-gradient(90deg,var(--surface) 0,var(--surface-2) 40%,var(--surface) 80%);
  background-size:200% 100%;animation:lb-shimmer 1.4s linear infinite}
.lb-skel>span:nth-child(1){height:12px}
.lb-skel>span:nth-child(2){height:36px}
.lb-skel>span:nth-child(3){display:flex;flex-direction:column;gap:6px;background:none;animation:none}
.lb-skel i{display:block;height:12px;width:70%}
.lb-skel i+i{height:8px;width:40%}
.lb-skel>span:nth-child(4){height:12px}
@keyframes lb-shimmer{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  .lb-pod,.lb-row,.lb-me__bar i,.lb-row__bar i,.lb-pod__crown,.lb-live i,
  .lb-skel>span,.lb-skel i,.lb-skel-pod span{animation:none}
}

/* ============================================================
   MARKET — like a package list
   ============================================================ */
.shop-grid{display:grid;gap:0;border-top:1px solid var(--stroke)}
.shop-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  padding:var(--sp-3) var(--sp-2);border-radius:0;
  background:transparent;border:0;border-bottom:1px solid var(--stroke);
  transition:background var(--t-press) linear}
.shop-item:active{background:var(--surface-2)}
.shop-item.is-max{opacity:.45}
.shop-item__ic{width:34px;height:34px;flex:none;border-radius:0;display:grid;place-items:center;
  color:var(--primary);background:none;box-shadow:none}
.shop-item__ic svg{width:22px;height:22px}
.shop-item__main{display:block;flex:1;min-width:0}
.shop-item__t{font-size:var(--fs-sub);font-weight:700;display:flex;align-items:baseline;gap:.6ch;
  line-height:var(--lh-snug);color:var(--text)}
.shop-item__lvl{flex:none;font-size:var(--fs-badge);font-weight:400;padding:0;border-radius:0;
  background:none;color:var(--text-3)}
.shop-item__lvl::before{content:"ур."}
.shop-item__d{display:block;font-size:var(--fs-label);font-weight:400;color:var(--text-3);margin-top:2px;
  line-height:var(--lh-snug)}
.shop-item__gain{display:block;font-size:var(--fs-label);font-weight:700;color:var(--success);margin-top:3px}
.shop-item__buy{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-1)}
.price{display:inline-flex;align-items:baseline;gap:.4ch;font-size:var(--fs-label);font-weight:700;
  color:var(--brand);white-space:nowrap}
.price svg{width:0;height:0}
.price--cant{color:var(--text-3)}

/* tier numeral, level meter and the locked state of a card */
.shop-item__tier{flex:none;min-width:2.4ch;font-size:var(--fs-badge);font-weight:700;
  color:var(--primary);opacity:.8}
.shop-item__bar{display:block;height:3px;margin-top:6px;background:var(--stroke);max-width:140px}
.shop-item__bar i{display:block;height:100%;background:var(--primary)}
.shop-item.is-locked{opacity:.5;cursor:default}
.shop-item.is-locked .shop-item__ic{color:var(--text-3)}
.shop-item.is-locked .shop-item__gain{color:var(--text-3)}

/* ============================================================
   WALLET — a ledger
   ============================================================ */
.wallet-hero{padding:var(--sp-4);border-radius:var(--r-sm);position:relative;overflow:hidden;
  background:var(--bg-1);border:1px solid var(--stroke-strong)}
.wallet-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 100% 0%,rgba(255,179,71,.14),transparent 60%)}
.wallet-hero__label{font-size:var(--fs-badge);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3)}
.wallet-hero__val{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.01em;
  margin-top:var(--sp-1);display:flex;align-items:baseline;gap:.5ch;color:var(--brand);
  text-shadow:var(--glow-amber);position:relative}
.wallet-hero__frac{font-size:var(--fs-sub);font-weight:500;color:var(--amber-700);text-shadow:none}
.wallet-hero__unit{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;color:var(--amber-700);
  text-shadow:none;margin-left:.4ch}
.wallet-hero__fiat{font-size:var(--fs-label);font-weight:400;color:var(--text-3);margin-top:2px;position:relative}
.wallet-hero__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);
  margin-top:var(--sp-4);position:relative}
.wallet-hero__actions .btn{min-height:var(--tap);font-size:var(--fs-badge);padding:0 var(--sp-1);
  flex-direction:row;gap:.5ch}
.wallet-hero__actions .btn svg{width:14px;height:14px}

.addr{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:var(--tap);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
  background:var(--bg-1);border:1px dashed var(--stroke-control);
  font-size:var(--fs-label);font-weight:400;color:var(--text-2);text-align:left}
.addr span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr svg{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--text-3)}

/* ============================================================
   FRIENDS
   ============================================================ */
.ref-card{padding:var(--sp-4);border-radius:var(--r-sm);text-align:left;position:relative;overflow:hidden;
  background:var(--bg-1);border:1px solid var(--stroke-strong)}
.ref-card__ic{width:28px;height:28px;color:var(--primary)}
.ref-card__ic svg{width:100%;height:100%}
.ref-card__t{font-size:var(--fs-lead);font-weight:700;margin-top:var(--sp-2);
  letter-spacing:.04em;line-height:var(--lh-snug)}
.ref-card__s{font-size:var(--fs-label);font-weight:400;color:var(--text-2);margin-top:var(--sp-2);
  line-height:var(--lh-body)}
.ref-bonus{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--sp-3);
  background:var(--stroke);border:1px solid var(--stroke)}
.ref-bonus div{padding:var(--sp-2);background:var(--bg-0);border:0;border-radius:0;text-align:center}
.ref-bonus b{display:block;font-size:var(--fs-sub);font-weight:700;color:var(--brand)}
.ref-bonus i{font-style:normal;font-size:var(--fs-badge);font-weight:400;color:var(--text-3)}

/* ============================================================
   MORE — a config screen
   ============================================================ */
.profile{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-sm);
  background:var(--bg-1);border:1px solid var(--stroke)}
.profile__name{font-size:var(--fs-body);font-weight:700;line-height:var(--lh-snug)}
.profile__id{font-size:var(--fs-label);font-weight:400;color:var(--text-3);margin-top:1px}
.lvl-badge{display:inline-flex;align-items:center;gap:.5ch;margin-top:var(--sp-2);
  padding:3px 8px;border-radius:2px;
  background:none;border:1px solid var(--brand);color:var(--brand);
  font-size:var(--fs-badge);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.lvl-badge svg{width:12px;height:12px}

/* a checkbox, not a pill — this is a config file */
.switch{width:40px;height:22px;flex:none;border-radius:2px;background:transparent;
  border:1px solid var(--stroke-control);position:relative;
  transition:background var(--t-press) linear,border-color var(--t-press) linear}
.switch::after{content:"off";position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--fs-badge);font-weight:700;letter-spacing:.06em;color:var(--text-3);
  background:none;border-radius:0;box-shadow:none;transform:none;transition:color var(--t-press) linear}
.switch.is-on{background:var(--primary);border-color:var(--primary)}
.switch.is-on::after{content:"on";color:var(--on-primary);transform:none}

/* ---------- daily ---------- */
.daily{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--stroke);
  border:1px solid var(--stroke)}
.daily__cell{padding:var(--sp-2) 2px;border-radius:0;text-align:center;
  background:var(--bg-1);border:0}
.daily__cell.is-done{background:var(--surface-2)}
.daily__cell.is-done .daily__v{color:var(--text-3)}
.daily__cell.is-today{background:var(--bg-0);box-shadow:inset 0 0 0 1px var(--primary);
  animation:pulseGold 1.4s steps(2,end) infinite}
@keyframes pulseGold{0%,100%{opacity:1}50%{opacity:.72}}
.daily__d{font-size:var(--fs-badge);font-weight:400;color:var(--text-3)}
.daily__v{font-size:var(--fs-label);font-weight:700;color:var(--brand);margin-top:2px}
.daily__check{width:11px;height:11px;margin:2px auto 0;color:var(--success)}

/* ---------- tasks ---------- */
.task__status{display:inline-flex;align-items:center;gap:.5ch;font-size:var(--fs-badge);font-weight:700;
  padding:4px 8px;border-radius:2px;background:none;border:1px solid var(--stroke-strong);color:var(--text-3)}
.task__status svg{width:12px;height:12px}
.task__status.is-ready{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.task__status.is-done{color:var(--success);border-color:var(--stroke);background:none}

/* ============================================================
   PHONE TUNING
   ============================================================ */
@media (max-width:359.98px){
  :root{--pad:11px;--gap:8px;--fs-body:14px;--fs-lead:16px;--fs-h2:22px;--fs-h3:18px;--fs-h1:27px}
  .tapzone{--coin:min(62vw,200px)}
  .menu{grid-template-columns:1fr}
  .tile{min-height:50px}
  .wallet-hero__actions .btn{font-size:var(--fs-badge);letter-spacing:.04em}
  .ref-bonus b{font-size:var(--fs-label)}
  .reel__cell svg{width:46px;height:46px}
  .dice-num{font-size:40px}
  .crash-mult span{font-size:34px}
  .wheel-wrap{width:210px;height:210px}
}

@media (max-height:700px){
  .tapzone{--coin:min(50vw,180px)}
  .balance{padding:var(--sp-2) 0}
  .log{min-height:56px}
}

@media (orientation:landscape) and (max-height:520px){
  .menu{grid-template-columns:repeat(3,1fr)}
  .tapzone{--coin:min(30vw,160px)}
  .lobby{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .daily{grid-template-columns:repeat(8,1fr)}
}

/* ================================================================ *
 * P2P exchange
 * ================================================================ */
.p2p-entry{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left}
.p2p-entry>svg{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--text-3)}
.p2p-entry__ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--r-sm);
  border:1px solid var(--stroke);color:var(--brand)}
.p2p-entry__ic svg{width:22px;height:22px}
.p2p-entry__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.p2p-entry__t{font-weight:700;color:var(--text)}
.p2p-entry__s{font-size:var(--fs-label);color:var(--text-3);line-height:1.4}

.p2p-wallet__row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3)}
.p2p-wallet__val{font-size:var(--fs-h2);font-weight:800;color:var(--brand);line-height:1.15;margin-top:4px;word-break:break-all}
.p2p-wallet__held{font-size:var(--fs-lead);font-weight:700;color:var(--text-2);margin-top:4px}
.p2p-wallet__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-3)}
.p2p-count{color:var(--brand);font-weight:800}
.p2p-loading{padding:var(--sp-6) 0;text-align:center;color:var(--text-3);font-size:var(--fs-sub)}
.p2p-loading::before{content:"> ";color:var(--primary)}

.p2p-tag{display:inline-flex;align-items:center;padding:1px 6px;border-radius:2px;border:1px solid currentColor;
  font-size:var(--fs-badge);font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.p2p-tag--ok{color:var(--success)}
.p2p-tag--amber{color:var(--brand)}
.p2p-tag--wire{color:var(--info)}
.p2p-tag--alert{color:var(--danger)}
.p2p-tag--mute{color:var(--text-3)}

.p2p-ad{margin-bottom:var(--sp-3)}
.p2p-ad__head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.p2p-ad__who{flex:1;min-width:0}
.p2p-ad__name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p2p-ad__rep{font-size:var(--fs-label);color:var(--text-3)}
.p2p-ad__price{margin-left:auto;text-align:right;font-size:var(--fs-lead);font-weight:800;color:var(--brand)}
.p2p-ad__price span{display:block;font-size:var(--fs-badge);font-weight:400;color:var(--text-3)}
.p2p-ad__facts{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin:var(--sp-3) 0 var(--sp-2)}
.p2p-ad__facts dt{font-size:var(--fs-badge);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.p2p-ad__facts dd{margin:2px 0 0;font-weight:700}
.p2p-ad__methods{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-3)}
.p2p-method{padding:2px 8px;border-radius:2px;background:var(--bg-1);border:1px dashed var(--stroke);
  font-size:var(--fs-label);color:var(--text-2)}
.p2p-ad__terms{margin:0 0 var(--sp-3);font-size:var(--fs-sub);color:var(--text-2);line-height:1.45;
  border-left:2px solid var(--stroke);padding-left:var(--sp-2);overflow-wrap:anywhere}
.p2p-ad__ctl{display:flex;gap:var(--sp-2)}
.p2p-ad__ctl .btn{flex:1}
.ava--sm{width:34px;height:34px;font-size:var(--fs-label)}
.p2p-trow{background:none;border:0;text-align:left;color:inherit}
.p2p-trow .row__title{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* forms */
.p2p-form{display:flex;flex-direction:column;gap:var(--sp-3);text-align:left}
.p2p-form__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{font-size:var(--fs-badge);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.field__box{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);min-height:var(--tap);
  border-radius:var(--r-sm);background:var(--bg-0);border:1px solid var(--stroke-control)}
.field__box::before{content:">";color:var(--primary);font-weight:700}
.field__box--area{align-items:flex-start;padding-top:10px;padding-bottom:10px}
.field__box:focus-within{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.field__box input,.field__box textarea{flex:1;min-width:0;min-height:calc(var(--tap) - 2px);background:none;border:0;outline:none;
  font:inherit;font-size:16px;color:var(--text)}
.field__box textarea{min-height:60px;resize:vertical}
.field__hint{font-size:var(--fs-label);color:var(--text-3);line-height:1.4}
.chips--wrap{flex-wrap:wrap;overflow:visible}
.p2p-summary{font-size:var(--fs-sub);color:var(--text-2);line-height:1.5}
.p2p-summary:empty{display:none}

/* trade */
.p2p-trade{text-align:center}
.p2p-trade__top{display:flex;justify-content:center;align-items:center;gap:var(--sp-2);font-size:var(--fs-sub);color:var(--text-2)}
.p2p-trade__amount{margin-top:var(--sp-2);font-size:var(--fs-h1);font-weight:800;color:var(--brand);word-break:break-all;line-height:1.1}
.p2p-trade__pay{margin-top:var(--sp-2);color:var(--text-3);font-size:var(--fs-sub)}
.p2p-trade__pay b{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-size:var(--fs-lead);cursor:pointer;
  min-height:var(--tap);padding:0 4px}
.p2p-trade__pay svg{width:16px;height:16px;color:var(--text-3)}
.p2p-trade__guide{margin:var(--sp-3) 0 0;font-size:var(--fs-sub);color:var(--text-2);line-height:1.5;text-align:left}
.p2p-timer{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-2);padding:6px 10px;border-radius:var(--r-sm);
  border:1px solid var(--stroke);font-size:var(--fs-sub);color:var(--text-2)}
.p2p-timer svg{width:16px;height:16px}
.p2p-timer b{color:var(--brand)}
.p2p-timer.is-low{border-color:var(--danger)}
.p2p-timer.is-low b{color:var(--danger)}
.p2p-kv{margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.p2p-kv>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--sp-2);align-items:center}
.p2p-kv dt{font-size:var(--fs-label);color:var(--text-3)}
.p2p-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.addr--sm{min-height:var(--tap);padding:0 var(--sp-2);min-width:0;max-width:100%}
.p2p-actions{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.p2p-actions:empty{display:none}
.p2p-chat{min-width:0;display:flex;flex-direction:column;gap:var(--sp-2);max-height:320px;overflow-y:auto;padding:2px}
.p2p-msg{max-width:85%;min-width:0;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--stroke);align-self:flex-start}
.p2p-msg--me{align-self:flex-end;border-color:var(--primary)}
.p2p-msg--sys{align-self:stretch;max-width:none;background:none;border-style:dashed;color:var(--text-2)}
.p2p-msg__who{font-size:var(--fs-badge);color:var(--text-3);margin-bottom:2px}
.p2p-msg__body{font-size:var(--fs-sub);line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.p2p-send{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.p2p-send input{flex:1;min-width:0;min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--r-sm);
  background:var(--bg-0);border:1px solid var(--stroke-control);color:var(--text);font-size:16px;outline:none}
.p2p-send input:focus{border-color:var(--primary)}
.p2p-send .iconbtn svg{transform:rotate(90deg)}

/* promo code entry */
.promo{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2)}
.promo__box{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);min-height:var(--tap-lg);
  border-radius:var(--r-sm);background:var(--bg-1);border:1px solid var(--stroke-control)}
.promo__box:focus-within{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.promo__box span{display:grid;color:var(--brand)}
.promo__box svg{width:18px;height:18px}
.promo__box input{flex:1;min-width:0;min-height:var(--tap);background:none;border:0;outline:none;
  font:inherit;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.promo__box input::placeholder{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-3)}