:root { --ink:#1d1a16; --paper:#f4ecd8; --red:#d6372b; --mustard:#e8b124; }
body { margin:0; color:var(--ink); font-family:'DM Mono',monospace;
  background: radial-gradient(circle at 20% 10%, #fff7e3 0, transparent 40%),
  repeating-linear-gradient(45deg, #efe4c8 0 2px, transparent 2px 14px), var(--paper); }
.disp { font-family:'Fraunces',serif; font-weight:900; letter-spacing:-.02em; }
h1 em { font-style:italic; font-weight:300; color:var(--red); }
.mono { font-family:'DM Mono',monospace; }
.panel { background:#fffaf0; border:2px solid var(--ink); border-radius:18px; padding:22px; box-shadow:6px 6px 0 var(--ink); }
.lbl { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:5px; opacity:.75; }
.inp { width:100%; border:2px solid var(--ink); border-radius:10px; padding:9px 11px; background:#fff; font:inherit; outline:none; }
.inp:focus { box-shadow:3px 3px 0 var(--mustard); }
.seg { border:2px solid var(--ink); border-left:0; border-radius:0 10px 10px 0; padding:0 14px; background:var(--mustard); font-weight:700; }
.btn { background:var(--red); color:#fff; border:2px solid var(--ink); border-radius:12px; padding:10px 16px; font-family:'Fraunces',serif; font-weight:900; box-shadow:3px 3px 0 var(--ink); transition:transform .1s, box-shadow .1s; }
.btn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn:disabled { opacity:.5; }
.btn-ghost { display:inline-flex; align-items:center; background:#fff; border:2px solid var(--ink); border-radius:10px; padding:7px 12px; font-size:13px; }
.btn-ghost:hover { background:var(--mustard); }
.btn-ghost.sm { padding:4px 8px; font-size:12px; }
.note { background:#fff3c4; border-left:4px solid var(--mustard); padding:6px 10px; }
.row { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:10px 0; border-bottom:1px dashed #0003; }
.qr { width:160px; height:160px; border:2px solid var(--ink); border-radius:10px; background:#fff; }
.swatch { padding:12px; border-radius:10px; border:2px solid var(--ink); font-family:'Fraunces',serif; font-weight:900; font-size:13px; }
.swatch.on { outline:3px solid var(--red); outline-offset:2px; }

.coupon { position:relative; border-radius:22px; overflow:hidden; transition:background .4s, color .4s; box-shadow:0 20px 40px -15px #0006; }
.coupon::before, .coupon::after { content:''; position:absolute; width:28px; height:28px; border-radius:50%; background:var(--paper); top:calc(100% - 92px); z-index:2; }
.coupon::before { left:-14px; } .coupon::after { right:-14px; }
.pimg { width:100%; height:210px; object-fit:cover; display:block; }
.pimg.ph { display:flex; align-items:center; justify-content:center; font-style:italic; opacity:.5; background:repeating-linear-gradient(-45deg,#0001 0 10px,transparent 10px 20px); }
.badge { position:absolute; top:14px; right:14px; z-index:3; width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:900; font-size:22px; animation:wobble 3s ease-in-out infinite; }
@keyframes wobble { 0%,100%{transform:rotate(-8deg) scale(1)} 50%{transform:rotate(8deg) scale(1.06)} }
.tear { margin:0 18px; border-top:3px dashed currentColor; opacity:.35; }
.chip { min-width:48px; text-align:center; padding:6px 4px; border-radius:10px; background:#0000001a; }
.chip b { display:block; font-size:20px; font-family:'Fraunces',serif; }
.chip span { font-size:10px; text-transform:uppercase; opacity:.7; }
.bar { height:6px; border-radius:6px; background:#0002; overflow:hidden; margin-bottom:4px; }
.bar i { display:block; height:100%; background:currentColor; }
.codebox { font-family:'DM Mono',monospace; font-size:28px; font-weight:500; letter-spacing:.15em; padding:12px; border:3px dashed currentColor; border-radius:12px; animation:pop .5s; }
@keyframes pop { from{transform:scale(.6);opacity:0} }
.scratch { background-image:repeating-linear-gradient(45deg,#ffffff22 0 6px,transparent 6px 12px); }
.stamp { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; text-align:center; padding:30px; background:#7778; backdrop-filter:grayscale(1); font-family:'Fraunces',serif; font-weight:900; font-size:30px; color:#fff; text-shadow:2px 2px 0 #000; transform:rotate(-6deg); }

.t-retro { background:#fdf6e3; color:#3b2a1a; border:3px dashed #3b2a1a; }
.t-retro .badge { background:var(--red); color:#fff; }
.t-bubble { background:linear-gradient(135deg,#ff6fb5,#ffb3d9 60%,#7ef9ff); color:#2a0a3a; }
.t-bubble .badge { background:#2a0a3a; color:#7ef9ff; }
.t-luxe { background:radial-gradient(circle at 30% 0,#2a2a2a,#0b0b0b); color:#e7c873; }
.t-luxe .badge { background:#e7c873; color:#0b0b0b; }
.t-market { background:#c9a678 repeating-linear-gradient(90deg,#0000000a 0 2px,transparent 2px 6px); color:#1f3d1a; }
.t-market .badge { background:#2f6b2a; color:#f7efd9; }

.scratchwrap { position:relative; text-align:center; }
.scratchcv { position:absolute; inset:0; width:100%; height:100%; border-radius:12px; cursor:crosshair; touch-action:none; transition:opacity .5s; }
.foil { text-align:center; padding:18px; border-radius:12px; font-weight:700; color:#555; background:linear-gradient(135deg,#b9b9b9,#eee,#9a9a9a); }
.rise { animation:rise .5s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from{opacity:0;transform:translateY(16px)} }
.confetti { position:fixed; inset:0; pointer-events:none; z-index:50; overflow:hidden; }
.confetti i { position:absolute; top:-20px; width:10px; height:14px; animation:fall 2.2s ease-in forwards; }
@keyframes fall { to { top:110vh; transform:rotate(720deg) translateX(40px); } }