:root{--color-bg: #EBF1F5;--color-white: #FFFFFF;--color-black: #1A1A1A;--color-red: #FF2A5F;--color-blue: #0077FF;--color-green: #00C853;--color-yellow: #FFB300;--color-gray: #CBD5E0;--color-gray-light: #F7FAFC;--color-gray-mid: #EDF2F7;--color-gray-text: #718096;--color-pink: #FF66E5;--border-width: 4px;--shadow-offset: 8px;--font-pixel: "Press Start 2P", "Microsoft YaHei", monospace;--font-ui: "Microsoft YaHei", sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-black);font-family:var(--font-pixel);display:flex;justify-content:center;align-items:center;min-height:100vh;min-height:100dvh;overflow:hidden;-webkit-user-select:none;user-select:none;image-rendering:pixelated;image-rendering:-moz-pixelated;image-rendering:crisp-edges;touch-action:manipulation}#app{position:relative}.bg-grid{background-color:var(--color-white);background-image:radial-gradient(circle,rgba(255,42,95,.26) 0 4px,transparent 4px),radial-gradient(circle,rgba(0,119,255,.18) 0 3px,transparent 3px),linear-gradient(var(--color-gray-light) 2px,transparent 2px),linear-gradient(90deg,var(--color-gray-light) 2px,transparent 2px);background-position:0 0,14px 14px,0 0,0 0;background-size:28px 28px,28px 28px,20px 20px,20px 20px}.neo-panel{position:relative;width:1000px;height:700px;border:var(--border-width) solid var(--color-black);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--color-gray),0 20px 40px #0000000d;background:var(--color-white);overflow:hidden}.neo-btn{padding:12px 24px;border:3px solid var(--color-black);color:var(--color-white);cursor:pointer;font-family:var(--font-pixel);font-weight:700;font-size:14px;box-shadow:4px 4px 0 var(--color-black);transition:all .1s ease;text-align:center}.neo-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-black)}.neo-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--color-black)}.neo-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.neo-btn-red{background:var(--color-red)}.neo-btn-blue{background:var(--color-blue)}.neo-btn-green{background:var(--color-green)}.neo-btn-yellow{background:var(--color-yellow);color:var(--color-black)}.neo-btn-white{background:var(--color-white);color:var(--color-black)}.neo-btn-black{background:var(--color-black)}.neo-input{width:100%;padding:14px 12px;font-family:var(--font-ui);font-weight:700;font-size:16px;border:3px solid var(--color-black);background:var(--color-gray-light);color:var(--color-black);outline:none;box-shadow:inset 3px 3px #0000000d;transition:all .2s}.neo-input::placeholder{color:#a0aec0;font-weight:400}.neo-input:focus{background:var(--color-white);border-color:var(--color-blue);box-shadow:4px 4px 0 var(--color-blue);transform:translate(-2px,-2px)}.neo-tag{padding:4px 8px;border:2px solid var(--color-black);font-family:var(--font-pixel);font-size:10px;background:var(--color-gray-mid)}.neo-tag-red{background:var(--color-red);color:var(--color-white)}.neo-tag-blue{background:var(--color-blue);color:var(--color-white)}.neo-tag-green{background:var(--color-green);color:var(--color-white)}.neo-tag-yellow{background:var(--color-yellow);color:var(--color-black)}.avatar-stack{position:relative;display:inline-flex;overflow:visible}.avatar-base{overflow:hidden}.avatar-accessory{position:absolute;pointer-events:none;z-index:20;filter:drop-shadow(3px 3px 0 var(--color-black))}.avatar-accessory-crown{left:50%;top:calc(-34px * var(--acc-scale, 1));width:72px;height:34px;transform:translate(-50%) scale(var(--acc-scale, 1));background:var(--acc);border:4px solid var(--color-black);clip-path:polygon(0 100%,0 40%,20% 72%,34% 0,50% 70%,66% 0,80% 72%,100% 40%,100% 100%)}.avatar-accessory-halo{left:50%;top:calc(-24px * var(--acc-scale, 1));width:76px;height:24px;transform:translate(-50%) scale(var(--acc-scale, 1));border:6px solid var(--acc);background:var(--color-white);box-shadow:inset 0 0 0 3px var(--color-black);border-radius:50%}.avatar-accessory-visor{left:50%;top:42%;width:82px;height:24px;transform:translate(-50%) scale(var(--acc-scale, 1));background:var(--acc);border:4px solid var(--color-black);box-shadow:inset 8px 0 #ffffff59}.avatar-accessory-spark{right:calc(-18px * var(--acc-scale, 1));top:calc(-16px * var(--acc-scale, 1));width:38px;height:38px;transform:rotate(12deg) scale(var(--acc-scale, 1));background:var(--acc);border:4px solid var(--color-black);clip-path:polygon(50% 0,62% 32%,100% 36%,68% 56%,78% 100%,50% 70%,22% 100%,32% 56%,0 36%,38% 32%)}.avatar-accessory-cap{left:50%;top:calc(-18px * var(--acc-scale, 1));width:78px;height:32px;transform:translate(-50%) rotate(-6deg) scale(var(--acc-scale, 1));background:var(--acc);border:4px solid var(--color-black);box-shadow:18px 18px 0 -10px var(--color-black)}.avatar-accessory-rainbow{--rainbow-fill: linear-gradient(90deg, var(--color-red) 0%, var(--color-yellow) 18%, #FFFFFF 30%, var(--color-green) 42%, var(--color-blue) 62%, var(--color-pink) 82%, var(--color-red) 100%);overflow:hidden;background:linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.95) 42%,rgba(255,255,255,.25) 48%,transparent 58%) -180% 0 / 220% 100% no-repeat,var(--rainbow-fill) 0 0 / 360% 100% repeat!important;animation:accessoryRainbowFlow 1.35s linear infinite;filter:drop-shadow(3px 3px 0 var(--color-black)) drop-shadow(0 0 8px rgba(255,102,229,.75))}.avatar-accessory-halo.avatar-accessory-rainbow{border-color:transparent;background:linear-gradient(var(--color-white),var(--color-white)) padding-box,linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.95) 42%,rgba(255,255,255,.18) 48%,transparent 58%) -180% 0 / 220% 100% no-repeat border-box,linear-gradient(90deg,var(--color-red),var(--color-yellow),#FFFFFF,var(--color-green),var(--color-blue),var(--color-pink),var(--color-red)) 0 0 / 360% 100% repeat border-box!important;animation:accessoryRainbowHaloFlow 1.35s linear infinite;box-shadow:inset 0 0 0 3px var(--color-black),0 0 0 4px var(--color-yellow),0 0 14px #ff66e5a6}.rainbow-swatch{background:linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.95) 42%,rgba(255,255,255,.25) 48%,transparent 58%) -180% 0 / 220% 100% no-repeat,linear-gradient(90deg,var(--color-red),var(--color-yellow),#FFFFFF,var(--color-green),var(--color-blue),var(--color-pink),var(--color-red)) 0 0 / 360% 100% repeat!important;animation:accessoryRainbowFlow 1.35s linear infinite;color:var(--color-white)!important;text-shadow:1px 1px 0 var(--color-black)}.title-badge{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:4px 8px;border:2px solid var(--color-black);background:var(--title-color);color:var(--color-white);box-shadow:3px 3px 0 var(--color-black);font-family:var(--font-pixel);font-size:10px;line-height:1.3;text-shadow:1px 1px 0 var(--color-black)}.title-badge-rainbow{background:linear-gradient(90deg,var(--color-red),var(--color-yellow),var(--color-green),var(--color-blue),var(--color-pink),var(--color-red));background-size:300% 100%;animation:titleRainbow 2.5s linear infinite}@keyframes titleRainbow{0%{background-position:0 0}to{background-position:300% 0}}@keyframes accessoryRainbowFlow{0%{background-position:-180% 0,0 0}to{background-position:180% 0,360% 0}}@keyframes accessoryRainbowHaloFlow{0%{background-position:0 0,-180% 0,0 0}to{background-position:0 0,180% 0,360% 0}}.neo-card{background:var(--color-white);border:3px solid var(--color-black);box-shadow:4px 4px 0 var(--color-gray);padding:20px;transition:all .2s ease}.neo-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--color-black);border-color:var(--color-blue)}.scroll-pixel::-webkit-scrollbar{width:16px;background:var(--color-gray-light);border:3px solid var(--color-black)}.scroll-pixel::-webkit-scrollbar-thumb{background:var(--color-black);border:2px solid var(--color-gray-light)}.scroll-pixel-red::-webkit-scrollbar-thumb{background:var(--color-red);border-left:4px solid var(--color-black);border-bottom:4px solid var(--color-black);box-shadow:inset 4px 4px #ffffff4d}.scroll-pixel-yellow::-webkit-scrollbar-thumb{background:var(--color-yellow);border-left:3px solid var(--color-black);border-bottom:3px solid var(--color-black)}.text-shadow-red{text-shadow:4px 4px 0 var(--color-red),6px 6px 0 var(--color-black)}.text-shadow-blue{text-shadow:4px 4px 0 var(--color-blue),6px 6px 0 var(--color-black)}.text-shadow-green{text-shadow:4px 4px 0 var(--color-green),6px 6px 0 var(--color-black)}.text-shadow-yellow{text-shadow:4px 4px 0 var(--color-yellow),6px 6px 0 var(--color-black)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes floatBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes rumble{0%{transform:translate(3px,3px) rotate(2deg)}50%{transform:translate(-3px,-3px) rotate(-2deg)}to{transform:translate(3px,-3px) rotate(0)}}@keyframes glowPulse{0%,to{filter:drop-shadow(0 0 0px var(--color-yellow))}50%{filter:drop-shadow(0 0 8px var(--color-yellow))}}@keyframes penaltyFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(1.5)}}.view-container{display:none}.view-container.active{display:block}.game-mobile-shell,.game-stage{display:contents}.game-portrait-tip{display:none}.neo-toast{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:10000;background:var(--color-black);color:var(--color-yellow);border:3px solid var(--color-yellow);padding:12px 24px;font-family:var(--font-pixel);font-size:11px;box-shadow:4px 4px 0 var(--color-yellow);animation:popIn .3s ease-out;pointer-events:none}@media(max-width:820px),(max-height:520px){body{align-items:flex-start;justify-content:center;width:100%;min-height:100dvh;overflow:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}body.is-game-view{align-items:stretch;justify-content:center;width:100%;min-height:var(--uno-vh, 100dvh);overflow:hidden;padding:0}#app{width:100%;min-height:calc(100dvh - 16px)}body.is-game-view #app{height:var(--uno-vh, 100dvh);min-height:var(--uno-vh, 100dvh);overflow:hidden}.view-container.active{display:flex;width:100%;min-height:calc(100dvh - 16px);align-items:center;justify-content:center}body.is-game-view .view-container.active{width:100%;height:var(--uno-vh, 100dvh);min-height:var(--uno-vh, 100dvh);align-items:stretch;justify-content:center;overflow:hidden}.neo-panel{width:min(100%,calc(100vw - 16px))!important;height:auto!important;min-height:min(700px,calc(100dvh - 16px));max-height:none;overflow:auto;border-width:3px;box-shadow:4px 4px 0 var(--color-gray),0 12px 26px #0000000f}.neo-btn{min-height:44px;padding:10px 14px;font-size:12px;line-height:1.25}.neo-input{min-height:44px;font-size:16px}.neo-card{padding:14px}.home-pop-grid{justify-content:center!important;gap:18px;padding:24px 12px 22px!important}.home-title{font-size:48px!important;letter-spacing:0!important;text-shadow:4px 4px 0 var(--color-red),8px 8px 0 var(--color-blue)!important}.home-subtitle{max-width:calc(100vw - 48px);font-size:11px!important;line-height:1.4}.home-card-stage{width:min(320px,calc(100vw - 32px))!important;height:124px!important;margin-top:0!important}.home-card{width:76px!important;height:112px!important}#home-card-1{transform:rotate(-15deg) translate(-66px)!important}#home-card-2{transform:rotate(-5deg) translate(-22px)!important}#home-card-3{transform:rotate(5deg) translate(22px)!important}#home-card-4{transform:rotate(15deg) translate(66px)!important}.home-menu-grid{width:min(100%,calc(100vw - 32px))!important;grid-template-columns:1fr!important;gap:12px!important}.home-menu-btn{min-height:48px!important;font-size:11px!important;padding:10px 12px!important}.login-box,.settings-card{width:min(100%,calc(100vw - 36px))!important}#shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;padding:16px!important;overflow:visible!important}.item-card{padding:14px 10px!important;box-shadow:4px 4px 0 var(--color-gray)!important}#rank-list{margin:0 14px!important;padding:12px!important;gap:10px!important;overflow:visible!important}.rank-row{padding:10px!important;gap:8px;align-items:flex-start!important}.game-mobile-shell{display:flex;width:100%;height:var(--uno-vh, 100dvh);flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;padding:8px}.game-stage{display:block;position:relative;width:var(--uno-game-layout-width);height:var(--uno-game-layout-height);flex:0 0 auto}#game-board.neo-panel{position:absolute!important;left:0;top:0;width:1060px!important;height:740px!important;min-height:740px;overflow:hidden;margin:0;transform:scale(var(--uno-game-scale));transform-origin:top left}body.is-portrait .game-mobile-shell{justify-content:center;padding-top:12px;padding-bottom:12px}body.is-portrait .game-stage{width:var(--uno-game-portrait-layout-width);height:var(--uno-game-portrait-layout-height)}body.is-portrait #game-board.neo-panel{transform:translate(var(--uno-game-portrait-layout-width)) rotate(90deg) scale(var(--uno-game-portrait-scale))}body.is-portrait .game-portrait-tip{display:block;width:min(100%,360px);border:3px solid var(--color-black);background:var(--color-white);box-shadow:4px 4px 0 var(--color-yellow);padding:10px 12px;font-family:var(--font-ui);text-align:center}.game-portrait-title{font-family:var(--font-pixel);font-size:11px;line-height:1.45;margin-bottom:6px}.game-portrait-body{color:var(--color-gray-text);font-size:12px;line-height:1.5}.neo-toast{width:min(92vw,520px);top:max(12px,env(safe-area-inset-top));padding:10px 14px;font-size:9px;text-align:center}}@media(max-width:520px){.neo-panel{min-height:calc(100dvh - 16px)}#shop-grid{grid-template-columns:1fr!important}.text-shadow-red{text-shadow:3px 3px 0 var(--color-red),5px 5px 0 var(--color-black)}.text-shadow-blue{text-shadow:3px 3px 0 var(--color-blue),5px 5px 0 var(--color-black)}.text-shadow-green{text-shadow:3px 3px 0 var(--color-green),5px 5px 0 var(--color-black)}.text-shadow-yellow{text-shadow:3px 3px 0 var(--color-yellow),5px 5px 0 var(--color-black)}}