/* ============================================================= *
 *  VAULTURE — Retro Financial Print Collage
 *  Design tokens, paper, certificate panels, cards, stamps
 * ============================================================= */
:root{
  /* ---- print inks ---- */
  --paper:#F0E5C9;        /* aged cream */
  --paper2:#E3D0A8;       /* warm bond tan */
  --paper3:#EBDDBA;       /* mid cream */
  --navy:#16374A;         /* banknote navy */
  --ink:#0C2635;          /* deep ink navy */
  --char:#252321;         /* charcoal */
  --green:#4D8B59;        /* money green */
  --green2:#28583B;       /* dark money green */
  --red:#C64B3D;          /* faded vermilion */
  --red2:#9E3326;         /* deep stamp red */
  --ochre:#A9762E;        /* bond gold accent */

  /* ---- crew inks (aged, never neon) ---- */
  --c-Spark:#2C6E6A;  /* teal — Wireman */
  --c-Rook:#34508A;   /* indigo — Planner */
  --c-Ram:#C64B3D;    /* vermilion — Breaker */
  --c-Veil:#8A4A5B;   /* plum — Inside */
  --c-Dash:#A9762E;   /* ochre — Wheel */

  --line:#16374A;
  --line-soft:rgba(22,55,74,.32);
  --hair:rgba(22,55,74,.18);

  --serif:"DM Serif Display", "Playfair Display", Georgia, serif;
  --body:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --mono:"Courier Prime", "Courier New", ui-monospace, monospace;

  --shadowpaper:2px 3px 0 rgba(12,38,53,.16), 5px 9px 18px rgba(12,38,53,.18);

  /* ---- engraved crosshatch (banknote line work) ---- */
  --engrave:
    repeating-linear-gradient(45deg,  rgba(12,38,53,.11) 0 .6px, transparent .6px 4.5px),
    repeating-linear-gradient(-45deg, rgba(12,38,53,.11) 0 .6px, transparent .6px 4.5px);
  --engrave-soft:
    repeating-linear-gradient(45deg,  rgba(12,38,53,.05) 0 .6px, transparent .6px 5.5px),
    repeating-linear-gradient(-45deg, rgba(12,38,53,.05) 0 .6px, transparent .6px 5.5px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{
  font-family:var(--body); color:var(--ink);
  background-color:var(--paper2);
  background-image:
    /* engraved banknote crosshatch field (the "table" the sheet sits on) */
    var(--engrave),
    /* faint ledger ink washes */
    radial-gradient(120% 80% at 50% -10%, rgba(77,139,89,.12), transparent 55%),
    radial-gradient(120% 70% at 100% 110%, rgba(198,75,61,.10), transparent 55%);
  overflow:hidden; user-select:none; -webkit-user-select:none;
  position:relative;
}
/* global ink/paper-fibre grain overlay (behind everything interactive) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background-image:var(--grain);
  background-size:220px 220px; mix-blend-mode:multiply;
}

#app{
  position:relative; z-index:1; width:100%; max-width:480px; margin:0 auto;
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  /* cream sheet — faint crosshatch + fibre grain keep it printed but legible */
  background-color:var(--paper);
  background-image:
    var(--grain),
    var(--engrave-soft),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.015));
  background-size:220px 220px, auto, auto, auto;
  background-blend-mode:multiply, multiply, multiply, normal;
  box-shadow:0 0 0 1px var(--line-soft), 0 0 60px rgba(12,38,53,.28);
}
.screen{position:absolute; inset:0; display:none; flex-direction:column;
  padding:max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));}
.screen.active{display:flex; animation:paperin .34s cubic-bezier(.2,.8,.25,1);}
@keyframes paperin{from{opacity:0; transform:translateY(10px) rotate(-.3deg)} to{opacity:1; transform:none}}

/* ============================== TYPE / BITS ============================== */
.kicker{font:700 11px/1.4 var(--mono); letter-spacing:.34em; color:var(--red2); text-transform:uppercase;}
.num{font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.serifnum{font-family:var(--serif); font-variant-numeric:tabular-nums; letter-spacing:.5px;}

/* hairline + double certificate rules */
.rule{height:0; border-top:1.5px solid var(--line); position:relative;}
.rule.dbl{border-top:1.5px solid var(--line); box-shadow:0 3px 0 -1.5px var(--line);}

/* ---- buttons: stamped / pressed metal type ---- */
.btn{
  font:700 14px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  border:2px solid var(--ink); border-radius:2px; padding:15px 18px;
  background:var(--green); color:var(--paper); cursor:pointer; width:100%;
  box-shadow:3px 3px 0 var(--ink); transition:transform .07s ease, box-shadow .07s ease, background .15s;
  position:relative;
}
.btn:hover{background:var(--green2);}
.btn:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--ink);}
.btn:focus-visible{outline:2px dashed var(--ochre); outline-offset:3px;}
.btn[disabled]{background:var(--paper2); color:var(--line-soft); border-color:var(--line-soft); box-shadow:none; cursor:default; transform:none;}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink); box-shadow:2px 2px 0 var(--ink);}
.btn.ghost:hover{background:rgba(22,55,74,.07);}
.btn.danger{background:var(--red); color:var(--paper); border-color:var(--red2);}
.btn.danger:hover{background:var(--red2);}
.btn.row{display:flex; align-items:center; justify-content:center; gap:9px;}
.btn.sm{font-size:13px; padding:14px 12px;}

/* status pill / tag */
.pill{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  background:var(--paper); border:1.5px solid var(--line); font:700 11px var(--mono); letter-spacing:.08em;
  color:var(--ink); text-transform:uppercase;}
.tag-sq{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1.5px solid var(--line);
  background:var(--paper2); font:700 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink);}

/* ---- rubber stamp ---- */
.stamp{
  display:inline-block; font:700 12px var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--red2); border:2.5px solid var(--red2); border-radius:3px; padding:6px 12px;
  transform:rotate(-6deg); opacity:.92; position:relative;
  box-shadow:inset 0 0 0 1px rgba(158,51,38,.25);
  -webkit-mask-image:var(--grain); mask-image:var(--grain); -webkit-mask-size:200px; mask-size:200px;
}
.stamp.green{color:var(--green2); border-color:var(--green2);}

/* ============================== MUTE / TOAST ============================== */
#mute{position:absolute; top:max(12px, env(safe-area-inset-top)); right:14px; z-index:30; width:42px; height:42px;
  border-radius:50%; background:var(--paper); border:2px solid var(--line); color:var(--ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:2px 2px 0 var(--ink);}
#mute:active{transform:translate(2px,2px); box-shadow:none;}
#mute svg{width:20px; height:20px;}

/* float above the bottom action bar (Commit/Burn, shop's New Stock/Next Lock, share row)
   + the iOS safe area, so toasts like "… joined the crew" never sit on top of the buttons */
#toast{position:fixed; left:50%; bottom:max(92px, calc(env(safe-area-inset-bottom) + 72px)); transform:translateX(-50%) translateY(20px); z-index:60;
  background:var(--ink); color:var(--paper); font:700 12px var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:11px 18px; border:2px solid var(--ink); border-radius:2px; opacity:0;
  transition:all .28s ease; box-shadow:4px 4px 0 var(--red2); pointer-events:none; max-width:84vw; text-align:center;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* fonts loaded flag prevents FOUT jump on serif numerals */
.serifnum{font-feature-settings:"lnum" 1;}