:root{color:#f8fbff;background:#050816;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html,body,#app,#game{margin:0;width:100%;min-height:100%}html,body{overflow-x:hidden}body{background:radial-gradient(circle at 20% 10%,rgba(255,94,233,.22),transparent 28rem),radial-gradient(circle at 80% 20%,rgba(42,244,255,.2),transparent 28rem),linear-gradient(135deg,#050816,#0d1230 48%,#14061f)}canvas{display:block}.portal-root{min-height:100vh}.portal-shell{box-sizing:border-box;width:min(1180px,calc(100% - 40px));margin:0 auto;padding:64px 0}.hero-panel{border:1px solid rgba(125,249,255,.26);border-radius:28px;padding:clamp(28px,5vw,56px);background:#080b18b8;box-shadow:0 24px 80px #00000061,inset 0 0 60px #2af4ff14;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.eyebrow,.card-kicker{margin:0 0 12px;color:#7df9ff;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.hero-panel h1{margin:0;font-size:clamp(44px,8vw,96px);line-height:.92;letter-spacing:-.08em}.hero-copy{max-width:720px;margin:24px 0 0;color:#cdd8ff;font-size:clamp(17px,2vw,22px);line-height:1.7}.game-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:24px;margin-top:28px}.game-card{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:#0b1020d1;box-shadow:0 18px 60px #00000057}.featured-card{display:grid;grid-template-columns:minmax(280px,.95fr) minmax(300px,1fr)}.card-preview{position:relative;min-height:420px;background:#090d1a}.card-preview>img:not(.preview-mascot):not(.preview-logo-badge){width:100%;height:100%;object-fit:cover;filter:saturate(1.08) brightness(.86);transform:scale(1.06)}.card-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,8,22,.8))}.preview-sprite{position:absolute;z-index:2;image-rendering:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))}.hero-sprite{left:45%;top:44%;width:78px;height:78px;background:url(/assets/sprites/hero/chunwei-armor-walk-4x4.png) 0 0 / 312px 312px no-repeat}.enemy-sprite{left:62%;top:58%;width:96px;height:96px;background:url(/assets/sprites/enemies/zombie-fan-walk-2x2.png) 0 0 / 192px 192px no-repeat}.card-body{padding:34px}.card-body h2,.empty-card h2{margin:0 0 14px;font-size:34px;letter-spacing:-.04em}.card-body p,.empty-card p{margin:0;color:#cdd8ff;line-height:1.7}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;margin:24px 0;list-style:none}.feature-list li{border:1px solid rgba(125,249,255,.22);border-radius:14px;padding:10px 12px;color:#eef7ff;background:#7df9ff14;font-weight:700}.play-button,.back-link{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:14px 20px;color:#06101c;background:linear-gradient(135deg,#7df9ff,#ff7bd8 52%,#fff06a);font-weight:900;text-decoration:none;box-shadow:0 10px 30px #ff7bd847}.empty-card{display:grid;place-content:center;min-height:360px;padding:28px;text-align:center;border-style:dashed;background:#080b1885}.empty-icon{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 20px;border-radius:22px;color:#7df9ff;background:#7df9ff1a;font-size:42px}.game-route-root,.game-frame,#game{height:100vh}.game-frame{display:grid;grid-template-rows:auto 1fr;background:#050816}.game-topbar{position:relative;z-index:10;display:flex;align-items:center;gap:18px;padding:10px 16px;border-bottom:1px solid rgba(125,249,255,.22);background:#050816eb}.game-topbar .back-link{padding:9px 14px;font-size:14px}.game-topbar strong{display:block;line-height:1.2}.game-topbar span{display:block;color:#aab6dd;font-size:13px}.game-route-root canvas{margin:0 auto}@media(max-width:900px){.game-grid,.featured-card{grid-template-columns:1fr}.card-preview{min-height:300px}.feature-list{grid-template-columns:1fr}.game-topbar{align-items:flex-start;flex-direction:column}}.hero-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);gap:clamp(20px,5vw,48px);align-items:center;overflow:hidden}.hero-copy-block{position:relative;z-index:2}.hero-mascot-stage{position:relative;z-index:1;min-height:280px;display:grid;place-items:center}.hero-mascot-stage:before{content:"";position:absolute;width:260px;height:260px;border-radius:999px;background:radial-gradient(circle,rgba(255,240,106,.34),transparent 58%),radial-gradient(circle at 30% 20%,rgba(125,249,255,.38),transparent 52%),radial-gradient(circle at 76% 70%,rgba(255,123,216,.32),transparent 48%);filter:blur(2px);animation:mascotGlow 3.8s ease-in-out infinite}.brand-favicon-preview{position:absolute;width:186px;height:186px;border-radius:48px;transform:rotate(-8deg) translate(-48px,-18px);box-shadow:0 18px 44px #00000057}.brand-mascot-gif{position:relative;width:188px;height:188px;object-fit:contain;transform:translate(58px,28px);filter:drop-shadow(0 18px 22px rgba(0,0,0,.34));image-rendering:auto}.play-orb{position:absolute;width:18px;height:18px;border-radius:999px;background:#29f400;box-shadow:0 0 18px #29f400cc}.orb-one{left:20%;top:18%;animation:orbFloat 2.5s ease-in-out infinite}.orb-two{right:16%;top:36%;animation:orbFloat 2.1s ease-in-out infinite reverse}.orb-three{left:35%;bottom:14%;animation:orbFloat 2.9s ease-in-out infinite}.preview-mascot,.preview-logo-badge{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 12px 18px rgba(0,0,0,.42))}.preview-mascot{right:18px;bottom:14px;width:84px;height:84px;object-fit:contain}.preview-logo-badge{left:18px;top:18px;width:56px;height:56px;border-radius:16px;object-fit:contain;transform:rotate(-7deg)}@keyframes mascotGlow{0%,to{transform:scale(.96);opacity:.82}50%{transform:scale(1.06);opacity:1}}@keyframes orbFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.12)}}@media(max-width:900px){.hero-panel{grid-template-columns:1fr}.hero-mascot-stage{min-height:220px}.brand-favicon-preview,.brand-mascot-gif{width:150px;height:150px}}.brand-favicon-preview,.preview-logo-badge{box-sizing:border-box;background:#f8fcfff5;padding:10px;object-fit:contain}.brand-favicon-preview{padding:18px}