/* PONFLOOR - glass chrome over a 3D tower, in the ponsfamily palette:
   near-black #0D0D0D, off-white #F2F2F2, lime #D4FC50. */

:root{
  --bg:#0d0d0d;
  --bg-2:#161616;
  --bg-3:#1f1f1f;
  --ink:#f2f2f2;
  --ink-2:rgba(242,242,242,.58);
  --ink-3:rgba(242,242,242,.40);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --line-hot:rgba(212,252,80,.42);
  --acc:#d4fc50;
  --acc-ink:#111;
  --acc-soft:rgba(212,252,80,.55);
  --warn:#f5c451;
  --bad:#ff7a7a;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;

  /* Glass. backdrop-filter is spent only on the panels that actually sit over
     the moving tower; a blur on every chip stacks compositor layers over the
     WebGL canvas and the browser starts handing back blank frames. */
  --glass:linear-gradient(180deg,rgba(26,26,26,.86),rgba(16,16,16,.78));
  --glass-line:rgba(255,255,255,.11);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.10);
  --blur:blur(16px) saturate(1.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  overscroll-behavior:none;
}
[hidden]{display:none !important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#111}

/* icons ------------------------------------------------------------------ */
.ic{display:inline-flex;width:1em;height:1em;flex:0 0 auto}
.ic svg{width:100%;height:100%;display:block}

/* stage ------------------------------------------------------------------ */
/* ⚠ width and height are NOT optional here. A canvas is a replaced element,
   so `width:auto` resolves to its intrinsic size (the drawing buffer, 2560 on
   a retina display) and the over-constrained box drops `right:0` instead of
   stretching. The page then showed the top left quarter of the render and the
   tower sat off the right edge, with every projection maths check still
   reporting dead centre. */
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
#stage.busy{cursor:progress}

.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(0,0,0,.72) 0%,transparent 46%),
    radial-gradient(120% 62% at 50% 100%,rgba(0,0,0,.68) 0%,transparent 44%);
}

/* boot ------------------------------------------------------------------- */
#boot{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:var(--bg);transition:opacity .5s ease;
}
#boot.gone{opacity:0;pointer-events:none}
.boot-in{text-align:center}
.boot-in .mark{width:64px;height:64px;margin:0 auto 18px;color:var(--ink)}
.boot-in h1{margin:0;font-size:26px;letter-spacing:-.03em;font-weight:800}
.boot-in p{margin:8px 0 22px;color:var(--ink-3);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.bar{width:220px;height:3px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;margin:0 auto}
.bar i{display:block;height:100%;width:0%;background:var(--acc);transition:width .3s ease}

/* nav -------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 18px;pointer-events:none;
}
.nav > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:16px}
.brand svg{width:26px;height:26px;display:block}
.brand .dom{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.04em}
.nav-mid{display:flex;gap:3px;padding:4px;border-radius:999px;background:rgba(22,22,22,.72);border:1px solid var(--line);backdrop-filter:var(--blur)}
.nav-mid button{
  padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);
  transition:color .15s ease,background .15s ease;white-space:nowrap;
}
.nav-mid button:hover{color:var(--ink)}
.nav-mid button.on{background:rgba(255,255,255,.08);color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:8px}

.pill{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(22,22,22,.74);font-size:13px;font-weight:600;
  backdrop-filter:var(--blur);transition:border-color .15s ease,background .15s ease,transform .12s ease;
}
.pill:hover{border-color:rgba(255,255,255,.20)}
.pill:active{transform:translateY(1px)}
.pill .ic{font-size:15px;color:var(--ink-2)}
.pill.acc{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.pill.acc .ic{color:var(--acc-ink)}
.pill.acc:hover{filter:brightness(1.06)}
.pill.ghost{background:rgba(22,22,22,.6)}
.pill:disabled{opacity:.45;cursor:not-allowed}

/* hero ------------------------------------------------------------------- */
.hero{
  position:fixed;top:64px;left:0;right:0;z-index:15;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:0 16px;pointer-events:none;
}
.hero > *{pointer-events:auto}
.hero h1{
  margin:0;font-size:clamp(28px,4.6vw,52px);font-weight:800;letter-spacing:-.035em;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  text-shadow:0 2px 30px rgba(0,0,0,.75);text-align:center;
}
.bidbox{display:inline-flex;align-items:center;gap:10px}
.bidbox .step{
  width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(22,22,22,.8);font-size:15px;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease;
}
.bidbox .step:hover{border-color:var(--line-hot);color:var(--acc)}
.bidbox .amt{
  font-variant-numeric:tabular-nums;color:var(--acc);
  border-bottom:2px dashed rgba(212,252,80,.45);padding:0 2px 2px;cursor:ns-resize;
  min-width:2.6ch;text-align:center;
}
/* The tower runs straight under this line, so it needs its own ground.
   Plain text at 40% ink over a lit glass facade was unreadable. */
.hero .sub{
  margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);
  text-align:center;padding:7px 15px;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(12,12,12,.78);
  backdrop-filter:var(--blur);max-width:min(640px,92vw);
}
.hero .sub b{color:var(--acc-soft);font-weight:700}

.claimbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:8px;border-radius:999px;border:1px solid var(--glass-line);
  background:rgba(18,18,18,.80);box-shadow:var(--glass-hi),0 18px 50px rgba(0,0,0,.5);
  backdrop-filter:var(--blur);max-width:min(760px,94vw);
}
.field{
  display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);min-width:0;
}
.field .ic{font-size:15px;color:var(--ink-3);flex:0 0 auto}
.field input,.field select{
  border:0;background:none;outline:none;font-size:14px;min-width:0;width:190px;
}
.field select{width:150px;cursor:pointer;appearance:none}
.field select option{background:var(--bg-2);color:var(--ink)}
.field:focus-within{border-color:var(--line-hot)}
.field input::placeholder{color:var(--ink-3)}

/* rails ------------------------------------------------------------------ */
.rail{position:fixed;z-index:14;display:flex;flex-direction:column;gap:7px}
.rail.left{left:16px;top:50%;transform:translateY(-50%)}
.rail.right{right:16px;top:50%;transform:translateY(-50%)}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(18,18,18,.74);
  font-size:12.5px;font-weight:600;white-space:nowrap;backdrop-filter:var(--blur);
  box-shadow:var(--glass-hi);
}
.chip .ic{font-size:14px;color:var(--ink-3)}
.chip b{font-variant-numeric:tabular-nums}
.chip .k{color:var(--ink-3);font-weight:600}
.chip.live .ic{color:#4ade80}
.chip.hot{border-color:var(--line-hot)}
.chip.hot .ic{color:var(--acc)}
.chip.act{cursor:pointer;transition:border-color .15s ease}
.chip.act:hover{border-color:rgba(255,255,255,.22)}
.rail.right .chip{justify-content:flex-start;cursor:pointer}
.rail.right .chip.on{border-color:var(--line-hot);color:var(--acc)}
.rail.right .chip.on .ic{color:var(--acc)}

/* ticker ----------------------------------------------------------------- */
.ticker{
  position:fixed;left:0;right:0;bottom:0;z-index:16;height:44px;
  display:flex;align-items:center;gap:0;overflow:hidden;
  border-top:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(10,10,10,.0),rgba(10,10,10,.86) 40%);
  pointer-events:none;
}
.ticker .run{display:flex;gap:34px;white-space:nowrap;will-change:transform}
.ticker .it{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.ticker .it .ic{font-size:13px;color:var(--acc)}
.ticker .it b{color:var(--ink);font-weight:700}
.ticker .it .n{font-family:var(--mono);color:var(--acc)}

/* toast ------------------------------------------------------------------ */
.toasts{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;padding:11px 17px;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(20,20,20,.94);font-size:13.5px;font-weight:600;
  box-shadow:0 14px 40px rgba(0,0,0,.55);animation:pop .28s cubic-bezier(.2,.9,.3,1.2);
  max-width:min(560px,92vw);
}
.toast .ic{font-size:16px;color:var(--acc);flex:0 0 auto}
.toast.bad{border-color:rgba(255,122,122,.4)}
.toast.bad .ic{color:var(--bad)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* modal ------------------------------------------------------------------ */
.scrim{
  position:fixed;inset:0;z-index:50;background:rgba(5,5,5,.66);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:20px;animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  width:min(560px,96vw);max-height:88vh;overflow:auto;overscroll-behavior:contain;
  border-radius:24px;border:1px solid var(--glass-line);background:var(--glass);
  box-shadow:var(--glass-hi),0 32px 90px rgba(0,0,0,.7);
  animation:rise .3s cubic-bezier(.2,.9,.3,1.05);
}
.sheet.wide{width:min(880px,96vw)}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px 0;
}
.sheet-head h2{margin:0;font-size:20px;letter-spacing:-.025em}
.sheet-head .x{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;color:var(--ink-3);border:1px solid var(--line)}
.sheet-head .x:hover{color:var(--ink);border-color:rgba(255,255,255,.22)}
.sheet-body{padding:18px 22px 22px}
.sheet-body p{margin:0 0 12px;color:var(--ink-2);font-size:14px;line-height:1.62}
.sheet-body h3{margin:20px 0 8px;font-size:14px;letter-spacing:-.01em}
.sheet-body ol,.sheet-body ul{margin:0 0 12px;padding-left:20px;color:var(--ink-2);font-size:14px;line-height:1.7}
.sheet-body li{margin-bottom:6px}
.sheet-body code{font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.07);padding:2px 6px;border-radius:6px}

.frow{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.frow label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.frow input,.frow select,.frow textarea{
  padding:11px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);outline:none;font-size:14px;width:100%;
}
.frow textarea{resize:vertical;min-height:62px;line-height:1.5}
.frow input:focus,.frow select:focus,.frow textarea:focus{border-color:var(--line-hot)}
.frow .hint{font-size:12px;color:var(--ink-3)}
.frow.bad input{border-color:rgba(255,122,122,.55)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.g2{grid-template-columns:1fr}}

.placard{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);margin-bottom:16px;
}
.placard .big{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums}
.placard .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.placard .col{flex:1;min-width:0}
.placard .col + .col{border-left:1px solid var(--line);padding-left:14px}

.note{
  display:flex;gap:10px;padding:12px 14px;border-radius:13px;font-size:13px;line-height:1.55;
  border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink-2);margin-bottom:14px;
}
.note .ic{font-size:16px;flex:0 0 auto;color:var(--ink-3);margin-top:1px}
.note.hot{border-color:var(--line-hot);background:rgba(212,252,80,.07)}
.note.hot .ic{color:var(--acc)}
.note.bad{border-color:rgba(255,122,122,.34);background:rgba(255,122,122,.06)}
.note.bad .ic{color:var(--bad)}
.note b{color:var(--ink)}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.actions .pill{padding:11px 20px;font-size:14px}
.actions .grow{flex:1;justify-content:center}

/* board ------------------------------------------------------------------ */
.board{width:100%;border-collapse:collapse;font-size:13.5px}
.board th{
  text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--line);
}
.board td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.board tr{cursor:pointer}
.board tr:hover td{background:rgba(255,255,255,.035)}
.board tr.me td{background:rgba(212,252,80,.07)}
.board .rk{font-family:var(--mono);font-weight:700;color:var(--ink-3);width:52px}
.board tr.top .rk{color:var(--acc)}
.board .who{display:flex;align-items:center;gap:10px;min-width:0}
.board .tile{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;font-size:11px;font-weight:800;color:rgba(10,12,8,.86)}
.board .nm{min-width:0}
.board .nm b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .nm span{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .amt{font-family:var(--mono);font-weight:700;text-align:right;color:var(--acc);white-space:nowrap}
.board .amt.pts{color:var(--ink)}
.board .amt.pts .rate{display:block;font-size:10px;font-weight:600;color:var(--ink-3)}
.board .st{text-align:right;width:92px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);color:var(--ink-3)}
.tag.ok{border-color:var(--line-hot);color:var(--acc)}
.scrollx{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.scrollx::-webkit-scrollbar{height:6px}
.scrollx::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}

/* floor card (click a floor in 3D) --------------------------------------- */
.card{
  position:fixed;z-index:18;width:300px;padding:16px;border-radius:18px;
  border:1px solid var(--glass-line);background:rgba(18,18,18,.92);
  box-shadow:var(--glass-hi),0 22px 60px rgba(0,0,0,.6);backdrop-filter:var(--blur);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.card .top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.card .tile{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:16px;font-weight:800;color:rgba(10,12,8,.86);flex:0 0 auto}
.card h4{margin:0;font-size:16px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .h{font-family:var(--mono);font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.card .row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.card .row .v{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--acc)}
.card .row .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.card .x{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:var(--ink-3);font-size:13px}
.card .x:hover{color:var(--ink)}

/* earnings --------------------------------------------------------------- */
.earn{
  position:fixed;right:16px;top:96px;z-index:17;width:206px;
  padding:15px 16px 13px;border-radius:20px;
  border:1px solid var(--glass-line);background:rgba(16,16,16,.86);
  box-shadow:var(--glass-hi),0 20px 60px rgba(0,0,0,.55);backdrop-filter:var(--blur);
}
.earn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.earn-head .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.earn-head .rk{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-2)}
.earn-head .rk.top{color:var(--acc)}
.earn-total{
  display:flex;align-items:baseline;gap:6px;
  font-size:31px;font-weight:800;letter-spacing:-.035em;color:var(--acc);
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.earn-total .unit{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.earn-rate{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.earn-rate .ic{font-size:14px;color:var(--acc)}
.earn-rate .k{font-weight:600;color:var(--ink-3)}
.earn-bar{height:3px;border-radius:99px;background:rgba(255,255,255,.09);margin-top:11px;overflow:hidden}
.earn-bar i{display:block;height:100%;width:0%;background:var(--acc);transition:width .6s ease}
.earn-foot{margin-top:8px;font-size:11px;line-height:1.4;color:var(--ink-3)}

/* The floats sit in their own zero height box so they can never push the
   panel around as they come and go. */
.earn-floats{position:relative;height:0;overflow:visible;pointer-events:none}
.flt{
  position:absolute;right:2px;top:-30px;
  font-family:var(--mono);font-size:14px;font-weight:700;color:var(--acc);
  text-shadow:0 2px 10px rgba(0,0,0,.7);white-space:nowrap;
  animation:rise-fade 1.25s cubic-bezier(.2,.7,.3,1) forwards;
}
.flt.big{font-size:19px;color:#eaffb0;text-shadow:0 0 16px rgba(212,252,80,.65)}
@keyframes rise-fade{
  0%{opacity:0;transform:translate(var(--dx),8px) scale(.8)}
  18%{opacity:1;transform:translate(var(--dx),0) scale(1.06)}
  100%{opacity:0;transform:translate(var(--dx),-46px) scale(1)}
}

/* wallet + session ------------------------------------------------------- */
.pill.wallet .ic{color:var(--acc)}
.pill.demo{border-color:rgba(245,196,81,.42);color:var(--warn)}
.pill.demo .ic{color:var(--warn)}
.chip.alt{border-color:rgba(122,168,255,.34)}
.chip.alt .ic{color:#8fb4ff}
.chip.alt.space{border-color:rgba(200,214,255,.55);background:rgba(24,30,52,.8)}
.chip.alt.space .ic{color:#dbe4ff}
.chip.demo{border-color:rgba(245,196,81,.42)}
.chip.demo .ic{color:var(--warn)}

.gate{display:flex;flex-direction:column;gap:10px;margin:4px 0 2px}
.gate button,.gate a{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:left;
  transition:border-color .15s ease,background .15s ease;width:100%;
}
.gate button:hover,.gate a:hover{border-color:var(--line-hot);background:rgba(212,252,80,.06)}
.gate .ic{font-size:20px;color:var(--acc);flex:0 0 auto}
.gate b{display:block;font-size:14.5px;margin-bottom:2px}
.gate span.d{display:block;font-size:12px;color:var(--ink-3);line-height:1.45}
.gate img{width:22px;height:22px;border-radius:6px;flex:0 0 auto}
.gate button:disabled{opacity:.45;cursor:not-allowed}

/* responsive -------------------------------------------------------------
   ⚠ Every panel here is `position:fixed`, so nothing pushes anything else out
   of the way: two panels sharing a corner just sit on top of each other and
   the page still "works". The rails collided at four of seven test sizes
   before this block was solved against a real viewport sweep, not a resized
   root element (constraining the root does not move `innerWidth`, so the
   media queries never fire and a self-driven sweep passes at one size seven
   times over). `__ponfloor.auditLayout()` reports the current viewport; the
   sweep drives the window.
--------------------------------------------------------------------------- */
@media(max-width:900px){
  .nav-mid{display:none}
  .ticker{display:none}

  /* Two stacked strips along the bottom, tools above stats. Side by side is
     what put them on top of each other once the stats wrapped. */
  .rail.right{
    top:auto;bottom:58px;right:10px;left:auto;transform:none;
    flex-direction:row;gap:6px;
  }
  .rail.right .chip span.t{display:none}
  .rail.right .chip{padding:9px 11px}

  .rail.left{
    top:auto;bottom:10px;left:10px;right:10px;transform:none;
    flex-direction:row;flex-wrap:nowrap;gap:6px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    padding-bottom:2px;
  }
  .rail.left::-webkit-scrollbar{display:none}
  .rail.left .chip{font-size:11.5px;padding:6px 11px;flex:0 0 auto}

  .hero{top:58px;gap:10px}
  /* Under the nav rather than beside the tools, and half the width: the panel
     and the tool rail were both pinned right and landed on each other. */
  .earn{top:auto;bottom:106px;right:10px;width:150px;padding:11px 12px 10px}
  .earn-total{font-size:24px}
  .earn-foot{display:none}
  .claimbar{border-radius:20px;padding:8px}
  .field{flex:1 1 auto;min-width:0}
  .field input,.field select{width:100%}
  .card{width:min(300px,92vw)}
}

@media(max-width:640px){
  .brand .dom{display:none}
  .hero h1{font-size:26px;gap:8px}
  .claimbar{flex-direction:column;align-items:stretch}
  /* ⚠ In a column, `flex-basis` is a HEIGHT. The shared `flex:1 1 200px` on
     .field made every input two hundred pixels tall and the bar four hundred
     and seventy, which then swallowed both rails. */
  .claimbar .field{flex:0 0 auto;width:100%}
  .claimbar .pill{justify-content:center}
}

/* Short viewports lose the explanatory line before they lose the tower. */
@media(max-height:700px){
  .hero .sub{display:none}
}
@media(max-height:560px){
  .hero h1{font-size:22px}
  .rail.right{bottom:52px}
}