:root{
  --pink:#ff2e9a; --pink2:#ff8ad8; --lav:#c9a7ff; --cyan:#8df0ff; --lime:#c6ff4a; --ink:#1b0b2b;
  --win:#f4f0ff; --bevel-l:#ffffff; --bevel-d:#8c7aa8; --title1:#2b1a8a; --title2:#7a6cf0;
  --paper:#fdfdfb; --paperink:#222;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  min-height:100dvh; color:var(--ink);
  font-family:'Space Mono',ui-monospace,Menlo,monospace; font-size:15px; line-height:1.4;
  background:#ffb6ec; overflow-x:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:18px 16px 110px;
}
body[data-theme=bubblegum]{background:linear-gradient(160deg,#ffa8e4 0%,#ffc6f3 30%,#cdb4ff 62%,#9ff0ff 100%) fixed}
body[data-theme=cyber]{background:radial-gradient(120% 90% at 50% 0%,#5a1fa8 0%,#1b0638 55%,#06010f 100%) fixed;--ink:#f3e8ff;--win:#1b1230;--bevel-l:#6a4fb0;--bevel-d:#0b0616;--title1:#0a0a2a;--title2:#9d4cff}
body[data-theme=holo]{background:linear-gradient(135deg,#ffd3f4,#d4fbff 28%,#fff3b5 52%,#d7c9ff 76%,#ffd3f4) fixed}
body[data-theme=butter]{background:linear-gradient(170deg,#fff39b 0%,#ffc98a 40%,#ff9cc8 100%) fixed}

/* background floaters */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .grid{position:absolute;left:-20%;right:-20%;bottom:0;height:34vh;
  background:linear-gradient(transparent 96%,rgba(255,255,255,.55) 96%) 0 0/100% 26px,
             linear-gradient(90deg,transparent 96%,rgba(255,255,255,.55) 96%) 0 0/40px 100%;
  transform:perspective(380px) rotateX(62deg);transform-origin:50% 100%;opacity:.45;
  mask-image:linear-gradient(transparent,#000 60%)}
.fl{position:absolute;left:var(--x);bottom:-60px;font-size:30px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.15));
  animation:float 22s linear infinite;animation-delay:var(--d);opacity:.9}
@keyframes float{0%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-55vh) rotate(10deg) translateX(18px)}100%{transform:translateY(-115vh) rotate(-6deg)}}

.hero,main,.marquee,footer{position:relative;z-index:1}
.hero{text-align:center;margin:8px 0 14px}
.bubble{
  font-family:'Rubik Bubbles',cursive;font-weight:400;font-size:clamp(46px,12vw,78px);line-height:.92;margin:6px 0;
  letter-spacing:.5px;
  background:linear-gradient(180deg,#fff 0%,#ffe7fb 35%,#ff5fc4 52%,#9a3cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #4b1a8a) drop-shadow(0 6px 0 rgba(0,0,0,.18)) drop-shadow(0 0 14px rgba(255,255,255,.6));
}
.pixel{font-family:'Press Start 2P',monospace;font-size:11px;line-height:1.7;letter-spacing:.2px}
.pixel.tiny{font-size:8px}
.hero .tiny{color:var(--ink);opacity:.85}
.hero .sub{font-size:9px;margin-top:4px;text-shadow:0 1px 0 #fff}
body[data-theme=cyber] .hero .sub{text-shadow:none}

/* window */
.win{
  width:100%;max-width:520px;margin:0 auto;background:var(--win);
  border:2px solid;border-color:var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l);
  box-shadow:4px 4px 0 rgba(43,26,138,.35),0 18px 40px rgba(60,20,120,.25);
  border-radius:4px;overflow:hidden;
}
.titlebar{display:flex;align-items:center;gap:8px;padding:6px 8px;color:#fff;
  background:linear-gradient(90deg,var(--title1),var(--title2));font-family:'Press Start 2P',monospace;font-size:9px}
.tb-ico{font-size:14px}.tb-title{flex:1;text-shadow:1px 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-btns{display:flex;gap:3px}.tb-btns i{font-style:normal;width:18px;height:16px;display:grid;place-items:center;background:#e9e4ff;color:#000;
  border:1px solid;border-color:#fff #555 #555 #fff;font-size:9px;cursor:pointer}
.hearts{display:flex;gap:6px;justify-content:center;padding:10px 0 0;color:var(--pink);font-size:18px}
.hearts b{opacity:.45;transition:.3s}.hearts b.on{opacity:1;text-shadow:0 0 8px #ff8ad8}

.step{display:none;padding:12px 18px 20px}
.step.on{display:block;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.96) translateY(6px);opacity:0}to{transform:none;opacity:1}}
h2.pixel{font-size:11px;margin:4px 0 12px;color:var(--pink);text-shadow:1px 1px 0 #fff}
body[data-theme=cyber] h2.pixel{text-shadow:none;color:#ff7ad9}
.hint{font-size:11px;opacity:.7;margin:-6px 0 12px}
.lbl{margin:8px 0 6px;opacity:.75}

.field{display:block;margin:8px 0 12px}
.field span{display:block;margin-bottom:6px;opacity:.75}
input{
  width:100%;font:inherit;font-size:16px;padding:10px 12px;color:#111;background:#fff;
  border:2px solid;border-color:var(--bevel-d) var(--bevel-l) var(--bevel-l) var(--bevel-d);border-radius:3px;outline:none
}
input:focus{box-shadow:0 0 0 3px rgba(255,46,154,.35)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.chip{
  font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;cursor:pointer;color:#2b1a4a;
  background:linear-gradient(180deg,#fff 0%,#e9e2ff 55%,#d4c8ff 100%);
  border:1px solid #9b86d6;box-shadow:inset 0 1px 0 #fff,0 2px 0 #9b86d6;
}
.chip.on{background:linear-gradient(180deg,#ffd6f1 0%,#ff8ad8 55%,#ff2e9a 100%);color:#fff;border-color:#b2126b;box-shadow:inset 0 1px 0 #ffd1ec,0 2px 0 #b2126b;text-shadow:0 1px 0 rgba(0,0,0,.25)}

.btn{
  font:inherit;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;cursor:pointer;color:#20124a;text-decoration:none;display:inline-block;text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#dff8ff 45%,#8df0ff 50%,#b9f6ff 100%);
  border:1px solid #3aa7c9;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.08),0 3px 0 #2c86a3,0 6px 10px rgba(0,0,0,.15);
  transition:transform .08s
}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 0 #2c86a3}
.btn.pink{background:linear-gradient(180deg,#fff 0%,#ffd4ef 45%,#ff2e9a 50%,#ff6fc0 100%);color:#fff;border-color:#b2126b;text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:inset 0 1px 0 #fff,0 3px 0 #8c0d52,0 6px 10px rgba(0,0,0,.18)}
.btn.pink:active{box-shadow:inset 0 1px 0 #fff,0 1px 0 #8c0d52}
.btn.big{font-size:17px;padding:14px 26px}
.btn.ghost{background:transparent;border:1px dashed var(--bevel-d);box-shadow:none;color:var(--ink);font-weight:400}
.btn.mini{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.nav.two{justify-content:center}

/* item cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.card{
  position:relative;text-align:left;font:inherit;font-size:12.5px;line-height:1.25;padding:10px 10px 9px;border-radius:10px;cursor:pointer;color:#20124a;
  background:#fff;border:2px solid #d9cfff;box-shadow:0 2px 0 #d9cfff;min-height:62px;display:flex;flex-direction:column;justify-content:space-between;gap:6px
}
.card .cl{font-weight:700}
.card .cp{opacity:.6;font-family:'Press Start 2P',monospace;font-size:7px;min-height:22px;display:flex;align-items:center}
.card.on{background:linear-gradient(180deg,#fff0fa,#ffd9f1);border-color:var(--pink);box-shadow:0 2px 0 var(--pink),0 0 0 3px rgba(255,46,154,.15)}
.card.on::after{content:'✔';position:absolute;top:-8px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--pink);color:#fff;font-size:12px;display:grid;place-items:center;border:2px solid #fff}
.card .ctl{display:none;align-items:center;gap:4px;flex-wrap:wrap;min-height:22px}
.card.on .ctl{display:flex}
.card .ctl b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid #b2126b;color:#b2126b;font-size:14px;cursor:pointer;user-select:none}
.card .ctl .q{min-width:22px;text-align:center;font-weight:700}
.card .ctl .pr{margin-left:auto;font-size:10px;padding:3px 7px;border-radius:999px;background:#20124a;color:#c6ff4a;cursor:pointer;white-space:nowrap}
.card.on .cp{display:none}
.custom{display:flex;gap:6px;margin-bottom:8px}
.custom input{flex:1;font-size:14px}
.cart{text-align:center;opacity:.8}

/* swatches & themes */
.swatches,.themes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sw{width:44px;height:44px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 2px #b9a9e6,0 3px 6px rgba(0,0,0,.15);cursor:pointer;
  background:var(--c);background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 7px)}
.sw.on,.th.on{box-shadow:0 0 0 3px var(--pink),0 3px 6px rgba(0,0,0,.2)}
.th{width:64px;height:64px;border-radius:10px;border:2px solid #fff;box-shadow:0 0 0 2px #b9a9e6,0 3px 6px rgba(0,0,0,.15);cursor:pointer;display:grid;place-items:center;font-size:22px;background:var(--g)}
.th span{font-family:'Press Start 2P',monospace;font-size:6px;color:#fff;text-shadow:0 1px 2px #000;display:block;text-align:center;margin-top:2px}

/* printer */
.printer{position:relative;margin:4px auto 0;width:100%;max-width:400px}
.pbody{
  position:relative;z-index:2;height:74px;border-radius:14px 14px 8px 8px;
  background:linear-gradient(180deg,#ffffff 0%,#dcdcea 28%,#9b9bb8 50%,#e8e8f4 72%,#8d8dae 100%);
  box-shadow:0 10px 18px rgba(40,10,80,.35),inset 0 1px 0 #fff;border:1px solid #6f6f92;
}
.pled{position:absolute;left:16px;top:14px;width:10px;height:10px;border-radius:50%;background:#2cff6a;box-shadow:0 0 8px #2cff6a;animation:blink 1s steps(2) infinite}
.pbody.busy .pled{background:#ff2e9a;box-shadow:0 0 8px #ff2e9a;animation-duration:.25s}
@keyframes blink{50%{opacity:.4}}
.plabel{position:absolute;right:16px;top:14px;color:#2b1a8a;text-shadow:0 1px 0 #fff;font-size:8px}
.pslot{position:absolute;left:14px;right:14px;bottom:12px;height:9px;border-radius:4px;background:#1a1030;box-shadow:inset 0 2px 4px #000}
.paperwrap{position:relative;z-index:1;margin:-18px auto 0;width:min(92%,340px);height:0;overflow:hidden;transition:none}
.receipt{
  --fs:12px;font-size:var(--fs);line-height:1.38;color:var(--paperink);background:var(--paper);
  padding:28px 12px 30px;font-family:'Space Mono',ui-monospace,monospace;
  background-image:linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px),linear-gradient(0deg,rgba(0,0,0,.02) 0 1px,transparent 1px 2px);
  clip-path:polygon(0 0,5% 9px,10% 0,15% 9px,20% 0,25% 9px,30% 0,35% 9px,40% 0,45% 9px,50% 0,55% 9px,60% 0,65% 9px,70% 0,75% 9px,80% 0,85% 9px,90% 0,95% 9px,100% 0,
    100% 100%,95% calc(100% - 9px),90% 100%,85% calc(100% - 9px),80% 100%,75% calc(100% - 9px),70% 100%,65% calc(100% - 9px),60% 100%,55% calc(100% - 9px),50% 100%,45% calc(100% - 9px),40% 100%,35% calc(100% - 9px),30% 100%,25% calc(100% - 9px),20% 100%,15% calc(100% - 9px),10% 100%,5% calc(100% - 9px),0 100%);
  filter:drop-shadow(0 8px 10px rgba(40,10,80,.3));
}
.receipt .ln{display:flex;justify-content:space-between;gap:6px;white-space:pre;min-height:1.38em}
.receipt .ln.c{justify-content:center;text-align:center;white-space:pre-wrap}
.receipt .ln.b{font-weight:700;font-size:calc(var(--fs)*1.15)}
.receipt .ln.h{font-weight:700;font-size:calc(var(--fs)*1.3);letter-spacing:1px}
.receipt .ln.d{letter-spacing:0;opacity:.8;overflow:hidden}
.receipt .ln.sp{min-height:.8em}
.receipt .bc{display:flex;justify-content:center;align-items:flex-end;gap:0;height:calc(var(--fs)*3.2);margin:4px 0 2px}
.receipt .bc i{display:block;background:var(--paperink);height:100%;margin-right:calc(var(--fs)*0.12)}
.receipt .bc i.w1{width:calc(var(--fs)*0.12)}.receipt .bc i.w2{width:calc(var(--fs)*0.24)}.receipt .bc i.w3{width:calc(var(--fs)*0.38)}
.receipt .stamp{text-align:center;margin:6px 0 0;font-family:'Rubik Bubbles',cursive;font-size:calc(var(--fs)*1.9);color:var(--pink);transform:rotate(-4deg);opacity:.9;letter-spacing:1px}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.actions .btn{padding:11px 8px;font-size:13px}
.received{text-align:center;font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.8;margin:0 0 12px;padding:8px;background:#fff3fb;border:1px dashed var(--pink);border-radius:8px;color:#8c0d52}

/* marquee */
.marquee{position:fixed;left:0;right:0;bottom:0;z-index:5;background:#1b0b2b;color:var(--lime);font-family:'Press Start 2P',monospace;font-size:8px;line-height:28px;overflow:hidden;white-space:nowrap;border-top:2px solid var(--pink)}
.marquee div{display:inline-flex;animation:mq 26s linear infinite;will-change:transform}
.marquee span{padding-right:0}
@keyframes mq{to{transform:translateX(-50%)}}
footer{margin:22px 0 6px;text-align:center;opacity:.75}
.snd{position:fixed;right:12px;bottom:40px;z-index:6;width:38px;height:38px;border-radius:50%;border:1px solid #9b86d6;background:#fff;font-size:17px;cursor:pointer;box-shadow:0 3px 0 #9b86d6}

/* cursor sparkles */
.spk{position:fixed;z-index:50;pointer-events:none;font-size:14px;animation:spk .7s ease-out forwards;color:var(--c)}
@keyframes spk{from{transform:translate(-50%,-50%) scale(1) rotate(0)}to{transform:translate(-50%,-120%) scale(.2) rotate(90deg);opacity:0}}

/* preview modal */
.preview{position:fixed;inset:0;z-index:40;background:rgba(27,11,43,.75);display:flex;align-items:center;justify-content:center;padding:16px}
.preview[hidden]{display:none}
.pbox{background:var(--win);border:2px solid;border-color:var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l);width:100%;max-width:420px;max-height:92dvh;display:flex;flex-direction:column;border-radius:4px;overflow:hidden}
.pbox img{display:block;width:100%;max-height:62dvh;object-fit:contain;background:#222;margin:0}
.pbox .hint{margin:8px 12px 0}
.pbox .nav{padding:0 12px 14px;margin-top:8px}

@media (max-width:380px){.cards{grid-template-columns:1fr 1fr;gap:6px}.card{font-size:12px;padding:8px}}
@media (prefers-reduced-motion:reduce){.fl,.marquee div{animation:none}}