:root{--green:#5b8f29;--dgreen:#2e6b1f;--red:#c8202c;--cream:#fff8ea;--ink:#25301d}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--cream);color:var(--ink);
 background-image:radial-gradient(circle at 10% 0,#ffe 0,transparent 40%),radial-gradient(circle at 100% 100%,#e8f3d8 0,transparent 45%)}
header{background:#fff;border-bottom:4px solid var(--red);padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:12px}
header img{height:54px;width:auto;object-fit:contain}
header .x{font-size:22px;color:var(--red);font-weight:700}
main{max-width:480px;margin:0 auto;padding:16px}
h1{font-size:24px;margin:8px 0;color:var(--dgreen);text-align:center}
.sub{text-align:center;margin:0 0 14px;color:#555}
.card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 4px 14px #0002;margin-bottom:14px}
label{display:block;font-weight:600;margin:12px 0 4px;font-size:15px}
input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;padding:13px;font-size:16px;border:2px solid #cfd8c0;border-radius:10px;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--green)}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:12px 0;font-size:14px}
.chk input{width:22px;height:22px;flex:none;margin-top:1px}
button,.btn{display:block;width:100%;padding:15px;font-size:18px;font-weight:700;border:0;border-radius:12px;background:var(--red);color:#fff;cursor:pointer;text-align:center;text-decoration:none}
button:disabled{opacity:.5}
button.sec{background:var(--green)}
button.sm{display:inline-block;width:auto;font-size:13px;padding:6px 10px;border-radius:8px}
.err{background:#fde8e8;color:#a11;padding:10px;border-radius:8px;margin-top:10px;display:none}
.rcpt{border:2px dashed var(--green);border-radius:12px;padding:14px;text-align:center;background:#f4f9ea}
#preview{max-width:100%;max-height:220px;margin-top:8px;border-radius:8px;display:none}
.small{font-size:12px;color:#666}
#wheelWrap{position:relative;width:min(92vw,360px);margin:10px auto}
#wheel{width:100%;height:auto;display:block}
#pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:32px solid var(--red);filter:drop-shadow(0 2px 2px #0006);z-index:2}
.res{text-align:center}
.res .prize{font-size:26px;font-weight:800;color:var(--dgreen);margin:8px 0}
.code{font-family:ui-monospace,Menlo,monospace;font-size:30px;letter-spacing:3px;background:#fff3c4;border:2px dashed #c9a400;border-radius:10px;padding:10px;margin:10px 0}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px;border-bottom:1px solid #ddd;text-align:left;vertical-align:top}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tabs button{width:auto;font-size:14px;padding:8px 14px}
.wide{max-width:1100px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.row input,.row select{width:auto;flex:1;min-width:110px;padding:8px;font-size:14px}
footer{text-align:center;font-size:12px;color:#777;padding:14px}

[hidden]{display:none!important}

#stock td{font-size:15px;padding:7px 4px}#stock td:last-child{text-align:right;font-weight:700;color:var(--dgreen);white-space:nowrap}#stock tr.out td{color:#999;text-decoration:line-through}#stock tr.out td:last-child{color:#b00;text-decoration:none}#stock tr.big td:first-child{color:#a77d00;font-weight:700}

.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.modal-box{background:#fff;border-radius:14px;max-width:95vw;max-height:95vh;display:flex;flex-direction:column;padding:12px;gap:8px;min-width:min(92vw,360px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-img{overflow:auto;text-align:center;flex:1}
.modal-img img{max-width:100%;max-height:72vh;border:1px solid #ccc;border-radius:6px}

/* ================= Festive theme (customer pages) ================= */
html:has(body.fest){background:
  radial-gradient(120% 60% at 100% 38%,rgba(214,48,49,.22),transparent 60%),
  radial-gradient(110% 55% at 0% 100%,rgba(61,130,60,.38),transparent 62%),
  radial-gradient(90% 40% at 0% 0%,#fffdf3,transparent 70%),
  linear-gradient(180deg,#fff9ec 0%,#fbe9e4 48%,#e4f0da 100%);background-attachment:fixed}
body.fest{background:transparent}
.xmas{position:fixed;left:0;width:100%;pointer-events:none;z-index:0}
.xmas img{display:block;width:100%}
.xmas-top{top:0}.xmas-top img{max-height:min(36vw,300px);object-fit:cover;object-position:top}
.xmas-bottom{bottom:0}.xmas-bottom img{max-height:min(22vw,200px);object-fit:cover;object-position:bottom}
.snow{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.snow i{position:absolute;top:-12px;background:#fff;border-radius:50%;box-shadow:0 0 6px #fff;animation:fall linear infinite}
@keyframes fall{to{transform:translate3d(30px,108vh,0)}}
.fest header,.fest main,.fest footer{position:relative;z-index:2}
.fest header{background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:0;box-shadow:0 4px 18px rgba(120,30,30,.12);position:relative}
.fest header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#c8202c,#e8b923,#2e6b1f,#e8b923,#c8202c)}
.fest header img{height:60px}
.fest h1{font-size:30px;font-weight:900;letter-spacing:.3px;margin:14px 0 6px;
  background:linear-gradient(90deg,#2e6b1f 0%,#2e6b1f 45%,#c8202c 55%,#c8202c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)) drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.fest .sub{color:#5b5348}
.fest .card{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 12px 32px rgba(120,30,30,.14),inset 0 1px 0 #fff;border-radius:22px}
.fest input[type=text],.fest input[type=email],.fest select{background:rgba(255,255,255,.95);border:2px solid #d8e2c8;border-radius:12px}
.fest input:focus,.fest select:focus{border-color:#c8202c;box-shadow:0 0 0 4px rgba(200,32,44,.12)}
.fest .rcpt{border:2px dashed #5b8f29;border-radius:16px;background:rgba(244,249,234,.9)}
/* 3D buttons */
.fest button:not(.sm),.fest a.btn{border-radius:16px;background:linear-gradient(#ff5a4d,#d4222b);color:#fff;
  box-shadow:0 5px 0 #9e1119,0 10px 18px rgba(158,17,25,.3),inset 0 2px 0 rgba(255,255,255,.45);text-shadow:0 2px 2px rgba(0,0,0,.25);
  transition:transform .08s,box-shadow .08s}
.fest button.sec{background:linear-gradient(#78b850,#3f8a2e);box-shadow:0 5px 0 #26601c,0 10px 18px rgba(38,96,28,.28),inset 0 2px 0 rgba(255,255,255,.4)}
.fest button:not(.sm):active{transform:translateY(4px);box-shadow:0 1px 0 #9e1119,0 3px 8px rgba(158,17,25,.3),inset 0 2px 0 rgba(255,255,255,.3)}
.fest button.sec:active{box-shadow:0 1px 0 #26601c,0 3px 8px rgba(38,96,28,.3)}
.fest button:disabled{filter:grayscale(.5);opacity:.7}
/* wheel */
#wheelWrap{width:min(94vw,380px);margin:8px auto 18px;position:relative}
#wheel{filter:drop-shadow(0 14px 18px rgba(90,20,20,.25))}
#pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:15%;max-width:58px;z-index:3;
  border:0;filter:drop-shadow(0 6px 5px rgba(0,0,0,.35))}
#pointer svg{display:block;width:100%;height:auto}
/* SPIN button */
.spin-btn{width:min(78%,320px)!important;margin:0 auto;height:68px;font-size:30px!important;letter-spacing:6px;border-radius:999px!important;
  background:linear-gradient(#ff6a5a,#d4222b 55%,#b8151d)!important;
  box-shadow:0 8px 0 #8f0f16,0 16px 26px rgba(158,17,25,.4),inset 0 3px 0 rgba(255,255,255,.55)!important;animation:pulse 1.8s ease-in-out infinite}
.spin-btn:active{transform:translateY(6px)!important;box-shadow:0 2px 0 #8f0f16,0 5px 10px rgba(158,17,25,.4),inset 0 3px 0 rgba(255,255,255,.4)!important;animation:none}
.spin-btn:disabled{animation:none}
@keyframes pulse{50%{filter:brightness(1.12) drop-shadow(0 0 14px rgba(255,90,70,.55))}}
/* gifts list */
#stockBox{padding:14px 16px}
#stockBox b{font-size:17px;color:#2e6b1f}
#stock td{border-bottom:1px solid rgba(60,90,40,.14);padding:9px 2px}
#stock tr:last-child td{border-bottom:0}
#stock td:last-child{text-align:right;font-weight:inherit}
.chip{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:800;font-size:13px;white-space:nowrap}
.chip.ok{background:#e4f3d6;color:#2a6b1e;box-shadow:inset 0 0 0 1px #b9dd9f}
.chip.out{background:#fde7e6;color:#b3141c;box-shadow:inset 0 0 0 1px #f4b4b1}
#stock tr.out td:first-child{color:#9a9a9a;text-decoration:line-through}
#stock tr.out td:last-child{text-decoration:none}
#stock tr.big td:first-child{color:#a77d00;font-weight:800}
.fest footer{color:#6c6458}
.fest .res .prize{font-size:28px;font-weight:900;background:linear-gradient(90deg,#2e6b1f,#c8202c);-webkit-background-clip:text;background-clip:text;color:transparent}
.fest .code{background:linear-gradient(#fff6cf,#ffe99a);border:2px dashed #c9a400;box-shadow:inset 0 2px 6px rgba(201,164,0,.3)}

.music-btn{position:fixed;right:14px;bottom:16px;z-index:20;width:50px;height:50px;border-radius:50%!important;padding:0!important;font-size:22px!important;
  background:linear-gradient(#ff6a5a,#c8202c)!important;color:#fff;border:2px solid #fff6e0!important;
  box-shadow:0 5px 14px rgba(120,20,20,.4),inset 0 2px 0 rgba(255,255,255,.45)!important;line-height:1}
.music-btn:active{transform:scale(.94)}

/* tweaks */
.fest header{background:transparent!important;backdrop-filter:none!important;box-shadow:none!important;padding-top:14px;padding-bottom:14px}
.fest header img{mix-blend-mode:multiply}
.fest main{padding-bottom:90px}
.fest h1{background:linear-gradient(90deg,#2e6b1f 0%,#2e6b1f 49%,#c8202c 49%,#c8202c 100%)}
.music-btn{top:12px!important;bottom:auto!important;right:12px!important;width:42px!important;height:42px!important;font-size:18px!important}

/* ===== form page (matches the mockup) ===== */
#s-form{position:relative}
#s-form::before,#s-form::after{content:"";position:absolute;width:38px;height:38px;top:96px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2b0'/%3E%3Cstop offset='.5' stop-color='%23f0b92a'/%3E%3Cstop offset='1' stop-color='%23b9810a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 4l8.5 18.6 20.3 2.2-15.2 13.7 4.3 20L32 48.2 14.1 58.5l4.3-20L3.2 24.8l20.3-2.2z' fill='url(%23g)' stroke='%23fff3c4' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));pointer-events:none}
#s-form::before{left:-2px;transform:rotate(-12deg)}
#s-form::after{right:-2px;transform:rotate(12deg)}
.fest #f.card{padding:20px 18px 52px;margin-bottom:64px;border-radius:26px;position:relative}
.fest label{color:#2c3a1f;font-weight:700}
.fest input[type=text],.fest input[type=email],.fest select{border:2px solid #6aa23f;background:#f8f8f2;box-shadow:inset 0 2px 5px rgba(60,90,30,.12);min-height:50px}
.fest .chk a,.fest .small a{color:#c8202c;font-weight:700}
.fest #f button#go{position:absolute;left:-12px;right:-12px;bottom:-34px;width:auto;height:70px;margin:0;border-radius:999px;font-size:25px;font-weight:900;letter-spacing:.5px;
  background:linear-gradient(#ff6a5a,#d4222b 55%,#b8151d);box-shadow:0 8px 0 #8f0f16,0 16px 26px rgba(158,17,25,.38),inset 0 3px 0 rgba(255,255,255,.5)}
.fest #f button#go:active{transform:translateY(6px);box-shadow:0 2px 0 #8f0f16,0 5px 10px rgba(158,17,25,.4),inset 0 3px 0 rgba(255,255,255,.35)}
.fest #f .err{margin-bottom:6px}

/* fixes */
.fest h1{background:none;background-image:linear-gradient(90deg,#2e6b1f 0%,#2e6b1f 49%,#c8202c 49%,#c8202c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.fest header{z-index:auto!important}
.fest main,.fest footer{z-index:2}
.fest .res .prize{background:none;background-image:linear-gradient(90deg,#2e6b1f,#c8202c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.fest h1{background:none!important;-webkit-text-fill-color:initial;color:#2e6b1f;line-height:1.15;font-size:31px;
  text-shadow:0 2px 0 rgba(255,255,255,.95),0 4px 8px rgba(0,0,0,.22);filter:none}
.fest h1 .g{color:#2e6b1f}.fest h1 .r{color:#c8202c}
#s-form::before,#s-form::after{top:70px}

.fest label.chk{font-weight:500;color:#3a3a32}
.xmas-bottom img{-webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent)}
.xmas-top img{-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)}

/* ===== phone layout fixes ===== */
#s-form::before,#s-form::after{display:none}
.fest h1{font-size:28px;text-wrap:balance}
.fest h1 .r{white-space:nowrap}
.fest .sub{margin:2px 8px 16px;font-size:15px}
.rcpt #snap{margin-bottom:16px}
.rcpt .small{display:block;margin-top:4px}
.music-btn.hint{animation:musicHint 1.4s ease-in-out infinite}
@keyframes musicHint{0%,100%{transform:scale(1)}50%{transform:scale(1.14);box-shadow:0 0 0 8px rgba(255,255,255,.55),0 5px 14px rgba(120,20,20,.4)}}

.music-tip{position:fixed;top:62px;right:12px;z-index:20;max-width:min(78vw,260px);background:#fff;color:#c8202c;font-weight:800;font-size:13.5px;line-height:1.3;
  padding:9px 13px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.22);border:2px solid #ffd6d6;pointer-events:none;animation:tipBob 1.6s ease-in-out infinite}
.music-tip::before{content:"";position:absolute;top:-8px;right:18px;width:12px;height:12px;background:#fff;border-left:2px solid #ffd6d6;border-top:2px solid #ffd6d6;transform:rotate(45deg)}
.music-tip[hidden]{display:none}
@keyframes tipBob{50%{transform:translateY(3px)}}

/* welcome screen */
.splash{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(120% 70% at 100% 40%,rgba(214,48,49,.35),transparent 60%),radial-gradient(110% 60% at 0% 100%,rgba(61,130,60,.5),transparent 62%),linear-gradient(180deg,#fff7e6,#fbe4de 55%,#dcecd0);
  animation:splashIn .35s ease-out}
@keyframes splashIn{from{opacity:0}to{opacity:1}}
.splash-card{width:min(92vw,360px);text-align:center;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border:1px solid #fff;border-radius:26px;padding:26px 22px 22px;box-shadow:0 18px 44px rgba(120,30,30,.25)}
.splash-emoji{font-size:54px;line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.splash-card h2{margin:10px 0 6px;font-size:27px;line-height:1.15;color:#c8202c;text-shadow:0 2px 0 #fff,0 4px 8px rgba(0,0,0,.18)}
.splash-card p{margin:0 0 18px;color:#5b5348;font-size:15px}
.splash-card button{width:100%}
.splash-card a{display:inline-block;margin-top:14px;color:#6c6458;font-size:14px;text-decoration:underline}

.plays{display:inline-block;margin:0 0 8px;padding:7px 16px;border-radius:999px;font-weight:800;font-size:14px;color:#2e6b1f;
  background:rgba(255,255,255,.85);box-shadow:0 3px 10px rgba(60,90,40,.18),inset 0 0 0 1px #cfe3bb}
.plays:empty{display:none}
.fest footer{padding-bottom:24px}

.plays{display:table!important;margin:0 auto 10px!important}

#ptable td.ro{text-align:center;font-size:16px;color:#2c3a1f;background:rgba(0,0,0,.035)}

/* ---- admin: toast, status chips, scanner, redeem card ---- */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;padding:11px 18px;border-radius:12px;color:#fff;font-weight:700;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:opacity .3s;opacity:0;pointer-events:none;max-width:90vw;text-align:center}
#toast.ok{background:#2e7d32}#toast.bad{background:#b3261e}
.st{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:700;font-size:12px}
.st-pending{background:#fff3c4;color:#8a6a00}.st-approved{background:#e4f3d6;color:#2a6b1e}.st-rejected{background:#fde7e6;color:#b3141c}
button.sm:disabled{opacity:.55;cursor:default;filter:grayscale(.3)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scan-view{position:relative;background:#000;border-radius:12px;overflow:hidden;width:min(86vw,420px);aspect-ratio:1/1}
.scan-view video{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:14%;border:3px solid #7CFC8A;border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.35);pointer-events:none}
.rcard{margin-top:12px;padding:16px;border-radius:14px;text-align:center;font-size:17px}
.rcard.ok{background:#eaf6e0;border:2px solid #9ccc7a}.rcard.bad{background:#fde7e6;border:2px solid #f0a5a1;color:#8f1b14}
.rprize{font-size:24px;font-weight:900;color:#2e6b1f;margin:4px 0}
.rbad{color:#b00;font-size:17px;font-weight:700}

/* ---- admin on phones: tables become one card per row (nothing runs off the screen) ---- */
@media (max-width:760px){
  main.wide{padding:10px}
  .tabs{gap:6px}.tabs button{font-size:13px;padding:8px 11px}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr:first-child{display:none}
  table.cards tr{background:#fff;border:1px solid #d9e3c9;border-radius:14px;margin:0 0 12px;padding:6px 12px;box-shadow:0 3px 10px rgba(60,90,30,.08)}
  table.cards td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;border-bottom:1px solid #eef2e6;padding:8px 0;text-align:right}
  table.cards td:last-child{border-bottom:0}
  table.cards td::before{content:attr(data-label);font-weight:700;color:#566;text-align:left;flex:none}
  table.cards td.acts{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;padding-top:10px}
  table.cards td.acts::before{content:none}
  table.cards td.acts button{flex:1 1 40%;padding:10px 8px;font-size:14px}
  table.cards td.ro{background:none;text-align:right}
  table.cards input.e-name{width:62%}
  table.cards input[type=number],table.cards select{width:100px!important}
  .row input,.row select{min-width:90px}
}

/* QR on the result card */
.qr{margin:12px auto 4px;width:min(64vw,230px);background:#fff;border-radius:16px;padding:10px 10px 8px;box-shadow:0 6px 18px rgba(0,0,0,.14),inset 0 0 0 1px #e8e8e0}
.qr svg{display:block;width:100%;height:auto}
.qr .small{margin-top:6px;font-weight:700;color:#2e6b1f}
.qr[hidden]{display:none}

@media (max-width:760px){ table.cards td.ro{font-size:13px} table.cards td.ro b{font-size:16px} }

.backlink{display:block;margin:14px auto 0;text-align:center;color:#6c6458;font-size:14px;text-decoration:underline}
.backlink[hidden]{display:none}
#s-res .backlink{margin-top:12px}