/* ============================================================
   Prime - chase.css
   Return to Sender, the chase. Standalone like play.css and
   climb.css, whose tokens, shipping label screens, leaderboard and
   signing form it shares (copied, not imported, so each game can
   change alone). What is new: the score HUD, power up timers, the
   danger edge when the customer is close, and the Based glow.
   ============================================================ */

@font-face { font-family:'Bricolage Grotesque'; src:url('../assets/fonts/BricolageGrotesque-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Allerta Stencil'; src:url('../assets/fonts/AllertaStencil-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-800-900.woff2') format('woff2'); font-weight:800 900; font-display:swap; }
@font-face { font-family:'Fragment Mono'; src:url('../assets/fonts/FragmentMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  --blue:#0052FF; --blue-deep:#003ECC; --blue-hi:#3D7DFF;
  --nav:#0A1024; --nav-2:#111A33;
  --ink:#0F1111; --ink-2:#4A4E4E;
  --label:#FFFDF8; --label-line:#0F1111;
  --kraft:#C9A374; --kraft-2:#B78D5F; --kraft-ink:#4E3418; --tape:#F6E9CF;
  --btn-y:#FFD814; --btn-y-hover:#F7CA00; --btn-y-line:#FCD200;
  --good:#2EE59D; --bad:#FF3B4E; --warn:#FFB703;
  --chip:rgba(10,16,36,.72); --chip-line:rgba(255,255,255,.14);

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --display:'Bricolage Grotesque', 'Inter', sans-serif;
  --stencil:'Allerta Stencil', 'Inter', sans-serif;
  --mono:'Fragment Mono', 'SF Mono', Menlo, monospace;

  --safe-t:max(14px, env(safe-area-inset-top));
  --safe-r:max(14px, env(safe-area-inset-right));
  --safe-b:max(14px, env(safe-area-inset-bottom));
  --safe-l:max(14px, env(safe-area-inset-left));
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-drop:cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body.game {
  background:#7FB8F0; color:var(--ink); font:500 15px/1.45 var(--sans);
  overflow:hidden; overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none; -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; }
kbd {
  display:inline-grid; place-items:center; min-width:1.7em; height:1.7em; padding:0 .4em; margin:0 .1em;
  font:400 .78em/1 var(--mono); color:var(--ink); background:#fff;
  border:1.5px solid var(--ink); border-bottom-width:3px; border-radius:6px;
}
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.stencil { font:400 11px/1.2 var(--stencil); letter-spacing:.14em; text-transform:uppercase; }

#stage { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; display:block; touch-action:none; outline:none; }

/* ---------- loader ---------- */
.loader { position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; background:linear-gradient(#2F8FEA, #BFE4FF); color:#fff; font-weight:600; transition:opacity .5s var(--ease-out), visibility .5s; z-index:30; }
.loader .ring { width:38px; height:38px; border-radius:50%; border:4px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .9s linear infinite; }
body.ready .loader { opacity:0; visibility:hidden; }
@keyframes spin { to { transform:rotate(1turn); } }

/* ---------- HUD ---------- */
.hud { position:fixed; inset:0; pointer-events:none; z-index:5; opacity:0; transition:opacity .4s var(--ease-out); }
body.playing .hud { opacity:1; }
.hud-l, .hud-r { position:absolute; top:var(--safe-t); display:flex; flex-direction:column; gap:8px; }
.hud-l { left:var(--safe-l); align-items:flex-start; }
.hud-r { right:calc(var(--safe-r) + 104px); align-items:flex-end; flex-direction:row; }
.chip {
  display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:12px;
  background:var(--chip); border:1px solid var(--chip-line); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(10,16,36,.18);
}
.chip small { font:400 10px/1 var(--stencil); letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.corner { position:fixed; top:var(--safe-t); right:var(--safe-r); display:flex; gap:8px; z-index:12; }
.hud-btn {
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px; cursor:pointer;
  background:var(--chip); border:1px solid var(--chip-line); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hud-btn svg { width:22px; height:22px; }
.hud-btn .cross { display:none; }
.hud-btn.off .cross { display:block; } .hud-btn.off .wave { display:none; }
@media (hover:hover) { .hud-btn:hover { background:rgba(10,16,36,.9); } }
.hud-btn:focus-visible, .btn:focus-visible, .tabs button:focus-visible, .x:focus-visible, .back:focus-visible { outline:3px solid var(--blue-hi); outline-offset:2px; }

.toast {
  position:fixed; left:50%; top:30%; transform:translate(-50%, 10px) scale(.92); z-index:6; pointer-events:none;
  font:800 clamp(24px, 4.2vw, 44px)/1 var(--display); letter-spacing:-.02em; color:#fff; text-align:center; white-space:nowrap;
  text-shadow:0 3px 0 rgba(10,16,36,.55), 0 10px 30px rgba(10,16,36,.35); opacity:0;
  transition:opacity .25s, transform .35s var(--ease-drop);
}
.toast.show { opacity:1; transform:translate(-50%, 0) scale(1); }
.toast.bad { color:#FFD0D5; } .toast.good { color:#C6FFE6; } .toast.combo { color:var(--btn-y); } .toast.warn { color:#FFE7A8; } .toast.power { color:#D6E4FF; }

/* ---------- screens: shipping labels ---------- */
.screen { position:fixed; inset:0; z-index:10; display:flex; align-items:center; padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); pointer-events:none; }
.screen[hidden] { display:none; }
.screen > * { pointer-events:auto; }
#paused, #over { justify-content:center; background:rgba(10,16,36,.38); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); pointer-events:auto; }
.screen-title { justify-content:flex-start; padding-left:max(var(--safe-l), 5vw); }

.label {
  position:relative; width:min(440px, 100%); max-height:calc(100dvh - 28px); overflow:auto;
  background:var(--label); color:var(--ink); border:2px solid var(--label-line); border-radius:6px;
  padding:18px 22px 16px; box-shadow:0 2px 0 rgba(0,0,0,.06), 0 28px 60px -12px rgba(10,16,36,.45);
  animation:land .7s var(--ease-drop) both; -webkit-user-select:text; user-select:text;
}
@keyframes land { from { transform:translateY(-40px) rotate(-2deg); opacity:0; } }
.label-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:12px; border-bottom:3px solid var(--label-line); }
.label-logo { height:26px; width:auto; --logo-w:var(--nav); --logo-s:var(--blue); }
.title-logo { display:block; margin:2px 0 14px; }
.label h1, .label h2 { font:800 clamp(52px, 7vw, 82px)/.92 var(--display); letter-spacing:-.035em; margin:0 0 10px; outline:none; }
.label h2 { font-size:clamp(40px, 5vw, 58px); margin-top:12px; }
.lede { margin:0 0 14px; font-size:15px; color:#2B2F2F; -webkit-user-select:text; }
.keys { display:grid; gap:0; margin:0 0 16px; border-top:1px solid var(--label-line); }
.keys > div { display:grid; grid-template-columns:72px 1fr; align-items:center; padding:7px 0; border-bottom:1px solid var(--label-line); }
.keys dt { color:var(--ink-2); } .keys dd { margin:0; font-weight:600; }
.k-touch { display:none; }
@media (pointer:coarse) { .k-key { display:none; } .k-touch { display:inline; } }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 22px; border-radius:100px; cursor:pointer;
  font:700 16px/1 var(--sans); border:1.5px solid transparent; transition:transform .15s var(--ease-out), background .15s;
}
.btn svg { width:19px; height:19px; }
.btn:active { transform:scale(.97); }
.btn-y { background:var(--btn-y); border-color:var(--btn-y-line); color:var(--ink); flex:1; box-shadow:0 3px 0 #C9A400; }
.btn-blue { background:var(--blue); color:#fff; flex:1; box-shadow:0 3px 0 var(--blue-deep); }
.btn-ghost { background:transparent; border-color:var(--ink); color:var(--ink); }
@media (hover:hover) {
  .btn-y:hover { background:var(--btn-y-hover); }
  .btn-blue:hover { background:var(--blue-deep); }
  .btn-ghost:hover { background:rgba(15,17,17,.06); }
}
.btn:disabled { opacity:.55; cursor:default; }
.label-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:16px; padding-top:12px; border-top:3px solid var(--label-line); }
.barcode { display:flex; align-items:stretch; height:38px; gap:0; flex:1; max-width:210px; }
.barcode i { display:block; background:var(--ink); }
.best { text-align:right; display:grid; gap:2px; }
.best small { color:var(--ink-2); }
.best b { font:400 20px/1 var(--mono); }
.back {
  position:fixed; left:var(--safe-l); bottom:var(--safe-b); display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:100px; background:var(--chip); color:#fff; text-decoration:none; font-weight:600; font-size:13px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.back svg { width:16px; height:16px; }

.label-sm { width:min(340px, 100%); }
.label-over { width:min(460px, 100%); }
.stamp {
  font:800 15px/1 var(--display); text-transform:uppercase; letter-spacing:.04em; color:var(--bad);
  border:3px solid var(--bad); border-radius:6px; padding:6px 10px; transform:rotate(-6deg); animation:stamp .5s var(--ease-drop) .3s both;
}
@keyframes stamp { from { transform:rotate(-6deg) scale(2.2); opacity:0; } }
.why { margin:0 0 12px; color:#2B2F2F; }
.big { display:flex; align-items:baseline; justify-content:space-between; padding:10px 0; border-top:3px solid var(--label-line); border-bottom:1px solid var(--label-line); }
.big small { color:var(--ink-2); }
.big b { font:800 52px/1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); margin:0 0 14px; }
.stats > div { padding:9px 0 8px; border-bottom:1px solid var(--label-line); }
.stats > div:not(:nth-child(4n+1)) { padding-left:12px; border-left:1px solid var(--label-line); }
.stats dt { font:400 10px/1.2 var(--stencil); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.stats dd { margin:3px 0 0; font:400 17px/1.1 var(--mono); }
.save { margin:0 0 4px; }
.save label { display:block; margin-bottom:7px; color:var(--ink-2); }
.save-row { display:flex; gap:8px; }
.save-row input {
  flex:1; min-width:0; height:50px; padding:0 14px; border:2px solid var(--ink); border-radius:10px; background:#fff;
  font:600 17px/1 var(--sans); color:var(--ink); appearance:none; -webkit-appearance:none; -webkit-user-select:text; user-select:text;
}
.save-row input:focus { outline:3px solid var(--blue-hi); outline-offset:1px; }
.save-row .btn { flex:0 0 auto; }
.save-msg { min-height:1.4em; margin:6px 0 4px; font-size:14px; font-weight:600; }
.save-msg.ok { color:#067D62; } .save-msg.bad { color:#B12704; }
.rank-hint { margin:0 0 12px; font-size:13px; color:var(--ink-2); }
.rank-hint:empty { display:none; }

/* ---------- leaderboard ---------- */
.board { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); background:rgba(10,16,36,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.board[hidden] { display:none; }
.board-card {
  width:min(520px, 100%); max-height:calc(100dvh - 28px); display:flex; flex-direction:column;
  background:var(--nav); color:#fff; border-radius:18px; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden; animation:land .5s var(--ease-drop) both;
}
.board-top { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 10px; }
.board-top h2 { margin:0; font:800 34px/1 var(--display); letter-spacing:-.03em; outline:none; }
.x { width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:none; font-size:26px; line-height:1; cursor:pointer; color:#fff; }
.tabs { display:flex; gap:6px; padding:0 20px 12px; }
.tabs button { flex:1; height:40px; border-radius:100px; border:1px solid rgba(255,255,255,.22); background:none; color:#fff; font-weight:700; cursor:pointer; }
.tabs button[aria-selected="true"] { background:#fff; color:var(--nav); border-color:#fff; }
.board-cols, .board-rows li { display:grid; grid-template-columns:40px 1fr 80px 96px; align-items:center; gap:8px; }
.board-cols { padding:8px 20px; font:400 10px/1 var(--stencil); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.board-cols span:nth-child(3), .board-cols span:nth-child(4) { text-align:right; }
.board-list { overflow:auto; flex:1; min-height:160px; -webkit-user-select:text; user-select:text; }
.board-rows { list-style:none; margin:0; padding:6px 10px 10px; }
.board-rows li { padding:10px; border-radius:10px; }
.board-rows li:nth-child(even) { background:rgba(255,255,255,.04); }
.board-rows .rk { font:400 14px/1 var(--mono); color:rgba(255,255,255,.7); text-align:center; }
.board-rows .nm { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-rows .dl { font:400 13px/1 var(--mono); color:rgba(255,255,255,.7); text-align:right; }
.board-rows .sc { font:800 19px/1 var(--display); text-align:right; font-variant-numeric:tabular-nums; }
.board-rows .top .rk { display:grid; place-items:center; width:28px; height:28px; margin:0 auto; border-radius:50%; color:var(--nav); font-weight:700; }
.board-rows .top1 .rk { background:#FFD814; } .board-rows .top2 .rk { background:#D9DEE8; } .board-rows .top3 .rk { background:#E2A06A; }
.board-rows li.me { background:rgba(0,82,255,.45); outline:2px solid var(--blue-hi); }
.board-note { margin:0; padding:28px 24px; text-align:center; color:rgba(255,255,255,.8); }
.board-fine { margin:0; padding:10px 20px 16px; font-size:12px; color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.1); }

@media (prefers-reduced-motion:reduce) {
  .label, .board-card, .stamp { animation:none; }
  .card.show { animation:none; }
}

/* ---------- the chase's own HUD ---------- */
.hud-l .chip svg, .hud-r .chip svg { width:22px; height:22px; flex:none; }
.chip b { font:800 20px/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.chip-score { flex-direction:column; align-items:flex-start; gap:3px; padding:8px 14px 9px; }
.chip-score b { font-size:34px; min-width:3.2em; }
.chip-dist { flex-direction:column; align-items:flex-start; gap:4px; }
.chip-dist b { font-size:17px; }
.chip-dist small { opacity:.75; font-size:10px; }
.hud-r { right:calc(var(--safe-r) + 108px); }
.chip-coins b { font-size:24px; min-width:1.6em; }
.corner .hud-btn { display:none; }
body.playing .corner .hud-btn, .corner .mute { display:grid; }

/* power ups: an icon, a name and a draining bar */
.powers { position:absolute; left:var(--safe-l); top:calc(var(--safe-t) + 132px); display:grid; gap:8px; }
.pw { display:grid; grid-template-columns:28px auto; grid-template-rows:auto 6px; column-gap:8px; row-gap:5px; align-items:center; padding:7px 12px 8px 8px; border-radius:12px; background:var(--chip); border:1px solid var(--chip-line); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); min-width:150px; }
.pw[hidden] { display:none; }
.pw svg { grid-row:1 / span 2; width:28px; height:28px; }
.pw span { font:400 10px/1 var(--stencil); letter-spacing:.14em; text-transform:uppercase; }
.pw i { display:block; height:6px; border-radius:6px; background:rgba(255,255,255,.18); overflow:hidden; }
.pw i b { display:block; height:100%; width:100%; border-radius:6px; background:linear-gradient(90deg, var(--blue-hi), #9CC0FF); transform-origin:left; }
#pwMagnet i b { background:linear-gradient(90deg, #FFB703, var(--btn-y)); }
#pwChip i b { background:linear-gradient(90deg, #1F55E8, #6FA0FF); }

/* the customer is close: the screen's edge goes red */
.danger { position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .25s;
  box-shadow:inset 0 0 120px 30px rgba(255,59,78,.55); }
/* Based: a blue glow from the edges, pulsing */
.based { position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .35s;
  box-shadow:inset 0 0 140px 40px rgba(0,82,255,.6); }
body.is-based .based { opacity:1; animation:basedPulse .5s ease-in-out infinite alternate; }
@keyframes basedPulse { to { box-shadow:inset 0 0 90px 24px rgba(61,125,255,.7); } }

/* zone title cards: big, brief, centred */
.card { position:fixed; left:50%; top:22%; z-index:6; pointer-events:none; text-align:center; transform:translate(-50%, 0); opacity:0; width:min(92vw, 760px); color:#fff; }
.card small { display:block; margin-bottom:8px; opacity:.85; text-shadow:0 2px 10px rgba(10,16,36,.5); }
.card h2 { margin:0; font:800 clamp(40px, 7vw, 86px)/.9 var(--display); letter-spacing:-.035em; text-shadow:0 4px 0 rgba(10,16,36,.45), 0 16px 40px rgba(10,16,36,.4); }
.card p { margin:12px 0 0; font:600 clamp(16px, 2vw, 21px)/1.2 var(--sans); text-shadow:0 2px 10px rgba(10,16,36,.7); }
.card.show { animation:card 3.2s var(--ease-out) both; }
@keyframes card { 0% { opacity:0; transform:translate(-50%, 18px) scale(.96); } 12% { opacity:1; transform:translate(-50%, 0) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -8px); } }

/* the first seconds: what to press, once */
.hint { position:fixed; left:50%; bottom:calc(var(--safe-b) + 34px); transform:translateX(-50%); z-index:6; pointer-events:none; opacity:0; transition:opacity .4s;
  padding:10px 16px; border-radius:100px; background:var(--chip); color:#fff; font-weight:700; font-size:15px; white-space:nowrap; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hint.show { opacity:1; }

/* the two specials on the title label */
.perks { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
.perks li { display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; font-size:13.5px; line-height:1.35; color:#2B2F2F; }
.perks svg { width:30px; height:30px; }
.perks b { color:var(--ink); }

/* character select */
.who { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:0 0 14px; }
.who-c { position:relative; display:grid; justify-items:center; gap:6px; padding:8px 6px 9px; border:2px solid var(--ink); border-radius:10px; background:#fff; cursor:pointer; font:700 12px/1.1 var(--sans); }
.who-c img { width:100%; height:64px; object-fit:contain; object-position:top; }
.who-c[aria-checked="true"] { background:#EAF1FF; outline:3px solid var(--blue); outline-offset:-1px; }
.who-c.loading { opacity:.6; cursor:progress; }
.who-c.soon { cursor:default; opacity:.7; }
.who-c em { position:absolute; top:6px; right:6px; font:400 9px/1 var(--stencil); letter-spacing:.12em; text-transform:uppercase; font-style:normal; background:var(--ink); color:#fff; padding:3px 5px; border-radius:4px; }

.board-cols, .board-rows li { grid-template-columns:40px 1fr 90px 96px; }
.board-rows .ht { font:400 13px/1 var(--mono); color:rgba(255,255,255,.8); text-align:right; }

@media (max-width:720px), (max-height:520px) and (orientation:landscape) {
  .chip { padding:6px 10px; }
  .chip-score b { font-size:26px; }
  .hud-r { right:calc(var(--safe-r) + 100px); }
  .powers { top:calc(var(--safe-t) + 118px); }
  .pw { min-width:120px; }
  .hud-btn { width:42px; height:42px; }
  .card { top:16%; }
  .toast { top:30%; }
}
@media (max-width:720px) {
  .screen-title { align-items:flex-end; justify-content:center; padding-left:var(--safe-l); padding-bottom:calc(var(--safe-b) + 46px); }
  .label { padding:14px 16px 14px; max-height:calc(100dvh - 120px); }
  .label h1 { font-size:46px; }
  .lede { font-size:14px; }
  .keys, .perks { display:none; }
  .who-c img { height:52px; }
  .label-foot { margin-top:12px; }
  .back { bottom:var(--safe-b); left:50%; transform:translateX(-50%); }
  .big b { font-size:44px; }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .stats > div:not(:nth-child(4n+1)) { padding-left:0; border-left:0; }
  .stats > div:nth-child(even) { padding-left:12px; border-left:1px solid var(--label-line); }
  .board-cols, .board-rows li { grid-template-columns:34px 1fr 70px 80px; }
  .board-top h2 { font-size:28px; }
}
@media (max-height:520px) and (orientation:landscape) {
  .label { max-height:calc(100dvh - 20px); padding:12px 16px; }
  .label h1 { font-size:40px; } .keys, .who, .perks { display:none; }
}
@media (prefers-reduced-motion:reduce) { body.is-based .based { animation:none; } }

/* the signing form: name, then the optional private wallet */
.save { display:grid; gap:7px; }
.save label { display:block; margin:4px 0 0; color:var(--ink-2); }
.save input {
  width:100%; height:48px; padding:0 14px; border:2px solid var(--ink); border-radius:10px; background:#fff;
  font:600 16px/1 var(--sans); color:var(--ink); appearance:none; -webkit-appearance:none; -webkit-user-select:text; user-select:text;
}
.save input#walletIn { font:400 14px/1 var(--mono); }
.save input:focus { outline:3px solid var(--blue-hi); outline-offset:1px; }
.save input[aria-invalid="true"] { border-color:var(--bad); }
.wallet-note { margin:0 0 4px; font-size:12.5px; line-height:1.4; color:var(--ink-2); }
.save .btn { width:100%; margin-top:2px; }