/* Pieces shared by both concepts. Each concept sets its own tokens (--ink, --bg, --line, --accent, --radius, --card). */

/* ---- live console */
.console-embed { position: relative; width: 100%; }
.console-embed__frame { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius, 18px); background: var(--card, #111); }
.console-embed iframe { display: block; border: 0; background: transparent; }
.console-embed.phone .console-embed__frame { height: min(78svh, 760px); }
.console-embed__veil { position: absolute; inset: 0; z-index: 2; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer;
  display: grid; place-items: end center; font: inherit; }
.console-embed__veil span { margin-bottom: 18px; padding: 9px 16px; border-radius: 999px; background: rgba(10, 11, 13, .78); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: .25s; }
.console-embed__veil:hover span, .console-embed__veil:focus-visible span { opacity: 1; transform: none; }
.console-embed.live .console-embed__veil, .console-embed.phone .console-embed__veil { display: none; }

/* ---- scratch card */
.scratch { position: relative; aspect-ratio: 1.55; border-radius: 22px; overflow: hidden; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 120% at 30% 20%, #fffdf3, #f1e7c9); color: #1b1c20; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.scratch__prize { position: absolute; inset: 0; display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 4%; padding: 6% 7%; }
.scratch__prize img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.25)); }
.scratch__prize img[hidden] { display: none; }
.scratch__prize:has(img[hidden]) { grid-template-columns: 1fr; text-align: center; }
.scratch__prize b { display: block; font: 800 clamp(22px, 3.2vw, 38px)/1 var(--display, system-ui); letter-spacing: -.02em; }
.scratch__prize span { display: block; margin-top: 8px; font-size: clamp(12px, 1.2vw, 15px); opacity: .7; }
.scratch__foil { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .6s ease; }
.scratch.won .scratch__foil { opacity: 0; pointer-events: none; }
.scratch__again { position: absolute; right: 12px; bottom: 12px; z-index: 3; border: 0; border-radius: 999px; padding: 8px 14px; font: 600 12px/1 system-ui;
  background: #1b1c20; color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: .3s; }
.scratch.won .scratch__again { opacity: 1; pointer-events: auto; }

/* ---- calculator bars */
.bar { display: grid; grid-template-columns: minmax(120px, 1.1fr) 2fr auto; gap: 12px; align-items: center; margin: 10px 0; font-size: 14px; }
.bar i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--accent, #c6da52) var(--w), transparent var(--w)), var(--line, rgba(255,255,255,.1)); transition: background .4s; }
.bar b { font-variant-numeric: tabular-nums; }

/* ---- reveals */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

canvas.grab { cursor: grabbing; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }