@font-face{font-family:Xique;src:url(../font/xique.ttf) format("truetype")}@font-face{font-family:BratsyScript;src:url(../font/BratsyScriptDemoReguler-9YYB0.ttf) format("truetype"),url(../font/BratsyScriptDemoReguler.otf) format("opentype")}:root{--color-gold: #d4a853;--color-gold-light: #f0d78c;--color-red: #8b2323;--color-red-dark: #5c1515;--color-cream: #f5efe6;--color-brown: #4a3728;--color-black: #1a1a1a;--gradient-gold: linear-gradient( 180deg, #f0d78c 0%, #d4a853 50%, #b8860b 100% );--gradient-red: linear-gradient( 180deg, #a52a2a 0%, #8b2323 50%, #5c1515 100% );--gradient-bg: linear-gradient(180deg, #2d1810 0%, #1a0f0a 100%);--gradient-overlay: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);--font-main: "Xique", "Noto Serif TC", "Noto Serif SC", serif;--font-display: "Xique", "Ma Shan Zheng", cursive;--font-script: "BratsyScript", cursive}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-main);background:var(--gradient-bg);color:var(--color-cream)}#app{width:100%;height:100%;position:relative;overflow:hidden}.page{width:100%;height:100%;display:flex;flex-direction:column;position:relative;overflow-y:auto;background:var(--gradient-bg)}.page-header{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--gradient-gold);color:var(--color-brown);font-size:14px}.section-title{text-align:center;font-size:24px;color:var(--color-gold);margin:20px 0;font-family:var(--font-display)}.btn-primary{background:var(--gradient-gold);color:var(--color-brown);border:none;padding:16px 48px;font-size:18px;font-weight:700;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s;font-family:var(--font-main)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #d4a85366}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:transparent;color:var(--color-gold);border:2px solid var(--color-gold);padding:14px 32px;font-size:16px;border-radius:8px;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:var(--color-gold);color:var(--color-brown)}.landing-page{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#2d181066,#1a0f0a99),url(../images/introduction/bg.jpeg) left/cover no-repeat}.landing-container{width:100%;max-width:430px;aspect-ratio:9 / 16;position:relative;display:flex;flex-direction:column;background:transparent;overflow:hidden}.landing-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:40px 20px;text-align:center;z-index:1}.landing-title-img{position:absolute;top:5%;left:50%;transform:translate(-50%);width:90%;max-width:350px;object-fit:contain;mix-blend-mode:screen;z-index:2}.landing-footer{width:100%;display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:10%}.btn-start-img{width:80%;max-width:280px;cursor:pointer;transition:transform .2s;z-index:11}.btn-start-img:hover{transform:scale(1.05)}.btn-start-img:active{transform:scale(.95)}.progress-info{font-size:10px;color:var(--color-gold-light);opacity:.8}.bg-front-overlay{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:10}.logo-area{margin-bottom:20px}.game-logo{font-size:14px;color:var(--color-gold-light)}.game-title{font-size:48px;font-family:var(--font-display);color:var(--color-gold);text-shadow:2px 2px 4px rgba(0,0,0,.5);margin-bottom:10px}.game-subtitle{font-size:14px;color:var(--color-cream);opacity:.8;margin-bottom:30px}.character-preview{margin:20px 0}.character-placeholder{font-size:120px}.btn-challenge{display:flex;align-items:center;gap:10px;margin-top:30px}.btn-icon{font-size:20px}.instructions-page,.character-select-page{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#2d181066,#1a0f0a99),url(../images/introduction/bg.jpeg) left/cover no-repeat}.instructions-content-v2,.character-select-container-v2{width:100%;max-width:430px;aspect-ratio:9 / 16;position:relative;display:flex;flex-direction:column;padding:0;z-index:1;overflow:hidden}.page-header-img-container{position:fixed;top:0;left:0;width:100vw;height:70px;z-index:999;display:flex;align-items:center;justify-content:center;overflow:hidden}.top-bar-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;z-index:1}.top-bar-logo{position:relative;height:80%;width:auto;z-index:2;object-fit:contain}.instr-body-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px 10px 0;position:relative}.instr-title-img{width:85%;height:auto;z-index:10;margin-bottom:-13%}.instr-panel-stack{position:relative;width:100%;flex:1;display:flex;justify-content:center;align-items:flex-start;padding-top:20px}.instr-bg-layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:105%;height:auto;z-index:1;opacity:.8}.instr-main-layer{position:relative;width:95%;height:auto;z-index:2;object-fit:contain}.instr-footer-v2{width:100%;display:flex;justify-content:center;padding-bottom:30px;margin-top:auto}.btn-confirm-img{width:55%;max-width:250px;cursor:pointer;transition:transform .2s;z-index:11;position:absolute;bottom:30%}.instructions-page .btn-confirm-img{bottom:12%}.btn-confirm-img:hover{transform:scale(1.05)}.btn-confirm-img:active{transform:scale(.95)}.character-select-content{flex:1;display:flex;flex-direction:column;padding:0;z-index:1}.sel-body-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px 10px 0;position:relative}.sel-title-img{width:85%;height:auto;z-index:10;margin-bottom:-13%}.sel-panel-stack{position:relative;width:100%;flex:1;display:flex;justify-content:center;align-items:flex-start;padding-top:20px}.sel-bg-layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:105%;height:auto;z-index:1;opacity:.8}.sel-main-layer{position:relative;width:95%;height:auto;z-index:2;object-fit:contain}.sel-carousel-wrapper{position:absolute;top:33%;left:50%;transform:translate(-50%,-50%);width:100%;z-index:10;padding:0 10px}.character-carousel{display:flex;align-items:center;justify-content:center;gap:40px;width:100%}.character-display{flex:1;display:flex;justify-content:center}.character-card{background:none;border:none;padding:0;box-shadow:none;width:100%;max-width:400px;display:flex;justify-content:center}.character-frame{display:flex;flex-direction:column;align-items:center;width:100%}.character-image{width:100%;display:flex;justify-content:center}.character-image img{width:175%;height:auto;border-radius:10px;object-fit:contain;transition:transform .3s ease}.char-animating{animation:characterFlash .5s ease-out}@keyframes characterFlash{0%{opacity:.3;filter:brightness(3) contrast(1.5);transform:scale(.9)}to{opacity:1;filter:brightness(1) contrast(1);transform:scale(1)}}.character-name{font-size:20px;font-family:var(--font-display);margin-bottom:2px;color:#fff}.character-desc{font-size:11px;opacity:.9;line-height:1.3;color:#fff}.carousel-btn{background:none;border:none;width:85px;height:auto;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s;z-index:20;margin-top:50px}.carousel-btn img{width:100%;height:auto;display:block}.carousel-btn:hover{transform:scale(1.1)}.carousel-btn:active{transform:scale(.9)}.btn-select{margin-top:20px;width:80%;max-width:250px}.countdown-page{display:flex;align-items:center;justify-content:center;background:#000}.game-container-v2{width:100%;max-width:430px;aspect-ratio:9 / 16;position:relative;overflow:hidden;background:#2d1810;display:flex;flex-direction:column;z-index:1}.game-bg-scroller{position:absolute;top:0;left:0;height:100%;display:flex;width:max-content;animation:bgScroll 20s linear infinite;z-index:-1}.game-bg-scroller img{height:100%;width:auto;display:block}@keyframes bgScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.countdown-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:15;pointer-events:none}.damage-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:25;box-shadow:inset 0 0 100px #f000;border:0px solid rgba(255,0,0,0);transition:all .1s ease}.damage-overlay.active{animation:damageFlash .5s ease-out forwards}@keyframes damageFlash{0%{box-shadow:inset 0 0 150px #f00c;background:#ff00001a;border:15px solid rgba(255,0,0,.5)}to{box-shadow:inset 0 0 50px #f000;background:#f000;border:0px solid rgba(255,0,0,0)}}.player-character{position:absolute;bottom:0;left:10%;transition:transform .05s linear;z-index:16}.countdown-body{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:20%;z-index:20;pointer-events:none}.countdown-slogan{width:80%;max-width:370px;height:auto;margin-bottom:40px}.countdown-number-wrapper{height:140px;display:flex;align-items:center;justify-content:center}#countdown-img{height:100%;width:auto;animation:countdownPulse 1s ease-in-out infinite}.go-text{font-size:100px;font-family:var(--font-display);color:#fff;text-shadow:0 0 40px rgba(212,168,83,.8);animation:countdownPulse .5s ease-in-out infinite}@keyframes countdownPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.player-character{position:absolute;bottom:10%;left:3%;transition:transform .05s linear;z-index:10}.game-footer-container{position:absolute;bottom:0;left:0;width:100%;z-index:10;pointer-events:none}.bottom-bar-img{width:100%;max-height:70px;height:auto;display:block;object-fit:contain}.lives-ui-container{position:absolute;bottom:10px;left:50%;transform:translate(-50%);width:45%;max-width:250px;display:flex;justify-content:center;align-items:center;z-index:11}.lives-bg-img{width:100%;height:auto;display:block}.lives-icons-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:1%;padding:0}.live-icon-img{width:26%;height:auto;display:block}.character-silhouette{font-size:80px;opacity:.5;margin-top:30px}.game-page{display:flex;align-items:center;justify-content:center;background:#000}.game-header{display:none}.game-arena-v2{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:5}.score-system-v2{position:absolute;top:5%;left:50%;transform:translate(-50%);width:70%;max-width:350px;display:flex;flex-direction:column;align-items:center;z-index:100}.score-bg-v2{width:100%;height:auto;display:block}.score-value-v2{position:absolute;top:48%;left:55%;transform:translate(-50%,-50%);font-size:50px;font-family:var(--font-display);color:#fff;text-shadow:0 4px 8px rgba(0,0,0,.5);z-index:102}.volume-meter-v2{position:absolute;bottom:12%;width:85%;height:15%;left:12.5%;background:#fff;border-radius:5px;overflow:hidden;z-index:101}.volume-bar-v3{height:100%;background:linear-gradient(90deg,#ff4d4d,#fc0);width:0%;transition:width .1s linear}.score-front-v2{position:absolute;top:0;left:0;width:100%;height:auto;z-index:103;pointer-events:none}.collision-dialogue-container{position:absolute;top:28%;left:50%;transform:translate(-50%);width:70%;max-width:300px;display:flex;justify-content:center;align-items:center;z-index:110;opacity:0;pointer-events:none;transition:opacity .3s ease}.collision-dialogue-container.show{opacity:1}.collision-dialogue-container img{width:100%;height:auto;display:block}.game-over-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:none;justify-content:center;align-items:center;z-index:200}.game-over-overlay.active{display:flex}.game-over-img{width:85%;max-width:380px;height:auto}.invincibility-ui{position:absolute;bottom:-3%;left:50%;transform:translate(-50%);width:180px;height:auto;display:flex;flex-direction:column;align-items:center;z-index:150;opacity:0;pointer-events:none;transition:opacity .3s}.invincibility-ui.active{opacity:1}.invincibility-label{width:100%;height:auto;margin-bottom:5px}.circular-timer{position:absolute;top:8%;left:50%;transform:translate(-50%);width:18px;height:18px;background:#fff;border-radius:50%;z-index:151;padding:0;display:flex;align-items:center;justify-content:center;overflow:visible}.circular-timer:before{content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%);width:6px;height:3px;background:#fff;border-radius:1.5px 1.5px 0 0}.timer-sector{width:100%;height:100%;border-radius:50%;background:conic-gradient(#8B0000 var(--progress, 0%),#fff 0)}.light-effect-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;display:none}.light-effect-overlay.active{display:block}.light-effect-overlay img{width:100%;height:100%;object-fit:cover}.collectible{position:absolute;width:50px;height:50px;z-index:8;display:flex;align-items:center;justify-content:center;pointer-events:auto}.collectible img{width:180%;height:auto}.collectible.emperor img{width:300%}.rival-character{position:absolute;width:120px;height:auto;z-index:9;transform:scaleX(-1);display:flex;justify-content:center;align-items:flex-end;transition:transform .1s linear}.rival-character.rival-fly-away{pointer-events:none;animation:flyAwayToTopRight .6s ease-in forwards}@keyframes flyAwayToTopRight{0%{transform:scaleX(-1) translate(0) rotate(0);opacity:1}to{transform:scaleX(-1) translate(600px,-1000px) rotate(1800deg);opacity:0}}.rival-character img{width:100%;height:auto;display:block}.player-flash{animation:flashEffect .2s ease-in-out 3}.player-glow{filter:drop-shadow(0 0 15px rgba(255,215,0,1))!important;animation:glowPulse 1s ease-in-out infinite alternate}@keyframes glowPulse{0%{filter:drop-shadow(0 0 10px rgba(255,215,0,.8))}to{filter:drop-shadow(0 0 25px rgba(255,215,0,1)) drop-shadow(0 0 5px #fff)}}@keyframes flashEffect{0%,to{filter:brightness(1) contrast(1)}50%{filter:brightness(2.5) contrast(1.2) drop-shadow(0 0 20px #fff)}}.game-start-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;color:var(--color-gold);font-family:var(--font-display);transition:opacity .5s}.game-start-ready{font-size:60px;text-shadow:0 0 20px var(--color-gold);animation:ready-pulse 1s infinite alternate}@keyframes ready-pulse{0%{transform:scale(1);opacity:.8}to{transform:scale(1.1);opacity:1}}.player-character{position:absolute;bottom:10%;left:2%;transition:transform .05s linear;z-index:10}.character-shield{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:250px;height:250px;pointer-events:none;z-index:11;display:none}.character-shield.active{display:block}.character-shield img{width:100%;height:100%;object-fit:contain}.character-sprite{width:150px;height:auto;display:flex;justify-content:center;align-items:flex-end}.character-sprite img{width:100%;height:auto;display:block}@keyframes idle-bob{0%,to{transform:scaleY(1)}50%{transform:scaleY(.95) scaleX(1.05)}}.player-character.jumping .character-sprite{animation:jump-stretch .3s ease-out}@keyframes jump-stretch{0%{transform:scaleY(.8) scaleX(1.2)}50%{transform:scaleY(1.2) scaleX(.8)}to{transform:scaleY(1) scaleX(1)}}.score-popup{position:absolute;top:-20px;left:50%;transform:translate(-50%);font-size:24px;font-weight:700;color:var(--color-gold);opacity:0;transition:all .3s}.score-popup.show{opacity:1;top:-40px}.collectible{position:absolute;animation:float 2s ease-in-out infinite;cursor:pointer;transition:transform .2s}.collectible:hover{transform:scale(1.2)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.game-footer{padding:15px;background:var(--gradient-gold)}.action-buttons{display:flex;justify-content:center;gap:20px}.btn-game-action{background:var(--color-cream);border:none;width:50px;height:50px;border-radius:50%;font-size:24px;cursor:pointer}.debug-volume{position:fixed;bottom:100px;right:10px;background:#000000b3;color:#0f0;padding:5px 10px;border-radius:5px;font-size:12px;font-family:monospace}.game-over-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;max-width:430px;margin:0 auto;width:100%}.game-over-title{font-size:48px;font-family:var(--font-display);color:var(--color-gold);margin-bottom:30px}.game-over-message{background:var(--gradient-gold);color:var(--color-brown);padding:20px 30px;border-radius:12px;margin-bottom:30px}.game-over-message p{margin:5px 0}.character-sad{margin-top:20px}.character-sad .character-image{font-size:120px}.results-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px;max-width:430px;margin:0 auto;width:100%}.result-card{background:var(--gradient-gold);border-radius:20px;padding:25px;text-align:center;width:100%;max-width:300px;margin:20px 0}.character-result{color:var(--color-brown)}.character-result h3{font-size:20px;font-family:var(--font-display)}.character-result .character-image{font-size:80px;margin:15px 0}.character-result .character-desc{font-size:12px;opacity:.8}.score-result{margin-top:20px;color:var(--color-brown)}.score-result .score-label{display:block;font-size:14px;margin-bottom:5px}.final-score{font-size:48px;font-weight:700;color:var(--color-red)}.result-message{margin-top:15px;font-size:12px;color:var(--color-brown);opacity:.8}.name-input-section{display:flex;gap:10px;margin:20px 0;width:100%;max-width:300px}.name-input-section input{flex:1;padding:12px;border:2px solid var(--color-gold);border-radius:8px;background:transparent;color:var(--color-cream);font-size:16px}.name-input-section input::placeholder{color:#f5efe680}.btn-submit{background:var(--color-gold);color:var(--color-brown);border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-weight:700}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.action-buttons{display:flex;gap:15px;margin:20px 0}.btn-leaderboard{background:transparent;color:var(--color-gold);border:none;font-size:16px;cursor:pointer;text-decoration:underline;margin-top:10px}.leaderboard-header{text-align:center;padding:20px;background:var(--gradient-red)}.header-banner{background:var(--gradient-gold);padding:8px 20px;border-radius:20px;display:inline-block;margin-bottom:15px}.banner-text{color:var(--color-brown);font-size:14px}.leaderboard-title{font-size:24px;font-family:var(--font-display);color:var(--color-gold)}.leaderboard-content{flex:1;padding:20px;background:linear-gradient(180deg,var(--color-red-dark) 0%,#1a0f0a 100%);max-width:430px;margin:0 auto;width:100%}.leaderboard-table{background:#0000004d;border-radius:12px;overflow:hidden}.table-header{display:grid;grid-template-columns:60px 1fr 80px;padding:15px;background:#d4a85333;color:var(--color-gold);font-size:14px;text-align:center}.table-body{max-height:400px;overflow-y:auto}.table-row{display:grid;grid-template-columns:60px 1fr 80px;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.1);align-items:center;text-align:center}.table-row.top-three{background:#d4a8531a}.col-rank{font-size:18px}.col-name{font-size:14px}.col-score{font-size:16px;font-weight:700;color:var(--color-gold)}.btn-back{display:block;width:100%;margin-top:20px;background:var(--gradient-gold);color:var(--color-brown);border:none;padding:15px;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer}.loading,.error{text-align:center;padding:30px;color:var(--color-cream);opacity:.7}.ending-wrapper-new{position:relative;width:100%;height:100%;max-width:430px;margin:0 auto;overflow-y:auto;overflow-x:hidden;background:#000;display:flex;flex-direction:column}.ending-bg-composite{width:100%;height:auto;display:block;z-index:1}.ending-character-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.ending-character-img-new{width:100%;height:auto;display:block}.character-score-group{position:absolute;top:6.5%;left:50%;transform:translate(-50%);width:60%;display:flex;flex-direction:column;align-items:center;pointer-events:none}.ending-score-display-new{position:absolute;bottom:14%;left:50.5%;transform:translate(-50%);z-index:10;pointer-events:none;font-family:var(--font-display);color:#a03d38}.ending-score-text-new{font-size:28px;font-weight:700}.ending-interactive-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20}.btn-transparent{position:absolute;cursor:pointer}#btn-replay{top:61.5%;left:9%;width:39%;height:6%}#btn-invite{top:61.5%;right:9%;width:39%;height:6%}@media(max-height:700px){.ending-score-text-new{font-size:42px}}@media(max-width:380px){.ending-score-text-new{font-size:38px}}@media(max-height:700px){.game-title{font-size:36px}.character-placeholder{font-size:80px}.countdown-number{font-size:100px}}