.qls-overlay{position:fixed;inset:0;height:100vh;height:100dvh;z-index:99000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.qls-overlay[hidden]{display:none}
.qls-card{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 40px);overflow-y:auto;background:#fff;border-radius:26px;padding:34px 28px 22px;box-shadow:0 30px 80px rgba(2,12,40,.35);text-align:center;animation:qls-pop .3s ease}
/* After a code is unlocked, hide the scratch prize + intro so the success view is compact */
.qls-done .qls-scratch,.qls-done .qls-title,.qls-done .qls-sub{display:none}
@keyframes qls-pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.qls-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border:none;border-radius:50%;background:#f1f3f7;color:#333;font-size:20px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.qls-logo{height:46px;width:auto;margin:0 auto 14px;display:block;object-fit:contain}
.qls-title{font-size:30px;margin:0 0 8px;font-weight:800;color:#0b1424;letter-spacing:-.01em}
.qls-sub{color:#5b6b86;font-size:16px;margin:0 0 18px;line-height:1.4}
.qls-scratch{position:relative;height:210px;border-radius:16px;overflow:hidden;margin-bottom:16px;background:linear-gradient(160deg,#e7edf9,#dfe8fb)}
.qls-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(150deg,#2f6df6,#1b3aa0)}
.qls-off{display:inline-block;font-size:54px;font-weight:900;color:#fff;line-height:1.05;text-shadow:0 2px 14px rgba(0,0,0,.18);padding-bottom:10px;background-image:linear-gradient(90deg,#bfdbfe,#ffffff,#67e8f9,#ffffff,#bfdbfe);background-size:200px 4px;background-repeat:repeat-x;background-position:0 100%;border-radius:2px;animation:qls-grad 3s linear infinite}
@keyframes qls-grad{to{background-position:200px 100%}}
@media(prefers-reduced-motion:reduce){.qls-off{animation:none}}
.qls-off-sub{font-size:18px;font-weight:600;color:#eaf1ff}
.qls-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .55s ease}
.qls-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#0b1424;color:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:100px;pointer-events:none;letter-spacing:.02em;transition:opacity .4s ease}
.qls-scratched .qls-canvas{opacity:0;pointer-events:none}
.qls-scratched .qls-hint{opacity:0}
.qls-field{width:100%;padding:15px 16px;border:1px solid #dbe2ee;border-radius:12px;font-size:16px;margin-bottom:10px;box-sizing:border-box;text-align:center}
.qls-field:focus{outline:none;border-color:#2f6df6;box-shadow:0 0 0 3px rgba(47,109,246,.15)}
.qls-btn{width:100%;padding:16px;border:none;border-radius:12px;background:linear-gradient(120deg,#2f6df6,#1b45c9);color:#fff;font-size:18px;font-weight:800;cursor:pointer;transition:filter .15s,opacity .15s}
.qls-btn:hover{filter:brightness(1.05)}
.qls-btn:disabled{opacity:.6;cursor:default}
.qls-msg{min-height:18px;font-size:13.5px;margin-top:8px}
.qls-msg.err{color:#c0392b}
.qls-decline{display:block;width:100%;margin-top:16px;background:none;border:none;color:#98a4ba;font-size:15px;font-weight:700;cursor:pointer}
.qls-success{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 2px;animation:qls-pop .3s ease}
.qls-success[hidden],#qls-form[hidden]{display:none}
.qls-check{width:60px;height:60px;border-radius:50%;background:#eef2fb;color:#1b45c9;display:flex;align-items:center;justify-content:center;font-size:28px;margin:2px 0}
.qls-success h3{font-size:24px;font-weight:800;color:#0b1424;margin:0}
.qls-success p{color:#5b6b86;font-size:15px;margin:0;line-height:1.45}
.qls-code{margin:12px 0 4px;width:100%;border:2px dashed #2f6df6;border-radius:14px;padding:16px;font-size:26px;font-weight:800;letter-spacing:2px;color:#1b45c9;background:#f6f9ff}
.qls-copy{border:none;background:#0b1424;color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:100px;cursor:pointer}
.qls-copy.copied{background:#177245}
.qls-start{color:#1b45c9;font-weight:800;font-size:16px;text-decoration:none;margin-top:8px}
@media(max-width:480px){.qls-title{font-size:26px}.qls-off{font-size:46px}.qls-code{font-size:22px}}