:root{color-scheme:dark;--bg:#111528;--panel:#202944;--gold:#e8b95b;--coral:#f18b83;--cream:#fff3dc;--muted:#c0c4d1;--line:#46516e;--ink:#171c35}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--cream);background:radial-gradient(ellipse at 50% -12%,#354267 0,#1b2340 38%,#111528 78%);font-family:Georgia,"Yu Mincho",serif}.shell{width:min(100% - 32px,560px);margin:0 auto;padding:22px 0 28px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--gold);font:11px Arial,sans-serif;letter-spacing:.16em}.pill{border:1px solid #8a7145;border-radius:30px;padding:7px 10px;font-size:9px;white-space:nowrap}.top-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--cream);text-decoration:none;border:1px solid #8a7145;border-radius:30px;padding:8px 11px;font:11px Arial,sans-serif;letter-spacing:.04em}.top-link .ico{color:var(--gold);font-size:16px}.hero{text-align:center;padding:42px 12px 28px}.hero.compact{padding:25px 12px 20px}.ornament{color:var(--gold);font-size:25px;letter-spacing:.4em}h1{margin:10px 0;font-size:clamp(42px,12vw,68px);line-height:.98;letter-spacing:.015em}h1 em{color:var(--gold);font-weight:400}h2{margin:8px 0 12px;font-size:23px;color:var(--cream)}h3{margin:0;color:var(--gold);font-size:14px;letter-spacing:.08em}.intro{color:var(--muted);line-height:1.95;font-size:14px}.panel{background:linear-gradient(155deg,rgba(40,53,83,.97),rgba(27,35,61,.98));border:1px solid #536080;border-radius:18px;padding:22px;margin-bottom:14px;box-shadow:0 14px 35px rgba(0,0,0,.16)}.panel p{line-height:1.9;color:#e0e2e9}.eyebrow{color:var(--gold)}.primary,button{display:block;width:100%;border:0;border-radius:10px;padding:14px;margin-top:12px;background:linear-gradient(100deg,var(--gold),#f2ce83);color:var(--ink);font-weight:bold;font-size:15px;cursor:pointer;text-align:center;text-decoration:none}.secondary,.text-button{background:transparent;border:1px solid #66718d;color:var(--cream)}.stage-line{display:flex;justify-content:space-between;gap:10px;color:var(--gold);font:11px Arial,sans-serif;letter-spacing:.08em}.progress{height:4px;background:#3a4563;margin:13px 0 24px;border-radius:9px;overflow:hidden}.progress div{height:100%;background:linear-gradient(90deg,var(--gold),var(--coral));width:0}label{display:block;color:var(--muted);font:12px Arial,sans-serif;margin:18px 0 8px}input{width:100%;border:1px solid #64708d;background:#141b30;color:var(--cream);border-radius:9px;padding:14px;font-size:16px}input::placeholder{color:#8992a8}.question{line-height:1.9;color:var(--cream);font-size:17px;margin:12px 0 18px}.puzzle-image{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;background:#fff;border-radius:10px;padding:5px;cursor:zoom-in}.image-note{text-align:center;color:#aeb6ca;font:11px Arial,sans-serif;margin:7px 0 16px}.feedback{min-height:24px;color:var(--coral);font-size:14px}.good{color:#a9dfbd}.rule-list{padding-left:1.25em;line-height:2;color:#e1e4ed}.story{font-size:15px;line-height:2;color:#e1e4ed}.callout{border-left:3px solid var(--gold);padding:10px 14px;background:rgba(232,185,91,.08);color:#f3dfb8;line-height:1.8;margin:16px 0}footer{text-align:center;color:#858da4;font:10px Arial,sans-serif;letter-spacing:.12em;padding:24px 0 0}.hidden{display:none!important}@media(max-width:480px){.panel{padding:18px}.hero{padding-top:32px}}

textarea{width:100%;border:1px solid #64708d;background:#141b30;color:var(--cream);border-radius:9px;padding:14px;font:14px/1.7 Arial,sans-serif;resize:vertical}textarea::placeholder{color:#8992a8}

/* QRの視認性を確保するため、QR画像部分だけ白背景にする */
.qr-wrap{display:inline-flex;align-items:center;justify-content:center;background:#fff!important;padding:14px;border-radius:8px;margin:12px auto;}
.qr{display:block;width:220px;height:220px;max-width:100%;}
.issued{text-align:center;}