:root{
  --bg1:#05030a;
  --orange:#ff7518;
  --purple:#6b1b8f;
  --neon:#39ff14;
  --muted:#d9b388;
}
*{box-sizing:border-box}
body.bg{background: radial-gradient(circle at 10% 10%, rgba(255,117,24,0.05), transparent 20%), linear-gradient(180deg, #020006, #130218 60%), var(--bg1); color:#fff; font-family:Inter, system-ui, -apple-system, 'Helvetica Neue', Arial; min-height:100vh;}
.themed-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); border:1px solid rgba(107,27,143,0.08); border-radius:12px;}
.logo{width: auto;
  height: 100px;x}
.title{color:var(--orange); text-shadow:0 2px 12px rgba(107,27,143,0.25);}
.subtitle{color:var(--muted);}
.input-halloween{background:rgba(255,255,255,0.02); border:1px solid rgba(255,117,24,0.08); color:#fff;}
.input-halloween::placeholder{color:#d9b388;}
.btn-start{background:linear-gradient(90deg,var(--orange),var(--purple)); color:#111; border:2px solid rgba(0,0,0,0.15); font-weight:700; box-shadow:0 10px 30px rgba(107,27,143,0.12);}
.btn-start:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(107,27,143,0.18);}

/* questions */
.qtext{color:#f3f3f3; font-size:1rem;}
.btn-choice{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); color:#fff; border:1px solid rgba(255,255,255,0.03); transition:all .12s ease; padding:14px;}
.btn-choice:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.6);}
.btn-choice.locked{opacity:0.75; pointer-events:none;}
.btn-choice.correct{background:linear-gradient(90deg,#28e07f,#198754); color:#021; border-color:#198754;}
.btn-choice.wrong{background:linear-gradient(90deg,#ff6b6b,#dc3545); color:#fff; border-color:#dc3545; transform:scale(1.02);}
.display-6{color:#ff7518;}
.text-muted{color:#d9b388 !important;}
/* floating timer */
.floating-timer{position:fixed; right:18px; bottom:18px; background:rgba(0,0,0,0.75); padding:10px 14px; border-radius:28px; font-weight:700; color:var(--neon); z-index:9999; box-shadow:0 8px 30px rgba(0,0,0,0.6); min-width:78px; text-align:center; border:1px solid rgba(255,117,24,0.08);}
.timer-green{background:linear-gradient(90deg,#26c281,#1aa36a); color:#021;}
.timer-orange{background:linear-gradient(90deg,#ff9b3b,#ff6b00); color:#111;}
.timer-red{background:linear-gradient(90deg,#ff5c5c,#dc3545); color:#fff; animation:blink .8s infinite;}
@keyframes blink{0%{opacity:1}50%{opacity:0.6}100%{opacity:1}}
.form-label{color: #ff7518;}
/* warning */
.warning{position:fixed; right:18px; bottom:90px; background:linear-gradient(90deg, rgba(0,0,0,0.85), rgba(13,0,20,0.85)); padding:12px 16px; border-radius:8px; color:#fff; z-index:10000; border:1px solid rgba(255,117,24,0.12); transform:translateY(10px); opacity:0; transition:all .25s ease;}
.warning.show{transform:translateY(0); opacity:1;}

/* result card */
.result-card{    color: white;background-image:radial-gradient(circle at 10% 10%, rgba(255,117,24,0.03), transparent 30%), linear-gradient(180deg, rgba(0,0,0,0.2), rgba(13,0,20,0.2)); border:1px solid rgba(107,27,143,0.12);}
.coupon{background:linear-gradient(90deg, rgba(255,117,24,0.06), rgba(107,27,143,0.04)); border:1px solid rgba(255,117,24,0.12); color:#fff;}
.coupon-badge{background:linear-gradient(90deg,#ffdf7a,#ff7518); color:#111; display:inline-block; padding:6px 10px; border-radius:6px; font-weight:800; margin-bottom:10px;}
.coupon-code{font-family:monospace; font-size:28px; color:var(--neon); margin:8px 0; text-shadow:0 2px 12px rgba(57,255,20,0.08);}
.text-orange{color:var(--orange);}

/* responsive tweaks */
@media(max-width:576px){ .logo{ width: auto;
  height: 100px;} .coupon-code{font-size:22px} }