@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Noto+Serif+TC:wght@300;400;600;700&display=swap";:root{--color-bg-deep: #05020a;--color-purple-dark: #1f0b3b;--color-purple-main: #4a2180;--color-purple-light: #7a4bb8;--color-purple-glow: rgba(122, 75, 184, .6);--color-gold-dark: #8b6508;--color-gold-main: #d4af37;--color-gold-light: #fef1c4;--color-gold-glow: rgba(212, 175, 55, .6);--color-text-main: #e0d8f0;--color-text-muted: #8c7ea8;--panel-bg: rgba(20, 5, 40, .85);--panel-border: rgba(212, 175, 55, .5);--shadow-main: 0 4px 24px rgba(0, 0, 0, .8);--font-title: "Cinzel", "Noto Serif TC", serif;--font-body: "Noto Serif TC", serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--color-bg-deep);color:var(--color-text-main);overflow:hidden;user-select:none;-webkit-user-select:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-title);font-weight:700;color:var(--color-gold-light)}.text-gold{color:var(--color-gold-main);text-shadow:0 0 10px var(--color-gold-glow)}.text-purple{color:var(--color-purple-light);text-shadow:0 0 10px var(--color-purple-glow)}.app-container{display:flex;flex-direction:column;width:100vw;height:100vh;height:100dvh;position:relative}.main-stage{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.scene-area{position:relative;flex:1;min-height:200px;width:100%;border-bottom:2px solid var(--color-gold-dark);box-shadow:0 4px 20px #000c;z-index:1}.interaction-area{flex:0 0 auto;padding:8px 12px;display:flex;flex-direction:column;justify-content:flex-end;z-index:5}.sidebar{display:flex;flex-direction:column;padding:16px;z-index:2;flex-shrink:0}.mobile-tab-bar{display:flex;background:var(--color-bg-deep);border-top:2px solid var(--color-purple-main);padding:4px 8px 16px;justify-content:space-around;z-index:10}.desktop-nav,.desktop-only{display:none}@media (max-width: 799px){.sidebar.hidden-tab{display:none!important}}@media (min-width: 800px){.app-container{flex-direction:row}.scene-area{height:100vh;border-bottom:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}.scene-bg-gradient{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,#05020af2)!important}.interaction-area{position:absolute;bottom:40px;left:50%;transform:translate(-50%);width:80%;max-width:800px;z-index:10;padding:0;justify-content:center}.sidebar{width:360px;height:100vh;background:#0a0214e6;border-left:2px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:-10px 0 30px #000c;display:flex;flex-direction:column;padding:0}.mobile-tab-bar{display:none}.desktop-nav{display:flex}.mobile-only{display:none}.desktop-only{display:flex}.char-sprite{height:95%!important;bottom:0!important;z-index:5!important;transform:translate(-50%)!important}}.glass-panel{background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--shadow-main);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;overflow:hidden}.magic-cut{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.resource-box{background:linear-gradient(135deg,#4a218099,#1f0b3be6);border:1px solid var(--color-gold-dark);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 2px;gap:0px;position:relative;transition:all .3s ease}.resource-box:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid var(--color-gold-main);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);box-shadow:inset 0 0 15px var(--color-purple-glow);z-index:-1}.resource-box:hover{transform:translateY(-2px);filter:drop-shadow(0 0 10px var(--color-gold-glow))}.resource-box .value{font-family:var(--font-title);font-size:1.1rem;font-weight:700;color:var(--color-gold-light);text-shadow:0 0 5px var(--color-gold-glow)}.resource-box .label{font-size:.7rem;color:var(--color-text-muted)}.action-btn{background:linear-gradient(90deg,#1f0b3be6,#4a2180b3);border:1px solid var(--color-gold-main);color:var(--color-gold-light);padding:10px 16px;font-family:var(--font-title);font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #00000080}.action-btn{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.action-btn:hover{background:linear-gradient(90deg,#4a2180e6,#7a4bb8cc);box-shadow:0 0 15px var(--color-purple-glow),inset 0 0 10px var(--color-gold-glow);transform:translateY(-2px)}.action-btn:active{transform:scale(.95);transition:all .1s;box-shadow:0 2px 5px #000c}.action-btn:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);transition:all .5s ease;opacity:0}.action-btn:hover:after{opacity:1;transform:rotate(45deg) translate(50%,50%)}.nav-btn{background:transparent;border:none;color:var(--color-text-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:4px;font-size:.8rem;cursor:pointer;transition:all .3s ease}.nav-btn.active{color:var(--color-gold-main);text-shadow:0 0 10px var(--color-gold-glow)}.nav-btn.active svg{filter:drop-shadow(0 0 5px var(--color-gold-glow))}.status-bar-container{background:#0009;border:1px solid var(--panel-border);border-radius:4px;height:10px;width:100%;position:relative;box-shadow:inset 0 0 5px #000}.status-bar-fill{height:100%;transition:width .3s ease;box-shadow:0 0 10px currentColor}.particles-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:2;overflow:hidden}.particle{position:absolute;background:#fff;border-radius:50%;box-shadow:0 0 10px 2px var(--color-gold-glow);animation:float-up 10s linear infinite;opacity:0}@keyframes float-up{0%{transform:translateY(100vh) scale(0);opacity:0}20%{opacity:.8}80%{opacity:.8}to{transform:translateY(-100px) scale(1);opacity:0}}@keyframes breath{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.02,1.01) translateY(-2px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.sprite-breathe{animation:breath 4s ease-in-out infinite,float 6s ease-in-out infinite;transform-origin:bottom center}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}.screen-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.env-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:2;transition:opacity 1.5s ease-in-out;opacity:0}.env-overlay.active{opacity:1}.env-mage{background:radial-gradient(circle at 50% 30%,rgba(182,140,242,.3) 0%,transparent 60%)}.env-elf{background:radial-gradient(circle at top,rgba(168,255,168,.2) 0%,rgba(0,255,100,.05) 50%,transparent 100%)}.env-demon{background:radial-gradient(circle,transparent 40%,rgba(50,0,0,.8) 100%);mix-blend-mode:multiply}.env-knight{background:linear-gradient(180deg,rgba(255,215,0,.1) 0%,transparent 50%)}@keyframes heartbeatFlash{0%,to{opacity:0;box-shadow:inset 0 0 #f000}15%{opacity:.8;box-shadow:inset 0 0 100px #f00c}30%{opacity:.2;box-shadow:inset 0 0 50px #ff00004d}45%{opacity:.8;box-shadow:inset 0 0 100px #f00c}}.danger-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;animation:heartbeatFlash 1.5s ease-in-out infinite}.holo-card-wrapper{perspective:1000px;width:100%;height:100%}.holo-card-inner{width:100%;height:100%;position:relative;transition:transform .1s ease-out;transform-style:preserve-3d;border-radius:inherit}.holo-foil{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.8) 30%,rgba(255,215,0,.5) 40%,rgba(255,100,255,.4) 50%,transparent 60%);mix-blend-mode:color-dodge;opacity:0;transition:opacity .3s;pointer-events:none;z-index:10;border-radius:inherit}.holo-card-wrapper:hover .holo-foil{opacity:1}@keyframes jump-bounce{0%,to{transform:translateY(0) scale(1)}30%{transform:translateY(-20px) scale(.95,1.05)}60%{transform:translateY(5px) scale(1.05,.95)}}.sprite-jump{animation:jump-bounce .4s cubic-bezier(.28,.84,.42,1) forwards}@keyframes pop-text{0%{transform:translate(-50%,10px) scale(.8);opacity:0}20%{transform:translate(-50%,-10px) scale(1.1);opacity:1}80%{transform:translate(-50%,-15px) scale(1);opacity:1}to{transform:translate(-50%,-20px) scale(.9);opacity:0}}.touch-dialogue{position:absolute;top:10%;left:50%;transform:translate(-50%);background:#ffffffe6;color:#333;padding:8px 16px;border-radius:16px;font-weight:700;pointer-events:none;z-index:100;white-space:nowrap;animation:pop-text 2s ease-out forwards;box-shadow:0 4px 15px #0000004d}.touch-dialogue:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0;border-style:solid;border-color:rgba(255,255,255,.9) transparent transparent transparent}@keyframes heart-burst{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(1.5);opacity:0}}.touch-particle{position:absolute;pointer-events:none;z-index:101;animation:heart-burst .8s ease-out forwards}@keyframes float-text{0%{transform:translate(-50%) scale(1);opacity:1;filter:drop-shadow(0 0 10px currentColor)}to{transform:translate(-50%,-60px) scale(1.2);opacity:0;filter:drop-shadow(0 0 20px currentColor)}}.floating-text-particle{position:fixed;font-family:var(--font-title);font-weight:700;font-size:1.2rem;pointer-events:none;z-index:9999;animation:float-text 1.2s cubic-bezier(.25,1,.5,1) forwards}@keyframes spin-magic{0%{transform:translate(-50%,-50%) rotate(0) scale(.8);opacity:0}20%{transform:translate(-50%,-50%) rotate(72deg) scale(1.2);opacity:1}to{transform:translate(-50%,-50%) rotate(360deg) scale(1.5);opacity:0}}.gacha-magic-circle{position:absolute;top:50%;left:50%;width:300px;height:300px;border-radius:50%;border:4px dashed var(--color-gold-main);box-shadow:0 0 50px var(--color-gold-main),inset 0 0 50px var(--color-gold-glow);pointer-events:none;z-index:99;animation:spin-magic 3s ease-out forwards}@keyframes card-flip-enter{0%{transform:perspective(1000px) rotateY(180deg) scale(.5);opacity:0;filter:brightness(5)}50%{transform:perspective(1000px) rotateY(90deg) scale(1.2);opacity:1;filter:brightness(2)}to{transform:perspective(1000px) rotateY(0) scale(1);filter:brightness(1)}}.gacha-card-enter{animation:card-flip-enter 1s cubic-bezier(.175,.885,.32,1.275) forwards}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffd70080}@keyframes oath-flash{0%{background:transparent;opacity:0}10%{background:#fff;opacity:1}to{background:#fff;opacity:0}}.oath-flash-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;animation:oath-flash 2s cubic-bezier(.19,1,.22,1) forwards}@keyframes diamond-spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.diamond-border{position:relative}.diamond-border:before{content:"";position:absolute;top:50%;left:50%;width:150%;height:150%;background:conic-gradient(transparent,transparent,transparent,#fff,var(--color-gold-glow));animation:diamond-spin 4s linear infinite;z-index:0}.diamond-border:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;background:#000;border-radius:inherit;z-index:1}.diamond-border img{position:relative;z-index:2}@keyframes fall{0%{transform:translateY(-20px);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(100vh);opacity:0}}@keyframes drift{0%{transform:translateY(-20px) rotate(0);opacity:0}10%{opacity:.8}90%{opacity:.8}to{transform:translate(100px,100vh) rotate(360deg);opacity:0}}.weather-container{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;overflow:hidden}.rain-drop{position:absolute;width:2px;height:30px;background:linear-gradient(transparent,#fff6);animation:fall linear infinite}.snow-flake{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;animation:drift linear infinite}.ember-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d,0 0 20px red;animation:drift linear infinite;animation-direction:reverse}.blood-moon-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,#ff00001a,#32000099);pointer-events:none;z-index:2;mix-blend-mode:overlay}.true-ending-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:10000;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:15vh;overflow:hidden}.true-ending-cg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;opacity:.4;animation:pulse-glow 8s infinite alternate}.typewriter-text{position:relative;z-index:10001;color:#fff;font-size:1.2rem;line-height:2;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,1);max-width:80%;white-space:pre-wrap}.true-ending-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;color:var(--color-gold-main);text-shadow:0 0 20px var(--color-gold-glow);letter-spacing:10px;z-index:10002;opacity:0;animation:fade-in 4s ease-in forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.title-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,#1a0b2e,#000);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:20000;cursor:pointer}@keyframes title-breathe{0%{text-shadow:0 0 10px var(--color-gold-glow),0 0 20px var(--color-purple-main);transform:scale(1)}to{text-shadow:0 0 30px var(--color-gold-main),0 0 50px var(--color-purple-light);transform:scale(1.02)}}.title-text{font-size:4rem;color:#fff;letter-spacing:8px;animation:title-breathe 4s infinite alternate ease-in-out;margin-bottom:2rem;text-align:center}@keyframes blink-slow{0%,to{opacity:.3}50%{opacity:1}}.title-hint{font-size:1.2rem;color:var(--color-text-muted);letter-spacing:4px;animation:blink-slow 2s infinite}.audio-visualizer-container{position:fixed;bottom:0;left:0;right:0;height:40px;display:flex;justify-content:center;align-items:flex-end;gap:2px;pointer-events:none;z-index:1000;padding:0 20px;opacity:.5}.visualizer-bar{flex:1;max-width:10px;background:var(--color-gold-glow);box-shadow:0 0 10px var(--color-gold-main);border-radius:4px 4px 0 0;transition:height .05s ease}