:root{--bg:#020817;--panel:rgba(5,18,43,.94);--ink:#edfaff;--muted:#86b8d3;--line:rgba(86,220,255,.27);--blue:#00b8ff;--blue2:#315cff;--cyan:#72efff;--shadow:0 28px 90px rgba(0,184,255,.17)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--ink);font-family:Arial,"Noto Sans KR",sans-serif;background:radial-gradient(circle at 15% 0%,rgba(0,184,255,.30),transparent 28%),radial-gradient(circle at 88% 8%,rgba(49,92,255,.25),transparent 30%),linear-gradient(180deg,#020817,#071b3e 55%,#020817)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(74,214,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(74,214,255,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(#000,transparent 90%)}button,input,select{font:inherit}.page{position:relative;width:min(1240px,calc(100% - 28px));min-height:calc(100vh - 28px);margin:14px auto;padding:27px 34px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(5,19,48,.96),rgba(2,9,25,.95));box-shadow:var(--shadow),inset 0 0 90px rgba(0,184,255,.05);overflow:hidden}.ambient-lines{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 18%,rgba(111,239,255,.03) 19%,transparent 20%,transparent 76%,rgba(111,239,255,.03) 77%,transparent 78%)}.header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:22px;padding-bottom:21px;margin-bottom:18px;border-bottom:1px solid rgba(98,232,255,.34)}.brand{display:flex;align-items:center;gap:14px;min-width:0;flex:0 1 auto}.brand>div{min-width:0}.brand-logo{width:96px;height:62px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 0 18px rgba(98,232,255,.55))}.brand h1{margin:2px 0 0;font-size:32px;line-height:1.05;white-space:nowrap;font-weight:1000;letter-spacing:-1.5px;text-shadow:0 0 22px rgba(98,232,255,.36)}.eyebrow{margin:0!important;color:#75e9ff!important;font-size:11px!important;font-weight:1000!important;letter-spacing:2px}.tabs{display:flex;gap:6px;flex:0 0 auto;padding:6px;border:1px solid rgba(98,232,255,.26);border-radius:16px;background:rgba(2,10,27,.72)}.tab{border:0;border-radius:11px;padding:12px 20px;background:transparent;color:#9ecbe3;font-weight:1000;cursor:pointer}.tab.active{color:#fff;background:linear-gradient(135deg,#00b8ff,#315cff);box-shadow:0 0 24px rgba(0,184,255,.4)}.summary-bar{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.summary-bar>div{min-height:76px;display:flex;flex-direction:column;justify-content:center;padding:13px 17px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,rgba(9,34,78,.82),rgba(3,14,37,.88));box-shadow:inset 0 0 26px rgba(0,184,255,.04)}.summary-bar span{font-size:10px;letter-spacing:1.4px;color:#82b9d8;font-weight:1000}.summary-bar b{margin-top:5px;font-size:21px}.coin-value{color:#7cf2ff}.game-hero{position:relative;z-index:2;min-height:455px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:20px;padding:40px 54px;border:1px solid rgba(98,232,255,.29);border-radius:24px;overflow:hidden;background:radial-gradient(circle at 75% 50%,rgba(0,184,255,.17),transparent 33%),linear-gradient(135deg,rgba(7,31,74,.95),rgba(3,12,31,.96));box-shadow:inset 0 0 65px rgba(0,184,255,.06),0 20px 60px rgba(0,0,0,.25)}.game-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 0 45%,rgba(255,255,255,.035) 45.5% 46.5%,transparent 47%);pointer-events:none}.hero-copy{position:relative;z-index:3}.hero-copy h2{font-size:50px;line-height:1.05;margin:10px 0 16px;letter-spacing:-2px}.hero-copy h2 em{font-style:normal;color:#78edff;text-shadow:0 0 24px rgba(98,232,255,.52)}.hero-copy>p:not(.eyebrow){color:#a0cee5;font-weight:800;line-height:1.65}.draw-options{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.btn{border:0;border-radius:13px;padding:14px 23px;min-width:155px;color:#fff;font-size:16px;font-weight:1000;cursor:pointer;background:linear-gradient(135deg,#00b8ff,#315cff);box-shadow:0 12px 28px rgba(0,184,255,.25),inset 0 1px 0 rgba(255,255,255,.25);transition:.2s}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn small{display:block;margin-bottom:4px;font-size:9px;letter-spacing:1px;opacity:.75}.btn.secondary{border:1px solid rgba(98,232,255,.34);background:rgba(98,232,255,.10)}.btn.dark{background:#07142e}.btn.hot{box-shadow:0 0 0 1px rgba(98,232,255,.3),0 15px 34px rgba(0,184,255,.3)}.premium-btn{background:linear-gradient(135deg,#6e39d6,#1f7bff)}.hero-pack-zone{position:relative;display:grid;place-items:center;min-height:350px}.pack-aura{position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(143,247,255,.32),rgba(0,184,255,.08) 42%,transparent 68%);filter:blur(3px)}.pack-envelope{position:relative;z-index:2;width:220px;height:305px;border:1px solid rgba(119,239,255,.62);border-radius:18px;overflow:hidden;background:linear-gradient(155deg,#052554,#083f86 44%,#0b67d8);box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 46px rgba(0,184,255,.29),inset 0 0 38px rgba(255,255,255,.08);transform:perspective(900px) rotateX(4deg)}.pack-top{position:absolute;left:-20px;right:-20px;top:-42px;height:118px;border-bottom:1px solid rgba(255,255,255,.16);background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(98,232,255,.05));transform:skewY(-10deg)}.pack-shine{position:absolute;inset:-30%;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.24),transparent 55%);transform:translateX(-20%) rotate(10deg)}.pack-energy{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(110,239,255,.20),transparent 68%);box-shadow:0 0 50px rgba(110,239,255,.22)}.pack-brand-logo{position:absolute;z-index:2;left:50%;top:37px;transform:translateX(-50%);width:125px;height:68px;object-fit:contain;filter:drop-shadow(0 0 13px rgba(255,255,255,.35))}.pack-name{position:absolute;z-index:2;top:138px;left:0;right:0;text-align:center;font-size:27px;font-weight:1000;letter-spacing:.5px}.pack-range{position:absolute;left:42px;right:42px;bottom:43px;text-align:center;padding:10px 0;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(1,8,25,.43);font-size:17px;font-weight:1000}.pack-cut{position:absolute;left:0;right:0;bottom:20px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 8px,transparent 8px 15px)}.pack-crimp{position:absolute;z-index:4;left:0;right:0;height:18px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 3px,rgba(0,0,0,.12) 3px 6px)}.pack-crimp.top{top:0}.pack-crimp.bottom{bottom:0}.dashboard-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.45fr .55fr;gap:18px;margin-top:18px}.side-panel,.collection-panel{padding:22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(8,33,78,.83),rgba(3,14,37,.91))}.panel-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.panel-title h2,.collection-panel h2{margin:3px 0 0}.panel-title span{font-size:12px;color:#80b8d5}.recent-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.recent-item{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:11px;width:100%;padding:7px;border:1px solid rgba(98,232,255,.15);border-radius:12px;background:rgba(2,10,27,.54);color:#eaf8ff;text-align:left;cursor:pointer}.recent-item:hover{border-color:rgba(98,232,255,.46);background:rgba(0,184,255,.08)}.recent-item img{width:58px;height:66px;border-radius:8px;object-fit:cover}.recent-item b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-item small{display:block;margin-top:4px;color:#74e5ff}.empty-recent{min-height:145px;display:grid;place-content:center;text-align:center;color:#6f9fb8;line-height:1.7}.text-btn{margin-top:13px;border:0;background:transparent;color:#7cecff;font-weight:1000;cursor:pointer}.collection-panel{text-align:center}.progress-ring{--progress:0deg;width:170px;height:170px;margin:18px auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#70efff var(--progress),rgba(255,255,255,.08) 0);box-shadow:0 0 35px rgba(0,184,255,.16)}.progress-ring:before{content:"";grid-area:1/1;width:134px;height:134px;border-radius:50%;background:#06152f;border:1px solid rgba(98,232,255,.18)}.progress-ring>div{grid-area:1/1;position:relative;z-index:2}.progress-ring b{display:block;font-size:30px}.progress-ring span{font-size:11px;color:#82b9d8}.collection-panel>p:last-child{color:#89b9d2}.dex-cover{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(120deg,rgba(0,184,255,.13),rgba(49,92,255,.07))}.dex-cover h2{font-size:36px;margin:6px 0}.dex-cover p:last-child{color:#8bbad3}.dex-total{text-align:right}.dex-total b{display:block;font-size:44px;color:#7ceeff}.dex-total span{font-weight:900;color:#8abbd4}.dex-search{display:grid;grid-template-columns:1fr 180px;gap:10px;margin:16px 0}.dex-search input,.dex-search select{height:46px;border:1px solid rgba(98,232,255,.25);border-radius:12px;padding:0 14px;background:#031126;color:#eaf8ff}.dex-section{margin:14px 0;padding:0 15px 15px;border:1px solid rgba(98,232,255,.16);border-radius:17px;background:rgba(3,14,37,.5);overflow:hidden}.dex-section-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 0;border:0;background:transparent;color:#eaf8ff;cursor:pointer}.dex-section-head span{display:flex;align-items:center;gap:10px}.dex-section-head strong{font-size:23px}.dex-section-head small{font-size:9px;letter-spacing:1.5px;color:#6fa9c8}.dex-section-head b{color:#76e9ff}.fold-icon{font-style:normal;color:#73e4ff;transition:.2s}.dex-section.collapsed .fold-icon{transform:rotate(-90deg)}.dex-section.collapsed .album-grid{display:none}.album-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.coming-panel{min-height:470px;display:grid;place-content:center;justify-items:center;text-align:center;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle,rgba(0,184,255,.16),transparent 52%)}.rank-emblem{width:80px;height:80px;display:grid;place-items:center;border:1px solid rgba(98,232,255,.35);border-radius:50%;font-size:34px;color:#78efff;box-shadow:0 0 36px rgba(0,184,255,.2)}.coming-panel span{margin-top:18px;color:#6de7ff;font-weight:1000;letter-spacing:3px}.coming-panel h2{font-size:42px;margin:10px}.coming-panel p{color:#8dbbd2}.modal{position:fixed;z-index:100;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(1,5,15,.9);backdrop-filter:blur(9px)}.modal.show{display:flex}.modal-panel{position:relative;width:100%;max-width:1000px;max-height:94vh;overflow:auto;padding:25px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(7,23,55,.99),rgba(3,11,28,.99));box-shadow:0 30px 100px rgba(0,0,0,.5),0 0 70px rgba(0,184,255,.22)}.draw-stage{text-align:center}.opening-panel{max-width:650px;overflow:hidden}.opening-panel h2{font-size:30px}.pack-open{position:relative;width:260px;height:345px;margin:25px auto;display:flex;align-items:center;justify-content:center}.message{font-size:22px;font-weight:1000}.tear-line{position:absolute;z-index:9;left:4px;right:4px;top:72px;height:3px;background:linear-gradient(90deg,transparent,#fff,#7cf0ff,#fff,transparent);box-shadow:0 0 15px #fff;opacity:0}.tearing .tear-line{opacity:1}.multi-result-panel{max-width:1180px}.result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.result-head h2{margin:4px 0 0}.icon-close{width:42px;height:42px;border:1px solid rgba(98,232,255,.28);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;font-size:26px;cursor:pointer}.result-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:17px;justify-items:center}.result-grid.count-1{grid-template-columns:1fr}.result-grid.count-20{grid-template-columns:repeat(5,1fr)}.result-item{position:relative}.result-label{position:absolute;z-index:10;top:-7px;right:-8px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:1000;box-shadow:0 4px 14px rgba(0,0,0,.35)}.result-label.new{color:#001725;background:#7cf2ff}.result-label.dupe{color:#332000;background:#ffd06a}.result-label.master-star-dupe{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:112px;border-radius:11px;padding:7px 10px;color:#382200;background:linear-gradient(145deg,#fff3a8,#ffc95f 58%,#e69b25);box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 14px rgba(255,210,93,.22)}.result-label.master-star-dupe b{font-size:10px;line-height:1.15;white-space:nowrap}.result-label.master-star-dupe small{font-size:8px;line-height:1.1;font-weight:1000;white-space:nowrap;opacity:.78}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px;margin:24px auto 0}.detail-panel{max-width:780px;overflow:visible}.detail-close{position:absolute;right:15px;top:15px}.loading-screen{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:15px;background:radial-gradient(circle at 50% 25%,rgba(0,184,255,.28),transparent 34%),#020817}.loading-orbit{position:absolute;width:240px;height:240px;border-radius:50%;border:1px solid rgba(98,232,255,.16);border-top-color:#78efff}.loading-logo{width:150px;height:84px;object-fit:contain;filter:drop-shadow(0 0 28px rgba(98,232,255,.7))}.loading-screen strong{font-size:28px}.loading-bar{width:240px;height:8px;border:1px solid rgba(98,232,255,.24);border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.loading-bar i{display:block;height:100%;background:linear-gradient(90deg,#00b8ff,#7df3ff);animation:loadingFill .5s ease-out forwards}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 20% 0%,rgba(0,184,255,.27),transparent 30%),linear-gradient(135deg,#020716,#061b42)}.login-box{width:min(470px,100%);padding:31px;text-align:center;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(6,20,48,.97),rgba(3,11,28,.97));box-shadow:0 25px 80px rgba(0,0,0,.4),0 0 45px rgba(0,184,255,.14)}.login-logo{width:140px;height:78px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(98,232,255,.5))}.login-box h1{font-size:36px;margin:7px 0}.login-box>p:not(.eyebrow){color:var(--muted);font-weight:700}.field{margin:18px 0;text-align:left}.field label{display:block;margin-bottom:8px;font-weight:900}.field input{width:100%;height:48px;padding:0 14px;border:1px solid rgba(98,232,255,.3);border-radius:10px;background:#031126;color:#eaf7ff}.login-divider{height:1px;margin:24px 0;background:rgba(98,232,255,.18)}.login-help{font-size:12px!important;line-height:1.6} @media(max-width:1050px){.page{width:min(920px,calc(100% - 22px));padding:24px}.game-hero{grid-template-columns:1fr .72fr;padding:35px}.hero-copy h2{font-size:42px}.album-grid{grid-template-columns:repeat(4,1fr)}.result-grid,.result-grid.count-20{grid-template-columns:repeat(4,1fr)}} @media(max-width:767px){.page{width:100%;min-height:100vh;margin:0;padding:14px;border-radius:0}.header{display:block}.brand-logo{width:76px;height:48px}.brand h1{font-size:25px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:15px}.tab{padding:11px 5px;font-size:13px}.summary-bar{grid-template-columns:repeat(2,1fr);gap:8px}.summary-bar>div{min-height:66px;padding:10px 12px}.summary-bar b{font-size:17px}.game-hero{display:flex;flex-direction:column-reverse;padding:27px 16px;text-align:center}.hero-copy h2{font-size:34px}.draw-options{display:grid;grid-template-columns:1fr;gap:9px}.btn{width:100%;min-width:0}.hero-pack-zone{min-height:290px}.pack-envelope{width:180px;height:250px}.pack-brand-logo{width:100px;top:30px}.pack-name{top:112px;font-size:22px}.pack-range{bottom:37px}.dashboard-grid{grid-template-columns:1fr}.recent-grid{grid-template-columns:1fr}.progress-ring{width:145px;height:145px}.progress-ring:before{width:113px;height:113px}.dex-cover{display:block}.dex-total{text-align:left;margin-top:14px}.dex-search{grid-template-columns:1fr}.album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.dex-section{padding:0 9px 10px}.dex-section-head strong{font-size:18px}.dex-section-head small{display:none}.modal{padding:8px}.modal-panel{padding:15px}.pack-open{width:210px;height:290px}.result-grid,.result-grid.count-20{grid-template-columns:repeat(2,1fr);gap:11px}.result-actions{grid-template-columns:1fr}.result-head h2{font-size:22px}} /* V1.3 pack selection, attendance and score ranking */ .tabs{grid-auto-flow:column}.pack-selector{position:relative;z-index:2;margin-bottom:18px;padding:20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(8,33,78,.72),rgba(3,14,37,.88))}.pack-selector-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:15px}.pack-selector-head h2{margin:4px 0 0}.pack-selector-head>span{color:#82b9d8;font-size:12px}.pack-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.pack-choice{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:5px;padding:13px;border:1px solid rgba(98,232,255,.17);border-radius:15px;background:rgba(2,10,27,.62);color:#eaf8ff;text-align:left;cursor:pointer;transition:.2s}.pack-choice:hover,.pack-choice.active{transform:translateY(-3px);border-color:rgba(115,238,255,.7);background:rgba(0,184,255,.11);box-shadow:0 12px 28px rgba(0,184,255,.15)}.pack-choice.active{box-shadow:inset 0 0 0 1px rgba(115,238,255,.18),0 0 26px rgba(0,184,255,.18)}.pack-choice strong{font-size:15px}.pack-choice small{min-height:30px;color:#8dbbd3;line-height:1.35}.pack-choice em{font-size:10px;font-style:normal;font-weight:900;color:#72efff}.mini-pack{position:relative;width:100%;height:54px;margin-bottom:3px;border-radius:9px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#07326a,#0b75dd);box-shadow:inset 0 0 24px rgba(255,255,255,.08)}.mini-pack:before,.mini-pack:after{content:"";position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.17) 0 3px,rgba(0,0,0,.12) 3px 6px)}.mini-pack:before{top:0}.mini-pack:after{bottom:0}.mini-pack b{position:relative;z-index:2;font-size:10px;letter-spacing:1.4px}.mini-pack.advanced,.pack-envelope.advanced{background:linear-gradient(155deg,#143d26,#16854b 48%,#32c776)}.mini-pack.premium,.pack-envelope.premium{background:linear-gradient(155deg,#38204e,#8141b5 48%,#d07bff)}.mini-pack.pickup,.pack-envelope.pickup{background:linear-gradient(155deg,#4d1735,#b32e78 48%,#ff6ab5)}.pack-theme-advanced{background:radial-gradient(circle at 75% 50%,rgba(56,222,135,.18),transparent 33%),linear-gradient(135deg,rgba(7,50,43,.95),rgba(3,18,26,.96))}.pack-theme-premium{background:radial-gradient(circle at 75% 50%,rgba(198,111,255,.22),transparent 33%),linear-gradient(135deg,rgba(44,18,69,.95),rgba(13,8,30,.96))}.pack-theme-pickup{background:radial-gradient(circle at 75% 50%,rgba(255,93,179,.2),transparent 33%),linear-gradient(135deg,rgba(72,15,49,.95),rgba(25,5,24,.96))}.score-orb{width:170px;height:170px;margin:18px auto;display:grid;place-content:center;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(124,242,255,.25),rgba(3,17,43,.95) 62%);border:1px solid rgba(124,242,255,.35);box-shadow:0 0 42px rgba(0,184,255,.2),inset 0 0 32px rgba(0,184,255,.12)}.score-orb b{font-size:29px}.score-orb span{font-size:10px;color:#7ceeff;font-weight:1000;letter-spacing:2px}.attendance-panel{position:relative;z-index:2;min-height:430px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:30px;padding:55px;border:1px solid var(--line);border-radius:25px;overflow:hidden;background:radial-gradient(circle at 78% 45%,rgba(0,184,255,.22),transparent 28%),linear-gradient(135deg,rgba(7,31,74,.96),rgba(2,10,27,.96))}.attendance-glow{position:absolute;right:7%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(124,242,255,.16),transparent 68%)}.attendance-copy{position:relative;z-index:2}.attendance-copy h2{font-size:44px;margin:8px 0 14px}.attendance-copy>p:not(.eyebrow){color:#98c6dd;line-height:1.7;font-weight:700}.attendance-stats{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.attendance-stats span{padding:11px 14px;border:1px solid rgba(98,232,255,.2);border-radius:11px;background:rgba(0,184,255,.07);color:#9ac8df}.attendance-stats b{color:#7ceeff}.attendance-claim:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.55;transform:none}.attendance-reward{position:relative;z-index:2;width:260px;height:260px;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(124,242,255,.42);background:radial-gradient(circle at 50% 38%,rgba(124,242,255,.3),rgba(4,20,50,.94) 62%);box-shadow:0 0 65px rgba(0,184,255,.25),inset 0 0 40px rgba(0,184,255,.13)}.attendance-reward span,.attendance-reward small{font-size:11px;font-weight:1000;letter-spacing:2px;color:#7ceeff}.attendance-reward strong{margin:10px 0;font-size:47px}.rank-panel{position:relative;z-index:2;display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}.rank-main,.score-table{padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(8,33,78,.82),rgba(3,14,37,.91))}.rank-main h2{font-size:38px;margin:7px 0 10px}.rank-main>p:not(.eyebrow){color:#8dbbd3;line-height:1.6}.my-rank-score{margin-top:30px;padding:23px;border:1px solid rgba(124,242,255,.22);border-radius:16px;background:rgba(0,184,255,.07)}.my-rank-score span,.my-rank-score small{display:block;color:#86b8d3}.my-rank-score strong{display:block;margin:7px 0;font-size:43px;color:#7cf2ff}.score-row{display:grid;grid-template-columns:.7fr .7fr 1fr 1fr;align-items:center;gap:12px;padding:13px 8px;border-bottom:1px solid rgba(98,232,255,.1)}.score-row.head{font-size:10px;font-weight:1000;letter-spacing:1px;color:#6fa9c8}.score-row:last-child{border-bottom:0}.score-row strong{text-align:right}.score-grade{font-size:18px}.grade-text-SSR{color:#74f4ff}.grade-text-UR{color:#ffd65e}.grade-text-HR{color:#ff5578}.grade-text-SR{color:#a868ff}.grade-text-R{color:#31adff}.grade-text-U{color:#47e47e}.grade-text-C{color:#aab4c2} @media(max-width:1050px){.pack-list{grid-template-columns:repeat(2,1fr)}} @media(max-width:767px){.tabs{grid-template-columns:repeat(4,1fr)}.tab{font-size:12px}.pack-selector{padding:14px}.pack-selector-head{display:block}.pack-selector-head>span{display:block;margin-top:5px}.pack-list{grid-template-columns:1fr 1fr;gap:8px}.pack-choice{padding:10px}.pack-choice small{display:none}.mini-pack{height:44px}.attendance-panel{grid-template-columns:1fr;padding:30px 18px;text-align:center}.attendance-copy h2{font-size:33px}.attendance-stats{justify-content:center}.attendance-reward{width:205px;height:205px}.rank-panel{grid-template-columns:1fr}.score-row{grid-template-columns:.65fr .65fr .9fr 1fr;font-size:12px}.my-rank-score strong{font-size:35px}} .server-ranking{margin-top:18px;padding:14px;border:1px solid rgba(79,185,255,.24);border-radius:14px;background:rgba(3,13,22,.52);color:#9fc6dd}.rank-list{display:grid;gap:7px}.rank-list-row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.035)}.rank-list-row>b{color:#42c9ff}.rank-list-row>strong{color:#fff} /* V2.2.4 UR+ global acquisition ticker */ .high-grade-feed{position:relative;z-index:2;display:flex;align-items:center;min-height:44px;margin:-6px 0 18px;border:1px solid rgba(116,244,255,.2);border-radius:12px;background:#061426;overflow:hidden;box-shadow:none} .high-grade-label{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;padding:0 15px;border-right:1px solid rgba(255,255,255,.1);background:#07111f;color:#e7eef8;font-size:11px;font-weight:1000;letter-spacing:1px;white-space:nowrap} .high-grade-viewport{min-width:0;flex:1;overflow:hidden;background:transparent} .high-grade-track{display:flex;align-items:center;width:max-content;min-width:100%;animation:highGradeTicker 42s linear infinite;background:transparent} .high-grade-track:hover{animation-play-state:paused} .high-grade-track.static{animation:none} .high-grade-item,.high-grade-empty{display:inline-flex;align-items:center;min-height:42px;padding:0 25px;background:transparent!important;background-image:none!important;animation:none!important;box-shadow:none!important;filter:none!important;color:#dce6f2;font-size:13px;font-weight:800;white-space:nowrap} .high-grade-item:after{content:'◆';margin-left:25px;color:rgba(150,170,195,.42);font-size:7px} .high-grade-item b{margin-right:4px;color:#fff} .high-grade-item strong{margin:0 4px;color:#dce6f2;text-shadow:none} .high-grade-item.feed-grade-SSR strong{color:#c084fc} .high-grade-item.feed-grade-MA strong{color:#f6c453} .high-grade-item.feed-grade-LIMITED strong{color:#ff7b7b} .high-grade-item.feed-grade-FUR strong{color:#7dd3fc} .high-grade-empty{color:#7f98ad;font-weight:700} @media(max-width:767px){.high-grade-feed{min-height:40px;margin-top:-4px}.high-grade-label{padding:0 10px;font-size:9px}.high-grade-item,.high-grade-empty{min-height:38px;padding:0 18px;font-size:11px}} @keyframes highGradeTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:767px){.high-grade-feed{min-height:40px;margin-top:-4px}.high-grade-label{padding:0 10px;font-size:9px}.high-grade-item,.high-grade-empty{min-height:38px;padding:0 18px;font-size:11px}} .coupon-panel{margin-top:20px;padding:26px;border:1px solid rgba(91,218,255,.28);border-radius:20px;background:linear-gradient(135deg,rgba(8,24,43,.96),rgba(14,13,35,.96));display:flex;justify-content:space-between;gap:24px;align-items:center}.coupon-panel h2{margin:5px 0}.coupon-panel p{color:#9eb3c8}.coupon-form{display:flex;gap:10px;min-width:min(440px,100%)}.coupon-form input{flex:1;background:#07111e;border:1px solid #2c5778;color:#fff;border-radius:10px;padding:13px}@media(max-width:700px){.coupon-panel{display:block}.coupon-form{min-width:0;margin-top:18px}} .grade-text-MA{color:#ff8fe8}.grade-text-FUR{color:#fff2a8;text-shadow:0 0 12px rgba(255,242,168,.45)} /* Player login/logout UX */ .login-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 12px rgba(52,211,153,.9);flex:0 0 auto} .logged-out-notice{margin:18px 0;padding:14px 16px;border:1px solid rgba(245,158,11,.3);border-radius:13px;background:rgba(245,158,11,.08);text-align:left}.logged-out-notice span{display:block;color:#fbbf24;font-weight:800;font-size:13px;margin-bottom:5px}.logged-out-notice p{margin:0!important;font-size:13px!important;line-height:1.55;color:#cbd5e1!important} .player-login-box .login-divider{display:flex;align-items:center;gap:12px;margin:24px 0 18px;color:#7890a7;font-size:12px}.player-login-box .login-divider:before,.player-login-box .login-divider:after{content:"";height:1px;flex:1;background:rgba(120,160,190,.18)} .account-panel{position:relative;width:min(520px,calc(100vw - 28px));padding:30px}.account-close{position:absolute;right:18px;top:16px}.account-login-state{display:flex;align-items:center;gap:13px;margin:8px 0 20px;padding:16px;border:1px solid rgba(52,211,153,.25);border-radius:15px;background:rgba(52,211,153,.06)}.account-login-state .login-dot{width:12px;height:12px}.account-login-state small{color:#84a1b8}.account-login-state h2{margin:2px 0 0;font-size:23px} .account-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.account-info-grid>div{padding:14px;border-radius:13px;background:rgba(10,28,47,.72);border:1px solid rgba(82,144,188,.2)}.account-info-grid span{display:block;font-size:11px;color:#7898b1;margin-bottom:5px}.account-info-grid b{font-size:16px} .account-key-box{padding:16px;border-radius:14px;background:rgba(2,10,20,.5);border:1px solid rgba(80,140,180,.22)}.account-key-box label{display:block;font-size:12px;font-weight:800;margin-bottom:9px}.account-key-box>div{display:flex;gap:8px}.account-key-box input{min-width:0;flex:1}.account-key-box button{border:0;border-radius:10px;padding:0 16px;background:#1e93ca;color:#fff;font-weight:800;cursor:pointer}.account-key-box p{font-size:11px;color:#7890a5;line-height:1.5;margin:9px 0 0}.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.btn.danger{background:#7f1d1d;border-color:#ef4444;color:#fff}.btn.danger:hover{background:#991b1b} .login-summary{cursor:default} .login-summary-row{display:flex;align-items:center;gap:9px;margin-top:5px} .login-summary-row b{margin-top:0!important;font-size:21px!important} .login-summary-row button{margin-left:auto;border:0;background:transparent;color:#5ec8ff;font-size:12px;font-weight:1000;cursor:pointer;padding:6px 0} .login-summary-row button:hover{color:#9ce8ff;text-decoration:underline} @media(max-width:900px){.account-info-grid,.account-actions{grid-template-columns:1fr}} .shard-value{display:block;margin-top:5px;color:#ffe17a;font-size:11px;font-weight:900} .breakthrough-info{display:grid;gap:9px;margin:17px 0;padding:15px;border:1px solid rgba(98,232,255,.22);border-radius:14px;background:rgba(0,184,255,.06)} .breakthrough-info>span,.breakthrough-info>small{color:#8ebed6} .breakthrough-info>strong{font-size:27px;color:#ffe07a;text-shadow:0 0 16px rgba(255,224,122,.4)} .breakthrough-btn{margin-top:3px;min-width:0!important} .max-breakthrough{padding:10px;border-radius:10px;text-align:center;color:#051325;background:linear-gradient(90deg,#fff3a5,#69edff,#df78ff)} .account-info-grid{grid-template-columns:repeat(3,1fr)!important} @media(max-width:767px){.account-info-grid{grid-template-columns:1fr!important}} .maintenance-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#10243d 0,#070c15 55%,#04070c 100%)}.maintenance-card{width:min(620px,94vw);padding:42px;text-align:center;border:1px solid rgba(92,205,255,.32);box-shadow:0 30px 90px rgba(0,0,0,.45)}.maintenance-logo{width:120px;max-height:80px;object-fit:contain;margin-bottom:16px}.maintenance-card h1{font-size:clamp(30px,5vw,48px);margin:10px 0 16px}.maintenance-message{color:#b8c9db;line-height:1.8;font-size:17px;white-space:pre-line}.maintenance-period{display:grid;gap:8px;margin:24px 0;padding:18px;border-radius:14px;background:rgba(8,18,31,.76);border:1px solid rgba(76,164,219,.28)}.maintenance-period span{color:#6fdcff;font-size:12px;letter-spacing:2px}.maintenance-period b{font-size:18px}.maintenance-notice{color:#8298ad;line-height:1.7;margin:18px 0 24px}.maintenance-admin-link{display:inline-block;margin-top:14px;color:#6fdcff;text-decoration:none;font-weight:800}.maintenance-card .btn{width:100%}@media(max-width:560px){.maintenance-card{padding:28px 20px}.maintenance-message{font-size:15px}} .grade-text-LIMITED{color:#ffd86b;text-shadow:0 0 14px rgba(255,216,107,.55)} /* v8.6 PVE Battle */ .battle-cover{display:flex;justify-content:space-between;align-items:center;margin:22px 0;padding:26px;border:1px solid rgba(100,220,255,.25);border-radius:22px;background:radial-gradient(circle at 80% 20%,rgba(255,80,30,.18),transparent 35%),rgba(7,17,30,.85)}.battle-cover h2{font-size:36px;margin:5px 0}.battle-total{text-align:right}.battle-total b{display:block;font-size:36px;color:#ffe074}.battle-layout{display:grid;grid-template-columns:1.5fr .8fr;gap:18px}.battle-panel{padding:20px;border:1px solid rgba(86,176,222,.22);border-radius:20px;background:rgba(5,14,25,.82)}.battle-deck{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}.battle-empty-slot,.battle-deck-card{min-height:130px;border:1px dashed #426079;border-radius:13px;background:#07121e;color:#55758d}.battle-deck-card{padding:5px;border-style:solid;cursor:pointer}.battle-deck-card img{width:100%;height:80px;object-fit:cover;border-radius:9px}.battle-deck-card span,.battle-deck-card b{display:block;font-size:10px;margin-top:4px}.battle-card-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:460px;overflow:auto}.battle-pick-card{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:9px;padding:8px;border:1px solid #294256;border-radius:12px;background:#091725;color:#fff;text-align:left}.battle-pick-card img{width:52px;height:62px;object-fit:cover;border-radius:8px}.battle-pick-card strong{color:#ffe074}.battle-pick-card.selected{opacity:.4}.battle-monsters{display:grid;gap:10px}.monster-choice{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:10px;border:1px solid #344a5d;border-radius:14px;background:#0b1722;color:#fff;text-align:left}.monster-choice.active{border-color:#ffb13b;box-shadow:0 0 20px #ff7a0033}.monster-choice img,.monster-placeholder{width:80px;height:90px;object-fit:cover;border-radius:10px;display:grid;place-items:center;font-size:42px;background:#23180f}.monster-choice span>*{display:block;margin:3px}.monster-choice em{color:#ffe074}.monster-choice strong{color:#68dcff;font-size:12px}.battle-start{width:100%;margin-top:15px}.battle-stage{text-align:center;overflow:hidden;min-height:430px;background:radial-gradient(circle,#172d49,#050a12 70%)}.battle-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-top:35px}.battle-team{display:flex;justify-content:center}.battle-team img{width:72px;height:100px;object-fit:cover;border-radius:9px;margin-left:-25px;border:2px solid #5bdcff}.battle-enemy img,.battle-enemy>div{width:160px;height:180px;object-fit:cover;border-radius:18px;display:grid;place-items:center;font-size:90px;background:#29130e}.battle-vs>strong{font-size:50px;color:#ffcb55;text-shadow:0 0 25px #ff5b00}.clashing .battle-team{animation:battleCharge .65s ease-in forwards}.clashing .battle-enemy{animation:battleEnemyCharge .65s ease-in forwards}.battle-win{animation:battleVictory .7s ease}.battle-lose{filter:saturate(.35)}#battleMessage strong,#battleMessage span,#battleMessage em{display:block;margin:8px}#battleMessage strong{font-size:48px;color:#ffe36c;text-shadow:0 0 25px #ff8a00}@keyframes battleCharge{50%{transform:translateX(100px) scale(1.1)}100%{transform:none}}@keyframes battleEnemyCharge{50%{transform:translateX(-100px) scale(1.15)}100%{transform:none}}@keyframes battleVictory{30%{box-shadow:inset 0 0 120px #fff}100%{box-shadow:none}}@media(max-width:800px){.battle-layout{grid-template-columns:1fr}.battle-deck{grid-template-columns:repeat(5,70px);overflow:auto}.battle-card-picker{grid-template-columns:1fr}.battle-vs{gap:4px}.battle-team img{width:48px;height:72px}.battle-enemy img,.battle-enemy>div{width:100px;height:120px}} .battle-auto-toggle{display:flex;align-items:center;gap:11px;margin-top:14px;padding:13px 14px;border:1px solid rgba(104,220,255,.3);border-radius:13px;background:rgba(7,24,38,.85);cursor:pointer}.battle-auto-toggle input{width:21px;height:21px;accent-color:#66dcff}.battle-auto-toggle span,.battle-auto-toggle b,.battle-auto-toggle small{display:block}.battle-auto-toggle b{color:#e9faff}.battle-auto-toggle small{margin-top:3px;color:#8fa9bb;font-size:11px}.battle-auto-progress,.battle-auto-result{width:min(520px,calc(100vw - 32px));text-align:center}.battle-auto-spinner{width:58px;height:58px;margin:0 auto 20px;border:5px solid rgba(104,220,255,.18);border-top-color:#68dcff;border-radius:50%;animation:battleAutoSpin .8s linear infinite}.battle-auto-progress strong{display:block;margin-top:18px;color:#ffdf80;font-size:12px}.battle-auto-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.battle-auto-stats span{padding:14px;border:1px solid rgba(104,220,255,.2);border-radius:12px;background:rgba(5,19,31,.8);color:#9db6c7}.battle-auto-stats b{display:block;margin-top:5px;color:#fff;font-size:20px}.battle-auto-drops{display:grid;gap:6px;max-height:180px;margin:0 0 18px;padding:14px;overflow:auto;border-radius:12px;background:rgba(5,19,31,.8);text-align:left}.battle-auto-drops span{color:#c5d9e6;font-size:12px}@keyframes battleAutoSpin{to{transform:rotate(360deg)}} @media(max-width:760px){.battle-auto-toggle{margin-top:12px}.battle-auto-toggle small{font-size:10px}} .auto-battle-next{margin-top:12px!important;padding:9px 12px;border:1px solid rgba(104,220,255,.32);border-radius:10px;color:#9ee9ff!important;line-height:1.5}.battle-auto-total{display:grid;gap:5px;margin-top:14px;padding:12px;border:1px solid rgba(255,215,105,.34);border-radius:12px;background:rgba(16,22,31,.86)}.battle-auto-total b{font-size:16px!important;color:#ffe073!important}.battle-auto-total span,.battle-auto-total small{color:#d6e5ef} /* v8.6.1 WAGOSU iframe header + maintenance session */ @media(max-width:1250px){.page{padding-left:26px;padding-right:26px}.header{gap:14px}.brand-logo{width:84px}.brand{gap:10px}.brand h1{font-size:27px;letter-spacing:-1.2px}.eyebrow{font-size:10px!important;letter-spacing:1.5px}.tabs{gap:4px}.tab{padding:11px 16px;font-size:14px}} @media(max-width:1050px) and (min-width:768px){.brand-logo{width:72px}.brand h1{font-size:23px}.tab{padding:10px 12px;font-size:13px}} .maintenance-session{display:grid;gap:9px;margin:22px 0;padding:16px;border:1px solid rgba(52,211,153,.26);border-radius:14px;background:rgba(52,211,153,.06);text-align:left}.maintenance-session>span{display:flex;align-items:center;gap:8px;color:#71e7ae;font-size:12px;font-weight:900}.maintenance-session>b{font-size:20px}.maintenance-session>div{display:flex;gap:8px}.maintenance-session input{min-width:0;flex:1;padding:12px;border:1px solid rgba(92,205,255,.28);border-radius:10px;background:#06111f;color:#fff}.maintenance-session button:not(.btn){border:0;border-radius:10px;padding:0 14px;background:#168bc2;color:#fff;font-weight:900;cursor:pointer}.maintenance-session small{color:#8ba2b6;line-height:1.5}.maintenance-session.logged-out{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.07)} /* v8.6.2 cinematic PVE battle */ .battle-modal{padding:0!important;background:rgba(1,5,12,.96)!important}.battle-modal .battle-stage{position:relative;width:min(1180px,100vw);height:min(700px,100vh);min-height:560px;border:0;border-radius:0;overflow:hidden;background:#050b14;color:#fff;isolation:isolate}.battle-backdrop{position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 50% 45%,rgba(32,83,135,.62),transparent 36%),linear-gradient(180deg,#06101e 0%,#0a1a2d 50%,#02060c 100%)}.battle-backdrop:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 45px,rgba(80,170,255,.03) 46px 47px);animation:battleBgMove 7s linear infinite}.battle-fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8}.battle-topline{position:absolute;top:20px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;z-index:10;color:#77ddff;font-size:12px;letter-spacing:2px}.battle-topline b{color:#ffd76b;text-shadow:0 0 18px rgba(255,177,28,.75)}.battle-arena{position:absolute;inset:65px 30px 130px;display:grid;grid-template-columns:1fr 130px 1fr;align-items:center}.battle-side{position:relative;display:grid;place-items:center;min-width:0}.battle-side>small{margin-top:16px;color:#7392ac;letter-spacing:2px}.battle-team{display:flex;justify-content:center;align-items:center;perspective:900px}.battle-card-fighter{position:relative;width:115px;height:165px;margin-left:-28px;border-radius:15px;overflow:hidden;border:2px solid #54ddff;background:#091829;box-shadow:0 0 20px rgba(54,207,255,.2);opacity:0;transform:translateX(-180px) rotateY(-60deg) scale(.7)}.battle-card-fighter:first-child{margin-left:0}.battle-card-fighter img{width:100%;height:100%;object-fit:cover}.battle-card-fighter span{position:absolute;left:0;right:0;bottom:0;padding:7px 4px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cards-enter .battle-card-fighter{animation:battleCardEnter .48s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*90ms)}.battle-center{display:grid;place-items:center;z-index:5}.battle-vs-mark{font-size:64px;color:#ffd463;text-shadow:0 0 12px #ff8a00,0 0 36px #ff5a00;transform:scale(.7);animation:vsPulse 1.4s ease-in-out infinite}.battle-center span{position:absolute;font-size:44px;font-weight:1000;color:#fff;text-shadow:0 0 22px #34cfff}.battle-enemy{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateX(180px) scale(.72)}.enemy-enter .battle-enemy{animation:battleEnemyEnter .58s cubic-bezier(.2,.9,.2,1) forwards}.battle-enemy-frame{width:210px;height:230px;display:grid;place-items:center;border-radius:26px;overflow:hidden;background:radial-gradient(circle,#4a1912,#170806 72%);border:2px solid rgba(255,112,63,.42);box-shadow:0 0 45px rgba(255,72,22,.25)}.battle-enemy-frame img{width:100%;height:100%;object-fit:contain;padding:16px}.battle-enemy.boss .battle-enemy-frame{border-color:#ffcf45;box-shadow:0 0 55px rgba(255,85,18,.42),inset 0 0 45px rgba(255,58,0,.16)}.battle-enemy-name{width:210px;margin-top:12px;text-align:center}.battle-enemy-name small,.battle-enemy-name b{display:block}.battle-enemy-name small{font-size:10px;letter-spacing:2px;color:#ff9e5b}.battle-enemy-name b{margin-top:4px;font-size:18px;line-height:1.2;white-space:normal;word-break:keep-all}.battle-impact{position:absolute;inset:0;pointer-events:none;z-index:6}.battle-impact i{position:absolute;left:50%;top:45%;width:10px;height:10px;border-radius:50%;border:3px solid rgba(255,255,255,.8);opacity:0}.hit-one .battle-impact i,.hit-two .battle-impact i,.final-strike .battle-impact i{animation:impactRing .55s ease-out forwards}.hit-two .battle-impact i:nth-child(2),.final-strike .battle-impact i:nth-child(2){animation-delay:.08s}.hit-two .battle-impact i:nth-child(3),.final-strike .battle-impact i:nth-child(3){animation-delay:.16s}.battle-message{position:absolute;left:0;right:0;bottom:34px;z-index:12;text-align:center;min-height:90px}.battle-message>span,.battle-message>em,.battle-message>strong{display:block}.battle-message>strong{font-size:58px;line-height:1;color:#ffe172;text-shadow:0 0 15px #ff8a00,0 0 42px #ff5a00;animation:resultPop .55s cubic-bezier(.2,1.3,.3,1)}.battle-message>span{margin-top:12px;color:#c8d9e7}.battle-message>em{margin-top:10px;font-size:11px;color:#6f879c}.battle-reward-pop{display:inline-flex;align-items:center;gap:10px;margin-top:13px;padding:10px 20px;border-radius:999px;background:linear-gradient(90deg,#4f3100,#996000,#4f3100);border:1px solid #ffd75a;box-shadow:0 0 30px rgba(255,190,42,.35);animation:rewardRise .65s ease}.battle-reward-pop small{letter-spacing:2px}.battle-reward-pop b{font-size:22px}.battle-defeat-tip{margin:14px auto 0;width:max-content;max-width:90%;padding:10px 18px;border-radius:999px;background:rgba(160,183,202,.12);color:#b8cad8}.battle-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffd75a;box-shadow:0 0 12px #ff7a00;transform:translate(-50%,-50%);animation:particleFly .72s ease-out forwards}.hit-one .battle-team,.hit-two .battle-team,.final-strike .battle-team{animation:teamAttack .5s ease}.counter .battle-enemy{animation:enemyCounter .5s ease}.hit-one .battle-enemy,.hit-two .battle-enemy,.final-strike .battle-enemy{animation:enemyHit .5s ease}.final-strike:after{content:"";position:absolute;inset:0;z-index:7;background:white;animation:screenFlash .55s ease-out forwards}.final-fail .battle-team{animation:teamDefeat .7s ease forwards}.battle-win .battle-enemy{animation:enemyDefeat .75s ease forwards}.battle-lose .battle-team{filter:grayscale(.7);opacity:.38;transform:translateY(18px)}.battle-damage{position:absolute;z-index:20;font-size:30px;color:#fff;text-shadow:0 2px 0 #ad1d00,0 0 18px #ff5b27;pointer-events:none;animation:damageFloat .82s ease-out forwards}.battle-damage.enemy{left:71%;top:31%}.battle-damage.player{left:25%;top:36%}.battle-damage.critical{font-size:37px;color:#ffe563;text-shadow:0 2px 0 #b04300,0 0 22px #ff7500}.ready .battle-vs-mark{transform:scale(1.2)}.fight .battle-vs-mark{animation:fightBlast .38s ease forwards} @keyframes battleBgMove{to{transform:translateX(47px)}}@keyframes battleCardEnter{to{opacity:1;transform:translateX(0) rotateY(0) scale(1)}}@keyframes battleEnemyEnter{70%{opacity:1;transform:translateX(-12px) scale(1.08)}100%{opacity:1;transform:none}}@keyframes vsPulse{50%{transform:scale(1.08)}}@keyframes teamAttack{45%{transform:translateX(150px) scale(1.08)}70%{filter:brightness(1.8)}100%{transform:none}}@keyframes enemyCounter{45%{transform:translateX(-150px) scale(1.08)}100%{transform:none}}@keyframes enemyHit{35%{transform:translateX(22px) rotate(3deg);filter:brightness(2)}60%{transform:translateX(-14px) rotate(-2deg)}100%{transform:none}}@keyframes enemyDefeat{30%{filter:brightness(3);transform:scale(1.15)}100%{opacity:0;transform:translateX(170px) rotate(18deg) scale(.6);filter:blur(6px)}}@keyframes teamDefeat{to{opacity:.25;transform:translateX(-100px) rotate(-4deg);filter:grayscale(1)}}@keyframes impactRing{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(24)}}@keyframes particleFly{to{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(.2)}}@keyframes screenFlash{0%{opacity:.9}100%{opacity:0}}@keyframes fightBlast{50%{transform:scale(1.8);filter:brightness(2)}100%{opacity:0;transform:scale(3)}}@keyframes damageFloat{0%{opacity:0;transform:translateY(12px) scale(.7)}25%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-60px) scale(.9)}}@keyframes resultPop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}@keyframes rewardRise{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:none}} @media(max-width:800px){.battle-modal .battle-stage{min-height:100vh}.battle-arena{inset:60px 8px 145px;grid-template-columns:1fr 64px 1fr}.battle-card-fighter{width:55px;height:90px;margin-left:-16px}.battle-enemy-frame{width:130px;height:155px;border-radius:18px}.battle-enemy-name{width:140px}.battle-enemy-name b{font-size:14px}.battle-vs-mark{font-size:38px}.battle-message>strong{font-size:42px}.battle-damage.enemy{left:68%}.battle-damage.player{left:18%}} /* v8.6.3 extended battle cinematic */ .battle-hud{position:absolute;z-index:14;top:48px;left:34px;right:34px;display:grid;grid-template-columns:1fr 1fr;gap:180px}.battle-hp{min-width:0}.battle-hp-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:1px}.battle-hp-head span{color:#fff}.battle-hp-track{height:14px;margin-top:6px;border:1px solid rgba(255,255,255,.3);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.55);box-shadow:inset 0 0 8px #000}.battle-hp-track i{display:block;width:100%;height:100%;transition:width .5s cubic-bezier(.2,.8,.2,1);background:linear-gradient(90deg,#16c87a,#8eff55);box-shadow:0 0 14px #36ef88}.battle-hp-enemy{text-align:right}.battle-hp-enemy .battle-hp-track i{margin-left:auto;background:linear-gradient(90deg,#ffba35,#ff3c35);box-shadow:0 0 14px #ff553d}.battle-hp small{display:block;margin-top:5px;color:#7f9bb3;font-size:10px}.battle-arena{inset:112px 30px 130px}.battle-enemy-card{position:relative;width:224px;height:318px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(255,119,67,.65);border-radius:26px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#4a1912,#170806 70%);box-shadow:0 0 45px rgba(255,72,22,.28),inset 0 0 45px rgba(255,80,25,.09);opacity:0;transform:translateX(180px) scale(.72)}.enemy-enter .battle-enemy-card{animation:battleEnemyEnter .7s cubic-bezier(.2,.9,.2,1) forwards}.battle-enemy-card.boss{border-color:#ffcf45;box-shadow:0 0 62px rgba(255,85,18,.5),inset 0 0 55px rgba(255,58,0,.18)}.enemy-card-badge{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:3px;color:#ffad6f}.battle-enemy-visual{width:172px;height:176px;display:grid;place-items:center}.battle-enemy-visual img{width:100%;height:100%;object-fit:contain}.battle-enemy-title{width:88%;margin-top:8px;padding-top:13px;border-top:1px solid rgba(255,255,255,.12);font-size:20px;font-weight:900;line-height:1.2;text-align:center;word-break:keep-all}.enemy-card-power{margin-top:8px;font-size:10px;letter-spacing:1px;color:#ffbe77}.battle-card-fighter{overflow:visible}.battle-card-fighter>img{border-radius:13px}.fighter-grade{position:absolute;top:7px;left:7px;z-index:3;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.72);font-size:10px;font-weight:1000;color:#fff}.fighter-aura{position:absolute;inset:-14px;z-index:-1;border-radius:24px;opacity:0;filter:blur(2px)}.active-attacker{z-index:10!important;transform:translateY(-12px) scale(1.12)!important;transition:transform .18s}.active-attacker .fighter-aura{opacity:1;animation:fighterAuraPulse .55s ease infinite alternate}.skill-normal .fighter-aura{background:radial-gradient(circle,rgba(90,220,255,.45),transparent 68%)}.skill-rare .fighter-aura{background:radial-gradient(circle,rgba(90,145,255,.75),transparent 68%)}.skill-epic .fighter-aura{background:radial-gradient(circle,rgba(190,75,255,.85),transparent 68%)}.skill-legendary .fighter-aura{background:radial-gradient(circle,rgba(255,190,40,.95),transparent 68%);box-shadow:0 0 36px #ff9d00}.skill-mythic .fighter-aura{background:conic-gradient(from 0deg,#ff4d4d,#ffd84d,#58e8ff,#b65cff,#ff4d4d);filter:blur(7px);animation:mythicAuraSpin .65s linear infinite!important}.member-strike .active-attacker{animation:singleCardStrike .58s cubic-bezier(.2,.8,.2,1)}.member-skill .active-attacker{animation:singleCardSkill .76s cubic-bezier(.15,.8,.2,1)}.member-skill:after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.9) 49%,transparent 62%);animation:skillSlash .62s ease-out forwards}.monster-heavy-attack .battle-enemy-card{animation:monsterHeavyCharge .78s cubic-bezier(.2,.8,.2,1)}.monster-heavy-attack:after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 28% 43%,rgba(255,48,25,.85),transparent 25%);animation:monsterImpactFlash .7s ease-out forwards}.monster-heavy-attack .battle-team{animation:teamHeavyHit .72s ease}.final-strike-v863:after,.final-fail-v863:after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:#fff;animation:screenFlash .8s ease-out forwards}.final-strike-v863 .battle-team{animation:teamFinalRush .95s cubic-bezier(.1,.8,.15,1)}.final-fail-v863 .battle-enemy-card{animation:monsterFinalRush .95s cubic-bezier(.1,.8,.15,1)}.battle-win-v863 .battle-enemy-card{animation:enemyDefeat 1s ease forwards}.battle-lose-v863 .battle-team{animation:teamDefeat .9s ease forwards}.battle-damage{z-index:30}.battle-message{z-index:32} @keyframes fighterAuraPulse{to{transform:scale(1.18);opacity:.7}}@keyframes mythicAuraSpin{to{transform:rotate(360deg) scale(1.14)}}@keyframes singleCardStrike{0%{transform:translateY(-12px) scale(1.12)}45%{transform:translateX(330px) translateY(-25px) scale(1.18) rotate(2deg)}60%{filter:brightness(2.6)}100%{transform:translateY(-12px) scale(1.12)}}@keyframes singleCardSkill{0%{transform:translateY(-12px) scale(1.12)}30%{transform:translateY(-34px) scale(1.28);filter:brightness(2)}58%{transform:translateX(350px) translateY(-18px) scale(1.25) rotate(4deg)}70%{filter:brightness(3)}100%{transform:translateY(-12px) scale(1.12)}}@keyframes skillSlash{0%{opacity:0;transform:translateX(-35%)}30%{opacity:1}100%{opacity:0;transform:translateX(40%)}}@keyframes monsterHeavyCharge{0%{transform:none}28%{transform:translateX(20px) scale(1.08)}58%{transform:translateX(-360px) scale(1.25) rotate(-3deg);filter:brightness(2.2)}100%{transform:none}}@keyframes monsterImpactFlash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}@keyframes teamHeavyHit{35%{transform:translateX(-45px) rotate(-3deg);filter:brightness(2)}55%{transform:translateX(22px) rotate(2deg)}100%{transform:none}}@keyframes teamFinalRush{35%{transform:translateX(80px) scale(1.1)}62%{transform:translateX(360px) scale(1.22);filter:brightness(3)}100%{transform:none}}@keyframes monsterFinalRush{35%{transform:translateX(-70px) scale(1.12)}62%{transform:translateX(-380px) scale(1.28);filter:brightness(3)}100%{transform:none}} @media(max-width:800px){.battle-hud{top:44px;left:10px;right:10px;gap:62px}.battle-hp-head{font-size:9px}.battle-hp-track{height:10px}.battle-arena{inset:100px 8px 145px}.battle-enemy-card{width:138px;height:225px;border-radius:18px}.battle-enemy-visual{width:108px;height:120px}.battle-enemy-title{font-size:14px}.enemy-card-badge,.enemy-card-power{font-size:8px}.fighter-grade{font-size:8px;padding:2px 4px}@keyframes singleCardStrike{45%{transform:translateX(125px) translateY(-20px) scale(1.18)}100%{transform:translateY(-12px) scale(1.12)}}@keyframes singleCardSkill{30%{transform:translateY(-25px) scale(1.25)}58%{transform:translateX(145px) translateY(-15px) scale(1.22)}100%{transform:translateY(-12px) scale(1.12)}}@keyframes monsterHeavyCharge{58%{transform:translateX(-145px) scale(1.2)}100%{transform:none}}} /* v8.6.4 battle energy */ .battle-cover-side{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;justify-content:flex-end} .battle-energy-card{min-width:235px;padding:15px 17px;border:1px solid rgba(255,207,85,.34);border-radius:16px;background:linear-gradient(145deg,rgba(25,18,8,.92),rgba(5,7,16,.94));box-shadow:0 12px 35px rgba(0,0,0,.25),inset 0 0 22px rgba(255,190,55,.05)} .battle-energy-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:16px}.battle-energy-card span{font-size:12px;color:#d8c49a;font-weight:800;letter-spacing:.04em}.battle-energy-card b{font-size:22px;color:#ffe49a;text-shadow:0 0 15px rgba(255,190,55,.35)} .battle-energy-track{height:9px;margin:11px 0 8px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.09);box-shadow:inset 0 1px 5px rgba(0,0,0,.55)} .battle-energy-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e69524,#ffe683);box-shadow:0 0 14px rgba(255,198,63,.75);transition:width .35s ease} .battle-energy-card small{display:block;text-align:right;color:#aab1c6;font-size:11px} @media(max-width:900px){.battle-cover-side{width:100%;justify-content:stretch}.battle-energy-card,.battle-total{flex:1;min-width:180px}} @media(max-width:560px){.battle-cover-side{display:grid;grid-template-columns:1fr}.battle-energy-card{min-width:0}.battle-energy-card b{font-size:19px}} /* v8.6.8 total tier */ .rank-panel-v2{grid-template-columns:1.15fr .85fr}.my-tier-card{margin-top:24px;padding:24px;display:flex;align-items:center;gap:24px;border:1px solid rgba(124,242,255,.2);border-radius:20px;background:radial-gradient(circle at 18% 50%,rgba(124,242,255,.12),transparent 34%),rgba(0,0,0,.18)}.my-tier-card>div:last-child span,.my-tier-card small{display:block;color:#8dbbd3}.my-tier-card strong{display:block;font-size:40px;margin:5px 0;color:#fff}.tier-guide{padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(8,33,78,.82),rgba(3,14,37,.91))}.tier-road{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.tier-road-item{padding:12px;border-radius:14px;background:rgba(255,255,255,.035);text-align:center}.tier-road-item>b{display:block;font-size:12px;color:#a9d1e7}.rank-list-v2 .rank-list-row{grid-template-columns:34px 74px 1fr auto;min-height:66px}.rank-list-row span small{display:block;color:#759bb0;font-size:10px;margin-top:3px}.tier-emblem{--tier-color:#7ceeff;position:relative;display:inline-grid;grid-template-columns:20px 42px 20px;grid-template-rows:44px auto;align-items:center;justify-items:center;color:var(--tier-color);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tier-color) 45%,transparent))}.tier-emblem .tier-core{grid-column:2;position:relative;width:40px;height:40px;display:grid;place-items:center;transform:rotate(45deg);border:2px solid var(--tier-color);background:linear-gradient(135deg,color-mix(in srgb,var(--tier-color) 30%,#06152d),#061225);box-shadow:inset 0 0 13px color-mix(in srgb,var(--tier-color) 28%,transparent)}.tier-emblem .tier-core b{transform:rotate(-45deg);font-size:18px;color:#fff;text-shadow:0 0 8px var(--tier-color)}.tier-emblem .tier-core i{position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--tier-color) 65%,white);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.tier-wing{width:20px;height:30px;background:linear-gradient(135deg,var(--tier-color),transparent);clip-path:polygon(0 10%,100% 40%,65% 55%,100% 72%,0 95%,30% 52%)}.tier-wing.right{transform:scaleX(-1)}.tier-emblem em{grid-column:1/4;font-style:normal;font-size:10px;font-weight:1000;letter-spacing:.5px;color:#fff;text-shadow:0 0 8px var(--tier-color)}.tier-emblem.has-aura:before{content:"";position:absolute;inset:-7px 12px 12px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tier-color) 30%,transparent),transparent 68%);animation:tierPulse 1.8s ease-in-out infinite}.tier-emblem.large{transform:scale(1.45);margin:12px 15px}.tier-emblem.small{transform:scale(.86);margin:-4px}.tier-emblem.tiny{transform:scale(.7);transform-origin:center;margin:-8px -4px}@keyframes tierPulse{50%{transform:scale(1.18);opacity:.55}}.pvp-coming{margin-top:22px;padding:18px;border:1px solid rgba(255,111,145,.25);border-radius:16px;background:linear-gradient(135deg,rgba(255,111,145,.08),rgba(123,84,255,.08))}.pvp-coming small,.pvp-coming span{display:block;color:#8dbbd3}.pvp-coming strong{display:block;margin:5px 0;font-size:26px;letter-spacing:2px}@media(max-width:767px){.rank-panel-v2{grid-template-columns:1fr}.my-tier-card{flex-direction:column;text-align:center}.rank-list-v2 .rank-list-row{grid-template-columns:28px 58px 1fr auto}.tier-road{grid-template-columns:1fr 1fr}} /* v8.6.12 tier emblem layout renewal - no diagonal shine */ .tier-emblem{ --tier-color:#7ceeff; position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start; width:112px;min-width:112px;height:116px;isolation:isolate;color:var(--tier-color); overflow:visible;filter:drop-shadow(0 8px 10px rgba(0,0,0,.52)); } /* v1021: ranking tier emblems stay readable on desktop and mobile */ .tier-emblem.rank{width:72px;min-width:72px;height:70px;transform:none!important;margin:0;justify-content:center} .tier-emblem.rank .tier-stage{width:68px;height:58px} .tier-emblem.rank .tier-svg{width:59px;height:56px} .tier-emblem.rank .tier-aura{width:63px;height:52px} .tier-emblem.rank .tier-ring{width:52px;height:52px} .tier-emblem.rank .tier-ring-two{width:62px;height:62px} .tier-emblem.rank .tier-spark{display:none} .tier-emblem.rank em{position:absolute;bottom:-1px;max-width:70px;padding:2px 6px;font-size:9px;line-height:1} .rank-list-v2 .rank-list-row{grid-template-columns:38px 78px minmax(0,1fr) auto;min-height:88px} .rank-pvp-panel .pvp-rank-row,.pvp-ranking .pvp-rank-row{grid-template-columns:44px 78px minmax(0,1fr) 110px;min-height:96px} .rank-pvp-panel .pvp-my-rank,.pvp-my-rank{grid-template-columns:82px minmax(0,1fr);min-height:94px;overflow:visible} .pvp-tier-road-item .tier-emblem.small{transform:scale(.88);margin:-7px -8px -5px} @media(max-width:620px){ .tier-emblem.rank{width:64px;min-width:64px;height:64px} .tier-emblem.rank .tier-stage{width:62px;height:54px} .tier-emblem.rank .tier-svg{width:54px;height:51px} .rank-list-v2 .rank-list-row{grid-template-columns:28px 66px minmax(0,1fr) auto;min-height:82px;gap:6px} .rank-pvp-panel .pvp-rank-row,.pvp-ranking .pvp-rank-row{grid-template-columns:30px 66px minmax(0,1fr) 68px;min-height:86px;column-gap:6px} .rank-pvp-panel .pvp-my-rank,.pvp-my-rank{grid-template-columns:70px minmax(0,1fr);min-height:86px} } .tier-emblem *{pointer-events:none} .tier-emblem .tier-stage{position:relative;width:104px;height:88px;display:grid;place-items:center;z-index:1} .tier-emblem .tier-aura{position:absolute;z-index:-4;left:50%;top:46%;width:88px;height:72px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--tier-color) 40%,transparent) 0,color-mix(in srgb,var(--tier-color) 17%,transparent) 42%,transparent 74%);opacity:.58} .tier-emblem .tier-ring{position:absolute;z-index:-3;left:50%;top:46%;width:76px;height:76px;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--tier-color) 68%,white);border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;opacity:.42;box-shadow:0 0 10px color-mix(in srgb,var(--tier-color) 48%,transparent)} .tier-emblem .tier-ring-two{width:90px;height:90px;border-style:dashed;opacity:.18} .tier-emblem.has-aura .tier-aura{opacity:.92;animation:tierAuraPowerV2 1.8s ease-in-out infinite} .tier-emblem.has-aura .tier-ring-one{opacity:.78;animation:tierRingSpinV2 6s linear infinite} .tier-emblem.has-aura .tier-ring-two{opacity:.36;animation:tierRingSpinReverseV2 9s linear infinite} .tier-emblem .tier-svg{position:relative;z-index:3;width:88px;height:82px;overflow:visible;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5)) drop-shadow(0 0 8px color-mix(in srgb,var(--tier-color) 38%,transparent))} .tier-emblem .metal-dark{fill:#071326;stroke:color-mix(in srgb,var(--tier-color) 55%,#d9efff);stroke-width:2.2} .tier-emblem .metal-mid{fill:color-mix(in srgb,var(--tier-color) 50%,#10192c);stroke:color-mix(in srgb,var(--tier-color) 72%,white);stroke-width:1.5} .tier-emblem .metal-light{fill:color-mix(in srgb,var(--tier-color) 72%,white);stroke:#fff8;stroke-width:1} .tier-emblem .gem{fill:color-mix(in srgb,var(--tier-color) 78%,white);stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 0 5px var(--tier-color))} .tier-emblem .gem-shadow{fill:color-mix(in srgb,var(--tier-color) 55%,#071020)} .tier-emblem .wing{fill:color-mix(in srgb,var(--tier-color) 62%,#dcecff);stroke:color-mix(in srgb,var(--tier-color) 80%,white);stroke-width:1.4} .tier-emblem .wing-shadow{fill:color-mix(in srgb,var(--tier-color) 32%,#071020)} .tier-emblem .crown{fill:#ffe28a;stroke:#fff2b0;stroke-width:1.3;filter:drop-shadow(0 0 4px rgba(255,205,65,.7))} .tier-emblem .tier-spark{position:absolute;z-index:4;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff,0 0 9px var(--tier-color);opacity:0} .tier-emblem.has-aura .tier-spark{opacity:1}.tier-emblem .s1{left:8px;top:20px;animation:tierSparkV2 2.4s .2s infinite}.tier-emblem .s2{right:9px;top:10px;animation:tierSparkV2 2.8s .8s infinite}.tier-emblem .s3{right:15px;top:58px;animation:tierSparkV2 2.5s 1.4s infinite} .tier-emblem em{position:relative;z-index:5;display:block;max-width:108px;margin-top:-2px;padding:3px 10px;border-radius:999px;font-style:normal;font-size:11px;line-height:1.15;font-weight:1000;white-space:nowrap;letter-spacing:.25px;color:#fff;background:rgba(2,8,18,.78);border:1px solid color-mix(in srgb,var(--tier-color) 34%,transparent);text-shadow:0 1px 2px #000,0 0 8px var(--tier-color);box-shadow:0 4px 10px rgba(0,0,0,.28)} .tier-emblem.large{width:148px;min-width:148px;height:142px;margin:0 4px}.tier-emblem.large .tier-stage{width:140px;height:108px}.tier-emblem.large .tier-svg{width:112px;height:104px}.tier-emblem.large .tier-aura{width:126px;height:100px}.tier-emblem.large .tier-ring{width:102px;height:102px}.tier-emblem.large .tier-ring-two{width:122px;height:122px}.tier-emblem.large em{font-size:13px;padding:4px 13px;max-width:142px} .tier-emblem.small{width:106px;min-width:106px;height:108px}.tier-emblem.small .tier-stage{width:100px;height:82px}.tier-emblem.small .tier-svg{width:78px;height:74px}.tier-emblem.small .tier-aura{width:82px;height:66px}.tier-emblem.small .tier-ring{width:68px;height:68px}.tier-emblem.small .tier-ring-two{width:82px;height:82px}.tier-emblem.small em{font-size:10px;padding:2px 8px;max-width:102px} .tier-emblem.tiny{width:62px;min-width:62px;height:58px;justify-content:center}.tier-emblem.tiny .tier-stage{width:58px;height:49px}.tier-emblem.tiny .tier-svg{width:47px;height:45px}.tier-emblem.tiny .tier-aura{width:51px;height:42px}.tier-emblem.tiny .tier-ring{width:42px;height:42px}.tier-emblem.tiny .tier-ring-two{display:none}.tier-emblem.tiny .tier-spark{display:none}.tier-emblem.tiny em{position:absolute;bottom:-3px;max-width:60px;padding:1px 5px;font-size:8px;line-height:1;letter-spacing:-.2px} .tier-emblem.tier-bronze .tier-ring-two,.tier-emblem.tier-silver .tier-ring-two,.tier-emblem.tier-gold .tier-ring-two{display:none} .tier-emblem.tier-bronze .tier-aura,.tier-emblem.tier-silver .tier-aura{opacity:.34} .tier-emblem.tier-platinum .tier-svg,.tier-emblem.tier-diamond .tier-svg{filter:drop-shadow(0 4px 3px rgba(0,0,0,.5)) drop-shadow(0 0 12px color-mix(in srgb,var(--tier-color) 58%,transparent))} .tier-emblem.tier-master .tier-svg,.tier-emblem.tier-grandmaster .tier-svg{width:100px;height:90px;filter:drop-shadow(0 5px 4px rgba(0,0,0,.58)) drop-shadow(0 0 15px color-mix(in srgb,var(--tier-color) 75%,transparent))} .tier-emblem.tier-grandmaster .tier-aura{width:118px;height:94px;background:radial-gradient(ellipse,rgba(255,255,255,.15) 0,color-mix(in srgb,var(--tier-color) 62%,transparent) 24%,rgba(123,84,255,.24) 50%,transparent 75%)} .tier-emblem.tier-grandmaster .tier-svg{animation:grandEmblemPulseV2 1.9s ease-in-out infinite} .tier-road{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tier-road-item{min-height:142px;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible}.tier-road-item>b{margin-top:1px;white-space:nowrap} .my-tier-card{min-height:218px}.rank-list-v2 .rank-list-row{grid-template-columns:38px 66px 1fr auto;min-height:76px;overflow:visible}.rank-list-v2 .rank-list-row:before{display:none!important}.rank-number i{font-size:14px;top:-15px} @keyframes tierRingSpinV2{to{transform:translate(-50%,-50%) rotate(360deg)}} @keyframes tierRingSpinReverseV2{to{transform:translate(-50%,-50%) rotate(-360deg)}} @keyframes tierAuraPowerV2{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.68}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}} @keyframes tierSparkV2{0%,100%{opacity:0;transform:translateY(5px) scale(.4)}38%{opacity:1;transform:translateY(-4px) scale(1.3)}} @keyframes grandEmblemPulseV2{0%,100%{transform:scale(.98)}50%{transform:scale(1.035)}} @media(max-width:767px){.tier-road{grid-template-columns:repeat(2,minmax(0,1fr))}.tier-road-item{min-height:132px}.tier-emblem.small{transform:scale(.92);margin:-4px}.my-tier-card{min-height:250px}.rank-list-v2 .rank-list-row{grid-template-columns:30px 58px 1fr auto}.tier-emblem.large{transform:scale(.92);margin:-8px 0}} /* v8.7 asynchronous PvP */ .pvp-cover{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(91,49,255,.18),rgba(0,184,255,.09));position:relative;z-index:2}.pvp-cover h2{margin:4px 0 8px}.pvp-cover p{margin:0}.pvp-me{text-align:right;min-width:250px}.pvp-me span,.pvp-me small{display:block;color:#9ecbe3}.pvp-me b{display:block;margin:7px 0;font-size:18px;white-space:nowrap}.pvp-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0;position:relative;z-index:2}.pvp-tabs button{min-width:0;padding:12px 8px;border:1px solid var(--line);border-radius:12px;background:#07142e;color:#9ecbe3;font-weight:900;white-space:nowrap}.pvp-tabs button.active{color:#fff;background:linear-gradient(135deg,#6e39d6,#1f7bff)}.pvp-content{position:relative;z-index:2;padding:20px;border:1px solid var(--line);border-radius:20px;background:rgba(3,14,37,.76)}.pvp-section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:16px}.pvp-section-head h2{margin:3px 0}.pvp-opponents{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pvp-opponent{padding:16px;border:1px solid rgba(98,232,255,.2);border-radius:16px;background:linear-gradient(180deg,#0a2148,#06142e)}.pvp-op-head,.pvp-op-scores,.pvp-op-meta{display:flex;justify-content:space-between;gap:10px;align-items:center}.pvp-op-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pvp-op-head span{color:#7ceeff;white-space:nowrap}.pvp-op-scores{margin:16px 0;padding:10px;border-radius:10px;background:rgba(0,0,0,.2)}.pvp-op-scores span{font-size:12px}.pvp-op-scores b{display:block;font-size:15px}.pvp-op-meta{color:#8abbd4;font-size:12px}.pvp-op-meta em{font-style:normal}.pvp-fight{width:100%;min-width:0;margin-top:14px}.pvp-deck-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:15px}.pvp-card-mini{min-width:0;border:1px solid rgba(98,232,255,.2);border-radius:10px;overflow:hidden;background:#07142e}.pvp-card-mini img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}.pvp-card-mini span{display:block;padding:6px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pvp-empty-slot{display:grid;place-items:center;aspect-ratio:3/4;border:1px dashed #315a7d;border-radius:10px;color:#6f9fb8;font-size:22px}.pvp-card-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-height:430px;overflow:auto;margin:14px 0}.pvp-pick{padding:0;border:0;background:transparent;color:#fff;opacity:.72}.pvp-pick.selected{opacity:1;outline:2px solid #69e8ff;border-radius:10px}.pvp-history,.pvp-ranking{display:grid;gap:8px}.pvp-history-row,.pvp-rank-row{display:grid;grid-template-columns:64px 1fr 90px;align-items:center;gap:10px;padding:12px;border:1px solid rgba(98,232,255,.14);border-radius:12px;background:rgba(2,10,27,.58)}.pvp-history-row span small,.pvp-rank-row span small{display:block;color:#7faec8;margin-top:3px}.pvp-history-row strong,.pvp-rank-row strong{text-align:right;white-space:nowrap}.pvp-history-row.win>b,.pvp-history-row.win>strong{color:#73f0bd}.pvp-history-row.lose>b,.pvp-history-row.lose>strong{color:#ff8196}.pvp-my-rank,.pvp-reward-current{display:flex;align-items:center;gap:15px;padding:15px;margin-bottom:12px;border:1px solid #604cb2;border-radius:14px;background:rgba(91,49,255,.13)}.pvp-my-rank span{margin-left:auto}.pvp-reward-current{flex-wrap:wrap}.pvp-reward-current strong{margin-left:auto}.pvp-reward-current .btn{min-width:130px}.pvp-tier-rewards{display:grid;gap:8px}.pvp-tier-rewards>div{display:grid;grid-template-columns:1fr 1fr 1fr;padding:12px;border-bottom:1px solid rgba(98,232,255,.12)}.pvp-tier-rewards strong{text-align:right}@media(max-width:820px){.page{width:min(100% - 12px,820px);padding:16px}.header{display:block}.tabs{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr)}.tab{padding:11px 6px;white-space:nowrap}.summary-bar{grid-template-columns:repeat(2,1fr)}.pvp-opponents{grid-template-columns:1fr}.pvp-card-picker{grid-template-columns:repeat(4,1fr)}}@media(max-width:520px){.pvp-cover{display:block}.pvp-me{text-align:left;min-width:0;margin-top:14px}.pvp-tabs{grid-template-columns:repeat(3,1fr)}.pvp-tabs button:nth-child(4),.pvp-tabs button:nth-child(5){grid-column:span 1}.pvp-card-picker{grid-template-columns:repeat(3,1fr)}.pvp-history-row,.pvp-rank-row{grid-template-columns:50px 1fr 64px}.pvp-content{padding:13px}} /* v8.7.1 PvP collection-card parity */ .pvp-card-mini-full{min-width:0;position:relative}.pvp-card-mini-full .card-frame{width:100%;margin:0;pointer-events:none}.pvp-card-mini-full .card-frame .card-header{font-size:clamp(9px,1vw,13px)}.pvp-card-mini-full .card-frame .card-footer{min-height:48px}.pvp-card-mini-full .card-frame .card-title{font-size:clamp(10px,1vw,14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pvp-card-extra{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:7px 8px;border:1px solid rgba(98,232,255,.18);border-top:0;border-radius:0 0 10px 10px;background:#06142e;font-size:10px;white-space:nowrap}.pvp-card-extra b{color:#7ceeff}.pvp-card-extra span{overflow:hidden;text-overflow:ellipsis;color:#a9ccdf}.pvp-pick{border-radius:12px;overflow:visible}.pvp-pick.selected{outline:3px solid #69e8ff;outline-offset:2px}.pvp-deck-slots .pvp-card-mini-full{min-width:0}.pvp-disabled-notice{display:grid;gap:8px;text-align:center;padding:42px 18px}.pvp-disabled-notice b{font-size:22px;color:#ff8da1}.pvp-disabled-notice span{color:#9ecbe3}.pvp-tabs button:disabled{opacity:.4;cursor:not-allowed} @media(max-width:820px){.pvp-card-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.pvp-card-mini-full .card-footer small{display:none}} @media(max-width:520px){.pvp-card-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.pvp-deck-slots{gap:4px}.pvp-card-extra{display:block;text-align:center;padding:5px 2px}.pvp-card-extra b,.pvp-card-extra span{display:block}.pvp-deck-slots .pvp-card-extra span{display:none}.pvp-deck-slots .card-footer small{display:none}} /* v8.7.2 PvP deck uniform card layout hotfix */ .pvp-deck-slots{ grid-template-columns:repeat(5,minmax(0,1fr)); align-items:start; } .pvp-deck-slot{ width:100%; min-width:0; align-self:start; } .pvp-deck-slot .pvp-card-mini-full, .pvp-card-picker .pvp-card-mini-full{ width:100%; min-width:0; display:grid; grid-template-rows:auto 38px; } .pvp-deck-slot .card-frame, .pvp-card-picker .card-frame{ width:100%; max-width:none; min-width:0; margin:0; transform:none!important; filter:none!important; } .pvp-deck-slot .card-frame:hover, .pvp-card-picker .card-frame:hover{ transform:none!important; filter:none!important; } .pvp-deck-slot .card-frame:hover .card-art img, .pvp-card-picker .card-frame:hover .card-art img{ transform:none!important; } .pvp-deck-slot .pvp-card-extra, .pvp-card-picker .pvp-card-extra{ height:38px; min-height:38px; box-sizing:border-box; } .pvp-empty-slot{ width:100%; aspect-ratio:2/3.244; box-sizing:border-box; border-radius:14px; background:rgba(3,14,37,.34); } .pvp-empty-slot span{ display:grid; place-items:center; width:100%; height:100%; } .pvp-card-picker{ align-items:start; } .pvp-pick{ display:block; width:100%; min-width:0; opacity:1!important; filter:none!important; transform:none!important; } .pvp-pick:hover, .pvp-pick:focus, .pvp-pick:active{ opacity:1!important; filter:none!important; transform:none!important; } .pvp-pick.selected{ opacity:1!important; transform:none!important; } @media(max-width:520px){ .pvp-deck-slot .pvp-card-mini-full, .pvp-card-picker .pvp-card-mini-full{grid-template-rows:auto 34px} .pvp-deck-slot .pvp-card-extra, .pvp-card-picker .pvp-card-extra{height:34px;min-height:34px} .pvp-empty-slot{aspect-ratio:2/3.20} } /* v8.7.3 PvP deck UX + cinematic battle */ .pvp-deck-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.pvp-deck-actions .danger{color:#ff7892}.pvp-deck-slot.filled{position:relative;padding:0;border:0;background:transparent;cursor:pointer;text-align:left}.pvp-deck-slot.filled .pvp-remove-hint{position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);z-index:8;padding:6px 10px;border-radius:999px;background:rgba(3,12,28,.9);border:1px solid rgba(255,110,140,.65);color:#fff;font-size:12px;font-weight:800;white-space:nowrap;opacity:0;transition:.16s}.pvp-deck-slot.filled:hover .pvp-remove-hint,.pvp-deck-slot.filled:focus-visible .pvp-remove-hint{opacity:1;transform:translate(-50%,0)}.pvp-deck-slot.filled:hover .game-card,.pvp-deck-slot.filled:focus-visible .game-card{box-shadow:0 0 0 3px rgba(255,94,126,.8),0 0 22px rgba(255,76,118,.28)} .pvp-battle-stage .pvp-arena{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr)}.pvp-battle-stage .enemy-side .battle-team{direction:rtl}.pvp-battle-stage .enemy-side .battle-card-fighter{direction:ltr}.pvp-enemy-loading{display:flex!important;align-items:center;justify-content:center;color:#8fb6d1;font-weight:800;min-height:220px}.pvp-battle-stage .battle-side{min-width:0}.pvp-battle-stage .battle-team{width:100%}.pvp-battle-stage .battle-card-fighter{width:clamp(62px,8vw,108px)} @media(max-width:760px){.pvp-deck-actions{width:100%;justify-content:space-between}.pvp-deck-actions span{font-size:12px}.pvp-battle-stage .pvp-arena{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)}.pvp-battle-stage .battle-card-fighter{width:clamp(42px,11vw,70px)}.pvp-battle-stage .battle-side small{font-size:10px}} /* v8.7.5 PvP deck visibility, stable scroll, tier badge and ranking switch */ .pvp-deck-head{align-items:center}.pvp-deck-actions{align-items:center;justify-content:flex-end;gap:10px}.pvp-deck-guide{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1px solid rgba(124,238,255,.18);border-radius:999px;background:rgba(7,26,57,.72);color:#b9d8e9;font-size:12px;font-weight:800;white-space:nowrap}.pvp-reset-badge{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 15px;border:1px solid rgba(255,104,137,.72);border-radius:999px;background:linear-gradient(135deg,rgba(255,64,112,.28),rgba(123,46,108,.42));box-shadow:0 0 18px rgba(255,68,118,.16),inset 0 0 12px rgba(255,255,255,.04);color:#fff;font-weight:1000;white-space:nowrap}.pvp-reset-badge i{font-style:normal;font-size:17px;color:#ff91aa}.pvp-reset-badge:hover{border-color:#ff96ad;box-shadow:0 0 22px rgba(255,68,118,.28)} .pvp-card-picker.grouped{display:block;max-height:520px;padding-right:6px}.pvp-grade-group{margin:0 0 18px}.pvp-grade-title{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:9px;padding:9px 11px;margin-bottom:8px;border-left:4px solid #6ceaff;border-radius:8px;background:rgba(4,20,47,.96);backdrop-filter:blur(8px);box-shadow:0 8px 14px rgba(0,0,0,.16)}.pvp-grade-title b{font-size:15px;color:#fff}.pvp-grade-title span{font-size:11px;color:#8ebbd3}.pvp-grade-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:start}.pvp-grade-group.grade-fur .pvp-grade-title,.pvp-grade-group.grade-ma .pvp-grade-title{border-left-color:#ffcf4d}.pvp-grade-group.grade-ssr .pvp-grade-title,.pvp-grade-group.grade-ur .pvp-grade-title{border-left-color:#b88cff}.pvp-grade-group.grade-hr .pvp-grade-title{border-left-color:#ff6e91}.pvp-grade-group.grade-sr .pvp-grade-title{border-left-color:#9559ff} .pvp-me{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badge tier" "badge score" "badge time";align-items:center;column-gap:14px}.pvp-tier-badge{grid-area:badge;display:grid;place-items:center;min-width:88px}.pvp-me>span{grid-area:tier}.pvp-me>b{grid-area:score}.pvp-me>small{grid-area:time}.pvp-tier-badge .tier-emblem.small{transform:scale(.9);margin:-8px} .rank-hub{position:relative;z-index:2}.rank-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px;padding:6px;border:1px solid var(--line);border-radius:15px;background:rgba(3,14,37,.82)}.rank-switch button{min-width:0;padding:13px 10px;border:0;border-radius:11px;background:transparent;color:#8fb9d1;font-weight:1000;white-space:nowrap}.rank-switch button.active{color:#fff;background:linear-gradient(135deg,#6e39d6,#1f7bff);box-shadow:0 8px 22px rgba(35,101,255,.24)}.rank-hub-content>.rank-panel{margin-top:0}.rank-pvp-panel{padding:22px;border:1px solid var(--line);border-radius:20px;background:rgba(3,14,37,.76)}.rank-pvp-panel .pvp-my-rank{display:grid;grid-template-columns:72px 1fr}.rank-pvp-panel .pvp-my-rank>span{margin:0}.rank-pvp-panel .pvp-my-rank small{display:block;color:#8fb9d1;margin-top:4px}.rank-pvp-panel .pvp-rank-row{grid-template-columns:44px 66px 1fr 100px} @media(max-width:820px){.pvp-grade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pvp-deck-head{align-items:flex-start}.pvp-deck-actions{width:auto}.pvp-me{min-width:300px}} @media(max-width:620px){.pvp-deck-head{display:block}.pvp-deck-actions{margin-top:12px;justify-content:space-between}.pvp-deck-guide{font-size:11px;padding:0 9px}.pvp-reset-badge{padding:0 12px}.pvp-me{min-width:0;grid-template-columns:76px 1fr;text-align:left}.pvp-grade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rank-pvp-panel{padding:14px}.rank-pvp-panel .pvp-rank-row{grid-template-columns:34px 54px 1fr 72px}.rank-pvp-panel .pvp-rank-row strong{font-size:12px}} /* v8.7.6 PvP ranking tier road + battle result return */ .pvp-tier-guide{margin:0 0 16px;padding:16px;border:1px solid rgba(124,238,255,.18);border-radius:16px;background:linear-gradient(135deg,rgba(12,30,68,.88),rgba(22,18,70,.72))}.pvp-tier-guide-head{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:12px}.pvp-tier-guide-head .eyebrow{width:100%;margin:0}.pvp-tier-guide-head h3{margin:0;font-size:18px}.pvp-tier-guide-head span{margin-left:auto;color:#8fb9d1;font-size:12px}.pvp-tier-road{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.pvp-tier-road-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;padding:8px 5px 10px;border:1px solid rgba(124,238,255,.12);border-radius:12px;background:rgba(2,13,34,.62)}.pvp-tier-road-item.current{border-color:#7ceeff;box-shadow:0 0 0 2px rgba(124,238,255,.18),0 0 22px rgba(55,176,255,.2)}.pvp-tier-road-item .tier-emblem.small{transform:scale(.72);margin:-12px -12px -9px}.pvp-tier-road-item b{font-size:11px;color:#dff8ff;white-space:nowrap}.pvp-rank-switch{margin-bottom:16px}.pvp-result-confirm{margin-top:12px;min-width:220px}.battle-message .pvp-result-confirm{pointer-events:auto}.pvp-battle-modal .battle-stage{cursor:pointer} @media(max-width:900px){.pvp-tier-road{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:560px){.pvp-tier-guide{padding:12px}.pvp-tier-road{grid-template-columns:repeat(2,minmax(0,1fr))}.pvp-tier-guide-head span{width:100%;margin-left:0}.pvp-result-confirm{min-width:0;width:100%}} /* v8.7.7 PvP ranking layout + final reward season lock */ .pvp-ranking .pvp-rank-row{ grid-template-columns:44px 72px minmax(0,1fr) 110px; min-height:88px; align-items:center; column-gap:14px; overflow:hidden; } .pvp-ranking .pvp-rank-row>b{ justify-self:start; font-size:18px; line-height:1; } .pvp-ranking .pvp-rank-row>.tier-emblem{ justify-self:center; flex:0 0 auto; } .pvp-ranking .pvp-rank-row>span{ min-width:0; display:block; overflow:hidden; font-weight:800; white-space:nowrap; text-overflow:ellipsis; } .pvp-ranking .pvp-rank-row>span small{ display:block; max-width:100%; overflow:hidden; margin-top:5px; color:#7faec8; white-space:nowrap; text-overflow:ellipsis; } .pvp-ranking .pvp-rank-row>strong{ justify-self:end; min-width:0; text-align:right; font-size:17px; white-space:nowrap; } .pvp-my-rank{ display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; min-height:82px; overflow:hidden; } .pvp-my-rank>span{ min-width:0; margin-left:0!important; text-align:right; white-space:nowrap; } .pvp-my-rank>span small{white-space:nowrap} .pvp-final-reward-wait,.pvp-final-reward-ready{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:15px 17px; border:1px solid rgba(124,238,255,.18); border-radius:14px; background:rgba(6,20,46,.78); } .pvp-final-reward-wait b{color:#ffd66e;white-space:nowrap} .pvp-final-reward-wait span,.pvp-final-reward-ready span{color:#9ecbe3;line-height:1.5} .pvp-final-reward-ready .btn{flex:0 0 auto;white-space:nowrap} @media(max-width:620px){ .pvp-ranking .pvp-rank-row{ grid-template-columns:30px 54px minmax(0,1fr) 72px; min-height:76px; column-gap:8px; padding:10px 8px; } .pvp-ranking .pvp-rank-row>b{font-size:15px} .pvp-ranking .pvp-rank-row>strong{font-size:13px} .pvp-ranking .pvp-rank-row>span{font-size:13px} .pvp-ranking .pvp-rank-row>span small{font-size:11px} .pvp-my-rank{grid-template-columns:58px minmax(0,1fr);padding:12px 10px} .pvp-final-reward-wait,.pvp-final-reward-ready{display:grid;justify-items:stretch} .pvp-final-reward-ready .btn{width:100%} } /* v8.7.8 PvP energy */ .pvp-cover-side{display:flex;align-items:stretch;gap:12px;min-width:330px}.pvp-energy-card{min-width:180px}.pvp-energy-card>div:first-child{display:flex;justify-content:space-between;gap:12px}.pvp-energy-card small{white-space:nowrap}.pvp-fight:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.35)} @media(max-width:760px){.pvp-cover-side{width:100%;min-width:0;display:grid;grid-template-columns:1fr}.pvp-energy-card{min-width:0}.pvp-cover{align-items:stretch}} /* v8.7.9 PvP cover energy layout hotfix */ .pvp-cover{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas: "intro profile" "energy energy"; align-items:center; gap:18px 28px; } .pvp-cover-intro{grid-area:intro;min-width:0} .pvp-cover .pvp-me{grid-area:profile;min-width:250px} .pvp-cover .pvp-energy-card{ grid-area:energy; width:100%; min-width:0; box-sizing:border-box; padding:14px 16px; } .pvp-energy-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; } .pvp-energy-head span,.pvp-energy-head b{white-space:nowrap} .pvp-energy-card small{display:block;margin-top:7px;white-space:nowrap;text-align:right} .pvp-cover-side{display:contents} @media(max-width:760px){ .pvp-cover{ grid-template-columns:1fr; grid-template-areas:"intro" "profile" "energy"; align-items:stretch; } .pvp-cover .pvp-me{min-width:0;text-align:left} .pvp-energy-card small{text-align:left} } @media(max-width:420px){ .pvp-energy-head{gap:8px} .pvp-energy-head span{font-size:12px} .pvp-energy-head b{font-size:15px} } /* v9.0.8 PvE deck save / reset */ .pve-deck-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .pve-deck-btn{min-width:92px;height:38px;padding:0 13px;border:1px solid rgba(116,222,255,.32);border-radius:11px;background:linear-gradient(145deg,rgba(20,52,89,.96),rgba(7,19,42,.96));color:#e7faff;font-size:12px;font-weight:900;letter-spacing:-.02em;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.24);transition:transform .16s ease,border-color .16s ease,filter .16s ease} .pve-deck-btn span{margin-right:4px;font-size:13px}.pve-deck-btn:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(116,222,255,.72);filter:brightness(1.12)} .pve-deck-btn.save{background:linear-gradient(145deg,rgba(19,104,139,.98),rgba(10,43,83,.98));border-color:rgba(91,226,255,.52)} .pve-deck-btn.reset{background:linear-gradient(145deg,rgba(75,40,65,.96),rgba(31,22,45,.96));border-color:rgba(255,135,183,.34);color:#ffddec} .pve-deck-btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.55)} @media(max-width:640px){.battle-panel>.panel-title{align-items:flex-start;gap:10px}.pve-deck-actions{gap:6px}.pve-deck-btn{min-width:82px;height:34px;padding:0 10px;font-size:11px}} @media(max-width:430px){.battle-panel>.panel-title{flex-direction:column}.pve-deck-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.pve-deck-btn{width:100%;min-width:0}} /* v9.0.9 미네랄 교환 */ .mineral-exchange-page{margin-top:18px}.mineral-exchange-head{display:flex;justify-content:space-between;gap:16px;align-items:stretch;padding:24px;border:1px solid rgba(109,219,255,.22);border-radius:22px;background:linear-gradient(135deg,rgba(20,31,63,.96),rgba(16,18,42,.96))}.mineral-exchange-head h2{margin:4px 0 8px;font-size:30px}.mineral-limit-badge{min-width:210px;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:14px 18px;border:1px solid rgba(255,214,90,.4);border-radius:18px;background:linear-gradient(145deg,rgba(92,63,9,.42),rgba(31,25,14,.72));box-shadow:inset 0 0 24px rgba(255,202,50,.08)}.mineral-limit-badge span{font-size:12px;color:#ffe393}.mineral-limit-badge b{font-size:24px;margin:5px 0}.mineral-limit-badge small{color:#c9d3e9}.mineral-exchange-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:16px;margin-top:16px}.mineral-form-card,.mineral-history-card{padding:22px;border:1px solid rgba(110,196,255,.18);border-radius:20px;background:rgba(12,17,39,.92)}.mineral-rate-info{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px;border-radius:16px;background:rgba(61,133,255,.1);font-size:18px}.mineral-rate-info strong{color:#71e4ff}.mineral-guide{margin:16px 0;padding:14px 16px;border-left:3px solid #69d8ff;background:rgba(255,255,255,.035)}.mineral-guide p{margin:6px 0;color:#d2dbef}.mineral-field{display:block;margin:13px 0}.mineral-field span{display:block;margin-bottom:7px;font-size:13px;color:#cbd7ef}.mineral-field input,.mineral-field textarea{box-sizing:border-box;width:100%;padding:12px 13px;border:1px solid rgba(135,179,255,.22);border-radius:12px;background:#0b1025;color:#fff}.mineral-field small{display:block;margin-top:6px;color:#8998b8}.mineral-preview{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-radius:14px;background:linear-gradient(90deg,rgba(42,92,201,.2),rgba(27,198,230,.12))}.mineral-preview b{font-size:22px;color:#75e9ff}.mineral-preview b.invalid{color:#ff8b9a}.mineral-submit{width:100%;margin-top:8px}.mineral-history-card h3{margin-top:0}.mineral-history-row{display:grid;grid-template-columns:1fr auto;gap:6px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}.mineral-history-row div{display:flex;flex-direction:column;gap:3px}.mineral-history-row span,.mineral-history-row small{color:#9fabc4}.mineral-history-row em{align-self:start;padding:4px 8px;border-radius:999px;background:rgba(255,194,70,.12);color:#ffd879;font-style:normal;font-size:12px}.mineral-history-row.status-approved em{background:rgba(75,232,170,.13);color:#75efbb}.mineral-history-row.status-rejected em{background:rgba(255,93,117,.13);color:#ff8da0}.mineral-history-row p{grid-column:1/-1;margin:2px 0;color:#ff9aaa;font-size:12px}@media(max-width:760px){.tabs{gap:5px}.tabs .tab{padding:9px 10px;font-size:12px}.mineral-exchange-head{padding:17px;flex-direction:column}.mineral-limit-badge{min-width:0}.mineral-exchange-grid{grid-template-columns:1fr}.mineral-form-card,.mineral-history-card{padding:16px}.mineral-exchange-head h2{font-size:25px}} /* v9.0.9.1 모바일 미네랄 교환 탭 줄바꿈 */ .mineral-tab-label{display:inline-flex;align-items:center;justify-content:center;gap:.28em;white-space:nowrap;line-height:1.05} @media(max-width:760px){ .tabs .tab.mineral-tab{min-height:42px;padding-top:6px;padding-bottom:6px} .mineral-tab-label{flex-direction:column;gap:1px;white-space:normal;text-align:center} } /* v9.1.5 custom card-pack artwork */ .mini-pack{height:78px;background:rgba(2,10,27,.72)!important;overflow:hidden} .mini-pack:before,.mini-pack:after,.mini-pack>b{display:none!important} .mini-pack>img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;object-position:center;filter:drop-shadow(0 4px 7px rgba(0,0,0,.55));transition:transform .2s ease} .pack-choice:hover .mini-pack>img,.pack-choice.active .mini-pack>img{transform:scale(1.05)} .pack-image-envelope{width:245px;height:355px;border:0!important;border-radius:18px;background:transparent!important;box-shadow:none!important;overflow:visible;display:grid;place-items:center;transform:none!important;align-self:center} .pack-product-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 24px 24px rgba(0,0,0,.45)) drop-shadow(0 0 25px rgba(96,220,255,.23));position:relative;z-index:2} .pack-image-gloss{position:absolute;z-index:3;inset:5% 9%;pointer-events:none;border-radius:16px;background:linear-gradient(110deg,transparent 24%,rgba(255,255,255,.19) 42%,transparent 58%);mix-blend-mode:screen;opacity:.35;transform:translateX(-45%)} .pack-opening .pack-image-gloss{animation:packImageGloss 1.2s ease-in-out infinite} @keyframes packImageGloss{0%,100%{transform:translateX(-55%);opacity:.12}50%{transform:translateX(55%);opacity:.48}} @media(max-width:767px){.mini-pack{height:68px}.pack-image-envelope{width:190px;height:280px}.pack-open.pack-image-envelope{width:210px;height:305px}} /* v9.9.6 premium/limited pack showcase */ .pack-list{grid-template-columns:repeat(4,minmax(0,1fr))} .pack-choice-premium,.pack-choice-pickup{position:relative;overflow:hidden}.pack-choice-premium:before,.pack-choice-pickup:before{content:"";position:absolute;z-index:0;inset:-80% -35%;pointer-events:none;opacity:.28;transform:rotate(18deg);background:linear-gradient(90deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);animation:featuredPackShine 5s ease-in-out infinite}.pack-choice-pickup:before{animation-delay:1.2s}.pack-choice-premium>* ,.pack-choice-pickup>*{position:relative;z-index:1}.pack-choice-premium{border-color:rgba(220,171,76,.42);background:linear-gradient(145deg,rgba(51,31,70,.88),rgba(15,12,30,.9))}.pack-choice-premium:hover,.pack-choice-premium.active{border-color:#e6bd68;background:linear-gradient(145deg,rgba(91,48,126,.72),rgba(29,18,50,.94));box-shadow:inset 0 0 0 1px rgba(255,218,139,.18),0 0 28px rgba(173,91,255,.26)}.pack-choice-premium strong{color:#f4cf7a;text-shadow:0 0 13px rgba(239,187,75,.34)}.pack-choice-premium em{color:#eabfff}.pack-choice-pickup{border-color:rgba(91,226,255,.43);background:linear-gradient(145deg,rgba(17,41,63,.92),rgba(43,13,47,.9))}.pack-choice-pickup:hover,.pack-choice-pickup.active{border-color:#62eaff;background:linear-gradient(145deg,rgba(20,70,91,.78),rgba(78,20,72,.92));box-shadow:inset 0 0 0 1px rgba(255,111,215,.2),0 0 30px rgba(70,222,255,.25)}.pack-choice-pickup strong{color:#79efff;text-shadow:0 0 13px rgba(74,224,255,.4)}.pack-choice-pickup em{color:#ff9de3}.pack-choice-premium strong:after,.pack-choice-pickup strong:after{display:inline-block;margin-left:7px;padding:3px 6px;border-radius:999px;font-size:8px;line-height:1;vertical-align:2px;letter-spacing:1px}.pack-choice-premium strong:after{content:"PREMIUM";color:#2b1900;background:linear-gradient(135deg,#ffe6a6,#c99536)}.pack-choice-pickup strong:after{content:"LIMITED";color:#071923;background:linear-gradient(135deg,#72efff,#ff88da)} .pack-theme-premium .hero-copy .eyebrow{color:#f1c96c!important}.pack-theme-premium .hero-copy h2 em{color:#f3c96d;text-shadow:0 0 25px rgba(223,163,56,.48)}.pack-theme-pickup .hero-copy .eyebrow{color:#72efff!important}.pack-theme-pickup .hero-copy h2 em{color:#78efff;text-shadow:0 0 20px rgba(76,224,255,.5),0 0 34px rgba(255,83,190,.25)} .game-hero .hero-pack-zone{align-self:stretch;min-height:370px;overflow:visible}.game-hero .pack-image-envelope{margin:auto;max-height:355px}.game-hero .pack-product-image{object-position:center center}.pack-theme-premium .pack-product-image{filter:drop-shadow(0 22px 22px rgba(0,0,0,.42)) drop-shadow(0 0 28px rgba(211,152,54,.3))}.pack-theme-pickup .pack-product-image{filter:drop-shadow(0 22px 22px rgba(0,0,0,.42)) drop-shadow(0 0 28px rgba(70,224,255,.28))} @keyframes featuredPackShine{0%,55%,100%{transform:translateX(-65%) rotate(18deg)}75%{transform:translateX(65%) rotate(18deg)}} @media(max-width:767px){.game-hero .hero-pack-zone{min-height:285px}.game-hero .pack-image-envelope{max-height:280px}.pack-choice-premium strong:after,.pack-choice-pickup strong:after{display:block;width:max-content;margin:5px 0 0}} /* v9.9.7 strict pack bounds after transparent-image trim */ .game-hero{min-height:480px}.game-hero .hero-pack-zone{height:360px;min-height:360px;max-height:360px;align-self:center;overflow:hidden}.game-hero .pack-image-envelope{width:150px!important;height:310px!important;max-width:150px!important;max-height:310px!important;margin:auto!important;aspect-ratio:auto!important}.game-hero .pack-product-image{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important} .critical-opening-stage{display:grid;grid-template-rows:auto auto 300px auto auto auto;align-content:center;row-gap:7px;overflow:hidden!important}.critical-opening-stage>.eyebrow,.critical-opening-stage>h2,.critical-opening-stage>.opening-message,.critical-opening-stage>.tap-progress,.critical-opening-stage>.tap-rule{position:relative;z-index:30}.critical-opening-stage>h2{margin:4px 0 2px}.critical-opening-stage .pack-open{grid-row:3;width:180px!important;height:300px!important;min-height:300px!important;max-height:300px!important;margin:0 auto!important;overflow:hidden!important;align-self:center}.critical-opening-stage .pack-open>.pack-image-envelope{width:138px!important;height:286px!important;max-width:138px!important;max-height:286px!important;margin:auto!important;aspect-ratio:auto!important;overflow:hidden!important}.critical-opening-stage .pack-open .pack-product-image{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}.critical-opening-stage>.opening-message{grid-row:4;margin:4px 0 2px;min-height:30px;padding:2px 8px;background:rgba(3,11,28,.88);font-size:18px;line-height:1.35}.critical-opening-stage>.tap-progress{grid-row:5;margin:0 auto}.critical-opening-stage>.tap-rule{grid-row:6}.critical-opening-stage .tear-line{left:0;right:0;top:72px} @media(max-width:767px){.game-hero{min-height:auto}.game-hero .hero-pack-zone{height:275px;min-height:275px;max-height:275px}.game-hero .pack-image-envelope{width:128px!important;height:260px!important;max-width:128px!important;max-height:260px!important}.critical-opening-stage{grid-template-rows:auto auto 270px auto auto auto;row-gap:5px}.critical-opening-stage .pack-open{width:160px!important;height:270px!important;min-height:270px!important;max-height:270px!important}.critical-opening-stage .pack-open>.pack-image-envelope{width:122px!important;height:254px!important;max-width:122px!important;max-height:254px!important}.critical-opening-stage>.opening-message{font-size:16px;min-height:27px}} /* v9.1.6 OWNER raid user screen */ .pve-mode-tabs{display:flex;gap:10px;margin:18px 0 14px;padding:8px;border:1px solid #174e72;border-radius:18px;background:#061426}.pve-mode-btn{flex:1;border:0;border-radius:13px;padding:14px 18px;background:transparent;color:#9fcbe4;font-weight:900;font-size:16px;cursor:pointer}.pve-mode-btn.active{background:linear-gradient(135deg,#00a8ef,#2868ff);color:white;box-shadow:0 8px 24px #008cff44}.pve-mode-btn small{margin-left:8px;color:#ffe46b}.pve-raid-view[hidden],#pveHuntView[hidden]{display:none!important}.raid-empty{padding:70px 30px;text-align:center;border:1px solid #174e72;border-radius:28px;background:#061426}.raid-empty h2{font-size:34px;margin:8px 0}.raid-empty p{color:#9fc1d6;line-height:1.8}.raid-hero{display:grid;grid-template-columns:1fr 300px;gap:22px;padding:30px;border:1px solid #1d5d82;border-radius:28px;background:radial-gradient(circle at 20% 20%,#173b62 0,#071525 48%,#170f16 100%);overflow:hidden}.raid-boss-pane{display:flex;gap:24px;align-items:center}.raid-boss-pane>img,.raid-boss-placeholder{width:180px;height:180px;object-fit:cover;border-radius:24px;border:2px solid #ffb31a;background:#07111d}.raid-boss-placeholder{display:grid;place-items:center;font-size:72px}.raid-boss-pane h2{font-size:38px;margin:5px 0 20px}.raid-hp-head{display:flex;justify-content:space-between;gap:20px;color:#d8ecf7}.raid-hp-track,.raid-people-bar{height:14px;border-radius:99px;background:#05101b;overflow:hidden;border:1px solid #285c75}.raid-hp-track i{display:block;height:100%;background:linear-gradient(90deg,#ff2f55,#ff9a28);transition:width .8s}.raid-people-bar i{display:block;height:100%;background:linear-gradient(90deg,#15dca0,#31a9ff)}.raid-status{display:block;margin-top:13px;color:#ffe06b}.raid-join-card{padding:24px;border:1px solid #6c5312;border-radius:22px;background:#151107}.raid-join-card>span{color:#d7c998}.raid-join-card>b{display:block;font-size:34px;margin:8px 0 16px;color:#ffe06b}.raid-join-card .btn{width:100%;margin-top:20px}.raid-join-card small{display:block;margin-top:10px;color:#9eaeb9}.raid-live-grid{display:grid;grid-template-columns:1fr 340px;gap:22px;margin-top:22px}.raid-party,.raid-ranking{border:1px solid #174e72;border-radius:24px;background:#061426;padding:24px}.raid-participant-list{display:grid;gap:10px;max-height:500px;overflow:auto}.raid-participant-list article{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:14px;padding:12px;border:1px solid #153a52;border-radius:16px;background:#081a2d}.raid-mini-cards{display:flex}.raid-mini-cards img{width:38px;height:50px;object-fit:cover;border-radius:6px;border:1px solid #6faacb;margin-right:-8px}.raid-participant-list span b,.raid-participant-list span small{display:block}.raid-participant-list span small{color:#7899ad}.raid-participant-list article>strong{color:#ffe06b}.raid-rank-row{display:grid;grid-template-columns:30px 1fr auto;gap:10px;padding:12px;border-bottom:1px solid #14344a}.raid-rank-row>b{color:#55dfff}.raid-rank-row strong{color:#ffe06b}.raid-my-damage{margin-top:20px;padding:18px;border-radius:16px;background:#102d46;text-align:center}.raid-my-damage span,.raid-my-damage b{display:block}.raid-my-damage b{font-size:30px;color:#ffe06b;margin-top:5px}@media(max-width:800px){.raid-hero,.raid-live-grid{grid-template-columns:1fr}.raid-boss-pane{align-items:flex-start}.raid-boss-pane>img,.raid-boss-placeholder{width:110px;height:110px}.raid-boss-pane h2{font-size:27px}.raid-participant-list article{grid-template-columns:110px 1fr}.raid-participant-list article>strong{grid-column:2}.raid-mini-cards img{width:28px;height:38px}} * { box-sizing: border-box; } body { margin: 0; font-family: Arial, "Noto Sans KR", sans-serif; background: radial-gradient(circle at top, rgba(86, 111, 255, 0.2), transparent 35%), #0b0f1a; color: #fff; } #app { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 18px; } .card-box { width: 100%; max-width: 430px; background: linear-gradient(180deg, #182033, #0f1422); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); } .logo { text-align: center; margin-bottom: 22px; } .logo h1 { margin: 0; font-size: 30px; letter-spacing: 1px; } .logo p { margin: 8px 0 0; color: #9aa4bd; font-size: 13px; } .input-group { margin-bottom: 14px; } .input-group label { display: block; margin-bottom: 7px; color: #cbd3e5; font-size: 13px; } .input-group input { width: 100%; height: 46px; border-radius: 10px; border: 1px solid #303a55; background: #0b1020; color: #fff; padding: 0 13px; font-size: 15px; outline: none; } .input-group input:focus { border-color: #5d8cff; } .btn { width: 100%; height: 48px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #4f7cff, #7b5cff); color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; } .btn:hover { filter: brightness(1.08); } .btn.sub { background: #20283d; color: #d7dded; margin-top: 10px; } .notice { margin-top: 14px; color: #8f9ab6; font-size: 12px; line-height: 1.6; text-align: center; } .divider { height: 1px; background: rgba(255,255,255,0.1); margin: 18px 0; } .point-box { text-align: center; font-size: 14px; margin-bottom: 18px; color: #aab4cf; } .point-box b { display: block; margin-top: 4px; font-size: 30px; color: #fff; } .game-card { margin: 20px auto; width: 230px; min-height: 320px; border-radius: 20px; background: linear-gradient(160deg, #26324f, #101624); border: 2px solid rgba(255,255,255,0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 20px 60px rgba(0,0,0,0.55); animation: cardPop 0.45s ease-out; position: relative; overflow: hidden; } .game-card::before { content: ""; position: absolute; inset: -50%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.14), transparent); transform: rotate(25deg); animation: shine 1.6s ease-in-out infinite; } .game-card .no, .game-card .name, .game-card .type, .game-card .stars { position: relative; z-index: 1; } .game-card .no { font-size: 13px; color: #9aa4bd; } .game-card .name { font-size: 34px; font-weight: bold; margin-top: 18px; } .game-card .type { font-size: 16px; color: #cbd3e5; margin-top: 8px; } .game-card .stars { font-size: 28px; margin-top: 22px; color: #ffd76a; } .grade-N { border-color: rgba(255,255,255,0.16); } .grade-R { border-color: rgba(94, 184, 255, 0.75); } .grade-SR { border-color: rgba(146, 255, 154, 0.75); } .grade-SSR { border-color: rgba(255, 104, 232, 0.9); box-shadow: 0 0 35px rgba(255,104,232,0.25), 0 20px 60px rgba(0,0,0,0.55); } .grade-LR { border-color: rgba(255, 214, 106, 1); box-shadow: 0 0 45px rgba(255,214,106,0.35), 0 20px 60px rgba(0,0,0,0.55); } .grid-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .mini-card { background: #10182b; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px; min-height: 88px; } .mini-card.locked { opacity: 0.38; } .mini-card b { display: block; font-size: 15px; margin-top: 4px; } .mini-card span { color: #8f9ab6; font-size: 12px; } @keyframes cardPop { from { transform: translateY(16px) scale(0.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes shine { 0% { transform: translateX(-80%) rotate(25deg); } 60% { transform: translateX(80%) rotate(25deg); } 100% { transform: translateX(80%) rotate(25deg); } } .attendance-days{display:grid;grid-template-columns:repeat(7,minmax(62px,1fr));gap:8px;margin:18px 0}.attendance-day{padding:10px 6px;border:1px solid rgba(255,255,255,.12);border-radius:12px;text-align:center;background:rgba(0,0,0,.22)}.attendance-day small{display:block;opacity:.7}.attendance-day b{display:block;margin-top:4px}.attendance-day.active{border-color:#ffd76a;box-shadow:0 0 18px rgba(255,215,106,.28)}@media(max-width:700px){.attendance-days{grid-template-columns:repeat(4,1fr)}} .raidDayGrid{display:flex;flex-wrap:wrap;gap:8px}.raidDayGrid label{display:flex;align-items:center;gap:5px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:8px}.raid-schedule-notice{margin-top:14px;padding:12px;border:1px solid rgba(255,200,80,.35);border-radius:10px;background:rgba(255,180,30,.08);font-weight:700} /* v9.1.8 cinematic raid battle stage */ .raid-battle-stage{position:relative;overflow:hidden;margin:18px 0;border:1px solid rgba(126,236,255,.28);border-radius:22px;min-height:430px;background:radial-gradient(circle at 50% 20%,rgba(67,92,153,.38),transparent 38%),linear-gradient(180deg,#081224 0%,#10182a 54%,#080b13 100%);box-shadow:0 20px 60px rgba(0,0,0,.48),inset 0 0 60px rgba(48,151,255,.08)} .raid-battle-stage:before{content:"";position:absolute;inset:58% 0 0;background:linear-gradient(180deg,rgba(32,42,67,.15),rgba(0,0,0,.72)),repeating-linear-gradient(90deg,transparent 0 58px,rgba(123,179,255,.06) 59px 60px);transform:perspective(280px) rotateX(56deg);transform-origin:top} .raid-stage-sky span{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:110px 20px #a9dcff,240px 70px #fff,380px 30px #7ceeff,520px 90px #fff,680px 45px #b38cff,820px 25px #fff;animation:raidStar 3s ease-in-out infinite}.raid-stage-sky span:nth-child(2){left:30%;top:16%;animation-delay:1s}.raid-stage-sky span:nth-child(3){left:62%;top:9%;animation-delay:2s} @keyframes raidStar{50%{opacity:.25;transform:scale(.6)}} .raid-stage-header{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(5,10,22,.86),rgba(13,31,56,.55))}.raid-stage-header small{display:block;color:#78dfff;font-weight:900;letter-spacing:.16em}.raid-stage-header b{font-size:18px}.raid-stage-timer{font-size:24px;font-weight:1000;color:#fff;text-shadow:0 0 18px #4dc7ff} .raid-arena{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.08fr;min-height:260px;align-items:center;padding:10px 7% 0}.raid-party-side,.raid-boss-side{position:relative;display:flex;align-items:center;justify-content:center;min-height:230px}.raid-party-aura,.raid-boss-aura{position:absolute;width:210px;height:210px;border-radius:50%;filter:blur(2px);background:radial-gradient(circle,rgba(65,208,255,.25),rgba(65,98,255,.06) 48%,transparent 70%);animation:raidPulse 1.7s ease-in-out infinite}.raid-boss-aura{width:280px;height:280px;background:radial-gradient(circle,rgba(255,67,85,.3),rgba(162,20,90,.08) 52%,transparent 70%)} @keyframes raidPulse{50%{transform:scale(1.12);opacity:.58}} .raid-attacker-card{position:relative;width:132px;z-index:3;text-align:center;animation:raidAttack .8s cubic-bezier(.2,.9,.2,1) infinite}.raid-attacker-card img{width:112px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:2px solid #86e9ff;box-shadow:0 0 25px rgba(67,212,255,.62)}.raid-attacker-card strong,.raid-attacker-card span{display:block}.raid-attacker-card strong{margin-top:7px}.raid-attacker-card span{font-size:11px;opacity:.72} @keyframes raidAttack{0%,65%,100%{transform:translateX(0) rotate(-2deg)}40%{transform:translateX(42px) scale(1.08) rotate(2deg)}} .raid-stage-boss{position:relative;z-index:2;max-width:240px;max-height:220px;object-fit:contain;filter:drop-shadow(0 18px 25px rgba(0,0,0,.55));animation:raidBossIdle 2.1s ease-in-out infinite}.raid-stage-boss.placeholder{font-size:130px}.raid-battle-stage.is-battle .raid-stage-boss{animation:raidBossIdle 2.1s ease-in-out infinite,raidBossHit .8s steps(1) infinite}.raid-battle-stage.is-enraged .raid-stage-boss{filter:drop-shadow(0 0 25px rgba(255,35,51,.9)) saturate(1.35)} @keyframes raidBossIdle{50%{transform:translateY(-7px)}}@keyframes raidBossHit{45%{transform:translateX(7px);filter:brightness(1.7) drop-shadow(0 0 28px #ff5268)}} .raid-projectile{position:absolute;z-index:5;width:50px;height:10px;border-radius:99px;background:linear-gradient(90deg,transparent,#fff,#4fdfff);box-shadow:0 0 16px #4fdfff;left:58%;top:50%;opacity:0}.is-battle .raid-projectile{animation:raidShot .8s linear infinite}@keyframes raidShot{0%{left:46%;opacity:0}20%{opacity:1}85%{left:83%;opacity:1}100%{left:87%;opacity:0}} .raid-hit-flash{position:absolute;width:90px;height:90px;z-index:5;border-radius:50%;background:radial-gradient(circle,#fff 0,#65dcff 18%,rgba(108,64,255,.55) 40%,transparent 70%);opacity:0}.is-battle .raid-hit-flash{animation:raidFlash .8s ease-out infinite}@keyframes raidFlash{70%{opacity:0;transform:scale(.2)}78%{opacity:1;transform:scale(.65)}100%{opacity:0;transform:scale(1.5)}} .raid-floating-damage{position:absolute;z-index:7;top:20%;right:25%;font-size:31px;font-weight:1000;color:#fff08a;text-shadow:0 3px 0 #8a2a00,0 0 20px #ff9a2f;opacity:0}.is-battle .raid-floating-damage{animation:raidDamage .8s ease-out infinite}@keyframes raidDamage{62%{opacity:0;transform:translateY(10px) scale(.7)}76%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-34px) scale(1)}} .raid-my-deck-stage{position:relative;z-index:4;display:flex;justify-content:center;gap:8px;padding:0 18px 18px}.raid-stage-card{position:relative;width:66px;animation:raidCardEnter .45s both;animation-delay:var(--delay)}.raid-stage-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.35)}.raid-stage-card i{position:absolute;left:4px;right:auto;bottom:4px;height:4px;border-radius:9px;background:linear-gradient(90deg,#31f08a,#d6ff67);box-shadow:0 0 8px rgba(54,255,139,.65)}.raid-stage-card.dead{filter:grayscale(1);opacity:.32}.raid-stage-card.dead:after{content:"X";position:absolute;inset:0;display:grid;place-items:center;color:#ff5268;font-size:30px;font-weight:1000}.raid-stage-empty{opacity:.6;padding:20px} @keyframes raidCardEnter{from{opacity:0;transform:translateY(18px) scale(.85)}} .raid-boss-cast{position:absolute;z-index:6;left:50%;top:74px;transform:translateX(-50%);width:min(420px,70%);text-align:center}.raid-boss-cast span{font-size:11px;font-weight:900;color:#ff9aa8;letter-spacing:.12em}.raid-boss-cast i{display:block;margin-top:5px;height:4px;border-radius:8px;background:linear-gradient(90deg,#ff304e,#ffb342);transform-origin:left;animation:raidCast linear infinite}@keyframes raidCast{from{transform:scaleX(0)}to{transform:scaleX(1)}} .raid-participant-list article.defeated{opacity:.52;filter:grayscale(.7)}.raid-user-hp{display:block;width:150px;max-width:100%;height:6px;margin:5px 0 2px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}.raid-user-hp i{display:block;height:100%;background:linear-gradient(90deg,#24de7b,#e6f45a);transition:width .4s}.raid-rank-row span{position:relative;overflow:hidden}.raid-rank-row span i{position:absolute;z-index:-1;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#39d9ff,#826dff);border-radius:4px}.raid-rank-row.defeated{opacity:.5}.raid-my-damage small{display:block;margin-top:5px;opacity:.7}.raid-battle-stage.is-ended:after{content:"BATTLE END";position:absolute;z-index:9;inset:0;display:grid;place-items:center;background:rgba(2,5,12,.56);font-size:42px;font-weight:1000;letter-spacing:.12em;text-shadow:0 0 28px #6ce4ff} @media(max-width:720px){.raid-battle-stage{min-height:390px}.raid-arena{padding:8px 1%;grid-template-columns:1fr 1fr}.raid-stage-boss{max-width:155px;max-height:165px}.raid-attacker-card{width:90px}.raid-attacker-card img{width:78px}.raid-my-deck-stage{gap:5px}.raid-stage-card{width:49px}.raid-floating-damage{font-size:22px;right:15%}.raid-stage-header{padding:13px 14px}.raid-stage-header b{font-size:14px}.raid-stage-timer{font-size:18px}} /* v9.2.1 raid rebuild from v9.1.8 baseline */ .raid-lobby-screen{padding:26px;border:1px solid #194b72;border-radius:26px;background:linear-gradient(145deg,#06152c,#081d37);box-shadow:0 24px 70px rgba(0,0,0,.28)} .raid-lobby-boss{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center}.raid-lobby-boss>img{width:180px;height:180px;object-fit:cover;border-radius:20px;border:1px solid rgba(105,221,255,.35);box-shadow:0 15px 35px rgba(0,0,0,.4)} .raid-lobby-boss h2{font-size:32px;margin:8px 0}.raid-lobby-countdown{display:flex;align-items:end;gap:12px}.raid-lobby-countdown span{color:#99b9d5}.raid-lobby-countdown b{font-size:36px;color:#7cecff}.raid-lobby-progress{height:8px;background:#102842;border-radius:999px;overflow:hidden;margin:22px 0}.raid-lobby-progress i{display:block;height:100%;background:linear-gradient(90deg,#20c7ff,#785cff);box-shadow:0 0 18px #38c7ff} .raid-lobby-join{width:100%;min-height:56px}.raid-lobby-deck{display:flex;justify-content:center;gap:10px;min-height:104px;align-items:center;margin:20px 0;padding:16px;border:1px solid rgba(106,220,255,.18);border-radius:18px;background:rgba(1,9,25,.5)}.raid-lobby-deck img{width:72px!important;height:96px!important;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.28)} .raid-lobby-members{display:grid;gap:10px}.raid-lobby-members article{display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035)}.raid-lobby-members article>div{display:flex}.raid-lobby-members article img{width:32px!important;height:43px!important;object-fit:cover;border-radius:5px;margin-right:-5px;border:1px solid #203f61} .raid-lobby-members article.anonymous{border:1px solid rgba(104,197,255,.14);background:linear-gradient(100deg,rgba(23,52,82,.72),rgba(8,23,43,.72))}.raid-anonymous-cards{gap:3px}.raid-anonymous-cards i{display:grid;place-items:center;width:32px;height:43px;border:1px solid #315675;border-radius:5px;background:repeating-linear-gradient(135deg,#102d48 0 5px,#0b2138 5px 10px);color:#70cdef;font-style:normal;font-weight:1000;box-shadow:inset 0 0 12px rgba(36,160,220,.12)}.raid-lobby-members article.anonymous>span{color:#7fa6c4;font-size:12px;font-weight:800}.raid-reward-breakdown{width:fit-content;max-width:100%;margin:-12px auto 18px;padding:8px 14px;border:1px solid rgba(115,220,255,.18);border-radius:999px;background:rgba(33,87,125,.18);color:#a9d8ef;font-size:13px;font-weight:800} .raid-room-browser{padding:26px;border:1px solid #1d4269;border-radius:24px;background:linear-gradient(155deg,#071a32,#071123);box-shadow:0 24px 70px rgba(0,0,0,.32)}.raid-room-browser>.panel-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.raid-room-browser>.panel-title strong{color:#71eaff}.raid-room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.raid-room-card{display:grid;grid-template-columns:92px 1fr;gap:14px;overflow:hidden;padding:14px;border:1px solid rgba(103,210,255,.18);border-radius:18px;background:rgba(15,39,67,.72)}.raid-room-card.joinable{box-shadow:inset 3px 0 #43dff5}.raid-room-card.locked{opacity:.62}.raid-room-card>img{width:92px!important;height:126px!important;object-fit:cover;border-radius:12px}.raid-room-card small{color:#66dff4;font-weight:900;letter-spacing:1px}.raid-room-card h3{margin:5px 0;font-size:21px}.raid-room-card p{margin:4px 0;color:#a9bfd2}.raid-room-card span{display:block;margin:7px 0;color:#fff;font-weight:900}.raid-room-card button{width:100%;min-height:40px}.raid-room-create{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}.raid-room-create h3{width:100%;margin:0 0 4px}.raid-room-refund{margin-bottom:16px;padding:12px 15px;border:1px solid rgba(76,231,175,.28);border-radius:13px;background:rgba(35,151,111,.12);color:#92f5d0;font-weight:900} .raid-refresh-btn{width:auto!important;margin-left:12px;white-space:nowrap}.raid-lobby-actions{display:flex;justify-content:flex-end;gap:9px;margin-bottom:12px}.raid-lobby-actions .btn{width:auto;min-width:130px}.raid-lobby-actions .danger{background:linear-gradient(135deg,#8f1832,#d83250);border-color:#f05b75} .fullscreen-play-link{position:absolute;z-index:5;right:0;top:-20px;display:flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid rgba(111,235,255,.32);border-radius:999px;color:#c9f7ff;text-decoration:none;background:rgba(4,21,45,.94);box-shadow:0 5px 16px rgba(0,0,0,.25);white-space:nowrap;transition:.2s}.fullscreen-play-link:hover{transform:translateY(-1px);border-color:#79efff;background:#0a3154}.fullscreen-play-link span{color:#75efff;font-size:13px;line-height:1}.fullscreen-play-link b{font-size:10px;letter-spacing:.2px}@media(max-width:820px){.fullscreen-play-link{position:fixed;z-index:80;top:auto;right:12px;bottom:12px;padding:8px 11px;box-shadow:0 8px 25px rgba(0,0,0,.42),0 0 18px rgba(0,184,255,.2)}.fullscreen-play-link span{font-size:15px}.fullscreen-play-link b{font-size:11px}} .raid-stage-boss-hud{position:relative;z-index:6;padding:10px 22px 0}.raid-stage-boss-hud>div:first-child{display:flex;justify-content:space-between;font-size:13px}.raid-stage-boss-hud span{font-weight:900}.raid-stage-boss-hud b{color:#d9ebff}.raid-stage-boss-track{position:relative;height:12px;margin-top:7px;background:#06101d;border:1px solid rgba(255,255,255,.12);border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.65)}.raid-stage-boss-track em,.raid-stage-boss-track i{position:absolute;inset:0 auto 0 0;border-radius:inherit}.raid-stage-boss-track em{background:linear-gradient(90deg,#ff334e,#ff9a42);opacity:.22;transition:width .8s ease}.raid-stage-boss-track i{background:linear-gradient(90deg,#ff315a,#ffcf5b);box-shadow:0 0 18px rgba(255,74,88,.7);transition:width .25s ease} .raid-projectile{display:none!important}.raid-attacker-card{animation:raidAttackerLunge .8s ease-in-out infinite}.raid-slash-effect{position:absolute;z-index:7;width:110px;height:5px;right:19%;top:47%;opacity:0;transform:rotate(-24deg);background:linear-gradient(90deg,transparent,#fff,#63dbff,transparent);filter:drop-shadow(0 0 12px #54d8ff)}.is-battle .raid-slash-effect{animation:raidSlash .8s ease-in-out infinite}@keyframes raidAttackerLunge{0%,100%{transform:translateX(0) scale(1)}42%{transform:translateX(22px) scale(1.04)}55%{transform:translateX(28px) scale(1.02)}}@keyframes raidSlash{0%,38%,100%{opacity:0;transform:rotate(-24deg) scaleX(.35)}45%,58%{opacity:1;transform:rotate(-24deg) scaleX(1)}} .raid-user-hp{height:5px;background:#0b1a2d;border-radius:999px;overflow:hidden}.raid-user-hp i{background:linear-gradient(90deg,#1fe38e,#c9ff5b);box-shadow:0 0 8px rgba(57,239,151,.45)} .raid-result-screen{position:relative;overflow:hidden;padding:42px;border:1px solid #234b77;border-radius:28px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(63,198,255,.18),transparent 45%),linear-gradient(160deg,#06152d,#071126);box-shadow:0 30px 90px rgba(0,0,0,.42)}.raid-result-screen.fail{background:radial-gradient(circle at 50% 0,rgba(255,55,90,.16),transparent 45%),linear-gradient(160deg,#1d0a16,#071126)}.raid-result-screen h1{font-size:52px;margin:10px 0 6px;letter-spacing:.03em}.raid-result-screen h2{font-size:26px}.raid-result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:720px;margin:26px auto}.raid-result-stats>div{padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.04)}.raid-result-stats span{display:block;color:#88a9c6;font-size:12px}.raid-result-stats b{font-size:24px}.raid-reward-stage{display:flex;justify-content:center;gap:16px;margin:28px auto;max-width:540px}.raid-reward-stage article{width:210px;padding:22px;border:1px solid rgba(120,214,255,.22);border-radius:20px;background:linear-gradient(160deg,rgba(24,56,94,.9),rgba(8,20,43,.96));box-shadow:0 16px 38px rgba(0,0,0,.3);animation:raidRewardPop .55s both}.raid-reward-stage article:nth-child(2){animation-delay:.16s}.raid-reward-icon{font-size:34px;color:#7de9ff}.raid-reward-stage span{display:block;color:#9bb5ce}.raid-reward-stage b{display:block;font-size:28px;margin-top:5px}.raid-claim-btn{width:min(520px,100%);min-height:58px}@keyframes raidRewardPop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}} .raid-outcome-screen{position:relative;isolation:isolate;overflow:hidden;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:46px 24px;border:2px solid #62efff;border-radius:28px;text-align:center;background:radial-gradient(circle at 50% 28%,rgba(74,231,255,.25),transparent 32%),linear-gradient(155deg,#061c32,#061020 72%);box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 0 80px rgba(70,230,255,.08);animation:raidOutcomeIn .7s ease-out both}.raid-outcome-screen.failed{border-color:#ff526f;background:radial-gradient(circle at 50% 28%,rgba(255,50,84,.22),transparent 34%),linear-gradient(155deg,#300914,#10070d 72%);box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 0 90px rgba(255,42,76,.1)}.raid-outcome-screen.timeout{border-color:#ffb84c;background:radial-gradient(circle at 50% 28%,rgba(255,170,57,.2),transparent 34%),linear-gradient(155deg,#291707,#100c07 72%)}.raid-outcome-backdrop{position:absolute;z-index:-1;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.08),transparent 28%);animation:raidOutcomeSpin 14s linear infinite}.raid-outcome-mark{display:grid;place-items:center;width:112px;height:112px;margin-bottom:15px;border:2px solid currentColor;border-radius:50%;color:#7ff5ff;font-size:64px;font-weight:1000;box-shadow:0 0 45px currentColor}.raid-outcome-screen.failed .raid-outcome-mark{color:#ff657e}.raid-outcome-screen.timeout .raid-outcome-mark{color:#ffc766;font-size:48px}.raid-outcome-label{margin-top:12px;padding:7px 14px;border-radius:999px;background:rgba(111,241,255,.12);color:#82f5ff;font-size:12px;font-weight:1000;letter-spacing:2px}.raid-outcome-screen.failed .raid-outcome-label{background:rgba(255,74,105,.13);color:#ff8799}.raid-outcome-screen.timeout .raid-outcome-label{background:rgba(255,179,72,.13);color:#ffc76f}.raid-outcome-screen h1{margin:12px 0 4px;font-size:clamp(40px,7vw,72px)}.raid-outcome-screen h2{margin:4px 0 8px;font-size:25px}.raid-outcome-screen>p:not(.eyebrow){color:#bad0df;font-weight:800}.raid-outcome-hp{display:flex;gap:14px;align-items:center;margin:17px 0;padding:11px 16px;border-radius:13px;background:rgba(0,0,0,.3)}.raid-outcome-hp span{color:#91aabc}.raid-outcome-hp b{color:#fff}.raid-result-continue{width:min(420px,100%);margin-top:8px;min-height:58px}.raid-outcome-screen.failed .raid-result-continue{background:linear-gradient(135deg,#b9183b,#ff526f)}.raid-outcome-screen.timeout .raid-result-continue{background:linear-gradient(135deg,#b06a16,#f4a633)}.raid-outcome-screen>small{margin-top:12px;color:#7f96a9}.raid-result-state{display:inline-block;padding:7px 13px;border-radius:999px;background:rgba(87,239,255,.13);color:#75efff;font-weight:1000}.raid-result-screen.failed,.raid-result-screen.timeout{border-color:rgba(255,83,112,.4);background:radial-gradient(circle at 50% 0,rgba(255,55,90,.2),transparent 45%),linear-gradient(160deg,#260913,#090a12)}.raid-result-screen.failed .raid-result-state,.raid-result-screen.timeout .raid-result-state{background:rgba(255,76,103,.14);color:#ff8295}.raid-result-screen.clear h1{color:#81f7ff;text-shadow:0 0 24px rgba(65,224,255,.45)}.raid-result-screen.failed h1{color:#ff6e86;text-shadow:0 0 24px rgba(255,47,78,.4)}.raid-result-screen.timeout h1{color:#ffc66c}@keyframes raidOutcomeIn{from{opacity:0;transform:scale(1.08);filter:brightness(2)}to{opacity:1;transform:none;filter:none}}@keyframes raidOutcomeSpin{to{transform:rotate(360deg)}} @media(max-width:720px){.raid-outcome-screen{min-height:500px;padding:30px 14px}.raid-outcome-mark{width:88px;height:88px;font-size:50px}.raid-outcome-screen h1{font-size:40px}.raid-outcome-hp{flex-direction:column;gap:4px}} @media(max-width:720px){.raid-lobby-screen{padding:16px}.raid-lobby-boss{grid-template-columns:110px 1fr;gap:14px}.raid-lobby-boss>img{width:110px;height:110px}.raid-lobby-boss h2{font-size:24px}.raid-lobby-countdown b{font-size:28px}.raid-lobby-deck{gap:5px}.raid-lobby-deck img{width:50px!important;height:67px!important}.raid-lobby-members article{grid-template-columns:120px 1fr auto}.raid-result-screen{padding:24px 14px}.raid-result-screen h1{font-size:36px}.raid-result-stats{grid-template-columns:1fr}.raid-reward-stage{gap:8px}.raid-reward-stage article{width:50%;padding:16px 8px}} /* v9.2.6 raid card frame / HP / hit feedback */ .raid-combat-card.card-frame{display:block!important;margin:0;transform:none;cursor:default;pointer-events:none} .raid-attacker-card{width:172px;display:flex;flex-direction:column;align-items:center;gap:7px;z-index:5} .raid-attacker-card .raid-main-attacker{width:142px;height:198px;filter:drop-shadow(0 0 18px rgba(83,225,255,.5))} .raid-attacker-card .card-header{font-size:8px;padding:5px 7px 3px}.raid-attacker-card .card-footer{padding:5px 7px}.raid-attacker-card .card-title{font-size:10px}.raid-attacker-card .card-footer small{font-size:7px}.raid-attacker-card .card-mini-logo{width:17px} .raid-my-deck-stage{align-items:flex-end;overflow:visible!important;padding-bottom:8px} .raid-stage-card{position:relative;width:98px!important;overflow:visible!important;border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;transform-origin:center bottom;animation:raidDeckIdle 2.6s ease-in-out infinite;animation-delay:var(--delay)} .raid-stage-card .raid-deck-frame{width:88px;height:122px;box-shadow:0 7px 22px rgba(0,0,0,.5)} .raid-stage-card .card-header{font-size:6px;padding:3px 5px 2px}.raid-stage-card .card-footer{padding:3px 4px}.raid-stage-card .card-title{font-size:7px;line-height:1}.raid-stage-card .card-footer small{font-size:5px}.raid-stage-card .card-mini-logo{width:11px}.raid-stage-card .card-inner{border-radius:7px}.raid-stage-card .card-art{margin:0 4px} .raid-card-hp{width:90px;margin:5px auto 0}.raid-card-hp>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;font-size:8px;color:#dffaff}.raid-card-hp>span b{letter-spacing:1px}.raid-card-hp>span em{font-style:normal;color:#fff} .raid-card-hp>div{position:relative;height:10px;padding:2px;border:1px solid rgba(118,220,255,.65);border-radius:4px;background:#030914;box-shadow:inset 0 0 6px #000,0 0 8px rgba(67,223,255,.22);overflow:hidden} .raid-card-hp>div u,.raid-card-hp>div i{position:absolute;left:2px;top:2px;bottom:2px;display:block;text-decoration:none;border-radius:2px;transition:width .55s ease} .raid-card-hp>div u{background:rgba(255,198,67,.72);transition-duration:1.15s}.raid-card-hp>div i{z-index:2;background:linear-gradient(90deg,#16d98e,#b9ff57);box-shadow:0 0 9px rgba(78,255,157,.7)} .raid-stage-card.danger .raid-card-hp>div i{background:linear-gradient(90deg,#ff3f50,#ffb13b);animation:raidHpDanger .58s steps(2,end) infinite}.raid-stage-card.dead{filter:grayscale(1) brightness(.45)}.raid-stage-card.dead:after{content:'K.O';position:absolute;inset:42px 0 auto;color:#fff;font-weight:1000;font-size:22px;text-shadow:0 2px 8px #000,0 0 12px #ff2f4f;z-index:12} .raid-card-hit{position:absolute;inset:-8px;border-radius:12px;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,255,255,.95) 0 8%,rgba(255,57,73,.7) 18%,transparent 58%);mix-blend-mode:screen;animation:raidPartyHit var(--boss-attack-ms) ease-in-out infinite} .raid-stage-boss{transform-origin:center bottom;animation:raidBossStrike var(--boss-attack-ms) cubic-bezier(.5,0,.2,1) infinite!important} .raid-boss-aura{animation:raidBossAura 1.3s ease-in-out infinite}.is-enraged .raid-boss-aura{filter:hue-rotate(125deg) saturate(2);animation-duration:.42s}.is-enraged .raid-stage-boss{filter:drop-shadow(0 0 24px #ff243f) drop-shadow(0 0 55px rgba(255,30,60,.85));animation-duration:calc(var(--boss-attack-ms) * .72)!important} .raid-party-side:after{content:'';position:absolute;inset:15% 0 5%;z-index:9;pointer-events:none;opacity:0;background:linear-gradient(125deg,transparent 38%,rgba(255,255,255,.95) 46%,#ff334f 49%,transparent 55%);filter:drop-shadow(0 0 9px #ff1f47);animation:raidBossSlash var(--boss-attack-ms) ease-out infinite} .raid-battle-stage.is-enraged:before{content:'⚠ BOSS ENRAGED';position:absolute;z-index:30;left:50%;top:92px;transform:translateX(-50%);padding:8px 22px;border:1px solid #ff4257;border-radius:999px;color:#fff;font-weight:1000;letter-spacing:2px;background:rgba(112,0,18,.72);box-shadow:0 0 25px rgba(255,24,56,.62);animation:raidEnrageBanner .7s ease-in-out infinite alternate} @keyframes raidDeckIdle{50%{transform:translateY(-3px)}} @keyframes raidHpDanger{50%{filter:brightness(1.8)}} @keyframes raidBossStrike{0%,68%,100%{transform:translateX(0) scale(1)}74%{transform:translateX(-8%) scale(1.05)}79%{transform:translateX(-48%) scale(1.12)}84%{transform:translateX(-42%) scale(1.08)}91%{transform:translateX(0) scale(1)}} @keyframes raidBossSlash{0%,76%,100%{opacity:0;transform:translateX(80px) scale(.7)}79%{opacity:1;transform:translateX(0) scale(1.15)}84%{opacity:0;transform:translateX(-70px) scale(1.4)}} @keyframes raidPartyHit{0%,77%,100%{opacity:0;transform:scale(.75)}80%{opacity:1;transform:scale(1.15)}85%{opacity:0;transform:scale(1.35)}} @keyframes raidBossAura{50%{transform:scale(1.12);opacity:.85}} @keyframes raidEnrageBanner{to{filter:brightness(1.65);box-shadow:0 0 42px rgba(255,24,56,.9)}} @media(max-width:720px){.raid-stage-card{width:63px!important}.raid-stage-card .raid-deck-frame{width:58px;height:82px}.raid-card-hp{width:60px}.raid-card-hp>span{font-size:6px}.raid-attacker-card .raid-main-attacker{width:100px;height:142px}.raid-attacker-card{width:115px}} /* v9.2.8 raid enrage aura + compact card art aspect fix */ .raid-boss-side{isolation:isolate;overflow:visible} .raid-enrage-flames,.raid-enrage-skulls{display:none;position:absolute;left:50%;top:50%;pointer-events:none} .is-enraged .raid-enrage-flames{display:block;z-index:1;width:330px;height:330px;transform:translate(-50%,-50%);border-radius:50%;background: radial-gradient(circle,rgba(255,34,52,.46) 0 28%,rgba(174,0,23,.24) 43%,transparent 69%), conic-gradient(from 0deg,transparent 0 7%,rgba(255,21,49,.8) 10%,transparent 15% 24%,rgba(255,101,33,.72) 28%,transparent 35% 49%,rgba(255,19,44,.78) 54%,transparent 61% 74%,rgba(255,88,26,.72) 79%,transparent 86% 100%); filter:blur(4px) drop-shadow(0 0 24px rgba(255,20,42,.9));mix-blend-mode:screen;animation:raidEnrageFlameSpin 2.1s linear infinite,raidEnrageFlamePulse .56s ease-in-out infinite alternate} .is-enraged .raid-enrage-flames:before,.is-enraged .raid-enrage-flames:after{content:"";position:absolute;inset:28px;border-radius:46% 54% 42% 58%;border:3px solid rgba(255,57,68,.7);box-shadow:0 0 25px #ff213e,inset 0 0 35px rgba(255,30,52,.5);animation:raidEnrageRingWarp 1.05s ease-in-out infinite alternate} .is-enraged .raid-enrage-flames:after{inset:57px;border-width:2px;border-color:rgba(255,151,65,.72);animation-delay:-.45s} .is-enraged .raid-enrage-skulls{display:block;z-index:4;width:300px;height:300px;transform:translate(-50%,-50%);animation:raidSkullOrbit 6s linear infinite} .raid-enrage-skulls i{position:absolute;left:50%;top:50%;font-style:normal;font-size:27px;color:#ffcad0;text-shadow:0 0 6px #fff,0 0 13px #ff3048,0 0 24px #b4001b;filter:drop-shadow(0 0 8px rgba(255,24,55,.9));opacity:.92;animation:raidSkullFlicker .45s ease-in-out infinite alternate} .raid-enrage-skulls i:nth-child(1){transform:rotate(0deg) translateY(-142px) rotate(0deg)} .raid-enrage-skulls i:nth-child(2){transform:rotate(60deg) translateY(-142px) rotate(-60deg);animation-delay:-.08s} .raid-enrage-skulls i:nth-child(3){transform:rotate(120deg) translateY(-142px) rotate(-120deg);animation-delay:-.16s} .raid-enrage-skulls i:nth-child(4){transform:rotate(180deg) translateY(-142px) rotate(-180deg);animation-delay:-.24s} .raid-enrage-skulls i:nth-child(5){transform:rotate(240deg) translateY(-142px) rotate(-240deg);animation-delay:-.32s} .raid-enrage-skulls i:nth-child(6){transform:rotate(300deg) translateY(-142px) rotate(-300deg);animation-delay:-.40s} .is-enraged .raid-boss-aura{width:340px;height:340px;background:radial-gradient(circle,rgba(255,38,53,.56),rgba(112,0,18,.3) 42%,transparent 72%);box-shadow:0 0 70px rgba(255,20,45,.75),inset 0 0 45px rgba(255,103,43,.4);filter:none!important;animation:raidEnrageAuraBreath .48s ease-in-out infinite alternate!important} .is-enraged .raid-stage-boss{z-index:3;filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 30px #ff213f) drop-shadow(0 0 70px rgba(175,0,24,.95)) saturate(1.42) contrast(1.08)!important} /* small raid deck card: keep full portrait art instead of squeezing it between header/footer */ .raid-stage-card .raid-deck-frame{aspect-ratio:2/2.82!important;box-sizing:border-box!important;padding:3px!important} .raid-stage-card .raid-deck-frame .card-inner{position:relative!important;display:block!important;height:100%!important;padding:3px!important;overflow:hidden!important} .raid-stage-card .raid-deck-frame .card-header{position:absolute!important;z-index:5!important;left:5px!important;right:5px!important;top:5px!important;height:16px!important;padding:0 3px!important;border-radius:4px!important;background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.18))!important;pointer-events:none} .raid-stage-card .raid-deck-frame .card-header span{font-size:8px!important;line-height:1!important}.raid-stage-card .raid-deck-frame .card-header b{font-size:5px!important} .raid-stage-card .raid-deck-frame .card-art{position:absolute!important;inset:3px!important;margin:0!important;border-radius:6px!important;overflow:hidden!important;min-height:0!important} .raid-stage-card .raid-deck-frame .card-art img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center center!important;transform:none!important} .raid-stage-card .raid-deck-frame .card-footer{display:none!important} .raid-stage-card .raid-deck-frame:after{z-index:6} @keyframes raidEnrageFlameSpin{to{transform:translate(-50%,-50%) rotate(360deg)}} @keyframes raidEnrageFlamePulse{to{width:365px;height:365px;opacity:.82}} @keyframes raidEnrageRingWarp{to{transform:scale(1.08) rotate(18deg);border-radius:58% 42% 56% 44%}} @keyframes raidSkullOrbit{to{transform:translate(-50%,-50%) rotate(-360deg)}} @keyframes raidSkullFlicker{to{opacity:.55;filter:drop-shadow(0 0 15px rgba(255,24,55,1));font-size:31px}} @keyframes raidEnrageAuraBreath{to{transform:scale(1.16);opacity:.72}} @media(max-width:720px){.is-enraged .raid-enrage-flames{width:230px;height:230px}.is-enraged .raid-enrage-skulls{width:220px;height:220px}.raid-enrage-skulls i{font-size:20px}.raid-enrage-skulls i:nth-child(1){transform:rotate(0deg) translateY(-104px) rotate(0deg)}.raid-enrage-skulls i:nth-child(2){transform:rotate(60deg) translateY(-104px) rotate(-60deg)}.raid-enrage-skulls i:nth-child(3){transform:rotate(120deg) translateY(-104px) rotate(-120deg)}.raid-enrage-skulls i:nth-child(4){transform:rotate(180deg) translateY(-104px) rotate(-180deg)}.raid-enrage-skulls i:nth-child(5){transform:rotate(240deg) translateY(-104px) rotate(-240deg)}.raid-enrage-skulls i:nth-child(6){transform:rotate(300deg) translateY(-104px) rotate(-300deg)}.is-enraged .raid-boss-aura{width:245px;height:245px}} /* v9.2.9 와고 인증·메시지함 */ .message-center{margin-top:22px;background:linear-gradient(145deg,rgba(12,20,40,.96),rgba(18,30,54,.94));border:1px solid rgba(126,206,255,.2);border-radius:22px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.25)} .message-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:20px}.message-head h2{margin:3px 0 6px}.message-list{display:grid;gap:12px}.user-message{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px;background:rgba(255,255,255,.035);cursor:pointer}.user-message.unread{border-color:rgba(91,214,255,.5);box-shadow:inset 4px 0 #5bd6ff}.user-message h3{margin:6px 0}.user-message p{white-space:pre-wrap;color:#c8d3e6}.message-coupon{display:flex;gap:10px;align-items:center;margin-top:12px}.message-coupon code{padding:10px 14px;border-radius:10px;background:#070d19;color:#ffe27a;font-weight:800;letter-spacing:1px}.message-coupon button{border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}.wago-verify-panel{margin-bottom:18px}.verify-card{border:1px solid rgba(255,215,88,.25);border-radius:18px;padding:18px;background:rgba(255,199,62,.055)}.verify-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:14px 0}.verify-form input{min-width:0;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#0b1323;color:white}.verify-guide{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.verify-guide p{width:100%;margin:0;color:#c9d5e8}.verify-status{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px;border-radius:12px;background:rgba(0,0,0,.22)}.verify-status code{color:#ffe27a;font-size:17px;font-weight:900}.status-verified{border:1px solid rgba(75,230,151,.5)}.status-review{border:1px solid rgba(255,190,66,.5)} @media(max-width:760px){.message-head{align-items:flex-start;flex-direction:column}.verify-form{grid-template-columns:1fr}.verify-guide .btn{width:100%}.message-coupon{align-items:stretch;flex-direction:column}.message-coupon code{text-align:center}} .message-reward{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border:1px solid rgba(255,213,83,.35);border-radius:12px;background:linear-gradient(135deg,rgba(255,191,44,.12),rgba(255,120,35,.06))}.message-reward strong{color:#ffd86a;font-size:15px}.message-reward button{border:1px solid #e6b83e;border-radius:9px;background:linear-gradient(#5b4314,#2d210b);color:#fff4be;padding:9px 14px;font-weight:900;cursor:pointer}.message-reward button:disabled{opacity:.55;cursor:default;filter:grayscale(.45)} /* v9.3.5 mobile navigation wrap + ticker readability */ @media (max-width: 767px){ .header{overflow:visible} .tabs{ width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:auto; gap:7px; padding:7px; overflow:visible; } .tabs .tab{ width:100%; min-width:0; min-height:44px; padding:9px 4px; display:flex; align-items:center; justify-content:center; white-space:normal; overflow-wrap:anywhere; word-break:keep-all; line-height:1.15; text-align:center; font-size:12px; } .tabs .tab.mineral-tab{min-height:44px} .mineral-tab-label{flex-direction:row;gap:.22em;white-space:normal} .high-grade-feed{align-items:stretch} .high-grade-label{justify-content:center;min-width:92px;padding:0 8px;text-align:center;line-height:1.25} .high-grade-viewport{display:flex;align-items:center} .high-grade-item,.high-grade-empty{padding:0 14px;font-size:11px} } @media (max-width: 370px){ .tabs{grid-template-columns:repeat(2,minmax(0,1fr))} .tabs .tab{font-size:12px} .high-grade-label{min-width:82px;font-size:8px} } /* v9.3.6 message claim cleanup */ .user-message.message-removing{pointer-events:none;animation:messageClaimRemove .22s ease forwards} @keyframes messageClaimRemove{to{opacity:0;transform:translateY(-8px) scale(.98);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0;overflow:hidden}} /* v9.4.9 와이고수 SOOP 일일퀘스트 */ .daily-quest-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:28px;align-items:center;overflow:hidden;border:1px solid rgba(83,210,255,.3);border-radius:24px;padding:32px;background:radial-gradient(circle at 85% 25%,rgba(255,204,60,.16),transparent 32%),linear-gradient(135deg,rgba(8,22,39,.98),rgba(5,12,24,.98));box-shadow:0 24px 60px rgba(0,0,0,.28)} .daily-quest-copy h2{margin:4px 0 10px;font-size:30px}.daily-quest-copy>p{color:#aebed1;line-height:1.7}.daily-quest-copy>small{display:block;margin-top:14px;color:#71869d}.daily-quest-status{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:20px 0;padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(0,0,0,.22)}.daily-quest-status b{font-size:18px;color:#fff}.daily-quest-status span{color:#7fe4ff}.daily-quest-actions{display:flex;gap:10px}.daily-quest-reward{min-height:250px;display:grid;place-items:center;align-content:center;gap:8px;border:1px solid rgba(255,206,79,.36);border-radius:22px;background:linear-gradient(160deg,rgba(255,197,55,.14),rgba(255,255,255,.025));box-shadow:inset 0 0 40px rgba(255,193,38,.06)}.daily-quest-reward span{letter-spacing:2px;color:#ffda71;font-size:12px;font-weight:900}.daily-quest-reward strong{font-size:38px;color:#fff}.daily-quest-reward b{font-size:28px;color:#ffd75e}.daily-quest-reward em{font-style:normal;color:#7fa1be;letter-spacing:1.4px;font-size:11px}@media(max-width:760px){ .daily-quest-panel{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:16px;padding:18px 14px;border-radius:18px;overflow:hidden} .daily-quest-copy,.daily-quest-reward{width:100%;min-width:0} .daily-quest-copy h2{font-size:clamp(22px,7vw,28px);line-height:1.2;overflow-wrap:anywhere;word-break:keep-all} .daily-quest-copy>p{font-size:13px;line-height:1.65;word-break:keep-all} .daily-quest-copy>small{font-size:11px;line-height:1.55;word-break:keep-all} .daily-quest-status{width:100%;min-width:0;display:grid;grid-template-columns:1fr;gap:7px;margin:16px 0;padding:14px} .daily-quest-status b,.daily-quest-status span{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:keep-all} .daily-quest-status b{font-size:16px} .daily-quest-status span{font-size:12px;line-height:1.5} .daily-quest-actions{width:100%;display:grid;grid-template-columns:1fr;gap:9px} .daily-quest-actions .btn{width:100%;min-width:0;margin:0;padding:13px 10px;font-size:14px;white-space:normal;word-break:keep-all} .daily-quest-reward{min-height:150px;padding:18px 10px;border-radius:16px} .daily-quest-reward strong{font-size:clamp(30px,10vw,38px)} .daily-quest-reward b{font-size:clamp(23px,8vw,28px)} } @media(max-width:380px){ .daily-quest-panel{padding:15px 11px} .daily-quest-copy h2{font-size:21px} .daily-quest-copy>p{font-size:12px} .daily-quest-status{padding:12px} .daily-quest-reward{min-height:136px} } /* v9.4.10 SOOP post/comment daily quest */ .daily-quest-hub{display:grid;gap:18px}.daily-quest-head{padding:4px 2px}.daily-quest-head h2{margin:4px 0 8px}.daily-quest-head p{margin:0;color:#9fb2c9} .daily-quest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .daily-quest-grid .daily-quest-panel{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px;align-items:stretch} .daily-quest-grid .daily-quest-copy h3{margin:7px 0 12px;font-size:23px}.quest-kind{font-size:12px;font-weight:900;letter-spacing:1.1px;color:#83dfff} .daily-quest-grid .daily-quest-reward{min-height:150px}.quest-comment{border-color:rgba(179,120,255,.34);background:radial-gradient(circle at 85% 25%,rgba(171,88,255,.17),transparent 34%),linear-gradient(135deg,rgba(16,15,39,.98),rgba(7,10,25,.98))} .quest-comment .quest-kind{color:#d2a6ff}.quest-comment .daily-quest-reward{border-color:rgba(190,125,255,.36);background:linear-gradient(160deg,rgba(167,84,255,.16),rgba(255,255,255,.025))} .daily-quest-note{display:block;color:#71869d;line-height:1.6} @media(max-width:900px){.daily-quest-grid{grid-template-columns:1fr}.daily-quest-grid .daily-quest-panel{grid-template-columns:minmax(0,1fr) minmax(180px,.55fr)}} @media(max-width:760px){.daily-quest-grid{gap:13px}.daily-quest-grid .daily-quest-panel{grid-template-columns:1fr;padding:16px 12px}.daily-quest-grid .daily-quest-copy h3{font-size:20px}.daily-quest-grid .daily-quest-reward{min-height:125px}.daily-quest-note{font-size:11px;word-break:keep-all}} /* v9.4.12 post-only daily quest */ .daily-quest-grid-single{grid-template-columns:minmax(0,1fr);max-width:920px;margin-inline:auto} /* v9.4.17 PVE ultimate overlay */ .battle-ultimate-overlay{position:absolute;inset:0;z-index:80;display:grid;place-items:center;overflow:hidden;background:#000;animation:ultimateOverlayIn .18s ease-out both}.battle-ultimate-overlay.closing{animation:ultimateOverlayOut .22s ease-in both}.battle-ultimate-media{position:absolute;inset:0;display:grid;place-items:center}.battle-ultimate-media img,.battle-ultimate-media video{width:100%;height:100%;object-fit:cover}.battle-ultimate-title{position:absolute;z-index:4;left:0;right:0;bottom:7%;text-align:center;text-shadow:0 2px 3px #000,0 0 24px #000}.battle-ultimate-title small,.battle-ultimate-title strong,.battle-ultimate-title span{display:block}.battle-ultimate-title small{font-size:12px;letter-spacing:.35em;color:#8fe9ff}.battle-ultimate-title strong{margin-top:5px;font-size:clamp(30px,6vw,72px);line-height:1;color:#fff;text-shadow:0 0 14px #48dfff,0 0 38px #2475ff}.battle-ultimate-title span{margin-top:10px;font-weight:900;color:#ffe46b}.battle-ultimate-flash{position:absolute;inset:0;z-index:3;pointer-events:none;background:white;mix-blend-mode:screen;animation:ultimateFlash .8s ease-out both}.battle-ultimate-fallback{font-size:clamp(48px,12vw,140px);font-weight:1000;letter-spacing:.08em;color:#fff;text-shadow:0 0 25px #3bdcff,0 0 65px #265bff}.ultimate-playing .battle-arena,.ultimate-playing .battle-hud,.ultimate-playing .battle-topline,.ultimate-playing .battle-message{visibility:hidden}@keyframes ultimateOverlayIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes ultimateOverlayOut{to{opacity:0;transform:scale(.98)}}@keyframes ultimateFlash{0%{opacity:1}18%{opacity:.05}30%{opacity:.55}100%{opacity:0}} /* ========================================================= v9.73 Mobile layout stabilization - Front-end only - No API / Functions / D1 changes ========================================================= */ html,body{ width:100%; max-width:100%; overflow-x:hidden; } img,video,canvas,svg{ max-width:100%; } .page, main, section, article, aside, div{ min-width:0; } /* Generic modal safety for mobile browser/iframe */ .modal{ max-width:100vw; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; } .modal.show{ align-items:flex-start; padding:10px; } .modal-panel{ width:min(960px,calc(100vw - 20px)); max-width:calc(100vw - 20px); max-height:calc(100dvh - 20px); overflow-x:hidden; overflow-y:auto; margin:auto; } .opening-panel, .draw-stage{ max-width:calc(100vw - 20px); } .pack-opening, .pack-open{ max-width:100%; } .pack-opening .pack-envelope, .pack-open .pack-envelope{ width:min(220px,58vw); height:auto; aspect-ratio:220/305; } /* Long text protection */ .pvp-op-head, .pvp-op-scores, .pvp-op-meta, .message-head, .user-message, .panel-title, .battle-cover, .battle-cover-side, .daily-quest-panel{ min-width:0; } .pvp-op-head b, .pvp-op-meta em, .user-message h3, .user-message p, .panel-title h2, .battle-cover p{ overflow-wrap:anywhere; word-break:keep-all; } /* Tablet/mobile core */ @media (max-width:760px){ body{ min-height:100dvh; } .page{ width:100%; min-height:100dvh; margin:0; padding:14px 10px 28px; border-left:0; border-right:0; border-radius:0; overflow-x:hidden; } .header{ flex-direction:column; align-items:stretch; gap:12px; } .brand{ width:100%; } .brand-logo{ width:74px; height:50px; } .brand h1{ font-size:clamp(23px,7vw,30px); white-space:normal; } .summary-bar{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .summary-bar>div{ min-height:68px; padding:11px 12px; } /* Main card-pack screen */ .game-hero{ min-height:auto; grid-template-columns:1fr; gap:18px; padding:22px 14px; } .hero-copy h2{ font-size:clamp(34px,10vw,46px); } .hero-pack-zone{ min-height:280px; } .pack-aura{ width:min(280px,78vw); height:min(280px,78vw); } .draw-options{ display:grid; grid-template-columns:1fr; gap:9px; width:100%; } .draw-options .btn, .btn{ width:100%; min-width:0; } .dashboard-grid{ grid-template-columns:1fr; } /* PVE header */ .battle-cover{ display:grid; grid-template-columns:1fr; align-items:stretch; gap:16px; padding:18px 14px; } .battle-cover h2{ font-size:clamp(26px,8vw,34px); } .battle-cover>div:first-child p:last-child{ font-size:13px; line-height:1.65; max-width:none; } .battle-cover-side{ display:grid; grid-template-columns:1fr; justify-content:stretch; gap:10px; width:100%; } .battle-energy-card, .battle-total{ width:100%; min-width:0; text-align:left; } .battle-total{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 14px; border:1px solid rgba(255,224,116,.2); border-radius:13px; background:rgba(0,0,0,.18); } .battle-total b{ font-size:clamp(28px,9vw,38px); } /* PVE deck area */ .battle-layout{ grid-template-columns:1fr; gap:14px; } .battle-panel{ width:100%; padding:16px 12px; overflow:hidden; } .battle-panel .panel-title{ display:grid; grid-template-columns:1fr; align-items:stretch; gap:12px; } .pve-deck-actions{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .pve-deck-btn{ width:100%; min-width:0; height:44px; padding:0 8px; white-space:nowrap; } .battle-deck{ width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; overflow:visible; margin:14px 0 18px; } .battle-deck-card, .battle-empty-slot{ width:100%; min-width:0; min-height:126px; } .battle-deck-card:nth-child(4), .battle-empty-slot:nth-child(4){ grid-column:1 / 2; } .battle-deck-card img{ height:auto; aspect-ratio:1/1.12; } .battle-deck-card span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .battle-card-picker{ grid-template-columns:1fr; max-height:none; overflow:visible; } .battle-pick-card{ grid-template-columns:58px minmax(0,1fr) auto; width:100%; } .battle-pick-card span{ min-width:0; } .battle-pick-card span b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .monster-panel{ overflow:visible; } .monster-choice{ width:100%; grid-template-columns:72px minmax(0,1fr); } .monster-choice img, .monster-placeholder{ width:72px; height:82px; } /* PVP deck and opponents */ .pvp-deck-head{ display:grid!important; grid-template-columns:1fr!important; gap:12px!important; } .pvp-deck-actions{ width:100%; display:grid; grid-template-columns:1fr; gap:8px; } .pvp-reset-badge{ width:100%; } .pvp-deck-slots{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; } .pvp-deck-slots>*{ min-width:0!important; width:100%!important; } .pvp-card-picker, .pvp-grade-grid{ min-width:0; } .pvp-grade-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .pvp-opponents{ grid-template-columns:1fr!important; gap:12px; } .pvp-opponent{ min-width:0; padding:16px 14px; } .pvp-op-head, .pvp-op-scores, .pvp-op-meta{ gap:8px; } .pvp-op-head b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pvp-op-scores{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pvp-op-meta{ align-items:flex-start; flex-direction:column; } .pvp-op-meta em{ width:100%; } /* Collection */ .dex-cover{ display:grid; grid-template-columns:1fr; gap:14px; padding:19px 15px; } .dex-cover h2{ font-size:clamp(28px,9vw,36px); } .dex-total{ text-align:left; } .dex-search{ grid-template-columns:1fr; } .album-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } /* Raid */ .raid-battle-stage{ min-height:390px; border-radius:16px; } .raid-stage-header{ padding:13px 12px; } .raid-stage-header b{ font-size:13px; } .raid-stage-boss-hud{ left:10px; right:10px; } .raid-arena{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); min-height:220px; padding:8px 2% 0; } .raid-party-side, .raid-boss-side{ min-height:200px; } .raid-party-aura{ width:min(170px,42vw); height:min(170px,42vw); } .raid-boss-aura{ width:min(220px,56vw); height:min(220px,56vw); } .raid-stage-boss{ max-width:min(200px,48vw)!important; max-height:190px!important; } .raid-my-deck-stage{ width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:0 7px 12px; } .raid-stage-card{ width:100%!important; min-width:0; } .raid-stage-card .raid-deck-frame{ width:100%!important; height:auto!important; } .raid-card-hp{ width:100%!important; } .raid-live-grid{ grid-template-columns:1fr!important; } .raid-participant-list article{ grid-template-columns:minmax(0,1fr) auto; } .raid-mini-cards{ display:none; } .is-enraged .raid-enrage-flames, .is-enraged .raid-enrage-skulls{ width:min(220px,58vw)!important; height:min(220px,58vw)!important; } .is-enraged .raid-boss-aura{ width:min(235px,62vw)!important; height:min(235px,62vw)!important; } /* Messages / rewards */ .message-center{ padding:16px 12px; } .message-reward{ flex-direction:column; align-items:stretch; } .message-reward button{ width:100%; } } /* Small phones */ @media (max-width:430px){ .page{ padding-left:8px; padding-right:8px; } .summary-bar{ gap:6px; } .summary-bar b{ font-size:18px; } .battle-panel{ padding:14px 9px; } .pve-deck-actions{ grid-template-columns:1fr; } .battle-deck{ gap:6px; } .battle-deck-card, .battle-empty-slot{ min-height:112px; } .battle-deck-card span, .battle-deck-card b{ font-size:9px; } .battle-pick-card{ grid-template-columns:52px minmax(0,1fr); } .battle-pick-card strong{ grid-column:2; justify-self:start; } .monster-choice{ grid-template-columns:62px minmax(0,1fr); padding:8px; } .monster-choice img, .monster-placeholder{ width:62px; height:72px; } .pvp-deck-slots{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .pvp-grade-grid{ grid-template-columns:1fr!important; } .pvp-op-scores{ grid-template-columns:1fr; } .album-grid{ grid-template-columns:1fr; } .modal.show{ padding:5px; } .modal-panel{ width:calc(100vw - 10px); max-width:calc(100vw - 10px); max-height:calc(100dvh - 10px); border-radius:14px; padding-left:10px; padding-right:10px; } .opening-panel h2{ font-size:clamp(20px,7vw,27px); } .raid-arena{ grid-template-columns:1fr 1fr; } .raid-stage-boss{ max-width:43vw!important; } .raid-attacker-card{ width:92px!important; } .raid-attacker-card .raid-main-attacker{ width:82px!important; height:116px!important; } .raid-battle-stage.is-enraged:before{ max-width:calc(100% - 20px); padding:7px 12px; font-size:10px; white-space:nowrap; } } /* ========================================================= v9.74 Mobile PVE/PVP deck compact one-row layout ========================================================= */ @media (max-width:760px){ /* PVE deck: keep all five cards visible in one row */ .battle-deck{ grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:5px!important; margin:10px 0 14px!important; } .battle-deck-card, .battle-empty-slot{ grid-column:auto!important; min-height:0!important; height:auto!important; padding:5px 3px!important; border-radius:12px!important; } .battle-deck-card img{ width:100%!important; height:auto!important; aspect-ratio:1/1.08!important; border-radius:9px!important; } .battle-deck-card span{ display:block!important; margin-top:4px!important; font-size:9px!important; line-height:1.15!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .battle-deck-card b{ display:block!important; font-size:9px!important; line-height:1.15!important; white-space:nowrap!important; } .battle-empty-slot{ aspect-ratio:.78/1!important; } /* Keep action buttons on one compact row */ .pve-deck-actions{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:6px!important; } .pve-deck-btn{ height:42px!important; font-size:13px!important; } /* PVP deck also stays one row */ .pvp-deck-slots{ grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:5px!important; } .pvp-deck-slots>*{ min-height:0!important; padding:4px!important; } .pvp-deck-slots img{ width:100%!important; height:auto!important; aspect-ratio:1/1.08!important; object-fit:cover!important; } .pvp-deck-slots b, .pvp-deck-slots span, .pvp-deck-slots small{ font-size:8px!important; line-height:1.15!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } } @media (max-width:430px){ .battle-deck, .pvp-deck-slots{ gap:3px!important; } .battle-deck-card, .battle-empty-slot, .pvp-deck-slots>*{ padding:3px 2px!important; border-radius:9px!important; } .battle-deck-card span, .battle-deck-card b, .pvp-deck-slots b, .pvp-deck-slots span, .pvp-deck-slots small{ font-size:7px!important; } } /* ========================================================= v9.75 Mobile PVE tab/simple mode PC layout remains unchanged ========================================================= */ .mobile-pve-tabs, .mobile-pve-quickbar, .pve-mobile-next, .pve-mobile-pane-title{ display:none; } @media (max-width:760px){ #pveHuntView{ padding-bottom:76px; } .mobile-pve-tabs{ position:sticky; top:0; z-index:35; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:8px; margin:0 0 10px; border:1px solid rgba(255,224,116,.24); border-radius:14px; background:rgba(12,11,22,.94); backdrop-filter:blur(12px); box-shadow:0 10px 28px rgba(0,0,0,.3); } .mobile-pve-tabs button{ min-width:0; min-height:42px; padding:8px 5px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.05); color:#cbc8dc; font-weight:900; } .mobile-pve-tabs button.active{ border-color:#f3c84c; color:#17120b; background:linear-gradient(180deg,#ffe58a,#dcae2c); box-shadow:0 5px 18px rgba(243,200,76,.22); } .pve-mobile-pane{ display:none!important; } .pve-mobile-pane.mobile-active{ display:block!important; } .battle-layout{ display:block!important; } .pve-deck-panel{ width:100%; } .pve-mobile-pane-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .pve-mobile-pane-title h2{ margin:2px 0 0; font-size:21px; } .pve-mobile-pane-title button, .pve-mobile-next{ display:block; min-height:42px; border:1px solid rgba(255,224,116,.35); border-radius:11px; background:rgba(255,224,116,.09); color:#ffe78f; font-weight:900; } .pve-mobile-pane-title button{ padding:8px 11px; white-space:nowrap; } .pve-mobile-next{ width:100%; margin-top:10px; } #pveHuntView[data-mobile-pve-tab="deck"] .battle-cover, #pveHuntView[data-mobile-pve-tab="cards"] .battle-cover{ display:none; } #pveHuntView[data-mobile-pve-tab="monsters"] .battle-cover{ margin-bottom:10px; } #pveHuntView[data-mobile-pve-tab="deck"] .pve-deck-panel, #pveHuntView[data-mobile-pve-tab="cards"] .pve-deck-panel{ display:block; } #pveHuntView[data-mobile-pve-tab="monsters"] .pve-deck-panel{ display:none; } .pve-mobile-pane[data-pve-pane="cards"] .battle-card-picker{ max-height:none; overflow:visible; } .pve-mobile-pane[data-pve-pane="monsters"]{ margin-top:0; } .pve-mobile-pane[data-pve-pane="monsters"] .battle-start{ position:sticky; bottom:66px; z-index:20; width:100%; min-height:52px; box-shadow:0 -8px 22px rgba(0,0,0,.32); } .mobile-pve-quickbar{ position:fixed; left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); z-index:70; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:7px; border:1px solid rgba(255,224,116,.26); border-radius:16px; background:rgba(8,8,16,.95); backdrop-filter:blur(14px); box-shadow:0 12px 35px rgba(0,0,0,.55); } .mobile-pve-quickbar button{ min-width:0; min-height:48px; padding:5px 3px; border:0; border-radius:11px; background:transparent; color:#b9b5c9; font-size:11px; font-weight:900; } .mobile-pve-quickbar button span{ display:block; margin-bottom:2px; font-size:18px; } .mobile-pve-quickbar button.active{ color:#ffe078; background:rgba(255,224,120,.11); } } @media (min-width:761px){ .pve-mobile-pane{ display:block!important; } } /* v9.79 RAID enrage cleanup */ .raid-enrage-flames, .is-enraged .raid-enrage-flames, .is-enraged .raid-enrage-flames::before, .is-enraged .raid-enrage-flames::after{ display:none!important; content:none!important; background:none!important; border:0!important; box-shadow:none!important; animation:none!important; } .is-enraged .raid-boss-aura{ z-index:1; } .is-enraged .raid-enrage-skulls{ z-index:2; } .raid-stage-boss{ z-index:3; } /* Raid next-open notice: simple KST schedule text only */ .raid-next-open{display:flex;flex-direction:column;align-items:center;gap:4px} .raid-next-open span{font-size:12px;opacity:.72} .raid-next-open strong{font-size:16px;color:inherit} /* v9.8.9 captain lobby, team and ranking */ .captain-loading{display:grid;place-items:center;gap:12px;min-height:300px;color:#8fb5d4}.captain-loading i{width:46px;height:46px;border:3px solid #183d68;border-top-color:#69e8ff;border-radius:50%;animation:captainSpin .8s linear infinite}@keyframes captainSpin{to{transform:rotate(360deg)}} .captain-lobby,.captain-waiting{position:relative;overflow:hidden;min-height:430px;padding:46px 24px;text-align:center;border:1px solid rgba(105,232,255,.3);border-radius:22px;background:radial-gradient(circle at 50% 15%,rgba(88,72,220,.35),transparent 38%),linear-gradient(145deg,#07162f,#120b2c)}.captain-lobby-glow{position:absolute;inset:-40%;pointer-events:none;background:conic-gradient(from 0deg,transparent,rgba(80,218,255,.08),transparent 35%);animation:captainSpin 12s linear infinite}.captain-lobby>*:not(.captain-lobby-glow),.captain-waiting>*{position:relative}.captain-lobby h2,.captain-waiting h2{max-width:680px;margin:8px auto 12px;font-size:clamp(25px,4vw,40px)}.captain-lobby>p,.captain-waiting>p{color:#a6bbd4}.captain-rule-grid{display:grid;grid-template-columns:repeat(3,120px);justify-content:center;gap:10px;margin:28px 0}.captain-rule-grid div{padding:15px;border:1px solid rgba(105,232,255,.18);border-radius:16px;background:rgba(1,9,28,.55)}.captain-rule-grid b,.captain-rule-grid span{display:block}.captain-rule-grid b{font-size:25px;color:#72eaff}.captain-rule-grid span{font-size:11px;color:#94a9c1}.captain-role-preview{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}.captain-role-preview span{padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.07)}.captain-role-preview i{color:#58728e}.captain-main-btn{display:block;max-width:360px;margin:0 auto 10px}.captain-search-orbit{position:relative;display:grid;place-items:center;width:140px;height:140px;margin:0 auto 20px;border:1px solid rgba(105,232,255,.35);border-radius:50%;background:rgba(4,19,47,.72)}.captain-search-orbit:before,.captain-search-orbit i{content:'';position:absolute;inset:-9px;border:2px dashed rgba(105,232,255,.3);border-radius:50%;animation:captainSpin 5s linear infinite}.captain-search-orbit b{font-size:40px;color:#72eaff}.captain-search-orbit span{margin-top:48px;font-size:11px;color:#88a8c5}.captain-wait-slots{display:grid;grid-template-columns:repeat(3,78px);justify-content:center;gap:15px;margin:25px}.captain-wait-slots div{display:grid;place-items:center;aspect-ratio:1;border:1px dashed #3e668c;border-radius:18px;font-size:24px;color:#537a9e}.captain-wait-slots .filled{border-style:solid;color:#fff;background:linear-gradient(145deg,#6543d7,#177bad)} .captain-team-card,.captain-opponents{padding:22px;margin-bottom:16px;border:1px solid rgba(105,232,255,.2);border-radius:20px;background:linear-gradient(145deg,rgba(7,22,47,.96),rgba(15,9,36,.95))}.captain-team-head,.captain-opponent-head,.captain-team-stats{display:flex;align-items:center;justify-content:space-between;gap:12px}.captain-team-head h2{margin:4px 0}.captain-team-head small{color:#7e9db9}.captain-score{text-align:right}.captain-score b,.captain-score span{display:block}.captain-score b{font-size:28px;color:#72eaff}.captain-score span{font-size:9px;letter-spacing:1.5px;color:#7798b7}.captain-lineup{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.captain-member{min-width:0;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.04)}.captain-member span,.captain-member b,.captain-member small{display:block}.captain-member span{color:#ffd36a;font-size:11px}.captain-member b{margin:5px 0;overflow:hidden;text-overflow:ellipsis}.captain-member small{color:#7f9eb9}.captain-team-stats{justify-content:flex-start}.captain-team-stats span{padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.06)}.captain-team-stats button{margin-left:auto}.captain-opponent{padding:17px;margin-top:12px;border:1px solid rgba(105,232,255,.13);border-radius:16px;background:rgba(1,10,29,.55)}.captain-opponent-head strong{color:#72eaff}.captain-opponent>.btn{margin-top:10px} .captain-rank-head{display:flex;gap:18px;align-items:flex-start}.captain-podiums{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:12px;margin:28px 0}.captain-podium{display:flex;flex-direction:column;align-items:center;padding:20px 10px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.04)}.captain-podium.rank-1{order:2;min-height:180px;border-color:#ffd36a;background:linear-gradient(180deg,rgba(255,211,106,.17),rgba(255,255,255,.03))}.captain-podium.rank-2{order:1;min-height:150px}.captain-podium.rank-3{order:3;min-height:130px}.captain-podium em{font-size:32px;font-style:normal}.captain-podium b{margin:8px 0}.captain-podium span{color:#72eaff;font-weight:900}.captain-podium small{color:#849fba}.captain-rank-list{display:grid;gap:8px}.captain-rank-row{display:grid;grid-template-columns:55px 1fr 100px;gap:12px;align-items:center;padding:13px;border:1px solid rgba(105,232,255,.12);border-radius:13px}.captain-rank-row span small{display:block;color:#7797b5}.captain-rank-row strong{text-align:right} .pvp-ranking .pvp-rank-row:nth-child(1){border-color:#ffd36a;background:linear-gradient(90deg,rgba(255,211,106,.18),rgba(2,10,27,.58))}.pvp-ranking .pvp-rank-row:nth-child(2){border-color:#c9d4e3}.pvp-ranking .pvp-rank-row:nth-child(3){border-color:#d9915b}.pvp-ranking .pvp-rank-row:nth-child(-n+3)>b{font-size:0}.pvp-ranking .pvp-rank-row:nth-child(1)>b:after{content:'👑 1';font-size:15px}.pvp-ranking .pvp-rank-row:nth-child(2)>b:after{content:'🥈 2';font-size:15px}.pvp-ranking .pvp-rank-row:nth-child(3)>b:after{content:'🥉 3';font-size:15px} .captainTeamManageHead{margin-top:28px}.captainCmsTeam{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,260px) auto;gap:10px;align-items:center;padding:12px;border-bottom:1px solid rgba(255,255,255,.09)}.captainCmsTeam b,.captainCmsTeam small{display:block}.captainCmsTeam small{color:#8da0b7;margin-top:4px} @media(max-width:650px){.captain-rule-grid{grid-template-columns:repeat(3,1fr)}.captain-role-preview{gap:5px}.captain-role-preview span{padding:7px;font-size:11px}.captain-lineup,.captain-podiums{grid-template-columns:1fr}.captain-podium.rank-1,.captain-podium.rank-2,.captain-podium.rank-3{order:initial;min-height:0}.captain-team-head{align-items:flex-start}.captain-rank-row{grid-template-columns:42px 1fr 75px}.captainCmsTeam{grid-template-columns:1fr}.captain-lobby,.captain-waiting{padding:34px 15px}} /* v9.9.0 captain tier emblems + SSR evolution */ .captain-member-identity{display:flex;align-items:center;gap:11px;margin:9px 0}.captain-member-identity img{width:54px;height:54px;flex:0 0 54px;object-fit:contain;transform:scale(1.12);filter:drop-shadow(0 4px 10px rgba(0,0,0,.62))}.captain-member-identity b{margin:0;min-width:0;font-size:16px} .evolution-panel{position:relative;overflow:hidden;margin:16px 0;padding:18px;border:1px solid rgba(238,108,255,.42);border-radius:18px;background:radial-gradient(circle at 90% 0,rgba(220,69,255,.22),transparent 38%),linear-gradient(145deg,rgba(27,11,48,.97),rgba(8,19,43,.97));box-shadow:0 12px 35px rgba(117,28,162,.15)}.evolution-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.evolution-head span,.evolution-complete span{display:block;color:#ec8cff;font-size:10px;font-weight:900;letter-spacing:1.6px}.evolution-head b,.evolution-complete b{display:block;margin-top:4px;font-size:18px}.evolution-head em{padding:8px 11px;border-radius:999px;background:linear-gradient(135deg,#d85dff,#6f6cff);color:#fff;font-size:13px;font-style:normal;font-weight:900}.evolution-pity{overflow:hidden;height:7px;margin:16px 0 7px;border-radius:99px;background:rgba(255,255,255,.09)}.evolution-pity i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#795cff,#f06cfb,#ffd166);box-shadow:0 0 14px #d767ff}.evolution-meta,.evolution-cost{display:flex;justify-content:space-between;gap:8px;color:#9fb0ca;font-size:11px}.evolution-cost{margin:14px 0;padding:11px;border-radius:12px;background:rgba(255,255,255,.055);color:#ffe6a6;font-weight:800}.evolution-attempt{width:100%;background:linear-gradient(135deg,#a542e8,#6658ff)}.evolution-warning{display:block;margin-top:9px;text-align:center;color:#9da9bb}.evolution-complete{text-align:center}.evolution-complete small{display:block;margin-top:8px;color:#aeb7ca}.evolution-result{position:relative;overflow:hidden;text-align:center}.evolution-result img{display:block;max-width:220px;max-height:310px;margin:15px auto;border-radius:15px;box-shadow:0 0 34px rgba(229,92,255,.45)}.evolution-result strong,.evolution-result span{display:block;margin:7px}.evolution-result .eyebrow{color:#e986ff;font-weight:900;letter-spacing:2px}.evolution-result .btn{margin-top:15px} @media(max-width:650px){.evolution-meta,.evolution-cost{flex-direction:column}.captain-member-identity{justify-content:center}.captain-member-identity img{width:62px;height:62px;flex-basis:62px}} /* v1012: use the collection card frame in every combat surface */ .battle-card-fighter{height:auto!important;aspect-ratio:2/2.82;border:0!important;border-radius:18px;background:none!important;box-shadow:none!important;overflow:visible!important} .battle-card-fighter>.battle-fighter-card{display:block;width:100%!important;height:100%!important;margin:0;box-sizing:border-box;cursor:default;transform:none!important} .battle-card-fighter>.battle-fighter-card .card-inner{padding:5px;border-radius:11px} .battle-card-fighter>.battle-fighter-card .card-header{height:18px;padding:0 2px} .battle-card-fighter>.battle-fighter-card .card-header span{position:static;padding:0;background:none;font-size:9px;overflow:visible} .battle-card-fighter>.battle-fighter-card .card-header b{font-size:6px} .battle-card-fighter>.battle-fighter-card .card-art{border-radius:7px} .battle-card-fighter>.battle-fighter-card .card-art img{display:block;width:100%!important;height:100%!important;margin:0!important;border:0!important;border-radius:0!important;object-fit:cover} .battle-card-fighter>.battle-fighter-card .card-footer{min-height:34px;padding:4px 1px 0} .battle-card-fighter>.battle-fighter-card .card-footer small{position:static;display:block;padding:0;background:none;font-size:6px} .battle-card-fighter>.battle-fighter-card .card-title{position:static;padding:0;background:none;font-size:8px;line-height:1.05} .battle-card-fighter>.battle-fighter-card .card-mini-logo{display:block;width:17px!important;height:13px!important;margin:0!important;border:0!important;border-radius:0!important;object-fit:contain} .battle-card-fighter>.battle-fighter-card .breakthrough-badge{position:absolute;left:auto;right:5px;top:5px;padding:3px 5px;font-size:7px} .battle-card-fighter>.battle-fighter-card .limited-badge{font-size:6px;padding:3px 5px} .fighter-grade{display:none!important} .raid-combat-card.card-frame{box-sizing:border-box} .raid-combat-card .breakthrough-badge{right:5px!important;top:5px!important;padding:3px 5px!important;font-size:7px!important} .raid-attacker-card .raid-main-attacker .card-art img{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:cover!important} .raid-attacker-card .raid-main-attacker .card-mini-logo{width:17px!important;height:auto!important;aspect-ratio:auto!important;border:0!important;box-shadow:none!important;object-fit:contain!important} .raid-mini-cards .raid-mini-frame{display:block;width:40px;height:56px;margin-right:-9px;padding:2px!important;box-sizing:border-box;cursor:default;transform:none!important} .raid-mini-cards .raid-mini-frame .card-inner{display:block;height:100%;padding:2px;border-radius:5px;overflow:hidden} .raid-mini-cards .raid-mini-frame .card-header{position:absolute;z-index:5;top:3px;left:4px;right:4px;height:9px;padding:0;background:linear-gradient(rgba(0,0,0,.75),transparent)} .raid-mini-cards .raid-mini-frame .card-header span{font-size:5px}.raid-mini-cards .raid-mini-frame .card-header b{display:none} .raid-mini-cards .raid-mini-frame .card-art{position:absolute;inset:2px;margin:0;border-radius:4px}.raid-mini-cards .raid-mini-frame .card-art img{display:block;width:100%!important;height:100%!important;margin:0!important;border:0!important;border-radius:0!important;object-fit:cover!important} .raid-mini-cards .raid-mini-frame .card-footer,.raid-mini-cards .raid-mini-frame .breakthrough-badge{display:none} .captain-battle-modal{padding:0!important;background:rgba(1,5,14,.97)!important} .captain-battle-stage{position:relative;width:min(1180px,100vw);min-height:min(700px,100vh);padding:36px;display:grid;align-content:center;background:radial-gradient(circle at 50% 45%,rgba(42,80,139,.46),transparent 38%),linear-gradient(145deg,#050b17,#10132c 58%,#070813);color:#fff;text-align:center;overflow:hidden} .captain-battle-top{position:absolute;top:22px;left:28px;right:28px;display:flex;justify-content:space-between;color:#74e8ff;font-size:11px;letter-spacing:2px}.captain-battle-top b{color:#ffd77c} .captain-battle-versus{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);align-items:center;gap:18px}.captain-battle-versus>i{font-size:40px;font-style:normal;font-weight:1000;color:#ffe18a;text-shadow:0 0 24px #ff8d24}.captain-battle-versus article{min-width:0;padding:22px 12px;border-radius:22px;background:rgba(4,12,28,.58);transition:.3s}.captain-battle-versus article.round-winner{box-shadow:inset 0 0 0 1px rgba(255,216,112,.5),0 0 35px rgba(255,176,55,.2)}.captain-battle-versus article.round-loser{opacity:.65;filter:saturate(.6)}.captain-battle-versus h3{margin:5px 0 16px}.captain-battle-versus article>strong{display:block;margin-top:16px;color:#78eaff;font-size:20px} .captain-battle-deck{display:flex;justify-content:center;align-items:center}.captain-combat-card{width:clamp(62px,7.4vw,108px)!important;margin-left:-17px;cursor:default;transform:none!important}.captain-combat-card:first-child{margin-left:0}.captain-combat-card .card-inner{padding:5px}.captain-combat-card .card-header{height:18px}.captain-combat-card .card-header span{font-size:9px}.captain-combat-card .card-header b{font-size:6px}.captain-combat-card .card-footer{min-height:34px;padding-top:4px}.captain-combat-card .card-footer small{font-size:6px}.captain-combat-card .card-title{font-size:8px}.captain-combat-card .card-mini-logo{width:16px}.captain-combat-card .breakthrough-badge{right:4px!important;top:4px!important;padding:3px 4px!important;font-size:7px!important}.captain-round-result{margin-top:24px;color:#ffe18a;font-size:19px;font-weight:1000}.captain-final h2{font-size:clamp(42px,8vw,84px);margin:10px}.captain-final>strong{font-size:32px;color:#ffe18a}.captain-final .btn{width:min(320px,80vw);margin:28px auto 0}.captain-final.victory{box-shadow:inset 0 0 150px rgba(255,183,52,.17)}.captain-final.defeat{box-shadow:inset 0 0 150px rgba(76,102,153,.2)} @media(max-width:760px){.battle-card-fighter{height:auto!important}.battle-card-fighter>.battle-fighter-card .card-footer{min-height:25px}.battle-card-fighter>.battle-fighter-card .card-title{font-size:6px}.battle-card-fighter>.battle-fighter-card .card-footer small,.battle-card-fighter>.battle-fighter-card .card-mini-logo{display:none}.captain-battle-stage{min-height:100vh;padding:64px 8px 24px}.captain-battle-versus{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:4px}.captain-battle-versus>i{font-size:22px}.captain-battle-versus article{padding:14px 3px}.captain-combat-card{width:clamp(38px,10vw,62px)!important;margin-left:-10px}.captain-combat-card .card-footer{display:none}.captain-combat-card .card-art{flex:1}.captain-battle-top{left:10px;right:10px;font-size:8px}.captain-battle-versus h3{font-size:13px}.captain-battle-versus article>strong{font-size:14px}} /* v1013: premium fixed top combat HUD */ .battle-hud{top:50px;gap:clamp(86px,15vw,190px);pointer-events:none} .battle-hp{position:relative;min-width:0;padding:9px 13px 10px;border:1px solid rgba(151,198,224,.34);border-radius:8px;background:linear-gradient(180deg,rgba(20,36,53,.96),rgba(3,10,19,.96));box-shadow:0 8px 24px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.1),inset 0 -8px 18px rgba(0,0,0,.28);isolation:isolate} .battle-hp:before{content:"";position:absolute;z-index:-1;inset:3px;border:1px solid rgba(255,255,255,.055);border-radius:5px;pointer-events:none} .battle-hp-team{border-left:3px solid #71e8ff}.battle-hp-enemy{border-right:3px solid #ff7168} .battle-hp-head{align-items:center;font-size:11px;line-height:1.2}.battle-hp-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8f7ff;text-shadow:0 0 9px rgba(100,220,255,.36)}.battle-hp-enemy .battle-hp-head b{text-shadow:0 0 9px rgba(255,92,80,.42)} .battle-hp-head span{flex:0 0 auto;color:#f5fbff!important;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.2px;text-shadow:0 1px 4px #000} .battle-hp-track{position:relative;height:17px;margin-top:7px;border:1px solid rgba(165,208,230,.36);border-radius:3px;background:linear-gradient(180deg,#02060b,#08111d);box-shadow:inset 0 2px 7px #000,0 0 0 1px rgba(0,0,0,.75);overflow:hidden} .battle-hp-track:after{content:"";position:absolute;z-index:4;inset:1px;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 42%,rgba(0,0,0,.18));pointer-events:none} .battle-hp-track u,.battle-hp-track i{position:absolute;display:block;left:0;top:0;bottom:0;width:100%;border-radius:2px;text-decoration:none} .battle-hp-track u{z-index:1;background:linear-gradient(90deg,#c88120,#ffe183);box-shadow:0 0 12px rgba(255,190,66,.62);transition:width .85s cubic-bezier(.16,.7,.2,1)} .battle-hp-track i{z-index:2;height:auto;background:linear-gradient(90deg,#118fab,#51e8f6 62%,#c9ffff);box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 13px rgba(66,224,246,.58);transition:width .3s cubic-bezier(.2,.8,.2,1)} .battle-hp-enemy .battle-hp-track i{margin:0;background:linear-gradient(90deg,#9d1822,#ed3e43 62%,#ff9470);box-shadow:inset 0 1px rgba(255,255,255,.46),0 0 13px rgba(255,64,69,.58)} .battle-hp-track em{position:absolute;z-index:6;inset:0;display:none;place-items:center;color:#fff;font-size:9px;font-style:normal;font-weight:1000;letter-spacing:2px;text-shadow:0 1px 4px #000,0 0 8px #ff263c} .battle-hp small{margin-top:5px;color:#7e9bb0;font-size:9px;letter-spacing:.35px} .battle-hp.hp-hit{animation:hudHitShake .38s ease}.battle-hp.hp-critical{border-color:rgba(255,61,73,.88);animation:hudCritical 1s ease-in-out infinite}.battle-hp.hp-critical .battle-hp-track i{background:linear-gradient(90deg,#8f101c,#ff3546,#ff9b4f)} .battle-hp.hp-ko{border-color:rgba(255,55,69,.55);filter:saturate(.45) brightness(.72)}.battle-hp.hp-ko .battle-hp-track em{display:grid}.battle-hp.hp-ko .battle-hp-track i,.battle-hp.hp-ko .battle-hp-track u{width:0!important} @keyframes hudHitShake{25%{transform:translateX(-4px)}50%{transform:translateX(3px);filter:brightness(1.35)}75%{transform:translateX(-2px)}} @keyframes hudCritical{50%{box-shadow:0 8px 24px rgba(0,0,0,.48),0 0 18px rgba(255,43,62,.32),inset 0 0 12px rgba(255,36,51,.12)}} .raid-combat-hud{position:relative;z-index:12;display:grid;grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr);align-items:center;gap:14px;padding:10px 22px 0}.raid-combat-hud .battle-hp{padding:7px 11px 8px}.raid-combat-hud .battle-hp-head{font-size:10px}.raid-combat-hud .battle-hp-head span{font-size:9px}.raid-combat-hud .battle-hp-track{height:14px}.raid-hud-center{display:grid;place-items:center;gap:2px;color:#789bb6}.raid-hud-center span{font-size:8px;letter-spacing:1.8px}.raid-hud-center b{font-size:18px;color:#eefaff;font-variant-numeric:tabular-nums;text-shadow:0 0 13px rgba(95,222,255,.48)} .captain-battle-hud{top:58px;left:28px;right:28px}.captain-battle-versus{margin-top:62px} @media(max-width:800px){.battle-hud{top:48px;left:8px;right:8px;gap:54px}.battle-hp{padding:6px 7px 7px}.battle-hp-head{font-size:8px}.battle-hp-head span{font-size:7px}.battle-hp-track{height:12px;margin-top:4px}.battle-hp small{font-size:7px}.raid-combat-hud{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:5px;padding:7px 7px 0}.raid-combat-hud .battle-hp{padding:5px}.raid-combat-hud .battle-hp-head{font-size:7px}.raid-combat-hud .battle-hp-head span{font-size:6px}.raid-hud-center span{display:none}.raid-hud-center b{font-size:12px}.captain-battle-hud{top:48px;left:6px;right:6px;gap:38px}.captain-battle-versus{margin-top:72px}} /* v1014: PVP combat cards use the exact PVE combat size */ .pvp-battle-stage .battle-card-fighter{width:115px!important;height:auto!important;aspect-ratio:2/2.82!important} @media(max-width:800px){.pvp-battle-stage .battle-card-fighter{width:55px!important;height:auto!important;margin-left:-16px!important}.pvp-battle-stage .battle-card-fighter:first-child{margin-left:0!important}} /* v1015: layered combat audio controls and impact VFX */ .battle-sound-toggle{position:absolute;z-index:60;right:16px;bottom:15px;padding:7px 10px;border:1px solid rgba(122,218,255,.3);border-radius:8px;background:rgba(3,12,24,.84);color:#bfeeff;font-size:10px;font-weight:900;letter-spacing:.4px;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(8px)}.battle-sound-toggle:hover{border-color:#75dcff;background:rgba(9,31,52,.94)}.battle-sound-toggle.muted{color:#8394a5;border-color:rgba(151,166,180,.2)} .combat-hit-fx{position:absolute;z-index:29;left:73%;top:43%;width:96px;height:96px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 9px rgba(104,224,255,.85))}.combat-hit-fx.player{left:27%;filter:drop-shadow(0 0 10px rgba(255,108,64,.9))}.combat-hit-fx i{position:absolute;left:48px;top:48px;width:4px;height:54px;border-radius:99px;transform-origin:2px 0;background:linear-gradient(#fff,rgba(87,218,255,.92),transparent);animation:combatShard .62s cubic-bezier(.15,.75,.2,1) forwards}.combat-hit-fx.player i{background:linear-gradient(#fff,rgba(255,119,68,.94),transparent)}.combat-hit-fx i:nth-child(1){transform:rotate(18deg)}.combat-hit-fx i:nth-child(2){transform:rotate(104deg)}.combat-hit-fx i:nth-child(3){transform:rotate(196deg)}.combat-hit-fx i:nth-child(4){transform:rotate(286deg)}.combat-hit-fx u{position:absolute;inset:29px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 18px #6beaff,inset 0 0 14px #6beaff;animation:combatShockRing .7s ease-out forwards}.combat-hit-fx.player u{box-shadow:0 0 18px #ff7449,inset 0 0 14px #ff7449}.combat-hit-fx.critical{width:155px;height:155px;filter:drop-shadow(0 0 17px #ffe46b)}.combat-hit-fx.critical i{left:77px;top:77px;width:7px;height:88px;background:linear-gradient(#fff,#ffe66c,#ff6b24,transparent)}.combat-hit-fx.critical u{inset:39px;border-width:5px;border-color:#fff4a5;box-shadow:0 0 28px #ffc531,inset 0 0 22px #ff932f;animation-duration:.9s} .combat-impact-shake{animation:combatScreenKick .34s cubic-bezier(.2,.8,.2,1)} @keyframes combatShard{0%{opacity:0;scale:.18}18%{opacity:1}100%{opacity:0;scale:1.35}} @keyframes combatShockRing{0%{opacity:1;transform:scale(.18)}100%{opacity:0;transform:scale(2.25)}} @keyframes combatScreenKick{0%,100%{translate:0 0}20%{translate:-4px 2px}40%{translate:5px -2px}62%{translate:-2px -1px}80%{translate:2px 1px}} @media(max-width:800px){.battle-sound-toggle{right:7px;bottom:8px;padding:5px 7px;font-size:8px}.combat-hit-fx{left:70%;width:68px;height:68px}.combat-hit-fx.player{left:30%}.combat-hit-fx i{left:34px;top:34px;height:38px}.combat-hit-fx u{inset:21px}.combat-hit-fx.critical{width:100px;height:100px}.combat-hit-fx.critical i{left:50px;top:50px;height:58px}.combat-hit-fx.critical u{inset:28px}} /* v1017: user-controlled message soft delete */ .user-message{position:relative;padding-right:78px} .message-delete{position:absolute;z-index:3;top:14px;right:14px;padding:7px 11px;border:1px solid rgba(255,112,126,.34);border-radius:9px;background:rgba(78,18,28,.56);color:#ffb4bd;font-size:11px;font-weight:900;cursor:pointer;transition:.16s border-color,.16s background,.16s color} .message-delete:hover{border-color:#ff7383;background:rgba(112,22,36,.8);color:#fff} .message-delete:disabled{opacity:.45;cursor:default} @media(max-width:760px){.user-message{padding:54px 14px 16px}.message-delete{top:12px;right:12px}} /* v1016: mobile combat cards keep the artwork readable */ @media(max-width:800px){ .battle-arena,.pvp-battle-stage .pvp-arena{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)!important;left:6px!important;right:6px!important;gap:2px!important} .battle-side{min-width:0;width:100%} .battle-side .battle-team,.pvp-battle-stage .battle-side .battle-team{width:min(100%,174px)!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,52px))!important;grid-auto-rows:auto!important;justify-content:center!important;align-items:end!important;gap:5px 3px!important;direction:ltr!important;overflow:visible!important} .battle-side .battle-card-fighter,.pvp-battle-stage .battle-side .battle-card-fighter{width:52px!important;height:74px!important;aspect-ratio:auto!important;margin:0!important;transform:none!important} .battle-side .battle-card-fighter:nth-child(4){grid-column:1;transform:translateX(27px)!important} .battle-side .battle-card-fighter:nth-child(5){grid-column:2;transform:translateX(27px)!important} .battle-card-fighter>.battle-fighter-card{position:relative!important;width:52px!important;height:74px!important;padding:3px!important;border-radius:9px!important;overflow:hidden!important} .battle-card-fighter>.battle-fighter-card .card-inner{position:relative!important;display:block!important;height:100%!important;padding:2px!important;overflow:hidden!important;border-radius:7px!important} .battle-card-fighter>.battle-fighter-card .card-art{position:absolute!important;inset:2px!important;width:auto!important;height:auto!important;min-height:0!important;border-radius:6px!important} .battle-card-fighter>.battle-fighter-card .card-art img{object-position:center center!important} .battle-card-fighter>.battle-fighter-card .card-header{position:absolute!important;z-index:6!important;top:3px!important;left:3px!important;right:3px!important;height:14px!important;padding:1px 3px!important;background:linear-gradient(180deg,rgba(1,6,15,.92),rgba(1,6,15,.08))!important} .battle-card-fighter>.battle-fighter-card .card-header span{font-size:8px!important} .battle-card-fighter>.battle-fighter-card .card-header b{display:none!important} .battle-card-fighter>.battle-fighter-card .card-footer{position:absolute!important;z-index:6!important;left:3px!important;right:3px!important;bottom:3px!important;display:block!important;min-height:20px!important;padding:8px 3px 2px!important;text-align:left!important;background:linear-gradient(0deg,rgba(1,6,15,.96),rgba(1,6,15,.72) 62%,transparent)!important} .battle-card-fighter>.battle-fighter-card .card-title{display:block!important;overflow:hidden!important;color:#fff!important;font-size:6px!important;line-height:1.1!important;white-space:nowrap!important;text-overflow:ellipsis!important} .battle-card-fighter>.battle-fighter-card .card-footer small,.battle-card-fighter>.battle-fighter-card .card-mini-logo{display:none!important} .battle-card-fighter>.battle-fighter-card .breakthrough-badge{z-index:8!important;top:16px!important;right:3px!important;padding:2px 3px!important;font-size:5px!important} .battle-side>small{display:block!important;margin-top:9px!important;font-size:9px!important;letter-spacing:2px!important} } /* v1021 ranking layout overrides must follow legacy ranking rules */ .rank-list-v2 .rank-list-row{grid-template-columns:38px 78px minmax(0,1fr) auto;min-height:88px} .rank-pvp-panel .pvp-rank-row,.pvp-ranking .pvp-rank-row{grid-template-columns:44px 78px minmax(0,1fr) 110px;min-height:96px} .rank-pvp-panel .pvp-my-rank,.pvp-my-rank{grid-template-columns:82px minmax(0,1fr);min-height:94px;overflow:visible} .pvp-tier-road-item .tier-emblem.small{transform:scale(.88)!important;margin:-7px -8px -5px} @media(max-width:620px){ .rank-list-v2 .rank-list-row{grid-template-columns:28px 66px minmax(0,1fr) auto;min-height:82px;gap:6px} .rank-pvp-panel .pvp-rank-row,.pvp-ranking .pvp-rank-row{grid-template-columns:30px 66px minmax(0,1fr) 68px;min-height:86px;column-gap:6px} .rank-pvp-panel .pvp-my-rank,.pvp-my-rank{grid-template-columns:70px minmax(0,1fr);min-height:86px} } /* v1022: rank emblem artwork, aura and rings share one center point */ .tier-emblem.rank{position:relative;display:block;width:72px;min-width:72px;height:70px;margin:0;transform:none!important} .tier-emblem.rank .tier-stage{position:absolute;left:50%;top:31px;width:68px;height:58px;transform:translate(-50%,-50%);display:grid;place-items:center} .tier-emblem.rank .tier-svg{width:59px;height:56px} .tier-emblem.rank .tier-aura{left:50%;top:50%;width:63px;height:52px} .tier-emblem.rank .tier-ring{left:50%;top:50%;width:52px;height:52px} .tier-emblem.rank .tier-ring-two{width:62px;height:62px} .tier-emblem.rank .tier-spark{display:none} .tier-emblem.rank em{position:absolute;z-index:6;left:50%;bottom:-1px;transform:translateX(-50%);width:max-content;max-width:70px;margin:0;padding:2px 6px;font-size:9px;line-height:1} @media(max-width:620px){ .tier-emblem.rank{width:64px;min-width:64px;height:64px} .tier-emblem.rank .tier-stage{top:28px;width:62px;height:54px} .tier-emblem.rank .tier-svg{width:54px;height:51px} .tier-emblem.rank .tier-aura{width:58px;height:48px} .tier-emblem.rank .tier-ring{width:48px;height:48px} .tier-emblem.rank .tier-ring-two{width:57px;height:57px} } /* v1023: CNINE Reward Vault */ .inventory-summary{position:relative;min-width:0;min-height:76px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:13px 48px 13px 17px;border:1px solid rgba(162,114,255,.42);border-radius:15px;overflow:hidden;color:#edfaff;text-align:left;cursor:pointer;background:radial-gradient(circle at 88% 15%,rgba(174,87,255,.28),transparent 35%),linear-gradient(145deg,rgba(12,31,72,.96),rgba(25,12,58,.94));box-shadow:inset 0 0 28px rgba(145,92,255,.08);transition:.2s transform,.2s border-color,.2s box-shadow}.inventory-summary:before{content:"";position:absolute;right:14px;top:50%;width:25px;height:25px;transform:translateY(-50%) rotate(45deg);border:1px solid rgba(195,153,255,.55);background:linear-gradient(135deg,rgba(116,228,255,.3),rgba(170,78,255,.35));box-shadow:0 0 16px rgba(160,91,255,.35)}.inventory-summary:hover{transform:translateY(-2px);border-color:#bd8cff;box-shadow:0 10px 25px rgba(87,45,190,.22),inset 0 0 28px rgba(145,92,255,.14)}.inventory-summary>span{font-size:10px;letter-spacing:1.5px;color:#a9c9e6;font-weight:1000}.inventory-summary>b{margin-top:4px;font-size:19px}.inventory-summary>b i{color:#9c7dff;font-style:normal}.inventory-summary>small{margin-top:3px;color:#89aac8;font-size:10px}.inventory-summary>em{position:absolute;right:8px;top:7px;padding:3px 6px;border-radius:99px;background:#f05eff;color:#fff;font-size:8px;font-style:normal;font-weight:1000;box-shadow:0 0 12px rgba(240,94,255,.65)} .inventory-vault{position:relative;z-index:2}.inventory-hero{position:relative;min-height:260px;display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;padding:38px 48px;border:1px solid rgba(137,104,255,.38);border-radius:24px;overflow:hidden;background:radial-gradient(circle at 78% 45%,rgba(97,81,220,.28),transparent 32%),radial-gradient(circle at 5% 0,rgba(55,208,255,.14),transparent 30%),linear-gradient(135deg,#071b3c 0%,#09152e 48%,#170d35 100%);box-shadow:0 24px 70px rgba(2,7,25,.4),inset 0 0 70px rgba(100,72,210,.08)}.inventory-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.035) 43%,transparent 44%),repeating-linear-gradient(90deg,transparent 0 83px,rgba(115,214,255,.025) 84px 85px)}.inventory-hero-copy{position:relative;z-index:2}.inventory-hero h2{margin:7px 0 10px;font-size:clamp(34px,5vw,58px);letter-spacing:-2px}.inventory-hero p:not(.eyebrow){max-width:570px;margin:0;color:#9dbbd2;font-weight:700;line-height:1.7}.inventory-hero-meta{display:flex;align-items:center;gap:18px;margin-top:24px}.inventory-hero-meta span{display:flex;align-items:center;gap:7px;color:#6fe8ff;font-size:10px;font-weight:1000;letter-spacing:1.2px}.inventory-hero-meta span i{width:7px;height:7px;border-radius:50%;background:#54f3bd;box-shadow:0 0 12px #54f3bd}.inventory-hero-meta b{color:#e6dcff;font-size:13px} .inventory-vault-mark{position:relative;z-index:2;width:170px;height:170px;display:grid;place-items:center;margin:auto;border:1px solid rgba(167,125,255,.42);border-radius:50%;background:radial-gradient(circle,rgba(102,77,205,.25),rgba(3,12,31,.86) 68%);box-shadow:0 0 55px rgba(111,74,218,.3),inset 0 0 32px rgba(89,221,255,.08)}.inventory-vault-mark:before,.inventory-vault-mark:after,.inventory-vault-mark>span{content:"";position:absolute;border-radius:50%;border:1px solid rgba(117,222,255,.26)}.inventory-vault-mark:before{inset:15px}.inventory-vault-mark:after{inset:29px;border-style:dashed;animation:inventoryOrbit 13s linear infinite}.inventory-vault-mark>span{inset:-10px;border-color:rgba(151,94,255,.18);animation:inventoryOrbit 19s linear reverse infinite}.inventory-vault-mark b{font-size:39px;letter-spacing:-3px;color:#fff;text-shadow:0 0 22px #7be7ff}.inventory-vault-mark em{position:absolute;bottom:42px;color:#ae91ff;font-size:9px;font-style:normal;font-weight:1000;letter-spacing:3px} .inventory-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;padding:10px;border:1px solid rgba(104,200,255,.16);border-radius:15px;background:rgba(3,14,36,.72)}.inventory-toolbar>div{display:flex;gap:6px}.inventory-toolbar button{padding:9px 16px;border:0;border-radius:9px;background:transparent;color:#769ab7;font-size:12px;font-weight:900}.inventory-toolbar button.active{color:#fff;background:linear-gradient(135deg,#2459a9,#6b3bc3)}.inventory-toolbar span{padding-right:9px;color:#789bb7;font-size:11px} .inventory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-height:360px}.inventory-item{--item-accent:#75eaff;position:relative;min-height:360px;display:grid;grid-template-columns:42% 58%;align-items:center;border:1px solid color-mix(in srgb,var(--item-accent) 32%,transparent);border-radius:22px;overflow:hidden;background:radial-gradient(circle at 22% 48%,color-mix(in srgb,var(--item-accent) 14%,transparent),transparent 35%),linear-gradient(145deg,rgba(7,26,58,.98),rgba(4,13,32,.98));box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 0 40px color-mix(in srgb,var(--item-accent) 5%,transparent)}.inventory-item-ma{--item-accent:#e1a1ff;background:radial-gradient(circle at 22% 48%,rgba(218,102,255,.2),transparent 37%),linear-gradient(145deg,#211039,#0a1029 62%,#090b1b)}.inventory-item-limited{--item-accent:#6df0ff}.inventory-item.locked{filter:saturate(.45);opacity:.68}.inventory-item-glow{position:absolute;left:-8%;top:8%;width:54%;height:84%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--item-accent) 22%,transparent),transparent 67%);filter:blur(8px);animation:inventoryGlow 3s ease-in-out infinite}.inventory-new{position:absolute;z-index:8;right:15px;top:15px;padding:5px 9px;border-radius:99px;color:#08101f;background:linear-gradient(135deg,#fff29a,#ff9de6);font-size:9px;font-weight:1000;letter-spacing:1px;box-shadow:0 0 18px rgba(255,156,229,.45)} .inventory-pack-stage{position:relative;z-index:2;display:grid;place-items:center;height:290px}.inventory-pack-stage img{position:relative;z-index:3;display:block;width:min(82%,170px);max-height:270px;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(0,0,0,.55)) drop-shadow(0 0 16px color-mix(in srgb,var(--item-accent) 35%,transparent));transition:.28s transform,.28s filter}.inventory-item.owned:hover .inventory-pack-stage img{transform:translateY(-7px) rotate(-1deg);filter:drop-shadow(0 28px 22px rgba(0,0,0,.62)) drop-shadow(0 0 25px color-mix(in srgb,var(--item-accent) 55%,transparent))}.inventory-item-ma .inventory-pack-stage img{filter:drop-shadow(0 22px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(217,111,255,.42))}.inventory-pack-orbit{position:absolute;width:190px;height:190px;border:1px solid color-mix(in srgb,var(--item-accent) 42%,transparent);border-radius:50%;box-shadow:inset 0 0 28px color-mix(in srgb,var(--item-accent) 10%,transparent)}.inventory-pack-orbit:after{content:"";position:absolute;inset:14px;border:1px dashed color-mix(in srgb,var(--item-accent) 28%,transparent);border-radius:50%;animation:inventoryOrbit 11s linear infinite}.inventory-pack-stage>i{position:absolute;width:90px;height:2px;bottom:26px;background:radial-gradient(ellipse,var(--item-accent),transparent 70%);box-shadow:0 0 20px 8px color-mix(in srgb,var(--item-accent) 25%,transparent)} .inventory-item-copy{position:relative;z-index:3;padding:30px 28px 30px 10px}.inventory-item-copy>small{color:var(--item-accent);font-size:9px;font-weight:1000;letter-spacing:1.7px}.inventory-item-copy h3{margin:8px 0 12px;font-size:25px;letter-spacing:-.7px}.inventory-item-copy p{min-height:50px;margin:0;color:#91aec5;font-size:13px;font-weight:700;line-height:1.6}.inventory-item-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:25px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--item-accent) 20%,transparent)}.inventory-item-foot span{color:#8ba9c0;font-size:11px}.inventory-item-foot span b{display:block;margin-top:3px;color:#fff;font-size:23px}.inventory-use{min-width:105px;padding:12px 15px;border:1px solid color-mix(in srgb,var(--item-accent) 42%,transparent);border-radius:11px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--item-accent) 45%,#1761b9),#6940bf);font-weight:1000;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--item-accent) 15%,transparent)}.inventory-use:disabled{cursor:default;opacity:.42;filter:grayscale(1)} .inventory-loading,.inventory-empty{grid-column:1/-1;min-height:330px;display:grid;place-content:center;justify-items:center;gap:9px;border:1px dashed rgba(112,209,255,.22);border-radius:22px;color:#789bb7;text-align:center;background:rgba(3,13,33,.55)}.inventory-loading i{width:42px;height:42px;border:2px solid #243d68;border-top-color:#9c78ff;border-radius:50%;animation:inventoryOrbit .8s linear infinite}.inventory-loading b,.inventory-empty b{color:#e5f7ff;font-size:18px}.inventory-empty .btn{margin-top:10px} .inventory-open-modal{background:radial-gradient(circle at 50% 45%,rgba(74,64,190,.28),rgba(1,5,15,.94) 62%);backdrop-filter:blur(12px)}.inventory-open-panel{position:relative;max-width:620px;min-height:650px;overflow:hidden;padding:32px;text-align:center;border-color:rgba(136,104,255,.48);background:radial-gradient(circle at 50% 39%,rgba(81,66,190,.2),transparent 34%),linear-gradient(180deg,#081a3b,#090d21 70%,#130c28);isolation:isolate}.inventory-open-ma .inventory-open-panel{border-color:rgba(225,137,255,.5);background:radial-gradient(circle at 50% 39%,rgba(218,83,255,.24),transparent 35%),linear-gradient(180deg,#21103b,#0b1028 70%,#080917)}.inventory-open-panel>.icon-close{position:absolute;z-index:20;right:16px;top:16px}.inventory-open-intro h2{margin:7px 0;font-size:31px}.inventory-open-intro>p:last-child{color:#93b0c7}.inventory-open-stage{position:relative;display:grid;place-items:center;height:350px;margin:5px auto}.inventory-open-stage img{position:relative;z-index:5;max-width:230px;max-height:335px;object-fit:contain;filter:drop-shadow(0 26px 22px rgba(0,0,0,.65)) drop-shadow(0 0 24px rgba(96,224,255,.35));transition:.8s transform,.8s filter}.inventory-open-ma .inventory-open-stage img{filter:drop-shadow(0 26px 22px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(224,116,255,.4))}.inventory-open-aura{position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgba(96,223,255,.25),rgba(105,85,220,.12) 42%,transparent 70%);filter:blur(4px);animation:inventoryGlow 2.5s ease-in-out infinite}.inventory-open-ma .inventory-open-aura{background:radial-gradient(circle,rgba(243,170,255,.3),rgba(118,76,215,.14) 45%,transparent 70%)}.inventory-open-ring{position:absolute;width:250px;height:250px;border:1px solid rgba(112,229,255,.35);border-radius:50%;animation:inventoryOrbit 12s linear infinite}.inventory-open-ring:after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 14px #7cecff}.inventory-open-ring.r2{width:290px;height:290px;border-style:dashed;border-color:rgba(174,113,255,.25);animation-direction:reverse;animation-duration:18s}.inventory-open-warning{display:flex;justify-content:center;gap:12px;color:#87a9c2;font-size:12px}.inventory-open-warning b{color:#fff}.inventory-open-confirm{display:block;min-width:250px;margin:19px auto 8px}.inventory-open-panel>small{color:#6f8ba4}.inventory-open-panel.opening .inventory-open-stage img{transform:scale(1.09);filter:brightness(1.5) drop-shadow(0 0 46px #fff)}.inventory-open-panel.opening .inventory-open-ring{animation-duration:.8s}.inventory-open-panel.opening:after{content:"";position:absolute;z-index:10;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.8),transparent 5%);animation:inventoryFlash 1s ease-out forwards} .inventory-result-head h2{margin:7px 0 5px;font-size:32px}.inventory-result-head>span{color:#dc9cff;font-size:10px;font-weight:1000;letter-spacing:2px}.inventory-result-card-wrap{display:grid;place-items:center;min-height:390px;padding:12px}.inventory-result-card{width:230px!important;filter:drop-shadow(0 25px 30px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(197,105,255,.32));animation:inventoryCardReveal .62s cubic-bezier(.2,1.1,.3,1)}.inventory-result-info b,.inventory-result-info span,.inventory-result-info em{display:block}.inventory-result-info b{font-size:22px}.inventory-result-info span{margin-top:5px;color:#8faec5}.inventory-result-info em{margin:9px 0 15px;color:#efb2ff;font-size:11px;font-style:normal;font-weight:1000;letter-spacing:1px} @keyframes inventoryOrbit{to{transform:rotate(360deg)}}@keyframes inventoryGlow{50%{opacity:.58;transform:scale(1.08)}}@keyframes inventoryFlash{0%{opacity:0}40%{opacity:1}100%{opacity:0;transform:scale(8)}}@keyframes inventoryCardReveal{0%{opacity:0;transform:translateY(28px) scale(.72) rotateY(60deg)}100%{opacity:1;transform:none}} @media(max-width:900px){.inventory-hero{grid-template-columns:1fr 190px;padding:32px}.inventory-vault-mark{width:145px;height:145px}.inventory-grid{grid-template-columns:1fr}.inventory-item{min-height:330px}.inventory-item-copy p{min-height:0}} @media(max-width:620px){.inventory-summary{min-height:66px;padding:10px 42px 10px 12px}.inventory-summary>b{font-size:16px}.inventory-summary>small{font-size:9px}.inventory-summary:before{right:13px;width:21px;height:21px}.inventory-hero{display:block;min-height:230px;padding:28px 22px}.inventory-hero h2{font-size:38px}.inventory-hero-meta{display:grid;gap:8px}.inventory-vault-mark{position:absolute;right:-25px;bottom:-38px;width:135px;height:135px;opacity:.5}.inventory-toolbar{display:block;overflow:hidden}.inventory-toolbar>div{overflow-x:auto}.inventory-toolbar span{display:block;padding:8px 7px 2px}.inventory-item{min-height:480px;display:block}.inventory-pack-stage{height:270px}.inventory-pack-stage img{max-height:250px}.inventory-item-copy{padding:8px 22px 24px}.inventory-item-copy h3{font-size:22px}.inventory-item-foot{margin-top:16px}.inventory-open-modal{padding:0}.inventory-open-panel{width:100%;min-height:100dvh;max-height:100dvh;padding:24px 16px;border:0;border-radius:0}.inventory-open-intro{padding-top:24px}.inventory-open-stage{height:340px}.inventory-open-stage img{max-width:210px;max-height:320px}.inventory-result-card-wrap{min-height:390px}.inventory-result-card{width:210px!important}} @media(prefers-reduced-motion:reduce){.inventory-vault-mark:after,.inventory-vault-mark>span,.inventory-pack-orbit:after,.inventory-item-glow,.inventory-open-aura,.inventory-open-ring{animation:none!important}} .inventory-vault-mark img{position:absolute;z-index:2;top:24px;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(109,240,255,.55))}.inventory-vault-mark b{position:absolute;z-index:3;bottom:37px;font-size:15px;letter-spacing:2px;color:#fff;text-shadow:0 0 22px #7be7ff}.inventory-vault-mark em{z-index:3;bottom:23px;font-size:7px;letter-spacing:2px}.inventory-item-normal{--item-accent:#64dfff}.inventory-item-advanced{--item-accent:#62e9a5;background:radial-gradient(circle at 22% 48%,rgba(49,214,137,.18),transparent 37%),linear-gradient(145deg,#07342c,#07162c 62%,#06101f)}.inventory-item-premium{--item-accent:#ffc86a;background:radial-gradient(circle at 22% 48%,rgba(255,175,65,.22),transparent 37%),linear-gradient(145deg,#3c220b,#1b1028 62%,#090b1b)} /* v1035: collection-adjacent inventory card and animated auto battle */ .inventory-summary{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;align-items:center!important;column-gap:12px!important;min-height:76px!important;padding:12px 16px!important;text-align:left!important} .inventory-summary:before{content:none!important;display:none!important} .inventory-bag-icon{grid-column:1;grid-row:1;display:grid;width:38px;height:38px;place-items:center;color:#b28cff;filter:drop-shadow(0 0 9px rgba(177,117,255,.48))} .inventory-bag-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round} .inventory-summary-copy{grid-column:2;grid-row:1;display:flex!important;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;letter-spacing:0!important} .inventory-summary-copy>b{display:block;margin:0;color:#fff;font-size:19px;line-height:1.15;letter-spacing:-.5px} .inventory-summary-copy>small{display:block;max-width:100%;margin-top:6px;overflow:hidden;color:#8eaac4;font-size:10px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis} .inventory-summary>em{right:10px!important;top:8px!important;padding:4px 8px!important;font-size:9px!important} .inventory-vault-mark{width:180px!important;height:120px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important} .inventory-vault-mark:before,.inventory-vault-mark:after,.inventory-vault-mark>span,.inventory-vault-mark>b,.inventory-vault-mark>em{content:none!important;display:none!important} .inventory-vault-mark img{position:static!important;display:block!important;width:170px!important;height:110px!important;max-width:100%!important;object-fit:contain!important;filter:drop-shadow(0 0 16px rgba(109,240,255,.35))!important} .inventory-toolbar{justify-content:flex-start!important}.inventory-toolbar>span{display:none!important} .auto-battle-stage-status{position:absolute;z-index:58;left:50%;top:18px;display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 8px;transform:translateX(-50%);padding:8px 13px;border:1px solid rgba(107,228,255,.4);border-radius:12px;background:rgba(3,16,34,.88);box-shadow:0 8px 25px rgba(0,0,0,.38),0 0 18px rgba(76,210,255,.12);backdrop-filter:blur(8px)} .auto-battle-stage-status i{grid-row:1/3;width:10px;height:10px;border:2px solid rgba(110,231,255,.25);border-top-color:#79eeff;border-radius:50%;animation:battleAutoSpin .8s linear infinite}.auto-battle-stage-status b{font-size:11px;color:#dffaff}.auto-battle-stage-status span{font-size:11px;color:#7cecff;font-weight:1000}.auto-battle-stage-status small{grid-column:2;color:#7e9db2;font-size:8px;letter-spacing:.4px} @media(max-width:620px){.inventory-summary{grid-template-columns:34px minmax(0,1fr)!important;column-gap:9px!important;padding:9px 11px!important}.inventory-bag-icon{width:32px;height:32px}.inventory-bag-icon svg{width:29px;height:29px}.inventory-summary-copy>b{font-size:16px}.inventory-summary-copy>small{font-size:9px}.inventory-vault-mark{right:6px!important;bottom:8px!important;width:125px!important;height:85px!important;opacity:.55}.inventory-vault-mark img{width:120px!important;height:80px!important}.auto-battle-stage-status{top:13px;padding:6px 9px}.auto-battle-stage-status small{display:none}} /* v1037 도감 UX 개선: 기존 앨범 구조 유지 */ .dex-toolbar{display:flex;align-items:center;gap:10px;margin:16px 0 8px}.dex-toolbar .dex-search{flex:1;margin:0;grid-template-columns:minmax(220px,1fr) 150px 190px}.dex-favorite-filter{height:46px;flex:0 0 auto;padding:0 16px;border:1px solid rgba(255,214,78,.35);border-radius:12px;background:rgba(61,45,5,.45);color:#ffe58d;font-weight:900;cursor:pointer}.dex-favorite-filter.active{background:linear-gradient(180deg,#ffd95a,#d6a719);color:#221600;border-color:#ffe78a;box-shadow:0 0 20px rgba(255,208,61,.2)}.dex-guide{display:flex;gap:16px;flex-wrap:wrap;margin:0 2px 12px;color:#78a9c5;font-size:12px}.dex-guide span:before{content:'•';margin-right:6px;color:#6de7ff}.dex-section.favorite-member{border-color:rgba(255,213,72,.42);box-shadow:inset 3px 0 rgba(255,212,72,.72)}.dex-section-head{gap:8px;padding:0}.dex-fold-button{min-width:0;flex:1;display:flex;align-items:center;justify-content:space-between;padding:16px 0;border:0;background:transparent;color:#eaf8ff;cursor:pointer;text-align:left}.dex-member-favorite{width:42px;height:42px;flex:0 0 42px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.035);color:#56758a;font-size:22px;line-height:1;cursor:pointer}.dex-member-favorite:hover,.dex-member-favorite.active{color:#ffd94f;border-color:rgba(255,217,79,.55);background:rgba(255,217,79,.1);text-shadow:0 0 12px rgba(255,217,79,.65)} @media(max-width:767px){.dex-toolbar{display:block}.dex-toolbar .dex-search{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dex-toolbar .dex-search input{grid-column:1/-1}.dex-toolbar .dex-search select{min-width:0;padding:0 9px}.dex-favorite-filter{width:100%;margin-top:8px}.dex-guide{display:grid;gap:4px;margin:9px 3px 12px}.dex-section-head{align-items:center}.dex-fold-button{padding:14px 0}.dex-fold-button span{min-width:0;gap:7px}.dex-fold-button strong{max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dex-member-favorite{width:38px;height:38px;flex-basis:38px}.album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dex-section.favorite-member{box-shadow:inset 2px 0 rgba(255,212,72,.72)}} @media(max-width:390px){.dex-toolbar .dex-search{grid-template-columns:1fr}.dex-toolbar .dex-search input{grid-column:auto}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dex-fold-button strong{max-width:38vw}} /* V1038 INFINITE TOWER */ .pve-tower-view{padding:0 0 36px}.tower-loading,.tower-empty{padding:64px 24px;text-align:center}.tower-spinner{width:44px;height:44px;margin:0 auto 18px;border:4px solid rgba(255,255,255,.14);border-top-color:#f2c65d;border-radius:50%;animation:towerSpin .8s linear infinite}@keyframes towerSpin{to{transform:rotate(360deg)}} .tower-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:34px;border:1px solid rgba(242,198,93,.28);border-radius:24px;background:radial-gradient(circle at 15% 20%,rgba(242,198,93,.18),transparent 42%),linear-gradient(135deg,#171724,#0c0d14);box-shadow:0 24px 60px rgba(0,0,0,.32);overflow:hidden}.tower-hero.boss-ready{background:radial-gradient(circle at 15% 20%,rgba(255,58,58,.24),transparent 42%),linear-gradient(135deg,#251315,#0c0d14)}.tower-hero h2{font-size:34px;margin:4px 0 8px}.tower-season-clock{min-width:150px;padding:14px 18px;border-radius:16px;background:rgba(0,0,0,.28);text-align:right}.tower-season-clock span{display:block;font-size:12px;opacity:.65}.tower-season-clock b{font-size:18px}.tower-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.tower-overview article{padding:20px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09)}.tower-overview small,.tower-overview span{display:block;opacity:.62}.tower-overview strong{display:block;margin:7px 0;font-size:30px}.tower-overview .next-boss{border-color:rgba(255,76,76,.28)} .tower-main-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:18px}.tower-floor-card,.tower-deck-preview,.tower-ranking{border:1px solid rgba(255,255,255,.09);border-radius:22px;background:#11131b}.tower-floor-card{position:relative;min-height:520px;padding:26px;display:grid;grid-template-columns:120px 1fr;grid-template-rows:1fr auto;gap:18px;overflow:hidden}.tower-floor-card.boss-floor{border-color:rgba(255,66,66,.42);box-shadow:inset 0 0 60px rgba(255,38,38,.08)}.tower-floor-number span{font-size:12px;letter-spacing:.14em;color:#f2c65d}.tower-floor-number b{display:block;font-size:72px;line-height:.9}.tower-monster-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}.tower-monster-visual img{max-width:86%;max-height:300px;object-fit:contain;filter:drop-shadow(0 24px 24px rgba(0,0,0,.5));position:relative;z-index:1}.tower-monster-visual i{position:absolute;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(242,198,93,.2),transparent 66%);filter:blur(6px)}.tower-monster-placeholder{font-size:120px}.tower-floor-info{grid-column:1/-1}.tower-floor-info h3{font-size:28px;margin:4px 0 16px}.tower-floor-info>div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}.tower-start-btn{grid-column:1/-1;min-height:56px;font-size:17px}.tower-side-panel{display:grid;gap:18px;align-content:start}.tower-deck-preview,.tower-ranking{padding:20px}.tower-deck-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:16px 0}.tower-deck-slots>div{aspect-ratio:.72;border-radius:10px;background:#090a0f;overflow:hidden;position:relative}.tower-deck-slots img{width:100%;height:100%;object-fit:cover}.tower-deck-slots span{position:absolute;left:0;right:0;bottom:0;padding:5px;font-size:10px;background:linear-gradient(transparent,rgba(0,0,0,.9));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tower-deck-slots .empty{display:grid;place-items:center;font-size:24px;opacity:.35}.tower-rank-list>div{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.07)}.tower-rank-list>div.me{border-radius:10px;background:rgba(242,198,93,.1);color:#ffe39a}.tower-rank-list b{text-align:center}.tower-battle-progress{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:5}.tower-battle-progress i{width:52px;height:3px;background:rgba(255,255,255,.16)}.tower-battle-progress b{font-size:22px;color:#ffe08a}.tower-floor-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:8;background:rgba(5,5,9,.78);animation:towerIntroOut .45s 1s forwards}.tower-floor-intro strong{font-size:64px}.tower-floor-intro small{letter-spacing:.22em;color:#f2c65d}.tower-boss-stage .tower-floor-intro small{color:#ff6060}.tower-combat-shell{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;width:100%;padding:90px 28px 100px}.tower-team{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.tower-fighter{position:relative;aspect-ratio:.72;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}.tower-fighter img{width:100%;height:100%;object-fit:cover}.tower-fighter span{position:absolute;left:0;right:0;bottom:0;padding:7px 4px;font-size:10px;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.92))}.tower-vs{font-size:42px;font-weight:900}.tower-enemy{text-align:center}.tower-enemy img{max-width:260px;max-height:300px;object-fit:contain;display:block;margin:auto}.tower-enemy>div{font-size:130px}.tower-enemy b{display:block;font-size:22px}@keyframes towerIntroOut{to{opacity:0;visibility:hidden;transform:scale(1.08)}} @media(max-width:768px){.pve-mode-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.pve-mode-btn{min-width:0;padding:10px 6px;font-size:12px}.pve-tower-view{padding-bottom:calc(90px + env(safe-area-inset-bottom))}.tower-hero{padding:22px;align-items:flex-start;flex-direction:column}.tower-hero h2{font-size:26px}.tower-season-clock{width:100%;text-align:left}.tower-overview{grid-template-columns:repeat(2,1fr);gap:9px}.tower-overview article{padding:14px}.tower-overview strong{font-size:24px}.tower-main-grid{grid-template-columns:1fr}.tower-floor-card{min-height:0;padding:18px;grid-template-columns:82px 1fr}.tower-floor-number b{font-size:52px}.tower-monster-visual{min-height:220px}.tower-monster-visual img{max-height:220px}.tower-floor-info h3{font-size:23px}.tower-deck-slots{gap:4px}.tower-battle-progress{top:12px;gap:5px;font-size:11px}.tower-battle-progress i{width:22px}.tower-floor-intro strong{font-size:42px}.tower-combat-shell{grid-template-columns:1fr;padding:72px 12px 105px;gap:12px}.tower-team{order:3}.tower-vs{font-size:24px}.tower-enemy img{max-height:190px}.tower-enemy>div{font-size:82px}.tower-battle-stage{min-height:100dvh}.tower-ranking{overflow:hidden}.tower-rank-list>div{font-size:13px}} /* V1039 tower action redesign */ .tower-deck-preview .panel-title{align-items:center;gap:14px}.tower-deck-edit-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid rgba(242,198,93,.24);border-radius:14px;background:linear-gradient(180deg,rgba(242,198,93,.13),rgba(242,198,93,.045));color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.2);transition:.18s ease}.tower-deck-edit-btn:hover{transform:translateY(-1px);border-color:rgba(242,198,93,.5);background:linear-gradient(180deg,rgba(242,198,93,.2),rgba(242,198,93,.07))}.tower-deck-edit-btn .tower-deck-edit-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(242,198,93,.16);color:#ffe18e;font-size:12px}.tower-deck-edit-btn span:nth-child(2){display:grid;text-align:left;line-height:1.05}.tower-deck-edit-btn small{font-size:8px;letter-spacing:.14em;color:#cdb979}.tower-deck-edit-btn b{font-size:12px;margin-top:4px}.tower-deck-edit-btn i{font-style:normal;color:#ffe18e;font-size:20px;line-height:1}.tower-challenge-btn{grid-column:1/-1;position:relative;display:grid;grid-template-columns:48px 1fr 24px;align-items:center;gap:12px;min-height:70px;padding:10px 18px;border:1px solid rgba(242,198,93,.48);border-radius:18px;background:radial-gradient(circle at 15% 25%,rgba(255,228,145,.22),transparent 34%),linear-gradient(135deg,#7a5714,#2b210e 56%,#15120c);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.18),0 15px 34px rgba(0,0,0,.34),0 0 0 1px rgba(242,198,93,.08);overflow:hidden;transition:.2s ease}.tower-challenge-btn:before{content:'';position:absolute;inset:-60% auto -60% -20%;width:36%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:.45s ease}.tower-challenge-btn:hover{transform:translateY(-2px);border-color:#f4d777;box-shadow:inset 0 1px rgba(255,255,255,.2),0 18px 40px rgba(0,0,0,.42),0 0 26px rgba(242,198,93,.14)}.tower-challenge-btn:hover:before{left:105%}.tower-challenge-btn.boss{border-color:rgba(255,78,78,.58);background:radial-gradient(circle at 15% 25%,rgba(255,126,126,.22),transparent 34%),linear-gradient(135deg,#7c1717,#301010 58%,#160b0b);box-shadow:inset 0 1px rgba(255,255,255,.14),0 15px 34px rgba(0,0,0,.36),0 0 24px rgba(255,45,45,.12)}.tower-challenge-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#ffe49a;font-size:21px}.tower-challenge-btn.boss .tower-challenge-icon{color:#ff9d9d}.tower-challenge-copy{display:grid;text-align:left}.tower-challenge-copy small{font-size:9px;letter-spacing:.18em;color:#dbc57b}.tower-challenge-btn.boss .tower-challenge-copy small{color:#ff9d9d}.tower-challenge-copy strong{margin-top:3px;font-size:18px;letter-spacing:-.02em}.tower-challenge-arrow{font-size:30px;color:#ffe49a}@media(max-width:768px){.tower-deck-preview .panel-title{align-items:flex-start}.tower-deck-edit-btn{min-height:40px;padding:7px 9px}.tower-deck-edit-btn small{display:none}.tower-deck-edit-btn b{margin:0;font-size:11px}.tower-deck-edit-btn .tower-deck-edit-icon{width:25px;height:25px}.tower-challenge-btn{min-height:64px;grid-template-columns:42px 1fr 20px;padding:9px 14px}.tower-challenge-icon{width:40px;height:40px}.tower-challenge-copy strong{font-size:17px}.tower-challenge-arrow{font-size:26px}} /* V1040: Infinite Tower duplicate-tab guard, refined controls and real PVE battle reuse */ .tower-action-panel{grid-column:1/-1;display:grid;grid-template-columns:minmax(240px,.72fr) minmax(300px,1.28fr);gap:12px;align-items:stretch;margin-top:4px} .tower-auto-option{position:relative;display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 15px;border:1px solid rgba(120,188,225,.22);border-radius:16px;background:linear-gradient(180deg,rgba(12,31,48,.92),rgba(6,16,28,.94));box-shadow:inset 0 1px rgba(255,255,255,.055),0 10px 24px rgba(0,0,0,.22);cursor:pointer;user-select:none;transition:.18s ease} .tower-auto-option:hover{border-color:rgba(119,220,255,.42);background:linear-gradient(180deg,rgba(15,42,63,.96),rgba(7,21,35,.96))} .tower-auto-option input{position:absolute;opacity:0;pointer-events:none} .tower-auto-switch{position:relative;flex:0 0 auto;width:46px;height:26px;border:1px solid rgba(150,184,205,.28);border-radius:999px;background:#09121d;box-shadow:inset 0 2px 8px rgba(0,0,0,.62);transition:.2s ease} .tower-auto-switch i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#d5e4ed,#7894a8);box-shadow:0 3px 8px rgba(0,0,0,.45);transition:.2s cubic-bezier(.2,.8,.2,1)} .tower-auto-option input:checked+.tower-auto-switch{border-color:rgba(83,222,255,.66);background:linear-gradient(90deg,#0a6e90,#18b9d8);box-shadow:0 0 18px rgba(37,203,241,.22),inset 0 1px rgba(255,255,255,.24)} .tower-auto-option input:checked+.tower-auto-switch i{transform:translateX(20px);background:#f3fdff} .tower-auto-copy{display:grid;min-width:0;text-align:left}.tower-auto-copy b{font-size:14px;color:#eaf9ff}.tower-auto-copy small{margin-top:4px;color:#7798ad;font-size:10px;line-height:1.35} .tower-enter-btn{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:68px;padding:10px 17px;border:1px solid rgba(101,218,255,.48);border-radius:16px;background:radial-gradient(circle at 15% 20%,rgba(81,224,255,.17),transparent 34%),linear-gradient(135deg,#0b5272,#09283d 58%,#061421);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.16),0 13px 30px rgba(0,0,0,.32),0 0 24px rgba(35,191,235,.08);overflow:hidden;cursor:pointer;transition:.2s ease} .tower-enter-btn:before{content:"";position:absolute;top:-70%;bottom:-70%;left:-30%;width:28%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .48s ease} .tower-enter-btn:hover{transform:translateY(-2px);border-color:#8ceaff;box-shadow:inset 0 1px rgba(255,255,255,.2),0 17px 36px rgba(0,0,0,.4),0 0 30px rgba(48,207,250,.16)} .tower-enter-btn:hover:before{left:112%}.tower-enter-btn.boss{border-color:rgba(255,92,85,.62);background:radial-gradient(circle at 15% 20%,rgba(255,81,69,.2),transparent 35%),linear-gradient(135deg,#711e24,#321119 60%,#17090d);box-shadow:inset 0 1px rgba(255,255,255,.13),0 13px 30px rgba(0,0,0,.34),0 0 26px rgba(255,54,48,.1)} .tower-enter-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.09);color:#9beaff;font-size:20px;font-weight:1000}.tower-enter-btn.boss .tower-enter-mark{color:#ff9a91} .tower-enter-btn>span:nth-child(2){display:grid;text-align:left}.tower-enter-btn small{font-size:9px;letter-spacing:.19em;color:#76dff8}.tower-enter-btn.boss small{color:#ff9991}.tower-enter-btn strong{margin-top:4px;font-size:19px;line-height:1}.tower-enter-btn>i{padding:8px 11px;border-radius:10px;background:rgba(0,0,0,.22);color:#c8f6ff;font-size:10px;font-style:normal;font-weight:900;white-space:nowrap} .tower-deck-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.tower-deck-head h3{margin:2px 0 0} .tower-deck-manage{display:grid;grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:190px;padding:8px 10px;border:1px solid rgba(112,194,229,.22);border-radius:13px;background:linear-gradient(180deg,rgba(15,36,54,.88),rgba(7,18,30,.92));color:#eefaff;box-shadow:inset 0 1px rgba(255,255,255,.055);cursor:pointer;transition:.18s ease} .tower-deck-manage:hover{border-color:rgba(100,221,255,.5);background:linear-gradient(180deg,rgba(18,50,72,.96),rgba(8,26,41,.96));transform:translateY(-1px)} .tower-deck-glyph{position:relative;display:block;width:31px;height:31px}.tower-deck-glyph i{position:absolute;display:block;width:18px;height:24px;border:1px solid rgba(144,225,255,.58);border-radius:5px;background:linear-gradient(160deg,#163f58,#081725);box-shadow:0 2px 5px rgba(0,0,0,.35)}.tower-deck-glyph i:nth-child(1){left:1px;top:4px;transform:rotate(-10deg)}.tower-deck-glyph i:nth-child(2){left:7px;top:2px}.tower-deck-glyph i:nth-child(3){left:12px;top:5px;transform:rotate(9deg)} .tower-deck-manage>span:nth-child(2){display:grid;min-width:0;text-align:left}.tower-deck-manage b{font-size:12px}.tower-deck-manage small{margin-top:3px;color:#7296ad;font-size:9px}.tower-deck-manage em{padding:6px 8px;border-radius:8px;background:rgba(84,207,240,.1);color:#91e9ff;font-size:9px;font-style:normal;font-weight:1000} .tower-pve-battle-stage .battle-backdrop{background:radial-gradient(circle at 50% 44%,rgba(28,76,113,.66),transparent 34%),linear-gradient(180deg,#04101d 0%,#0a1b2d 50%,#02070d 100%)} .tower-pve-battle-stage.tower-boss-stage .battle-backdrop{background:radial-gradient(circle at 72% 42%,rgba(121,27,29,.62),transparent 36%),radial-gradient(circle at 28% 45%,rgba(24,64,94,.5),transparent 34%),linear-gradient(180deg,#13070a,#170c12 52%,#040306)} .tower-pve-battle-stage .tower-floor-intro{z-index:45;background:radial-gradient(circle at center,rgba(17,42,61,.9),rgba(2,7,13,.97) 68%)}.tower-pve-battle-stage.tower-boss-stage .tower-floor-intro{background:radial-gradient(circle at center,rgba(92,16,20,.9),rgba(10,2,4,.98) 68%)} .tower-pve-battle-stage .tower-floor-intro span{margin-top:10px;color:#d7e8f2;font-size:14px}.tower-pve-battle-stage .tower-floor-intro strong{color:#fff;text-shadow:0 0 22px rgba(92,220,255,.58)}.tower-pve-battle-stage.tower-boss-stage .tower-floor-intro strong{text-shadow:0 0 28px rgba(255,58,52,.72)} .tower-pve-battle-stage .tower-battle-progress{top:59px;gap:7px;z-index:18;padding:5px 8px;border:1px solid rgba(131,203,231,.18);border-radius:999px;background:rgba(2,10,19,.76);box-shadow:0 5px 16px rgba(0,0,0,.34);backdrop-filter:blur(8px)} .tower-pve-battle-stage .tower-battle-progress i{width:32px;height:2px}.tower-pve-battle-stage .tower-battle-progress b{font-size:15px}.tower-pve-battle-stage .tower-battle-progress span{font-size:9px;color:#7896aa} .tower-auto-stage-status{position:absolute;z-index:19;left:50%;top:18px;display:flex;align-items:center;gap:7px;transform:translateX(-50%);padding:5px 9px;border:1px solid rgba(72,214,248,.26);border-radius:999px;background:rgba(4,19,31,.78);color:#b9f3ff;font-size:9px;backdrop-filter:blur(8px)}.tower-auto-stage-status>i{width:6px;height:6px;border-radius:50%;background:#45e3ff;box-shadow:0 0 10px #45e3ff;animation:towerAutoPulse .9s ease-in-out infinite}.tower-auto-stage-status b{font-size:9px}.tower-auto-stage-status span{color:#fff}.tower-auto-stage-status small{color:#6f99ae} .tower-pve-battle-stage .battle-message{pointer-events:none}.tower-pve-battle-stage .battle-message button{pointer-events:auto} .tower-result-button,.tower-auto-stop{display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:42px;margin-top:14px;padding:9px 18px;border:1px solid rgba(107,224,255,.48);border-radius:11px;background:linear-gradient(180deg,#156a8d,#0a354f);color:#fff;font-size:12px;font-weight:1000;box-shadow:0 8px 20px rgba(0,0,0,.28);cursor:pointer}.tower-result-button.retry,.tower-auto-stop{border-color:rgba(166,190,207,.28);background:linear-gradient(180deg,#263845,#14222d);color:#d6e5ed} .tower-auto-next{display:grid;gap:3px;width:max-content;max-width:88%;margin:13px auto 0;padding:9px 18px;border:1px solid rgba(65,220,255,.27);border-radius:999px;background:rgba(6,35,49,.7);color:#c5f6ff}.tower-auto-next i{display:none}.tower-auto-next b{font-size:11px}.tower-auto-next small{color:#78a9bb;font-size:9px} @keyframes towerAutoPulse{50%{opacity:.35;transform:scale(.72)}} @media(max-width:768px){ .tower-action-panel{grid-template-columns:1fr;gap:9px}.tower-auto-option{min-height:58px;padding:10px 12px}.tower-auto-copy small{font-size:9px}.tower-enter-btn{min-height:62px;grid-template-columns:42px minmax(0,1fr) auto;padding:8px 12px}.tower-enter-mark{width:38px;height:38px}.tower-enter-btn strong{font-size:17px}.tower-enter-btn>i{padding:7px 8px;font-size:9px} .tower-deck-head{align-items:flex-start}.tower-deck-manage{min-width:0;grid-template-columns:30px minmax(0,1fr);padding:7px 8px}.tower-deck-manage em{display:none}.tower-deck-glyph{width:27px;height:28px;transform:scale(.88)}.tower-deck-manage b{font-size:10px}.tower-deck-manage small{font-size:8px} .tower-pve-battle-stage .battle-topline{top:10px;left:8px;right:8px;font-size:7px;letter-spacing:.7px}.tower-pve-battle-stage .tower-auto-stage-status{top:31px;padding:4px 7px}.tower-pve-battle-stage .tower-auto-stage-status small{display:none} .tower-pve-battle-stage .tower-battle-progress{top:88px;padding:3px 8px}.tower-pve-battle-stage .tower-battle-progress span,.tower-pve-battle-stage .tower-battle-progress i{display:none}.tower-pve-battle-stage .tower-battle-progress b{font-size:11px} .tower-pve-battle-stage .battle-arena{top:116px!important}.tower-pve-battle-stage .battle-message{bottom:48px;min-height:78px}.tower-pve-battle-stage .battle-message>strong{font-size:37px}.tower-pve-battle-stage .battle-message>span{margin-top:7px;font-size:11px}.tower-result-button,.tower-auto-stop{min-width:170px;min-height:38px;margin-top:10px}.tower-auto-next{margin-top:8px;padding:7px 12px}.tower-pve-battle-stage .tower-floor-intro strong{font-size:44px}.tower-pve-battle-stage .tower-floor-intro span{font-size:12px} } @media(max-width:430px){.tower-auto-option{align-items:flex-start}.tower-auto-copy small{max-width:210px}.tower-enter-btn{grid-template-columns:38px minmax(0,1fr)}.tower-enter-btn>i{display:none}.tower-deck-head{gap:6px}.tower-deck-head>div{min-width:0}.tower-deck-manage{max-width:156px}.tower-deck-manage small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}} /* V1041 Infinite Tower responsive layout correction */ .pve-tower-view{container-type:inline-size} .tower-hero{position:relative;isolation:isolate;min-width:0} .tower-hero-copy{position:relative;z-index:2;min-width:0;max-width:760px} .tower-hero-copy p:last-child{max-width:720px;line-height:1.6;overflow-wrap:break-word;word-break:keep-all} .tower-season-clock{position:relative;z-index:2;flex:0 0 auto} .tower-hero-art{position:absolute;right:180px;bottom:-10px;width:150px;height:150px;z-index:1;opacity:.72;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));pointer-events:none} .tower-hero-art .tower-spire{position:absolute;left:61px;top:4px;width:28px;height:36px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(122,235,255,.92),rgba(31,112,158,.65))} .tower-hero-art .tower-body{position:absolute;left:41px;top:34px;width:68px;height:89px;clip-path:polygon(14% 0,86% 0,100% 100%,0 100%);border:1px solid rgba(130,225,255,.38);background:linear-gradient(180deg,rgba(23,90,127,.9),rgba(5,24,39,.94));box-shadow:inset 0 0 22px rgba(97,220,255,.12)} .tower-hero-art .tower-base{position:absolute;left:22px;bottom:9px;width:106px;height:24px;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(21,74,105,.9),rgba(5,20,33,.98));border-top:1px solid rgba(133,229,255,.35)} .tower-hero-art i{position:absolute;top:56px;width:8px;height:15px;border-radius:5px 5px 2px 2px;background:#7de9ff;box-shadow:0 0 12px rgba(85,225,255,.86)} .tower-hero-art i:nth-of-type(1){left:55px}.tower-hero-art i:nth-of-type(2){left:72px}.tower-hero-art i:nth-of-type(3){left:89px} .tower-floor-card,.tower-action-panel,.tower-action-panel>*{min-width:0;max-width:100%;box-sizing:border-box} .tower-action-panel{width:100%;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)} .tower-enter-btn{width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden} .tower-enter-btn>span:nth-child(2){min-width:0} .tower-enter-btn strong,.tower-enter-btn small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tower-enter-btn>i{max-width:110px;overflow:hidden;text-overflow:ellipsis} .tower-deck-preview{container-type:inline-size} .tower-deck-head,.tower-deck-head>div{min-width:0} .tower-deck-head h3{white-space:normal;word-break:keep-all;line-height:1.2} .tower-deck-preview>small{display:block;line-height:1.55;word-break:keep-all;overflow-wrap:break-word} @container (max-width:760px){ .tower-action-panel{grid-template-columns:1fr;gap:10px} .tower-auto-option,.tower-enter-btn{width:100%} .tower-enter-btn{grid-template-columns:42px minmax(0,1fr) auto} } @container (max-width:430px){ .tower-enter-btn{grid-template-columns:40px minmax(0,1fr)} .tower-enter-btn>i{display:none} } @container (max-width:390px){ .tower-deck-head{display:grid;grid-template-columns:1fr;gap:12px} .tower-deck-manage{width:100%;max-width:none;grid-template-columns:32px minmax(0,1fr) auto} .tower-deck-manage em{display:block} .tower-deck-head h3{font-size:21px} } @media(max-width:1100px){ .tower-main-grid{grid-template-columns:1fr} .tower-hero{padding-right:28px} .tower-hero-art{right:145px;opacity:.48;transform:scale(.84);transform-origin:bottom right} } @media(max-width:768px){ .tower-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 18px;min-height:190px} .tower-hero-copy{grid-column:1/-1;padding-right:88px} .tower-hero-copy h2{line-height:1.15;word-break:keep-all} .tower-hero-copy p:last-child{font-size:13px;line-height:1.55} .tower-hero-art{right:8px;bottom:34px;width:105px;height:105px;opacity:.66;transform:scale(.72);transform-origin:bottom right} .tower-season-clock{grid-column:1/-1;width:100%;margin-top:4px} .tower-floor-card{width:100%;overflow:hidden} .tower-action-panel{grid-template-columns:1fr!important;width:100%} .tower-auto-option,.tower-enter-btn{width:100%;max-width:100%} .tower-deck-head{display:grid;grid-template-columns:1fr;gap:12px} .tower-deck-manage{width:100%;max-width:none;grid-template-columns:34px minmax(0,1fr) auto;padding:10px 12px} .tower-deck-manage em{display:block} .tower-deck-manage b{font-size:12px}.tower-deck-manage small{font-size:9px} .tower-deck-preview>small{font-size:12px} } @media(max-width:430px){ .tower-hero{min-height:205px} .tower-hero-copy{padding-right:58px} .tower-hero-art{right:-8px;bottom:38px;opacity:.52;transform:scale(.58)} .tower-floor-card{padding:16px} .tower-enter-btn{grid-template-columns:38px minmax(0,1fr)!important;padding:9px 12px} .tower-enter-btn>i{display:none!important} .tower-auto-copy small{max-width:none} .tower-deck-slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} } /* V1045 boss ultimate battle presentation */ .boss-ultimate-banner{position:absolute;z-index:26;inset:18% 8% auto;display:grid;justify-items:center;text-align:center;padding:22px 18px;border:1px solid rgba(255,82,112,.52);border-radius:18px;background:linear-gradient(135deg,rgba(28,3,13,.94),rgba(76,8,29,.9));box-shadow:0 0 70px rgba(255,31,78,.34);pointer-events:none;animation:bossUltBanner .9s both}.boss-ultimate-banner small{color:#ff6983;font-size:11px;font-weight:1000;letter-spacing:.28em}.boss-ultimate-banner strong{margin-top:7px;color:#fff;font-size:clamp(25px,5vw,52px);line-height:1;text-shadow:0 0 25px rgba(255,57,91,.78)}.boss-ultimate-banner span{margin-top:8px;color:#e4b8c2;font-size:12px}.battle-stage.boss-ultimate-cast:after{content:"";position:absolute;z-index:20;inset:0;background:radial-gradient(circle at 70% 45%,rgba(255,38,79,.25),transparent 42%),linear-gradient(rgba(36,0,11,.12),rgba(90,0,24,.22));pointer-events:none;animation:bossUltFlash .3s 3 alternate}.battle-stage[data-boss-ultimate-theme="void"].boss-ultimate-cast:after{background:radial-gradient(circle at 70% 45%,rgba(132,70,255,.28),transparent 45%),rgba(20,4,45,.2)}.battle-stage[data-boss-ultimate-theme="frost"].boss-ultimate-cast:after{background:radial-gradient(circle at 70% 45%,rgba(95,220,255,.3),transparent 45%),rgba(8,48,75,.18)}.battle-stage[data-boss-ultimate-theme="gold"].boss-ultimate-cast:after{background:radial-gradient(circle at 70% 45%,rgba(255,195,62,.3),transparent 45%),rgba(81,45,3,.16)}.boss-ultimate-zoom .battle-enemy-card{transform:scale(1.09);filter:drop-shadow(0 0 24px rgba(255,46,82,.6))}.boss-ultimate-shake{animation:bossUltShake .13s 5}.battle-card-fighter.boss-ultimate-hit{animation:bossUltHit .38s 2}.battle-card-fighter.boss-ultimate-hit img{filter:brightness(.55) saturate(1.4)}@keyframes bossUltBanner{0%{opacity:0;transform:scale(.76)}55%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}@keyframes bossUltFlash{to{opacity:.35}}@keyframes bossUltShake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@keyframes bossUltHit{50%{transform:translateY(8px) scale(.96);filter:drop-shadow(0 0 12px #ff365c)}} @media(max-width:640px){.boss-ultimate-banner{inset:21% 5% auto;padding:17px 12px}.boss-ultimate-banner strong{font-size:29px}.boss-ultimate-banner span{max-width:260px}.boss-ultimate-zoom .battle-enemy-card{transform:scale(1.04)}} /* V1047 boss ultimate Git resource layer */ .boss-ultimate-resource{position:absolute;inset:8% 10%;z-index:24;display:grid;place-items:center;pointer-events:none;overflow:hidden;border-radius:22px;background:radial-gradient(circle,rgba(4,12,20,.15),rgba(1,4,9,.72));animation:bossResourceIn .32s ease both} .boss-ultimate-resource img,.boss-ultimate-resource video{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 28px rgba(255,44,88,.5))} @keyframes bossResourceIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}} @media(max-width:640px){.boss-ultimate-resource{inset:12% 3%;border-radius:14px}.boss-ultimate-resource img,.boss-ultimate-resource video{object-fit:contain}} /* V1052 boss ultimate full-screen cinematic */ .boss-ultimate-overlay{position:fixed;inset:0;width:100vw;height:100dvh;z-index:92;display:grid;place-items:center;overflow:hidden;background:#000;animation:ultimateOverlayIn .18s ease-out both} .boss-ultimate-overlay.closing{animation:ultimateOverlayOut .22s ease-in both} .boss-ultimate-overlay-media{position:absolute;inset:0;display:grid;place-items:center;background:#000} .boss-ultimate-overlay-media img,.boss-ultimate-overlay-media video{display:block;width:auto;height:auto;max-width:100vw;max-height:100dvh;object-fit:contain;object-position:center center;background:#000} .boss-ultimate-overlay-title{position:absolute;z-index:4;left:4%;right:4%;bottom:max(4%,env(safe-area-inset-bottom));text-align:center;text-shadow:0 2px 5px #000,0 0 28px #000;pointer-events:none} .boss-ultimate-overlay-title small,.boss-ultimate-overlay-title strong,.boss-ultimate-overlay-title span{display:block} .boss-ultimate-overlay-title small{font-size:clamp(10px,1.4vw,14px);font-weight:1000;letter-spacing:.3em;color:#ff7189} .boss-ultimate-overlay-title strong{margin-top:6px;font-size:clamp(28px,6vw,72px);line-height:1;color:#fff;text-shadow:0 0 14px #ff365c,0 0 38px #76001e} .boss-ultimate-overlay-title span{margin:9px auto 0;max-width:min(720px,88vw);font-size:clamp(11px,1.6vw,15px);color:#ffd5dc} .boss-ultimate-overlay-flash{position:absolute;inset:0;z-index:3;pointer-events:none;background:#fff;mix-blend-mode:screen;animation:ultimateFlash .8s ease-out both} .boss-ultimate-overlay-fallback{font-size:clamp(42px,10vw,130px);font-weight:1000;letter-spacing:.08em;color:#fff;text-align:center;text-shadow:0 0 25px #ff365c,0 0 65px #76001e} .boss-ultimate-overlay.media-failed .boss-ultimate-overlay-title{opacity:1} .boss-ultimate-fullscreen .battle-arena,.boss-ultimate-fullscreen .battle-hud,.boss-ultimate-fullscreen .battle-topline,.boss-ultimate-fullscreen .battle-message{visibility:hidden} @media(max-width:640px){ .boss-ultimate-overlay-title{left:3%;right:3%;bottom:max(3%,env(safe-area-inset-bottom))} .boss-ultimate-overlay-title strong{font-size:clamp(26px,10vw,46px)} .boss-ultimate-overlay-title span{max-width:92vw;line-height:1.35} } /* V1053 PVE monster tabs */ .pve-monster-browser{display:grid;gap:14px;min-width:0;container-type:inline-size} .pve-monster-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:2px 0 8px} .pve-monster-tabs button{min-width:0;height:52px;border:1px solid rgba(125,211,252,.17);background:linear-gradient(180deg,rgba(8,20,34,.96),rgba(5,14,26,.96));color:#96aac0;border-radius:18px;padding:0 10px;font-size:16px;font-weight:1000;letter-spacing:-.04em;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 24px rgba(0,0,0,.16)} .pve-monster-tabs button.active{background:linear-gradient(135deg,rgba(26,202,185,.28),rgba(28,111,164,.25));border-color:rgba(73,234,214,.68);color:#f1ffff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 2px rgba(33,216,197,.07),0 14px 28px rgba(0,0,0,.22)} .pve-monster-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0} .pve-tool-field{position:relative;display:grid;grid-template-rows:auto 40px;gap:8px;min-width:0;padding:11px;border:1px solid rgba(79,223,207,.22);border-radius:18px;background:linear-gradient(155deg,rgba(11,29,46,.98),rgba(5,14,26,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.2);transition:border-color .18s,transform .18s,box-shadow .18s;overflow:visible} .pve-tool-field:focus-within{border-color:rgba(79,233,214,.72);box-shadow:0 0 0 3px rgba(45,218,197,.08),0 15px 34px rgba(0,0,0,.27);transform:translateY(-1px)} .pve-tool-head{display:flex;align-items:center;gap:7px;min-width:0;color:#dffefa;font-size:12px;line-height:1;font-weight:1000;letter-spacing:-.02em;white-space:nowrap} .pve-tool-icon{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,rgba(41,222,201,.2),rgba(40,123,170,.15));border:1px solid rgba(75,226,211,.28);color:#69f2e3;font-size:16px;font-weight:1000;text-shadow:0 0 12px rgba(64,238,218,.38)} .pve-monster-tools input,.pve-monster-tools select{display:block;width:100%;min-width:0;height:40px;box-sizing:border-box;border:1px solid rgba(116,204,220,.16)!important;border-radius:12px!important;outline:0!important;background:rgba(1,9,18,.64)!important;color:#f4fbff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;font-size:12px;font-weight:900;letter-spacing:-.035em} .pve-monster-tools input{padding:0 10px} .pve-monster-tools input::placeholder{color:#7790a5;font-weight:800;opacity:1} .pve-select-wrap{position:relative;display:block;min-width:0} .pve-select-wrap:after{content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;border-right:2px solid #64eadb;border-bottom:2px solid #64eadb;transform:translateY(-68%) rotate(45deg);pointer-events:none} .pve-monster-tools select{appearance:none;-webkit-appearance:none;padding:0 29px 0 9px!important;cursor:pointer;white-space:nowrap;text-overflow:clip;overflow:visible;background-image:none!important} .pve-monster-tools select option{background:#0c1727;color:#edf7fb} .pve-monster-grid{display:grid;gap:10px} .boss-ultimate-overlay-media{width:100vw;height:100dvh;overflow:hidden}.boss-ultimate-overlay-media video.is-portrait,.boss-ultimate-overlay-media img.is-portrait{height:100dvh;width:auto;max-width:100vw}.boss-ultimate-overlay-media video.is-landscape,.boss-ultimate-overlay-media img.is-landscape{width:100vw;height:auto;max-height:100dvh} @container(max-width:330px){.pve-monster-tools{gap:7px}.pve-tool-field{padding:8px;grid-template-rows:auto 38px;border-radius:15px}.pve-tool-head{font-size:11px;gap:5px}.pve-tool-icon{width:23px;height:23px;flex-basis:23px;font-size:14px}.pve-monster-tools input,.pve-monster-tools select{height:38px;font-size:11px}.pve-monster-tools select{padding-left:7px!important;padding-right:24px!important}.pve-select-wrap:after{right:9px;width:6px;height:6px}.pve-monster-tabs button{height:48px;font-size:15px}} @media(max-width:900px){.boss-ultimate-overlay-title{bottom:max(2%,env(safe-area-inset-bottom));}.boss-ultimate-overlay-media img,.boss-ultimate-overlay-media video{max-width:100vw;max-height:100dvh}} /* V1072 daily quest reward card sync + visual refinement */ .daily-quest-reward{position:relative;isolation:isolate;overflow:hidden;min-height:182px;padding:24px 22px;gap:10px;border-color:rgba(85,218,255,.34);background:radial-gradient(circle at 50% 10%,rgba(74,220,255,.16),transparent 42%),linear-gradient(155deg,rgba(13,31,48,.98),rgba(6,13,25,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 38px rgba(47,183,255,.06),0 16px 35px rgba(0,0,0,.24)} .daily-quest-reward::before{content:"";position:absolute;z-index:-1;inset:-55% 32% 42% -25%;border-radius:50%;background:radial-gradient(circle,rgba(98,229,255,.2),transparent 68%);filter:blur(4px)} .daily-quest-reward::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.045) 42%,transparent 62%);transform:translateX(-120%);animation:dailyRewardSheen 7s ease-in-out infinite} .daily-reward-label{padding:5px 10px;border:1px solid rgba(117,226,255,.22);border-radius:999px;background:rgba(69,203,255,.075);font-size:10px!important;letter-spacing:2.1px!important;color:#8de8ff!important} .daily-reward-goal,.daily-reward-coin{display:flex;align-items:baseline;justify-content:center;gap:8px;line-height:1} .daily-reward-goal strong{font-size:clamp(38px,5vw,54px)!important;letter-spacing:-2px;color:#f7fbff!important;text-shadow:0 0 18px rgba(126,227,255,.2)} .daily-reward-goal small,.daily-reward-coin small{font-size:10px;font-weight:900;letter-spacing:1.8px;color:#7894ad} .daily-reward-divider{width:min(180px,72%);height:1px;background:linear-gradient(90deg,transparent,rgba(126,221,255,.35),transparent)} .daily-reward-coin i{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(255,215,91,.48);border-radius:8px;background:rgba(255,198,54,.09);font-style:normal;font-size:13px;color:#ffd65b;transform:rotate(45deg);box-shadow:0 0 18px rgba(255,198,54,.1)} .daily-reward-coin i::first-letter{display:inline-block;transform:rotate(-45deg)} .daily-reward-coin b{font-size:clamp(27px,4vw,37px)!important;letter-spacing:-1px;color:#ffd65b!important;text-shadow:0 0 20px rgba(255,196,45,.16)} .daily-quest-reward>em{margin-top:2px;padding-top:2px;font-size:10px!important;letter-spacing:1.2px!important;color:#718da6!important} @keyframes dailyRewardSheen{0%,72%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}} @media(max-width:760px){.daily-quest-reward{min-height:174px!important;padding:21px 14px!important}.daily-reward-goal strong{font-size:42px!important}.daily-reward-coin b{font-size:30px!important}} @media(prefers-reduced-motion:reduce){.daily-quest-reward::after{animation:none}} /* V1072 daily quest full user UI redesign */ .daily-quest-v1072{position:relative;isolation:isolate;gap:22px;padding:6px 0 4px} .daily-quest-v1072::before{content:"";position:absolute;z-index:-1;left:4%;right:4%;top:44px;height:420px;background:radial-gradient(ellipse at center,rgba(25,184,210,.09),transparent 68%);filter:blur(18px);pointer-events:none} .daily-quest-v1072 .daily-quest-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:12px 4px 4px} .daily-head-copy{min-width:0}.daily-head-copy .eyebrow{margin:0 0 10px;color:#73e8f7;letter-spacing:2px;font-size:12px;font-weight:1000}.daily-head-copy h2{margin:0;color:#f7fbff;font-size:clamp(30px,4vw,43px);letter-spacing:-.045em;line-height:1.1}.daily-head-copy>p:last-child{margin:14px 0 0;color:#91a8c2;font-size:16px;line-height:1.65} .daily-reset-chip{flex:0 0 auto;display:grid;gap:4px;min-width:150px;padding:13px 17px;border:1px solid rgba(100,221,238,.19);border-radius:16px;background:linear-gradient(145deg,rgba(13,34,51,.84),rgba(7,17,31,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 13px 30px rgba(0,0,0,.18)}.daily-reset-chip span{font-size:9px;font-weight:1000;letter-spacing:1.8px;color:#66859d}.daily-reset-chip strong{font-size:15px;color:#c9f9ff;letter-spacing:.03em} .daily-quest-v1072 .daily-quest-grid-single{width:min(100%,1020px);max-width:none;margin-inline:auto} .daily-quest-v1072 .daily-quest-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(280px,.68fr);gap:0;align-items:stretch;padding:0!important;overflow:hidden;border:1px solid rgba(78,211,228,.33);border-radius:30px;background:linear-gradient(145deg,rgba(8,24,42,.99),rgba(5,13,25,.99));box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 30px 80px rgba(0,0,0,.34),0 0 0 1px rgba(41,173,202,.035)} .daily-quest-v1072 .daily-quest-panel::before{content:"";position:absolute;left:-8%;top:-40%;width:55%;height:130%;background:radial-gradient(circle,rgba(54,220,229,.09),transparent 66%);pointer-events:none} .daily-quest-v1072 .daily-quest-copy{position:relative;z-index:1;padding:36px 38px 34px;min-width:0} .daily-mission-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.daily-quest-v1072 .quest-kind{display:inline-flex;align-items:center;gap:9px;color:#81ecfa;font-size:12px;font-weight:1000;letter-spacing:1.7px}.daily-quest-v1072 .quest-kind i{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(101,230,244,.27);border-radius:8px;background:rgba(55,195,221,.1);font-style:normal;font-size:12px;box-shadow:0 0 20px rgba(63,221,234,.09)} .daily-state-badge{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(104,203,222,.23);border-radius:999px;background:rgba(42,137,162,.1);color:#9fddea;font-size:10px;font-weight:1000;letter-spacing:.7px}.daily-state-badge.is-complete{border-color:rgba(80,238,186,.36);background:rgba(42,185,131,.13);color:#79f1be}.daily-state-badge.is-claimed{border-color:rgba(170,143,255,.34);background:rgba(111,77,206,.13);color:#c7b6ff}.daily-state-badge.is-blocked{border-color:rgba(255,123,137,.3);background:rgba(190,54,70,.12);color:#ff9aa5} .daily-quest-v1072 .daily-quest-copy h3{margin:0 0 10px;font-size:clamp(27px,3.2vw,38px);line-height:1.2;letter-spacing:-.045em;color:#fff}.daily-mission-desc{margin:0;color:#849bb3;font-size:13px;line-height:1.7;word-break:keep-all} .daily-quest-v1072 .daily-quest-status{display:grid;gap:7px;margin:23px 0 15px;padding:17px 19px;border:1px solid rgba(255,255,255,.075);border-radius:17px;background:rgba(1,8,17,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.daily-quest-v1072 .daily-quest-status b{font-size:17px;color:#f4f9ff;letter-spacing:-.025em}.daily-quest-v1072 .daily-quest-status span{font-size:13px;color:#70dff0}.daily-quest-v1072 .daily-quest-status.is-complete{border-color:rgba(74,231,178,.27);background:rgba(25,119,84,.13)}.daily-quest-v1072 .daily-quest-status.is-complete span{color:#72efb7}.daily-quest-v1072 .daily-quest-status.is-claimed{border-color:rgba(167,134,255,.25);background:rgba(89,62,166,.12)}.daily-quest-v1072 .daily-quest-status.is-claimed span{color:#c3b0ff}.daily-quest-v1072 .daily-quest-status.is-blocked{border-color:rgba(255,110,126,.22);background:rgba(142,38,54,.1)}.daily-quest-v1072 .daily-quest-status.is-blocked span{color:#ff9aa5} .daily-progress-wrap{display:grid;gap:9px;margin:0 0 23px}.daily-progress-meta{display:flex;align-items:center;justify-content:space-between;color:#728ba3;font-size:11px;font-weight:900}.daily-progress-meta b{color:#b4f5fb;font-size:12px}.daily-progress-track{height:8px;overflow:hidden;border:1px solid rgba(110,210,225,.12);border-radius:999px;background:#040b14;box-shadow:inset 0 2px 6px rgba(0,0,0,.48)}.daily-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#20b8c7,#69e8f3);box-shadow:0 0 15px rgba(64,224,238,.42);transition:width .45s cubic-bezier(.2,.8,.2,1)} .daily-quest-v1072 .daily-quest-actions{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:12px}.daily-quest-v1072 .daily-quest-actions .btn{height:58px;margin:0;border-radius:17px;font-size:15px;font-weight:1000;letter-spacing:-.02em;box-shadow:none}.daily-check-btn{border-color:rgba(79,211,230,.36)!important;background:linear-gradient(145deg,rgba(16,54,73,.86),rgba(9,31,47,.92))!important;color:#e7fcff!important}.daily-check-btn span{display:inline-block;margin-right:6px;font-size:18px}.daily-check-btn:hover:not(:disabled){border-color:rgba(91,231,244,.7)!important;transform:translateY(-1px);box-shadow:0 12px 25px rgba(0,0,0,.2)!important}.daily-claim-btn{border:1px solid rgba(136,126,255,.42)!important;background:linear-gradient(135deg,#3d79f4,#8255f8)!important;color:#fff!important;box-shadow:0 13px 30px rgba(75,74,230,.22)!important}.daily-claim-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 16px 35px rgba(83,79,235,.3)!important}.daily-quest-v1072 .daily-quest-actions .btn:disabled{opacity:.45;filter:saturate(.55);cursor:not-allowed;transform:none!important} .daily-quest-v1072 .daily-quest-reward{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100%!important;padding:35px 28px!important;border:0;border-left:1px solid rgba(78,211,228,.2);border-radius:0;background:radial-gradient(circle at 50% 25%,rgba(53,214,231,.18),transparent 38%),linear-gradient(160deg,rgba(13,38,55,.97),rgba(5,15,27,.99));box-shadow:inset 1px 0 0 rgba(255,255,255,.025)}.daily-quest-v1072 .daily-quest-reward::before{inset:11% 15% auto;height:160px;border:1px solid rgba(98,221,235,.12);border-radius:50%;background:radial-gradient(circle,rgba(65,217,230,.08),transparent 69%);filter:none;box-shadow:0 0 55px rgba(45,205,224,.08)}.daily-quest-v1072 .daily-quest-reward::after{opacity:.7} .daily-quest-v1072 .daily-reward-label{position:relative;z-index:1;margin-bottom:20px;padding:6px 11px;border-color:rgba(121,228,241,.22);background:rgba(70,203,219,.07);color:#91ecf5!important;font-size:9px!important;letter-spacing:2.2px!important}.daily-reward-icon{position:relative;z-index:1;display:grid;place-items:center;width:76px;height:76px;margin-bottom:18px;border:1px solid rgba(255,213,84,.38);border-radius:24px;transform:rotate(45deg);background:linear-gradient(145deg,rgba(255,213,77,.18),rgba(190,116,21,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 38px rgba(255,195,52,.16)}.daily-reward-icon span{transform:rotate(-45deg);color:#ffda62;font-size:27px;text-shadow:0 0 18px rgba(255,211,85,.45)} .daily-quest-v1072 .daily-reward-coin{position:relative;z-index:1;display:grid;justify-items:center;gap:5px}.daily-quest-v1072 .daily-reward-coin b{font-size:clamp(38px,5vw,52px)!important;letter-spacing:-2px;color:#ffd45c!important;text-shadow:0 0 26px rgba(255,199,50,.18)}.daily-quest-v1072 .daily-reward-coin small{color:#ab8f45;font-size:9px;letter-spacing:2.3px} .daily-quest-v1072 .daily-reward-goal{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:22px;padding:12px 18px;border-top:1px solid rgba(115,218,232,.16);border-bottom:1px solid rgba(115,218,232,.1);color:#728ca3}.daily-quest-v1072 .daily-reward-goal span{font-size:10px;font-weight:1000;letter-spacing:1px;color:#69879f}.daily-quest-v1072 .daily-reward-goal strong{font-size:21px!important;letter-spacing:-.5px;color:#eafdff!important}.daily-quest-v1072 .daily-reward-goal small{font-size:9px;letter-spacing:1.4px;color:#6f8aa1}.daily-quest-v1072 .daily-quest-reward>em{position:relative;z-index:1;max-width:220px;margin-top:17px!important;color:#678097!important;text-align:center;line-height:1.55;font-size:9px!important;letter-spacing:.3px!important} .daily-quest-v1072 .daily-quest-note{display:flex;align-items:center;gap:10px;padding:0 5px;color:#627b94}.daily-quest-v1072 .daily-quest-note span{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border:1px solid rgba(106,197,214,.18);border-radius:50%;background:rgba(45,139,160,.08);color:#77cbd8;font-size:11px;font-weight:1000}.daily-quest-v1072 .daily-quest-note p{margin:0;font-size:11px;line-height:1.55} @media(max-width:900px){.daily-quest-v1072 .daily-quest-head{align-items:flex-start}.daily-reset-chip{min-width:132px}.daily-quest-v1072 .daily-quest-panel{grid-template-columns:minmax(0,1fr) 245px}.daily-quest-v1072 .daily-quest-copy{padding:30px 27px}.daily-quest-v1072 .daily-quest-reward{padding:30px 18px!important}} @media(max-width:760px){.daily-quest-v1072{gap:16px}.daily-quest-v1072 .daily-quest-head{display:grid;gap:14px;padding:2px}.daily-head-copy h2{font-size:29px}.daily-head-copy>p:last-child{margin-top:10px;font-size:13px}.daily-reset-chip{width:100%;grid-template-columns:1fr auto;align-items:center;padding:11px 14px;border-radius:13px}.daily-quest-v1072 .daily-quest-panel{grid-template-columns:1fr;border-radius:22px}.daily-quest-v1072 .daily-quest-copy{padding:23px 17px 20px}.daily-mission-top{margin-bottom:14px}.daily-quest-v1072 .daily-quest-copy h3{font-size:25px}.daily-mission-desc{font-size:12px}.daily-quest-v1072 .daily-quest-status{margin:18px 0 13px;padding:14px 15px}.daily-quest-v1072 .daily-quest-status b{font-size:15px}.daily-quest-v1072 .daily-quest-actions{grid-template-columns:1fr;gap:9px}.daily-quest-v1072 .daily-quest-actions .btn{height:52px;border-radius:14px}.daily-quest-v1072 .daily-quest-reward{min-height:285px!important;padding:29px 18px!important;border-left:0;border-top:1px solid rgba(78,211,228,.18)}.daily-reward-icon{width:66px;height:66px;border-radius:20px}.daily-quest-v1072 .daily-reward-coin b{font-size:43px!important}.daily-quest-v1072 .daily-quest-note{align-items:flex-start;padding:0 2px}.daily-quest-v1072 .daily-quest-note p{font-size:10px;word-break:keep-all}} @media(max-width:390px){.daily-quest-v1072 .daily-quest-copy{padding:20px 13px 17px}.daily-mission-top{align-items:flex-start}.daily-state-badge{padding:6px 8px;font-size:9px}.daily-quest-v1072 .quest-kind{font-size:10px;letter-spacing:1.2px}.daily-quest-v1072 .daily-quest-copy h3{font-size:22px}.daily-quest-v1072 .daily-quest-reward{min-height:268px!important}} @media(prefers-reduced-motion:reduce){.daily-progress-track span{transition:none}} /* V1072 cumulative premium cube acquisition ticker */ .premium-cube-feed{margin-top:-10px;border-color:rgba(255,205,91,.30);background:linear-gradient(90deg,rgba(24,17,5,.96),rgba(6,20,38,.96));box-shadow:inset 0 0 26px rgba(255,190,55,.035)} .premium-cube-label{min-width:142px;border-right-color:rgba(255,222,123,.18);background:linear-gradient(135deg,#241805,#101827);color:#ffe9a0;text-shadow:0 0 14px rgba(255,196,57,.28)} .premium-cube-item strong{margin:0 5px;color:#ffd966;text-shadow:0 0 12px rgba(255,194,45,.45)} .premium-cube-item em{margin-left:9px;padding:3px 7px;border:1px solid rgba(255,213,91,.28);border-radius:999px;background:rgba(255,194,45,.08);color:#ffe69a;font-size:9px;font-style:normal;letter-spacing:.8px} .premium-cube-item:after{color:rgba(255,212,91,.48)} @media(max-width:767px){.premium-cube-feed{margin-top:-11px}.premium-cube-label{min-width:92px;max-width:92px;white-space:normal;line-height:1.2}.premium-cube-item em{margin-left:6px;padding:2px 5px;font-size:8px}} /* V1073.4 tower completion state */ .tower-completed{max-width:760px;margin:28px auto;padding:44px 28px;text-align:center;border:1px solid rgba(91,224,207,.24);background:radial-gradient(circle at 50% 0,rgba(62,207,190,.15),transparent 48%),linear-gradient(155deg,rgba(15,29,39,.97),rgba(7,13,23,.98));box-shadow:0 24px 70px rgba(0,0,0,.38)}.tower-completed h2{font-size:clamp(28px,5vw,48px);margin:8px 0 14px}.tower-completed strong{display:block;margin:18px 0 8px;color:#7ee9d8;font-size:18px}.tower-completed span{display:block;color:#a9b8c8;line-height:1.65}@media(max-width:640px){.tower-completed{margin:16px 10px;padding:34px 20px}} /* V1073.7 — cube opening mobile responsive hardening */ @media (max-width: 767px){ .inventory-open-modal{ align-items:stretch; justify-content:stretch; padding:0; overflow:hidden; } .inventory-open-panel{ width:100%; max-width:none; min-height:100dvh; height:100dvh; max-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)); border:0; border-radius:0; scrollbar-width:thin; } .inventory-open-panel>.icon-close{ position:fixed; top:max(12px,env(safe-area-inset-top)); right:12px; z-index:50; width:40px; height:40px; background:rgba(3,10,28,.86); backdrop-filter:blur(8px); } .inventory-open-intro{ flex:0 0 auto; padding:28px 42px 0; } .inventory-open-intro h2{ margin:4px 0 7px; font-size:clamp(24px,7vw,30px); line-height:1.15; } .inventory-open-intro>p:last-child{ margin:0; font-size:12px; line-height:1.55; } .inventory-open-stage{ flex:1 1 auto; width:100%; min-height:220px; height:auto; max-height:42dvh; margin:0 auto; } .inventory-open-stage img{ max-width:min(48vw,190px); max-height:min(38dvh,270px); } .inventory-open-aura{ width:min(70vw,280px); height:min(70vw,280px); } .inventory-open-ring{width:min(58vw,230px);height:min(58vw,230px)} .inventory-open-ring.r2{width:min(68vw,270px);height:min(68vw,270px)} .inventory-open-warning{ flex:0 0 auto; display:grid; grid-template-columns:auto 1fr; align-items:center; width:100%; max-width:420px; margin:2px auto 0; padding:11px 13px; gap:8px; border:1px solid rgba(124,236,255,.17); border-radius:12px; background:rgba(2,10,28,.48); text-align:left; line-height:1.35; } .inventory-open-warning span{text-align:right;overflow-wrap:anywhere} .inventory-open-confirm{ flex:0 0 auto; position:sticky; bottom:max(8px,env(safe-area-inset-bottom)); z-index:30; width:100%; min-height:50px; min-width:0; margin:14px auto 7px; } .inventory-open-panel>small{ flex:0 0 auto; display:block; padding:0 4px 6px; font-size:10px; line-height:1.45; } .inventory-open-panel.revealed{ justify-content:flex-start; padding-top:max(20px,env(safe-area-inset-top)); } .inventory-result-head{flex:0 0 auto;padding:2px 8px 0} .inventory-result-head h2{font-size:clamp(24px,7vw,30px);line-height:1.15} .inventory-result-card-wrap{ flex:1 1 auto; min-height:260px; padding:10px 4px; } .inventory-result-card{ width:min(56vw,205px)!important; max-height:43dvh; } .inventory-result-info{ flex:0 0 auto; padding:0 8px; } .inventory-result-info b{font-size:clamp(18px,5.5vw,22px);overflow-wrap:anywhere} .inventory-result-info span{font-size:12px;overflow-wrap:anywhere} .inventory-result-info em{margin:8px 0 12px} #inventoryResultConfirm{ flex:0 0 auto; position:sticky; bottom:max(8px,env(safe-area-inset-bottom)); z-index:30; width:100%; min-height:50px; margin-top:4px; } } @media (max-width:380px), (max-height:700px){ .inventory-open-intro{padding-top:18px} .inventory-open-stage{min-height:180px;max-height:36dvh} .inventory-open-stage img{max-height:225px} .inventory-result-card-wrap{min-height:220px} .inventory-result-card{width:min(50vw,180px)!important;max-height:38dvh} } /* v1073.8 custom LIMITED/FUR acquisition cutscene */ .acquisition-cutscene-modal{padding:0!important;background:#000!important}.acquisition-cutscene-stage{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:#000}.acquisition-cutscene-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.acquisition-cutscene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.48))}.acquisition-cutscene-label{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));display:grid;gap:2px;text-shadow:0 2px 12px #000}.acquisition-cutscene-label small{letter-spacing:.18em;color:#d8eaff}.acquisition-cutscene-label strong{font-size:clamp(30px,6vw,70px);line-height:1;color:#fff}.acquisition-cutscene-stage>button{position:absolute;top:max(16px,calc(env(safe-area-inset-top) + 10px));right:max(16px,calc(env(safe-area-inset-right) + 10px));z-index:2;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 16px;background:rgba(0,0,0,.58);color:#fff;backdrop-filter:blur(10px)}@media(max-width:600px){.acquisition-cutscene-stage video{object-fit:contain}.acquisition-cutscene-label{left:16px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))}.acquisition-cutscene-label small{font-size:10px}} /* v1075 captain battle complete UI */ .captain-v2-hero,.captain-v2-wait,.captain-v2-dashboard,.captain-v2-opponents,.captain-v2-page{position:relative;padding:28px;border:1px solid rgba(88,224,255,.25);border-radius:24px;background:linear-gradient(145deg,rgba(5,18,40,.98),rgba(17,9,42,.96));box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}.captain-v2-hero{text-align:center;padding:56px 24px}.captain-v2-kicker,.captain-v2-title small,.captain-v2-sectiontitle small,.captain-v2-teamhead small{color:#6ce7ff;letter-spacing:2px;font-size:11px}.captain-v2-hero h2{font-size:clamp(28px,5vw,48px);margin:10px 0}.captain-v2-hero p,.captain-v2-wait p,.captain-v2-sectiontitle p{color:#9fb3ca}.captain-v2-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:720px;margin:26px auto}.captain-v2-rules span{padding:15px;border-radius:16px;background:rgba(255,255,255,.05);color:#9fb3ca}.captain-v2-rules b{display:block;color:white;font-size:24px}.captain-secret-team{display:flex;justify-content:center;gap:16px;margin:20px}.captain-secret-team i{display:grid;place-items:center;width:84px;height:110px;border:1px solid rgba(108,231,255,.35);border-radius:18px;background:rgba(255,255,255,.04);font-style:normal;font-weight:900}.captain-v2-wait{text-align:center;padding:48px 24px}.captain-v2-teamhead,.captain-v2-rivalhead,.captain-v2-title,.captain-v2-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}.captain-v2-score{text-align:right}.captain-v2-score b{display:block;font-size:34px;color:#72eaff}.captain-v2-score span{font-size:10px;color:#7894b1}.captain-v2-members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.captain-v2-member{padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.04)}.captain-v2-role{font-size:11px;color:#ffd36a;margin-bottom:10px}.captain-v2-id{display:flex;align-items:center;gap:10px}.captain-tier-logo{width:42px;height:42px;object-fit:contain}.captain-v2-id b,.captain-v2-id small{display:block}.captain-v2-id small{font-size:11px;color:#8da5be}.captain-v2-member>strong{display:block;margin-top:12px;font-size:20px}.captain-rename{display:flex;gap:8px;margin:12px 0 20px}.captain-rename input{flex:1}.captain-energy{min-width:240px}.captain-energy>div:first-child{display:flex;gap:8px;align-items:baseline}.captain-energy-pips{display:flex;gap:5px;margin:7px 0}.captain-energy-pips i{width:28px;height:6px;border-radius:99px;background:#213a54}.captain-energy-pips i.on{background:#63e7ff;box-shadow:0 0 12px #63e7ff}.captain-v2-opponents{margin-top:16px}.captain-v2-rival{padding:18px;margin-top:14px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(0,0,0,.15)}.captain-v2-rival .captain-v2-member{position:relative;padding-bottom:58px}.captain-v2-rival .capFight{position:absolute;left:12px;right:12px;bottom:12px;width:calc(100% - 24px)}.captain-v2-ranking article,.captain-log-row{display:flex;align-items:center;gap:14px;padding:14px;border-bottom:1px solid rgba(255,255,255,.07)}.captain-v2-ranking em{width:34px;font-size:20px}.captain-v2-ranking div,.captain-log-row div{flex:1}.captain-v2-ranking b,.captain-v2-ranking small,.captain-log-row b,.captain-log-row small{display:block}.captain-log-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.captain-log-grid section{padding:16px;border-radius:18px;background:rgba(255,255,255,.035)}.captain-log-row .win{color:#66f0a6}.captain-log-row .lose{color:#ff7485}.captain-v2-result{padding:44px;text-align:center}.captain-v2-result h2{font-size:48px}.captain-v2-result.win h2{color:#68f2ad}.captain-v2-result.lose h2{color:#ff7188}.captain-v2-power{display:flex;align-items:center;justify-content:center;gap:28px;font-size:26px;margin:20px}.captain-empty{padding:30px;text-align:center;color:#91a8c0}@media(max-width:780px){.captain-v2-rules{grid-template-columns:repeat(2,1fr)}.captain-v2-members,.captain-log-grid{grid-template-columns:1fr}.captain-v2-teamhead,.captain-v2-actions,.captain-v2-title{align-items:flex-start;flex-direction:column}.captain-v2-score{text-align:left}.captain-energy{width:100%}} /* V1080 Captain Battle — random 3v3 winner-stays gauntlet */ .captain-v3-hero,.captain-v3-waiting,.captain-v3-command,.captain-v3-matchboard,.captain-v3-subpage{position:relative;overflow:hidden;border:1px solid rgba(91,224,255,.2);border-radius:26px;background:radial-gradient(circle at 8% 0%,rgba(41,187,255,.14),transparent 30%),radial-gradient(circle at 92% 100%,rgba(120,72,255,.14),transparent 34%),linear-gradient(145deg,rgba(4,14,31,.98),rgba(11,10,33,.98));box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);color:#eef9ff} .captain-v3-hero{min-height:520px;padding:62px 30px 42px;text-align:center;display:grid;place-items:center;align-content:center} .captain-v3-hero-glow{position:absolute;inset:-30%;pointer-events:none;background:conic-gradient(from 120deg,transparent 0 30%,rgba(83,226,255,.1),transparent 48% 72%,rgba(132,90,255,.1),transparent);filter:blur(18px);animation:captainV3Glow 14s linear infinite} @keyframes captainV3Glow{to{transform:rotate(1turn)}} .captain-v3-kicker,.captain-v3-command small,.captain-v3-matchboard header small,.captain-v3-subhead small,.captain-v3-waiting>small{position:relative;color:#68eaff;font-size:11px;font-weight:900;letter-spacing:2.6px} .captain-v3-hero h2{position:relative;margin:12px 0 10px;font-size:clamp(30px,5.2vw,58px);line-height:1.04;letter-spacing:-2px;text-shadow:0 10px 38px rgba(70,217,255,.18)} .captain-v3-hero>p{position:relative;margin:0;color:#a5b9cf;font-size:15px} .captain-v3-rule-flow{position:relative;width:min(940px,100%);margin:34px auto 22px;display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;align-items:center;gap:8px} .captain-v3-rule-flow article{min-height:132px;padding:20px 16px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.035);display:grid;align-content:center;gap:5px;transition:.25s} .captain-v3-rule-flow article:hover{transform:translateY(-3px);border-color:rgba(103,232,255,.3);background:rgba(83,211,255,.07)} .captain-v3-rule-flow article span{color:#5fe6ff;font-size:10px;font-weight:900;letter-spacing:2px}.captain-v3-rule-flow article b{font-size:20px}.captain-v3-rule-flow article small{color:#8fa7c0;line-height:1.5}.captain-v3-rule-flow>i{color:#5fe6ff;font-style:normal;font-size:18px} .captain-v3-rule-badges{position:relative;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:26px}.captain-v3-rule-badges span{padding:8px 12px;border-radius:99px;background:rgba(93,225,255,.08);border:1px solid rgba(93,225,255,.16);color:#bceefa;font-size:11px} .captain-v3-main-button{position:relative;width:min(380px,90vw);min-height:54px;font-size:16px!important;background:linear-gradient(135deg,#23bdd8,#586cf4)!important;box-shadow:0 16px 36px rgba(28,170,224,.24)!important}.captain-v3-warning{position:relative;margin-top:13px;color:#7f94ab;font-size:11px} .captain-v3-waiting{min-height:460px;padding:58px 24px;display:grid;place-items:center;align-content:center;text-align:center}.captain-v3-waiting h2{margin:10px 0 7px;font-size:clamp(27px,4vw,42px)}.captain-v3-waiting p{margin:0;color:#9fb3ca}.captain-v3-secret-cards{display:flex;gap:14px;margin-bottom:25px}.captain-v3-secret-cards i{display:grid;place-items:center;width:86px;height:118px;border-radius:20px;border:1px solid rgba(94,229,255,.22);background:linear-gradient(145deg,rgba(39,172,226,.12),rgba(110,78,230,.08));font-style:normal;font-size:30px;font-weight:1000;box-shadow:0 12px 28px rgba(0,0,0,.2);animation:captainV3Float 2.8s ease-in-out infinite}.captain-v3-secret-cards i:nth-child(2){animation-delay:-.9s}.captain-v3-secret-cards i:nth-child(3){animation-delay:-1.8s}.captain-v3-secret-cards .me{color:#68eaff;font-size:14px;letter-spacing:1px;border-color:rgba(105,232,255,.55);box-shadow:0 0 30px rgba(70,220,255,.12)} @keyframes captainV3Float{50%{transform:translateY(-7px)}} .captain-v3-wait-count{margin:24px 0 20px;display:flex;align-items:baseline;gap:9px}.captain-v3-wait-count b{font-size:36px;color:#6fe9ff}.captain-v3-wait-count span{color:#92a9c2} .captain-v3-command{padding:26px}.captain-v3-team-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.07)}.captain-v3-team-header h2{margin:5px 0 4px;font-size:clamp(27px,4vw,42px)}.captain-v3-team-header p{margin:0;color:#8da5bd}.captain-v3-team-score{text-align:right}.captain-v3-team-score span{display:block;color:#738ca6;font-size:10px;font-weight:900;letter-spacing:1.8px}.captain-v3-team-score b{display:block;color:#77ebff;font-size:40px;line-height:1.05} .captain-v3-team-roster,.captain-v3-rival-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.captain-v3-member{position:relative;min-width:0;padding:16px;border:1px solid rgba(255,255,255,.075);border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));transition:.25s}.captain-v3-member:hover{transform:translateY(-2px);border-color:rgba(101,231,255,.24)}.captain-v3-member.compact{padding:12px;border-radius:16px}.captain-v3-member-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.captain-v3-member-top em{font-style:normal;font-size:9px;font-weight:900;color:#7cecff}.captain-v3-member.is-down{opacity:.44;filter:grayscale(.7)}.captain-v3-member.is-active{border-color:rgba(255,212,112,.46);box-shadow:0 0 26px rgba(255,191,58,.11)} .captain-v3-role{display:inline-flex;padding:5px 8px;border-radius:99px;font-size:9px;font-weight:1000;letter-spacing:1px;background:rgba(109,230,255,.09);color:#75eaff}.captain-v3-role.captain{background:rgba(255,199,73,.11);color:#ffd46f}.captain-v3-role.mid{background:rgba(157,103,255,.12);color:#c8a7ff}.captain-v3-role.lead{background:rgba(80,237,177,.1);color:#76efbf} .captain-v3-identity{display:flex;align-items:center;gap:10px;min-width:0}.captain-v3-identity .tier-emblem{flex:0 0 auto}.captain-v3-identity>div{min-width:0}.captain-v3-identity b,.captain-v3-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.captain-v3-identity b{font-size:15px}.captain-v3-identity small{margin-top:3px;color:#849bb4;font-size:10px}.captain-v3-tier-fallback{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--tier),transparent 80%);color:var(--tier);border:1px solid color-mix(in srgb,var(--tier),transparent 55%)}.captain-v3-member-power{display:flex;align-items:end;justify-content:space-between;margin-top:14px}.captain-v3-member-power span{color:#7189a2;font-size:8px;letter-spacing:1.3px}.captain-v3-member-power strong{font-size:18px;color:#eafaff} .captain-v3-rename{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid rgba(255,206,92,.14);border-radius:16px;background:rgba(255,194,57,.035)}.captain-v3-rename>div b,.captain-v3-rename>div small{display:block}.captain-v3-rename input{min-width:0}.captain-v3-rename button{min-height:43px;border-radius:12px;background:#263c58;color:#eaf8ff;border:1px solid rgba(255,255,255,.1);padding:0 18px} .captain-v3-control-row{display:grid;grid-template-columns:minmax(270px,360px) 1fr;gap:14px;margin-top:18px}.captain-v3-energy{padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(28,168,213,.1),rgba(94,83,219,.09));border:1px solid rgba(96,230,255,.18)}.captain-v3-energy-head{display:flex;align-items:end;justify-content:space-between}.captain-v3-energy-head span{color:#8fb1c8;font-size:9px;letter-spacing:1.5px}.captain-v3-energy-head b{font-size:28px;color:#7cecff}.captain-v3-energy-head b small{font-size:12px;color:#8095aa}.captain-v3-energy-pips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:11px 0 8px}.captain-v3-energy-pips i{height:7px;border-radius:99px;background:#1c3046}.captain-v3-energy-pips i.on{background:linear-gradient(90deg,#42d7ed,#7f8cff);box-shadow:0 0 13px rgba(76,221,245,.5)}.captain-v3-energy p{margin:0;color:#8199b2;font-size:10px}.captain-v3-shortcuts{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.captain-v3-shortcuts .text-btn{min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.03)} .captain-v3-matchboard{margin-top:16px;padding:26px}.captain-v3-matchboard>header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.captain-v3-matchboard h2{margin:5px 0 4px;font-size:30px}.captain-v3-matchboard header p{margin:0;color:#8fa5bd;max-width:720px}.captain-v3-format{display:flex;align-items:center;gap:8px}.captain-v3-format b{font-size:34px;color:#6ee9ff}.captain-v3-format i{font-style:normal;color:#697f97;font-size:12px}.captain-v3-rivals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}.captain-v3-rival{position:relative;overflow:hidden;padding:18px;border-radius:21px;border:1px solid rgba(255,255,255,.075);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(0,0,0,.08));transition:.25s}.captain-v3-rival:hover{transform:translateY(-3px);border-color:rgba(105,231,255,.27);box-shadow:0 18px 40px rgba(0,0,0,.2)}.captain-v3-rival>header{display:flex;align-items:start;justify-content:space-between;gap:12px}.captain-v3-rival>header h3{margin:3px 0;font-size:22px}.captain-v3-rival>header p{margin:0;color:#7f97af;font-size:11px}.captain-v3-rival>header>strong{font-size:24px;text-align:right;color:#e7faff}.captain-v3-rival>header>strong small{display:block;color:#6f879f;font-size:8px;letter-spacing:1.1px}.captain-v3-rival-power{display:flex;align-items:end;justify-content:space-between;margin:16px 0 0;padding:11px 12px;border-radius:13px;background:rgba(0,0,0,.16)}.captain-v3-rival-power span{color:#748ba3;font-size:8px;letter-spacing:1.2px}.captain-v3-rival-power b{color:#7cecff;font-size:18px}.captain-v3-rival-roster{margin:12px 0}.captain-v3-rival-roster .captain-v3-member-power{display:none}.captain-v3-rival-roster .captain-v3-identity small{display:none}.captain-v3-rival-rule{display:flex;align-items:center;gap:9px;margin:10px 0 14px;color:#8197ad;font-size:10px}.captain-v3-rival-rule i{padding:4px 7px;border-radius:6px;background:rgba(123,101,255,.12);color:#b3a5ff;font-style:normal;font-size:8px;font-weight:1000}.captain-v3-fight{width:100%;min-height:48px;background:linear-gradient(135deg,#194965,#4c3e90)!important;border:1px solid rgba(108,229,255,.2)!important}.captain-v3-fight:not(:disabled):hover{background:linear-gradient(135deg,#1c6685,#6150b6)!important} .captain-v3-subpage{padding:26px}.captain-v3-subhead{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.captain-v3-subhead .text-btn{flex:0 0 auto}.captain-v3-subhead h2{margin:4px 0;font-size:30px}.captain-v3-subhead p{margin:0;color:#8098b1}.captain-v3-log-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.captain-v3-log-grid>section{padding:15px;border-radius:18px;background:rgba(255,255,255,.027);border:1px solid rgba(255,255,255,.055)}.captain-v3-log-grid>section>h3{margin:0 0 10px}.captain-v3-log-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:13px 8px;border-top:1px solid rgba(255,255,255,.06)}.captain-v3-log-row:first-of-type{border-top:0}.captain-v3-log-result b,.captain-v3-log-result span{display:block}.captain-v3-log-result b{font-size:14px}.captain-v3-log-row.win .captain-v3-log-result b{color:#68efaf}.captain-v3-log-row.lose .captain-v3-log-result b{color:#ff768b}.captain-v3-log-result span{color:#70869d;font-size:8px}.captain-v3-log-row h3{margin:0 0 3px;font-size:14px}.captain-v3-log-row p,.captain-v3-log-row small{display:block;margin:0;color:#7f96ad;font-size:9px}.captain-v3-log-row>strong{font-size:12px;color:#cbefff}.captain-v3-ranking article{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:14px;padding:15px;border-bottom:1px solid rgba(255,255,255,.06)}.captain-v3-ranking article.mine{border-radius:15px;background:rgba(71,216,244,.07);border:1px solid rgba(89,225,255,.14)}.captain-v3-ranking article>em{font-style:normal;font-size:24px;font-weight:1000;color:#7cecff}.captain-v3-rank-team b,.captain-v3-rank-team small,.captain-v3-rank-record span,.captain-v3-rank-record strong{display:block}.captain-v3-rank-team small,.captain-v3-rank-record span{color:#7f95ac;font-size:10px}.captain-v3-rank-record{text-align:right}.captain-v3-rank-record strong{font-size:20px;color:#e7faff} .captain-v3-loading,.captain-v3-empty{min-height:200px;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;color:#8198b0}.captain-v3-loading i,.captain-v3-match-loading i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(93,229,255,.15);border-top-color:#65e7ff;animation:captainV3Spin .8s linear infinite}@keyframes captainV3Spin{to{transform:rotate(1turn)}}.captain-v3-empty.error b,.captain-v3-empty.error span{display:block}.captain-v3-empty.error b{color:#ff8b9e;font-size:17px}.captain-v3-empty.error .text-btn{margin-top:8px} .captain-v3-battle-modal{padding:0!important;background:rgba(0,3,11,.985)!important;z-index:99999!important}.captain-v3-battle-stage{position:relative;width:min(1440px,100vw);min-height:100vh;padding:20px 28px 28px;overflow:hidden;background:#040815;color:#edfaff}.captain-v3-battle-bg{position:absolute;inset:0;background:radial-gradient(circle at 22% 52%,rgba(29,167,222,.2),transparent 30%),radial-gradient(circle at 78% 52%,rgba(112,63,222,.22),transparent 30%),linear-gradient(135deg,#020714,#0b1025 52%,#090617);pointer-events:none}.captain-v3-battle-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(93,216,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(93,216,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent,black 22%,black 78%,transparent)} .captain-v3-match-loading{position:relative;z-index:2;min-height:calc(100vh - 48px);display:grid;place-items:center;align-content:center;text-align:center}.captain-v3-match-loading small{margin-top:15px;color:#65e8ff;letter-spacing:2.5px}.captain-v3-match-loading h2{margin:8px 0;font-size:clamp(28px,5vw,52px)}.captain-v3-match-loading p{margin:0;color:#8fa7be} .captain-v3-battle-header{position:relative;z-index:2;height:38px;display:flex;align-items:center;justify-content:space-between;color:#6eeaff;font-size:10px;font-weight:900;letter-spacing:1.8px}.captain-v3-battle-header b{color:#ffd56b}.captain-v3-battle-lineups{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:5px}.captain-v3-lineup{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}.captain-v3-lineup.defender{grid-template-columns:1fr auto}.captain-v3-lineup.defender .captain-v3-lineup-name{order:2;text-align:right}.captain-v3-lineup-name small,.captain-v3-lineup-name b{display:block}.captain-v3-lineup-name small{color:#7088a2;font-size:8px;letter-spacing:1.5px}.captain-v3-lineup-name b{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.captain-v3-lineup-members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.captain-v3-lineup-chip{min-width:0;padding:7px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.035);display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:5px;transition:.25s}.captain-v3-lineup-chip>span{display:grid;place-items:center;width:17px;height:17px;border-radius:5px;background:#15273b;color:#7890a9;font-size:8px}.captain-v3-lineup-chip .tier-emblem{width:26px!important;height:26px!important}.captain-v3-lineup-chip b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.captain-v3-lineup-chip em{grid-column:1/-1;text-align:right;font-style:normal;font-size:7px;color:#758ba1}.captain-v3-lineup-chip.active{border-color:rgba(255,207,82,.48);background:rgba(255,190,50,.08);box-shadow:0 0 22px rgba(255,190,50,.1)}.captain-v3-lineup-chip.active em{color:#ffd56e}.captain-v3-lineup-chip.down{opacity:.36;filter:grayscale(1)}.captain-v3-lineup-chip.down em{color:#ff7189} .captain-v3-duel-board{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);align-items:center;gap:16px;min-height:calc(100vh - 160px);padding-top:8px}.captain-v3-fighter-panel{position:relative;min-width:0;padding:20px 18px 24px;border:1px solid rgba(255,255,255,.075);border-radius:25px;background:linear-gradient(145deg,rgba(7,24,46,.8),rgba(7,10,27,.65));box-shadow:0 20px 60px rgba(0,0,0,.24);transition:.3s}.captain-v3-fighter-panel.defender{background:linear-gradient(215deg,rgba(47,20,72,.72),rgba(7,10,27,.65))}.captain-v3-fighter-panel.hit{animation:captainV3Hit .28s ease}.captain-v3-fighter-panel.winner{border-color:rgba(255,215,101,.55);box-shadow:0 0 50px rgba(255,179,50,.13)}.captain-v3-fighter-panel.down{opacity:.43;filter:grayscale(.72);transform:scale(.97)}@keyframes captainV3Hit{33%{transform:translateX(-8px)}66%{transform:translateX(7px)}}.captain-v3-fighter-panel.defender.hit{animation-name:captainV3HitRight}@keyframes captainV3HitRight{33%{transform:translateX(8px)}66%{transform:translateX(-7px)}} .captain-v3-fighter-title{display:flex;align-items:center;gap:11px}.captain-v3-fighter-title .tier-emblem{flex:0 0 auto}.captain-v3-fighter-title small{display:block;color:#7590a7;font-size:9px}.captain-v3-fighter-title h3{margin:2px 0 0;font-size:23px}.captain-v3-duel-hp{margin:14px 0 18px}.captain-v3-duel-hp>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.captain-v3-duel-hp>div b{font-size:10px}.captain-v3-duel-hp>div span{font-size:10px;color:#73e9ff}.captain-v3-hp-track{position:relative;height:16px;border-radius:99px;background:#111d2b;overflow:hidden;box-shadow:inset 0 1px 4px rgba(0,0,0,.6)}.captain-v3-hp-track i,.captain-v3-hp-track u{position:absolute;inset:0 auto 0 0;border-radius:inherit;transition:width .42s ease}.captain-v3-hp-track u{background:rgba(255,98,120,.35);transition-delay:.18s}.captain-v3-hp-track i{z-index:2;background:linear-gradient(90deg,#31d7b4,#68e9ff);box-shadow:0 0 18px rgba(74,228,255,.35)}.captain-v3-duel-hp.defender .captain-v3-hp-track i{background:linear-gradient(90deg,#8c77ff,#dd79ff);box-shadow:0 0 18px rgba(178,105,255,.32)}.captain-v3-duel-hp>small{display:block;margin-top:5px;color:#71879e;font-size:8px;letter-spacing:.7px} .captain-v3-battle-deck{display:flex;justify-content:center;align-items:center;min-height:265px}.captain-v3-deck-card{position:relative;width:clamp(72px,8.5vw,128px);margin-left:-19px;transform-origin:50% 90%;transition:.2s;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}.captain-v3-deck-card:first-child{margin-left:0}.captain-v3-deck-card.strike{z-index:20;transform:translateY(-18px) scale(1.08);filter:drop-shadow(0 0 20px rgba(91,229,255,.38))}.captain-v3-fighter-panel.defender .captain-v3-deck-card.strike{filter:drop-shadow(0 0 20px rgba(184,106,255,.38))}.captain-v3-combat-card{width:100%!important;cursor:default!important;transform:none!important}.captain-v3-combat-card .card-inner{padding:5px}.captain-v3-combat-card .card-header{height:18px}.captain-v3-combat-card .card-header span{font-size:9px}.captain-v3-combat-card .card-header b{font-size:6px}.captain-v3-combat-card .card-footer{min-height:37px;padding-top:4px}.captain-v3-combat-card .card-footer small{font-size:6px}.captain-v3-combat-card .card-title{font-size:8px}.captain-v3-combat-card .card-mini-logo{width:16px}.captain-v3-card-fallback{aspect-ratio:2/3;border-radius:13px;padding:6px;background:linear-gradient(145deg,#13243b,#101226);border:1px solid rgba(255,255,255,.12);display:grid;grid-template-rows:auto 1fr auto;gap:5px}.captain-v3-card-grade{font-size:8px;font-weight:1000;color:#73e9ff}.captain-v3-card-art{position:relative;overflow:hidden;border-radius:9px;background:#0a1422;display:grid;place-items:center}.captain-v3-card-art img{width:100%;height:100%;object-fit:cover}.captain-v3-card-art span{position:absolute;color:#5c7894;font-size:26px;font-weight:1000}.captain-v3-card-fallback>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.captain-image-failed:after{content:"NO IMAGE";position:absolute;inset:0;display:grid;place-items:center;color:#637b91;font-size:7px;font-weight:900;letter-spacing:1px} .captain-v3-duel-center{text-align:center}.captain-v3-duel-center small,.captain-v3-duel-center strong,.captain-v3-duel-center i,.captain-v3-duel-center span{display:block}.captain-v3-duel-center small{color:#7188a0;font-size:8px;letter-spacing:1.8px}.captain-v3-duel-center strong{font-size:48px;line-height:1;color:#6de9ff}.captain-v3-duel-center i{margin:9px 0;color:#ffd469;font-style:normal;font-size:25px;font-weight:1000;text-shadow:0 0 20px rgba(255,181,54,.4)}.captain-v3-duel-center span{color:#eafaff;font-size:10px;font-weight:1000;letter-spacing:2px} .captain-v3-round-banner{position:absolute;z-index:15;left:50%;top:50%;width:min(520px,86vw);padding:18px 22px;border-radius:20px;border:1px solid rgba(108,232,255,.23);background:rgba(4,12,27,.93);backdrop-filter:blur(14px);transform:translate(-50%,-50%);text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.45);transition:.3s}.captain-v3-round-banner.hide{opacity:0;transform:translate(-50%,-45%) scale(.94);pointer-events:none}.captain-v3-round-banner.result{border-color:rgba(255,205,83,.32)}.captain-v3-round-banner span,.captain-v3-round-banner b{display:block}.captain-v3-round-banner span{color:#71eaff;font-size:9px;letter-spacing:2px}.captain-v3-round-banner b{margin-top:5px;font-size:20px}.captain-v3-round-banner b i{color:#ffd368;font-style:normal;margin:0 8px} .captain-v3-final{position:relative;z-index:2;min-height:calc(100vh - 48px);display:grid;place-items:center;align-content:center;text-align:center}.captain-v3-final>small{color:#6fe9ff;letter-spacing:2.5px}.captain-v3-final-emblem{margin-top:20px;font-size:clamp(68px,14vw,150px);line-height:.8;font-weight:1000;letter-spacing:-8px;color:#70efbd;text-shadow:0 0 52px rgba(65,234,177,.25)}.captain-v3-final.defeat .captain-v3-final-emblem{color:#ff7189;text-shadow:0 0 52px rgba(255,76,111,.2)}.captain-v3-final h2{margin:24px 0 8px;font-size:clamp(30px,5vw,54px)}.captain-v3-final p{margin:0;color:#91a9c0}.captain-v3-final p b{color:#fff}.captain-v3-score-change{display:flex;align-items:center;gap:13px;margin:25px 0 20px;padding:15px 22px;border-radius:17px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.captain-v3-score-change span{color:#788fa6;font-size:18px}.captain-v3-score-change i{color:#617990;font-style:normal}.captain-v3-score-change strong{font-size:28px;color:#eafaff}.captain-v3-score-change em{padding:5px 8px;border-radius:8px;background:rgba(73,226,177,.1);color:#6eeebc;font-style:normal;font-size:11px}.captain-v3-final.defeat .captain-v3-score-change em{background:rgba(255,84,111,.1);color:#ff8094}.captain-v3-final-actions{display:flex;gap:10px;align-items:center}.captain-v3-final-actions .btn{min-width:240px}.captain-v3-final-actions .text-btn{min-height:46px;padding:0 16px} @media(max-width:1050px){.captain-v3-rivals{grid-template-columns:1fr}.captain-v3-battle-stage{padding:14px}.captain-v3-duel-board{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr)}.captain-v3-battle-lineups{gap:18px}.captain-v3-lineup{grid-template-columns:1fr}.captain-v3-lineup.defender{grid-template-columns:1fr}.captain-v3-lineup.defender .captain-v3-lineup-name{order:0;text-align:right}.captain-v3-lineup-name{display:none}.captain-v3-battle-deck{min-height:220px}.captain-v3-deck-card{margin-left:-16px}} @media(max-width:780px){.captain-v3-hero,.captain-v3-command,.captain-v3-matchboard,.captain-v3-subpage{padding:20px;border-radius:20px}.captain-v3-hero{padding-top:42px}.captain-v3-rule-flow{grid-template-columns:1fr;gap:8px}.captain-v3-rule-flow>i{transform:rotate(90deg)}.captain-v3-rule-flow article{min-height:104px}.captain-v3-team-header,.captain-v3-matchboard>header{align-items:flex-start;flex-direction:column}.captain-v3-team-score{text-align:left}.captain-v3-team-roster,.captain-v3-rival-roster{grid-template-columns:1fr}.captain-v3-rival-roster{grid-template-columns:repeat(3,minmax(0,1fr))}.captain-v3-rival-roster .captain-v3-member{padding:8px}.captain-v3-rival-roster .captain-v3-member-top,.captain-v3-rival-roster .captain-v3-identity small{display:none}.captain-v3-rival-roster .captain-v3-identity{display:block;text-align:center}.captain-v3-rival-roster .captain-v3-identity .tier-emblem{margin:0 auto 4px}.captain-v3-rival-roster .captain-v3-identity b{font-size:9px}.captain-v3-rename{grid-template-columns:1fr}.captain-v3-control-row{grid-template-columns:1fr}.captain-v3-shortcuts{justify-content:flex-start}.captain-v3-log-grid{grid-template-columns:1fr}.captain-v3-log-row{grid-template-columns:55px 1fr}.captain-v3-log-row>strong{grid-column:2}.captain-v3-battle-stage{padding:8px;min-height:100dvh}.captain-v3-battle-header{padding:0 4px;font-size:7px}.captain-v3-battle-header b{font-size:7px}.captain-v3-battle-lineups{grid-template-columns:1fr 1fr;gap:6px}.captain-v3-lineup-members{gap:3px}.captain-v3-lineup-chip{padding:4px;grid-template-columns:1fr;place-items:center}.captain-v3-lineup-chip>span,.captain-v3-lineup-chip .tier-emblem,.captain-v3-lineup-chip em{display:none}.captain-v3-lineup-chip b{font-size:7px;text-align:center}.captain-v3-duel-board{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:3px;min-height:calc(100dvh - 105px)}.captain-v3-fighter-panel{padding:10px 4px 14px;border-radius:15px}.captain-v3-fighter-title{gap:5px;padding:0 3px}.captain-v3-fighter-title .tier-emblem{width:27px!important;height:27px!important}.captain-v3-fighter-title h3{font-size:12px}.captain-v3-fighter-title small{font-size:7px}.captain-v3-duel-hp{margin:9px 2px 10px}.captain-v3-duel-hp>div b{display:none}.captain-v3-hp-track{height:10px}.captain-v3-duel-hp>small{font-size:5px}.captain-v3-battle-deck{min-height:180px}.captain-v3-deck-card{width:clamp(38px,12vw,63px);margin-left:-11px}.captain-v3-combat-card .card-footer{display:none}.captain-v3-combat-card .card-header{height:13px}.captain-v3-combat-card .card-header span{font-size:6px}.captain-v3-combat-card .card-header b,.captain-v3-combat-card .card-mini-logo{display:none}.captain-v3-duel-center small{font-size:5px}.captain-v3-duel-center strong{font-size:28px}.captain-v3-duel-center i{font-size:15px;margin:5px 0}.captain-v3-duel-center span{font-size:6px}.captain-v3-round-banner{padding:13px}.captain-v3-round-banner b{font-size:14px}.captain-v3-final-actions{flex-direction:column}.captain-v3-final-actions .btn{min-width:min(280px,82vw)}.captain-v3-final-emblem{letter-spacing:-4px}} /* V1081 대장전 BGM / 운영자 테스트 */ .captain-v3-bgm-control{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(78,222,198,.22);border-radius:16px;background:rgba(6,24,30,.88);box-shadow:0 12px 28px rgba(0,0,0,.22)} .captain-v3-bgm-control>div{display:flex;flex-direction:column;min-width:118px}.captain-v3-bgm-control small{font-size:10px;letter-spacing:.16em;color:#6be4d1}.captain-v3-bgm-control b{font-size:12px;color:#dffbf7}.captain-v3-bgm-control button{border:1px solid rgba(107,228,209,.34);border-radius:999px;padding:8px 12px;background:rgba(107,228,209,.1);color:#dffbf7;font-weight:800;cursor:pointer}.captain-v3-bgm-control input[type=range]{flex:1;min-width:90px}.captain-v3-bgm-control>span{width:28px;text-align:right;font-size:12px;color:#a9c9c5}.captain-v3-operator-test{display:block;margin-top:10px;color:#ffd66b;font-weight:800}.captainBgmSource{grid-column:span 2}.captainBgmPreviewActions>div{display:flex;gap:8px} @media(max-width:720px){.captain-v3-bgm-control{display:grid;grid-template-columns:1fr auto;gap:8px 10px}.captain-v3-bgm-control input[type=range]{grid-column:1/2;width:100%}.captain-v3-bgm-control>span{grid-column:2/3}.captainBgmSource{grid-column:span 1}} /* V1082 대장전 승리·정산 보상 */ .captain-v3-victory-reward{display:grid;gap:4px;margin:0 0 18px;padding:14px 18px;border:1px solid rgba(100,238,185,.25);border-radius:16px;background:rgba(56,212,153,.08)} .captain-v3-victory-reward span{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#71edbb}.captain-v3-victory-reward b{font-size:14px;color:#edfff8}.captain-v3-victory-reward.error{border-color:rgba(255,102,126,.3);background:rgba(255,76,106,.08)}.captain-v3-victory-reward.error span{color:#ff8798} /* V1084 대장전 - 기존 PVP 전투 화면 기반 카드별 연전 */ .captain-v4-battle-modal{padding:0!important;background:rgba(0,3,10,.985)!important;z-index:100000!important} .captain-v4-pvp-stage{position:relative;width:min(1500px,100vw)!important;min-height:100vh!important;max-height:none!important;margin:0 auto!important;padding:18px 28px 26px!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:#030713!important;color:#eefaff!important} .captain-v4-pvp-stage .battle-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 21% 48%,rgba(35,179,229,.22),transparent 31%),radial-gradient(circle at 79% 48%,rgba(129,70,232,.23),transparent 31%),linear-gradient(135deg,#020713,#081128 52%,#0b071b);opacity:1} .captain-v4-pvp-stage .battle-backdrop:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(104,223,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(104,223,255,.028) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent 0,black 18%,black 82%,transparent 100%)} .captain-v4-pvp-stage .battle-topline{position:relative;z-index:8;height:34px;padding:0 6px;display:flex;align-items:center;justify-content:space-between;color:#71eaff;font-size:10px;font-weight:950;letter-spacing:1.8px} .captain-v4-pvp-stage .battle-topline b{color:#ffd46a} .captain-v4-skip{position:absolute;z-index:20;right:28px;top:52px;min-height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(4,14,29,.78);color:#a8bfd4;font-size:10px;font-weight:800;cursor:pointer;backdrop-filter:blur(10px)} .captain-v4-skip:hover{border-color:rgba(112,232,255,.35);color:#ecfbff} .captain-v4-lineups{position:relative;z-index:7;margin:4px 0 8px;padding-right:118px} .captain-v4-hud{position:relative;z-index:7;margin-top:6px} .captain-v4-hud .battle-hp{min-width:0} .captain-v4-hud .battle-hp small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .captain-v4-arena{position:relative;z-index:6;min-height:calc(100vh - 190px);padding:10px 0 18px;display:grid!important;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)!important;align-items:center!important;gap:14px!important} .captain-v4-side{position:relative;min-width:0;padding:18px 16px 20px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(145deg,rgba(8,28,52,.84),rgba(6,10,24,.74));box-shadow:0 22px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);transition:.25s} .captain-v4-side.enemy-side{background:linear-gradient(215deg,rgba(50,22,78,.82),rgba(7,9,24,.74))} .captain-v4-side.hit{animation:captainV4HitLeft .22s ease} .captain-v4-side.enemy-side.hit{animation-name:captainV4HitRight} @keyframes captainV4HitLeft{35%{transform:translateX(-8px)}70%{transform:translateX(6px)}} @keyframes captainV4HitRight{35%{transform:translateX(8px)}70%{transform:translateX(-6px)}} .captain-v4-side.captain-v4-winner{border-color:rgba(255,211,91,.55);box-shadow:0 0 52px rgba(255,188,51,.13),0 22px 70px rgba(0,0,0,.3)} .captain-v4-side.captain-v4-user-down{opacity:.42;filter:grayscale(.78);transform:scale(.975)} .captain-v4-user-title{display:flex;align-items:center;gap:10px;margin:0 4px 12px} .captain-v4-user-title.defender{justify-content:flex-end;text-align:right} .captain-v4-user-title.defender .tier-emblem,.captain-v4-user-title.defender .captain-v3-tier-fallback{order:2} .captain-v4-user-title small,.captain-v4-user-title b{display:block} .captain-v4-user-title small{color:#7690a9;font-size:9px;letter-spacing:1px} .captain-v4-user-title b{margin-top:2px;font-size:22px;color:#f2fbff} .captain-v4-center{display:grid;place-items:center;align-content:center;gap:7px;text-align:center} .captain-v4-center .battle-vs-mark{font-size:34px!important;color:#ffd36a;text-shadow:0 0 24px rgba(255,188,54,.38)} .captain-v4-center #battleCountdown{min-height:20px;color:#75eaff;font-size:11px;font-weight:950;letter-spacing:2px} .captain-v4-center em{max-width:100px;color:#71869b;font-style:normal;font-size:8px;line-height:1.45} .captain-v4-pvp-deck{display:flex!important;justify-content:center!important;align-items:flex-end!important;min-height:310px!important;padding:8px 0 4px} .captain-v4-card-slot{position:relative;width:clamp(78px,8.7vw,132px);margin-left:-20px;transform-origin:50% 92%;transition:transform .18s ease,filter .18s ease,opacity .2s ease;filter:drop-shadow(0 14px 20px rgba(0,0,0,.28))} .captain-v4-card-slot:first-child{margin-left:0} .captain-v4-card-slot .battle-card-fighter{width:100%;transform:none!important} .captain-v4-card-slot .battle-fighter-card{width:100%!important;cursor:default!important;transform:none!important} .captain-v4-card-slot.is-attacking{z-index:30;transform:translateY(-22px) scale(1.075);filter:drop-shadow(0 0 24px rgba(87,231,255,.44))} .enemy-side .captain-v4-card-slot.is-attacking{filter:drop-shadow(0 0 24px rgba(193,112,255,.45))} .captain-v4-card-slot.is-down{opacity:.26;filter:grayscale(1) brightness(.55);transform:translateY(7px) scale(.96)} .captain-v4-card-slot.is-down:after{content:"탈락";position:absolute;z-index:10;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-9deg);padding:4px 8px;border:2px solid rgba(255,104,127,.86);border-radius:6px;color:#ff7b91;background:rgba(20,3,9,.76);font-size:10px;font-weight:1000;letter-spacing:1px} .captain-v4-card-hp{position:relative;z-index:8;height:7px;margin:5px 7px 0;border-radius:99px;overflow:hidden;background:#121c29;box-shadow:inset 0 1px 3px rgba(0,0,0,.75)} .captain-v4-card-hp i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#36d3ae,#6beaff);box-shadow:0 0 10px rgba(83,227,255,.35);transition:width .18s ease} .enemy-side .captain-v4-card-hp i{background:linear-gradient(90deg,#8775ff,#db79ff);box-shadow:0 0 10px rgba(183,103,255,.32)} .captain-v4-card-state{display:flex;align-items:center;justify-content:space-between;margin:4px 7px 0;color:#71879c;font-size:7px} .captain-v4-card-state b{color:#c8f6ff;font-size:8px} .captain-v4-card-slot.is-down .captain-v4-card-state b{color:#ff7e92} .captain-v4-round-notice{position:absolute;z-index:40;left:50%;top:50%;width:min(560px,88vw);padding:18px 22px;border:1px solid rgba(105,231,255,.25);border-radius:20px;background:rgba(3,12,27,.94);box-shadow:0 28px 90px rgba(0,0,0,.52);backdrop-filter:blur(16px);transform:translate(-50%,-50%);text-align:center;transition:.28s ease} .captain-v4-round-notice.hide{opacity:0;transform:translate(-50%,-45%) scale(.94);pointer-events:none} .captain-v4-round-notice.result{border-color:rgba(255,207,89,.38)} .captain-v4-round-notice small,.captain-v4-round-notice b,.captain-v4-round-notice span{display:block} .captain-v4-round-notice small{color:#70eaff;font-size:9px;font-weight:900;letter-spacing:2px} .captain-v4-round-notice b{margin:6px 0 4px;font-size:21px} .captain-v4-round-notice b i{margin:0 8px;color:#ffd369;font-style:normal} .captain-v4-round-notice span{color:#8fa7bd;font-size:11px} .captain-v4-survivor-deck{display:flex;justify-content:center;align-items:flex-end;min-height:160px;margin:18px 0 4px} .captain-v4-survivor-deck .captain-v4-card-slot{width:clamp(58px,7vw,92px);margin-left:-15px} .captain-v4-survivor-deck .battle-card-fighter{transform:none!important} @media(max-width:1050px){ .captain-v4-pvp-stage{padding:12px 14px 18px!important} .captain-v4-skip{right:14px;top:45px} .captain-v4-lineups{padding-right:104px} .captain-v4-arena{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr)!important;gap:7px!important} .captain-v4-pvp-deck{min-height:250px!important} .captain-v4-card-slot{margin-left:-17px} } @media(max-width:780px){ .captain-v4-pvp-stage{padding:8px 6px 12px!important;min-height:100dvh!important} .captain-v4-pvp-stage .battle-topline{height:28px;font-size:7px;padding:0 3px} .captain-v4-skip{right:7px;top:33px;min-height:28px;padding:0 8px;font-size:8px} .captain-v4-lineups{padding-right:84px;margin-top:2px} .captain-v4-lineups .captain-v3-lineup-chip{padding:4px 3px} .captain-v4-hud{margin-top:4px;gap:6px} .captain-v4-hud .battle-hp-head b{font-size:9px} .captain-v4-hud .battle-hp-head span{font-size:8px} .captain-v4-hud .battle-hp small{font-size:6px} .captain-v4-arena{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)!important;gap:2px!important;min-height:calc(100dvh - 154px);padding-top:4px} .captain-v4-side{padding:9px 3px 11px;border-radius:15px} .captain-v4-user-title{gap:4px;margin:0 3px 6px} .captain-v4-user-title .tier-emblem,.captain-v4-user-title .captain-v3-tier-fallback{width:25px!important;height:25px!important} .captain-v4-user-title small{font-size:6px}.captain-v4-user-title b{font-size:11px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .captain-v4-center .battle-vs-mark{font-size:17px!important}.captain-v4-center #battleCountdown{font-size:6px;letter-spacing:.5px}.captain-v4-center em{display:none} .captain-v4-pvp-deck{min-height:180px!important;padding-top:3px} .captain-v4-card-slot{width:clamp(39px,12vw,62px);margin-left:-11px} .captain-v4-card-slot.is-attacking{transform:translateY(-11px) scale(1.05)} .captain-v4-card-slot.is-down:after{padding:2px 4px;border-width:1px;font-size:6px} .captain-v4-card-hp{height:4px;margin:2px 3px 0}.captain-v4-card-state{margin:2px 3px 0;font-size:5px}.captain-v4-card-state b{font-size:5px} .captain-v4-card-slot .card-footer{display:none}.captain-v4-card-slot .card-header{height:13px}.captain-v4-card-slot .card-header span{font-size:6px}.captain-v4-card-slot .card-header b,.captain-v4-card-slot .card-mini-logo{display:none} .captain-v4-round-notice{padding:12px 13px}.captain-v4-round-notice b{font-size:14px}.captain-v4-round-notice span{font-size:8px} .captain-v4-survivor-deck{min-height:110px}.captain-v4-survivor-deck .captain-v4-card-slot{width:52px;margin-left:-10px} } /* V1094 마법카드 시스템 1차 기반 */ .magic-crystal-value{display:flex!important;align-items:center;gap:5px;margin-top:5px;color:#d6b6ff!important;font-size:11px!important;letter-spacing:0!important}.magic-crystal-value i{font-style:normal;color:#c184ff;text-shadow:0 0 12px rgba(180,116,255,.8)}.magic-main-tab{color:#d7b8ff}.magic-main-tab.active{background:linear-gradient(135deg,#7a3de2,#b04cff)} .magic-lab-hero{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:28px 30px;margin-bottom:16px;border:1px solid rgba(176,93,255,.42);border-radius:22px;background:radial-gradient(circle at 82% 42%,rgba(173,86,255,.24),transparent 30%),linear-gradient(135deg,rgba(25,12,61,.96),rgba(6,18,48,.95));box-shadow:inset 0 0 50px rgba(168,73,255,.08)}.magic-lab-hero h2{margin:5px 0 9px;font-size:36px}.magic-lab-hero p:last-child{margin:0;color:#afc9dc;line-height:1.65}.magic-balance-card{min-width:245px;padding:18px 22px;border:1px solid rgba(202,151,255,.35);border-radius:18px;background:rgba(34,13,71,.72);text-align:right}.magic-balance-card span,.magic-balance-card small{display:block;color:#b99bd8}.magic-balance-card b{display:block;margin:7px 0;font-size:28px;color:#dfc4ff;text-shadow:0 0 22px rgba(187,99,255,.5)} .magic-system-root{position:relative;z-index:2}.magic-deck-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;padding:6px;border:1px solid rgba(166,94,255,.25);border-radius:15px;background:rgba(3,9,28,.75)}.magic-deck-tabs button{border:0;border-radius:10px;padding:13px;color:#aebfd1;background:transparent;font-weight:1000;cursor:pointer}.magic-deck-tabs button.active{color:#fff;background:linear-gradient(135deg,#6835cf,#a34dff);box-shadow:0 10px 25px rgba(118,49,221,.28)}.magic-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.65fr);gap:16px}.magic-loadout-panel,.magic-draw-panel,.magic-inventory-panel{padding:22px;border:1px solid rgba(137,104,229,.27);border-radius:20px;background:linear-gradient(180deg,rgba(11,26,62,.92),rgba(5,13,36,.94))}.magic-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}.magic-section-head h2{margin:4px 0}.magic-section-head p:last-child{margin:5px 0 0;color:#86a7bd}.magic-section-head>span{color:#c7a5f3;font-weight:900}.magic-slot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.magic-slot{position:relative;min-width:0;min-height:205px;padding:9px;border:1px dashed rgba(178,116,255,.35);border-radius:15px;background:rgba(6,15,39,.78);color:#dcefff;cursor:pointer;overflow:hidden}.magic-slot:hover,.magic-slot.selected{border-style:solid;border-color:#c084ff;box-shadow:0 0 0 2px rgba(187,105,255,.16),0 0 28px rgba(137,67,225,.15)}.magic-slot>em{position:absolute;z-index:2;left:8px;top:8px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#7b3dd1;color:#fff;font-style:normal;font-size:11px;font-weight:1000}.magic-slot>i{display:block;margin-top:58px;color:#b473ff;font-size:38px;font-style:normal}.magic-slot>b,.magic-slot>small{display:block;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.magic-slot>small{color:#829eb2;font-size:10px}.magic-card-art{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:3/4;border-radius:11px;overflow:hidden;background:radial-gradient(circle,#7541b4,#17102c 72%);box-shadow:inset 0 0 25px rgba(255,255,255,.08)}.magic-card-art img{width:100%;height:100%;object-fit:cover}.magic-card-art span{position:absolute;color:#e1c4ff;font-size:34px;text-shadow:0 0 15px #9d4fff}.magic-card-art:not(.empty) span{display:none}.magic-slot .magic-card-art{margin-top:8px}.magic-unequip{width:100%;margin-top:12px;padding:11px;border:1px solid rgba(186,120,255,.28);border-radius:11px;background:rgba(104,48,164,.16);color:#d9c1f4;font-weight:900}.magic-unequip:disabled{opacity:.35}.magic-draw-panel{display:flex;flex-direction:column;align-items:stretch;justify-content:center;text-align:center}.magic-draw-panel h2{margin:5px 0 10px}.magic-draw-panel>p:not(.eyebrow){color:#9cb4c5;line-height:1.6}.magic-draw-cost{margin:16px 0;padding:14px;border:1px solid rgba(184,118,255,.3);border-radius:14px;background:rgba(56,18,94,.38)}.magic-draw-cost span{display:block;color:#ae95c9;font-size:11px}.magic-draw-cost b{display:block;margin-top:4px;font-size:24px;color:#dfc1ff}.magic-draw-panel>small{margin-top:12px;color:#768fa4;line-height:1.5}.magic-inventory-panel{margin-top:16px}.magic-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.magic-card-tile{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px;border:1px solid rgba(137,104,229,.24);border-radius:16px;background:rgba(4,12,32,.76)}.magic-card-tile.locked{filter:saturate(.3);opacity:.55}.magic-card-tile .magic-card-art{width:92px}.magic-card-tile h3{margin:3px 0 6px}.magic-card-tile p{margin:0;color:#9db5c7;font-size:12px;line-height:1.45}.magic-card-tile div>span{color:#c187ff;font-size:10px;font-weight:1000}.magic-card-tile div>small{display:block;margin-top:8px;color:#718da3;font-size:10px}.magic-card-tile footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid rgba(139,104,221,.18)}.magic-card-tile footer b{font-size:12px;color:#d1b4f3}.magic-card-tile footer button{padding:8px 10px;border:0;border-radius:9px;background:#713ac4;color:#fff;font-size:11px;font-weight:900}.magic-card-tile footer button:disabled{background:#263249;color:#728397}.magic-empty-collection,.magic-closed-panel{grid-column:1/-1;min-height:190px;display:grid;place-content:center;text-align:center;color:#8098ad;line-height:1.7}.magic-closed-panel{padding:30px;border:1px solid rgba(142,99,211,.25);border-radius:20px;background:rgba(5,14,35,.8)}.magic-closed-panel b{font-size:21px;color:#d8c3ef}.magic-closed-panel span{margin-top:7px} @media(max-width:900px){.magic-layout{grid-template-columns:1fr}.magic-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.magic-slot-grid{grid-template-columns:repeat(5,minmax(105px,1fr));overflow-x:auto;padding-bottom:7px}.magic-slot{min-height:185px}} @media(max-width:620px){.magic-lab-hero{display:block;padding:20px}.magic-lab-hero h2{font-size:29px}.magic-balance-card{min-width:0;margin-top:16px;text-align:left}.magic-deck-tabs{grid-template-columns:1fr}.magic-loadout-panel,.magic-draw-panel,.magic-inventory-panel{padding:15px}.magic-card-grid{grid-template-columns:1fr}.magic-card-tile{grid-template-columns:78px 1fr}.magic-card-tile .magic-card-art{width:78px}.summary-bar>div:nth-child(2){min-height:94px}} .summary-bar>div:nth-child(2){min-height:96px} /* V1095 USER MAIN NAV + SUMMARY REDESIGN */ .header{align-items:center;flex-wrap:wrap;gap:14px 22px;padding-right:0} .header .brand{flex:0 0 auto} .main-nav{position:relative;display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));gap:7px;flex:1 1 760px;padding:7px;border:1px solid rgba(98,232,255,.25);border-radius:18px;background:linear-gradient(180deg,rgba(2,13,34,.92),rgba(2,9,25,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 30px rgba(0,0,0,.16)} .main-nav-item{position:relative;min-width:0;min-height:58px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:13px;padding:10px 8px;background:transparent;color:#9ecbe3;font-weight:1000;cursor:pointer;transition:transform .18s,border-color .18s,background .18s,color .18s,box-shadow .18s} .main-nav-item:hover{color:#eafaff;border-color:rgba(98,232,255,.22);background:rgba(98,232,255,.07);transform:translateY(-1px)} .main-nav-item.active,.main-nav-group.active>.main-nav-item{color:#fff;border-color:rgba(119,239,255,.48);background:linear-gradient(135deg,rgba(0,184,255,.96),rgba(49,92,255,.96));box-shadow:0 10px 24px rgba(0,157,255,.26),inset 0 1px 0 rgba(255,255,255,.22)} .main-nav-icon{font-size:15px;color:#76eaff;filter:drop-shadow(0 0 8px rgba(89,224,255,.4))} .main-nav-item.active .main-nav-icon,.main-nav-group.active>.main-nav-item .main-nav-icon{color:#fff} .main-nav-item b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .main-nav-trigger{width:100%} .main-nav-trigger>i{font-style:normal;font-size:13px;opacity:.7;transition:transform .18s} .main-nav-group.open .main-nav-trigger>i{transform:rotate(180deg)} .main-nav-group{position:relative;min-width:0} .main-nav-dropdown{position:absolute;z-index:120;top:calc(100% + 10px);left:50%;width:230px;display:grid;gap:7px;padding:10px;border:1px solid rgba(98,232,255,.32);border-radius:16px;background:rgba(3,13,33,.98);box-shadow:0 20px 50px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.05);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-6px);transition:.18s} .main-nav-group.open .main-nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .main-nav-dropdown button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;border:1px solid rgba(98,232,255,.12);border-radius:11px;padding:11px 13px;background:rgba(255,255,255,.035);color:#e8f8ff;text-align:left;cursor:pointer;transition:.16s} .main-nav-dropdown button:hover{border-color:rgba(98,232,255,.42);background:rgba(0,184,255,.11);transform:translateX(2px)} .main-nav-dropdown button span{font-size:10px;color:#77a9c4} .main-nav-dropdown button b{font-size:14px} .magic-nav-item{color:#d6b9ff}.magic-nav-item .main-nav-icon{color:#c28cff}.magic-nav-item.active{background:linear-gradient(135deg,#7651d9,#315cff)} .summary-bar{grid-template-columns:1.02fr 1.12fr .92fr 1.02fr;gap:14px;margin-bottom:16px} .summary-bar>.summary-card{min-width:0;min-height:126px;margin:0;padding:18px 20px;border:1px solid rgba(98,232,255,.28);border-radius:20px;background:linear-gradient(145deg,rgba(10,39,88,.9),rgba(3,15,38,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 35px rgba(0,184,255,.035),0 14px 32px rgba(0,0,0,.13)} .summary-label{display:block;margin:0 0 12px!important;color:#83bedc!important;font-size:10px!important;font-weight:1000!important;letter-spacing:1.6px!important;text-transform:uppercase} .login-summary{justify-content:center!important} .login-summary-row{display:flex;align-items:center;gap:10px;min-width:0} .login-summary-row b{min-width:0;margin:0!important;font-size:21px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .login-summary-row button{margin-left:auto;flex:0 0 auto;border:0;background:transparent;color:#70e9ff;font-size:12px;font-weight:1000;cursor:pointer} .currency-summary{display:block!important;min-height:126px!important} .currency-list{display:grid;gap:7px} .currency-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:24px} .currency-row i{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:rgba(255,255,255,.055);font-style:normal;font-size:14px} .currency-row span{color:#bad5e5;font-size:12px;font-weight:900;letter-spacing:0} .currency-row b{margin:0!important;font-size:17px!important;line-height:1;font-variant-numeric:tabular-nums;text-align:right} .currency-row.coin i,.currency-row.coin b{color:#76efff}.currency-row.shard i,.currency-row.shard b{color:#d9ef69}.currency-row.crystal i,.currency-row.crystal b{color:#c39aff} .collection-summary{justify-content:center!important} .collection-summary-value{display:flex;align-items:baseline;gap:8px} .collection-summary-value b{margin:0!important;color:#fff;font-size:34px!important;line-height:1} .collection-summary-value i{color:#6387a3;font-style:normal;font-size:18px} .collection-summary-value strong{color:#83b8d3;font-size:21px} .collection-summary>small{margin-top:9px;color:#6f9db7;font-size:11px} .summary-bar>.inventory-summary{position:relative;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:17px;text-align:left;color:#fff;cursor:pointer;border-color:rgba(175,125,255,.5);background:radial-gradient(circle at 100% 0%,rgba(137,80,255,.30),transparent 47%),linear-gradient(145deg,rgba(56,34,115,.95),rgba(18,20,67,.95));transition:transform .18s,border-color .18s,filter .18s} .summary-bar>.inventory-summary:hover{transform:translateY(-2px);border-color:rgba(196,158,255,.78);filter:brightness(1.06)} .inventory-summary-copy{min-width:0;display:flex;flex-direction:column} .inventory-summary-copy .summary-label{margin-bottom:5px!important;color:#c8adff!important} .inventory-summary-copy b{margin:0!important;font-size:22px!important} .inventory-summary-copy em{margin-top:5px;color:#aeb8da;font-size:11px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inventory-bag-icon{flex:0 0 auto} .inventory-summary>strong{position:absolute;top:10px;right:10px;border-radius:999px;padding:4px 7px;background:#8d64ff;color:#fff;font-size:9px} /* 카드팩 화면은 선택과 개봉에 집중하고 중복 대시보드는 노출하지 않는다. */ .game-hero{margin-bottom:0} @media(max-width:1100px){ .header{display:block;padding-bottom:18px} .header .brand{padding-right:130px;margin-bottom:15px} .main-nav{width:100%;grid-template-columns:repeat(7,minmax(78px,1fr))} .main-nav-item{min-height:52px;padding:8px 5px}.main-nav-item b{font-size:12px}.main-nav-icon{font-size:13px} .summary-bar{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:720px){ .page{width:100%;min-height:100vh;margin:0;padding:14px 12px 24px;border-radius:0;border-left:0;border-right:0} .header{margin-bottom:14px;padding-bottom:14px} .header .brand{padding-right:96px;margin-bottom:12px} .brand-logo{width:68px;height:48px}.brand h1{font-size:23px}.brand .eyebrow{font-size:8px!important;letter-spacing:1.3px} .main-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;border-radius:15px} .main-nav-item{min-height:48px;display:grid;grid-template-columns:auto auto;place-content:center;gap:4px 6px;border-radius:11px;padding:7px 4px} .main-nav-item b{font-size:11px}.main-nav-trigger>i{display:none} .main-nav-group{position:static} .main-nav-dropdown{left:6px;right:6px;top:auto;width:auto;margin-top:6px;grid-template-columns:repeat(2,minmax(0,1fr));transform:translateY(-5px)} .main-nav-group.open .main-nav-dropdown{transform:translateY(0)} .main-nav-dropdown button{padding:10px}.main-nav-dropdown button span{font-size:8px}.main-nav-dropdown button b{font-size:12px} .summary-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .summary-bar>.summary-card{min-height:112px!important;padding:13px 12px;border-radius:16px} .summary-label{margin-bottom:9px!important;font-size:8px!important} .login-summary-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px}.login-summary-row b{font-size:16px!important}.login-summary-row button{grid-column:2;margin-left:0;text-align:left;font-size:10px} .currency-list{gap:6px}.currency-row{grid-template-columns:18px minmax(0,1fr) auto;gap:5px}.currency-row i{width:18px;height:18px;font-size:11px}.currency-row span{font-size:9px}.currency-row b{font-size:12px!important} .collection-summary-value{gap:5px}.collection-summary-value b{font-size:27px!important}.collection-summary-value strong{font-size:16px}.collection-summary>small{font-size:8px} .summary-bar>.inventory-summary{gap:9px}.inventory-bag-icon{width:38px;height:38px}.inventory-summary-copy b{font-size:17px!important}.inventory-summary-copy em{font-size:8px} .pack-selector{padding:18px 14px}.pack-selector-head{align-items:flex-start;gap:7px}.pack-selector-head h2{font-size:25px}.pack-selector-head>span{font-size:10px;text-align:right} .pack-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pack-choice{min-width:0;padding:10px}.pack-choice strong{font-size:14px}.pack-choice small{font-size:10px;line-height:1.35}.pack-choice em{font-size:9px} .game-hero{min-height:0;grid-template-columns:1fr;padding:25px 18px}.hero-copy h2{font-size:34px}.hero-pack-zone{min-height:280px}.pack-envelope{transform:scale(.84)} } @media(max-width:420px){ .main-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.main-nav-item{min-height:45px}.main-nav-item b{font-size:10px} .summary-bar{gap:7px}.summary-bar>.summary-card{min-height:106px!important;padding:11px 10px}.currency-row span{font-size:8px}.currency-row b{font-size:11px!important} .pack-list{grid-template-columns:1fr}.pack-choice{display:grid;grid-template-columns:82px 1fr;grid-template-rows:auto auto auto;column-gap:12px;text-align:left}.pack-choice .mini-pack{grid-row:1/4;width:82px}.pack-choice strong,.pack-choice small,.pack-choice em{grid-column:2} .draw-options{display:grid;grid-template-columns:1fr}.draw-options .btn{width:100%} } /* V1096 NAV LAYER + COMPACT STATUS STRIP */ .header{z-index:220;overflow:visible} .main-nav{z-index:230;overflow:visible;isolation:isolate} .main-nav-group{z-index:1} .main-nav-group.open{z-index:250} .main-nav-dropdown{z-index:270;background:linear-gradient(180deg,#061936 0%,#020b1d 100%);box-shadow:0 24px 64px rgba(0,0,0,.72),0 0 0 1px rgba(98,232,255,.08),inset 0 1px 0 rgba(255,255,255,.06)} .summary-bar{z-index:3;gap:10px;margin-bottom:14px} .summary-bar>.summary-card{min-height:104px;padding:13px 15px;border-radius:17px} .summary-label{margin-bottom:8px!important;font-size:9px!important;letter-spacing:1.35px!important} .login-summary-row b{font-size:18px!important} .currency-list{gap:5px} .currency-row{min-height:20px;grid-template-columns:19px minmax(0,1fr) auto;gap:6px} .currency-row i{width:19px;height:19px;border-radius:7px;font-size:12px} .currency-row span{font-size:10px} .currency-row b{font-size:14px!important} .collection-summary-value b{font-size:29px!important} .collection-summary-value strong{font-size:18px} .collection-summary>small{margin-top:6px;font-size:9px} .summary-bar>.inventory-summary{gap:12px} .inventory-bag-icon{width:42px;height:42px} .inventory-summary-copy b{font-size:18px!important} .inventory-summary-copy em{margin-top:3px;font-size:9px} @media(max-width:1100px){ .summary-bar{grid-template-columns:repeat(4,minmax(126px,1fr));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;padding:0 0 5px} .summary-bar>.summary-card{scroll-snap-align:start;min-width:126px} } @media(max-width:720px){ .header{transition:padding-bottom .2s ease} .header.nav-menu-open{padding-bottom:92px} .main-nav{position:relative;z-index:240} .main-nav-group{position:static} .main-nav-dropdown{top:calc(100% + 8px);left:0;right:0;width:auto;margin:0;padding:8px;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;transform:translateY(-5px)} .main-nav-group.open .main-nav-dropdown{transform:translateY(0)} .main-nav-dropdown button{min-height:58px;justify-content:center;padding:8px 10px;background:#071b3b;border-color:rgba(98,232,255,.22)} .main-nav-dropdown button span{font-size:7px}.main-nav-dropdown button b{font-size:11px} .summary-bar{display:grid;grid-template-columns:repeat(4,126px);gap:7px;margin:0 -2px 12px;padding:0 2px 5px} .summary-bar>.summary-card{min-width:126px;min-height:88px!important;padding:9px 10px;border-radius:14px} .summary-label{margin-bottom:5px!important;font-size:7px!important;letter-spacing:1px!important} .login-summary-row{display:grid;grid-template-columns:8px minmax(0,1fr);gap:4px 5px}.login-summary-row b{font-size:13px!important}.login-summary-row button{grid-column:2;margin:0;text-align:left;font-size:8px} .login-dot{width:7px;height:7px} .currency-list{gap:3px}.currency-row{min-height:15px;grid-template-columns:14px minmax(0,1fr) auto;gap:3px}.currency-row i{width:14px;height:14px;border-radius:5px;font-size:8px}.currency-row span{font-size:7px}.currency-row b{font-size:9px!important} .collection-summary-value{gap:3px}.collection-summary-value b{font-size:22px!important}.collection-summary-value i{font-size:11px}.collection-summary-value strong{font-size:13px}.collection-summary>small{margin-top:4px;font-size:6px} .summary-bar>.inventory-summary{gap:6px}.inventory-bag-icon{width:28px;height:28px}.inventory-summary-copy b{font-size:13px!important}.inventory-summary-copy em{font-size:6px}.inventory-summary>strong{top:5px;right:5px;padding:2px 4px;font-size:6px} } @media(max-width:420px){ .header.nav-menu-open{padding-bottom:94px} .summary-bar{grid-template-columns:repeat(4,118px)} .summary-bar>.summary-card{min-width:118px;min-height:84px!important;padding:8px} } /* V1097 MOBILE BATTLE FULLSCREEN + PVP RESULT LAYOUT */ body.battle-screen-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none} /* V1103: 자동전투 중에는 내부/외부 페이지의 세로 스크롤 체인을 허용한다. */ html.auto-battle-screen-open,body.auto-battle-screen-open{overflow-y:auto!important;overscroll-behavior-y:auto!important;touch-action:pan-y!important} body.auto-battle-screen-open .page{visibility:visible!important;pointer-events:auto!important} .modal.auto-battle-modal,.modal.auto-battle-modal .modal-panel.battle-stage{overscroll-behavior-y:auto!important;touch-action:pan-y!important} body.battle-screen-open .page{visibility:hidden!important;pointer-events:none!important} body.battle-screen-open #modal{visibility:visible!important;pointer-events:auto!important} .modal.battle-modal{z-index:100000!important} @media(max-width:800px){ .modal.battle-modal{ position:fixed!important;inset:0!important;width:100dvw!important;height:100dvh!important; min-width:0!important;min-height:100dvh!important;padding:0!important;margin:0!important; align-items:stretch!important;justify-content:stretch!important;overflow:hidden!important; background:#020713!important;backdrop-filter:none!important } .battle-modal .modal-panel.battle-stage{ position:relative!important;inset:auto!important;width:100dvw!important;max-width:none!important; height:100dvh!important;min-height:100dvh!important;max-height:none!important;margin:0!important; padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important } .battle-modal .battle-topline{ top:calc(env(safe-area-inset-top,0px) + 8px)!important;left:10px!important;right:10px!important; min-width:0!important;font-size:8px!important;line-height:1.2!important;letter-spacing:1.15px!important } .battle-modal .battle-topline span,.battle-modal .battle-topline b{ min-width:0;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .battle-modal .battle-hud{ top:calc(env(safe-area-inset-top,0px) + 34px)!important;left:7px!important;right:7px!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important } .battle-modal .battle-hp{min-width:0!important;padding:6px 7px 7px!important;border-radius:12px!important;overflow:hidden!important} .battle-modal .battle-hp-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:4px!important;align-items:center!important;font-size:8px!important} .battle-modal .battle-hp-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left} .battle-modal .battle-hp-enemy .battle-hp-head b{text-align:right} .battle-modal .battle-hp-head span{font-size:7px!important;white-space:nowrap} .battle-modal .battle-hp-track{height:10px!important;margin-top:4px!important} .battle-modal .battle-hp small{margin-top:4px!important;font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .battle-modal .battle-arena{ top:calc(env(safe-area-inset-top,0px) + 100px)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 112px)!important; left:5px!important;right:5px!important;min-height:0!important } .battle-modal .battle-message{ left:8px!important;right:8px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 10px)!important; min-height:76px!important;max-height:46dvh!important;padding:0 5px!important;overflow-y:auto!important; scrollbar-width:none } .battle-modal .battle-message::-webkit-scrollbar{display:none} .battle-modal .battle-message>span{margin-top:7px!important;font-size:11px!important} .battle-modal .battle-message>em{margin-top:7px!important;font-size:8px!important} .battle-modal .battle-sound-toggle{right:7px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 7px)!important;z-index:90!important} .pvp-battle-stage .pvp-arena{ grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr)!important;gap:2px!important } .pvp-battle-stage .battle-side{width:100%!important;min-width:0!important;overflow:visible!important} .pvp-battle-stage .battle-side .battle-team{ width:min(100%,168px)!important;max-width:168px!important;margin:0 auto!important; grid-template-columns:repeat(3,minmax(0,50px))!important;gap:4px 3px!important } .pvp-battle-stage .battle-side .battle-card-fighter{ width:50px!important;height:71px!important;max-width:50px!important;margin:0!important } .pvp-battle-stage .battle-side .battle-card-fighter:nth-child(4), .pvp-battle-stage .battle-side .battle-card-fighter:nth-child(5){transform:translateX(26px)!important} .pvp-battle-stage .battle-card-fighter>.battle-fighter-card{width:50px!important;height:71px!important} .pvp-battle-stage .battle-center .battle-vs-mark{font-size:26px!important} .pvp-battle-stage .battle-center span{font-size:24px!important} .pvp-battle-stage .battle-side>small{margin-top:7px!important;font-size:8px!important;letter-spacing:1px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pvp-enemy-loading{min-height:145px!important;padding:8px!important;font-size:9px!important;text-align:center!important} .pvp-battle-stage.battle-win-v863 .pvp-arena, .pvp-battle-stage.battle-lose-v863 .pvp-arena{ opacity:.14!important;filter:blur(.8px) saturate(.55)!important;transform:scale(.96)!important;pointer-events:none!important;transition:.25s ease!important } .pvp-battle-stage.battle-win-v863 .battle-hud, .pvp-battle-stage.battle-lose-v863 .battle-hud{opacity:.55!important;transition:.25s ease!important} .pvp-battle-stage.battle-win-v863 .battle-message, .pvp-battle-stage.battle-lose-v863 .battle-message{ top:calc(env(safe-area-inset-top,0px) + 118px)!important; bottom:calc(env(safe-area-inset-bottom,0px) + 18px)!important; max-height:none!important;min-height:0!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important;padding:18px 14px!important; border:1px solid rgba(105,220,255,.24)!important;border-radius:20px!important; background:linear-gradient(180deg,rgba(4,19,43,.94),rgba(2,9,25,.97))!important; box-shadow:0 22px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.05)!important; backdrop-filter:blur(10px)!important;overflow-y:auto!important } .pvp-battle-stage.battle-win-v863 .battle-message>strong, .pvp-battle-stage.battle-lose-v863 .battle-message>strong{font-size:clamp(34px,11vw,48px)!important;line-height:1!important} .pvp-battle-stage.battle-win-v863 .battle-message>span, .pvp-battle-stage.battle-lose-v863 .battle-message>span{font-size:12px!important} .pvp-battle-stage .battle-reward-pop{ width:min(330px,100%)!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important; gap:7px 12px!important;margin-top:14px!important;padding:12px 15px!important;border-radius:16px!important } .pvp-battle-stage .battle-reward-pop small{text-align:left!important;font-size:9px!important;letter-spacing:.8px!important} .pvp-battle-stage .battle-reward-pop b{margin:0!important;text-align:right!important;font-size:18px!important;line-height:1!important} .pvp-battle-stage .battle-reward-pop em{grid-column:1/-1!important;margin:0!important;font-size:8px!important} .pvp-battle-stage .pvp-result-confirm{ width:min(330px,100%)!important;min-width:0!important;min-height:48px!important;margin-top:14px!important; padding:12px 16px!important;font-size:14px!important;border-radius:14px!important } .pvp-battle-stage.battle-win-v863 .battle-sound-toggle, .pvp-battle-stage.battle-lose-v863 .battle-sound-toggle{display:none!important} } @media(max-width:380px){ .pvp-battle-stage .battle-side .battle-team{width:min(100%,150px)!important;grid-template-columns:repeat(3,minmax(0,44px))!important} .pvp-battle-stage .battle-side .battle-card-fighter{width:44px!important;height:63px!important;max-width:44px!important} .pvp-battle-stage .battle-card-fighter>.battle-fighter-card{width:44px!important;height:63px!important} .pvp-battle-stage .battle-side .battle-card-fighter:nth-child(4), .pvp-battle-stage .battle-side .battle-card-fighter:nth-child(5){transform:translateX(23px)!important} .pvp-battle-stage.battle-win-v863 .battle-message, .pvp-battle-stage.battle-lose-v863 .battle-message{top:calc(env(safe-area-inset-top,0px) + 108px)!important;padding:14px 11px!important} } @media(max-height:620px) and (orientation:landscape){ .modal.battle-modal,.battle-modal .modal-panel.battle-stage{height:100dvh!important;min-height:100dvh!important} .battle-modal .battle-topline{top:5px!important} .battle-modal .battle-hud{top:25px!important} .battle-modal .battle-arena{top:82px!important;bottom:52px!important} .battle-modal .battle-message{bottom:5px!important;max-height:34dvh!important} .pvp-battle-stage.battle-win-v863 .battle-message, .pvp-battle-stage.battle-lose-v863 .battle-message{top:74px!important;bottom:8px!important;max-width:460px!important;margin:auto!important} } /* V1098 MOBILE BOTTOM NAVIGATION */ .mobile-bottom-nav,.mobile-nav-sheet-layer{display:none} @media(max-width:800px){ body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))} body.mobile-menu-open{overflow:hidden!important;overscroll-behavior:none} .page{padding-bottom:22px} .header{padding-bottom:12px!important} .header .main-nav{display:none!important} .fullscreen-play-link{display:none!important} .mobile-bottom-nav{ position:fixed;z-index:44000;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px)); display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:4px;min-height:66px;padding:6px; border:1px solid rgba(102,226,255,.3);border-radius:20px; background:linear-gradient(180deg,rgba(5,22,50,.97),rgba(2,10,28,.99)); box-shadow:0 18px 55px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px) } .mobile-bottom-item{ min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; border:1px solid transparent;border-radius:14px;background:transparent;color:#82acc5;font-weight:1000;cursor:pointer } .mobile-bottom-item span{display:grid;place-items:center;min-height:18px;font-size:17px;line-height:1;color:#71e6ff;text-shadow:0 0 12px rgba(68,211,255,.45)} .mobile-bottom-item b{max-width:100%;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mobile-bottom-item.active{color:#fff;border-color:rgba(119,239,255,.45);background:linear-gradient(135deg,rgba(0,183,255,.92),rgba(56,89,255,.92));box-shadow:0 9px 22px rgba(0,151,255,.25)} .mobile-bottom-item.active span{color:#fff} .mobile-bottom-primary{margin-top:-15px;min-height:66px;border-color:rgba(113,239,255,.4);background:linear-gradient(145deg,#0b9de2,#315cff);color:#fff;box-shadow:0 12px 28px rgba(0,157,255,.38),0 0 0 5px rgba(3,14,35,.96)} .mobile-bottom-primary span{font-size:22px;color:#fff} .mobile-nav-sheet-layer{position:fixed;z-index:45000;inset:0;display:block;pointer-events:none} .mobile-nav-sheet-layer[hidden]{display:none!important} .mobile-nav-sheet-layer.open{pointer-events:auto} .mobile-nav-sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(0,5,17,.72);opacity:0;transition:opacity .18s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .mobile-nav-sheet-layer.open .mobile-nav-sheet-backdrop{opacity:1} .mobile-nav-sheet{ position:absolute;left:0;right:0;bottom:0;display:none;max-height:min(76dvh,650px);padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px)); border:1px solid rgba(101,224,255,.3);border-bottom:0;border-radius:25px 25px 0 0; background:radial-gradient(circle at 82% 0,rgba(58,99,255,.18),transparent 34%),linear-gradient(180deg,#081d3f,#030b1e 72%); box-shadow:0 -22px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06); overflow-y:auto;transform:translateY(105%);opacity:.65;transition:transform .22s ease,opacity .18s ease } .mobile-nav-sheet.active{display:block} .mobile-nav-sheet-layer.open .mobile-nav-sheet.active{transform:translateY(0);opacity:1} .mobile-nav-sheet:before{content:"";display:block;width:42px;height:4px;margin:-7px auto 14px;border-radius:999px;background:rgba(172,218,240,.38)} .mobile-nav-sheet>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px} .mobile-nav-sheet>header small{display:block;color:#65dfff;font-size:8px;font-weight:1000;letter-spacing:1.7px} .mobile-nav-sheet>header h2{margin:3px 0 4px;font-size:24px;color:#f2fbff} .mobile-nav-sheet>header p{margin:0;color:#7e9cb3;font-size:11px} .mobile-nav-sheet>header>button{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(108,226,255,.22);border-radius:12px;background:rgba(255,255,255,.04);color:#bceeff;font-size:22px} .mobile-sheet-action-list{display:grid;gap:9px} .mobile-sheet-action-list>button,.mobile-reward-hub-button{ width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:74px;padding:11px 13px; border:1px solid rgba(92,207,255,.2);border-radius:17px;background:linear-gradient(135deg,rgba(10,40,83,.88),rgba(4,18,46,.94));color:#eafaff;text-align:left } .mobile-sheet-action-list>button>i,.mobile-reward-hub-button>i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(50,124,255,.17);color:#74e7ff;font-style:normal;font-size:20px} .mobile-sheet-action-list>button span,.mobile-reward-hub-button span{min-width:0} .mobile-sheet-action-list>button b,.mobile-reward-hub-button b{display:block;font-size:15px} .mobile-sheet-action-list>button small,.mobile-reward-hub-button small{display:block;margin-top:4px;color:#7fa4ba;font-size:9px;white-space:normal;line-height:1.35} .mobile-sheet-action-list>button em,.mobile-reward-hub-button em{color:#68dcff;font-size:10px;font-style:normal;font-weight:1000} .mobile-reward-hub-button{margin-bottom:10px;border-color:rgba(170,113,255,.36);background:linear-gradient(135deg,rgba(72,37,137,.86),rgba(11,35,82,.94))} .mobile-reward-hub-button>i{background:rgba(169,98,255,.2);color:#d1a5ff} .mobile-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .mobile-more-grid button{min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(91,201,244,.18);border-radius:16px;background:rgba(6,24,55,.88);color:#dff6ff;font-weight:1000} .mobile-more-grid button i{font-style:normal;font-size:19px;color:#6ee0ff} .mobile-more-grid button b{font-size:12px} .mobile-sheet-back{width:100%;margin-top:12px;padding:12px;border:1px solid rgba(98,214,255,.17);border-radius:14px;background:rgba(255,255,255,.035);color:#9cc9dd;font-weight:900} body.battle-screen-open .mobile-bottom-nav,body.battle-screen-open .mobile-nav-sheet-layer{display:none!important} } @media(max-width:370px){ .mobile-bottom-nav{left:5px;right:5px;gap:2px;padding:5px} .mobile-bottom-item{min-height:51px}.mobile-bottom-item b{font-size:8px}.mobile-bottom-item span{font-size:15px} .mobile-bottom-primary{min-height:62px}.mobile-bottom-primary span{font-size:20px} .mobile-nav-sheet{padding-left:12px;padding-right:12px} } /* V1099 MOBILE IN-FLOW TOP NAV + DESKTOP SUMMARY DENSITY */ @media(min-width:1101px){ .summary-bar{ grid-template-columns:1.05fr 1.35fr .92fr 1.04fr; gap:12px; margin-bottom:14px; } .summary-bar>.summary-card{ min-height:94px; padding:13px 17px; border-radius:17px; } .summary-label{ margin-bottom:8px!important; font-size:10px!important; letter-spacing:1.35px!important; } .login-summary-row{gap:10px} .login-summary-row b{font-size:23px!important;line-height:1.05} .login-summary-row button{font-size:12px} .login-dot{width:9px;height:9px} .currency-summary{min-height:94px!important} .currency-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .currency-row{ grid-template-columns:23px minmax(0,1fr); grid-template-rows:auto auto; gap:1px 7px; min-height:49px; padding:6px 7px; border:1px solid rgba(111,214,255,.11); border-radius:11px; background:rgba(255,255,255,.025); } .currency-row i{grid-row:1/3;width:23px;height:23px;align-self:center;border-radius:8px;font-size:13px} .currency-row span{font-size:9px;line-height:1.15;white-space:nowrap} .currency-row b{font-size:17px!important;line-height:1.15;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .collection-summary-value{gap:7px} .collection-summary-value b{font-size:38px!important} .collection-summary-value i{font-size:19px} .collection-summary-value strong{font-size:23px} .collection-summary>small{margin-top:6px;font-size:10px} .summary-bar>.inventory-summary{gap:14px} .inventory-bag-icon{width:47px;height:47px} .inventory-bag-icon svg{width:42px;height:42px} .inventory-summary-copy b{font-size:23px!important;line-height:1.05} .inventory-summary-copy em{margin-top:5px;font-size:10px} } @media(max-width:800px){ body{padding-bottom:0!important} .page{padding-bottom:24px!important} .header{margin-bottom:10px!important;padding-bottom:10px!important} .mobile-bottom-nav{ position:relative!important; z-index:40!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; min-height:58px!important; margin:0 0 13px!important; padding:5px!important; grid-template-columns:repeat(auto-fit,minmax(52px,1fr))!important; gap:4px!important; border-radius:16px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 9px 24px rgba(0,0,0,.24)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .mobile-bottom-item{ min-height:48px!important; padding:5px 3px!important; gap:3px!important; border-radius:11px!important; } .mobile-bottom-item span{min-height:16px!important;font-size:15px!important} .mobile-bottom-item b{font-size:8px!important} .mobile-bottom-primary{ margin-top:0!important; min-height:48px!important; border-color:transparent!important; background:transparent!important; color:#82acc5!important; box-shadow:none!important; } .mobile-bottom-primary span{font-size:15px!important;color:#71e6ff!important} .mobile-bottom-primary.active{ color:#fff!important; border-color:rgba(119,239,255,.45)!important; background:linear-gradient(135deg,rgba(0,183,255,.92),rgba(56,89,255,.92))!important; box-shadow:0 9px 22px rgba(0,151,255,.25)!important; } .mobile-bottom-primary.active span{color:#fff!important} body.battle-screen-open .mobile-bottom-nav{display:none!important} } @media(max-width:370px){ .mobile-bottom-nav{margin-bottom:10px!important;padding:4px!important;gap:2px!important} .mobile-bottom-item{min-height:45px!important} .mobile-bottom-item span,.mobile-bottom-primary span{font-size:14px!important} .mobile-bottom-item b{font-size:7px!important} } /* V1100 MOBILE TOP SUBMENU + FULLSCREEN RESTORE + NO-CLIP SUMMARY Mobile-only override. Desktop layout remains unchanged. */ @media(max-width:800px){ /* Menu panels live directly below the mobile top navigation and push content down. */ body.mobile-menu-open{ overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior-x:none!important; overscroll-behavior-y:auto!important; } .mobile-nav-sheet-layer{ position:relative!important; z-index:42!important; inset:auto!important; width:100%!important; margin:-5px 0 13px!important; display:block; pointer-events:none; } .mobile-nav-sheet-layer[hidden]{display:none!important} .mobile-nav-sheet-layer.open{pointer-events:auto} .mobile-nav-sheet-backdrop{display:none!important} .mobile-nav-sheet{ position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; width:100%!important; max-height:min(58dvh,520px)!important; padding:14px 12px!important; border:1px solid rgba(101,224,255,.3)!important; border-radius:0 0 17px 17px!important; background:radial-gradient(circle at 82% 0,rgba(58,99,255,.16),transparent 35%),linear-gradient(180deg,#071a38,#030b1e 78%)!important; box-shadow:0 15px 32px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055)!important; overflow-x:hidden!important; overflow-y:auto!important; transform:translateY(-7px)!important; opacity:0!important; transition:transform .17s ease,opacity .15s ease!important; } .mobile-nav-sheet.active{display:block!important} .mobile-nav-sheet-layer.open .mobile-nav-sheet.active{ transform:translateY(0)!important; opacity:1!important; } .mobile-nav-sheet:before{display:none!important} .mobile-nav-sheet>header{margin-bottom:11px!important} .mobile-nav-sheet>header h2{font-size:20px!important} .mobile-nav-sheet>header p{font-size:10px!important} .mobile-nav-sheet>header>button{width:32px!important;height:32px!important;border-radius:10px!important;font-size:19px!important} .mobile-sheet-action-list{gap:7px!important} .mobile-sheet-action-list>button,.mobile-reward-hub-button{ min-height:62px!important; grid-template-columns:38px minmax(0,1fr) auto!important; gap:9px!important; padding:9px 10px!important; border-radius:14px!important; } .mobile-sheet-action-list>button>i,.mobile-reward-hub-button>i{ width:38px!important;height:38px!important;border-radius:12px!important;font-size:17px!important; } .mobile-sheet-action-list>button b,.mobile-reward-hub-button b{font-size:13px!important} .mobile-sheet-action-list>button small,.mobile-reward-hub-button small{font-size:8px!important} .mobile-more-grid{gap:7px!important} .mobile-more-grid button{min-height:60px!important;border-radius:14px!important} /* Restore the full-screen / large-view shortcut at the top of the mobile header. */ .header{position:relative!important} .header .brand{padding-right:104px!important} .fullscreen-play-link{ display:flex!important; position:absolute!important; z-index:260!important; top:2px!important; right:0!important; bottom:auto!important; min-height:32px!important; padding:7px 10px!important; border-radius:11px!important; background:linear-gradient(135deg,rgba(8,43,80,.98),rgba(8,24,55,.98))!important; border-color:rgba(111,235,255,.38)!important; box-shadow:0 7px 18px rgba(0,0,0,.3)!important; } .fullscreen-play-link span{font-size:14px!important} .fullscreen-play-link b{font-size:9px!important} /* Four summary cards must all be visible; no horizontal clipping or hidden fourth card. */ .summary-bar{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; margin:0 0 12px!important; padding:0!important; overflow:visible!important; scroll-snap-type:none!important; } .summary-bar>.summary-card{ min-width:0!important; width:100%!important; min-height:86px!important; padding:9px 10px!important; scroll-snap-align:none!important; } .summary-bar>.inventory-summary{min-width:0!important} .inventory-summary-copy{min-width:0!important} .inventory-summary-copy em{max-width:100%!important} } @media(max-width:370px){ .header .brand{padding-right:91px!important} .fullscreen-play-link{padding:6px 8px!important} .fullscreen-play-link b{font-size:8px!important} .summary-bar{gap:6px!important} .summary-bar>.summary-card{min-height:82px!important;padding:8px!important} .mobile-nav-sheet{padding:12px 9px!important} } /* V1102 magic crystal acquisition reward UI */ .battle-magic-drop{margin-top:10px;padding:10px 14px;border:1px solid rgba(196,126,255,.42);border-radius:12px;background:linear-gradient(135deg,rgba(84,35,125,.34),rgba(20,15,48,.78));text-align:left}.battle-magic-drop strong{display:block;color:#d9a7ff;font-size:17px}.battle-magic-drop span{display:block;margin-top:2px;color:#a99aba;font-size:12px}.pvp-magic-reward{color:#d7a4ff!important}.raid-reward-stage{max-width:760px}.raid-reward-stage article.magic{border-color:rgba(205,128,255,.34);background:linear-gradient(160deg,rgba(70,35,110,.92),rgba(18,12,42,.97))}.raid-reward-stage article.magic .raid-reward-icon{color:#d7a4ff}.raid-reward-stage article:nth-child(3){animation-delay:.28s} @media(max-width:720px){.raid-reward-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.raid-reward-stage article{width:auto;min-width:0;padding:14px 5px}.raid-reward-stage span{font-size:11px}.raid-reward-stage b{font-size:18px}.raid-reward-icon{font-size:27px}} @media(max-width:380px){.raid-reward-stage{grid-template-columns:1fr}.raid-reward-stage article{padding:12px}.raid-reward-stage b{font-size:20px}} /* V1110: 모바일 대장전 대기/전투 중 와고 부모 페이지로 세로 스크롤 전달 */ html.captain-battle-scroll-open,body.captain-battle-scroll-open{overflow-y:auto!important;overscroll-behavior-y:auto!important;touch-action:pan-y!important} @media(max-width:780px){ body.captain-battle-scroll-open .captain-v3-battle-modal, body.captain-battle-scroll-open .captain-v4-battle-modal{ overflow-y:auto!important;overscroll-behavior-y:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;align-items:flex-start!important } body.captain-battle-scroll-open .captain-v3-battle-stage, body.captain-battle-scroll-open .captain-v4-pvp-stage{touch-action:pan-y!important} } /* V1116: restore original SSR/MA JPG scenes and keep draw actions above results. */ .modal.opening-modal, .modal.results-modal, .modal.special-reveal-modal, .modal.inventory-open-modal{ position:fixed!important;inset:0!important;z-index:120000!important; width:100vw!important;height:100dvh!important;max-width:none!important;isolation:isolate!important; } .modal.results-modal{ padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important; align-items:flex-start!important;justify-content:center!important;overflow-x:hidden!important;overflow-y:auto!important; } .modal.results-modal .multi-result-panel{width:min(1220px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;margin:0 auto!important;overflow:visible!important} .modal.results-modal .result-head{position:relative!important;padding-right:52px!important} .modal.results-modal .icon-close{position:absolute!important;top:12px!important;right:12px!important;z-index:8!important} .modal.results-modal .result-actions-top{ position:sticky!important;top:0!important;z-index:30!important; display:grid!important;grid-template-columns:minmax(190px,1fr) minmax(120px,.45fr)!important; gap:10px!important;margin:8px 0 16px!important;padding:10px!important; border:1px solid rgba(98,232,255,.25)!important;border-radius:14px!important; background:rgba(3,13,32,.94)!important;backdrop-filter:blur(12px)!important; box-shadow:0 10px 26px rgba(0,0,0,.28)!important; } .modal.special-reveal-modal.reveal-ssr, .modal.special-reveal-modal.reveal-ma{padding:0!important;overflow:hidden!important;background:#01030a!important} .special-reveal-stage.grade-ssr, .special-reveal-stage.grade-ma{ position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important; overflow:hidden!important;display:grid!important;place-items:center!important;isolation:isolate!important; background-color:#01030a!important;background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important; } .special-reveal-stage.grade-ssr{background-image:url('../assets/effects/reveal/ssr_bg.jpg')!important} .special-reveal-stage.grade-ma{background-image:url('../assets/effects/reveal/ma_bg.jpg')!important} .special-reveal-stage.grade-ssr:before, .special-reveal-stage.grade-ma:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 35%,transparent 68%,rgba(0,0,0,.34))} .special-reveal-stage.grade-ssr .cinematic-scene-bg, .special-reveal-stage.grade-ma .cinematic-scene-bg{display:none!important} .special-reveal-stage.grade-ssr .special-cinematic-canvas, .special-reveal-stage.grade-ma .special-cinematic-canvas{position:absolute!important;inset:0!important;z-index:2!important;width:100%!important;height:100%!important;background:transparent!important;pointer-events:none!important} .special-reveal-stage.grade-ssr .cinematic-scene-mist, .special-reveal-stage.grade-ma .cinematic-scene-mist, .special-reveal-stage.grade-ssr .cinematic-vfx, .special-reveal-stage.grade-ma .cinematic-vfx, .special-reveal-stage.grade-ssr .cinematic-depth-grid, .special-reveal-stage.grade-ma .cinematic-depth-grid, .special-reveal-stage.grade-ssr .cinematic-horizon, .special-reveal-stage.grade-ma .cinematic-horizon, .special-reveal-stage.grade-ssr .cinematic-flash, .special-reveal-stage.grade-ma .cinematic-flash{position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important} .special-reveal-stage.grade-ssr .cinematic-emblem, .special-reveal-stage.grade-ma .cinematic-emblem{position:absolute!important;z-index:20!important;top:clamp(28px,7vh,82px)!important;left:50%!important;transform:translateX(-50%)!important;width:min(92vw,760px)!important;text-align:center!important;text-shadow:0 3px 18px rgba(0,0,0,.95),0 0 28px rgba(255,255,255,.45)!important} .special-reveal-stage.grade-ssr .cinematic-emblem small, .special-reveal-stage.grade-ma .cinematic-emblem small, .special-reveal-stage.grade-ssr .cinematic-emblem span, .special-reveal-stage.grade-ma .cinematic-emblem span{display:block!important;font-weight:1000!important;letter-spacing:.20em!important;color:#f5fbff!important} .special-reveal-stage.grade-ssr .cinematic-emblem strong, .special-reveal-stage.grade-ma .cinematic-emblem strong{display:block!important;margin:5px 0!important;font-size:clamp(58px,11vw,132px)!important;line-height:.9!important;color:#fff!important;letter-spacing:.05em!important} .special-reveal-stage.grade-ssr .cinematic-card-shell, .special-reveal-stage.grade-ma .cinematic-card-shell{position:relative!important;z-index:22!important;width:min(260px,64vw)!important;aspect-ratio:5/7!important;transform-style:preserve-3d!important} .special-reveal-stage.grade-ssr .cinematic-caption, .special-reveal-stage.grade-ma .cinematic-caption{position:absolute!important;z-index:25!important;left:50%!important;bottom:max(23px,calc(env(safe-area-inset-bottom) + 14px))!important;transform:translateX(-50%)!important} .special-reveal-stage.grade-ssr .special-skip, .special-reveal-stage.grade-ma .special-skip{position:absolute!important;z-index:40!important;right:max(18px,calc(env(safe-area-inset-right) + 12px))!important;top:max(18px,calc(env(safe-area-inset-top) + 12px))!important} @media(max-width:800px){ .modal.results-modal{padding:max(8px,env(safe-area-inset-top)) 8px max(20px,env(safe-area-inset-bottom))!important} .modal.results-modal .multi-result-panel{width:100%!important;max-width:100%!important;padding:12px 10px 18px!important;border-radius:16px!important} .modal.results-modal .result-actions-top{grid-template-columns:1fr!important;top:max(0px,env(safe-area-inset-top))!important;margin:4px 0 12px!important;padding:8px!important} .modal.results-modal .result-actions-top .btn{min-height:48px!important;width:100%!important} .special-reveal-stage.grade-ssr .cinematic-emblem, .special-reveal-stage.grade-ma .cinematic-emblem{top:max(48px,calc(env(safe-area-inset-top) + 34px))!important} .special-reveal-stage.grade-ssr .cinematic-card-shell, .special-reveal-stage.grade-ma .cinematic-card-shell{width:min(228px,65vw)!important;margin-top:8vh!important} } /* V1117 - desktop draw result action bar overflow hotfix */ @media (min-width:801px){ .modal.results-modal .result-actions-top{ width:min(100%,640px)!important; max-width:640px!important; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)!important; overflow:hidden!important; } .modal.results-modal .result-actions-top .btn{ width:100%!important; min-width:0!important; max-width:100%!important; } } /* V1118: restore card-pack CRITICAL opening effect only. */ .modal.opening-modal{ overflow:visible!important; } .modal.opening-modal .critical-opening-stage{ position:relative!important; isolation:isolate!important; overflow:visible!important; } .modal.opening-modal .critical-opening-stage .pack-open{ position:relative!important; z-index:20!important; overflow:hidden!important; } .modal.opening-modal .critical-burst{ position:absolute!important; inset:-18vh -18vw!important; z-index:100!important; display:grid!important; place-items:center!important; pointer-events:none!important; overflow:visible!important; background: radial-gradient(circle at center,rgba(255,255,255,.98) 0 3%,rgba(255,235,128,.72) 7%,rgba(255,126,24,.34) 18%,transparent 46%), radial-gradient(circle at center,rgba(255,208,75,.18),transparent 62%)!important; animation:criticalBurstFade .95s cubic-bezier(.16,.8,.22,1) both!important; } .modal.opening-modal .critical-burst strong{ position:relative!important; z-index:6!important; margin-top:-34px!important; color:#fff7c2!important; font-size:clamp(34px,6vw,78px)!important; font-weight:1000!important; font-style:italic!important; letter-spacing:-2px!important; text-shadow:0 0 8px #fff,0 0 24px #ffd54f,0 0 48px #ff7a00,0 5px 0 rgba(94,30,0,.85)!important; transform:skewX(-8deg)!important; animation:criticalTitleHit .72s cubic-bezier(.12,.86,.18,1.25) both!important; } .modal.opening-modal .critical-burst>span{ position:absolute!important; z-index:7!important; top:calc(50% + 44px)!important; padding:8px 16px!important; border:1px solid rgba(255,236,139,.8)!important; border-radius:999px!important; color:#2a1600!important; background:linear-gradient(135deg,#fff2a8,#ffb21e)!important; box-shadow:0 0 22px rgba(255,166,30,.7)!important; font-weight:1000!important; animation:criticalSubHit .7s .12s both!important; } .modal.opening-modal .critical-ring{ position:absolute!important; left:50%!important;top:50%!important; width:min(64vw,620px)!important;height:min(64vw,620px)!important; border:8px solid rgba(255,229,116,.88)!important; border-radius:50%!important; box-shadow:0 0 20px #fff,0 0 48px #ffc126,inset 0 0 40px rgba(255,139,0,.55)!important; transform:translate(-50%,-50%) scale(.12)!important; animation:criticalRingBlast .8s ease-out both!important; } .modal.opening-modal .critical-bolts, .modal.opening-modal .critical-bolts:before, .modal.opening-modal .critical-bolts:after{ position:absolute!important; inset:50% auto auto 50%!important; width:min(86vw,820px)!important;height:18px!important; content:""!important; background:linear-gradient(90deg,transparent,#fff7b2 15%,#ff8a00 48%,#fff 51%,#ff8a00 54%,#fff7b2 85%,transparent)!important; filter:drop-shadow(0 0 12px #ff9d00)!important; transform:translate(-50%,-50%) rotate(18deg)!important; clip-path:polygon(0 43%,42% 43%,47% 0,53% 100%,58% 57%,100% 57%,100% 100%,0 100%)!important; animation:criticalBoltFlash .55s ease-out both!important; } .modal.opening-modal .critical-bolts:before{transform:translate(-50%,-50%) rotate(78deg)!important} .modal.opening-modal .critical-bolts:after{transform:translate(-50%,-50%) rotate(138deg)!important} .modal.opening-modal .critical-particles{ position:absolute!important; inset:0!important; z-index:5!important; } .modal.opening-modal .critical-particles i{ --angle:calc(var(--i) * 12.857deg); position:absolute!important; left:50%!important;top:50%!important; width:8px!important;height:32px!important; border-radius:999px!important; background:linear-gradient(#fff,#ffd43b 38%,#ff7000)!important; box-shadow:0 0 10px #ffd43b!important; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-32px) scaleY(.2)!important; transform-origin:center!important; animation:criticalParticleFly .78s cubic-bezier(.12,.72,.18,1) both!important; animation-delay:calc(var(--i) * 7ms)!important; } .modal.opening-modal .critical-opening-stage.critical-hit{ animation:criticalStageShake .52s ease-out both!important; } @keyframes criticalBurstFade{0%{opacity:0;transform:scale(.75)}18%{opacity:1}78%{opacity:1}100%{opacity:0;transform:scale(1.08)}} @keyframes criticalTitleHit{0%{opacity:0;transform:scale(2.3) skewX(-8deg)}45%{opacity:1;transform:scale(.88) skewX(-8deg)}70%{transform:scale(1.08) skewX(-8deg)}100%{opacity:1;transform:scale(1) skewX(-8deg)}} @keyframes criticalSubHit{0%{opacity:0;transform:translateY(14px) scale(.75)}100%{opacity:1;transform:none}} @keyframes criticalRingBlast{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}} @keyframes criticalBoltFlash{0%{opacity:0;scale:.2 1}18%{opacity:1}100%{opacity:0;scale:1.15 1}} @keyframes criticalParticleFly{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-20px) scaleY(.15)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-46vh) scaleY(1.5)}} @keyframes criticalStageShake{0%,100%{transform:translate(0)}18%{transform:translate(-9px,4px) rotate(-.4deg)}35%{transform:translate(8px,-3px) rotate(.35deg)}52%{transform:translate(-5px,2px)}70%{transform:translate(3px,-1px)}} @media(max-width:767px){ .modal.opening-modal .critical-burst{inset:-12vh -26vw!important} .modal.opening-modal .critical-burst strong{font-size:clamp(30px,11vw,52px)!important;white-space:nowrap!important} .modal.opening-modal .critical-burst>span{top:calc(50% + 36px)!important;font-size:12px!important} .modal.opening-modal .critical-ring{width:92vw!important;height:92vw!important} } @media(prefers-reduced-motion:reduce){ .modal.opening-modal .critical-burst, .modal.opening-modal .critical-burst *, .modal.opening-modal .critical-opening-stage.critical-hit{animation-duration:.01ms!important;animation-iteration-count:1!important} } /* V1119 MASTER STAR — isolated inventory material styling */ .inventory-item-master-star{--item-accent:#ffe58a;background:radial-gradient(circle at 22% 48%,rgba(255,224,105,.22),transparent 38%),linear-gradient(145deg,#3a2607,#171329 62%,#080b18)} .master-star-emblem{position:relative;z-index:4;width:170px;height:170px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fffdf0 0 7%,#ffe27b 8% 22%,#b77814 52%,#412306 74%,transparent 75%);filter:drop-shadow(0 18px 20px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(255,218,95,.65));} .master-star-emblem:before,.master-star-emblem:after{content:"";position:absolute;inset:8px;border:2px solid rgba(255,241,164,.72);border-radius:50%;box-shadow:inset 0 0 18px rgba(255,231,123,.35)} .master-star-emblem:after{inset:24px;border-style:dashed;animation:inventoryOrbit 12s linear infinite} .master-star-emblem span{position:relative;z-index:2;color:#fff8c6;font-size:82px;line-height:1;text-shadow:0 0 8px #fff,0 0 22px #ffc846,0 8px 16px rgba(83,42,0,.7)} .master-star-emblem i{position:absolute;inset:-18px;border-radius:50%;background:conic-gradient(from 0deg,transparent,#ffe47b,transparent 22%,#fff4b5,transparent 48%,#ffc64c,transparent 72%);opacity:.45;filter:blur(2px);animation:inventoryOrbit 9s linear infinite} .inventory-material-label{padding:11px 14px;border:1px solid rgba(255,226,122,.35);border-radius:11px;color:#ffe991;background:rgba(255,211,73,.08);font-size:11px;font-style:normal;font-weight:1000;white-space:nowrap} @media(max-width:620px){.master-star-emblem{width:155px;height:155px}.master-star-emblem span{font-size:74px}} @media(prefers-reduced-motion:reduce){.master-star-emblem:after,.master-star-emblem i{animation:none!important}} .weekly-premium-cube-status{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr) minmax(340px,420px);align-items:center;gap:24px;margin:18px 0 0;padding:22px 26px;overflow:hidden;border:1px solid rgba(99,208,255,.42);border-radius:24px;background:radial-gradient(circle at 10% 50%,rgba(77,198,255,.13),transparent 28%),linear-gradient(135deg,rgba(8,31,61,.98),rgba(4,17,34,.98));box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)} .weekly-premium-cube-status:after{content:"";position:absolute;right:-90px;top:-120px;width:360px;height:360px;border:1px solid rgba(87,203,255,.08);border-radius:50%;box-shadow:0 0 0 42px rgba(87,203,255,.025),0 0 0 86px rgba(87,203,255,.015);pointer-events:none} .weekly-premium-cube-visual{position:relative;display:grid;place-items:center;height:118px} .weekly-premium-cube-visual img{position:relative;z-index:2;width:92px;max-height:112px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,213,91,.35))} .weekly-premium-cube-glow{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,rgba(255,218,96,.30),rgba(63,174,255,.10) 44%,transparent 70%);filter:blur(4px)} .weekly-premium-cube-copy{min-width:0}.weekly-premium-cube-status small{font-size:12px;font-weight:900;letter-spacing:.14em;color:#69dcff}.weekly-premium-cube-status h3{margin:5px 0 6px;font-size:22px}.weekly-premium-cube-status p{margin:0;color:#9db8d4}.weekly-premium-cube-progress{height:5px;margin-top:14px;overflow:hidden;border-radius:999px;background:rgba(123,181,230,.13);box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}.weekly-premium-cube-progress span{display:block;height:100%;min-width:3px;border-radius:inherit;background:linear-gradient(90deg,#56dfff,#7e69ff,#ffd86a);box-shadow:0 0 12px rgba(95,211,255,.45)} .weekly-premium-cube-values{position:relative;z-index:1;display:flex;gap:12px;min-width:0}.weekly-premium-cube-values span{flex:1;padding:15px 17px;border:1px solid rgba(113,171,222,.25);border-radius:17px;background:linear-gradient(145deg,rgba(5,18,37,.86),rgba(3,13,28,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.weekly-premium-cube-values span small{display:block;margin-bottom:7px;color:#8faecc;letter-spacing:0}.weekly-premium-cube-values b{font-size:24px;color:#fff;text-shadow:0 0 18px rgba(105,220,255,.10)} @media(min-width:901px){.weekly-premium-cube-status{grid-template-columns:120px minmax(300px,1fr) minmax(330px,410px)}.weekly-premium-cube-status h3{white-space:nowrap}.weekly-premium-cube-status p{max-width:390px;line-height:1.45}.weekly-premium-cube-values{width:100%}} @media(max-width:900px){.weekly-premium-cube-status{grid-template-columns:90px minmax(0,1fr);gap:18px}.weekly-premium-cube-visual{height:94px}.weekly-premium-cube-visual img{width:74px;max-height:90px}.weekly-premium-cube-copy h3{white-space:nowrap}.weekly-premium-cube-values{grid-column:1/-1}} @media(max-width:760px){.weekly-premium-cube-status{grid-template-columns:68px minmax(0,1fr);gap:13px;padding:16px}.weekly-premium-cube-visual{height:76px}.weekly-premium-cube-visual img{width:60px;max-height:72px}.weekly-premium-cube-status h3{margin-top:3px;font-size:18px;line-height:1.25;white-space:nowrap}.weekly-premium-cube-status p{font-size:13px;line-height:1.45}.weekly-premium-cube-progress{margin-top:11px}.weekly-premium-cube-values{gap:8px}.weekly-premium-cube-values span{padding:12px}.weekly-premium-cube-values b{font-size:20px}} @media(max-width:480px){.weekly-premium-cube-status{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:14px;border-radius:19px}.weekly-premium-cube-visual{height:66px}.weekly-premium-cube-visual img{width:52px;max-height:62px}.weekly-premium-cube-status small{font-size:10px;letter-spacing:.1em}.weekly-premium-cube-status h3{font-size:16px}.weekly-premium-cube-status p{font-size:12px}.weekly-premium-cube-values{display:grid;grid-template-columns:1fr 1fr}.weekly-premium-cube-values span{min-width:0;padding:11px 10px}.weekly-premium-cube-values span small{font-size:10px}.weekly-premium-cube-values b{font-size:18px;white-space:nowrap}} /* v1136: weekly premium cube responsive containment + magic card pack visuals */ .weekly-premium-cube-status{width:100%;max-width:100%;box-sizing:border-box;grid-template-columns:110px minmax(0,1fr) minmax(0,390px)} .weekly-premium-cube-copy,.weekly-premium-cube-values,.weekly-premium-cube-values span{min-width:0} .weekly-premium-cube-status p{line-height:1.5;overflow-wrap:anywhere} .weekly-premium-cube-values{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%} .weekly-premium-cube-values span{box-sizing:border-box} @media(max-width:1280px){ .weekly-premium-cube-status{grid-template-columns:100px minmax(0,1fr);align-items:center} .weekly-premium-cube-values{grid-column:1/-1} } @media(max-width:760px){ .weekly-premium-cube-status{grid-template-columns:64px minmax(0,1fr)} .weekly-premium-cube-copy h3{white-space:normal} .weekly-premium-cube-status p br{display:none} } @media(max-width:420px){ .weekly-premium-cube-values{grid-template-columns:1fr} } .magic-draw-pack{position:relative;display:grid;place-items:center;width:126px;height:126px;margin:0 auto 4px} .magic-draw-pack span{position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle,rgba(196,111,255,.34),rgba(80,57,183,.12) 48%,transparent 72%);filter:blur(3px)} .magic-draw-pack img{position:relative;z-index:1;max-width:112px;max-height:112px;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(164,83,255,.3))} @media(max-width:620px){.magic-draw-pack{width:104px;height:104px}.magic-draw-pack img{max-width:92px;max-height:92px}} /* V1157 CARD EVOLUTION HUB */ .evolution-page{position:relative;margin-top:18px;padding:0 0 28px}.evolution-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:hidden;padding:26px 28px;border:1px solid rgba(95,214,255,.24);border-radius:24px;background:linear-gradient(135deg,rgba(7,25,53,.97),rgba(4,12,29,.97));box-shadow:0 22px 55px rgba(0,0,0,.3)}.evolution-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 90% 0,rgba(255,202,88,.13),transparent 28%),linear-gradient(120deg,transparent 48%,rgba(92,224,255,.035) 49% 50%,transparent 51%)}.evolution-hero>div{position:relative;z-index:1}.evolution-hero h2{margin:4px 0 8px;font-size:clamp(30px,4vw,48px);letter-spacing:-1.4px}.evolution-hero p{margin:0;color:#8ea8c6;line-height:1.65}.evolution-star-wallet{display:flex;align-items:center;gap:13px;min-width:230px;padding:14px 17px;border:1px solid rgba(255,211,116,.27);border-radius:17px;background:linear-gradient(145deg,rgba(27,19,8,.9),rgba(7,13,26,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.2)}.evolution-star-wallet span:last-child{display:grid;gap:3px}.evolution-star-wallet small{color:#9caec1;font-size:10px;font-weight:900;letter-spacing:.8px}.evolution-star-wallet b{color:#fff1b4;font-size:22px}.evolution-wallet-star,.evolution-master-star,.evolution-core-star,.evolution-material-icon,.evolution-cast-star{position:relative;display:grid;place-items:center;flex:0 0 auto}.evolution-wallet-star{width:44px;height:44px;border:1px solid rgba(255,213,120,.52);border-radius:14px;background:linear-gradient(145deg,#281b08,#0a0f1d);box-shadow:inset 0 0 12px rgba(255,204,91,.1),0 0 15px rgba(255,198,75,.12)}.evolution-wallet-star i,.evolution-core-star i,.evolution-material-icon i,.evolution-cast-star i{position:relative;z-index:2;color:#ffe091;font-style:normal;text-shadow:0 0 12px rgba(255,205,93,.55)}.evolution-wallet-star i{font-size:23px}.evolution-wallet-star b,.evolution-core-star b,.evolution-material-icon b,.evolution-cast-star b{position:absolute;inset:5px;border:1px solid rgba(255,225,152,.18);transform:rotate(45deg)} .evolution-workspace{margin-top:18px}.evolution-loading,.evolution-load-error{display:grid;place-items:center;gap:12px;min-height:360px;border:1px solid rgba(97,205,255,.15);border-radius:22px;background:rgba(5,16,35,.76);color:#a9bed1;text-align:center}.evolution-loading i{width:32px;height:32px;border:3px solid rgba(104,223,255,.18);border-top-color:#67ddff;border-radius:50%;animation:evolution-spin .9s linear infinite}.evolution-load-error b{font-size:18px;color:#edfaff}.evolution-load-error span{color:#8ba5bd}.evolution-type-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.evolution-type-tabs button{position:relative;display:grid;gap:4px;min-height:94px;padding:17px 20px;border:1px solid rgba(104,206,255,.14);border-radius:18px;background:linear-gradient(150deg,rgba(8,25,52,.92),rgba(3,11,26,.96));color:#dff6ff;text-align:left;cursor:pointer;overflow:hidden;transition:.2s transform,.2s border-color,.2s box-shadow}.evolution-type-tabs button:after{content:"";position:absolute;inset:auto -35px -45px auto;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(73,210,255,.13),transparent 68%)}.evolution-type-tabs button:hover{transform:translateY(-2px);border-color:rgba(107,226,255,.38)}.evolution-type-tabs button.active{border-color:rgba(104,229,255,.58);background:linear-gradient(145deg,rgba(9,55,83,.95),rgba(11,24,58,.96));box-shadow:0 14px 35px rgba(0,137,210,.15),inset 0 1px 0 rgba(255,255,255,.06)}.evolution-type-tabs button:last-child.active{border-color:rgba(255,211,113,.52);background:linear-gradient(145deg,rgba(48,32,10,.94),rgba(16,18,35,.96));box-shadow:0 14px 35px rgba(180,116,17,.12),inset 0 1px 0 rgba(255,255,255,.06)}.evolution-type-tabs small{color:#66dcff;font-size:9px;font-weight:1000;letter-spacing:1.7px}.evolution-type-tabs button:last-child small{color:#ffd577}.evolution-type-tabs b{font-size:20px}.evolution-type-tabs span{color:#819db8;font-size:11px}.evolution-closed-notice{margin-bottom:15px;padding:13px 16px;border:1px solid rgba(255,130,94,.3);border-radius:14px;background:rgba(61,23,18,.42);color:#ffc2ad;font-weight:900;text-align:center} .evolution-layout{display:grid;grid-template-columns:minmax(270px,.33fr) minmax(0,1fr);gap:16px}.evolution-picker,.evolution-main{border:1px solid rgba(102,199,255,.15);border-radius:22px;background:linear-gradient(155deg,rgba(6,20,43,.94),rgba(3,10,24,.97));box-shadow:0 18px 48px rgba(0,0,0,.22)}.evolution-picker{padding:18px;min-width:0}.evolution-picker>header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}.evolution-picker h3{margin:3px 0 0;font-size:20px}.evolution-picker>header>span{padding:6px 9px;border-radius:999px;background:rgba(84,214,255,.08);color:#71dfff;font-size:10px;font-weight:900}.evolution-candidate-list{display:grid;gap:9px;max-height:670px;overflow:auto;padding-right:4px;scrollbar-width:thin}.evolution-candidate{display:grid;grid-template-columns:66px minmax(0,1fr);gap:11px;align-items:center;width:100%;padding:8px;border:1px solid rgba(114,195,235,.13);border-radius:14px;background:rgba(255,255,255,.025);color:#e9f7ff;text-align:left;cursor:pointer;transition:.17s}.evolution-candidate:hover{border-color:rgba(100,222,255,.4);background:rgba(74,200,255,.065);transform:translateX(2px)}.evolution-candidate.selected{border-color:rgba(100,226,255,.62);background:linear-gradient(135deg,rgba(23,112,154,.28),rgba(56,74,160,.15));box-shadow:inset 0 0 0 1px rgba(126,231,255,.08)}.evolution-candidate.blocked{opacity:.55;cursor:not-allowed;filter:saturate(.55)}.evolution-candidate-art{position:relative;width:66px;height:84px;overflow:hidden;border:1px solid rgba(255,222,147,.25);border-radius:10px;background:#050b16}.evolution-candidate-art img{width:100%;height:100%;object-fit:cover}.evolution-candidate-art i{position:absolute;left:4px;right:4px;bottom:4px;padding:3px 4px;border-radius:5px;background:rgba(2,7,15,.84);color:#ffe8ab;font-size:8px;font-style:normal;font-weight:900;text-align:center}.evolution-candidate-copy{display:grid;min-width:0;gap:3px}.evolution-candidate-copy b{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.evolution-candidate-copy small{color:#7895ae;font-size:10px}.evolution-candidate-copy em{color:#ffaf96;font-size:9px;font-style:normal;line-height:1.4}.evolution-candidate-copy em.ready{color:#6ce4b1}.evolution-candidate-empty{display:grid;gap:6px;padding:32px 12px;color:#8da7bd;text-align:center}.evolution-candidate-empty b{color:#dceefa}.evolution-main{padding:18px;min-width:0}.evolution-process-grid{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,.92fr) 38px minmax(0,.88fr);gap:6px;align-items:stretch}.evolution-slot{position:relative;min-width:0;min-height:370px;padding:16px;border:1px solid rgba(111,196,235,.14);border-radius:18px;background:linear-gradient(180deg,rgba(8,24,48,.76),rgba(3,11,25,.9));overflow:hidden}.evolution-slot>span:first-child{display:block;color:#6edfff;font-size:9px;font-weight:1000;letter-spacing:1.5px}.evolution-slot.prestige>span:first-child,.evolution-slot.result.prestige>span:first-child{color:#ffd578}.evolution-slot.source{display:flex;flex-direction:column}.evolution-selected-card{display:grid;align-content:center;gap:15px;flex:1}.evolution-selected-art{position:relative;width:min(172px,80%);aspect-ratio:2/2.82;margin:0 auto;padding:4px;border-radius:17px;background:linear-gradient(145deg,#ffe28e,#5e3b0b 25%,#07101d 54%,#c78b27 78%,#ffedae);box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 22px rgba(255,198,75,.16)}.evolution-selected-art img{width:100%;height:100%;display:block;object-fit:cover;border-radius:13px}.evolution-selected-art i,.evolution-selected-art strong{position:absolute;top:9px;padding:4px 7px;border-radius:6px;background:rgba(3,8,17,.86);font-style:normal;font-size:9px}.evolution-selected-art i{left:9px;color:#ffe2a2}.evolution-selected-art strong{right:9px;color:#8eeaff}.evolution-selected-card>div:last-child{text-align:center}.evolution-selected-card small{color:#7e9ab2}.evolution-selected-card h3{margin:4px 0 6px;font-size:20px}.evolution-selected-card p{margin:0;color:#aec0d1;font-size:11px}.evolution-selected-card em{display:block;margin-top:10px;color:#ffb18f;font-size:9px;font-style:normal}.evolution-slot.empty{display:grid;align-content:start}.evolution-empty-card{display:grid;place-items:center;align-content:center;gap:8px;min-height:310px;text-align:center}.evolution-empty-card i{display:grid;place-items:center;width:74px;height:94px;border:1px dashed rgba(106,216,255,.32);border-radius:14px;color:#70dfff;font-size:28px;font-style:normal}.evolution-empty-card b{color:#dcecf7}.evolution-empty-card small{color:#7f9ab1}.evolution-flow-arrow{display:grid;place-items:center;align-content:center;gap:5px;color:#6fe0ff}.evolution-flow-arrow i{width:1px;height:80px;background:linear-gradient(transparent,rgba(101,225,255,.5),transparent)}.evolution-flow-arrow b{font-size:24px}.evolution-slot.core{display:flex;flex-direction:column}.evolution-core-visual{position:relative;display:grid;place-items:center;align-content:center;gap:6px;flex:1;min-height:245px}.core-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(102,226,255,.28);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.core-ring.one{width:160px;height:160px;border-style:dashed;animation:evolution-ring 16s linear infinite}.core-ring.two{width:126px;height:178px;opacity:.45;animation:evolution-ring-reverse 20s linear infinite}.evolution-slot.core.prestige .core-ring{border-color:rgba(255,210,112,.26)}.evolution-core-star{width:72px;height:72px;border:1px solid rgba(255,214,119,.38);border-radius:20px;background:linear-gradient(145deg,#231806,#07101f);box-shadow:inset 0 0 18px rgba(255,205,94,.08),0 0 22px rgba(255,198,75,.12)}.evolution-core-star i{font-size:33px}.evolution-core-visual>b{margin-top:9px;color:#e9f9ff;font-size:13px;letter-spacing:1.3px}.evolution-slot.core.prestige .evolution-core-visual>b{color:#ffe2a1}.evolution-core-visual>small{color:#809bb2;font-size:9px}.evolution-material-row{display:grid;gap:8px;padding:12px;border:1px solid rgba(255,211,116,.17);border-radius:13px;background:rgba(255,255,255,.025)}.evolution-material-row>div{display:flex;align-items:center;gap:9px}.evolution-material-icon{width:32px;height:32px;border:1px solid rgba(255,210,112,.28);border-radius:9px;background:#13130f}.evolution-material-icon i{font-size:16px}.evolution-material-row span{display:grid;gap:2px}.evolution-material-row small{color:#839bb0;font-size:8px}.evolution-material-row b{color:#ffedb1;font-size:12px}.evolution-material-row em{font-size:10px;font-style:normal;font-weight:900}.evolution-material-row em.enough{color:#6fe5b1}.evolution-material-row em.shortage{color:#ff9b89}.evolution-slot.result{display:flex;flex-direction:column}.evolution-result-mystery{position:relative;display:grid;place-items:center;align-content:center;gap:8px;flex:1;min-height:245px;text-align:center}.evolution-result-mystery:before{content:"";position:absolute;width:150px;height:210px;border:1px solid rgba(117,213,255,.2);border-radius:17px;background:linear-gradient(145deg,rgba(25,65,101,.22),rgba(6,13,27,.35));box-shadow:inset 0 0 28px rgba(82,209,255,.06)}.evolution-slot.result.prestige .evolution-result-mystery:before{border-color:rgba(255,211,112,.22);background:linear-gradient(145deg,rgba(96,63,15,.2),rgba(7,11,22,.35));box-shadow:inset 0 0 28px rgba(255,194,70,.05)}.evolution-result-mystery>*{position:relative;z-index:1}.evolution-result-mystery i{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(112,221,255,.35);border-radius:50%;color:#82e6ff;font-size:28px;font-style:normal;box-shadow:0 0 17px rgba(90,213,255,.12)}.evolution-slot.result.prestige .evolution-result-mystery i{border-color:rgba(255,210,109,.38);color:#ffe193}.evolution-result-mystery b{max-width:130px;font-size:14px}.evolution-result-mystery small{color:#829bb0;font-size:9px}.evolution-pool-button{position:relative;z-index:2;width:100%;padding:10px;border:1px solid rgba(109,215,255,.23);border-radius:10px;background:rgba(51,162,205,.08);color:#bdefff;font-weight:900;cursor:pointer}.evolution-pool-button:disabled{opacity:.45;cursor:not-allowed}.evolution-slot.result>p{margin:9px 0 0;color:#718ca4;font-size:9px;text-align:center}.evolution-warning-panel{display:grid;gap:10px;margin-top:14px;padding:14px 16px;border:1px solid rgba(255,164,93,.24);border-radius:15px;background:linear-gradient(135deg,rgba(56,28,11,.45),rgba(16,14,23,.52))}.evolution-warning-panel>div{display:flex;gap:11px;align-items:flex-start}.evolution-warning-panel i{display:grid;place-items:center;flex:0 0 28px;height:28px;border:1px solid rgba(255,180,105,.38);border-radius:9px;color:#ffc074;font-style:normal;font-weight:1000}.evolution-warning-panel span{display:grid;gap:4px}.evolution-warning-panel b{color:#ffe0b1;font-size:12px}.evolution-warning-panel small{color:#a9907f;line-height:1.55}.evolution-warning-panel p{margin:0 0 0 39px;color:#7d9bab;font-size:9px}.evolution-submit{width:100%;margin-top:13px;padding:15px;border:1px solid rgba(102,226,255,.55);border-radius:14px;background:linear-gradient(135deg,#087aa5,#3157c8);color:#fff;font-weight:1000;letter-spacing:.2px;cursor:pointer;box-shadow:0 14px 28px rgba(13,107,177,.18),inset 0 1px 0 rgba(255,255,255,.14)}.evolution-submit.prestige{border-color:rgba(255,214,117,.55);background:linear-gradient(135deg,#8b5b16,#5e2c28 50%,#25294e);box-shadow:0 14px 28px rgba(137,82,14,.15),inset 0 1px 0 rgba(255,255,255,.13)}.evolution-submit:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.evolution-submit-help{display:block;margin-top:8px;color:#ffad94;text-align:center} .evolution-pool-panel{width:min(920px,94vw);max-height:88vh;overflow:auto}.evolution-pool-head{text-align:center}.evolution-pool-head h2{margin:5px 0 7px}.evolution-pool-head p{margin:0;color:#8ca6bd}.evolution-pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:11px;margin:20px 0}.evolution-pool-grid article{position:relative;padding:7px 7px 11px;border:1px solid rgba(109,204,246,.17);border-radius:13px;background:rgba(255,255,255,.025);text-align:center}.evolution-pool-grid img{width:100%;aspect-ratio:2/2.82;object-fit:cover;border-radius:9px}.evolution-pool-grid span{position:absolute;left:11px;top:11px;padding:3px 6px;border-radius:5px;background:rgba(2,8,17,.86);color:#ffe3a5;font-size:8px;font-weight:1000}.evolution-pool-grid b,.evolution-pool-grid small{display:block}.evolution-pool-grid b{margin-top:7px;font-size:12px}.evolution-pool-grid small{margin-top:2px;color:#7894ac;font-size:9px}.evolution-pool-panel>.btn{display:block;min-width:180px;margin:0 auto}.evolution-confirm-panel{width:min(520px,94vw);text-align:center}.evolution-confirm-panel h2{margin:6px 0 16px}.evolution-confirm-card{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid rgba(255,210,115,.22);border-radius:15px;background:rgba(255,255,255,.025);text-align:left}.evolution-confirm-card img{width:76px;height:102px;object-fit:cover;border-radius:10px}.evolution-confirm-card span{display:grid;gap:4px}.evolution-confirm-card small{color:#ffd98c}.evolution-confirm-card b{font-size:18px}.evolution-confirm-card em{color:#9fb3c6;font-size:11px;font-style:normal}.evolution-confirm-warning{display:grid;gap:6px;margin:14px 0;padding:13px;border:1px solid rgba(255,139,97,.2);border-radius:13px;background:rgba(58,24,18,.32)}.evolution-confirm-warning b{color:#ffc4ab;font-size:12px}.evolution-confirm-warning span{color:#8da7ba;font-size:10px}.evolution-confirm-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px}.evolution-confirm-submit{background:linear-gradient(135deg,#9a641b,#864048 60%,#4051a2)}.evolution-casting-panel{width:min(540px,94vw);text-align:center;overflow:hidden}.evolution-casting-core{position:relative;display:grid;place-items:center;width:250px;height:260px;margin:0 auto 10px}.evolution-casting-core img{position:relative;z-index:3;width:112px;height:158px;object-fit:cover;border:2px solid rgba(255,224,147,.62);border-radius:14px;box-shadow:0 0 28px rgba(255,189,70,.2)}.evolution-cast-star{position:absolute;z-index:4;top:12px;right:44px;width:48px;height:48px;border:1px solid rgba(255,218,132,.38);border-radius:14px;background:#14130f}.evolution-cast-star i{font-size:22px}.cast-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(104,224,255,.28);border-radius:50%;transform:translate(-50%,-50%)}.cast-ring.a{width:220px;height:220px;border-style:dashed;animation:evolution-ring 5s linear infinite}.cast-ring.b{width:180px;height:250px;border-color:rgba(255,210,110,.28);animation:evolution-ring-reverse 7s linear infinite}.evolution-casting-panel h2{margin:4px 0 8px}.evolution-casting-panel>span{color:#8fa8bd}.evolution-result-panel{position:relative;width:min(520px,94vw);overflow:hidden;text-align:center}.evolution-result-rays{position:absolute;inset:-120px;opacity:.14;background:repeating-conic-gradient(from 0deg,rgba(255,227,153,.5) 0 2deg,transparent 3deg 12deg);animation:evolution-ring 22s linear infinite;pointer-events:none}.evolution-result-panel>*:not(.evolution-result-rays){position:relative;z-index:1}.evolution-result-panel h2{margin:5px 0 15px}.evolution-result-card{position:relative;width:190px;aspect-ratio:2/2.82;margin:0 auto 12px;padding:5px;border-radius:19px;background:linear-gradient(145deg,#ffe593,#6c4510 25%,#08111e 53%,#c88b29 78%,#ffecb0);box-shadow:0 20px 45px rgba(0,0,0,.42),0 0 28px rgba(255,194,72,.2)}.evolution-result-modal.prestige .evolution-result-card{background:linear-gradient(145deg,#fff0b3,#78551c 19%,#151329 46%,#5a3152 72%,#ffdb81)}.evolution-result-card img{width:100%;height:100%;display:block;object-fit:cover;border-radius:14px}.evolution-result-card span{position:absolute;top:10px;left:10px;padding:4px 7px;border-radius:6px;background:rgba(3,8,17,.85);color:#ffe5a8;font-size:9px;font-weight:1000}.evolution-result-panel>strong{display:block;font-size:22px}.evolution-result-panel>small{display:block;margin-top:3px;color:#7e99b0}.evolution-duplicate-reward,.evolution-new-reward{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0;padding:12px;border:1px solid rgba(255,205,111,.18);border-radius:13px;background:rgba(255,255,255,.025)}.evolution-duplicate-reward b{width:100%;color:#ffe3a5}.evolution-duplicate-reward span{padding:5px 8px;border-radius:7px;background:rgba(255,202,95,.08);color:#ffd98b;font-size:11px}.evolution-new-reward{color:#70e4b2;font-weight:900}.evolution-result-confirm{min-width:180px}.evolution-error-panel{width:min(450px,94vw);text-align:center}.evolution-error-panel>i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border:1px solid rgba(255,135,105,.35);border-radius:15px;color:#ffac92;font-size:24px;font-style:normal}.evolution-error-panel h2{margin:5px 0 8px}.evolution-error-panel span,.evolution-error-panel small{display:block}.evolution-error-panel span{color:#b8c7d4}.evolution-error-panel small{margin:7px 0 15px;color:#6ee2ad} @keyframes evolution-spin{to{transform:rotate(360deg)}}@keyframes evolution-ring{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes evolution-ring-reverse{to{transform:translate(-50%,-50%) rotate(-360deg)}} @media(max-width:1180px){.evolution-layout{grid-template-columns:1fr}.evolution-candidate-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:420px}.evolution-process-grid{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr)}} @media(max-width:820px){.evolution-hero{align-items:stretch;flex-direction:column}.evolution-star-wallet{min-width:0}.evolution-process-grid{grid-template-columns:1fr}.evolution-flow-arrow{height:34px;grid-template-columns:1fr auto 1fr;gap:8px}.evolution-flow-arrow i{width:auto;height:1px}.evolution-flow-arrow:after{content:"";height:1px;background:linear-gradient(90deg,rgba(101,225,255,.5),transparent)}.evolution-flow-arrow b{transform:rotate(90deg);font-size:18px}.evolution-slot{min-height:0}.evolution-selected-card{grid-template-columns:minmax(120px,165px) minmax(0,1fr);align-items:center;min-height:260px}.evolution-selected-card>div:last-child{text-align:left}.evolution-core-visual,.evolution-result-mystery{min-height:250px}.evolution-candidate-list{grid-template-columns:1fr 1fr}} @media(max-width:560px){.evolution-page{margin-top:10px}.evolution-hero{padding:20px 16px;border-radius:19px}.evolution-hero h2{font-size:32px}.evolution-star-wallet{padding:11px 13px}.evolution-type-tabs{grid-template-columns:1fr;gap:8px}.evolution-type-tabs button{min-height:78px;padding:14px 16px}.evolution-layout{gap:10px}.evolution-picker,.evolution-main{padding:13px;border-radius:18px}.evolution-candidate-list{grid-template-columns:1fr;max-height:380px}.evolution-process-grid{gap:2px}.evolution-slot{padding:13px;border-radius:15px}.evolution-selected-card{grid-template-columns:1fr;min-height:0;padding-top:18px}.evolution-selected-card>div:last-child{text-align:center}.evolution-selected-art{width:150px}.evolution-core-visual,.evolution-result-mystery{min-height:230px}.evolution-warning-panel p{margin-left:0}.evolution-confirm-actions{grid-template-columns:1fr}.evolution-pool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.evolution-casting-core{width:220px}.evolution-result-card{width:165px}} @media(prefers-reduced-motion:reduce){.evolution-page *{animation:none!important;transition:none!important}}