/* Stake boost (stake-boost-ui.mjs, owner 10 Oct 2026): the HUD's HASHRATE card (the island's total hash, a running stake's
   multiplier as a gold badge on its corner), the island's STAKE tile under PACKS (the same badge) and the Stake window (a
   .pcs-dialog like the Overclock window: four lock cards, the 7-day one gold and marked BEST, the lock's amount and one main
   button). The HUD's cream pixel style; the window's text never below 12 px; buttons touch-sized on phones. */

/* ---------------------------------------------------------------- the padlock */
.stake-lock{display:block;width:100%;height:100%;image-rendering:pixelated;stroke:none}
.stake-lock path{stroke:none}
.stake-lock-edge{fill:#3e211d}.stake-lock-shackle{fill:#b9c3cf}.stake-lock-shine{fill:#f4f7fb}
.stake-lock-body{fill:#f2b134}.stake-lock-gleam{fill:#ffe27a}.stake-lock-hole{fill:#5a3210}

/* ---------------------------------------------------------------- the HUD's HASHRATE card */
/* The island's total hash as a resource card (owner, 10 Oct 2026), a .resource-pill like BOOST, ENERGY and WALLET:
   unified-hud.css gives it their frame, height, type and icon. The top row reads BOOST · HASHRATE · ENERGY · WALLET ·
   REWARDS. Its number fits its box by its width in em (--hash-em), the unit small beside it. A running stake: a gold badge
   with the multiplier on the card's top-right corner, over the frame, and the number tinted gold; an ended lock: a red "!"
   where REWARDS shows its own. World view of the own island only (social.css hides the whole HUD on a visit). */
.workshop-ui .economy-hud .hash-pill[hidden],
.workshop-ui:not([data-mode=world]) .economy-hud .hash-pill{display:none!important}
.workshop-ui[data-mode] .economy-hud .hash-pill .resource-readout{flex:1 1 0;align-self:stretch;justify-content:center;min-width:0;container-type:inline-size}
.workshop-ui[data-mode] .economy-hud .hash-pill .hash-value{display:flex;align-items:baseline;gap:.25em;max-width:100%;overflow:hidden;
  font-size:min(calc(19 * var(--hud-u)),calc(100cqi / var(--hash-em,6)))}
.workshop-ui[data-mode] .economy-hud .hash-unit{flex:none;font-size:.6em;color:#705640}
.workshop-ui[data-mode] .economy-hud .hash-pill[data-stake=active] .hash-number{color:#a35a00;text-shadow:0 calc(1 * var(--hud-u)) 0 #ffe9a3}
.workshop-ui[data-mode] .economy-hud .hash-pill[data-stake=active] .hash-unit{color:#a35a00}
.workshop-ui[data-mode] .economy-hud .hash-badge{position:absolute;bottom:calc(100% - 1 * var(--hud-u));right:calc(-7 * var(--hud-u));z-index:2;display:flex;align-items:center;
  gap:calc(3 * var(--hud-u));padding:calc(2 * var(--hud-u)) calc(6 * var(--hud-u)) calc(2 * var(--hud-u)) calc(4 * var(--hud-u));
  background:linear-gradient(#ffe680,#ffb23d);border:calc(2 * var(--hud-u)) solid #7a3e00;
  box-shadow:0 0 0 calc(1 * var(--hud-u)) #fff5df,0 calc(2 * var(--hud-u)) 0 #7a3e0066;
  color:#4a240f;font:700 max(10px,calc(12 * var(--hud-u)))/1 Pixeloid,monospace;letter-spacing:0;white-space:nowrap;pointer-events:none}
.workshop-ui[data-mode] .economy-hud .hash-badge[hidden]{display:none}
.workshop-ui[data-mode] .economy-hud .hash-badge-lock{flex:none;display:grid;width:calc(9 * var(--hud-u));height:calc(10 * var(--hud-u));min-width:8px;min-height:9px}
.workshop-ui .economy-hud .hash-badge svg{width:100%;height:100%;fill:none;stroke:none}
.workshop-ui[data-mode] .economy-hud .hash-badge-mult{font-variant-numeric:tabular-nums}
/* Ended (the tokens wait to be withdrawn or restaked): REWARDS' red dot, on the icon's corner. */
.workshop-ui[data-mode] .economy-hud .hash-badge[data-kind=ended]{top:calc(-1 * var(--hud-u));bottom:auto;right:auto;left:calc(18 * var(--hud-u));display:grid;place-items:center;
  width:calc(15 * var(--hud-u));height:calc(15 * var(--hud-u));padding:0;background:#bc493b;border:2px solid #fff5df;border-radius:50%;box-shadow:none;
  color:#fff7df;font:700 calc(9 * var(--hud-u))/1 Pixeloid,monospace}
/* The row is one card wider. From 701 px the cards keep one row: Buy stands under WALLET's new column, and the HUD's unit
   shrinks where the bar's left side would meet it, so nothing on the left moves to another row. The left side, in --bar-u
   (unified-hud.css; 18 px margins, a bar gap before the cards): LEADERBOARD alone up to 1164 px (190 + 8); LEADERBOARD,
   REFERRALS, the chip's photo and the gear (10 px after the chip, settings-ui.mjs) from 1165 px (190+8+166+8+50+50, +8);
   the chip's name from 1365 px, where the chip gives the cards room first: it keeps 170 (a name of about ten letters, a
   longer one ends in an ellipsis, the whole name in its tooltip) and grows to its usual 250 once the cards are full size
   (190+8+166+8+170+50, +8; the chip takes what the cards leave). 701-820 px: the cards have their own row. */
@media(min-width:701px){
  body .workshop-ui[data-mode=world] .economy-hud.has-hash.has-boost{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.6fr)}
  body .workshop-ui[data-mode=world] .economy-hud.has-hash:not(.has-boost){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.6fr)}
  .workshop-ui[data-mode=world] .economy-hud.has-hash .token-buy-button:not([hidden]){grid-column:3}
  .workshop-ui[data-mode=world] .economy-hud.has-hash.has-boost .token-buy-button:not([hidden]){grid-column:4}
  .workshop-ui[data-mode=world] .economy-hud.has-hash .resource-label{font-size:max(9px,calc(11 * var(--hud-u)))}
  .workshop-ui[data-mode=world] .economy-hud.has-hash .resource-subtitle{font-size:max(8px,calc(9 * var(--hud-u)))}
}
@media(min-width:701px) and (max-width:820px){
  .workshop-ui[data-mode=world] .economy-hud.has-hash.has-boost{--hud-u:min(var(--bar-u),calc((100vw - 20px) / 794));max-width:calc(794 * var(--hud-u))}
  .workshop-ui[data-mode=world] .economy-hud.has-hash:not(.has-boost){--hud-u:min(var(--bar-u),calc((100vw - 20px) / 654));max-width:calc(654 * var(--hud-u))}
}
@media(min-width:821px){
  body .workshop-ui[data-mode=world] .economy-hud.has-hash.has-boost{width:calc(794 * var(--hud-u))}
  body .workshop-ui[data-mode=world] .economy-hud.has-hash:not(.has-boost){width:calc(654 * var(--hud-u))}
}
@media(min-width:821px) and (max-width:1164px){
  .workshop-ui[data-mode=world] .economy-hud.has-hash.has-boost{--hud-u:min(var(--bar-u),calc((100vw - 36px - 198 * var(--bar-u)) / 794))}
  .workshop-ui[data-mode=world] .economy-hud.has-hash:not(.has-boost){--hud-u:min(var(--bar-u),calc((100vw - 36px - 198 * var(--bar-u)) / 654))}
}
@media(min-width:1165px) and (max-width:1364px){
  .workshop-ui[data-mode=world] .economy-hud.has-hash.has-boost{--hud-u:min(var(--bar-u),calc((100vw - 46px - 480 * var(--bar-u)) / 794))}
  .workshop-ui[data-mode=world] .economy-hud.has-hash:not(.has-boost){--hud-u:min(var(--bar-u),calc((100vw - 46px - 480 * var(--bar-u)) / 654))}
}
@media(min-width:1365px){
  .workshop-ui[data-mode=world] .economy-hud.has-hash.has-boost{--hud-u:min(var(--bar-u),calc((100vw - 46px - 600 * var(--bar-u)) / 794))}
  .workshop-ui[data-mode=world] .economy-hud.has-hash:not(.has-boost){--hud-u:min(var(--bar-u),calc((100vw - 46px - 600 * var(--bar-u)) / 654))}
  body:has(.workshop-ui[data-mode=world] .economy-hud.has-hash.has-boost) .social-ui .island-profile-chip{
    max-width:min(calc(250 * var(--bar-u)),calc(100vw - 46px - 430 * var(--bar-u) - 794 * min(var(--bar-u),calc((100vw - 46px - 600 * var(--bar-u)) / 794))))}
  body:has(.workshop-ui[data-mode=world] .economy-hud.has-hash:not(.has-boost)) .social-ui .island-profile-chip{
    max-width:min(calc(250 * var(--bar-u)),calc(100vw - 46px - 430 * var(--bar-u) - 654 * min(var(--bar-u),calc((100vw - 46px - 600 * var(--bar-u)) / 654))))}
}
/* Phones: the top row is full (BOOST, ENERGY, WALLET, REWARDS), so the card takes the row under REFERRALS, a real card as
   wide as BOOST and ENERGY; it steps aside while decorating, like the rows' other extras. */
@media(max-width:700px){
  .workshop-ui[data-mode=world] .economy-hud .hash-pill:not([hidden]){grid-row:3;grid-column:1/3;align-self:start;height:46px}
  .workshop-ui[data-mode] .economy-hud .hash-pill .hash-value{font-size:min(15px,calc(100cqi / var(--hash-em,6)))}
  .workshop-ui[data-mode] .economy-hud .hash-badge{top:-8px;bottom:auto;right:-5px;padding:2px 5px 2px 3px;gap:2px;font-size:10px}
  .workshop-ui[data-mode] .economy-hud .hash-badge[data-kind=ended]{top:-4px;right:auto;left:12px;width:13px;height:13px;padding:0;font-size:8px}
  body.decorating .workshop-ui[data-mode] .economy-hud .hash-pill{display:none!important}
}
/* The smallest phones drop the cards' icons (unified-hud.css): the ended dot then sits on the top-right corner like REWARDS'. */
@media(max-width:380px){
  .workshop-ui[data-mode] .economy-hud .hash-badge[data-kind=ended]{left:auto;right:-2px;top:-4px}
}

/* ---------------------------------------------------------------- the island's STAKE tile */
/* STAKE (owner, 10 Oct 2026: separate and visible on the screen, not in the profile): PACKS' tile (packs.css .packs-entry:
   its frame, size, type, shine, hover and press) right under it in the same column, 10 px apart (8 px on phones), the
   gold padlock over its name with a warm glow. Its badge stands on the top-right corner, inside the gap above it: a running
   stake's "×2.5" in gold, an ended lock's red "!". Own island in the world view only; never while decorating. */
.stake-entry-root{position:fixed;left:0;top:0;width:0;height:0;z-index:60;font-family:Pixeloid,monospace;font-synthesis:none}
.stake-entry{position:fixed;left:18px;top:calc(50% + 104px);transform:translateY(-50%);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;width:96px;height:94px;margin:0;padding:4px 2px 6px;border:8px solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;
  background:none;border-radius:0;box-shadow:none;color:#492b22;font:700 12px/1 Pixeloid,monospace;letter-spacing:.02em;cursor:pointer;
  touch-action:manipulation;isolation:isolate;filter:drop-shadow(0 3px 0 #34273733)}
.stake-entry[hidden]{display:none!important}
.stake-entry-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;animation:stake-entry-bob 2.6s ease-in-out 1.3s infinite}
.stake-entry-icon svg{width:100%;height:100%}
.stake-entry-label{display:block;max-width:100%;overflow:hidden;white-space:nowrap}
.stake-entry::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 42%,#ffc93c66 0%,#ffc93c00 62%);pointer-events:none}
.stake-entry-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.stake-entry-shine::after{content:'';position:absolute;top:-30%;bottom:-30%;left:-60%;width:34%;transform:skewX(-18deg);
  background:linear-gradient(90deg,#fff0 0%,#fffbe8b3 50%,#fff0 100%);animation:stake-entry-shine 4.2s ease-in-out 2.1s infinite}
.stake-entry:focus-visible{outline:3px solid #58a7ce;outline-offset:2px}
.stake-entry:active{transform:translateY(calc(-50% + 2px))}
@media(hover:hover) and (pointer:fine){.stake-entry:hover{filter:drop-shadow(0 3px 0 #34273733) brightness(1.07)}}
@keyframes stake-entry-shine{0%,62%{left:-60%}88%,100%{left:130%}}
@keyframes stake-entry-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.stake-entry-badge{position:absolute;top:-12px;right:-12px;z-index:2;display:grid;place-items:center;min-width:16px;box-sizing:border-box;
  padding:1px 5px;background:linear-gradient(#ffe680,#ffb23d);border:2px solid #7a3e00;box-shadow:0 0 0 1px #fff5df,0 2px 0 #7a3e0066;
  color:#4a240f;font:700 11px/1 Pixeloid,monospace;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.stake-entry-badge[hidden]{display:none}
.stake-entry-badge[data-kind=ended]{top:-12px;right:-12px;width:18px;height:18px;min-width:0;padding:0;background:#bc493b;border:2px solid #fff5df;border-radius:50%;
  box-shadow:none;color:#fff7df;font-size:10px}
body.decorating .stake-entry{display:none!important}
body[data-wallet-locked=true]>.stake-entry-root{visibility:hidden;pointer-events:none}
/* Out of the way while LEADERBOARD, the profile or Island Style (the left-side panels) is open, as PACKS and the Daily
   Social Pot's tile (packs.css, social-pot.css): such a panel is never drawn under the tile. */
body:has(:is(.leaderboard-panel,.island-profile-panel,.island-style-panel):not([hidden])) .stake-entry{visibility:hidden}
@media(max-width:700px){
  .stake-entry{left:10px;top:calc(44% + 80px);width:72px;height:72px;border-width:6px;gap:2px;font-size:10px;letter-spacing:0}
  .stake-entry-icon{width:32px;height:32px}
  .stake-entry-badge{top:-10px;right:-10px;padding:1px 4px;font-size:10px}
  .stake-entry-badge[data-kind=ended]{top:-10px;right:-10px;width:16px;height:16px;padding:0;font-size:9px}
}
/* The left column's place (packs.css): on a mouse screen clear of the camera's 28 px edge pan (app.mjs); on a short screen
   the tiles stand in a row (packs.css --tile-row-x, --tile-row-y): PACKS, STAKE, then the Daily Social Pot (social-pot.css). */
@media(hover:hover) and (pointer:fine){.stake-entry{left:32px}}
@media(max-height:540px){
  .stake-entry{left:calc(var(--tile-row-x,18px) + 62px);top:var(--tile-row-y,calc(100% - 42px));
    width:56px;height:56px;border-width:5px;padding:2px 1px 3px;gap:1px;font-size:10px}
  .stake-entry-icon{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){.stake-entry-shine::after,.stake-entry-icon{animation:none}.stake-entry:active{transform:translateY(-50%)}}

/* ---------------------------------------------------------------- the window */
.stake-dialog{--q:clamp(.9px,min(calc((100vw - 24px) / 760),calc((100dvh - 24px) / 720)),1.2px);width:min(calc(760 * var(--q)),calc(100vw - 24px))}
.stake-dialog .pcs-dialog-head{gap:calc(10 * var(--q))}
.stake-title-icon{flex:none;display:grid;width:calc(21 * var(--q));height:calc(24 * var(--q))}
.stake-dialog .pcs-dialog-title{font-size:max(17px,calc(23 * var(--q)));letter-spacing:.03em;text-transform:uppercase}
.stake-body{gap:calc(10 * var(--q))}
.stake-intro{color:var(--ink)}
.stake-intro+.stake-intro{margin-top:calc(-6 * var(--q));color:var(--soft)}
.stake-note{padding:calc(6 * var(--q)) calc(10 * var(--q));background:#fff1dc;border:calc(2 * var(--q)) solid #ebb07c;color:#8a3c12;
  font-size:max(13px,calc(13 * var(--q)));line-height:1.4}
.stake-status{padding:calc(6 * var(--q)) calc(10 * var(--q));background:#eaf4fb;border:calc(2 * var(--q)) solid #bcd9ea;color:#2c4d60;
  font:700 max(13px,calc(13.5 * var(--q)))/1.4 Pixeloid,monospace}
.stake-error{font-size:max(13px,calc(13 * var(--q)))}
.stake-retry,.stake-check{justify-self:start}

/* The lock now: green while it runs (its multiplier big, the time left live), amber once it ended. */
.stake-position{display:grid;gap:calc(6 * var(--q));padding:calc(10 * var(--q)) calc(12 * var(--q));background:#eef8e6;border:calc(3 * var(--q)) solid #9fd27f;
  box-shadow:inset 0 calc(5 * var(--q)) #6cbf4a}
.stake-position[data-state=ended]{background:#fff4df;border-color:#ebb07c;box-shadow:inset 0 calc(5 * var(--q)) #f2b134}
.stake-position-head{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:calc(10 * var(--q));row-gap:calc(2 * var(--q));padding-top:calc(3 * var(--q))}
.stake-position-title{font:700 max(13px,calc(14 * var(--q)))/1.2 Pixeloid,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.stake-position-mult{font:700 max(26px,calc(34 * var(--q)))/1 Pixeloid,monospace;color:#2f6a2b;text-shadow:0 calc(2 * var(--q)) #ffd23f80;font-variant-numeric:tabular-nums}
.stake-position-caption{font:700 max(12px,calc(13 * var(--q)))/1.2 Pixeloid,monospace;text-transform:uppercase;color:#2f6a2b}
.stake-position-rows{display:flex;flex-wrap:wrap;column-gap:calc(14 * var(--q));row-gap:calc(3 * var(--q));font-size:max(13px,calc(13.5 * var(--q)));line-height:1.35;color:var(--soft)}
.stake-position-left{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.stake-position-line{font-size:max(13px,calc(14 * var(--q)));line-height:1.45;color:var(--ink)}
.stake-position .stake-withdraw{justify-self:start;min-width:calc(220 * var(--q))}
.stake-position-hash{display:grid;grid-template-columns:auto 1fr;column-gap:calc(10 * var(--q));row-gap:calc(1 * var(--q));margin:0;
  padding-top:calc(5 * var(--q));border-top:calc(2 * var(--q)) dashed #b7dc9b;font-size:max(12px,calc(13 * var(--q)));line-height:1.35}
.stake-position-hash dt{color:var(--muted)}
.stake-position-hash dd{margin:0;font-variant-numeric:tabular-nums;color:var(--soft)}
.stake-position-hash .stake-hash-total{font-weight:700;color:#2f6a2b}

/* The locks: four cards side by side (two by two on phones), each a radio button. Calm blue; the longest gold, with a
   BEST badge and a soft shine, like the Overclock window's jackpot row. */
.stake-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10 * var(--q));padding-top:calc(4 * var(--q))}
.stake-tier{--st-accent:#4f9fe0;--st-edge:#a9cdee;--st-tint:#eef6fd;--st-deep:#2c5e8f;--st-ink:#21476d;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:calc(4 * var(--q));min-width:0;
  padding:calc(13 * var(--q)) calc(8 * var(--q)) calc(10 * var(--q));border:calc(3 * var(--q)) solid var(--st-edge);background:var(--st-tint);
  box-shadow:inset 0 calc(6 * var(--q)) var(--st-accent);color:var(--ink);text-align:center;cursor:pointer;font:400 max(13px,calc(13 * var(--q)))/1.3 Pixeloid,monospace}
.stake-tier[data-best=true]{--st-accent:#f2b134;--st-edge:#e0a92a;--st-deep:#9a5a0a;--st-ink:#7a3e00;
  background:linear-gradient(180deg,#fff7d6,#ffe9a3 70%,#ffdf80);box-shadow:inset 0 calc(6 * var(--q)) var(--st-accent),0 0 calc(8 * var(--q)) rgba(255,196,40,.55)}
@media(prefers-reduced-motion:no-preference){
  .stake-tier[data-best=true]:not(:disabled){animation:stake-best-shine 1.8s ease-in-out infinite}
  @keyframes stake-best-shine{50%{box-shadow:inset 0 calc(6 * var(--q)) var(--st-accent),0 0 calc(14 * var(--q)) rgba(255,196,40,.9)}}
}
.stake-tier:not(:disabled):hover{filter:brightness(1.03)}
.stake-tier:disabled{cursor:not-allowed;opacity:.55;animation:none}
.stake-tier[data-current=true]:disabled{opacity:.8}
.stake-tier[aria-checked=true]{border-width:calc(5 * var(--q));border-color:var(--st-deep);padding:calc(11 * var(--q)) calc(6 * var(--q)) calc(8 * var(--q));
  translate:0 calc(-3 * var(--q))}
.stake-tier-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(5 * var(--q));min-width:0}
.stake-tier-days{font:700 max(14px,calc(16 * var(--q)))/1.15 Pixeloid,monospace;letter-spacing:.03em;text-transform:uppercase;color:var(--st-ink);overflow-wrap:anywhere}
/* BEST: a ribbon on the card's top edge (the multipliers of the four cards stay in one line). */
.stake-tier-badge{position:absolute;top:calc(-10 * var(--q));left:50%;translate:-50% 0;z-index:1;padding:calc(2 * var(--q)) calc(6 * var(--q)) calc(1 * var(--q));
  background:#e08a00;border:calc(2 * var(--q)) solid #7a3e00;color:#fff8df;white-space:nowrap;
  font:700 max(12px,calc(12 * var(--q)))/1 Pixeloid,monospace;letter-spacing:.06em;text-transform:uppercase}
.stake-tier-badge::before{content:"★ "}
.stake-tier-mult{font:700 max(28px,calc(38 * var(--q)))/1.05 Pixeloid,monospace;color:var(--st-deep);font-variant-numeric:tabular-nums}
.stake-tier[data-best=true] .stake-tier-mult{color:#7a3e00;text-shadow:0 calc(2 * var(--q)) #fff6cf}
.stake-tier-caption{font:700 max(12px,calc(12 * var(--q)))/1.2 Pixeloid,monospace;text-transform:uppercase;color:var(--soft)}
.stake-tier-current{padding:calc(2 * var(--q)) calc(6 * var(--q));background:#3f9a52;color:#fffbe8;font:700 max(12px,calc(12 * var(--q)))/1.1 Pixeloid,monospace}
.stake-tier-check{position:absolute;top:calc(-11 * var(--q));right:calc(-11 * var(--q));display:none;place-items:center;width:calc(28 * var(--q));height:calc(28 * var(--q));
  padding:calc(6 * var(--q)) calc(5 * var(--q));background:var(--st-deep);border:calc(2 * var(--q)) solid #3e211d;color:#fffbe9}
.stake-tier-check svg{display:block;width:100%;height:100%}
.stake-tier[aria-checked=true] .stake-tier-check{display:grid}

/* The island's hash now and with the chosen lock; the amount the lock takes and the wallet's tokens. */
.stake-preview{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:calc(8 * var(--q));row-gap:calc(2 * var(--q));
  font-size:max(13px,calc(14 * var(--q)));line-height:1.35;font-variant-numeric:tabular-nums}
.stake-preview-label{color:var(--muted)}
.stake-preview-arrow{color:var(--muted)}
.stake-preview-then{color:#2f6a2b}
.stake-amounts{display:grid;grid-template-columns:auto 1fr;column-gap:calc(12 * var(--q));row-gap:calc(2 * var(--q));margin:0;padding:calc(7 * var(--q)) calc(10 * var(--q));
  background:#fffaf0;border:calc(2 * var(--q)) solid #ecd9ae;font-size:max(13px,calc(13.5 * var(--q)));line-height:1.35}
.stake-amounts dt{color:var(--muted)}
.stake-amounts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.stake-short{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(8 * var(--q));padding:calc(8 * var(--q)) calc(10 * var(--q));
  background:#fff1dc;border:calc(2 * var(--q)) solid #ebb07c;color:#8a3c12}
.stake-short-line{flex:1 1 calc(240 * var(--q));font:700 max(13px,calc(13.5 * var(--q)))/1.4 Pixeloid,monospace}
.stake-short-hint{font-size:max(13px,calc(13 * var(--q)))}
.stake-short-hint a{color:#1f5f8b}
.stake-buy{display:inline-flex;align-items:center;justify-content:center;border-image-source:url('../ui/frames/power-gold.svg');color:#3a1c08;text-decoration:none}
.stake-waiting{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(8 * var(--q));padding:calc(7 * var(--q)) calc(10 * var(--q));
  background:#eaf4fb;border:calc(2 * var(--q)) solid #bcd9ea;color:#2c4d60;font-size:max(13px,calc(13.5 * var(--q)))}

/* Close on the left, the main button on the right: a padlock, its words over the lock's days and multiplier. (An ended
   lock's Withdraw stands in its card.) */
.stake-footer{flex:none;display:flex;justify-content:flex-end;align-items:stretch;flex-wrap:wrap;gap:calc(10 * var(--q));
  padding:calc(10 * var(--q)) calc(14 * var(--q)) calc(12 * var(--q));background:#fff8e2;border-top:calc(2 * var(--q)) solid #ecd9ae}
.stake-footer>.pcs-button{min-height:max(50px,calc(56 * var(--q)))}
.stake-close{min-width:calc(130 * var(--q));margin-right:auto}
.stake-go{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--q));min-width:calc(260 * var(--q));text-align:left}
.stake-go-icon{flex:none;display:grid;width:calc(22 * var(--q));height:calc(25 * var(--q))}
.stake-go-copy{display:grid;gap:calc(2 * var(--q));min-width:0}
.stake-go-label{font-size:max(14px,calc(15 * var(--q)))}
.stake-go-sub{display:flex;flex-wrap:wrap;gap:calc(5 * var(--q));font-size:max(12px,calc(12.5 * var(--q)));color:#6a3a16;font-weight:400}
.stake-go-sep{opacity:.7}
.stake-go-mult{font-weight:700}
.stake-go:disabled .stake-go-sub{color:#a8987f}
.stake-go:disabled .stake-go-icon{filter:grayscale(1);opacity:.55}

/* ---------------------------------------------------------------- phones */
@media(max-width:760px){
  .stake-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .stake-dialog{--q:1px;width:calc(100vw - 16px)}
  .stake-dialog .pcs-dialog-title{font-size:17px;letter-spacing:.02em}
  .stake-footer{gap:8px;padding:9px 10px 10px}
  .stake-footer>.stake-close{flex:0 0 auto;min-width:86px}
  .stake-footer>.stake-go{flex:1 1 auto;min-width:0;padding-inline:8px}
  .stake-position .stake-withdraw{justify-self:stretch;min-width:0}
  .stake-go{gap:8px}
  .stake-go-label{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .stake-tier[aria-checked=true]{translate:none}
  .stake-tier[data-best=true]{animation:none!important}
}