:root{--bg: #f6f4fb;--surface: #ffffff;--surface-2: #f0ebf9;--surface-3: #e7e0f5;--text: #1d1a2b;--muted: #6b6582;--line: #e2dcef;--accent: #7c5cff;--accent-2: #ff6fae;--ok: #19a974;--warn: #d97706;--shadow: 0 1px 2px rgb(40 20 90 / .06), 0 10px 30px rgb(40 20 90 / .08);--radius: 20px;--font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif;--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0f0d18;--surface: #181527;--surface-2: #211d35;--surface-3: #2a2542;--text: #efeaff;--muted: #a29bbd;--line: #2c2744;--accent: #9b85ff;--accent-2: #ff7fb8;--ok: #3ddc97;--warn: #fbbf24;--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);color-scheme:dark}}:root[data-theme=dark]{--bg: #0f0d18;--surface: #181527;--surface-2: #211d35;--surface-3: #2a2542;--text: #efeaff;--muted: #a29bbd;--line: #2c2744;--accent: #9b85ff;--accent-2: #ff7fb8;--ok: #3ddc97;--warn: #fbbf24;--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);color-scheme:dark}[data-palette]{--sky-a: var(--l-sky-a);--sky-b: var(--l-sky-b);--h1: var(--l-h1);--h2: var(--l-h2);--h3: var(--l-h3);--acc: var(--l-acc)}:root[data-theme=dark] [data-palette]{--sky-a: var(--d-sky-a);--sky-b: var(--d-sky-b);--h1: var(--d-h1);--h2: var(--d-h2);--h3: var(--d-h3);--acc: var(--d-acc)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) [data-palette]{--sky-a: var(--d-sky-a);--sky-b: var(--d-sky-b);--h1: var(--d-h1);--h2: var(--d-h2);--h3: var(--d-h3);--acc: var(--d-acc)}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--font);overflow-x:hidden;transition:background-color .35s ease,color .35s ease;-webkit-tap-highlight-color:transparent}a{color:var(--accent);text-underline-offset:3px}h1,h2,.pick-name{text-wrap:balance}:lang(ko){word-break:keep-all}:lang(zh-Hans),:lang(ja){line-break:strict}img{max-width:100%}.wrap{max-width:760px;margin:0 auto;padding:0 16px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:8px}.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.logo{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.02em;font-size:20px;color:var(--text);text-decoration:none}.logo b{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.bar nav{margin-left:auto;display:flex;align-items:center;gap:6px}.bar nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px;border-radius:12px}.bar nav a[aria-current=page]{background:var(--surface-2)}.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:transform .15s ease}.icon-btn:active{transform:scale(.94)}.icon-btn svg{width:20px;height:20px}.i-sun{display:none}:root[data-theme=dark] .i-sun{display:block}:root[data-theme=dark] .i-moon{display:none}@media(prefers-color-scheme:dark){:root:not([data-theme]) .i-sun{display:block}:root:not([data-theme]) .i-moon{display:none}}.scene{position:relative;overflow:hidden;height:var(--hero-h, 400px);isolation:isolate}.scene .sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-a),var(--sky-b));transition:background .35s ease}.scene .layer{position:absolute;inset:-6% -4% 0;will-change:transform,translate;translate:calc(var(--mx, 0) * var(--depth, 0) * -1px) calc(var(--my, 0) * var(--depth, 0) * -.6px);transition:translate .6s cubic-bezier(.2,.8,.2,1)}.scene .layer svg{position:absolute;bottom:0;left:0;width:100%;height:100%}.scene path,.scene rect,.scene circle{transition:fill .35s ease}.scene[data-parallax]:after{content:"";position:absolute;inset:auto 0 0;height:60%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgb(20 10 60 / .38))}.hero-text{position:absolute;left:0;right:0;bottom:44px;z-index:2;max-width:760px;margin:0 auto;padding:0 16px;color:#fff}.hero-text h1{margin:0 0 6px;font-size:clamp(30px,7.5vw,52px);line-height:1.05;letter-spacing:-.025em;text-shadow:0 2px 24px rgb(20 10 60 / .35)}.hero-text p{margin:0;font-size:clamp(15px,3.8vw,18px);opacity:.95;text-shadow:0 1px 12px rgb(20 10 60 / .3);max-width:560px}.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:#140a3c4d;color:#fff;margin-bottom:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}@supports (animation-timeline: scroll()){.scene[data-parallax] .layer{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 var(--hero-h, 400px)}.scene[data-parallax] .sky{animation:skyzoom linear both;animation-timeline:scroll(root);animation-range:0 var(--hero-h, 400px)}.hero-text{animation:fade linear both;animation-timeline:scroll(root);animation-range:0 calc(var(--hero-h, 400px) * .7)}.mascot{animation:mascot-rise linear both;animation-timeline:scroll(root);animation-range:0 var(--hero-h, 400px)}.scroll-hint{animation:fade-out linear both;animation-timeline:scroll(root);animation-range:0 120px}}@keyframes drift{to{transform:translate3d(var(--dx, 0px),calc(var(--speed) * var(--hero-h, 400px)),0)}}@keyframes skyzoom{to{transform:scale(1.12);filter:saturate(1.25)}}@keyframes fade{to{opacity:0;transform:translate3d(0,90px,0) scale(.96)}}@keyframes mascot-rise{to{transform:translate3d(0,-140px,0) rotate(-12deg) scale(.85)}}@keyframes fade-out{to{opacity:0}}.hero-full .hero-text{bottom:104px}.scroll-hint{position:absolute;left:50%;bottom:48px;z-index:3;translate:-50% 0;width:28px;height:44px;border:2px solid rgb(255 255 255 / .7);border-radius:16px}.scroll-hint:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:hint 1.6s ease-in-out infinite}@keyframes hint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}to{opacity:0}}.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.ambient span{position:absolute;display:block;border-radius:50%;opacity:.5;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent-2) 55%,transparent),transparent 70%);filter:blur(1px)}.ambient span.cap{border-radius:50% 50% 46% 46%;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 45%,transparent) 50%,color-mix(in srgb,#fff 55%,transparent) 50%);opacity:.35}.ambient span.spark{border-radius:0;background:none;opacity:.55}.ambient span.spark:before{content:"✦";color:var(--accent);font-size:var(--s, 14px)}@supports (animation-timeline: scroll()){.ambient span{animation:amb linear both;animation-timeline:scroll(root)}}@keyframes amb{to{transform:translate3d(0,calc(var(--v, 1) * -60vh),0) rotate(var(--rot, 40deg))}}@supports (animation-timeline: view()){.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}@keyframes reveal{0%{opacity:0;transform:translate3d(0,40px,0) scale(.98)}}.twinkle{animation:twinkle 4s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.45}to{opacity:.85}}main{position:relative;z-index:3}.lift{margin-top:-28px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.panel+.panel{margin-top:16px}.panel h2{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}.panel .sub{margin:0 0 14px;color:var(--muted);font-size:14px}.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.section-title .count{color:var(--muted);font-size:14px;font-weight:600}.empty{color:var(--muted);margin:8px 0 4px}.codes{list-style:none;margin:0;padding:0;display:grid;gap:10px}.code{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid transparent;transition:opacity .3s ease,filter .3s ease,border-color .3s ease}.code:target{border-color:var(--accent)}.code-main{min-width:0}.code-id{font:700 16px/1.25 var(--mono);letter-spacing:.04em;overflow-wrap:anywhere}.code-meta{font-size:13px;color:var(--muted);margin-top:3px}.code-actions{display:flex;gap:6px}.code-foot{grid-column:1 / -1;display:flex;gap:14px;margin-top:2px}.badge{font:700 11px/1 var(--font);letter-spacing:.02em;padding:4px 8px;border-radius:999px;margin-left:6px;vertical-align:2px;white-space:nowrap}.badge.new{background:color-mix(in srgb,var(--accent-2) 20%,transparent);color:var(--accent-2)}.badge.exp{background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted)}.badge.done{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}.code.redeemed:not(.expired){background:color-mix(in srgb,var(--surface-2) 70%,var(--ok) 6%)}.code.expired{opacity:.45;filter:saturate(.2)}.code.expired .c{text-decoration:line-through;text-decoration-thickness:2px}.btn{min-height:44px;min-width:44px;padding:0 16px;border:0;border-radius:12px;cursor:pointer;font:700 14px/1 var(--font);color:#fff;white-space:nowrap;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,var(--accent-2)));transition:transform .15s ease,filter .15s ease,background-color .2s ease;touch-action:manipulation}.btn:hover{filter:brightness(1.06)}.btn:active{transform:scale(.96)}.btn.done{background:var(--ok)}.btn.icon{padding:0;width:44px;display:grid;place-items:center;background:var(--surface-3);color:var(--text)}.btn.ghost{background:var(--surface-2);color:var(--text)}.btn:disabled{cursor:not-allowed;background:var(--line);color:var(--muted);filter:none;transform:none}.link{background:none;border:0;padding:6px 0;color:var(--muted);font:600 13px/1 var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--muted) 40%,transparent)}.link[aria-pressed=true]{color:var(--ok)}.link:disabled{cursor:default;text-decoration:none}.howto{margin-top:14px;font-size:14px;color:var(--muted)}.howto summary{cursor:pointer;font-weight:700;color:var(--text);padding:6px 0}.nick{display:flex;gap:8px;margin-top:10px}.nick input{flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:600 15px var(--font)}.news{list-style:none;margin:0;padding:0;display:grid;gap:14px}.news-item{display:flex;gap:12px;align-items:flex-start}.news-item img{width:96px;height:54px;object-fit:cover;border-radius:10px;background:var(--surface-2);flex:none}.news-title{font-weight:700;line-height:1.35}.news-title a{color:var(--text);text-decoration:none}.news-title a:hover{text-decoration:underline}.news-sum{margin:4px 0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.news-item time{color:var(--muted);font-size:12px}.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.pick{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:116px;padding:12px;border-radius:16px;border:2px solid transparent;cursor:pointer;color:#fff;text-align:left;overflow:hidden;font:inherit;background:linear-gradient(160deg,var(--sky-a),var(--h2));transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.pick:active{transform:scale(.97)}.pick .pick-name{font-weight:800;font-size:16px;line-height:1.2;text-shadow:0 1px 8px rgb(0 0 0 / .25);position:relative}.pick .pick-sub{font-size:12px;opacity:.92;position:relative;text-shadow:0 1px 6px rgb(0 0 0 / .25)}.pick .pick-art{position:absolute;inset:0;opacity:.9}.pick:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgb(15 10 40 / .45));pointer-events:none}.pick .pick-name,.pick .pick-sub{z-index:1;padding-right:20px}.pick .pick-art svg{width:100%;height:100%}.pick .tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;z-index:2;background:#ffffff4d;display:grid;place-items:center;transition:background .2s ease,transform .2s ease}.pick .tick svg{width:16px;height:16px;opacity:0;transition:opacity .2s ease}.pick[aria-pressed=true]{border-color:var(--text);box-shadow:0 8px 24px color-mix(in srgb,var(--acc) 35%,transparent)}.pick[aria-pressed=true] .tick{background:#fff;color:#111;transform:scale(1.05)}.pick[aria-pressed=true] .tick svg{opacity:1}.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}.cta-row .btn{min-height:48px;font-size:15px;padding:0 20px}.game-block{border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.game-block+.game-block{margin-top:18px}.game-band{position:relative;height:92px}.game-band .band-text{position:absolute;left:16px;right:16px;bottom:12px;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.game-band h2{margin:0;font-size:20px;text-shadow:0 1px 12px rgb(0 0 0 / .3)}.game-band a{color:#fff;font-size:13px;font-weight:700}.game-body{padding:16px;display:grid;gap:18px}.game-body h3{margin:0 0 10px;font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.alerts-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.alerts-note{color:var(--muted);font-size:13px;margin:8px 0 0}.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}.steps li{display:flex;gap:12px;align-items:center}.steps li:before{counter-increment:s;content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}.safety{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--ok);font-weight:600;font-size:14px}.mascot{position:absolute;left:max(16px,calc(50% - 360px));top:16%;width:clamp(84px,22vw,132px);z-index:2}.mascot svg{width:100%;height:auto;animation:bob 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 18px rgb(20 10 60 / .3))}@keyframes bob{50%{transform:translateY(-10px) rotate(-3deg)}}.langs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0}.langs a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:10px}.langs a[aria-current=true]{background:var(--surface-2);color:var(--text)}footer{position:relative;z-index:1;margin:48px 0 0;padding:24px 16px calc(32px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px;text-align:center}.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px;box-shadow:var(--shadow);transition:opacity .25s ease,transform .25s ease;max-width:calc(100vw - 32px)}.toast.show{opacity:1;transform:translate(-50%)}@media(min-width:640px){.panel{padding:22px}.game-body{padding:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.scene .layer,.hero-text,.reveal{transform:none!important;translate:none!important;opacity:1!important}.ambient,.scroll-hint{display:none}}