/* ── Roast my bag ─────────────────────────────────────── */
:root {
  --ink-dark: #1b1712;
  --stamp: #c8232c;
  --grunge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.7 0 0 0 2.15'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.linkish { background: none; border: 0; padding: 0; color: var(--amber); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: #ffc233; }

/* hero */
.rh { position: relative; padding: calc(var(--nav-h) + clamp(24px, 4.5vw, 56px)) 0 clamp(36px, 5vw, 64px); overflow: hidden; }
.rh-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(255, 176, 0, 0.14), transparent 60%),
    radial-gradient(40% 50% at 10% 100%, rgba(63, 214, 200, 0.07), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 44px);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.rh-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.rh-title { font-size: clamp(54px, 6.6vw, 104px); margin: 16px 0 18px; }
.rh-title span { display: block; }
.rh-title .hot { color: var(--amber); text-shadow: 0 0 40px var(--amber-glow); }
.rh-sub { margin: 0 0 28px; }

.rh-sticker { position: relative; margin: 0; justify-self: center; width: min(100%, 400px); }
.rh-sticker img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); animation: bob 5s ease-in-out infinite; }
.rh-sticker-glow { position: absolute; inset: 14% 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 176, 0, 0.3), transparent); filter: blur(10px); }
.rh-bubble {
  position: absolute; top: 4%; left: -6%; padding: 10px 14px; border-radius: 12px 12px 12px 2px;
  background: var(--paper); color: var(--ink-dark); font-weight: 800; font-size: 13px; letter-spacing: 0.04em;
  transform: rotate(-5deg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-10px) rotate(-1.2deg) } }

/* form */
.rform { display: flex; gap: 10px; max-width: 640px; }
.rform-field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 58px; padding: 0 6px 0 16px; gap: 10px;
  border-radius: 999px; background: rgba(14, 16, 19, 0.9); border: 1px solid var(--line-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rform-field:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 176, 0, 0.12); }
.rform-field.bad { border-color: var(--down); box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.12); }
.rform-prefix { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--amber); }
.rform-field input {
  flex: 1 1 auto; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text);
  font: 500 15px/1 var(--f-mono); letter-spacing: 0.01em;
}
.rform-field input::placeholder { color: #6b6760; }
.rform-paste { height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.rform-paste:hover { border-color: var(--amber); }
.rform-go { height: 58px; padding: 0 26px; font-size: 14px; }
.rform-go svg { width: 18px; height: 18px; }
.rform-go[aria-busy='true'] { opacity: 0.6; pointer-events: none; }
.rform-msg { min-height: 1.6em; margin: 10px 0 0 18px; font-size: 12px; color: var(--down); }
.rform-msg.info { color: var(--amber); }
.rform-alt { margin: 4px 0 0 18px; font-size: 12px; color: var(--muted); }

/* stages */
.rstage { padding-top: 8px; padding-bottom: clamp(40px, 6vw, 80px); scroll-margin-top: calc(var(--nav-h) + 12px); }
.rstage[hidden] { display: none; }

/* printer / loading */
.printer { max-width: 640px; margin: 0 auto; }
.printer-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px 14px 4px 4px;
  background: linear-gradient(#22262c, #15181c); border: 1px solid var(--line-2); font-size: 11px; letter-spacing: 0.14em; color: var(--muted);
}
.printer-acct { margin-left: auto; color: var(--text); }
.printer-led { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25 } }
.printer-slot { height: 10px; margin: 0 14px; background: #050506; border-radius: 0 0 6px 6px; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9); }
.tape {
  list-style: none; margin: -4px 34px 0; padding: 18px 20px 26px; min-height: 260px;
  background: linear-gradient(var(--paper), #e6dbc4); color: var(--ink-dark); font-size: 13px; line-height: 1.9;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.45);
  -webkit-mask: radial-gradient(7px at 50% 100%, transparent 98%, #000) 50% 100% / 18px 100% repeat-x;
  mask: radial-gradient(7px at 50% 100%, transparent 98%, #000) 50% 100% / 18px 100% repeat-x;
}
.tape li { display: flex; gap: 12px; white-space: nowrap; overflow: hidden; animation: feed 0.25s ease-out; }
.tape li time { color: #8a7f6c; flex: none; }
.tape li span { overflow: hidden; text-overflow: ellipsis; }
.tape li.cur span::after { content: '▌'; animation: blink 0.7s steps(2) infinite; margin-left: 2px; }
.tape li.ok span::before { content: '✓ '; color: #1a8f55; font-weight: 800; }
@keyframes feed { from { transform: translateY(-8px); opacity: 0 } }

/* ── verdict card ─────────────────────────────────────── */
.verdict {
  position: relative; max-width: 1060px; margin: 0 auto; padding: clamp(18px, 3vw, 36px);
  padding-right: clamp(18px, 30%, 330px);
  border-radius: 22px; border: 1px solid var(--line-2);
  background:
    radial-gradient(70% 90% at 92% 70%, rgba(255, 176, 0, 0.18), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 36px),
    linear-gradient(160deg, #15181c, #0b0c0f);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
.verdict-pose {
  position: absolute; right: -10px; bottom: 0; width: clamp(240px, 38%, 420px); height: auto; pointer-events: none;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.6));
}
.verdict.in .verdict-pose { animation: rise 0.6s cubic-bezier(.2, .9, .3, 1.2) both 0.15s; }
@keyframes rise { from { transform: translateY(30px); opacity: 0 } }

.slip {
  position: relative; z-index: 1; color: var(--ink-dark); padding: 26px clamp(18px, 3vw, 34px) 20px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(27, 23, 18, 0.05) 31px 32px),
    linear-gradient(170deg, #f6eedd, var(--paper) 60%, #e9dcc2);
  border-radius: 4px; transform: rotate(-0.8deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1), 0 24px 40px rgba(0, 0, 0, 0.45);
  -webkit-mask: radial-gradient(6px at 50% 0, transparent 98%, #000) 50% 0 / 16px 100% repeat-x;
  mask: radial-gradient(6px at 50% 0, transparent 98%, #000) 50% 0 / 16px 100% repeat-x;
}
.verdict.in .slip { animation: slipIn 0.5s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes slipIn { from { transform: translateY(24px) rotate(-3deg); opacity: 0 } }
.slip-top { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; padding-bottom: 10px; border-bottom: 2px dashed rgba(27, 23, 18, 0.35); }
.slip-meta { display: grid; gap: 3px; margin: 12px 0 0; font-size: 11px; letter-spacing: 0.08em; }
.slip-meta div { display: flex; gap: 8px; }
.slip-meta dt { min-width: 4.2em; }
.slip-meta dt { color: #8a7f6c; font-weight: 700; }
.slip-meta dd { margin: 0; font-weight: 700; }

.stamp {
  --c: var(--stamp);
  position: absolute; top: 62px; right: clamp(12px, 3vw, 34px); z-index: 2;
  display: grid; justify-items: center; gap: 2px; padding: 8px 18px 7px;
  color: var(--c); border: 4px solid var(--c); border-radius: 8px; outline: 2px solid var(--c); outline-offset: 3px;
  transform: rotate(-9deg); mix-blend-mode: multiply; opacity: 0.9;
  -webkit-mask-image: var(--grunge); mask-image: var(--grunge);
}
.stamp b { font: 900 clamp(30px, 4vw, 46px)/0.9 var(--f-display); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.stamp-sm { font: 800 9px/1 var(--f-mono); letter-spacing: 0.3em; text-transform: uppercase; }
.stamp[data-tone='green'] { --c: #17834d; }
.stamp[data-tone='blue'] { --c: #2350a3; }
.stamp[data-tone='orange'] { --c: #c45a12; }
.stamp[data-tone='red'] { --c: #c8232c; }
.verdict.in .stamp { animation: slam 0.42s cubic-bezier(.3, 1.6, .5, 1) both 0.55s; }
@keyframes slam { 0% { transform: rotate(-20deg) scale(2.4); opacity: 0 } 70% { opacity: 0.95 } 100% { transform: rotate(-9deg) scale(1); opacity: 0.9 } }

.slip-head { font-size: clamp(36px, 5.4vw, 66px); line-height: 0.92; margin: clamp(30px, 4vw, 46px) 0 14px; max-width: 18ch; text-wrap: balance; }
.slip-roast { margin: 0 0 22px; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; max-width: 62ch; color: #2d271f; white-space: pre-line; }
.slip-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; padding-top: 14px; border-top: 2px dashed rgba(27, 23, 18, 0.35); }
.slip-total { display: grid; gap: 4px; }
.slip-total span { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; color: #8a7f6c; }
.slip-total b { font-size: clamp(40px, 5vw, 58px); line-height: 0.85; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 260px; }
.chips li { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 6px; border: 1.5px solid var(--ink-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.35); }
.chips li i { font-style: normal; font-weight: 500; color: #5b5244; }
.chips li.none { border-style: dashed; color: #8a7f6c; }
.slip-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8a7f6c; }
.slip-face { width: 30px; height: 30px; flex: none; }
.slip-face svg { width: 100%; height: 100%; }
.slip-mark { margin-left: auto; color: var(--ink-dark); font-weight: 800; letter-spacing: 0.12em; }

/* share */
.share { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px auto 0; max-width: 1060px; }
.share .ico-x svg { width: 15px; height: 15px; }
.card-preview { max-width: 720px; margin: 22px auto 0; text-align: center; }
.card-preview[hidden] { display: none; }
.card-preview figcaption { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.card-preview img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-2); }

/* holdings table */
.bag { max-width: 1060px; margin: clamp(48px, 7vw, 84px) auto 0; }
.bag-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.bag-title { font-size: clamp(38px, 5vw, 64px); margin: 10px 0 0; }
.bag-counts { margin: 0; font-size: 12px; letter-spacing: 0.06em; }
.bag-table-wrap { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow-x: auto; }
.bag-table { width: 100%; border-collapse: collapse; font: 500 14px/1.3 var(--f-mono); }
.bag-table th { text-align: left; padding: 14px 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.bag-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bag-table tr:last-child td { border-bottom: 0; }
.bag-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.bag-table .num { text-align: right; }
.bag-table .sym b { font-weight: 800; }
.bag-table .sym small { display: block; color: var(--muted); font-size: 11px; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.kind { display: inline-block; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid currentColor; }
.kind-stock { color: var(--teal); }
.kind-coin { color: var(--amber); }
.kind-eth { color: #a9b4ff; }
.kind-stable { color: var(--muted); }
.bag-note { font-size: 11px; margin: 12px 4px 0; }

/* ladder */
.ladder { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(30px, 5vw, 60px); }
.ladder-title { font-size: clamp(38px, 5.6vw, 72px); margin: 12px 0 26px; }
.ladder-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ladder-list li { position: relative; padding: 18px 14px 14px; border-radius: 10px; background: var(--paper); color: var(--ink-dark); overflow: hidden; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; }
.ladder-list li .stamp { position: static; transform: rotate(-6deg); padding: 5px 7px 4px; border-width: 2.5px; outline-width: 1.5px; outline-offset: 2px; align-self: flex-start; max-width: 100%; }
.ladder-list li .stamp b { font-size: clamp(15px, 1.45vw, 20px); letter-spacing: 0.02em; }
.ladder-list li p { margin: 14px 0 0; font: 600 11px/1.45 var(--f-mono); color: #5b5244; }

/* fine print */
.rfine { padding-bottom: 40px; }
.rfine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rfine-print, .rfine-ca { padding: clamp(20px, 3vw, 32px); border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.rfine-h { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.rfine-print ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: #c9c4ba; font-size: 14px; }
.rfine-print a { color: var(--amber); }
.rfine-ca { display: grid; gap: 14px; align-content: start; background: radial-gradient(80% 100% at 100% 0, rgba(255, 176, 0, 0.1), transparent 60%), var(--panel); }
.rfine-pit { font-size: clamp(32px, 4vw, 48px); margin: 0; }

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .rh-grid { grid-template-columns: 1fr; }
  .rh-sticker { order: -1; width: min(62%, 280px); margin-bottom: -8px; }
  .rh-bubble { left: auto; right: -14%; top: 8%; }
  .verdict { padding: 16px; padding-top: 150px; }
  .verdict-pose { top: -6px; bottom: auto; right: 50%; transform: translateX(50%); width: 190px; }
  .verdict.in .verdict-pose { animation: none; }
  .rfine-grid { grid-template-columns: 1fr; }
  .ladder-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ladder-list li .stamp b { font-size: 19px; }
}
@media (max-width: 600px) {
  .rform { flex-direction: column; }
  .rform-go { width: 100%; }
  .rform-field { height: 54px; padding-left: 14px; }
  .rform-field input { font-size: 14px; }
  .rform-msg, .rform-alt { margin-left: 4px; }
  .slip { padding: 22px 16px 16px; }
  .slip-meta { grid-template-columns: 1fr; }
  #v-stamp { position: relative; top: auto; right: auto; justify-self: start; margin: 18px 0 0 6px; width: max-content; padding: 6px 12px 5px; border-width: 3px; }
  #v-stamp b { font-size: 30px; }
  .slip-head { margin-top: 18px; }
  .share .btn { flex: 1 1 calc(50% - 10px); }
  .share #s-x { flex-basis: 100%; }
  .tape { margin: -4px 12px 0; font-size: 12px; }
  .bag-table th, .bag-table td { padding: 11px 12px; }
  .bag-table .hide-sm { display: none; }
  .bag-table { font-size: 13px; }
  .printer-head { padding: 12px 14px; font-size: 10px; letter-spacing: 0.1em; }
  .printer-head .mono:not(.printer-acct) { white-space: nowrap; }
  .printer-acct { white-space: nowrap; }
}
@media (max-width: 440px) {
  .bag-table .hide-xs { display: none; }
  .bag-table th, .bag-table td { padding: 11px 10px; }
  .printer-word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-sticker img { animation: none; }
}

[hidden] { display: none !important; }