:root{--bg:#071019;--panel:#0d1c2b;--panel2:#10253b;--line:#2c5272;--line-soft:#1a3850;--text:#f4f7fb;--muted:#91a9bd;--ice:#78ceff;--blue:#4898ff;--green:#42d88d;--gold:#dcc95d;--orange:#f0a25d;--shadow:0 18px 50px #02070d66}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,"Noto Sans TC","Segoe UI",sans-serif;background:radial-gradient(circle at 58% 4%,#153c5c 0,transparent 31rem),linear-gradient(180deg,#08131e,#071019 45%,#060d14)}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.1;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(#000,transparent 70%)}button,input,select{font:inherit}.site-header{position:sticky;top:0;z-index:20;height:64px;padding:0 max(18px,calc((100vw - 1180px)/2));display:flex;align-items:center;gap:38px;background:#071019f2;border-bottom:1px solid #28435a;backdrop-filter:blur(16px)}.brand{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:1.02rem;font-weight:800;white-space:nowrap}.brand strong{color:var(--ice)}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid #3b789f;border-radius:9px;color:var(--ice);background:linear-gradient(145deg,#1c5275,#0b2236);box-shadow:inset 0 0 15px #82d9ff30}.top-nav{display:flex;gap:6px}.top-nav a{padding:9px 12px;border-radius:8px;color:#9cafbd;text-decoration:none;font-size:.8rem;font-weight:700}.top-nav a:hover{color:#fff;background:#173047}.language{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--orange)}select{max-width:170px;color:#fff;background:#0a1723;border:1px solid #344b5d;border-radius:9px;padding:8px 9px}main{position:relative;max-width:1180px;margin:auto;padding:56px 18px 78px}.surface{border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#10263bd9,#091725e8);box-shadow:var(--shadow)}.hero{min-height:315px;padding:34px 32px;display:grid;grid-template-columns:1.22fr .78fr;gap:34px;align-items:center;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:520px;height:520px;left:18%;top:-360px;border-radius:50%;background:#4fc3ff19;box-shadow:0 0 90px #4fc3ff25}.hero-copy,.lookup{position:relative;z-index:1}.eyebrow{display:block;color:var(--ice);font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.hero .eyebrow{color:var(--gold)}h1{max-width:700px;margin:12px 0 14px;font-size:clamp(2.5rem,5.1vw,4.25rem);line-height:.96;letter-spacing:-.045em;font-weight:500}h1 em{font-style:normal;color:var(--ice)}.hero-copy>p{max-width:650px;margin:0;color:#a9bbca;line-height:1.65;font-size:.94rem}.capabilities{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.capabilities span{padding:8px 12px;border:1px solid #2e6590;border-radius:999px;background:#1b4d7838;color:#b7dcf4;font-size:.76rem}.lookup{padding:17px;border:2px solid #2f6388;border-radius:12px;background:#091629;box-shadow:0 0 0 5px #3f9ed30b,0 0 35px #309ee025}.lookup label{display:block;margin-bottom:9px;color:#91c9ef;font-size:.68rem;font-weight:900;letter-spacing:.12em}.lookup input{width:100%;height:58px;padding:0 15px;border:1px solid #2a4560;border-radius:9px;outline:0;background:#081428;color:#fff;font-size:1.05rem;font-weight:800}.lookup input:focus{border-color:var(--ice);box-shadow:0 0 0 3px #78ceff18}.lookup button,.manual-fields button{width:100%;height:58px;margin-top:9px;border:1px solid #3569a5;border-radius:9px;color:#e9f3ff;background:linear-gradient(135deg,#1f4d87,#244886);font-weight:900;cursor:pointer}.lookup button:hover,.manual-fields button:hover{filter:brightness(1.12)}.lookup button span{margin-right:6px}.lookup small{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:10px;color:#84a6bf;font-size:.68rem;font-weight:700}.lookup small i,.online-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}.creation{display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:center;margin-top:14px;padding:19px 21px}.calendar-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid #3c8fc4;border-radius:12px;color:var(--ice);font-size:1.35rem;background:#2474a632;box-shadow:0 0 18px #55baf733}.creation strong{display:block;margin-top:4px;font-size:clamp(1.05rem,2.1vw,1.55rem)}.creation p{margin:4px 0 0;color:var(--muted);font-size:.75rem}.online-dot{width:13px;height:13px}.recent{margin-top:14px;padding:20px}.section-head,.timeline-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.section-head h2,.timeline-head h2,.manual h2{margin:5px 0 3px;font-size:1.3rem}.section-head p,.timeline-head p,.manual p{margin:0;color:var(--muted);font-size:.76rem}.recent-actions{display:flex;align-items:center;gap:8px}.recent-actions>span{padding:7px 10px;border:1px solid #30577a;border-radius:999px;color:#b7d6ee;font-size:.69rem;font-weight:800}.recent-actions button{padding:8px 12px;border:1px solid #315f94;border-radius:8px;color:#d7e8f8;background:#12315c;cursor:pointer}.recent-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}.recent-state,.empty-recent{min-height:62px;padding:12px;border:1px dashed #2a4761;border-radius:9px;background:#081525}.recent-state{border-style:solid}.recent-state strong{display:block}.recent-state span{display:block;margin-top:4px;color:#86a1b6;font-size:.68rem}.empty-recent{grid-column:1/-1;display:flex;align-items:center;color:#7f97ab;font-size:.8rem}.manual{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:14px;padding:20px}.manual-fields{display:flex;gap:8px}.manual-fields input{min-height:44px;padding:0 10px;color:#fff;background:#081522;border:1px solid #31516b;border-radius:8px}.manual-fields button{width:auto;height:44px;margin:0;padding:0 16px;white-space:nowrap}.highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.highlight{min-height:142px;padding:21px}.highlight.live{border-color:#23624f}.highlight.next{border-color:#325f88}.highlight strong{display:block;margin-top:8px;font-size:1.3rem}.highlight p{margin:6px 0 0;color:var(--muted);font-size:.77rem}.timeline{margin-top:14px;padding:20px}.timeline-head{align-items:end}.legend{display:flex;gap:12px;flex-wrap:wrap;color:#849cae;font-size:.68rem}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:50%;background:#5c6e7d}.legend i.done{background:var(--green)}.legend i.next{background:var(--ice)}.timeline-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}.timeline-track:before{content:"";position:absolute;left:16px;right:16px;top:24px;height:2px;background:#29465d}.event{position:relative;z-index:1;min-height:148px;padding:52px 14px 14px;border:1px solid #263f54;border-radius:10px;background:#091624}.event-index{position:absolute;top:10px;left:14px;display:grid;place-items:center;width:29px;height:29px;border:3px solid #091624;border-radius:50%;background:#53697b;color:#fff;font-size:.65rem;font-weight:900;box-shadow:0 0 0 2px #53697b}.event.done .event-index{background:var(--green);box-shadow:0 0 0 2px var(--green)}.event.next .event-index{background:var(--ice);color:#082037;box-shadow:0 0 0 2px var(--ice),0 0 14px var(--ice)}.event-day{position:absolute;top:17px;right:12px;color:#7fc7ef;font-size:.64rem;font-weight:900}.event h3{margin:0 0 6px;font-size:.94rem}.event p{margin:0;color:#86a0b5;font-size:.7rem;line-height:1.45}.event small{display:block;margin-top:9px;color:#6f899d;font-size:.62rem}.event .status{display:inline-block;margin-top:10px;padding:4px 7px;border-radius:999px;background:#1a2b39;color:#8196a6;font-size:.61rem;font-weight:800}.event.done .status{color:var(--green);background:#42d88d14}.event.next .status{color:var(--ice);background:#78ceff14}.timeline-track:not(.expanded) .event:nth-child(n+7){display:none}.timeline-toggle{display:block;margin:15px auto 0;padding:9px 17px;border:1px solid #315b7d;border-radius:8px;color:#b9d9ef;background:#0d2438;cursor:pointer}footer{border-top:1px solid #1e3549;background:#050c12;padding:44px max(18px,calc((100vw - 1180px)/2)) 24px}.footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:36px}.footer-grid h2{margin:4px 0 14px;font-size:.77rem;color:#fff}.footer-grid>div>a:not(.brand){display:block;margin:9px 0;color:#7f99ad;text-decoration:none;font-size:.72rem}.footer-grid>div>a:hover{color:var(--ice)}.footer-about p{max-width:330px;color:#9aafc0;font-size:.77rem;line-height:1.55}.footer-about small{display:block;max-width:360px;color:#657d90;line-height:1.55}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:32px;padding-top:18px;border-top:1px solid #192a38;color:#61798c;font-size:.68rem}.hidden{display:none!important}
@media(max-width:850px){.top-nav{display:none}.hero{grid-template-columns:1fr}.footer-grid{grid-template-columns:2fr repeat(2,1fr)}.footer-about{grid-row:span 2}.timeline-track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.site-header{padding:0 12px}.language span{display:none}.language select{max-width:140px}.brand{font-size:.92rem}main{padding:30px 11px 55px}.hero{padding:23px 18px}.hero h1{font-size:2.55rem}.creation{grid-template-columns:44px 1fr}.calendar-icon{width:42px;height:42px}.online-dot{display:none}.section-head,.timeline-head,.manual{align-items:stretch;flex-direction:column}.recent-actions{justify-content:space-between}.recent-list,.highlights,.timeline-track{grid-template-columns:1fr}.manual-fields{flex-wrap:wrap}.manual-fields input{flex:1 1 120px}.manual-fields button{width:100%}.timeline-track:before{display:none}.timeline-track:not(.expanded) .event:nth-child(n+5){display:none}.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1;grid-row:auto}.footer-bottom{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Visual icon and official artwork layer */
.icon-sprite{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important;pointer-events:none}
.ui-icon{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.16em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.brand-mark .ui-icon{width:20px;height:20px;stroke-width:1.65}
.top-nav a,.capabilities span,.lookup button,.recent-actions button,.footer-grid h2{display:flex;align-items:center;gap:7px}
.top-nav a .ui-icon{color:#6ebdea;font-size:.95rem}
.language>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #6d4f31;border-radius:50%;background:#49331c55}

.hero:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#081726f5 0%,#081726e7 38%,#081726b7 63%,#081726e8 100%);pointer-events:none}
.hero-backdrop{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(.84) contrast(1.06);opacity:.74}
.hero-copy,.lookup{z-index:2}
.capabilities span{backdrop-filter:blur(7px);box-shadow:inset 0 0 14px #3c9ad31a}
.capabilities .ui-icon{color:#8ee0ff;font-size:.92rem}
.lookup button{justify-content:center}
.lookup button .ui-icon{font-size:1.05rem}

.calendar-icon .ui-icon{width:25px;height:25px}
.heading-with-icon{display:flex;align-items:flex-start;gap:12px;min-width:0}
.heading-icon,.highlight-icon,.recent-state-icon{display:grid;place-items:center;flex:0 0 auto;border:1px solid #387aa6;color:#91dcff;background:linear-gradient(145deg,#18476a,#0b263b);box-shadow:inset 0 0 14px #8ddcff20,0 6px 18px #02070d44}
.heading-icon{width:42px;height:42px;border-radius:11px}
.heading-icon .ui-icon{width:21px;height:21px}
.recent-actions button .ui-icon{font-size:.92rem}
.recent-state{display:flex;align-items:center;gap:11px}
.recent-state-icon{width:34px;height:34px;border-radius:9px}
.recent-state-icon .ui-icon{width:17px;height:17px}
.empty-recent{gap:9px}
.empty-recent>.ui-icon{color:#6097bb;font-size:1.1rem}

.highlight{position:relative;display:flex;align-items:center;gap:14px;overflow:hidden;isolation:isolate}
.highlight:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#081724fa 0%,#0a1926e8 58%,#09172572 100%)}
.highlight>img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.8) contrast(1.1)}
.highlight.live>img{object-position:center 38%}
.highlight.next>img{object-position:center 44%}
.highlight-icon{width:46px;height:46px;border-radius:12px}
.highlight-icon .ui-icon{width:23px;height:23px}
.highlight-copy{min-width:0;position:relative;z-index:1}
.highlight strong{margin-top:7px;text-shadow:0 2px 14px #000}
.highlight p{text-shadow:0 2px 9px #000}

.event-title{display:flex;align-items:center;gap:9px;margin:0 0 7px}
.event-title h3{margin:0;min-width:0}
.event-glyph{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border:1px solid #345875;border-radius:8px;color:#8bd8ff;background:#102a3f;box-shadow:inset 0 0 11px #8bd8ff18}
.event-glyph .ui-icon{width:16px;height:16px}
.event-glyph.cat-hero{color:#f0c984;border-color:#735b39;background:#3a2b1c}
.event-glyph.cat-battle{color:#ff9f80;border-color:#79473e;background:#3e211d}
.event-glyph.cat-pet{color:#c9a9ff;border-color:#624e82;background:#2e2540}
.event-glyph.cat-crystal{color:#8fe9ff;border-color:#387b8c;background:#163842}
.event-glyph.cat-gear{color:#90e2b3;border-color:#3c7255;background:#193627}
.event-glyph.cat-academy{color:#e9d985;border-color:#71663b;background:#39331c}
.event.done .event-glyph{box-shadow:inset 0 0 14px #42d88d18,0 0 12px #42d88d10}
.event.next .event-glyph{border-color:#78ceff;box-shadow:inset 0 0 14px #78ceff24,0 0 12px #78ceff24}

.footer-grid h2{color:#dcefff}
.footer-grid h2 .ui-icon{color:#6fc9f4;font-size:1rem}

@media(max-width:850px){.hero:before{background:linear-gradient(180deg,#081726ea 0%,#081726d5 48%,#081726f8 100%)}.hero-backdrop{object-position:center 45%;opacity:.58}}
@media(max-width:600px){.hero-backdrop{object-position:54% center}.heading-icon{width:38px;height:38px}.highlight{min-height:152px}.footer-grid h2{align-items:flex-start}}

/* Refined artwork: isolated characters instead of full promotional screenshots */
.hero:before{background:radial-gradient(circle at 64% 38%,#2d82b654 0,transparent 17rem),linear-gradient(90deg,#081726f8 0%,#0a2234e8 58%,#081726f8 100%)}
.hero-backdrop{display:none}
.hero-character{position:absolute;z-index:1;right:32%;bottom:-118px;width:285px;height:auto;opacity:.48;filter:drop-shadow(0 18px 28px #000b) saturate(.9);mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 100%);pointer-events:none}
.lookup{z-index:3}
.creation{position:relative;grid-template-columns:54px 1fr 50px auto;overflow:hidden}
.creation-character{width:48px;height:48px;border:1px solid #397aa3;border-radius:50%;object-fit:cover;object-position:center 20%;filter:saturate(.88);box-shadow:0 0 16px #53bff437}

.highlight{padding-right:138px;background:linear-gradient(135deg,#10263b,#091725)}
.highlight:before{z-index:0;background:linear-gradient(90deg,#091725 0%,#0a1c2bea 66%,#0d2842a6 100%)}
.highlight>img{z-index:1;inset:auto -12px -18px auto;width:155px;height:155px;object-fit:cover;object-position:center;border-radius:50%;opacity:.82;filter:saturate(.88) contrast(1.04);box-shadow:0 0 0 1px #72cfff35,0 0 38px #4db9ff28}
.highlight.live>img,.highlight.next>img{object-position:center}
.highlight-icon,.highlight-copy{position:relative;z-index:2}
.footer-bottom a{color:#7798b1;text-decoration:none}.footer-bottom a:hover{color:var(--ice)}

@media(max-width:850px){.hero:before{background:radial-gradient(circle at 82% 15%,#2d82b64c 0,transparent 15rem),linear-gradient(180deg,#081726ee 0%,#081726e2 48%,#081726fb 100%)}.hero-character{right:-16px;top:-40px;bottom:auto;width:230px;opacity:.22;mask-image:linear-gradient(90deg,transparent,#000 40%)}}
@media(max-width:600px){.creation{grid-template-columns:44px 1fr}.creation-character{display:none}.highlight{padding-right:105px;min-height:150px}.highlight>img{right:-18px;bottom:-12px;width:126px;height:126px;opacity:.7}.hero-character{right:-32px;top:-12px;width:200px;opacity:.18}}

/* Compact unlock summary cards */
.highlight{min-height:108px;padding:14px 108px 14px 16px;gap:10px}
.highlight-icon{width:38px;height:38px;border-radius:10px}
.highlight-icon .ui-icon{width:19px;height:19px}
.highlight>img{right:-8px;bottom:-13px;width:118px;height:118px}
.highlight strong{margin-top:5px;font-size:1.12rem}
.highlight p{margin-top:3px}
@media(max-width:600px){.highlight{min-height:112px;padding:13px 82px 13px 14px;gap:9px}.highlight-icon{width:36px;height:36px}.highlight>img{right:-16px;bottom:-8px;width:102px;height:102px}.highlight strong{font-size:1.04rem}}