:root{
  --bg:#0c1024;--panel:#151a34;--panel2:#1d2343;--line:#39406d;--text:#fffdf6;
  --muted:#bac0dd;--violet:#9f69ff;--violet2:#7146ef;--gold:#ffd66b;--red:#ff647f;
  --green:#62efbd;--cyan:#61d7ff;--blue:#5d8dff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080c19;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body{overscroll-behavior:none}
button{font:inherit;color:inherit}
.screen{display:none;min-height:100dvh}.screen.active{display:block}

/* SPLASH */
#splash{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 36%,rgba(117,74,255,.75) 0,rgba(50,53,141,.45) 18%,transparent 42%),
    linear-gradient(180deg,#19265d 0%,#171b42 38%,#111528 72%,#0a0d18 100%);
}
.splash-bg{
  position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 15% 18%,rgba(97,215,255,.28),transparent 18%),
    radial-gradient(circle at 83% 24%,rgba(255,214,107,.19),transparent 15%),
    radial-gradient(circle at 65% 74%,rgba(159,105,255,.24),transparent 20%);
  filter:blur(16px);animation:drift 8s ease-in-out infinite alternate;
}
.aurora{position:absolute;border-radius:50%;filter:blur(42px);opacity:.45;animation:floatGlow 7s ease-in-out infinite alternate}
.a1{width:240px;height:240px;background:#5bd5ff;left:-90px;top:12%}
.a2{width:260px;height:260px;background:#a34dff;right:-100px;top:42%;animation-delay:-2s}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:white;box-shadow:0 0 10px white;opacity:.75;animation:twinkle 2.4s ease-in-out infinite}
.stars i:nth-child(1){left:8%;top:16%}.stars i:nth-child(2){left:18%;top:30%;animation-delay:.3s}.stars i:nth-child(3){left:78%;top:14%;animation-delay:.6s}.stars i:nth-child(4){left:89%;top:37%;animation-delay:.9s}
.stars i:nth-child(5){left:13%;top:63%;animation-delay:1.2s}.stars i:nth-child(6){left:71%;top:68%;animation-delay:1.5s}.stars i:nth-child(7){left:58%;top:13%;animation-delay:1.8s}.stars i:nth-child(8){left:31%;top:11%;animation-delay:2.1s}
.stars i:nth-child(9){left:5%;top:48%;animation-delay:.4s}.stars i:nth-child(10){left:92%;top:59%;animation-delay:.8s}.stars i:nth-child(11){left:37%;top:71%;animation-delay:1.1s}.stars i:nth-child(12){left:67%;top:49%;animation-delay:1.7s}
.splash-content{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));text-align:center}
.sigil{font-size:38px;color:#fff5c8;text-shadow:0 0 12px #fff,0 0 32px #8e70ff}
.sigil.large{font-size:72px}
.eyebrow,.small-label{font-size:10px;letter-spacing:.23em;color:#cfd6ff;font-weight:900}
h1{font-size:58px;line-height:.82;margin:10px 0 8px;letter-spacing:-.05em;text-shadow:0 8px 30px rgba(0,0,0,.35)}
h1 span{
  background:linear-gradient(180deg,#fff9d6 0%,#ffd464 34%,#bb8cff 78%,#8a66ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(178,130,255,.6))
}
.tagline{font-size:12px;letter-spacing:.31em;color:#fff7db;font-weight:900;margin:2px 0 0}
.splash-sub{font-size:11px;color:#ced5f5;margin:8px 0 0}
.portal-wrap{height:290px;width:280px;position:relative;margin:0 0 8px}
.portal{
  position:absolute;width:178px;height:232px;left:51px;top:23px;border-radius:50%;
  border:8px solid rgba(198,175,255,.95);
  box-shadow:0 0 16px #fff,0 0 40px #926bff,0 0 90px rgba(79,211,255,.42), inset 0 0 42px #713eee;
  background:radial-gradient(ellipse at 50% 45%,#b889ff 0,#6737d1 22%,#282f8b 48%,#111b45 69%,#070b18 100%);
  animation:pulsePortal 2.6s ease-in-out infinite;
}
.portal:after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 0 30px rgba(97,215,255,.35)}
.portal-core{position:absolute;width:105px;height:165px;left:87px;top:57px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.7),rgba(98,216,255,.2) 35%,transparent 68%);filter:blur(5px);animation:core 2s ease-in-out infinite}
.portal-rings b{position:absolute;left:50%;top:50%;border:1px solid rgba(183,210,255,.42);border-radius:50%;transform:translate(-50%,-50%);animation:ring 4s linear infinite}
.portal-rings b:nth-child(1){width:215px;height:270px}.portal-rings b:nth-child(2){width:235px;height:292px;animation-direction:reverse;animation-duration:5.5s}.portal-rings b:nth-child(3){width:255px;height:310px;opacity:.4;animation-duration:7s}
.hero-silhouette{position:absolute;z-index:5;bottom:12px;left:110px;width:60px;height:170px;background:linear-gradient(180deg,#3b436c 0,#161a31 38%,#080b15 100%);filter:drop-shadow(0 8px 12px #000);
 clip-path:polygon(35% 0,65% 0,72% 10%,78% 22%,94% 37%,79% 49%,73% 100%,27% 100%,21% 49%,6% 37%,22% 22%,28% 10%)}
.weapon-glow{position:absolute;z-index:6;width:7px;height:120px;left:175px;top:112px;background:#f5e9ff;transform:rotate(14deg);box-shadow:0 0 8px #fff,0 0 22px #a366ff}
.floating-card{position:absolute;z-index:4;padding:7px 9px;border-radius:8px;font-size:8px;font-weight:1000;letter-spacing:.1em;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.fc1{left:4px;top:112px;background:linear-gradient(145deg,rgba(255,199,73,.85),rgba(154,82,255,.65));transform:rotate(-8deg);animation:floatCard 3s ease-in-out infinite}
.fc2{right:2px;top:84px;background:linear-gradient(145deg,rgba(105,218,255,.85),rgba(126,86,255,.65));transform:rotate(7deg);animation:floatCard 3.5s ease-in-out infinite alternate}
.btn{border:0;border-radius:15px;padding:14px 18px;font-weight:1000;letter-spacing:.055em;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#b47dff 0,#7d51f4 50%,#5e3bd5 100%);border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 30px rgba(103,74,240,.36),inset 0 1px rgba(255,255,255,.25)}
.btn.big{width:min(360px,88vw);padding:18px}.btn.ghost{background:rgba(31,36,71,.8);border:1px solid #505b92;color:#e1e6ff}
.btn.small{padding:11px 13px;font-size:12px}.tiny{font-size:11px;color:#9ca7d0}

/* GAME */
#game{
  background:
    radial-gradient(circle at 50% 0,rgba(81,119,255,.18),transparent 28%),
    linear-gradient(180deg,#111936 0,#11152a 35%,#0c1021 100%);
  padding-bottom:86px;
}
.topbar{position:sticky;top:0;z-index:10;padding:calc(14px + env(safe-area-inset-top)) 16px 11px;display:flex;justify-content:space-between;align-items:end;background:rgba(12,16,34,.84);backdrop-filter:blur(22px);border-bottom:1px solid rgba(151,171,255,.18);box-shadow:0 8px 30px rgba(0,0,0,.15)}
.version{font-size:10px;letter-spacing:.13em;color:#b4bfeb}.version span{color:#d5b4ff}.player{font-size:19px;font-weight:1000;margin-top:3px}.player span{font-size:11px;color:#a8b6e7}
.currencies{display:flex;gap:6px}.currency{background:linear-gradient(145deg,#232a50,#171c39);border:1px solid #3d487c;padding:7px 9px;border-radius:10px;font-size:12px;font-weight:1000;box-shadow:inset 0 1px rgba(255,255,255,.06)}.gold{color:var(--gold)}.gems{color:#d7b7ff}
#main{max-width:720px;margin:auto}.tab{display:none;padding:14px 16px 18px}.tab.active{display:block}
.world-banner{height:78px;border-radius:20px;margin-bottom:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border:1px solid rgba(117,174,255,.45);background:linear-gradient(115deg,#27558e 0,#3e3d9e 48%,#6d3b9f 100%);box-shadow:0 14px 32px rgba(26,42,104,.25)}
.world-banner-glow{position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(99,220,255,.35);filter:blur(35px);right:10%;top:-100px}
.world-banner div:not(.world-banner-glow){position:relative}.world-banner span{display:block;font-size:9px;letter-spacing:.2em;color:#dff8ff;font-weight:900}.world-banner b{display:block;margin-top:4px;font-size:18px;letter-spacing:.03em}.world-banner em{position:relative;font-style:normal;font-size:34px;color:#fff2b9;text-shadow:0 0 18px #fff}
.glass{background:linear-gradient(145deg,rgba(31,39,76,.97),rgba(18,24,50,.96));border:1px solid #3c4776;border-radius:20px;box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04)}
.hero-panel{padding:16px}.world-row{display:flex;justify-content:space-between;align-items:center}.world-title{font-size:16px;font-weight:1000;margin-top:3px}.power{background:linear-gradient(145deg,#3b2f63,#25264f);border:1px solid #6f5ca0;padding:8px 10px;border-radius:12px;font-weight:1000;color:#fff3bd;box-shadow:0 0 18px rgba(255,214,107,.08)}
.battle-scene{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;gap:5px;margin:18px 0}
.card-frame{position:relative;min-height:190px;border-radius:16px;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:2px solid #7398ff;background:linear-gradient(160deg,#5478bd 0,#283967 45%,#171d37 100%);box-shadow:0 12px 28px rgba(4,9,26,.3),inset 0 1px rgba(255,255,255,.18)}
.card-frame:before{content:"";position:absolute;inset:-50% auto auto -35%;width:90%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:rotate(22deg);animation:shine 4s linear infinite}
.card-frame.rare{box-shadow:0 0 25px rgba(95,148,255,.35),0 12px 28px rgba(4,9,26,.3)}
.card-frame.common{border-color:#8a7da0;background:linear-gradient(160deg,#5c526b,#2d2a42 50%,#1b1c30)}
.enemy-card{transform:perspective(500px) rotateY(-5deg)}
.avatar{position:absolute;inset:12px 10px 55px;display:flex;align-items:center;justify-content:center;font-size:64px;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.2),transparent 60%);filter:drop-shadow(0 8px 10px #000)}
.card-name{font-size:14px;font-weight:1000;letter-spacing:.08em}.card-sub{font-size:8px;color:#d2d6e8;letter-spacing:.1em;margin-top:2px}
.hpbar{height:8px;background:#14192e;border-radius:99px;margin-top:8px;overflow:hidden}.hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#38c889,#83f4c5);transition:.25s;box-shadow:0 0 10px rgba(98,239,189,.4)}.enemyhp i{background:linear-gradient(90deg,#ff526e,#ff906e)}
.hptext{text-align:center;font-size:9px;color:#b8c0dd;margin-top:3px}.versus{text-align:center}.vs{font-size:11px;color:#adb7de;font-weight:900;margin-top:7px}.stage-orb{width:41px;height:41px;border-radius:50%;display:grid;place-items:center;margin:auto;background:radial-gradient(circle at 35% 25%,#c597ff,#724cff 45%,#3c2b94 100%);box-shadow:0 0 22px #6c6dff;font-weight:1000;border:1px solid rgba(255,255,255,.3)}
.battle-log{text-align:center;background:linear-gradient(145deg,#1a2143,#121831);border:1px solid #34406d;padding:9px;border-radius:11px;font-size:11px;color:#cbd3ef;margin:8px 0 10px;min-height:36px}
.hero-panel>.btn{width:100%;margin-top:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.feature-card{min-height:88px;text-align:left;border-radius:17px;border:1px solid #3b4672;background:linear-gradient(145deg,#27305b,#171d3a);padding:13px;box-shadow:0 10px 26px rgba(0,0,0,.16)}.feature-card b,.feature-card small{display:block}.feature-card b{font-size:12px;margin-top:5px}.feature-card small{font-size:9px;color:#aeb9dd;margin-top:2px}.feature-icon{font-size:20px;color:#d1b1ff;text-shadow:0 0 12px #7e61ff}.feature-card.locked{opacity:.5}
.progress-card{margin-top:12px;padding:13px}.progress{height:6px;border-radius:99px;background:#20274b;margin-top:10px;overflow:hidden}.progress i{display:block;height:100%;width:10%;background:linear-gradient(90deg,#60d9ff,#9d67ff,#ffd469);box-shadow:0 0 12px rgba(97,215,255,.45)}
.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.section-title h2{margin:3px 0 0;font-size:25px}.count,.vip{font-size:12px;background:#202747;border:1px solid #3e4a77;padding:7px 9px;border-radius:10px}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mini-card{min-height:160px}.mini-card.locked{filter:grayscale(1);opacity:.45}
.info-panel{padding:14px;margin-top:12px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.info-panel .btn{grid-column:1/-1}.info-panel span{font-weight:1000;color:#e2c8ff}
.summon-altar{text-align:center;padding:45px 18px 25px;border-radius:24px;border:1px solid #5f5ca5;background:radial-gradient(circle at 50% 25%,rgba(92,219,255,.25),transparent 24%),radial-gradient(circle at 50% 40%,rgba(148,88,255,.22),transparent 36%),linear-gradient(#263264,#171c3b 60%,#10152a);position:relative;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.25)}.altar-glow{position:absolute;left:50%;top:25px;width:140px;height:140px;transform:translateX(-50%);border-radius:50%;box-shadow:0 0 80px #5a85ff}.summon-altar>*{position:relative}.summon-altar h2{font-size:28px;margin:7px}.summon-altar p{font-size:12px;color:#bdc7ec}.pity{margin:15px 0;font-size:11px;letter-spacing:.1em}.summon-altar .btn{margin:6px auto;display:block}.summon-result{margin-top:12px}
.offer{position:relative;border-radius:18px;background:linear-gradient(145deg,#26305b,#171d3a);border:1px solid #434f80;padding:15px}.hero-offer{background:radial-gradient(circle at 90% 20%,rgba(255,210,91,.24),transparent 30%),linear-gradient(145deg,#483d6f,#21264d);border-color:#786c9c;margin-bottom:10px}.offer h3{margin:0 0 6px;font-size:14px}.offer p{margin:0 0 13px;font-size:11px;color:#c1c8e7}.badge{position:absolute;right:10px;top:10px;background:linear-gradient(#ffe58d,#ffc94d);color:#2d1f00;padding:4px 6px;border-radius:7px;font-size:8px;font-weight:1000}.buy{background:linear-gradient(#ffe17f,#eaa642);color:#2a1900;padding:10px 14px}.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shop-note{font-size:10px;color:#9ba6cc;text-align:center;margin-top:14px}
.bottomnav{position:fixed;z-index:20;bottom:0;left:0;right:0;height:calc(68px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(12,16,34,.92);backdrop-filter:blur(22px);border-top:1px solid #3a4775;box-shadow:0 -10px 30px rgba(0,0,0,.18)}.navbtn{border:0;background:none;color:#8996c4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:19px}.navbtn span{font-size:8px;font-weight:900;letter-spacing:.12em}.navbtn.active{color:#ead5ff;text-shadow:0 0 12px #8c72ff}
#toast{position:fixed;z-index:50;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);opacity:0;background:#27305a;border:1px solid #566597;border-radius:12px;padding:10px 14px;font-size:11px;transition:.25s;pointer-events:none;white-space:nowrap}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;z-index:100;inset:0;background:rgba(4,7,17,.72);display:grid;place-items:center;padding:22px;backdrop-filter:blur(8px)}.modal.hidden{display:none}.modal-card{width:min(360px,100%);text-align:center;background:linear-gradient(#2a3260,#151a35);border:1px solid #6f67a4;border-radius:24px;padding:25px;box-shadow:0 20px 70px #000}.modal-icon{font-size:55px;color:#ffe292;text-shadow:0 0 25px #8f76ff}.modal-card h3{font-size:24px;margin:8px}.modal-card p{font-size:12px;color:#cad1ef;line-height:1.5}
@keyframes drift{to{transform:translate3d(3%,2%,0) scale(1.04)}}
@keyframes floatGlow{to{transform:translateY(28px) translateX(10px) scale(1.08)}}
@keyframes twinkle{50%{opacity:.2;transform:scale(.7)}}
@keyframes pulsePortal{50%{transform:scale(1.025);box-shadow:0 0 20px #fff,0 0 52px #956dff,0 0 110px rgba(79,211,255,.48),inset 0 0 50px #713eee}}
@keyframes core{50%{opacity:.55;transform:scale(.92)}}
@keyframes ring{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes floatCard{50%{translate:0 -9px}}
@keyframes shine{to{left:120%}}
@media(max-width:370px){h1{font-size:52px}.portal-wrap{transform:scale(.92);margin:-8px 0}.card-frame{min-height:165px}.battle-scene{grid-template-columns:1fr 40px 1fr}.card-name{font-size:12px}}


/* =========================================================
   V0.3 CINEMATIC OPENING — THE GRAND RIFT
   ========================================================= */
#splash{
  background:
    radial-gradient(circle at 50% 43%,rgba(104,84,255,.66) 0,rgba(55,70,160,.35) 18%,transparent 42%),
    linear-gradient(180deg,#1a2b61 0%,#151d45 35%,#0c122a 69%,#070a14 100%);
}
#splash .splash-bg{
  inset:0;
  background:
    radial-gradient(circle at 18% 26%,rgba(102,224,255,.23),transparent 18%),
    radial-gradient(circle at 82% 24%,rgba(250,205,100,.15),transparent 17%),
    radial-gradient(circle at 50% 54%,rgba(135,86,255,.27),transparent 25%);
  filter:blur(12px);
}
.sky-beam{position:absolute;top:-10%;width:140px;height:70%;background:linear-gradient(180deg,rgba(166,225,255,.22),transparent);filter:blur(12px);transform-origin:top;opacity:.65}
.beam1{left:12%;transform:rotate(11deg)} .beam2{right:12%;transform:rotate(-11deg)}
.mist{position:absolute;left:-20%;right:-20%;height:130px;border-radius:50%;filter:blur(30px);opacity:.35;animation:mistDrift 8s ease-in-out infinite alternate}
.mist1{bottom:18%;background:rgba(102,113,224,.32)} .mist2{bottom:4%;background:rgba(160,94,230,.24);animation-delay:-3s}
#splash .splash-content{justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));}
.opening-top{position:relative;z-index:4;padding-top:6px}
#splash h1{font-size:58px;margin:6px 0 5px;line-height:.8}
#splash .tagline{margin:6px 0 0;font-size:11px}
.cinematic-gate{position:relative;width:min(430px,100vw);height:min(56vh,540px);min-height:400px;margin:-8px auto -4px;perspective:800px}
.ruin{position:absolute;bottom:24px;width:92px;height:255px;background:linear-gradient(180deg,#27305c,#13182f 55%,#080b15);filter:drop-shadow(0 12px 16px #000);opacity:.9}
.ruin:before,.ruin:after{content:"";position:absolute;background:#1b2141}
.ruin:before{width:25px;height:80px;top:-38px}.ruin:after{width:48px;height:24px;top:30px}
.ruin-left{left:-30px;clip-path:polygon(22% 0,78% 8%,94% 100%,0 100%)} .ruin-left:before{left:24px}
.ruin-right{right:-30px;clip-path:polygon(18% 8%,78% 0,100% 100%,6% 100%)} .ruin-right:before{right:24px}
.ground-runes{position:absolute;left:50%;bottom:4px;width:330px;height:105px;transform:translateX(-50%) rotateX(68deg);border:2px solid rgba(134,198,255,.34);border-radius:50%;box-shadow:0 0 24px rgba(126,130,255,.35),inset 0 0 36px rgba(142,77,255,.22)}
.ground-runes:after{content:"";position:absolute;inset:18px;border:1px dashed rgba(255,222,141,.35);border-radius:50%;animation:ring 11s linear infinite}
.portal-shadow{position:absolute;left:50%;bottom:42px;width:220px;height:44px;transform:translateX(-50%);border-radius:50%;background:rgba(68,59,195,.55);filter:blur(20px);box-shadow:0 0 45px #6d52ff}
.portal-frame{position:absolute;left:50%;top:49%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.pf1{width:242px;height:340px;border:14px solid rgba(197,203,255,.96);box-shadow:0 0 12px #fff,0 0 34px #8f7bff,0 0 80px rgba(94,217,255,.55),inset 0 0 42px #7956ff;animation:gatePulse 2.4s ease-in-out infinite}
.pf2{width:273px;height:372px;border:2px solid rgba(126,215,255,.6);box-shadow:0 0 22px rgba(95,213,255,.6);animation:gateRotate 12s linear infinite}
.pf3{width:305px;height:402px;border:1px dashed rgba(255,222,132,.44);animation:gateRotate 18s linear reverse infinite}
.portal-flare{position:absolute;left:50%;top:49%;width:186px;height:286px;transform:translate(-50%,-50%);border-radius:50%;background:
 radial-gradient(ellipse at 50% 34%,rgba(255,255,255,.98) 0,rgba(124,226,255,.72) 9%,rgba(129,87,255,.65) 31%,rgba(43,44,137,.9) 58%,rgba(8,12,31,.98) 78%);
 box-shadow:inset 0 0 38px rgba(255,255,255,.42),0 0 55px rgba(104,102,255,.45);overflow:hidden}
.portal-flare:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 30deg,transparent,rgba(255,255,255,.22),transparent 22%,rgba(116,226,255,.16),transparent 45%,rgba(255,216,116,.12),transparent 74%);animation:swirl 7s linear infinite}
.portal-core{position:absolute;left:50%;top:48%;width:102px;height:210px;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(117,218,255,.22) 22%,rgba(104,68,255,.18) 60%,transparent);filter:blur(6px);animation:coreBreath 2.3s ease-in-out infinite}
.rift-crack{position:absolute;width:2px;background:linear-gradient(#fff,#76ddff,transparent);filter:drop-shadow(0 0 5px #72dfff);transform-origin:bottom;opacity:.8}
.rc1{height:72px;left:20%;top:20%;transform:rotate(28deg)} .rc2{height:64px;right:17%;top:28%;transform:rotate(-34deg)} .rc3{height:50px;left:28%;bottom:22%;transform:rotate(46deg)}
.champion{position:absolute;z-index:8;left:50%;bottom:25px;width:104px;height:220px;transform:translateX(-50%);filter:drop-shadow(0 15px 14px rgba(0,0,0,.75))}
.champion .body{position:absolute;left:29px;top:50px;width:47px;height:145px;background:linear-gradient(180deg,#5d6f9c,#232d55 38%,#0b1021 100%);clip-path:polygon(20% 0,80% 0,100% 40%,74% 100%,26% 100%,0 40%)}
.champion .head{position:absolute;left:39px;top:14px;width:27px;height:36px;border-radius:50% 50% 42% 42%;background:linear-gradient(#8ba0ca,#29375d);box-shadow:0 0 12px rgba(145,198,255,.3)}
.champion .shoulder{position:absolute;top:55px;width:30px;height:24px;border-radius:12px 12px 5px 5px;background:#596b99;border:1px solid #91a7d1}
.champion .s-left{left:15px;transform:rotate(-15deg)} .champion .s-right{right:15px;transform:rotate(15deg)}
.champion .cape{position:absolute;left:24px;top:61px;width:65px;height:150px;background:linear-gradient(180deg,#432778,#1a153c 70%,#090c18);clip-path:polygon(14% 0,86% 0,100% 100%,52% 87%,0 100%);animation:cape 3s ease-in-out infinite alternate;transform-origin:top}
.champion .sword{position:absolute;right:2px;top:38px;width:8px;height:158px;background:linear-gradient(90deg,#7d89b7,#fff,#7da4ff);transform:rotate(13deg);box-shadow:0 0 8px #fff,0 0 20px #7fcaff}
.monster-eye{position:absolute;z-index:5;width:12px;height:5px;border-radius:50%;background:#ffcf5b;box-shadow:0 0 7px #ffd65d,0 0 18px #ff7a38;opacity:.88;animation:eyeBlink 4s infinite}
.eye1{left:44px;top:45%}.eye2{right:44px;top:50%;animation-delay:1.1s}
#splash .floating-card{min-width:92px;padding:9px 10px;display:flex;flex-direction:column;gap:2px;background:rgba(21,29,67,.72);border:1px solid rgba(195,215,255,.35);box-shadow:0 12px 32px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.08)}
#splash .floating-card strong{font-size:8px;letter-spacing:.12em;color:#ffe48b}
#splash .floating-card span{font-size:7px;letter-spacing:.16em;color:#d3dcff}
#splash .fc1{left:3px;top:27%;transform:rotate(-8deg);animation:cardHover1 3.4s ease-in-out infinite}
#splash .fc2{right:3px;top:22%;transform:rotate(8deg);animation:cardHover2 3.9s ease-in-out infinite}
.opening-bottom{position:relative;z-index:10;width:100%;max-width:420px}
.opening-bottom .splash-sub{margin:0 0 10px;color:#d5ddfb;font-size:11px}
.enter-rift-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;margin:auto;background:linear-gradient(180deg,#fff1a4 0,#ffce5d 18%,#a56dff 56%,#6748e6 100%);color:#17142b;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 18px rgba(255,231,148,.5),0 13px 38px rgba(103,72,230,.45),inset 0 1px rgba(255,255,255,.75)}
.enter-rift-btn span{font-size:14px;letter-spacing:.12em}.enter-rift-btn b{font-size:23px;line-height:1}
.opening-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.opening-meta span{font-size:7px;letter-spacing:.08em;color:#aeb9df;background:rgba(17,24,53,.62);border:1px solid rgba(100,120,180,.3);padding:5px 7px;border-radius:999px}
@keyframes mistDrift{to{transform:translateX(8%)}}
@keyframes gatePulse{50%{transform:translate(-50%,-50%) scale(1.025);box-shadow:0 0 18px #fff,0 0 46px #9682ff,0 0 110px rgba(94,217,255,.62),inset 0 0 52px #7956ff}}
@keyframes gateRotate{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes swirl{to{transform:rotate(360deg)}}
@keyframes coreBreath{50%{opacity:.56;transform:translate(-50%,-50%) scale(.94)}}
@keyframes cape{to{transform:skewX(-5deg) translateX(-2px)}}
@keyframes eyeBlink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}
@keyframes cardHover1{50%{transform:translateY(-10px) rotate(-6deg)}} 
@keyframes cardHover2{50%{transform:translateY(-12px) rotate(6deg)}}
@media(max-width:390px){
  .cinematic-gate{height:min(53vh,500px);min-height:370px;transform:scale(.94);transform-origin:center}
  #splash h1{font-size:53px}
  .opening-meta{gap:5px}
}


/* ==========================================================
   V0.4 — APPROVED IMAGE START SCREEN + WORKING BUTTONS
   ========================================================== */
#splash{background:#03050c;overflow:hidden}
.approved-start-screen{
  position:relative;
  width:100%;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  background:#03050c;
}
.approved-start-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center center;
  user-select:none;
  -webkit-user-drag:none;
}
.start-hit{
  position:absolute;
  z-index:8;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:18px;
  -webkit-tap-highlight-color:transparent;
}
.start-hit:active{
  background:rgba(255,255,255,.08);
  box-shadow:0 0 24px rgba(164,111,255,.4);
}
.enter-hit{left:8%;right:8%;bottom:14.0%;height:9.5%}
.settings-hit{left:3.5%;width:30%;bottom:3.0%;height:8.0%}
.server-hit{left:35%;width:30%;bottom:3.0%;height:8.0%}
.account-hit{right:3.5%;width:30%;bottom:3.0%;height:8.0%}

.start-modal{
  position:fixed;z-index:200;inset:0;
  display:grid;place-items:center;
  padding:20px;
  background:rgba(2,4,12,.82);
  backdrop-filter:blur(12px);
}
.start-modal.hidden{display:none}
.start-modal-card{
  width:min(420px,94vw);
  max-height:82dvh;
  overflow:auto;
  position:relative;
  padding:24px;
  border-radius:24px;
  color:#fff8e8;
  background:
    radial-gradient(circle at 50% 0,rgba(111,61,220,.22),transparent 32%),
    linear-gradient(180deg,#171122,#0b0a12);
  border:1px solid #6e4c92;
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 40px rgba(115,65,210,.2);
}
.start-modal-card h2{margin:4px 0 16px;font-size:25px}
.modal-kicker{font-size:9px;letter-spacing:.25em;color:#d9bcff;font-weight:900}
.modal-x{
  position:absolute;right:12px;top:10px;
  width:38px;height:38px;border-radius:50%;
  border:1px solid #544165;background:#1c1424;color:white;font-size:22px;
}
.profile-avatar{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  margin:8px auto 18px;
  font-size:34px;
  color:#ffe09a;
  background:radial-gradient(circle,#6c4aa5,#21152f 70%);
  border:2px solid #b88df0;
  box-shadow:0 0 26px rgba(159,105,255,.34);
}
.start-modal label{display:block;font-size:10px;color:#a99bb7;margin:10px 0 6px}
.start-modal input{
  width:100%;padding:14px;border-radius:12px;
  border:1px solid #4f3b61;background:#110d17;color:white;
  font:inherit;
}
.account-stats{display:grid;gap:8px;margin:14px 0}
.account-stats span{
  display:flex;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:11px;
  background:#120e18;border:1px solid #2d2238;color:#a99fb1;font-size:11px;
}
.account-stats b{color:#fff5cf}
.server-note{font-size:11px;color:#a99db4;margin-top:-6px}
.server-list{display:grid;gap:8px;margin:14px 0}
.server-row{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:10px;
  width:100%;padding:12px;
  border-radius:12px;border:1px solid #3b2d48;
  background:#110d17;color:#eee4f4;text-align:left;
}
.server-row.selected{
  border-color:#a879ff;
  box-shadow:0 0 20px rgba(145,91,255,.22);
  background:linear-gradient(145deg,#28183a,#151020);
}
.server-dot{width:9px;height:9px;border-radius:50%}
.server-dot.good{background:#45d978;box-shadow:0 0 9px #45d978}
.server-dot.busy{background:#ffc646;box-shadow:0 0 9px #ffc646}
.server-dot.full{background:#ff4d62;box-shadow:0 0 9px #ff4d62}
.server-meta{display:flex;flex-direction:column}
.server-meta b{font-size:13px}.server-meta small{font-size:9px;color:#93889d;margin-top:2px}
.server-status{font-size:10px;text-transform:uppercase;color:#c8b7d5}
.setting-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid #2b2035;
}
.setting-row b,.setting-row small{display:block}.setting-row small{font-size:9px;color:#968b9f;margin-top:2px}
.toggle-btn{
  min-width:58px;padding:9px 11px;border-radius:10px;
  border:1px solid #614a76;background:#261936;color:#dfc4ff;font-weight:900;
}
.start-modal-card>.btn{width:100%;margin-top:14px}

@media(max-width:390px){
  .enter-hit{bottom:14.0%;height:9.5%}
  .account-hit,.server-hit,.settings-hit{bottom:3.0%;height:8.0%}
}

/* V0.4.4 iPhone Safari: keep the complete approved artwork and all bottom controls visible. */
@supports (height: 100svh){
  .approved-start-screen{height:100svh;min-height:100svh;}
}

/* ==========================================================
   V0.5 — EQUIPMENT / RIFT LOOT
   ========================================================== */
.equipment-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:14px 16px}
.equipment-summary b{display:block;font-size:23px;color:#ffe49b;margin-top:2px}
.equipment-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
.gear-slot{position:relative;min-height:106px;padding:12px;border-radius:16px;border:1px solid #343b68;background:linear-gradient(145deg,#171c38,#0d1128);overflow:hidden}
.gear-slot.empty{opacity:.72;border-style:dashed}
.gear-slot .slot-name{font-size:8px;letter-spacing:.18em;color:#9fa7ca;font-weight:900}
.gear-slot .item-name{display:block;margin-top:9px;font-size:13px;font-weight:900;color:#fff8e4}
.gear-slot .item-rarity{display:block;margin-top:5px;font-size:9px;font-weight:900;letter-spacing:.08em}
.gear-slot .item-stat{display:block;margin-top:7px;font-size:10px;color:#c8cee8}
.gear-slot.common,.loot-card.common{border-color:#5e6788}.gear-slot.rare,.loot-card.rare{border-color:#428bff;box-shadow:inset 0 0 20px rgba(66,139,255,.08)}
.gear-slot.epic,.loot-card.epic{border-color:#a763ff;box-shadow:0 0 18px rgba(167,99,255,.12)}
.gear-slot.legendary,.loot-card.legendary{border-color:#ffca52;box-shadow:0 0 20px rgba(255,202,82,.16)}
.gear-slot.mythic,.loot-card.mythic{border-color:#ff5fc7;box-shadow:0 0 22px rgba(255,95,199,.18)}
.gear-slot.ancient,.loot-card.ancient{border-color:#ff7f50;box-shadow:0 0 26px rgba(255,127,80,.24),inset 0 0 20px rgba(255,127,80,.08)}
.gear-slot.celestial,.loot-card.celestial{border-color:#8fe9ff;box-shadow:0 0 30px rgba(143,233,255,.30),inset 0 0 24px rgba(143,233,255,.09)}
.gear-slot.sovereign,.loot-card.sovereign{border-color:#fff3a1;box-shadow:0 0 36px rgba(255,243,161,.38),0 0 10px rgba(188,111,255,.28),inset 0 0 26px rgba(255,255,255,.08)}
.inventory-header{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:8px 2px 10px}.inventory-header small{font-size:9px;color:#9299bc;text-align:right;max-width:190px}
.inventory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-bottom:12px}
.loot-card{padding:11px;border-radius:14px;border:1px solid #39406d;background:linear-gradient(145deg,#171b35,#10142a);text-align:left;color:#fff;min-height:112px}
.loot-card b{display:block;font-size:12px;margin:5px 0}.loot-card small{display:block;font-size:8px;letter-spacing:.08em}.loot-card .loot-stat{font-size:10px;color:#dde2fb;margin:8px 0}.loot-card button{width:100%;padding:8px;border-radius:9px;border:1px solid #514a7c;background:#251f49;color:#fff;font-size:9px;font-weight:900}
.loot-empty{grid-column:1/-1;padding:30px 18px;text-align:center;border:1px dashed #3b426d;border-radius:16px;color:#989fc1;font-size:11px}
.loot-flash{animation:lootFlash .8s ease-out}@keyframes lootFlash{0%{box-shadow:0 0 0 0 rgba(255,222,122,.85)}100%{box-shadow:0 0 0 28px rgba(255,222,122,0)}}
.bottomnav{grid-template-columns:repeat(5,1fr)}
.bottomnav .navbtn{font-size:18px}.bottomnav .navbtn span{font-size:7px}
@media(max-width:370px){.equipment-slots,.inventory-grid{gap:7px}.gear-slot{padding:10px}.bottomnav .navbtn span{font-size:6px}}


/* V0.5.3 — LOOT IMPACT. Visual intensity follows rarity; no early high-rarity giveaways. */
body.loot-rare .modal-card{box-shadow:0 0 42px rgba(66,139,255,.28),0 20px 70px #000}
body.loot-epic .modal-card{border-color:#a763ff;box-shadow:0 0 58px rgba(167,99,255,.48),0 20px 70px #000;animation:rareDropPulse .7s ease-out}
body.loot-legendary .modal-card{border-color:#ffca52;box-shadow:0 0 70px rgba(255,202,82,.58),0 20px 70px #000;animation:rareDropPulse .85s ease-out}
body.loot-mythic .modal-card{border-color:#ff5fc7;box-shadow:0 0 85px rgba(255,95,199,.68),0 20px 70px #000;animation:mythicDropPulse 1s ease-out}
body.loot-epic .modal-icon{color:#c79aff;text-shadow:0 0 28px #8d45ff}
body.loot-legendary .modal-icon{color:#ffe08a;text-shadow:0 0 32px #ffb52e}
body.loot-mythic .modal-icon{color:#ff9de1;text-shadow:0 0 36px #ff3fbd}
@keyframes rareDropPulse{0%{transform:scale(.88);filter:brightness(1.8)}60%{transform:scale(1.025)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes mythicDropPulse{0%{transform:scale(.82);filter:brightness(2.2)}45%{transform:scale(1.045)}100%{transform:scale(1);filter:brightness(1)}}


/* V0.5.4 — ENDGAME RARITIES. Ancient 201+, Celestial 401+, Sovereign 801+. */
body.loot-ancient .modal-card{border-color:#ff7f50;box-shadow:0 0 95px rgba(255,127,80,.72),0 20px 80px #000;animation:ancientDropPulse 1.05s ease-out}
body.loot-celestial .modal-card{border-color:#8fe9ff;box-shadow:0 0 110px rgba(143,233,255,.82),0 0 38px rgba(143,233,255,.35),0 20px 90px #000;animation:celestialDropPulse 1.15s ease-out}
body.loot-sovereign .modal-card{border-color:#fff3a1;box-shadow:0 0 135px rgba(255,243,161,.88),0 0 58px rgba(177,103,255,.55),0 20px 100px #000;animation:sovereignDropPulse 1.3s ease-out}
body.loot-ancient .modal-icon{color:#ffb08d;text-shadow:0 0 42px #ff6437}
body.loot-celestial .modal-icon{color:#d8f8ff;text-shadow:0 0 48px #66dcff}
body.loot-sovereign .modal-icon{color:#fffbd2;text-shadow:0 0 34px #fff27a,0 0 60px #a96cff}
@keyframes ancientDropPulse{0%{transform:scale(.78) rotate(-1deg);filter:brightness(2.4)}42%{transform:scale(1.055) rotate(.5deg)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes celestialDropPulse{0%{transform:scale(.74);filter:brightness(2.8) saturate(1.5)}40%{transform:scale(1.065)}70%{transform:scale(.99)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes sovereignDropPulse{0%{transform:scale(.68);filter:brightness(3.2) saturate(1.8)}35%{transform:scale(1.085)}58%{transform:scale(.975)}78%{transform:scale(1.025)}100%{transform:scale(1);filter:brightness(1)}}