:root{--font-pixel:"Pixelify Sans", cursive, monospace, sans-serif;--font-sans:"Pixelify Sans", cursive, monospace, sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.2;--leading-normal:1.5;--leading-relaxed:1.7;--poke-red:#ff4757;--poke-coral:#ff6b6b;--poke-gold:#ffd32a;--poke-cyan:#00d2d3;--poke-green:#2ed573;--poke-blue:#1e90ff;--accent-primary:var(--poke-red);--accent-gold:var(--poke-gold);--accent-glow:#ff475773;--tag-psy:#c084fc;--tag-grass:#34d399;--tag-water:#38bdf8;--tag-fire:#fb7185;--tag-elec:#fbbf24;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-xl:28px;--radius-full:9999px;--glass-blur:24px;--glass-border-width:1px;--glass-specular-angle:135deg;--transition-fast:.15s cubic-bezier(.16, 1, .3, 1);--transition-normal:.25s cubic-bezier(.16, 1, .3, 1);--transition-slow:.4s cubic-bezier(.16, 1, .3, 1)}:root[data-time=dawn]{--bg-gradient:radial-gradient(circle at 15% 15%, #ffafbd59 0%, transparent 50%), radial-gradient(circle at 85% 80%, #ffc3a059 0%, transparent 50%), linear-gradient(135deg, #1f1b2e 0%, #2e263d 50%, #1a2238 100%);--bg-ambient:#1f1b2e;--text-main:#f8fafc;--text-muted:#cbd5e1;--text-dim:#94a3b8;--glass-bg:#ffffff14;--glass-bg-hover:#ffffff24;--glass-border:#ffffff38;--glass-border-highlight:#ffdce6a6;--glass-shadow:0 16px 40px -8px #0f0a1e73;--glass-fallback:#1c182aeb;--time-badge-text:"Bình Minh";--time-badge-icon:"🌅"}:root[data-time=day]{--bg-gradient:radial-gradient(circle at 20% 20%, #38bdf840 0%, transparent 45%), radial-gradient(circle at 80% 75%, #0ea5e933 0%, transparent 50%), linear-gradient(135deg, #0f172a 0%, #132238 50%, #0c1c2e 100%);--bg-ambient:#0f172a;--text-main:#fff;--text-muted:#e2e8f0;--text-dim:#94a3b8;--glass-bg:#ffffff17;--glass-bg-hover:#ffffff26;--glass-border:#ffffff3d;--glass-border-highlight:#ffffffbf;--glass-shadow:0 16px 40px -8px #030f1e80;--glass-fallback:#0f172aed;--time-badge-text:"Ban Ngày";--time-badge-icon:"☀️"}:root[data-time=dusk]{--bg-gradient:radial-gradient(circle at 20% 15%, #f43f5e4d 0%, transparent 45%), radial-gradient(circle at 80% 80%, #a855f74d 0%, transparent 50%), radial-gradient(circle at 50% 50%, #f59e0b33 0%, transparent 60%), linear-gradient(135deg, #1e112a 0%, #291030 50%, #121026 100%);--bg-ambient:#1e112a;--text-main:#fff1f2;--text-muted:#fecdd3;--text-dim:#a1a1aa;--glass-bg:#ffffff14;--glass-bg-hover:#ffffff24;--glass-border:#ffffff38;--glass-border-highlight:#ffd6e2b3;--glass-shadow:0 16px 40px -8px #1905198c;--glass-fallback:#1e112aeb;--time-badge-text:"Hoàng Hôn";--time-badge-icon:"🌇"}:root,:root[data-time=night]{--bg-gradient:radial-gradient(circle at 10% 20%, #6366f138 0%, transparent 45%), radial-gradient(circle at 90% 80%, #ec48992e 0%, transparent 50%), radial-gradient(circle at 50% 10%, #3b82f626 0%, transparent 40%), linear-gradient(135deg, #070913 0%, #0d1124 50%, #060814 100%);--bg-ambient:#070913;--text-main:#f8fafc;--text-muted:#cbd5e1;--text-dim:#64748b;--glass-bg:#ffffff12;--glass-bg-hover:#ffffff21;--glass-border:#ffffff2e;--glass-border-highlight:#ffffffa6;--glass-shadow:0 16px 44px -8px #000000b3;--glass-fallback:#0b0f1cf0;--time-badge-text:"Đêm Muộn";--time-badge-icon:"🌙"}.glass-panel{background-color:var(--glass-fallback);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow);border:var(--glass-border-width) solid var(--glass-border);color:var(--text-main);transition:transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal);position:relative;overflow:hidden}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-panel{background-color:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%)}}.glass-panel:before{content:"";border-radius:inherit;background:linear-gradient(135deg, var(--glass-border-highlight) 0%, var(--glass-border) 30%, #ffffff08 70%, transparent 100%);-webkit-mask-composite:xor;pointer-events:none;z-index:1;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.glass-panel-interactive{cursor:pointer}.glass-panel-interactive:hover{background-color:var(--glass-bg-hover);box-shadow:0 20px 48px -10px #0009, 0 0 16px -2px var(--accent-glow);border-color:#ffffff59;transform:translateY(-2px)}.glass-panel-interactive:active{transform:translateY(0)}.glass-subcard{border-radius:var(--radius-md);transition:background-color var(--transition-fast), border-color var(--transition-fast);background:#ffffff0a;border:1px solid #ffffff14;padding:1rem}.glass-subcard:hover{background:#ffffff12;border-color:#ffffff29}.btn-glass{font-family:var(--font-pixel);font-size:var(--text-sm);font-weight:var(--font-weight-bold);color:var(--text-main);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(16px);cursor:pointer;transition:all var(--transition-fast);user-select:none;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.25rem;text-decoration:none;display:inline-flex;box-shadow:0 4px 16px #00000040}.btn-glass:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-highlight);box-shadow:0 6px 20px #00000059, 0 0 12px var(--accent-glow);transform:translateY(-1px)}.btn-glass:active{transform:translateY(1px)}.btn-glass-primary{color:#fff;background:linear-gradient(135deg,#ff475759 0%,#ff6b6b33 100%);border-color:#ff6b6b99;box-shadow:0 4px 20px #ff475759}.btn-glass-primary:hover{background:linear-gradient(135deg,#ff475780 0%,#ff6b6b59 100%);border-color:#fff;box-shadow:0 6px 24px #ff47578c,0 0 16px #ff475766}.liquid-glass-refract{filter:url(#liquid-glass-filter)}html.low-spec .glass-panel,html.low-spec .btn-glass{-webkit-backdrop-filter:none!important;background-color:var(--glass-fallback)!important}html.low-spec .liquid-glass-refract{filter:none!important}@keyframes glassPageReveal{0%{opacity:.3;filter:blur(12px);transform:scale(.99)}to{opacity:1;filter:blur();transform:scale(1)}}.page-glass-enter{animation:.32s cubic-bezier(.16,1,.3,1) forwards glassPageReveal}@media (prefers-reduced-motion:reduce){.page-glass-enter{opacity:1!important;filter:none!important;animation:none!important;transform:none!important}.liquid-glass-refract{filter:none!important}}.font-pixel{font-family:var(--font-pixel);letter-spacing:.04em}.pixel-cursor{color:var(--poke-gold);font-family:var(--font-pixel);user-select:none;margin-right:.4rem;font-size:1.1em;animation:.8s ease-in-out infinite alternate cursorBob;display:inline-block}@keyframes cursorBob{0%{transform:translate(0)}to{transform:translate(4px)}}.pixel-arrow-down{color:var(--poke-red);user-select:none;font-size:.85em;animation:.9s steps(2,start) infinite blinkArrow;display:inline-block}@keyframes blinkArrow{0%,to{opacity:1;transform:translateY(0)}50%{opacity:.2;transform:translateY(3px)}}.dialog-box{border:2px solid var(--glass-border);box-shadow:0 0 0 1px #0006, var(--glass-shadow);position:relative}.dialog-corners{position:relative}.dialog-corners:before,.dialog-corners:after{content:"";background-color:var(--poke-gold);pointer-events:none;z-index:2;width:6px;height:6px;position:absolute}.dialog-corners:before{box-shadow:0 calc(100% - 14px) 0 0 var(--poke-gold);top:4px;left:4px}.dialog-corners:after{box-shadow:0 calc(100% - 14px) 0 0 var(--poke-gold);top:4px;right:4px}.key-badge{font-family:var(--font-pixel);font-size:var(--text-xs);color:var(--text-muted);background:#00000080;border:1px solid #ffffff40;border-radius:4px;align-items:center;gap:.35rem;padding:.2rem .5rem;display:inline-flex;box-shadow:inset 0 -1px #00000080}.key-badge kbd{color:#fff;background:#ffffff26;border-radius:3px;padding:.05rem .35rem;font-weight:700;display:inline-block}.meter-container{border-radius:var(--radius-full);background:#00000073;border:1px solid #ffffff26;width:100%;height:10px;padding:1.5px;position:relative;overflow:hidden}.meter-fill{border-radius:var(--radius-full);height:100%;transition:width .6s cubic-bezier(.16,1,.3,1);position:relative}.meter-fill-xp{background:linear-gradient(90deg,#f59e0b 0%,#ffd32a 100%);box-shadow:0 0 10px #ffd32a99}.meter-fill-hp{background:linear-gradient(90deg,#10b981 0%,#2ed573 100%);box-shadow:0 0 10px #2ed57399}.element-tag{border-radius:var(--radius-full);font-family:var(--font-pixel);font-size:var(--text-xs);font-weight:var(--font-weight-bold);transition:all var(--transition-fast);user-select:none;border:1px solid #0000;align-items:center;gap:.35rem;padding:.25rem .65rem;display:inline-flex}.gym-badge{aspect-ratio:1;transition:all var(--transition-normal);background:#ffffff0d;border:1px solid #ffffff1f;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.gym-badge.unlocked{box-shadow:0 0 16px -2px var(--badge-glow,#ffd32a80);background:radial-gradient(circle at 35% 35%,#fff3 0%,#0000 70%),#ffffff1a;border-color:#fff6}.gym-badge.locked{opacity:.35;filter:grayscale()}.typewriter-cursor{vertical-align:-.15em;background-color:var(--poke-gold);width:8px;height:1.1em;margin-left:2px;animation:.75s steps(2,start) infinite cursorBlink;display:inline-block}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:0}}@media (prefers-reduced-motion:reduce){.pixel-cursor,.pixel-arrow-down,.typewriter-cursor{animation:none!important}}:root{--night:#14123a;--plum:#2c1f60;--ink:#fff7ec;--ink-dim:#fff7ecd1;--gold:#ffd27a;--coral:#ff8a6b;--glass:#180e3c94;--glass-border:#ffffff73;--radius:28px;--pixel:"Pixelify Sans", ui-monospace, monospace;--sans:"Be Vietnam Pro", system-ui, sans-serif;--poke-gold:#ffd27a;--poke-coral:#ff8a6b;--poke-green:#2ed573;--poke-red:#ff4757;--bg-ambient:#14123a;--text-main:#fff7ec;--text-muted:#fff7ecd1;--text-dim:#fff7ec99;--font-pixel:"Pixelify Sans", ui-monospace, monospace;--font-sans:"Be Vietnam Pro", system-ui, sans-serif;--radius-full:9999px;--radius-sm:8px;--radius-md:14px;--radius-xl:24px}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--night);min-height:100dvh;color:var(--ink);font-family:var(--sans);margin:0;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.scene{z-index:-1;object-fit:cover;object-position:50% 100%;pointer-events:none;width:100%;height:100%;image-rendering:pixelated;position:fixed;inset:0}.glass{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:blur(18px)saturate(150%);box-shadow:inset 0 1px #ffffff80,0 16px 48px #10083273}@supports not (backdrop-filter:blur(1px)){.glass{background:#180e3ce6}}.logo{font-family:var(--pixel);letter-spacing:.06em;color:var(--ink);text-shadow:2px 2px 0 var(--plum);font-weight:700}.logo span,.title span{color:var(--coral)}.title{font-family:var(--pixel);letter-spacing:.04em;text-shadow:4px 4px 0 var(--plum), 0 0 40px #ffbe8c59;margin:0;font-weight:700;line-height:1.05}.tagline{letter-spacing:.03em;color:#fff7eceb;text-shadow:0 2px 12px #1e0f4699;margin:0;font-weight:300}.hero{animation:1s step-end infinite bob}.hero--scene{animation:1s step-end infinite bob-scene}.cursor{animation:1.1s step-end infinite blink}@keyframes blink{50%{opacity:0}}@keyframes bob{50%{transform:translateY(-2px)}}@keyframes bob-scene{50%{transform:translateY(-1px)}}@keyframes glow{50%{box-shadow:0 0 0 6px #ffd27a1f,0 0 28px #ffd27a8c}}.login{text-align:center;flex-direction:column;align-items:center;gap:16px;min-height:100dvh;padding:clamp(72px,12vh,112px) 20px 120px;display:flex}.login .title{font-size:clamp(44px,12vw,96px)}.login .tagline{font-size:clamp(16px,2.4vw,20px)}.btn-start{cursor:pointer;background:#1c10466b;border-color:#ffffff80;border-radius:24px;justify-content:center;align-items:center;gap:14px;width:min(100%,340px);min-height:64px;margin-top:22px;padding:14px 22px 14px 30px;transition:transform .12s steps(3,end),filter .2s;display:inline-flex}.btn-start:hover{filter:brightness(1.18);transform:translateY(-2px)}.btn-start:active{transform:translateY(1px)}.btn-start__label{font-family:var(--pixel);letter-spacing:.1em;color:#fff;font-size:clamp(22px,3vw,26px);font-weight:600}.btn-start__g{background:#fff;border-radius:50%;place-items:center;width:38px;height:38px;display:grid}.legal{backdrop-filter:blur(8px);color:#fff7ecc7;z-index:10;background:#140c3299;border-radius:14px;padding:8px 14px;font-size:12px;position:fixed;bottom:24px;right:28px}.legal a:hover{color:var(--gold)}.home{flex-direction:column;align-items:center;gap:44px;max-width:1120px;margin:0 auto;padding:28px 32px 48px;display:flex}.home__bar{justify-content:space-between;align-items:center;width:100%;display:flex}.home__bar .logo{font-size:24px}.account{background:#180e3c8c;border-radius:24px;align-items:center;gap:10px;min-height:48px;padding:6px 18px 6px 8px;transition:transform .12s,filter .2s;display:inline-flex;box-shadow:inset 0 1px #ffffff80,0 8px 24px #10083266}.account:hover{filter:brightness(1.15);transform:translateY(-2px)}.account__avatar{background:#ffd27a2e;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.account__name{font-family:var(--pixel);letter-spacing:.06em;font-size:18px;font-weight:600}.welcome{text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}.welcome .title{font-size:clamp(36px,9vw,60px)}.welcome .tagline{font-size:18px}.level{align-items:center;gap:20px;width:100%;max-width:560px;padding:18px 24px 18px 18px;display:flex}.level__avatar{background:#ffd27a1f;border:1px solid #ffd27a8c;border-radius:22px;flex:none;place-items:center;width:72px;height:72px;display:grid}.level__body{flex-direction:column;flex:1;gap:12px;min-width:0;display:flex}.level__row{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.level__lv{font-family:var(--pixel);letter-spacing:.08em;color:var(--gold);font-size:28px;font-weight:700}.level__exp{font-family:var(--pixel);letter-spacing:.08em;color:var(--ink-dim);font-size:16px;font-weight:500}.bar{background:#ffffff24;border:1px solid #ffffff38;border-radius:7px;height:14px;position:relative;overflow:hidden}.bar__fill{width:var(--exp,0%);background:var(--gold);height:100%;transition:width .4s ease-out}.bar:after{content:"";background:repeating-linear-gradient(90deg,#0000 0 18px,#140c3273 18px 20px);position:absolute;inset:0}.journey-card{background:#180e3c80;width:100%;padding:22px 16px 20px}.journey{align-items:flex-start;gap:8px;margin:0;padding:0;list-style:none;display:flex;position:relative}.journey:before{content:"";background:repeating-linear-gradient(90deg,#fff6 0 8px,#0000 8px 16px);height:4px;position:absolute;top:58px;left:10%;right:10%}.step{text-align:center;flex-direction:column;flex:1;align-items:center;gap:10px;min-width:0;display:flex;position:relative}.step__sprite{height:36px;display:block}.step__node{background:#281856eb;border:2px solid #ffffff59;border-radius:8px;width:28px;height:28px;display:block}.step__name{font-family:var(--pixel);letter-spacing:.04em;color:#fff7ecc7;font-size:16px;font-weight:500;line-height:1.2}.step__lv{color:#fff7ecb3;font-size:13px}.step--current .step__node{background:var(--gold);border-color:#fff4d1;animation:2s steps(2,end) infinite glow;box-shadow:0 0 0 6px #ffd27a1f,0 0 28px #ffd27a80}.step--current .step__name{color:var(--gold);font-size:18px;font-weight:600}.journey-card__now{display:none}.portals{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%;display:grid}.portal{cursor:pointer;background:#180e3c9e;flex-direction:column;justify-content:space-between;gap:28px;min-height:176px;padding:26px 28px;transition:transform .12s steps(3,end),filter .2s;display:flex}.portal--primary{border-color:#ffd27a99;box-shadow:inset 0 1px #ffffff80,0 16px 48px #10083273,0 0 32px #ffd27a1f}.portal:hover{filter:brightness(1.15);transform:translateY(-3px)}.portal:active{transform:translateY(1px)}.portal__top{justify-content:space-between;align-items:center;display:flex}.portal__icon{flex:none;width:48px;height:48px}.portal__arrow{font-family:var(--pixel);color:var(--gold);opacity:.55;font-size:28px;transition:opacity .2s}.portal:hover .portal__arrow,.portal:focus-visible .portal__arrow{opacity:1;animation:1.1s step-end infinite blink}.portal__text{flex-direction:column;gap:6px;display:flex}.portal__name{font-family:var(--pixel);letter-spacing:.08em;font-size:32px;font-weight:700}.portal__meta{color:var(--ink-dim);font-size:15px}@media (width<=720px){.legal{white-space:nowrap;bottom:20px;right:50%;transform:translate(50%)}.btn-start{padding:12px 18px 12px 24px}.home{gap:22px;padding:20px 20px 24px}.home__bar .logo{font-size:20px}.account{border-radius:50%;justify-content:center;width:44px;min-height:44px;padding:0}.account__name{display:none}.welcome .tagline{font-size:16px}.level{border-radius:24px;gap:14px;padding:14px 18px 14px 14px}.level__avatar{border-radius:18px;width:60px;height:60px}.level__body{gap:10px}.level__lv{font-size:24px}.level__exp{font-size:14px}.bar{height:12px}.journey-card{border-radius:24px;flex-direction:column;align-items:center;gap:14px;padding:18px;display:flex}.journey{justify-content:space-between;align-items:center;gap:0;width:100%}.journey:before{margin-top:-2px;top:50%;left:14px;right:14px}.step{flex:none}.step__sprite{display:none}.step__node{border-radius:6px;width:22px;height:22px}.step--current .step__node{width:28px;height:28px}.step__name,.step__lv{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.journey-card__now{font-family:var(--pixel);letter-spacing:.04em;color:var(--gold);margin:0;font-size:18px;font-weight:600;display:block}.portals{grid-template-columns:1fr;gap:14px}.portal{border-radius:24px;flex-direction:row;align-items:center;gap:16px;min-height:104px;padding:18px 20px}.portal__top{display:contents}.portal__icon{width:44px;height:44px}.portal__text{flex:1;gap:4px}.portal__name{font-size:26px}.portal__meta{font-size:14px}.portal__arrow{order:3;font-size:24px}}@media (prefers-reduced-motion:reduce){.hero,.hero--scene,.cursor,.step--current .step__node,.portal:hover .portal__arrow,.portal:focus-visible .portal__arrow{animation:none}.portal,.btn-start{transition:none}.portal:hover,.btn-start:hover{transform:none}}