@import"https://fonts.googleapis.com/css2?family=Jua&family=Russo+One&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{font-family:Jua,system-ui,sans-serif;min-height:100vh}.phone{position:relative;width:100%;min-height:100vh;min-height:100dvh;isolation:isolate}.phone-content{position:relative;width:100%;z-index:10;padding:calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:14px;animation:viewFade .3s ease-out}.phone:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,transparent 30%,transparent 70%,rgba(15,40,75,.15) 100%);z-index:5}.phone-content::-webkit-scrollbar{width:0}@keyframes viewFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.aurora-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,var(--sky-top, #7ec8e8) 0%,var(--sky-mid, #b3def0) 50%,var(--sky-bottom, #e8f5fc) 100%)}.aurora-blob{position:absolute;border-radius:50%;filter:blur(30px);animation:drift 14s ease-in-out infinite;will-change:transform}.aurora-1{width:380px;height:220px;top:-60px;left:-60px;background:radial-gradient(ellipse at center,var(--aurora-1, rgba(255, 240, 180, .7)),transparent 70%)}.aurora-2{width:320px;height:200px;top:60px;right:-80px;animation-delay:-5s;background:radial-gradient(ellipse at center,var(--aurora-2, rgba(255, 200, 220, .55)),transparent 70%)}.aurora-3{width:460px;height:240px;top:30%;left:-100px;animation-delay:-9s;background:radial-gradient(ellipse at center,var(--aurora-3, rgba(180, 230, 255, .65)),transparent 70%)}@keyframes drift{0%,to{transform:translate(0);opacity:.7}50%{transform:translate(20px,10px);opacity:.9}}.mountains{position:absolute;bottom:0;left:0;right:0;height:60%;pointer-events:none;z-index:1}.mountains svg{width:100%;height:100%;display:block}.sun{position:absolute;top:60px;right:40px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,248,210,.9) 0%,rgba(255,230,150,.5) 30%,transparent 70%);z-index:0;pointer-events:none}.bg-star{position:absolute;animation:snowfall linear infinite;pointer-events:none;filter:drop-shadow(0 0 3px rgba(200,240,255,.9))}@keyframes snowfall{0%{transform:translateY(-30px) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(900px) rotate(360deg);opacity:0}}.icicles{position:absolute;top:0;left:0;right:0;height:30px;pointer-events:none;z-index:5}.icicle{position:absolute;top:0;width:12px;background:linear-gradient(180deg,var(--mt-1, #dcf0ff) 0%,var(--mt-2, #b4dcf5) 50%,var(--mt-3, #8cbee6) 90%,transparent 100%);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 2px rgba(80,130,180,.3));opacity:.92}.icicle:before{content:"";position:absolute;top:1px;left:35%;width:2px;height:50%;background:#ffffffd9;clip-path:polygon(0 0,100% 0,50% 100%)}.frost-corner{position:absolute;pointer-events:none;opacity:.55}.phone-bg-slot{position:absolute!important;top:0;right:0;bottom:0;left:0;display:block;z-index:4;pointer-events:auto;--isl-empty-bg: transparent}.phone-bg-slot::part(frame){border-radius:0;background:transparent}.phone-bg-slot[data-filled]~.sun,.phone-bg-slot[data-filled]~.aurora-blob,.phone-bg-slot[data-filled]~.mountains,.phone-bg-slot[data-filled]~.bg-star,.phone[data-bg-filled=true] .aurora-bg:before{display:none}.phone-bg-slot::part(empty){background:#ffffff26;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#2a5a8c;font-size:12px;border:2px dashed rgba(95,184,232,.55);border-radius:0}.topbar{display:flex;align-items:center;gap:10px;margin:-24px -18px 4px;padding:22px 56px 10px 18px;position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#d8efffeb,#d8efff00);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.profile-chip{flex:1;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;background:linear-gradient(180deg,#ffffffe6,#dceefcd9);border:2px solid #5fb8e8;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px #2a5a8c40,inset 0 1px #fff9;color:#1a3e6e}.profile-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#d8efff,#7ec3e8);display:flex;align-items:center;justify-content:center;border:2px solid #5fb8e8;overflow:hidden}.profile-info{flex:1;min-width:0}.profile-name{font-size:14px;line-height:1;margin-bottom:4px;color:#1a3e6e}.profile-lvl{display:flex;align-items:center;gap:6px}.lvl-badge{font-family:Russo One,sans-serif;font-size:10px;letter-spacing:1px;background:#ffd84d;color:#5a3a00;padding:2px 6px;border-radius:4px}.lvl-bar{flex:1;height:5px;background:#2a5a8c33;border-radius:3px;overflow:hidden}.lvl-fill{height:100%;background:linear-gradient(90deg,#5fb8e8,#2a85b5);border-radius:3px;box-shadow:0 0 6px #5fb8e8cc}.back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#ffffffe6;border:2px solid #5fb8e8;border-radius:999px;color:#1a3e6e;cursor:pointer;font-family:Jua,sans-serif;font-size:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 3px #2a5a8c40}.currencies{display:flex;gap:6px}.cur{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;background:#ffffffe6;border:2px solid;font-family:Russo One,sans-serif;font-size:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 3px #2a5a8c40}.cur-coin{border-color:#ffaa1a;color:#a06000}.mute-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:50%;background:#ffffffe6;border:2px solid #7eb6d8;color:#2a5a8c;cursor:pointer;box-shadow:0 3px #2a5a8c40;transition:transform .08s,box-shadow .08s}.mute-btn:active{transform:translateY(2px);box-shadow:0 1px #2a5a8c40}.hero-section{position:relative;margin-top:4px;padding:16px;height:200px;border-radius:24px;border:3px solid #ffffff;background:radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.7),transparent 60%),linear-gradient(160deg,#ffffffa6,#c8e8fa8c);box-shadow:0 0 0 3px #7ec3e8,0 8px 24px #2a5a8c40,inset 0 2px #ffffffb3;display:flex;align-items:center;gap:16px;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hero-bg-orb{position:absolute;width:320px;height:320px;border-radius:50%;top:-160px;right:-120px;background:radial-gradient(circle,rgba(124,200,255,.16),transparent 70%);pointer-events:none}.hero-char{position:relative;width:116px;height:138px;display:flex;align-items:flex-end;justify-content:center;animation:bob 2.4s ease-in-out infinite;flex-shrink:0}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.hero-glow{display:none}.hero-pedestal{position:absolute;bottom:0;width:86px;height:12px;background:radial-gradient(ellipse at center,rgba(124,224,255,.5),transparent 70%);border-radius:50%}.hero-dressup-btn{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;cursor:pointer;background:#ffffffeb;border:2px solid #7ec3e8;color:#1a3e6e;font-family:Jua,sans-serif;font-size:13px;box-shadow:0 3px #2a5a8c40}.hero-greeting{flex:1;position:relative;z-index:2}.hero-game-title{display:flex;align-items:center;justify-content:center;gap:8px;font-family:Russo One,sans-serif;font-size:10px;letter-spacing:2.5px;color:#2a5a8c;margin-bottom:3px;text-shadow:0 1px 0 rgba(255,255,255,.6)}.hero-greet-1{font-size:20px;line-height:1.1;margin-bottom:3px}.hero-nick{color:#2a85b5;text-shadow:0 2px 0 rgba(255,255,255,.9)}.hero-nim{color:#1a3e6e;text-shadow:0 2px 0 rgba(255,255,255,.7)}.hero-greet-2{font-size:16px;color:#1a3e6e;margin-bottom:8px;text-shadow:0 2px 0 rgba(255,255,255,.7)}.hero-streak{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#ff9a3a2e;border:1.5px solid rgba(255,154,58,.7);font-size:12px;color:#c46f1a}.hero-streak b{color:#ff7a1a}.hero-streak-chip{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 10px;border-radius:999px;background:#ff9a3a2e;border:1.5px solid rgba(255,154,58,.5);color:#d96820;font-weight:700;font-size:12px;width:fit-content}.hero-collection-chip{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#3884de29;border:1.5px solid rgba(56,132,222,.45);color:#1e5aa3;font-weight:700;font-size:12px;font-family:Jua,sans-serif;width:fit-content;cursor:pointer;transition:transform .08s ease,background .12s ease}.hero-collection-chip:hover{background:#3884de3d}.hero-collection-chip:active{transform:scale(.96)}.hero-collection-chip .dot{color:#1e5aa380}.mode-trio{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}.mode-trio-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:3px solid #ffffff;border-radius:16px;background:#ffffff8c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 3px #7fa7d799,0 4px #2a5a8c2e,inset 0 2px #fff9;cursor:pointer;transition:transform .08s,box-shadow .08s}.mode-trio-card:active{transform:translateY(2px);box-shadow:0 0 0 3px #7ec3e8,0 1px #2a5a8c2e}.mode-trio-card.boss{box-shadow:0 0 0 3px #e88aa0,0 4px #78283c38,inset 0 2px #fff9}.mode-trio-card.ranked{box-shadow:0 0 0 3px #b389d8,0 4px #3c1e6438,inset 0 2px #fff9}.mode-trio-card.run{box-shadow:0 0 0 3px #7ec8a8,0 4px #28645038,inset 0 2px #fff9}.mode-trio-title{font-family:Russo One,sans-serif;font-size:14px;color:#1a3e6e}.modes{display:flex;flex-direction:column;gap:10px}.mode-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:linear-gradient(160deg,#fffffff2,#dceefcd9);border:3px solid #ffffff;border-radius:18px;color:#1a3e6e;cursor:pointer;font-family:Jua,sans-serif;text-align:left;box-shadow:0 0 0 3px #7ec3e8,0 5px #2a5a8c33,inset 0 2px #fff9;transition:transform .12s,box-shadow .12s}.mode-card:active{transform:translateY(2px);box-shadow:0 0 0 3px #7ec3e8,0 2px #2a5a8c33}.mode-story{border-color:#fff;box-shadow:0 0 0 3px #5fb8e8,0 5px #2a5a8c33,inset 0 2px #fff9}.mode-ranked{border-color:#fff;box-shadow:0 0 0 3px #6fa8d8,0 5px #2a5a8c33,inset 0 2px #fff9}.mode-boss{border-color:#fff;box-shadow:0 0 0 3px #e88aa0,0 5px #78283c40,inset 0 2px #fff9}.mode-run{border-color:#fff;box-shadow:0 0 0 3px #7ec8a8,0 5px #28645040,inset 0 2px #fff9}.mode-dodge{border-color:#fff;box-shadow:0 0 0 3px #c084fc,0 5px #50286440,inset 0 2px #fff9}.mode-emoji-wrap{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:2px solid;flex-shrink:0;box-shadow:inset 0 2px #fff3}.mode-emoji-blue{background:linear-gradient(180deg,#7ec8f0,#3b78c4);border-color:#cef0ff}.mode-emoji-purple{background:linear-gradient(180deg,#4a98c8,#1f5a8a);border-color:#a8e0ff}.mode-emoji-red{background:linear-gradient(180deg,#ff7a8f,#e8344f);border-color:#ffc8d2}.mode-emoji-green{background:linear-gradient(180deg,#8ee0bc,#34b888);border-color:#c8f0dd}.mode-text{flex:1}.mode-title{font-size:19px;line-height:1;margin-bottom:5px;color:#1a3e6e}.mode-sub{font-size:12px;color:#4a7ba8}.mode-cta{font-family:Russo One,sans-serif;font-size:13px;letter-spacing:1.5px;padding:9px 16px;border-radius:12px;background:linear-gradient(180deg,#ffe066,#ffaa1a);color:#5a3a00;border:2px solid #c47a00;box-shadow:0 3px #8a5400,0 0 12px #ffe06680}.cta-purple{background:linear-gradient(180deg,#ff9ad2,#c454a0);color:#fff;border-color:#7a1a5e;box-shadow:0 3px #5a0e44,0 0 12px #ff9ad280}.cta-red{background:linear-gradient(180deg,#ff8a9e,#e8344f);color:#fff;border-color:#8a1020;box-shadow:0 3px #6a0c18,0 0 12px #ff8a9e80}.cta-green{background:linear-gradient(180deg,#8ee0bc,#34b888);color:#fff;border-color:#1a6e4e;box-shadow:0 3px #0e5238,0 0 12px #8ee0bc80}.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-mini{position:relative;padding:14px 12px;background:linear-gradient(160deg,#fffffff2,#dceefcd9);border:3px solid #ffffff;border-radius:18px;color:#1a3e6e;cursor:pointer;font-family:Jua,sans-serif;text-align:left;box-shadow:0 0 0 3px #7ec3e8,0 5px #2a5a8c33,inset 0 2px #fff9;transition:transform .12s,box-shadow .12s}.mode-mini:active{transform:translateY(2px);box-shadow:0 0 0 3px #7ec3e8,0 2px #2a5a8c33}.mini-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:2px solid;margin-bottom:8px;box-shadow:inset 0 2px #fff3}.mini-icon-gold{background:linear-gradient(180deg,#ffe066,#c47a00);border-color:#fff8c2}.mini-icon-pink{background:linear-gradient(180deg,#ff9ad2,#c454a0);border-color:#ffd0ec}.mini-icon-purple{background:linear-gradient(180deg,#c8a8f0,#8a5ee0);border-color:#e6d4ff}.mini-icon-green{background:linear-gradient(180deg,#b8e8c4,#4aa878);border-color:#d8f0dc}.mini-title{font-size:15px;line-height:1;margin-bottom:3px;color:#1a3e6e}.mini-sub{font-size:11px;color:#4a7ba8}.mini-dot{position:absolute;top:10px;right:10px;width:9px;height:9px;border-radius:50%;background:#f57;box-shadow:0 0 8px #f57;animation:dotPulse 1.5s ease-in-out infinite}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.news-strip{display:flex;align-items:center;gap:8px;margin-top:auto;padding:7px 12px;border-radius:999px;background:#ffffffa6;border:1px solid rgba(255,170,26,.6);font-size:12px;box-shadow:0 2px #2a5a8c1f}.news-tag{font-family:Russo One,sans-serif;font-size:9px;letter-spacing:1.2px;background:#ffaa1a;color:#5a3a00;padding:2px 6px;border-radius:5px}.news-text{color:#a06000;flex:1}.news-ico{flex-shrink:0;width:14px;height:14px}.view-title{position:relative;margin:4px 0 12px;padding:12px 44px 12px 18px;background:linear-gradient(135deg,#1a3e6e,#2a5a8c);border:3px solid #ffd84d;border-radius:16px;box-shadow:0 0 0 3px #c47a00,0 5px #0f1e3c73,0 0 18px #ffd84d52,inset 0 2px #ffffff26;overflow:hidden}.view-title:after{content:"★";position:absolute;top:50%;right:16px;transform:translateY(-50%);font-size:26px;color:#ffd84d;text-shadow:0 0 12px rgba(255,216,77,.7);line-height:1;pointer-events:none}.view-title-main{font-family:Jua,sans-serif;font-size:22px;color:#ffd84d;line-height:1;letter-spacing:.5px;text-shadow:0 1px 0 #0a1f3a,0 0 10px rgba(255,216,77,.35)}.view-title-sub{font-family:Jua,sans-serif;font-size:12px;color:#c4e6ff;margin-top:5px;letter-spacing:0}.chapter-hero{display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(160deg,#fffffff2,#dceefcd9);border:3px solid #ffffff;border-radius:18px;box-shadow:0 0 0 3px #5fb8e8,0 6px #2a5a8c33,0 0 24px #7cc8f066,inset 0 2px #fff9;color:#1a3e6e}.chapter-art{width:60px;height:48px;flex-shrink:0;background:radial-gradient(circle,rgba(124,200,240,.25),transparent 70%);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 4px rgba(42,90,140,.25))}.chapter-info{flex:1;min-width:0}.chapter-tag{font-family:Russo One,sans-serif;font-size:10px;letter-spacing:2.5px;color:#2a85b5;margin-bottom:3px}.chapter-name{font-size:18px;line-height:1;margin-bottom:5px;color:#1a3e6e;font-weight:700}.chapter-progress{display:flex;align-items:center;gap:6px;font-size:12px;color:#4a7ba8}.chapter-progress b{color:#c47a00;font-family:Russo One,sans-serif;font-size:14px}.chapter-bar{flex:1;height:6px;background:#2a5a8c26;border-radius:3px;overflow:hidden;border:1px solid rgba(95,184,232,.4)}.chapter-bar-fill{height:100%;background:linear-gradient(90deg,#5fb8e8,#ffd84d);border-radius:3px;box-shadow:0 0 6px #ffd84d99}.difficulty-toggle{display:flex;gap:4px;padding:4px;margin:4px 0 10px;background:linear-gradient(160deg,#fffffff2,#dceefcd9);border:3px solid #ffffff;border-radius:18px;box-shadow:0 0 0 2px #5fb8e8,0 4px #2a5a8c2e,0 0 18px #7cc8f059,inset 0 1px #fff9}.difficulty-btn{flex:1;padding:9px 0;border:none;border-radius:12px;font-family:Jua,sans-serif;font-size:15px;letter-spacing:0;color:#4a7ba8;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,color .15s,box-shadow .15s}.difficulty-btn>span:first-of-type{font-family:Jua,sans-serif}.difficulty-btn .difficulty-tag{font-family:Russo One,sans-serif}.difficulty-btn:not(.active):not(.locked):hover{background:#5fb8e81f}.difficulty-btn.active{color:#0f2843;box-shadow:inset 0 2px #ffffffb3,0 2px #2a5a8c2e}.difficulty-btn.normal.active{background:linear-gradient(180deg,#cfe8ff,#5fb8e8)}.difficulty-btn.hard.active{background:linear-gradient(180deg,#ffd6b3,#ff8a5e);color:#4a1a00}.difficulty-btn.locked{color:#4a7ba88c;cursor:default}.difficulty-btn .difficulty-tag{font-size:10px;letter-spacing:1.2px;padding:2px 6px;border-radius:6px;background:#4a7ba82e;color:#4a7ba8}.chapter-tabs{display:flex;gap:6px}.chapter-tab{flex:1;padding:8px 6px;background:#ffffffbf;border:2px solid rgba(95,184,232,.5);border-radius:12px;text-align:center;color:#4a7ba8;cursor:pointer}.chapter-tab.current{background:linear-gradient(180deg,#fff,#d8efff);border-color:#5fb8e8;color:#1a3e6e;box-shadow:0 0 0 2px #5fb8e8,0 3px #2a5a8c33}.chapter-tab.locked{opacity:.55}.chapter-tab.done{background:#ffe88a4d;border-color:#ffaa1a;color:#a06000}.chapter-tab-n{font-family:Russo One,sans-serif;font-size:11px;letter-spacing:1.5px}.chapter-tab-stars{font-size:11px;margin-top:2px;font-weight:700}.stage-decor{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.stage-char-preview{position:absolute;top:-50px;left:50%;transform:translate(-50%);animation:charBob 1.6s ease-in-out infinite}@keyframes charBob{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-4px)}}.stage-boss .stage-circle{background:linear-gradient(180deg,#ff7aa0,#c44a6a)!important;border-color:#80183a!important;color:#fff!important;width:60px!important;height:60px!important;font-size:22px}.stage-boss-label{position:absolute;top:-16px;left:50%;transform:translate(-50%);font-family:Russo One,sans-serif;font-size:9px;letter-spacing:2px;background:#c44a6a;color:#fff;padding:2px 8px;border-radius:6px;border:1.5px solid #80183a;white-space:nowrap}.stage-reward{position:absolute;left:50%;transform:translate(-50%);bottom:-10px;display:flex;flex-direction:column;align-items:center;gap:2px}.stage-reward-label{font-family:Russo One,sans-serif;font-size:9px;letter-spacing:1.5px;color:#c47a00;text-shadow:0 1px 0 rgba(255,255,255,.6)}.stage-map{position:relative;height:600px;flex-shrink:0;background:radial-gradient(ellipse at center,rgba(255,255,255,.5),transparent 70%);border-radius:16px}.stage-path{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.stage-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px}.stage-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Russo One,sans-serif;font-size:20px;border:3px solid;position:relative;box-shadow:0 4px #0006,inset 0 2px #fff3}.stage-done .stage-circle{background:linear-gradient(180deg,#ffe066,#ffaa1a);border-color:#c47a00;color:#5a3a00}.stage-current .stage-circle{background:linear-gradient(180deg,#7ce0ff,#2a5b9e);border-color:#c4e8ff;color:#fff;box-shadow:0 4px #0006,0 0 20px #7ce0ffcc,inset 0 2px #ffffff4d}.stage-locked .stage-circle{background:linear-gradient(180deg,#c8d4e0,#8090a8);border-color:#6b7d92;color:#fff}.stage-stars{display:flex;gap:1px}.stage-pulse{position:absolute;top:0;width:52px;height:52px;border-radius:50%;border:3px solid #7ce0ff;animation:stagePulse 1.6s ease-out infinite}@keyframes stagePulse{0%{transform:scale(1);opacity:1}to{transform:scale(1.6);opacity:0}}.story-footer{margin-top:auto;padding-top:10px}.big-cta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 22px;font-family:Russo One,sans-serif;font-size:16px;letter-spacing:1.5px;background:linear-gradient(180deg,#ffe066,#ffaa1a);color:#5a3a00;border:3px solid #c47a00;border-radius:18px;cursor:pointer;box-shadow:0 5px #8a5400,0 0 20px #ffe06680}.big-cta:active{transform:translateY(3px);box-shadow:0 2px #8a5400}.big-cta-left{text-align:left}.big-cta-label{font-family:Jua,sans-serif;font-size:11px;letter-spacing:1px;opacity:.75;line-height:1;margin-bottom:2px}.big-cta-stage{font-size:18px;line-height:1}.ranked-featured{position:relative;padding:14px;background:linear-gradient(160deg,#fffffff2,#fff5d2d9);border:3px solid #ffffff;border-radius:22px;box-shadow:0 0 0 3px #ffaa1a,0 6px #c47a004d,0 0 28px #ffe06680,inset 0 2px #fff9}.featured-tag{position:absolute;top:-10px;left:50%;transform:translate(-50%);font-family:Russo One,sans-serif;font-size:10px;letter-spacing:2.5px;padding:4px 14px;border-radius:8px;background:linear-gradient(180deg,#ffe066,#ffaa1a);color:#5a3a00;border:2px solid #c47a00;box-shadow:0 3px #8a5400;white-space:nowrap}.featured-top{display:flex;gap:14px;align-items:center;margin:10px 0 12px}.featured-preview{width:80px;height:80px;flex-shrink:0;background:linear-gradient(160deg,#0d2348,#2a5b9e);border:2px solid #5fb8e8;border-radius:14px;padding:6px;box-shadow:0 0 0 2px #0d2348,0 0 12px #7ce0ff66,inset 0 2px #ffffff1a}.featured-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1.5px}.featured-cell{border-radius:2px}.featured-info{flex:1;min-width:0;color:#1a3e6e}.featured-stage{font-family:Russo One,sans-serif;font-size:11px;letter-spacing:2px;color:#c47a00;margin-bottom:2px}.featured-name{font-size:20px;line-height:1;margin-bottom:6px;font-weight:700}.featured-stars{display:flex;gap:2px}.featured-stats{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:12px;background:#ffffffa6;border:1.5px solid rgba(196,122,0,.3);border-radius:12px}.featured-stat{flex:1;min-width:0}.featured-stat-label{font-family:Russo One,sans-serif;font-size:9px;letter-spacing:1.5px;color:#4a7ba8;margin-bottom:4px}.featured-stat-row{display:flex;align-items:baseline;gap:8px;font-family:Russo One,sans-serif;font-size:16px;color:#1a3e6e}.featured-stat-row.best{color:#c47a00}.featured-stat-row .stat-time{display:inline-flex;align-items:center;gap:4px}.featured-stat-row .stat-moves{font-family:Jua,sans-serif;font-size:13px;opacity:.75}.featured-stat-divider{width:1.5px;height:30px;background:#c47a004d;border-radius:1px}.featured-cta{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px;font-family:Russo One,sans-serif;font-size:14px;letter-spacing:2px;background:linear-gradient(180deg,#ffe066,#ffaa1a);color:#5a3a00;border:2.5px solid #c47a00;border-radius:14px;cursor:pointer;box-shadow:0 4px #8a5400,0 0 16px #ffe06680;margin-bottom:6px}.featured-cta:active{transform:translateY(2px);box-shadow:0 2px #8a5400}.featured-board{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px;font-family:Jua,sans-serif;font-size:12px;background:#ffffffd9;color:#4a7ba8;border:1.5px solid rgba(95,184,232,.5);border-radius:10px;cursor:pointer}.ranked-list-title{font-size:13px;color:#1a3e6e;margin:4px 4px 0;letter-spacing:.5px;text-shadow:0 1px 0 rgba(255,255,255,.6);font-weight:700}.ranked-list{display:flex;flex-direction:column;gap:6px}.ranked-row{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#ffffffe6;border:1.5px solid #7ec3e8;color:#1a3e6e;box-shadow:0 2px #2a5a8c26}.ranked-row.status-current{border-color:#ffaa1a;box-shadow:0 2px #c47a004d,0 0 16px #ffe06666}.ranked-row.status-todo{opacity:.85}.ranked-row.status-locked{opacity:.55}.ranked-n{width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#ffe066,#ffaa1a);color:#5a3a00;border:2px solid #c47a00;display:flex;align-items:center;justify-content:center;font-family:Russo One,sans-serif;font-size:13px}.status-locked .ranked-n{background:linear-gradient(180deg,#c8d4e0,#8090a8);border-color:#6b7d92;color:#fff}.status-todo .ranked-n{background:#ffffffd9;border-color:#b8d4ee;color:#4a7ba8}.ranked-info{flex:1;min-width:0}.ranked-name{font-size:14px;line-height:1;margin-bottom:4px;font-weight:700}.ranked-stats{display:flex;align-items:center;gap:8px;font-family:Russo One,sans-serif;font-size:11px;color:#2a85b5}.ranked-stats.todo,.ranked-stats.locked{font-family:Jua,sans-serif;font-size:11px;color:#8aa0b8}.ranked-stats svg{color:#2a85b5}.ranked-rank{font-family:Russo One,sans-serif;font-size:13px;color:#c47a00}.ranked-pulse{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;pointer-events:none;border:2px solid #ffaa1a;border-radius:16px;animation:rankedPulse 1.8s ease-out infinite}@keyframes rankedPulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.04)}}.featured-rank-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;margin-bottom:12px;background:#c47a001f;border:1.5px dashed rgba(196,122,0,.5);border-radius:12px}.featured-myrank-label{font-family:Russo One,sans-serif;font-size:10px;letter-spacing:1.5px;color:#8a5400}.featured-myrank-value{font-family:Russo One,sans-serif;font-size:18px;color:#c47a00}.featured-myrank-value span{font-size:11px;color:#a06000;font-family:Jua,sans-serif}.ranked-top3-title{font-size:13px;color:#1a3e6e;margin:4px 4px 0;letter-spacing:.5px;text-shadow:0 1px 0 rgba(255,255,255,.6);font-weight:700}.ranked-top3{display:flex;flex-direction:column;gap:6px}.ranked-top3-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:#fffffff2;border:1.5px solid #7ec3e8;color:#1a3e6e;box-shadow:0 2px #2a5a8c26}.ranked-top3-row.top-1{border-color:#ffaa1a;background:linear-gradient(160deg,#fffffff2,#fff5d2d9);box-shadow:0 2px #c47a004d,0 0 16px #ffe06666}.top3-rank{font-family:Russo One,sans-serif;font-size:14px;color:#c47a00;min-width:30px}.ranked-top3-row.top-1 .top3-rank{color:#c47a00}.ranked-top3-row.top-2 .top3-rank{color:#6a7d92}.ranked-top3-row.top-3 .top3-rank{color:#a06028}.top3-avatar{width:36px;height:36px;border-radius:50%;background:#e8f4ff;border:1.5px solid #5fb8e8;display:flex;align-items:center;justify-content:center;overflow:hidden}.top3-name{flex:1;font-size:14px;font-weight:700}.top3-time{display:inline-flex;align-items:center;gap:3px;font-family:Russo One,sans-serif;font-size:13px;color:#2a85b5}.featured-board{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px;font-family:Jua,sans-serif;font-size:13px;background:#ffffffd9;color:#2a5a8c;border:2px solid #7ec3e8;border-radius:14px;cursor:pointer;box-shadow:0 3px #2a5a8c26}.featured-board:active{transform:translateY(2px);box-shadow:0 1px #2a5a8c26}.lb-stage-card{display:flex;align-items:center;gap:14px;padding:12px 14px;background:linear-gradient(160deg,#fffffff2,#dceefcd9);border:3px solid #ffffff;border-radius:18px;box-shadow:0 0 0 3px #5fb8e8,0 5px #2a5a8c33,0 0 18px #7cc8f04d,inset 0 2px #fff9;color:#1a3e6e}.lb-stage-preview{width:64px;height:64px;flex-shrink:0;background:linear-gradient(160deg,#0d2348,#2a5b9e);border:2px solid #5fb8e8;border-radius:12px;padding:5px;box-shadow:0 0 0 1px #0d2348,0 0 10px #7ce0ff66,inset 0 2px #ffffff1a}.lb-stage-info{flex:1;min-width:0}.lb-stage-n{font-family:Russo One,sans-serif;font-size:10px;letter-spacing:2px;color:#2a85b5;margin-bottom:2px}.lb-stage-name{font-size:20px;line-height:1;margin-bottom:6px;font-weight:700}.lb-stage-tag{display:inline-block;font-family:Russo One,sans-serif;font-size:9px;letter-spacing:1.5px;padding:3px 8px;border-radius:6px;background:linear-gradient(180deg,#ffe066,#ffaa1a);color:#5a3a00;border:1.5px solid #c47a00}.podium-stats{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:4px;font-size:10px;line-height:1.3}.podium-time{display:inline-flex;align-items:center;gap:3px;font-family:Russo One,sans-serif;font-size:11px;color:#c47a00}.podium-moves{font-family:Jua,sans-serif;color:#4a7ba8;font-size:10px}.podium-crown{position:absolute;top:-8px;left:50%;transform:translate(-50%);filter:drop-shadow(0 2px 0 #8a5400)}.podium-block{position:relative}.rank-tier-time{font-family:Russo One,sans-serif;font-size:10px;color:#c47a00;letter-spacing:.5px;display:inline-flex;align-items:center;gap:3px}.rank-tier-time .rank-moves{color:#4a7ba8;font-size:10px;margin-left:2px}.rank-tier-time svg{color:#c47a00}.tier-card{display:flex;align-items:center;gap:16px;padding:16px;background:linear-gradient(160deg,#fffffff2,#fff5d2d9);border:3px solid #ffffff;border-radius:20px;box-shadow:0 0 0 3px #ffaa1a,0 6px #c47a004d,0 0 24px #ffe06666,inset 0 2px #fff9}.tier-badge{animation:bob 3s ease-in-out infinite;flex-shrink:0}.tier-info{flex:1}.tier-name{font-family:Russo One,sans-serif;font-size:22px;color:#c47a00;text-shadow:0 2px 0 rgba(255,255,255,.7);line-height:1}.tier-points{font-family:Russo One,sans-serif;font-size:32px;color:#1a3e6e;margin:6px 0 10px;text-shadow:0 2px 0 rgba(255,255,255,.6)}.tier-points span{font-size:13px;color:#4a7ba8}.tier-progress-bar{height:8px;background:#2a5a8c26;border-radius:4px;overflow:hidden;margin-bottom:5px;border:1px solid rgba(95,184,232,.4)}.tier-progress-fill{height:100%;background:linear-gradient(90deg,#5fb8e8,#ffaa1a);border-radius:4px;box-shadow:0 0 8px #5fb8e899}.tier-progress-text{display:flex;justify-content:space-between;font-size:11px;color:#4a7ba8}.tier-progress-text b{color:#c47a00}.match-btn{position:relative;width:100%;display:flex;align-items:center;gap:14px;padding:18px 20px;font-family:Jua,sans-serif;background:linear-gradient(180deg,#ff9ad2,#c454a0);color:#fff;border:3px solid #ff5fa8;border-radius:18px;cursor:pointer;box-shadow:0 5px #7a1a5e,0 0 24px #ff9ad280;overflow:hidden}.match-btn:active{transform:translateY(3px);box-shadow:0 2px #7a1a5e}.match-btn-ring{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:3px solid rgba(255,255,255,.6);animation:matchPulse 1.5s ease-out infinite}@keyframes matchPulse{0%{transform:translateY(-50%) scale(.6);opacity:1}to{transform:translateY(-50%) scale(1.6);opacity:0}}.match-btn-label{flex:1;padding-left:30px;text-align:left}.match-btn-title{font-size:22px;line-height:1;margin-bottom:4px}.match-btn-sub{font-size:12px;opacity:.85}.recent{margin-top:4px}.recent-title{font-size:14px;color:#1a3e6e;margin-bottom:8px;letter-spacing:1px;text-shadow:0 1px 0 rgba(255,255,255,.6)}.recent-list{display:flex;flex-direction:column;gap:6px}.recent-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:#ffffffe6;border:1.5px solid #7ec3e8;color:#1a3e6e;box-shadow:0 2px #2a5a8c26}.recent-row.win{border-left:4px solid #2a85b5}.recent-row.loss{border-left:4px solid #d62a4e}.recent-result{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Russo One,sans-serif;font-size:13px}.res-w{background:#d8efff;color:#1a6e9e;border:1.5px solid #5fb8e8}.res-l{background:#ffe0e0;color:#a02038;border:1.5px solid #d62a4e}.recent-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;background:#e8f4ff;border:1.5px solid #5fb8e8;display:flex;align-items:center;justify-content:center}.recent-name{flex:1;font-size:14px}.recent-score{font-family:Russo One,sans-serif;font-size:13px}.recent-row.win .recent-score{color:#2a85b5}.recent-row.loss .recent-score{color:#d62a4e}.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:0 8px;margin:8px 0 12px}.podium-col{display:flex;flex-direction:column;align-items:center;flex:1}.podium-char{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(124,224,255,.25),transparent 65%);display:flex;align-items:center;justify-content:center;margin-bottom:4px;animation:bob 2.8s ease-in-out infinite}.podium-2 .podium-char{animation-delay:-.5s}.podium-3 .podium-char{animation-delay:-1s}.podium-name{font-size:12px;color:#1a3e6e;text-align:center;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.6)}.podium-pts{font-family:Russo One,sans-serif;font-size:12px;color:#c47a00;margin-bottom:6px;text-shadow:0 1px 0 rgba(255,255,255,.6)}.podium-block{width:100%;min-height:50px;border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:center;font-family:Russo One,sans-serif;font-size:28px;border:3px solid;border-bottom:none;box-shadow:inset 0 2px #ffffff26}.podium-1 .podium-block{background:linear-gradient(180deg,#ffe066,#c47a00);border-color:#fff8c2;color:#5a3a00;box-shadow:0 0 20px #ffe06680,inset 0 2px #ffffff4d}.podium-2 .podium-block{background:linear-gradient(180deg,#d8d8e0,#8a8a98);border-color:#fafafa;color:#3a3a48}.podium-3 .podium-block{background:linear-gradient(180deg,#d49060,#8a5028);border-color:#f0c090;color:#3a1a08}.ranklist{display:flex;flex-direction:column;gap:4px}.rank-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:#ffffffe6;border:1.5px solid #7ec3e8;color:#1a3e6e;box-shadow:0 2px #2a5a8c1f}.rank-num{font-family:Russo One,sans-serif;font-size:16px;color:#4a7ba8;min-width:36px}.rank-avatar{width:36px;height:36px;border-radius:50%;background:#e8f4ff;border:1.5px solid #5fb8e8;display:flex;align-items:center;justify-content:center;overflow:hidden}.rank-info{flex:1;min-width:0}.rank-name{font-size:14px;line-height:1;margin-bottom:3px}.rank-tier{font-family:Russo One,sans-serif;font-size:10px;color:#c47a00;letter-spacing:1.2px}.rank-pts{font-family:Russo One,sans-serif;font-size:14px;color:#c47a00}.rank-pts span{font-size:10px;color:#4a7ba8}.my-rank{margin-top:8px;padding:10px;border-radius:14px;background:linear-gradient(160deg,#fff5d2f2,#ffe06699);border:2px dashed #c47a00;box-shadow:0 4px #c47a0033}.my-rank-label{font-family:Russo One,sans-serif;font-size:10px;letter-spacing:2px;color:#8a5400;margin-bottom:6px}.my-rank-row{display:flex;align-items:center;gap:10px}.my-rank-row .rank-num{color:#c47a00}.shop-tabs{display:flex;gap:6px;margin-top:4px}.shop-tab{flex:1;text-align:center;padding:8px;border-radius:10px;font-size:13px;background:#ffffffbf;border:1.5px solid #7ec3e8;color:#4a7ba8;cursor:pointer}.shop-tab.active{background:linear-gradient(180deg,#fff,#d8efff);color:#1a6e9e;border-color:#5fb8e8;box-shadow:0 0 0 2px #5fb8e8,0 3px #2a5a8c33}.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shop-card{position:relative;padding:14px 8px 10px;text-align:center;border-radius:16px;border:3px solid #ffffff;background:linear-gradient(160deg,#fffffff2,#dceefcd9);box-shadow:0 0 0 3px #7ec3e8,0 4px #2a5a8c33,inset 0 2px #fff9;color:#1a3e6e}.shop-card.rarity-common{box-shadow:0 0 0 3px #8aa0b8,0 4px #2a5a8c33,inset 0 2px #fff9}.shop-card.rarity-rare{box-shadow:0 0 0 3px #5fb8e8,0 4px #2a5a8c33,0 0 12px #5fb8e866,inset 0 2px #fff9}.shop-card.rarity-epic{box-shadow:0 0 0 3px #c454a0,0 4px #2a5a8c33,0 0 14px #c454a066,inset 0 2px #fff9}.shop-card.rarity-legendary{box-shadow:0 0 0 3px #ffaa1a,0 4px #2a5a8c33,0 0 16px #ffe06699,inset 0 2px #fff9}.shop-rarity{position:absolute;top:-10px;left:50%;transform:translate(-50%);font-family:Russo One,sans-serif;font-size:9px;letter-spacing:2px;padding:3px 8px;border-radius:6px;border:2px solid;white-space:nowrap}.shop-rarity.rarity-common{background:#4a5670;border-color:#6b7d92;color:#d8e4f0}.shop-rarity.rarity-rare{background:#2a5e8e;border-color:#5fb8e8;color:#c4e8ff}.shop-rarity.rarity-epic{background:#5b1f6e;border-color:#c454a0;color:#ffd0ec}.shop-rarity.rarity-legendary{background:#c47a00;border-color:#ffe066;color:#fff8c2}.shop-hot{position:absolute;top:6px;right:6px;font-family:Russo One,sans-serif;font-size:9px;letter-spacing:1.5px;padding:3px 6px;border-radius:5px;background:#f57;color:#fff;border:1.5px solid white;box-shadow:0 0 8px #f57;animation:dotPulse 1.5s ease-in-out infinite}.shop-portrait{width:88px;height:88px;margin:4px auto 6px;background:radial-gradient(circle,rgba(124,200,240,.3),transparent 65%);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 4px rgba(42,90,140,.25))}.shop-name{font-size:16px;line-height:1;margin-bottom:2px;color:#c47a00}.shop-sub{font-size:11px;color:#4a7ba8;margin-bottom:8px}.shop-buy{width:100%;padding:7px;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:linear-gradient(180deg,#ffe066,#ffaa1a);border:2px solid #c47a00;color:#5a3a00;font-family:Russo One,sans-serif;font-size:12px;letter-spacing:1px;border-radius:10px;cursor:pointer;box-shadow:0 3px #8a5400}.shop-buy:active{transform:translateY(2px);box-shadow:0 1px #8a5400}.shop-owned{padding:7px;font-family:Russo One,sans-serif;font-size:11px;letter-spacing:1px;background:#d8efff;color:#1a6e9e;border:2px solid #5fb8e8;border-radius:10px}@keyframes portal-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes portal-spin-rev{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes portal-pulse{0%,to{opacity:.55}50%{opacity:1}}.shop-coins{display:flex;align-items:center;gap:6px;margin:0 0 12px;padding:8px 14px;background:#fff6d8;border:2px solid #ffd84d;border-radius:12px;font-size:13px;color:#8a5400}.shop-coins b{margin-left:auto;font-family:Russo One,sans-serif;font-size:15px}.shop-equip{width:100%;padding:7px;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:linear-gradient(180deg,#5fb8e8,#2a7fc4);border:2px solid #1a5a94;color:#fff;font-family:Russo One,sans-serif;font-size:12px;letter-spacing:1px;border-radius:10px;cursor:pointer;box-shadow:0 3px #134877}.shop-equip:active{transform:translateY(2px);box-shadow:0 1px #134877}.shop-equipped{width:100%;padding:7px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px;font-family:Russo One,sans-serif;font-size:11px;letter-spacing:1px;background:#d8f5e0;color:#1a8a4e;border:2px solid #4cc47a;border-radius:10px}.shop-buy:disabled{opacity:.4;cursor:not-allowed;box-shadow:0 3px #8a5400}.shop-buy:disabled:active{transform:none;box-shadow:0 3px #8a5400}:root{font-family:Jua,system-ui,sans-serif;color:#1a3e6e;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{-webkit-tap-highlight-color:transparent}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 20% 30%,rgba(255,248,210,.5) 0%,transparent 55%),radial-gradient(ellipse at 80% 70%,rgba(220,240,255,.55) 0%,transparent 55%),linear-gradient(180deg,#7ec8e8,#b3def0 55%,#e8f5fc);background-attachment:fixed}@media(min-width:481px){body{display:flex;justify-content:center;align-items:flex-start}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes iceGlow{0%,to{filter:drop-shadow(0 0 4px rgba(168,255,212,.6)) drop-shadow(0 3px 4px rgba(0,0,0,.4))}50%{filter:drop-shadow(0 0 12px rgba(168,255,212,1)) drop-shadow(0 3px 4px rgba(0,0,0,.4))}}@keyframes socketPulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 6px rgba(120,200,250,.6))}50%{transform:scale(1.04);filter:drop-shadow(0 0 14px rgba(120,200,250,.95))}}@keyframes bergBreath{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5px) scale(1.02)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes cardPop{0%{transform:scale(.6) rotate(-4deg);opacity:0}60%{transform:scale(1.04) rotate(1deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes starDrop{0%{transform:translateY(-30px) scale(.4);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.dpad-grid{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:4px}.dpad-btn{position:relative;border:3px solid;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 4px #0006,inset 0 2px #ffffffb3,0 0 14px #78c8ff4d;transition:transform .08s,box-shadow .08s}.dpad-btn:before{content:"";position:absolute;top:-18px;right:-18px;bottom:-18px;left:-18px}.dpad-btn:active{transform:translateY(3px);box-shadow:0 1px #0006,inset 0 2px #ffffffb3}.dpad-center{border:3px solid;border-radius:50%;display:flex;align-items:center;justify-content:center}