:root {
  --bk: #0a0a0a;
  --bk2: #141414;
  --wh: #f2f2f2;
  --dim: #9a9a9a;
  --rd: #e3151f;
  --rd2: #ff2a33;
  --display: "Tektur", "Impact", "Arial Black", sans-serif;
  --font: "Chakra Petch", "Segoe UI", Arial, sans-serif;
  --mono: "Chakra Petch", Consolas, monospace;
}
* { box-sizing: border-box; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bk); color: var(--wh); font-family: var(--font); font-size: 16px; line-height: 1.45; font-feature-settings: "tnum" 1; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, select, input, output { font: inherit; color: inherit; }
button { cursor: pointer; }
b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--rd2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---- the poster ------------------------------------------------------------------------------- */
.poster { position: relative; max-width: 1480px; margin: 0 auto; padding: 40px 40px 48px; display: grid; gap: 22px; }
.poster > * { min-width: 0; }
.poster::before { content: ""; position: absolute; inset: 14px; border: 2px solid var(--wh); pointer-events: none; }
.corner { position: absolute; width: 96px; height: auto; z-index: 2; pointer-events: none; }
.corner.tl { left: 2px; top: 2px; }
.corner.tr { right: 2px; top: 2px; transform: scaleX(-1); }
.corner.bl { left: 2px; bottom: 2px; transform: scaleY(-1); }
.corner.br { right: 2px; bottom: 2px; transform: scale(-1); }
.x { color: var(--rd2); font-weight: 700; margin-right: 10px; }
.dim { color: var(--dim); font-weight: 500; }
.lab { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wh); }
.cap { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.note { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.5; }
.note b { color: var(--wh); }
.mono { font-family: var(--mono); word-break: break-all; color: var(--wh); }

.strip { display: grid; grid-template-columns: 1fr auto auto; gap: 12px 24px; align-items: center; padding: 10px 14px; border: 2px solid var(--wh); background: var(--bk); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.strip .tag b { color: var(--rd2); }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px; background: var(--rd); color: var(--wh); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; }
.pill.dim { background: var(--bk2); color: var(--dim); border: 2px solid var(--dim); }
.pill.on { background: var(--wh); color: var(--bk); }
.pill .dot { width: 10px; height: 10px; background: currentColor; }

/* ---- panels ----------------------------------------------------------------------------------- */
.panel { margin: 0; border: 2px solid var(--wh); background: var(--bk); display: grid; align-content: start; gap: 14px; padding: 14px; min-width: 0; }
.panel > * { min-width: 0; }
.row1 { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; }
.panel.photo { padding: 0; grid-template-rows: 1fr auto; gap: 0; }
.panel.photo img { width: 100%; height: auto; align-self: center; }
.panel.photo figcaption { padding: 10px 14px; border-top: 2px solid var(--wh); }
.chev { background: url("/art/web/chevrons.png") center top / 20px auto repeat-y; margin: 0 12px; }
.pocket-stage { position: relative; width: min(100%, 440px); margin: 0 auto; }
.pocket-img { position: relative; z-index: 2; width: 100%; height: auto; }
.coin { position: absolute; z-index: 1; left: 50%; top: 6%; width: 15%; transform: translate(-50%, 0); opacity: 0; pointer-events: none; }
.coin.drop { animation: coin-drop 1.1s cubic-bezier(0.55, 0.05, 0.85, 0.6) forwards; }
@keyframes coin-drop { 0% { opacity: 1; transform: translate(-50%, -150%); } 70% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, 120%); } }
.panel.object.bump .pocket-img { animation: bump 0.5s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.02, 0.985); } 100% { transform: scale(1); } }
.lab-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.figs { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--wh); }
.fig { padding: 10px 14px; display: grid; gap: 2px; min-width: 0; }
.fig + .fig { border-left: 2px solid var(--wh); }
.fig .k { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd2); }
.fig .v { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; }
.fig .v small { font-size: 0.5em; color: var(--dim); font-weight: 500; }

.hazard { height: 22px; background: url("/art/web/hazard.png") left center / auto 100% repeat-x; border: 2px solid var(--wh); }

/* ---- the rule --------------------------------------------------------------------------------- */
.rule { display: grid; gap: 14px; }
.xlist { display: grid; border: 2px solid var(--wh); }
.xrow { display: grid; grid-template-columns: 26px 130px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-top: 2px solid var(--wh); min-height: 64px; }
.xrow:first-child { border-top: 0; }
.xrow .x { font-size: 24px; line-height: 1; margin: 0; }
.xrow .k { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; min-width: 48px; padding: 8px 18px; border: 2px solid var(--wh); background: var(--bk); color: var(--wh); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.btn img { width: 22px; height: 22px; }
.btn:active { transform: translate(1px, 1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn.red { background: var(--rd); border-color: var(--rd); }
.btn.small { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.btn.big { min-height: 60px; font-size: 18px; font-family: var(--display); letter-spacing: 0.08em; }
.btn[aria-pressed="true"] { background: var(--wh); color: var(--bk); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.field { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.field input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 8px 12px; border: 2px solid var(--wh); background: var(--bk); color: var(--wh); font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; }
.field input::placeholder { color: var(--dim); }
.range { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.range input[type="range"] { width: 100%; accent-color: var(--rd); min-height: 44px; margin: 0; }
.range output { font-family: var(--display); font-size: 24px; font-weight: 700; min-width: 3.4ch; text-align: right; }
.walletline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; }

/* ---- the title -------------------------------------------------------------------------------- */
.title { display: grid; gap: 6px; }
.display { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(60px, 12vw, 190px); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wh); text-shadow: 0.04em 0.04em 0 var(--rd); }
.display.right { text-align: right; }
.grid-panel { position: relative; border: 2px solid var(--wh); padding: 16px; display: grid; gap: 14px; background-color: var(--bk); background-image: linear-gradient(rgba(227, 21, 31, 0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(227, 21, 31, 0.45) 1px, transparent 1px); background-size: 40px 40px; }
.watch { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--wh); background: var(--bk); }
.watch .fig .v { font-size: clamp(20px, 2vw, 28px); }
.grid-panel .note { background: var(--bk); padding: 4px 6px; }
.action { display: grid; gap: 10px; }
.log { margin: 0; padding: 4px 6px 4px 26px; font-size: 14px; color: var(--dim); display: grid; gap: 4px; background: var(--bk); }
.log:empty { display: none; }
.log .err { color: var(--rd2); }
.log a { color: var(--wh); text-decoration: underline; }
.wallets { display: flex; flex-wrap: wrap; gap: 8px; }
.wallets img { width: 22px; height: 22px; }

/* ---- row 3 -------------------------------------------------------------------------------------- */
.row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; align-items: stretch; }
.panel.data { border-color: var(--rd); position: relative; }
.panel.data .sphere { position: absolute; right: 14px; top: 8px; width: 80px; height: auto; }
.panel.data .cap { padding-right: 96px; }
.month { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--rd); }
.month .fig + .fig { border-left: 2px solid var(--rd); }
.tbl { border: 2px solid var(--rd); display: grid; }
.tr { display: grid; align-items: center; gap: 12px; padding: 10px 12px; border-top: 2px solid var(--rd); min-height: 56px; }
.tr:first-child { border-top: 0; }
.tr.head { background: var(--rd); color: var(--wh); min-height: 36px; padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.lock { grid-template-columns: 1fr 1.3fr 1.1fr auto; }
.lock .a { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; }
.lock .a img { width: 26px; height: 26px; }
.lock .amt { font-family: var(--display); font-size: 18px; font-weight: 700; }
.lock .amt small { display: block; font-family: var(--font); font-size: 12px; color: var(--dim); font-weight: 400; }
.lock .when { font-size: 12px; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }
.lock .when b { display: block; font-size: 15px; color: var(--wh); }
.state { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; border: 2px solid var(--wh); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.state.on { background: var(--rd); border-color: var(--rd); }
.state img { width: 16px; height: 16px; }
.empty { padding: 14px 12px; color: var(--dim); font-size: 14px; display: flex; align-items: center; gap: 14px; }
.empty img { width: 56px; height: auto; flex: none; }

.barcode { width: 100%; height: auto; }
.ca { font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; line-height: 1.4; word-break: break-all; user-select: all; -webkit-user-select: all; min-height: 2.8em; display: grid; align-content: center; text-align: center; border: 2px solid var(--wh); padding: 8px 10px; text-transform: uppercase; }
.ca.set { text-transform: none; }
.linkrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.card { position: relative; border: 2px solid var(--wh); overflow: hidden; background: var(--bk); }
.card-bg { width: 100%; height: auto; opacity: 0.6; }
.card-text { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 4px; text-align: center; padding: 8%; }
.card .t { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--rd2); }
.card .big { font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 900; line-height: 1.25; text-shadow: 0.06em 0.06em 0 var(--rd); }
.card .usd { font-size: 16px; color: var(--wh); }
.card .line { font-size: 14px; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.card .who { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 4px; }

/* ---- bottom ------------------------------------------------------------------------------------- */
.bottom { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "red how" "red everyone" "fine fine"; gap: 22px; }
.redblock { grid-area: red; background: var(--rd); color: var(--wh); padding: 18px; display: grid; align-content: space-between; gap: 14px; min-width: 0; }
.numeral { font-family: var(--display); font-weight: 900; font-size: clamp(88px, 11vw, 170px); line-height: 1.1; text-align: right; }
.numeral-k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-align: right; }
.xbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 8px 16px; border: 2px solid var(--wh); background: var(--bk); color: var(--wh); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.xbtn img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.xbtn:disabled { opacity: 0.55; cursor: not-allowed; }
.xbtn:active { transform: translate(1px, 1px); }
.how { grid-area: how; display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--wh); }
.step { padding: 16px 18px 18px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; border-left: 2px solid var(--wh); min-width: 0; }
.step:first-child { border-left: 0; }
.step img { width: 72px; height: auto; }
.step h2 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; }
.step h2 .n { color: var(--rd2); margin-right: 10px; font-weight: 500; }
.step p { margin: 0; font-size: 14px; color: var(--dim); }
.step p b { color: var(--wh); }
.everyone { grid-area: everyone; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--wh); }
.everyone .fig { padding: 14px 18px; }
.everyone .fig .v { font-size: clamp(24px, 2.6vw, 34px); }
.fine { grid-area: fine; margin: 0; font-size: 13px; color: var(--dim); letter-spacing: 0.02em; max-width: 110ch; }

/* ---- dialogs ----------------------------------------------------------------------------------- */
dialog { border: 2px solid var(--wh); background: var(--bk); color: var(--wh); padding: 22px 24px; width: min(92vw, 520px); }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
dialog .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* ---- widths ------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .watch { grid-template-columns: 1fr 1fr; }
  .watch .fig:nth-child(n + 3) { border-top: 2px solid var(--wh); }
  .watch .fig:nth-child(3) { border-left: 0; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 .panel.data { grid-column: 1 / -1; }
  .lock { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .bottom { grid-template-columns: 1fr; grid-template-areas: "how" "everyone" "red" "fine"; }
  .redblock { grid-template-columns: 1fr auto; align-items: end; }
  .redblock .numeral-k { grid-column: 1; }
  .redblock .xbtn { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 860px) {
  .poster { padding: 26px 16px 34px; gap: 16px; }
  .poster::before { inset: 6px; }
  .corner { width: 56px; }
  .strip { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
  .pill { justify-self: start; }
  .row1 { grid-template-columns: 1fr; }
  .chev { height: 30px; background: url("/art/web/chevrons.png") center / auto 100% repeat-x; margin: 8px 0; }
  .xrow { grid-template-columns: 26px 1fr; }
  .xrow > :nth-child(3) { grid-column: 1 / -1; }
  .row3 { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .step { border-left: 0; border-top: 2px solid var(--wh); }
  .step:first-child { border-top: 0; }
  .everyone { grid-template-columns: 1fr; }
  .everyone .fig + .fig { border-left: 0; border-top: 2px solid var(--wh); }
  .month { grid-template-columns: 1fr; }
  .month .fig + .fig { border-left: 0; border-top: 2px solid var(--rd); }
  .figs { grid-template-columns: 1fr; }
  .figs .fig + .fig { border-left: 0; border-top: 2px solid var(--wh); }
  .redblock { grid-template-columns: 1fr; }
  .redblock .xbtn { grid-column: 1; grid-row: auto; }
  .numeral, .numeral-k { text-align: left; }
}
@media (max-width: 400px) {
  .poster { padding: 20px 12px 30px; }
  .lock { grid-template-columns: 1fr; }
  .ca { font-size: 12px; }
}

/* ---- after the first screens ------------------------------------------------------------------- */
.poster { padding-top: 58px; }
.pocket-stage { width: min(100%, 360px); }
.barcode { width: auto; max-width: 100%; max-height: 120px; margin: 0 auto; }
.card-bg { opacity: 0.75; }
.card-text > div { background: var(--bk); padding: 2px 10px; }
.card-text { gap: 6px; }
@media (max-width: 1100px) { .tr.head.lock { display: none; } .panel.data .sphere { width: 64px; } }
@media (max-width: 860px) { .poster { padding-top: 40px; } .pocket-stage { width: min(100%, 300px); } }
.xrow .x { line-height: 1.2; }
.display { line-height: 1.15; }
.numeral { line-height: 1.2; }
.display { line-height: 1.25; }
.numeral { line-height: 1.3; }
#tgNote, #notifyBtn { text-transform: uppercase; }
.display { line-height: 1.32; }