@import"https://fonts.googleapis.com/css2?family=Zen+Antique+Soft&family=Inter:wght@400;700&family=Playfair+Display:wght@700;900&family=Share+Tech+Mono&display=swap";:root{--color-gold: #C5A059;--color-gold-light: #E5C079;--color-gold-dark: #8A6E30;--color-navy: #1A233A;--color-navy-dark: #0F1422;--color-parchment: #F0E6D2;--color-parchment-dark: #D0C6B2;--color-stone: #4A4A4A;--color-stone-light: #6A6A6A;--color-stone-dark: #2A2A2A;--color-danger: #8B0000;--color-success: #228B22;--color-magic-blue: #00f2ff;--color-magic-purple: #bc13fe;--color-magic-gold: #ffd700;--color-magic-red: #ff3131;--brass-bright: #f0c05a;--brass-light: #b88a44;--brass-mid: #8a6534;--brass-dark: #5c4220;--brass-deep: #3d2b15;--num-body: #e8e8e8;--num-stroke: #1a0f05;--cyber-cyan: #00ffff;--cyber-cyan-glow: rgba(0, 255, 255, .7);--fixed-filament: #ff9900;--emergency-red: #cc2222;--font-serif: "Zen Antique Soft", serif;--font-ui: "Inter", sans-serif;--font-steampunk-main: "Playfair Display", serif;--font-system: "Share Tech Mono", "Courier New", monospace;--glass-bg: rgba(15, 20, 34, .7);--glass-border: rgba(255, 255, 255, .1);--card-width: 240px;--card-glass-height: min(180px, 35vh);--card-glow-height: min(184px, calc(35vh + 4px) );--card-num-size: min(2.2rem, 8vh);--card-title-size: min(.9rem, 3.5vh);--card-padding: 10px 18px;--card-stats-label-size: .55rem;--card-stats-value-size: .85rem;--card-btn-padding: 5px 12px;--card-btn-font-size: .65rem;--card-btn-min-width: 60px}@media(min-width:1024px){:root{--card-width: 280px;--card-glass-height: min(320px, 45vh);--card-glow-height: min(324px, calc(45vh + 4px) );--card-num-size: min(3.5rem, 10vh);--card-title-size: min(1.2rem, 4vh);--card-padding: 20px 24px;--card-stats-label-size: .75rem;--card-stats-value-size: 1.1rem;--card-btn-padding: 8px 16px;--card-btn-font-size: .8rem;--card-btn-min-width: 80px}}body{margin:0;background-color:var(--color-navy-dark);font-family:var(--font-ui);color:var(--color-parchment);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:100vw;height:100vh;padding:0}.safe-area-container{width:100%;height:100%;box-sizing:border-box}.safe-ui-content{padding-left:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));padding-right:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif)}button{font-family:var(--font-ui)}.texture-stone{background:var(--color-stone);border:4px solid var(--color-stone-dark);border-top-color:var(--color-stone-light);border-left-color:var(--color-stone-light);box-shadow:inset 0 0 20px #000}.texture-parchment{background:var(--color-parchment);color:var(--color-navy-dark);background-image:radial-gradient(circle,transparent 20%,#d0c6b2 100%)}.texture-metal{background:linear-gradient(135deg,#444,#888,#444);border:2px solid var(--color-gold)}.text-gold-shadow{text-shadow:1px 1px 0px #000,0 0 10px var(--color-gold)}.glass{background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-border);box-shadow:0 8px 32px #0000005e}.neon-border-blue{border:1px solid var(--color-magic-blue);box-shadow:0 0 10px var(--color-magic-blue),inset 0 0 5px var(--color-magic-blue)}.neon-border-gold{border:1px solid var(--color-gold);box-shadow:0 0 15px var(--color-gold),inset 0 0 5px var(--color-gold)}.glow-text-blue{color:var(--color-magic-blue);text-shadow:0 0 5px var(--color-magic-blue),0 0 10px var(--color-magic-blue)}@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)}}.btn-press{transition:transform .1s,box-shadow .1s,background-color .1s}.btn-press:active{transform:translateY(2px) scale(.98);box-shadow:0 1px #00000080!important;filter:brightness(1.2)}.animate-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes flash{0%{filter:brightness(1)}20%{filter:brightness(3) white}40%{filter:brightness(1)}60%{filter:brightness(3) white}to{filter:brightness(1)}}.animate-flash{animation:flash .3s ease-out}@keyframes fade-up-out{0%{transform:translate(-50%) scale(.5);opacity:0}20%{transform:translate(-50%,-20px) scale(1.5);opacity:1}40%{transform:translate(-50%,-25px) scale(1);opacity:1;text-shadow:0 0 20px currentColor}to{transform:translate(-50%,-60px) scale(1);opacity:0}}.animate-fade-up-out{animation:fade-up-out 1.6s forwards ease-out}@keyframes page-enter{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.page-transition{animation:page-enter .4s cubic-bezier(.16,1,.3,1) forwards}@keyframes pulse-red{0%{box-shadow:0 0 5px #f003;border-color:#f006}50%{box-shadow:0 0 15px #f009;border-color:#f00c}to{box-shadow:0 0 5px #f003;border-color:#f006}}.pulse-red{animation:pulse-red 2s infinite ease-in-out}.btn-remove-themed{background:#8b0000cc;border:1px solid var(--color-gold);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .2s;box-shadow:0 0 5px #00000080}.btn-remove-themed:hover{background:#ff0000e6;transform:scale(1.1)}.animate-float{animation:float 4s ease-in-out infinite}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.magic-panel{background:linear-gradient(165deg,#0f1422f2,#050a14fa);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #00000080,inset 0 1px 1px #ffffff1a;position:relative;overflow:visible!important}.rivet{position:absolute;width:10px;height:10px;background:radial-gradient(circle at 35% 35%,var(--brass-light),var(--brass-deep));border-radius:50%;box-shadow:1px 1px 2px #0009,inset -.5px -.5px 1px #00000080;z-index:5;pointer-events:none}.rivet:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:6px;height:1px;background:#00000080;box-shadow:0 .5px #ffffff1a}.magic-frame:before,.magic-frame:after{content:"";position:absolute;width:40px;height:40px;pointer-events:none;z-index:10;border:2px solid var(--brass-light);opacity:.8}.magic-frame:before{top:-4px;left:-4px;border-right:none;border-bottom:none;border-radius:4px 0 0}.magic-frame:after{bottom:-4px;right:-4px;border-left:none;border-top:none;border-radius:0 0 4px}.magic-frame-inner:before,.magic-frame-inner:after{content:"";position:absolute;width:40px;height:40px;pointer-events:none;z-index:10;border:2px solid var(--brass-light);opacity:.8}.magic-frame-inner:before{top:-4px;right:-4px;border-left:none;border-bottom:none;border-radius:0 4px 0 0}.magic-frame-inner:after{bottom:-4px;left:-4px;border-right:none;border-top:none;border-radius:0 0 0 4px}.bg-vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,transparent 40%,rgba(0,0,0,.8) 100%);pointer-events:none;z-index:1}@keyframes ambient-float{0%{transform:translateY(0) translate(0);opacity:0}20%{opacity:.6}80%{opacity:.6}to{transform:translateY(-100vh) translate(50px);opacity:0}}.ambient-particle{position:absolute;background:var(--color-magic-gold);border-radius:50%;pointer-events:none;filter:blur(2px);opacity:0;z-index:1}.vignette-overlay{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 0 150px #000000e6;pointer-events:none;z-index:2}.magic-border-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid transparent;animation:border-glow 4s infinite alternate}@keyframes border-glow{0%{border-color:#c5a0591a;box-shadow:0 0 5px #c5a0590d}to{border-color:#c5a05966;box-shadow:0 0 20px #c5a05933}}.btn-magic{background:linear-gradient(135deg,#c5a059e6,#8a6e30e6);color:#000;border:1px solid var(--color-gold-light);border-radius:4px;padding:10px 20px;font-family:var(--font-serif);font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px #0006,inset 0 0 10px #ffffff4d;text-shadow:0 1px 0 rgba(255,255,255,.4);position:relative;overflow:hidden}.btn-magic:hover{transform:translateY(-2px);box-shadow:0 6px 20px #c5a05966,inset 0 0 15px #ffffff80;filter:brightness(1.1)}.btn-magic:active{transform:translateY(1px);box-shadow:0 2px 10px #00000080}.btn-magic:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 70%);transform:scale(0);transition:transform .5s;pointer-events:none}.btn-magic:hover:after{transform:scale(1)}.avatar-frame{position:relative;display:inline-block;padding:4px;background:linear-gradient(135deg,var(--color-gold) 0%,var(--color-gold-dark) 100%);border-radius:50%;box-shadow:0 0 20px #c5a05980}.avatar-frame img{border:2px solid #fff;display:block}.avatar-frame:before{content:"";position:absolute;inset:-10px;border:1px solid var(--color-gold);border-radius:50%;opacity:.3;animation:rotate 10s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-tooltip]{position:relative;cursor:help}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:140%;left:50%;transform:translate(-50%) translateY(5px);padding:8px 12px;background:#0f172afa;color:var(--color-gold-light);border:1px solid var(--color-gold);border-radius:8px;font-size:.75rem;line-height:1.4;white-space:normal;width:max-content;max-width:250px;opacity:0;visibility:hidden;transition:all .2s cubic-bezier(.175,.885,.32,1.275);z-index:9999;box-shadow:0 10px 25px #0009,inset 0 0 10px #c5a0591a;pointer-events:none;font-family:var(--font-ui);text-shadow:none;font-weight:400}[data-tooltip]:after{content:"";position:absolute;bottom:140%;top:auto;left:50%;margin-bottom:-10px;transform:translate(-50%) translateY(5px);border-width:6px;border-style:solid;border-color:var(--color-gold) transparent transparent transparent;opacity:0;visibility:hidden;transition:all .2s cubic-bezier(.175,.885,.32,1.275);z-index:9999;pointer-events:none}[data-tooltip]:hover:before,[data-tooltip]:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}@media(hover:none){[data-tooltip]:active:before,[data-tooltip]:active:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}}[data-tooltip].tooltip-bottom:before{top:140%;bottom:auto;transform:translate(-50%) translateY(-5px)}[data-tooltip].tooltip-bottom:after{top:140%;bottom:auto;margin-top:-10px;margin-bottom:0;transform:translate(-50%) translateY(-5px);border-color:transparent transparent var(--color-gold) transparent}[data-tooltip].tooltip-bottom:hover:before,[data-tooltip].tooltip-bottom:hover:after{transform:translate(-50%) translateY(0)}@media(hover:none){[data-tooltip].tooltip-bottom:active:before,[data-tooltip].tooltip-bottom:active:after{transform:translate(-50%) translateY(0)}}.magic-panel{overflow:visible!important}@keyframes portrait-success-glow{0%{box-shadow:0 0 0 var(--color-magic-blue);filter:brightness(1)}50%{box-shadow:0 0 25px var(--color-magic-blue),inset 0 0 15px var(--color-magic-blue);filter:brightness(1.5)}to{box-shadow:0 0 0 var(--color-magic-blue);filter:brightness(1)}}@keyframes portrait-pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes portrait-shake{0%{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}@keyframes portrait-failure-flash{0%{box-shadow:0 0 0 var(--color-magic-red);filter:grayscale(0)}20%{box-shadow:0 0 30px var(--color-magic-red),inset 0 0 20px var(--color-magic-red);background:#ff00004d}to{box-shadow:0 0 0 var(--color-magic-red);filter:grayscale(.2) brightness(.7)}}@keyframes damage-float-up{0%{opacity:0;transform:translateY(0)}20%{opacity:1;transform:translateY(-20px)}80%{opacity:1;transform:translateY(-30px)}to{opacity:0;transform:translateY(-40px)}}@keyframes screen-red-flash{0%{box-shadow:inset 0 0 #f000}20%{box-shadow:inset 0 0 100px #f006}to{box-shadow:inset 0 0 #f000}}.portrait-success{animation:portrait-success-glow .6s ease-out,portrait-pop .4s cubic-bezier(.175,.885,.32,1.275)}.portrait-failure{animation:portrait-failure-flash .8s ease-out forwards,portrait-shake .4s ease-in-out}.screen-flash-red{animation:screen-red-flash .5s ease-out;pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.damage-popup{position:absolute;font-weight:900;font-family:var(--font-ui);pointer-events:none;z-index:2000;text-shadow:0 2px 4px rgba(0,0,0,.8);animation:damage-float-up 1.2s ease-out forwards}.number-style-sp{font-family:var(--font-system);font-weight:900;color:var(--num-body);text-shadow:2px 2px 0 var(--num-stroke),-2px -2px 0 var(--num-stroke),2px -2px 0 var(--num-stroke),-2px 2px 0 var(--num-stroke),0px 2px 0 var(--num-stroke),0px -2px 0 var(--num-stroke),2px 0px 0 var(--num-stroke),-2px 0px 0 var(--num-stroke),3px 3px 5px rgba(0,0,0,.8)}.val-player-sp{color:#fff}.val-fixed-sp{color:#d0c0b0}.effect-slash{position:absolute;top:50%;left:50%;width:120px;height:120px;margin-top:-60px;margin-left:-60px;background-image:url(/assets/img/effect/pipo-btleffect084.png);background-size:1080px 120px;animation:play-slash .4s steps(9) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(2)}.effect-warrior{position:absolute;top:50%;left:50%;width:120px;height:120px;margin-top:-60px;margin-left:-60px;background-image:url(/assets/img/effect/warrior_atk.png);background-size:1080px 120px;animation:play-slash .4s steps(9) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(2)}.effect-fire{position:absolute;top:50%;left:50%;width:256px;height:358px;margin-top:-179px;margin-left:-128px;background-image:url(/assets/img/effect/magic_fire.png);background-size:1536px 358px;animation:play-fire .6s steps(6) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(1.5)}@keyframes play-fire{0%{background-position:0 0}to{background-position:-1536px 0}}.effect-btl190{position:absolute;top:50%;left:50%;width:640px;height:480px;margin-top:-240px;margin-left:-320px;background-image:url(/assets/img/effect/pipo-btleffect190_640.png);background-size:1280px 2400px;animation:play-btl190 .8s steps(10) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(.8)}@keyframes play-btl190{0%{background-position:0 0}to{background-position:0 -2400px}}.effect-sniper{position:absolute;top:50%;left:50%;width:240px;height:240px;margin-top:-120px;margin-left:-120px;background-image:url(/assets/img/effect/sniper_atk.png);background-size:2160px 240px;animation:play-sniper .4s steps(9) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(1.2)}@keyframes play-sniper{0%{background-position:0 0}to{background-position:-2160px 0}}.effect-monk{position:absolute;top:50%;left:50%;width:240px;height:240px;margin-top:-120px;margin-left:-120px;background-image:url(/assets/img/effect/monk_atk.png);background-size:1200px 720px;animation:play-monk-x .15s steps(5) infinite,play-monk-y .45s steps(3) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(1.5)}@keyframes play-monk-x{0%{background-position-x:0}to{background-position-x:-1200px}}@keyframes play-monk-y{0%{background-position-y:0}to{background-position-y:-720px}}.effect-paladin{position:absolute;top:50%;left:50%;width:240px;height:240px;margin-top:-120px;margin-left:-120px;background-image:url(/assets/img/effect/paladin_atk.png);background-size:2160px 240px;animation:play-paladin .4s steps(9) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(1.5)}.effect-assassin{position:absolute;top:50%;left:50%;width:240px;height:240px;margin-top:-120px;margin-left:-120px;background-image:url(/assets/img/effect/assassin_atk.png);background-size:1200px 240px;animation:play-assassin .3s steps(5) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(1.5)}.effect-strategist{position:absolute;top:50%;left:50%;width:240px;height:240px;margin-top:-120px;margin-left:-120px;background-image:url(/assets/img/effect/strategist_atk.png);background-size:1920px 240px;animation:play-strategist .5s steps(8) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(1.5)}.effect-bard{position:absolute;top:50%;left:50%;width:320px;height:120px;margin-top:-60px;margin-left:-160px;background-image:url(/assets/img/effect/bard_atk.png);background-size:320px 1800px;animation:play-bard-vertical .75s steps(14) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(2)}.effect-healer{position:absolute;top:50%;left:50%;width:240px;height:240px;margin-top:-120px;margin-left:-120px;background-image:url(/assets/img/effect/healer_atk.png);background-size:1920px 240px;animation:play-healer-new .4s steps(7) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(1.5)}.effect-mage-dark{position:absolute;top:50%;left:50%;width:120px;height:120px;margin-top:-60px;margin-left:-60px;background-image:url(/assets/img/effect/mage_dark.png);background-size:960px 120px;background-repeat:no-repeat;animation:play-mage-dark .5s steps(8) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(3)}.effect-mage-wind{position:absolute;top:50%;left:50%;width:320px;height:120px;margin-top:-60px;margin-left:-160px;background-image:url(/assets/img/effect/mage_wind.png);background-size:320px 960px;background-repeat:no-repeat;animation:play-mage-wind .5s steps(8) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(1.5)}.effect-mage-earth{position:absolute;top:50%;left:50%;width:120px;height:120px;margin-top:-60px;margin-left:-60px;background-image:url(/assets/img/effect/mage_earth.png);background-size:960px 120px;background-repeat:no-repeat;animation:play-mage-earth .5s steps(8) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(3)}.effect-mage-light{position:absolute;top:50%;left:50%;width:120px;height:120px;margin-top:-60px;margin-left:-60px;background-image:url(/assets/img/effect/mage_light.png);background-size:1680px 120px;background-repeat:no-repeat;animation:play-mage-light .6s steps(14) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(3)}.effect-mage-water{position:absolute;top:50%;left:50%;width:120px;height:120px;margin-top:-60px;margin-left:-60px;background-image:url(/assets/img/effect/mage_water.png);background-size:960px 120px;background-repeat:no-repeat;animation:play-mage-water .5s steps(8) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(3)}@keyframes play-mage-water{0%{background-position:0 0}to{background-position:-960px 0}}.effect-mage-fire{position:absolute;top:50%;left:50%;width:120px;height:120px;margin-top:-120px;margin-left:-60px;background-image:url(/assets/img/effect/mage_fire.png);background-size:960px 120px;background-repeat:no-repeat;animation:play-mage-fire .5s steps(8) forwards;pointer-events:none;z-index:50;mix-blend-mode:screen;transform:scale(3)}@keyframes play-mage-fire{0%{background-position:0 0}to{background-position:-960px 0}}@keyframes play-mage-dark{0%{background-position:0 0}to{background-position:-960px 0}}@keyframes play-mage-wind{0%{background-position:0 0}to{background-position:0 -960px}}@keyframes play-mage-earth{0%{background-position:0 0}to{background-position:-960px 0}}@keyframes play-mage-light{0%{background-position:0 0}to{background-position:-1680px 0}}@keyframes play-healer-new{0%{background-position:0 0}to{background-position:-1680px 0}}@keyframes play-bard-vertical{0%{background-position:0 0}to{background-position:0 -1680px}}@keyframes play-strategist{0%{background-position:0 0}to{background-position:-1920px 0}}@keyframes play-assassin{0%{background-position:0 0}to{background-position:-1200px 0}}@keyframes play-paladin{0%{background-position:0 0}to{background-position:-2160px 0}}@keyframes play-slash{0%{background-position:0 0}to{background-position:-1080px 0}}