:root{
  --navy:#07142e;--navy2:#101d45;--paper:#f5dfb7;--ink:#25182b;
  --purple:#5a3478;--purple2:#8b4ca5;--red:#a62f1f;--gold:#f2c36d;
  --blue:#27c8ff;--white:#fff;--shadow:0 16px 45px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:#fff;background:
  radial-gradient(circle at 50% 0%,#193260 0,#08152f 48%,#030817 100%);min-height:100vh}
button,a{font:inherit}
button{cursor:pointer}
.app{width:min(100%,560px);min-height:100svh;margin:auto;position:relative;overflow:hidden;background:#07142e;box-shadow:0 0 70px rgba(0,0,0,.8)}
.screen{display:none;min-height:100svh;position:relative;animation:fade .35s ease}
.screen.active{display:flex;flex-direction:column}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.home{justify-content:flex-end;background:#030817}
.hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.home-bottom{position:relative;padding:24px 22px max(28px,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(2,5,16,.3) 4%,rgba(2,5,16,.96) 58%);padding-top:105px}
.primary,.secondary,.ghost-btn{border:0;border-radius:16px;min-height:56px;font-weight:900;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;transition:.18s ease}
.primary{width:100%;color:#fff4d1;background:linear-gradient(#c64b2c,#8d2118);border:3px solid #f2bd65;box-shadow:0 7px 0 #50130f,0 12px 25px rgba(0,0,0,.35);font-size:20px}
.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.primary:active{transform:translateY(5px);box-shadow:0 2px 0 #50130f}
.home-note{margin:16px 0 0;text-align:center;color:#dbcdf0;font-size:13px}

.nickname{align-items:center;justify-content:center;padding:24px;background-image:linear-gradient(rgba(2,9,28,.28),rgba(2,9,28,.42)),url('../img/game-bg.png');background-size:cover;background-position:center}
.nickname-card{width:min(100%,460px);background:rgba(247,225,185,.97);color:var(--ink);border:4px solid #593e36;border-radius:20px;padding:28px 20px;box-shadow:var(--shadow);text-align:center}
.nickname-title{margin:0 0 8px;font-size:28px;color:#2b1834}
.nickname-sub{margin:0 0 22px;color:#725a66;line-height:1.6}
.nickname-input{display:block;width:100%;height:58px;border:2px solid #947468;border-radius:14px;background:#fff8e9;color:#2b1834;padding:0 16px;font:900 20px/1 "Noto Sans TC","Microsoft JhengHei",sans-serif;text-align:center;outline:none}
.nickname-input:focus{border-color:#693f83;box-shadow:0 0 0 4px rgba(105,63,131,.16)}
.nickname-error{min-height:22px;margin:9px 0;color:#a62f1f;font-size:14px;font-weight:800}

.quiz{background-image:linear-gradient(rgba(2,9,28,.18),rgba(2,9,28,.28)),url('../img/game-bg.png');background-size:cover;background-position:center}
.quiz-wrap{padding:calc(22px + env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.brand{font-weight:900;color:#ffe1a2;text-shadow:0 2px 0 #2a1530;font-size:18px}
.counter{padding:7px 12px;border-radius:99px;background:rgba(8,15,40,.78);border:1px solid rgba(100,214,255,.5);color:#9be9ff;font-weight:800}
.paper{margin:auto 0;background:rgba(247,225,185,.97);color:var(--ink);border:4px solid #593e36;border-radius:20px;padding:22px 18px;box-shadow:var(--shadow);position:relative}
.paper:before,.paper:after{content:"";position:absolute;width:18px;height:18px;background:#765040;border-radius:50%;top:16px}
.paper:before{left:16px}.paper:after{right:16px}
.quiz-title{margin:0 0 6px;text-align:center;font-size:27px;line-height:1.35;color:#2b1834}
.quiz-sub{text-align:center;color:#725a66;margin:0 0 20px;font-size:14px}
.choices{display:grid;gap:10px}
.choice{display:flex;gap:12px;align-items:center;width:100%;border:2px solid #a88375;background:#fff7e6;border-radius:14px;padding:14px 12px;text-align:left;color:#271c28;font-weight:800;line-height:1.45;transition:.18s}
.choice .num{flex:0 0 36px;height:36px;border-radius:10px;background:#654079;color:#fff;display:grid;place-items:center;font-weight:900}
.choice:hover{transform:translateY(-1px);border-color:#71488a}
.choice.selected{background:#ead8f1;border-color:#693f83;box-shadow:0 0 0 3px rgba(105,63,131,.16)}
.choice.selected .num{background:#a62f1f}
.choice:disabled{cursor:not-allowed;opacity:.48;filter:grayscale(.25)}
.selection-hint{margin:16px 0 0;text-align:center;color:#513b4b;font-size:14px;font-weight:700;min-height:22px}
.quiz-actions{margin-top:15px;display:grid;gap:10px}
.secondary{width:100%;color:#fff;background:linear-gradient(#714d8d,#49305f);border:2px solid #c8a0df;box-shadow:0 5px 0 #26192f;opacity:.5;pointer-events:none}
.secondary.ready{opacity:1;pointer-events:auto}
.reset-link{border:0;background:transparent;color:#d7c5e8;text-decoration:underline;padding:8px}

.scan{align-items:center;justify-content:center;padding:30px;background:radial-gradient(circle,#183b67 0,#07142e 55%,#020511 100%)}
.scanner{width:min(92%,420px);border:7px solid #34283c;border-radius:30px;background:linear-gradient(#251d31,#0a1025);padding:18px;box-shadow:0 0 0 4px #a26c37,0 0 50px rgba(31,211,255,.22);text-align:center}
.scanner-head{font-size:22px;font-weight:900;color:#f0c277;margin-bottom:14px}
.scan-window{border:3px solid #5f86a4;border-radius:18px;background:radial-gradient(circle,#103e60,#031526);padding:30px 18px;position:relative;overflow:hidden}
.ghost-icon{width:250px;height:250px;margin:0 auto;filter:drop-shadow(0 0 15px #35dcff)}
.ghost-icon svg{display:block;width:100%;height:100%}
.scan-percent{font-size:54px;font-weight:900;color:#6ee8ff;margin-top:12px}
.scan-label{color:#8feeff;font-weight:800}
.track{height:14px;background:#18263f;border-radius:99px;overflow:hidden;margin:22px 0 5px;border:1px solid #50718c}
.bar{height:100%;width:0;background:linear-gradient(90deg,#38e0ff,#7cff9b,#ffd86b,#ff6e56);transition:width .12s linear}

.result{background:#030817;min-height:100svh}
.result-image{display:block;width:100%;height:auto;background:#eee}
.result-actions{padding:20px 16px max(28px,env(safe-area-inset-bottom));background:linear-gradient(#09162d,#050a18);display:grid;gap:12px}
.action-grid{display:grid;grid-template-columns:1fr;gap:10px}
.ghost-btn{width:100%;min-width:0;min-height:56px;padding:7px 12px;color:#fff;border:2px solid rgba(255,255,255,.35);box-shadow:0 4px 0 rgba(0,0,0,.35);font-size:18px;line-height:1.25}
.amart-link{color:#fff4d1;background:#e87524;border-color:#f3a15e;box-shadow:0 4px 0 #9b3f12}
.coupon{background:#a93520}.download{background:#2368a0}.share{background:#684080}
.small{font-size:13px;color:#b9c4da;text-align:center;line-height:1.65;margin:4px 8px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#151523;color:#fff;padding:12px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:20;max-width:calc(100% - 40px);text-align:center;border:1px solid #6f5b80}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(1,5,15,.82);backdrop-filter:blur(5px)}
.modal.open{display:flex;animation:fade .2s ease}
.modal-dialog{width:min(100%,480px);max-height:calc(100svh - 36px);overflow:auto;background:#f4dfb8;color:#281b28;border:4px solid #65434a;border-radius:22px;box-shadow:0 25px 80px rgba(0,0,0,.65);position:relative}
.modal-head{padding:18px 56px 12px;text-align:center;background:linear-gradient(#3f2757,#271a39);color:#ffe6aa;border-bottom:3px solid #b98448}
.modal-title{margin:0;font-size:25px;line-height:1.3}
.modal-close{position:absolute;right:12px;top:10px;width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25);color:#fff;font-size:24px;line-height:1}
.modal-body{padding:22px 18px}
.coupon-type{text-align:center;color:#654079;font-size:20px;font-weight:900;margin:0 0 10px}
.coupon-offer{border:3px dashed #a23d29;background:#fff4db;border-radius:18px;padding:18px 14px;text-align:center;margin:0 0 18px}
.coupon-offer small{display:block;font-size:16px;font-weight:800;color:#5d4651;margin-bottom:5px}
.coupon-offer strong{display:block;color:#a6291d;font-size:30px;line-height:1.35}
.modal-note{margin:0 0 16px;text-align:center;color:#654d59;line-height:1.7;font-weight:700}
.form-link{width:100%;min-height:56px;border-radius:15px;background:linear-gradient(#c64b2c,#8d2118);border:3px solid #eab864;color:#fff2cb;display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:900;font-size:19px;box-shadow:0 5px 0 #54150f}
@media (min-width:700px){body{padding:22px}.app{min-height:calc(100svh - 44px);border-radius:26px}.screen,.quiz-wrap{min-height:calc(100svh - 44px)}}

body {
  background-image: url("../img/game-bg.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}