/* VAULT: inside the vault. Gunmetal walls lined with safe-deposit boxes, brushed-steel panels with brass rivets, gold
   and money-green accents, an amber LED ticker. Paper things (the deposit slip, receipts, the guard's speech bubble)
   stay cream, like paper on a steel counter. One stylesheet for the site, the stream pages, the clip renderer and
   admin.
   Colours: --text is type on steel; --ink is outlines and type on paper/gold. */
:root {
  color-scheme: dark;
  --wall: #1b2228;
  --steel: #2b343c;
  --steel-lo: #222930;
  --steel-hi: #3a454f;
  --card: #29323a;
  --card2: #1e252b;
  --card3: #171d22;
  --text: #edf0f2;
  --muted: #9aa8b4;
  --line: #3b4651;
  --paper: #fbf5e7;
  --paper-line: #e8dcc2;
  --ink: #0e1317;
  --ink-lo: #070a0c;
  --ink2: #4c5660;
  --gold: #e9b949;
  --gold-hi: #ffd877;
  --gold-lo: #a7781b;
  --mint: #4fd69c;
  --mint-lo: #2c9e6c;
  --mint-soft: #dcf6e9;
  --coral: #ff8f73;
  --red: #ff5a52;
  --red-soft: #fde2df;
  --green: #3fd08a;
  --green-soft: #dcf6e9;
  --led: #ffb547;
  --purple: #9945ff;
  --teal: #14f195;
  --f-display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --side: 236px;
  --panel: 356px;
  --r: 20px;
  --rivet: radial-gradient(circle, var(--gold-hi) 0 2px, var(--gold-lo) 2.5px 3.6px, transparent 4.2px);
  --brushed: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px);
  --plate: linear-gradient(180deg, #2f3942, #232b32);
  --lift: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 0 var(--ink-lo), 0 12px 26px rgba(0, 0, 0, 0.38);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 600 15px/1.45 var(--f-body);
  color: var(--text);
  background-color: var(--wall);
  /* a wall of safe-deposit boxes, lit warmly from above */
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 205, 110, 0.09), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='64' viewBox='0 0 96 64'%3E%3Crect x='1.5' y='1.5' width='93' height='61' rx='6' fill='%23232b31' stroke='%230c1014' stroke-width='3'/%3E%3Crect x='5' y='5' width='86' height='54' rx='4' fill='none' stroke='%23303941' stroke-width='1.5'/%3E%3Crect x='37' y='12' width='22' height='8' rx='2' fill='%23977a35' fill-opacity='.45'/%3E%3Ccircle cx='48' cy='38' r='5.5' fill='%23333d46' stroke='%230c1014' stroke-width='1.5'/%3E%3Ccircle cx='48' cy='37' r='1.7' fill='%230c1014'/%3E%3Crect x='47.2' y='37' width='1.6' height='4.2' fill='%230c1014'/%3E%3C/svg%3E");
  min-height: 100vh;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); }
.muted { color: var(--muted); }

/* ---------- building blocks ---------- */
/* brushed-steel plates with a dark edge, a lifted bottom and a brass rivet in each corner */
.card {
  background-color: var(--steel);
  background-image: var(--rivet), var(--rivet), var(--rivet), var(--rivet), var(--brushed), var(--plate);
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-position: 9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px), 0 0, 0 0;
  border: 3px solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--lift);
  color: var(--text);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 3px solid var(--ink); border-radius: 999px; padding: 10px 18px; cursor: pointer;
  background: linear-gradient(#d4dbe1, #9ea9b3); color: var(--ink); font: 600 15px var(--f-display);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 0 var(--ink-lo); transition: transform 0.06s, box-shadow 0.06s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink-lo); }
.btn.gold { background: linear-gradient(var(--gold-hi), var(--gold)); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 0 var(--gold-lo), 0 5px 0 3px var(--ink); font-weight: 700; letter-spacing: 0.03em; }
.btn.gold:active { box-shadow: 0 2px 0 var(--gold-lo), 0 2px 0 3px var(--ink); }
.btn.gold:disabled { background: #6f6247; color: #b9a982; cursor: not-allowed; }
.btn.ghost { background: var(--steel-lo); color: var(--text); border-color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 0 var(--ink-lo); }
.btn.small { padding: 6px 13px; font-size: 13px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: var(--card3); color: var(--text); border: 2.5px solid var(--ink); font: 600 13px var(--f-display); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.chip.red { background: var(--red); color: #fff; }
.chip.red::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; margin: 0; letter-spacing: 0.01em; }
input[type="text"], textarea {
  width: 100%; border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: var(--card3); color: var(--text); outline: none; font-weight: 600;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
input[type="text"]:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(233, 185, 73, 0.55); }
textarea { resize: none; min-height: 96px; }
label.field { display: block; font: 800 11px var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 12px 0 5px; }

/* the vault dial: a little gold combination dial, used next to vault amounts */
.dial, .stat.vault::before, .duty .vaultline::before {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid var(--ink);
  background:
    radial-gradient(circle, var(--ink) 0 3px, transparent 3.5px),
    radial-gradient(circle, var(--gold-hi) 0 42%, transparent 43%),
    repeating-conic-gradient(var(--ink) 0 2deg, var(--gold) 2deg 30deg);
  animation: dial 14s linear infinite;
}
@keyframes dial { to { transform: rotate(360deg); } }

/* ---------- app layout ---------- */
.app { display: grid; grid-template-columns: var(--side) 1fr var(--panel); grid-template-rows: 44px 1fr; gap: 16px; padding: 0 18px 18px 0; height: 100vh; }
.side {
  grid-row: 1 / span 2; padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; overflow: auto;
  background: var(--brushed), linear-gradient(90deg, #232a31, #1c2228); border-right: 3px solid var(--ink);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06), 6px 0 18px rgba(0, 0, 0, 0.35);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .mark { width: 52px; height: 52px; display: grid; place-items: center; filter: drop-shadow(0 3px 0 var(--ink-lo)); }
.logo .mark svg { width: 52px; height: 52px; }
.logo b { font: 700 32px/1 var(--f-display); display: block; color: var(--gold-hi); letter-spacing: 0.03em; text-shadow: 0 3px 0 var(--ink-lo); }
.logo small { font: 800 10px var(--f-body); color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav button { text-align: left; background: none; border: 2.5px solid transparent; border-radius: 999px; padding: 8px 13px; cursor: pointer; font: 600 15px var(--f-display); display: flex; gap: 10px; align-items: center; color: var(--muted); }
.nav button:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.nav button.on { background: linear-gradient(var(--gold-hi), var(--gold)); color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--gold-lo), 0 3px 0 2.5px var(--ink); }
.side .blurb { padding: 16px 14px 14px; text-align: center; font-size: 13px; color: var(--muted); }
.side .blurb svg { filter: drop-shadow(0 3px 0 var(--ink-lo)); }
.side .blurb b { display: block; font: 600 16px var(--f-display); margin: 6px 0 2px; color: var(--text); }
.side .bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.ca { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--card3); color: var(--text); font: 700 12px var(--f-mono); cursor: pointer; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.ca .tag { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 0 7px; font: 700 12px var(--f-display); }
.ca .copy { margin-left: auto; color: var(--gold-hi); font-weight: 800; }

/* the ticker: an amber LED board, like a bank's rate board */
.ticker {
  grid-column: 2 / span 2; overflow: hidden; white-space: nowrap; display: flex; align-items: center;
  background: radial-gradient(circle, rgba(255, 181, 71, 0.07) 1px, transparent 1.5px) 0 0 / 4px 4px, #0b0f12;
  border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 16px 16px;
  box-shadow: inset 0 0 0 2px #2a333b, 0 5px 0 var(--ink-lo); color: var(--led);
}
.ticker .track { display: inline-flex; gap: 34px; animation: tick 50s linear infinite; padding-left: 20px; font: 700 13px var(--f-mono); text-shadow: 0 0 6px rgba(255, 181, 71, 0.55); }
.ticker .track span b.d { color: #ff7a6e; text-shadow: 0 0 6px rgba(255, 90, 82, 0.6); }
.ticker .track span b.c { color: #6ff2ad; text-shadow: 0 0 6px rgba(63, 208, 138, 0.6); }
.ticker .track span b.g { color: var(--gold-hi); }
@keyframes tick { to { transform: translateX(-50%); } }

.main { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
/* the stage sits in a heavy steel vault ring with a gold lip */
.stage-card {
  position: relative; flex: 1; min-height: 380px; overflow: hidden; padding: 0;
  border: 5px solid var(--gold); border-radius: 26px; background: #2a2f33;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 9px #6c7884, 0 0 0 11px var(--ink), 0 16px 30px rgba(0, 0, 0, 0.5);
  margin: 11px 11px 0;
}
.stage-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }
.hud .l, .hud .r { display: flex; gap: 6px; align-items: flex-start; }
.stat { background: rgba(14, 19, 23, 0.86); color: var(--text); border: 2.5px solid var(--ink); border-radius: 14px; padding: 4px 11px; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 var(--ink-lo); min-width: 64px; }
.stat b { display: block; font: 700 17px/1.15 var(--f-display); color: var(--led); text-shadow: 0 0 6px rgba(255, 181, 71, 0.45); }
.stat small { font: 800 9px var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.stat.vault { background: linear-gradient(var(--gold-hi), var(--gold)); color: var(--ink); display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; text-align: left; padding-left: 7px; }
.stat.vault b { color: var(--ink); text-shadow: none; }
.stat.vault::before { grid-row: 1 / span 2; width: 30px; height: 30px; }
.stat.vault small { color: #4a3a17; }
.reactions { display: flex; gap: 8px; align-items: center; margin: 4px 11px 0; }
.reactions button { border: 2.5px solid var(--ink); background: var(--plate); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: 18px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 var(--ink-lo); display: inline-flex; gap: 6px; align-items: center; }
.reactions button span { font: 700 14px var(--f-display); }
.reactions button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink-lo); }
.reactions .hint { margin-left: auto; font-size: 13px; color: var(--muted); background: rgba(14, 19, 23, 0.82); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.floaters i { position: absolute; bottom: 10%; font-style: normal; font-size: 30px; animation: floatUp 2.2s ease-out forwards; }
@keyframes floatUp { from { transform: translateY(0) scale(0.6); opacity: 1; } to { transform: translateY(-280px) scale(1.2); opacity: 0; } }

/* ---------- show overlay (paper on the stage) ---------- */
.show { position: absolute; inset: 0; pointer-events: none; z-index: 4; color: var(--ink); }
.show .card.attempt { position: absolute; left: 14px; bottom: 14px; max-width: min(48%, 520px); padding: 12px 16px; transform: translateY(20px); opacity: 0; transition: transform 0.35s cubic-bezier(.2,1.4,.4,1), opacity 0.25s; background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 rgba(14, 19, 23, 0.55); }
.show .card.attempt.in { transform: none; opacity: 1; }
.show .attempt .who { font: 700 13px var(--f-body); color: var(--ink2); margin-bottom: 3px; }
.show .attempt .who b { color: var(--ink); font-family: var(--f-display); font-weight: 600; }
.show .attempt p { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.caret { display: inline-block; width: 9px; height: 1.05em; background: var(--ink); border-radius: 3px; vertical-align: -3px; margin-left: 2px; animation: blink 0.8s infinite; }
/* the guard's speech bubble: cream, rounded, the guard's name on a coloured tab */
.show .bubble.roast { position: absolute; right: 14px; top: 62px; max-width: min(54%, 600px); background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 22px; padding: 12px 18px 13px; box-shadow: 0 5px 0 rgba(14, 19, 23, 0.55); animation: pop 0.25s cubic-bezier(.2,1.5,.4,1); }
.show .bubble.roast .who { display: inline-block; font: 600 13px var(--f-display); letter-spacing: 0.04em; color: #fff; background: var(--g, var(--green)); border: 2.5px solid var(--ink); border-radius: 999px; padding: 1px 10px; margin: -26px 0 4px -6px; box-shadow: 0 2px 0 rgba(14, 19, 23, 0.5); }
.show .bubble.roast p { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.28; }
/* bubbles sit over the guard's head (left/top set from the stage every frame); the roast's tail points at the guard */
.show .bubble { --min-top: 62px; --gap: 24px; }
.show .bubble.anchored { right: auto; transform-origin: var(--tail, 50%) 100%; }
.show .bubble.roast::before, .show .bubble.roast::after { content: ""; position: absolute; top: 100%; left: var(--tail, 50%); width: 0; height: 0; border-style: solid; border-color: var(--ink) transparent transparent; transform: translateX(-50%); }
.show .bubble.roast::before { border-width: 1.15em 0.8em 0; }
.show .bubble.roast::after { border-width: 0.8em 0.5em 0; border-top-color: var(--paper); }
.show .bubble.think { position: absolute; left: 60%; top: 14%; background: var(--paper); border: 3px solid var(--ink); border-radius: 30px; padding: 10px 16px; display: flex; gap: 7px; box-shadow: 0 4px 0 rgba(14, 19, 23, 0.55); }
.show .bubble.think span { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); animation: dot 0.9s infinite; }
.show .bubble.think span:nth-child(2) { animation-delay: 0.15s; }
.show .bubble.think span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 50% { transform: translateY(-6px); opacity: 0.4; } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
/* the verdict: a rubber stamp */
.show .stamp { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) rotate(-9deg) scale(2.4); opacity: 0; text-align: center; padding: 6px 26px 10px; border: 7px solid #d8382f; border-radius: 22px; color: #d8382f; background: rgba(251, 245, 231, 0.94); box-shadow: inset 0 0 0 3px rgba(251, 245, 231, 0.94), inset 0 0 0 5px currentColor; transition: transform 0.18s cubic-bezier(.3,1.6,.5,1), opacity 0.12s; }
.show .stamp.in { transform: translate(-50%, -50%) rotate(-9deg) scale(1); opacity: 1; }
.show .stamp b { display: block; font: 700 66px/1 var(--f-display); letter-spacing: 0.04em; }
.show .stamp small { display: block; font: 800 14px var(--f-body); color: var(--ink2); max-width: 420px; margin-top: 4px; }
.show .stamp.cracked { border-color: #1f9e5f; color: #1f9e5f; top: 30%; }
.show .win { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: linear-gradient(var(--gold-hi), var(--gold)); color: var(--ink); border: 3px solid var(--ink); border-radius: 24px; padding: 10px 24px; text-align: center; box-shadow: 0 6px 0 var(--gold-lo), 0 6px 0 3px var(--ink); animation: pop 0.4s cubic-bezier(.2,1.5,.4,1); font-weight: 800; font-size: 18px; white-space: nowrap; }
.show .win .big { font: 700 34px/1.1 var(--f-display); }
.show .flash { position: absolute; inset: 0; background: rgba(221, 75, 59, 0.26); animation: fade 0.5s forwards; }
.show .flash.green { background: rgba(255, 210, 63, 0.4); }
@keyframes fade { to { opacity: 0; } }
.idle-msg { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 8px 18px; box-shadow: 0 4px 0 rgba(14, 19, 23, 0.55); font-weight: 800; white-space: nowrap; }
.idle-msg b { font-family: var(--f-display); font-weight: 700; }

/* ---------- right panel ---------- */
.panel { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: auto; padding: 0 2px 10px; }
.duty { padding: 16px 18px; }
.duty .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.duty h2 { font-size: 13px; font-family: var(--f-body); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.duty .gname { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.duty .swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: var(--g, var(--green)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 3px 0 var(--ink-lo); flex: none; }
.duty .gname b { font: 700 22px/1.1 var(--f-display); display: block; color: var(--text); }
.duty .gname small { color: var(--muted); font-weight: 700; }
.duty .rumor { background: var(--card3); border: 2px dashed #5a6672; border-radius: 14px; padding: 8px 11px; font-size: 13px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }
.duty .rumor b { font: 800 10px var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); display: block; }
.duty .vaultline { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.duty .vaultline::before { width: 46px; height: 46px; }
.duty .vaultline b { font: 700 36px/1 var(--f-display); color: var(--gold-hi); text-shadow: 0 3px 0 var(--ink-lo); }
.duty .vaultline span { font-weight: 800; color: var(--muted); }
.tabs { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background-image: var(--brushed), var(--plate); background-size: auto; background-repeat: repeat, no-repeat; background-position: 0 0; }
.tabbar { display: flex; gap: 6px; padding: 8px; background: var(--card3); border-bottom: 3px solid var(--ink); }
.tabbar button { flex: 1; background: none; border: 2.5px solid transparent; border-radius: 999px; padding: 7px 6px; cursor: pointer; font: 600 15px var(--f-display); color: var(--muted); }
.tabbar button.on { background: linear-gradient(var(--gold-hi), var(--gold)); color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--gold-lo), 0 3px 0 2.5px var(--ink); }
.tabbar .count { background: var(--card); color: var(--gold-hi); border: 2px solid var(--ink); border-radius: 999px; padding: 0 6px; font: 700 11px var(--f-display); margin-left: 3px; }
.tabbar button.on .count { background: var(--ink); }
.tabbody { padding: 14px 16px; overflow: auto; }
/* "Try it" is a paper deposit slip on the steel counter */
.tabbody[data-body="try"] {
  margin: 12px; border-radius: 14px; color: var(--ink);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(14, 19, 23, 0.05) 27px 28px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.3);
}
.tabbody[data-body="try"]::before {
  content: "DEPOSIT SLIP · ONE SHOT · NO REFUNDS"; display: block; text-align: center; font: 800 10px var(--f-body); letter-spacing: 0.16em; color: var(--ink2);
  border-bottom: 2px dashed var(--paper-line); padding-bottom: 8px; margin-bottom: 10px;
}
.tabbody[data-body="try"] label.field { color: var(--ink2); }
.tabbody[data-body="try"] input[type="text"], .tabbody[data-body="try"] textarea { background: #fffdf8; color: var(--ink); box-shadow: inset 0 2px 3px rgba(14, 19, 23, 0.08); }
.tabbody[data-body="try"] input[type="text"]:focus, .tabbody[data-body="try"] textarea:focus { box-shadow: 0 0 0 4px var(--gold-hi); }
.tabbody[data-body="try"] .btn:not(.gold) { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 #000; }
.signin { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 2.5px dashed var(--ink2); border-radius: 16px; background: #fffdf8; color: var(--ink); font-size: 13px; }
.signin .btn { margin-left: auto; }
.wallet-chip { display: flex; align-items: center; gap: 8px; font: 700 13px var(--f-mono); padding: 8px 12px; background: var(--mint-soft); color: var(--ink); border: 2.5px solid var(--mint-lo); border-radius: 999px; }
.wallet-chip button { margin-left: auto; background: none; border: 0; color: var(--ink2); cursor: pointer; text-decoration: underline; font-size: 12px; }
.fast { display: inline-flex; align-items: center; gap: 3px; background: var(--gold); border: 2px solid var(--ink); border-radius: 999px; padding: 0 6px; font: 700 11px var(--f-display); color: var(--ink); white-space: nowrap; }
.holder { margin-top: 8px; padding: 9px 12px; border-radius: 16px; font-size: 13px; border: 2.5px dashed var(--ink2); background: #fffdf8; color: var(--ink); }
.holder.on { border: 2.5px solid var(--ink); background: linear-gradient(var(--gold-hi), var(--gold)); font-weight: 800; box-shadow: 0 3px 0 var(--gold-lo); }
.holder b { font-family: var(--f-display); font-weight: 700; }
.counter { text-align: right; font: 700 12px var(--f-display); color: var(--ink2); margin-top: 4px; }
/* SEND IT, with a vault wheel that spins when you hover */
.send { width: 100%; margin-top: 10px; font-size: 20px; padding: 12px; }
.send::before {
  content: ""; width: 24px; height: 24px; flex: none; transition: transform 0.5s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1317' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%230e1317'/%3E%3Cpath d='M12 3.5v6.3M12 14.2v6.3M3.5 12h6.3M14.2 12h6.3M6 6l4.4 4.4M13.6 13.6 18 18M18 6l-4.4 4.4M10.4 13.6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.send:hover::before { transform: rotate(180deg); }
.rules-mini { font-size: 12px; color: var(--ink2); margin-top: 12px; line-height: 1.5; border-top: 2px dashed var(--paper-line); padding-top: 10px; }
.my { margin-top: 12px; padding: 11px 13px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf8; color: var(--ink); font-size: 14px; }
.my b { font-family: var(--f-display); font-weight: 700; }
.my.err { background: var(--red-soft); border-color: #d8382f; }
.my.good { background: var(--green-soft); border-color: #1f9e5f; }
/* the line and the log are paper receipts with a torn edge */
.list { display: flex; flex-direction: column; gap: 14px; }
.row { position: relative; border: 0; border-radius: 10px 10px 0 0; padding: 10px 12px 8px; background: var(--paper); color: var(--ink); font-size: 13px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); margin-bottom: 6px; }
.row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px;
  background: linear-gradient(-45deg, transparent 5.5px, var(--paper) 0) 0 0 / 11px 8px, linear-gradient(45deg, transparent 5.5px, var(--paper) 0) 0 0 / 11px 8px;
}
.row .h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 12px var(--f-mono); border-bottom: 1.5px dashed var(--paper-line); padding-bottom: 5px; }
.row .v { font: 700 12px var(--f-display); letter-spacing: 0.06em; border: 2px solid currentColor; border-radius: 7px; padding: 0 6px; transform: rotate(-4deg); }
.row .v.d { color: #d8382f; }
.row .v.c { color: #1f9e5f; }
.row q { display: block; margin: 6px 0 2px; color: var(--ink2); quotes: "“" "”"; }
.row .roastline { font-weight: 800; }
.empty { color: var(--muted); text-align: center; padding: 18px 6px; font-size: 14px; }

/* ---------- sheets (how it works, halls, guards, proof) ---------- */
.sheet { position: absolute; inset: 0; z-index: 10; padding: 24px; overflow: auto; background: rgba(20, 26, 31, 0.96); border: 3px solid var(--ink); border-radius: 26px; backdrop-filter: blur(3px); color: var(--text); }
.sheet .inner { max-width: 880px; margin: 0 auto; }
.sheet .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sheet .head h1 { font-size: 40px; line-height: 1; color: var(--gold-hi); text-shadow: 0 3px 0 var(--ink-lo); }
.sheet .head p { margin: 8px 0 0; color: var(--muted); max-width: 600px; }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.steps .card { padding: 16px 18px; }
.steps .n { font: 700 13px var(--f-display); color: var(--gold); }
.steps h3 { font-size: 19px; margin: 2px 0 6px; }
.steps p { margin: 0; color: var(--muted); font-size: 14px; }
.tiers { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.tiers span { border: 2.5px solid var(--ink); border-radius: 999px; padding: 6px 12px; background: var(--card3); color: var(--text); font: 600 14px var(--f-display); box-shadow: 0 3px 0 var(--ink-lo); }
.tiers span b { color: var(--green); }
.guards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.guards-grid .card { padding: 12px; position: relative; }
.guards-grid .card.duty-now::after { content: "ON DUTY"; position: absolute; top: -12px; right: 12px; background: var(--red); color: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 1px 9px; font: 600 12px var(--f-display); }
.guards-grid canvas, .guards-grid img { width: 100%; aspect-ratio: 1; display: block; background: radial-gradient(circle at 50% 40%, #3a444d, #1c2228); border-radius: 16px; border: 2px solid var(--ink); object-fit: contain; }
.guards-grid h3 { font-size: 17px; margin-top: 8px; color: var(--gold-hi); }
.guards-grid p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.note { font-size: 12px; color: var(--muted); margin-top: 14px; }
.proof-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--card2); color: var(--text); border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; }
.proof-table th, .proof-table td { padding: 8px 10px; border-bottom: 1.5px dashed var(--line); text-align: left; }
.proof-table th { background: var(--card3); font: 800 11px var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: linear-gradient(var(--gold-hi), var(--gold)); color: var(--ink); border: 3px solid var(--ink); padding: 9px 18px; border-radius: 999px; font: 600 15px var(--f-display); box-shadow: 0 4px 0 var(--ink-lo); }

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  :root { --panel: 304px; --side: 204px; }
}
@media (max-width: 860px) {
  .app { display: flex; flex-direction: column; height: auto; padding: 0 12px 16px; gap: 12px; }
  .side { border-right: 0; border-bottom: 3px solid var(--ink); margin: 0 -12px; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; position: sticky; top: 0; z-index: 20; background: var(--brushed), linear-gradient(#262e35, #1c2228); }
  .side .blurb, .side .bottom .ca-wrap { display: none; }
  .nav { flex-direction: row; overflow-x: auto; width: 100%; order: 3; }
  .nav button { white-space: nowrap; padding: 6px 12px; font-size: 14px; }
  .side .bottom { margin: 0 0 0 auto; flex-direction: row; }
  .ticker { order: 0; border-radius: 14px; border-top: 3px solid var(--ink); min-height: 34px; }
  .stage-card { min-height: 0; aspect-ratio: 4 / 3.4; flex: none; border-width: 4px; border-radius: 22px; margin: 10px 10px 0; box-shadow: 0 0 0 3px var(--ink), 0 0 0 8px #6c7884, 0 0 0 10px var(--ink), 0 12px 24px rgba(0, 0, 0, 0.5); }
  .reactions { margin: 4px 0 0; }
  .show .card.attempt { max-width: 70%; left: 8px; bottom: 8px; padding: 8px 10px; }
  .show .attempt p { font-size: 15px; }
  .show .card.attempt.compact { max-width: 56%; padding: 6px 8px; }
  .show .attempt.compact p { font-size: 12px; }
  .show .bubble.roast { max-width: 76%; right: 8px; top: 54px; padding: 8px 12px; }
  .show .bubble { --min-top: 54px; --gap: 18px; --pad: 8px; }
  .show .bubble.roast p { font-size: 15px; }
  .show .bubble.roast .who { font-size: 11px; margin-top: -20px; }
  .show .stamp b { font-size: 40px; }
  .show .stamp small { font-size: 11px; max-width: 240px; }
  .show .win { font-size: 14px; padding: 8px 12px; white-space: normal; width: 90%; }
  .show .win .big { font-size: 22px; }
  .hud .stat { min-width: 50px; padding: 3px 7px; }
  .hud .chip { font-size: 11px; padding: 3px 8px; letter-spacing: 0.02em; }
  .hud .stat.vault { white-space: nowrap; padding: 2px 8px 2px 5px; }
  .hud .stat.vault::before { width: 24px; height: 24px; }
  .hud .stat.vault small { font-size: 8px; }
  .hud .stat b { font-size: 14px; }
  .hud .stat.hide-sm { display: none; }
  .steps, .guards-grid { grid-template-columns: 1fr; }
  .sheet { position: fixed; z-index: 40; border-radius: 0; border: 0; }
  .sheet .head h1 { font-size: 30px; }
  .reactions .hint { display: none; }
  .side { gap: 8px; padding: 8px 12px; }
  .logo .mark, .logo .mark svg { width: 40px; height: 40px; }
  .logo b { font-size: 26px; }
  .logo small { display: none; }
  .panel .tabs { order: -1; }
  .hud .stat { display: none; }
  .hud .stat.vault { display: grid; }
  .show .bubble.roast { top: 44px; }
  .show .stamp { padding: 3px 12px 5px; border-width: 5px; border-radius: 14px; }
  .show .stamp b { font-size: 34px; }
  .show .stamp small { font-size: 10px; max-width: 200px; }
  .show .stamp.cracked { top: 52%; }
  .show .win { bottom: 8px; }
}