:root{
  --blue-1:#1b3f86; --blue-2:#2455b3; --blue-3:#3b7be0; --blue-4:#5aa0ff; --navy:#10244f;
  --gold-1:#ffd84a; --gold-2:#ffb300; --gold-3:#c77800;
  --green-1:#8ee34a; --green-2:#4cb31f; --pink:#e03cff;
  --text:#fff; --shadow:0 3px 0 rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:#07122e;color:var(--text);font-family:Nunito,system-ui,sans-serif;overflow:hidden;touch-action:none}
.lil{font-family:'Lilita One',Nunito,sans-serif;letter-spacing:.5px}
.stroke{text-shadow:0 2px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000}
/* Fixed design size (400x820) scaled uniformly to fit any screen: the game looks identical everywhere */
#backdrop{position:fixed;inset:-40px;background:#07122e center/cover no-repeat;filter:blur(18px) brightness(.55) saturate(1.2);transform:scale(1.05)}
#app{position:absolute;left:50%;top:50%;width:400px;height:820px;margin:0;overflow:hidden;background:linear-gradient(#1d4fa8,#0f2c6b);
  transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center center;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.55)}
@media (max-aspect-ratio: 400/820){#app{box-shadow:none}}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.on{display:flex}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
img{-webkit-user-drag:none;pointer-events:none}

/* ---------- 3D-ish chunky buttons ---------- */
.btn{position:relative;border-radius:14px;padding:10px 18px;font-family:'Lilita One';font-size:20px;color:#fff;
  background:linear-gradient(#ffe36b,#ffba1f 55%,#f39c00);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 #8a4e00,0 6px 10px rgba(0,0,0,.35);
  text-shadow:0 2px 0 rgba(0,0,0,.45),1px 1px 0 #7a4200,-1px -1px 0 #7a4200,1px -1px 0 #7a4200,-1px 1px 0 #7a4200;transition:transform .08s}
.btn:active{transform:translateY(3px) scale(.97);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.6),0 1px 0 #8a4e00}
.btn.blue{background:linear-gradient(#7fc2ff,#3b8cf0 55%,#2466cc);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #173f86,0 6px 10px rgba(0,0,0,.35);text-shadow:0 2px 0 rgba(0,0,0,.45)}
.btn.green{background:linear-gradient(#a6f06a,#5bc22a 55%,#3d9a15);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #245f0a,0 6px 10px rgba(0,0,0,.35);text-shadow:0 2px 0 rgba(0,0,0,.45)}
.btn.red{background:linear-gradient(#ff8a8a,#e8413f 55%,#b8261f);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #6b1210,0 6px 10px rgba(0,0,0,.35);text-shadow:0 2px 0 rgba(0,0,0,.45)}

/* ---------- loading ---------- */
#loading{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#3f8cff 0,#1a47a0 45%,#0b1f55 100%);background-size:cover}
.logo{font-family:'Lilita One';text-align:center;line-height:.9;transform:rotate(-3deg)}
.logo .l1{font-size:58px;color:#ffe25c;text-shadow:0 5px 0 #b86a00,0 8px 0 #3a1c00,3px 3px 0 #3a1c00,-3px -3px 0 #3a1c00,3px -3px 0 #3a1c00,-3px 3px 0 #3a1c00,0 12px 20px rgba(0,0,0,.5)}
.logo .l2{font-size:26px;color:#fff;margin:4px 0;text-shadow:0 3px 0 #1a3a80,2px 2px 0 #0a1a40,-2px -2px 0 #0a1a40,2px -2px 0 #0a1a40,-2px 2px 0 #0a1a40}
.logo .crown{width:70px;display:block;margin:0 auto -6px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35));animation:bob 2.4s ease-in-out infinite}
#loadbar{width:70%;height:22px;border-radius:12px;background:#0a1a40;margin-top:48px;border:3px solid #000;overflow:hidden;box-shadow:0 3px 0 rgba(255,255,255,.15)}
#loadfill{height:100%;width:0;background:linear-gradient(#ffe36b,#ffb300);transition:width .2s}
#loadtxt{margin-top:10px;font-weight:800;opacity:.85}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:8px;padding:10px 10px 6px;position:relative;z-index:3}
.pill{display:flex;align-items:center;height:30px;border-radius:9px;background:rgba(5,15,45,.75);border:2px solid rgba(0,0,0,.6);padding:0 8px 0 28px;position:relative;font-family:'Lilita One';font-size:17px;min-width:92px;justify-content:flex-end;box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.pill img{position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:36px}
.pill .plus{margin-left:6px;width:20px;height:20px;border-radius:5px;background:linear-gradient(#8ee34a,#3d9a15);display:grid;place-items:center;font-size:16px;line-height:1;box-shadow:0 2px 0 #1f5a07}
.xp{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.xp .lvl{width:36px;height:40px;background:url() center/contain no-repeat;display:grid;place-items:center;font-family:'Lilita One';font-size:18px;position:relative}
.xp .lvl svg{position:absolute;inset:0}
.xp .lvl span{position:relative}
.xp .nm{font-family:'Lilita One';font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp .clan{font-size:11px;opacity:.8;font-weight:800}

/* ---------- pages & nav ---------- */
#pages{flex:1;position:relative;overflow:hidden}
#track{position:absolute;inset:0;display:flex;width:500%;transition:transform .35s cubic-bezier(.3,1.2,.5,1)}
.page{width:20%;height:100%;position:relative;overflow:hidden;display:flex;flex-direction:column}
#nav{display:flex;height:74px;background:linear-gradient(#27477f,#16284f);border-top:3px solid #0b1633;position:relative;z-index:4;padding-bottom:env(safe-area-inset-bottom)}
#nav button{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:flex .25s;border-right:2px solid rgba(0,0,0,.35)}
#nav button img{width:44px;transition:transform .25s;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
#nav button span{font-family:'Lilita One';font-size:14px;display:none;margin-top:-4px}
#nav button.on{flex:1.5;background:linear-gradient(#ffd247,#f0a000);border-radius:8px 8px 0 0;margin-top:-10px;box-shadow:inset 0 3px 0 rgba(255,255,255,.5)}
#nav button.on img{transform:translateY(-4px) scale(1.15)}
#nav button.on span{display:block}
#nav button.locked img{filter:grayscale(.7) brightness(.8) drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.soon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:.9;padding:20px;text-align:center}
.soon img{width:120px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.3));animation:bob 3s ease-in-out infinite}

/* ---------- battle page ---------- */
.home-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,#56c8e8 0,#2a8ab8 38%,#1c4f8a 70%,#132d5e 100%)}
.menu-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;transform:scale(1.04);animation:kenburns 30s ease-in-out infinite alternate}
.menu-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(12,30,80,.55) 0,rgba(12,30,80,0) 22%,rgba(12,30,80,0) 55%,rgba(10,24,64,.75) 82%,#0d1f4d 100%)}
@keyframes kenburns{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.12) translateY(-10px)}}
.rays{position:absolute;left:50%;top:26%;width:760px;height:760px;margin:-380px 0 0 -380px;background:repeating-conic-gradient(from 0deg,rgba(255,244,190,.16) 0 8deg,transparent 8deg 22deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);animation:spin 60s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;background:#fff6b0;box-shadow:0 0 8px 2px rgba(255,230,120,.8);opacity:.0;animation:mote linear infinite}
@keyframes mote{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-110vh) translateX(30px);opacity:0}}
.hdr{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:4px 12px 0}
.chip{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 6px;border-radius:18px;background:linear-gradient(rgba(8,20,55,.8),rgba(8,20,55,.6));border:2px solid rgba(255,255,255,.18);font-family:'Lilita One';font-size:20px;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.chip img{width:34px;margin:-6px 0}
.hdr .icons{display:flex;gap:8px}
.round{width:42px;height:42px;border-radius:12px;background:linear-gradient(#5aa7ff,#2463c9);border:2px solid #0b2a66;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 #0b2a66;display:grid;place-items:center;font-size:18px;position:relative}
.round img{width:30px}
.badge{position:absolute;top:-8px;right:-8px;background:#ff2d3d;border:2px solid #fff;border-radius:10px;font-size:12px;font-weight:900;min-width:22px;height:22px;display:grid;place-items:center;padding:0 5px}
.arena-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;padding-top:4px}
.ribbon{position:relative;flex:none;width:72%;max-width:300px;margin-bottom:-4px;z-index:2;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.ribbon img{width:100%;display:block}
.ribbon div{position:absolute;left:18%;right:12%;top:20%;height:42%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ribbon small{font-family:Nunito;font-weight:900;font-size:10px;color:#7a4200;letter-spacing:1.5px;text-transform:uppercase}
.ribbon b{font-family:'Lilita One';font-weight:400;font-size:19px;color:#fff;text-shadow:0 2px 0 #9a5a00,1px 1px 0 #7a4200,-1px -1px 0 #7a4200,1px -1px 0 #7a4200,-1px 1px 0 #7a4200}
.stagebox{position:relative;width:90%;max-width:370px;flex:1;min-height:0;display:flex;justify-content:center;align-items:center}
.stagebox:before{content:'';position:absolute;left:12%;right:12%;bottom:6%;height:22%;border-radius:50%;background:radial-gradient(ellipse,rgba(120,240,255,.55),rgba(120,240,255,0) 70%);filter:blur(4px);animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.55;transform:scaleX(1)}50%{opacity:1;transform:scaleX(.9)}}
.diorama{width:100%;height:100%;object-fit:contain;animation:float 4s ease-in-out infinite;filter:drop-shadow(0 22px 16px rgba(0,0,0,.4));position:relative}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-12px) rotate(.6deg)}}
.road{display:flex;align-items:center;gap:6px;width:80%;max-width:330px;margin-top:2px}
.road img{width:34px;flex:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.road .bar{flex:1;height:18px;border-radius:10px;background:#0a1a40;border:2px solid #000;position:relative;overflow:hidden;box-shadow:0 2px 0 rgba(255,255,255,.15)}
.road .bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#ffe36b,#f0a000);border-radius:9px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.road .bar b{position:absolute;inset:0;font-size:11px;display:grid;place-items:center;font-weight:900;text-shadow:0 1px 0 #000}
.diff-seg{position:relative;z-index:2;margin:10px auto 0;width:86%;max-width:340px;display:flex;gap:6px;padding:5px;border-radius:14px;background:rgba(6,16,44,.72);border:2px solid rgba(255,255,255,.14)}
.diff-seg span{align-self:center;font-family:'Lilita One';font-size:14px;padding:0 4px 0 6px;opacity:.85}
.diff-seg button{flex:1;height:34px;border-radius:10px;font-family:'Lilita One';font-size:15px;color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;gap:4px}
.diff-seg button i{font-style:normal;font-size:10px;letter-spacing:-1px;color:#ffd84a}
.diff-seg button.on{background:linear-gradient(#ffe36b,#f0a000);color:#fff;text-shadow:0 1px 0 #7a4200;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 #7a4200}
.diff-seg button.on i{color:#fff}
.play-row{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 10px 12px;position:relative;z-index:2}
.fanbtn{width:78px;height:80px;position:relative;border-radius:16px;background:linear-gradient(#5aa7ff,#2463c9);border:3px solid #0b2a66;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 #0b2a66}
.fanbtn img{position:absolute;width:36px;height:45px;object-fit:cover;border-radius:5px;border:2px solid #fff;top:12px;box-shadow:0 2px 3px rgba(0,0,0,.4)}
.fanbtn img:nth-child(1){left:6px;transform:rotate(-14deg)}.fanbtn img:nth-child(2){left:20px;top:8px;z-index:1}.fanbtn img:nth-child(3){left:34px;transform:rotate(14deg)}
.fanbtn small{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-family:'Lilita One';font-size:13px;z-index:2;text-shadow:0 1px 0 #000}
#battleBtn{width:176px;height:84px;font-size:34px;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
#battleBtn small{display:block;font-size:13px;margin-top:3px;opacity:.95}
#battleBtn:after{content:'';position:absolute;top:0;bottom:0;width:40px;left:-60px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 3s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60px}100%{left:240px}}
.modebtn{width:78px;height:80px;border-radius:16px;background:linear-gradient(#b27bff,#6b36d6);border:3px solid #2c0f72;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 #2c0f72;display:flex;flex-direction:column;align-items:center;justify-content:center}
.modebtn img{width:44px}
.modebtn small{font-family:'Lilita One';font-size:12px;margin-top:-2px;text-shadow:0 1px 0 #000}
.chests{display:flex;gap:7px;padding:0 10px 10px;position:relative;z-index:2}
.slot{flex:1;height:70px;border-radius:12px;background:linear-gradient(rgba(12,28,70,.85),rgba(8,18,48,.85));border:2px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:900;position:relative;box-shadow:inset 0 3px 6px rgba(0,0,0,.4)}
.slot .lock{font-size:18px;opacity:.35}
.slot.full{border:2px solid #0b2a66;background:linear-gradient(#4a8cf0,#2358b8);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 #0b2a66}
.slot.full.ready{background:linear-gradient(#ffe36b,#f0a000);border-color:#6b3b00;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 #6b3b00;animation:pulse 1s ease-in-out infinite}
.slot img{width:42px;margin-top:-6px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (max-height:740px){.slot{height:52px}.slot img{width:32px}.play-row{padding:10px 10px 8px}.fanbtn,.modebtn{height:70px}#battleBtn{height:72px;font-size:30px}.diff-seg{margin-top:6px}.ribbon{width:60%}}
@media (max-height:640px){.chests{display:none}}
.topbar{background:linear-gradient(rgba(6,16,44,.92),rgba(6,16,44,.7));border-bottom:2px solid rgba(255,255,255,.08)}
.xp .bar{height:8px;border-radius:5px;background:#0a1a40;margin-top:3px;overflow:hidden;width:90px}
.xp .bar i{display:block;height:100%;width:62%;background:linear-gradient(#7fd0ff,#2b8ef0)}

/* ---------- cards page ---------- */
.subtabs{display:flex;gap:8px;padding:6px 12px 0}
.subtabs button{flex:1;padding:10px 0;border-radius:12px 12px 0 0;font-family:'Lilita One';font-size:19px;background:rgba(0,0,0,.25);color:rgba(255,255,255,.7)}
.subtabs button.on{background:linear-gradient(#3aa0ff,#1e6fd6);color:#fff;text-shadow:0 2px 0 #0a2a60}
.deckbar{display:flex;gap:6px;padding:8px 10px;background:linear-gradient(#1f6ad6,#174fae);align-items:center}
.deckbar button{flex:1;height:40px;border-radius:10px;font-family:'Lilita One';font-size:20px;background:linear-gradient(#3e7fe0,#2358b8);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.4)}
.deckbar button.on{background:linear-gradient(#ffe36b,#f0a000);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),0 2px 0 #6b3b00;text-shadow:0 1px 0 #7a4200;transform:translateY(-2px)}
.scroll{flex:1;overflow-y:auto;padding:10px 10px 16px;touch-action:pan-y}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.card{position:relative;border-radius:10px;padding:3px;background:var(--rc,#5aa7ff);box-shadow:0 3px 0 rgba(0,0,0,.45);transition:transform .15s;cursor:pointer}
.card .art{position:relative;border-radius:7px;overflow:hidden;aspect-ratio:4/5;background:#233}
.card .art img{width:100%;height:100%;object-fit:cover;display:block}
.card .cost{position:absolute;left:-5px;top:-6px;width:28px;height:32px;display:grid;place-items:center;font-family:'Lilita One';font-size:17px;z-index:2}
.card .cost:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 40% 35%,#ff9cff,#d62de8 55%,#8a0fa0);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;border:2px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.4);transform:rotate(0)}
.card .cost span{position:relative;text-shadow:0 1px 0 #000,1px 1px 0 #000,-1px -1px 0 #000}
.card .lv{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-family:'Lilita One';font-size:13px;text-shadow:0 1px 0 #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.card .prog{margin-top:3px;height:12px;border-radius:6px;background:#0a1a40;overflow:hidden;position:relative}
.card .prog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#8ee34a,#3d9a15)}
.card .prog b{position:absolute;inset:0;font-size:9px;display:grid;place-items:center;font-weight:900}
.card.sel{transform:translateY(-6px) scale(1.04);box-shadow:0 0 0 3px #fff,0 8px 12px rgba(0,0,0,.5);z-index:3}
.card.wiggle{animation:wig .25s ease-in-out infinite}
@keyframes wig{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.card .pop{position:absolute;left:-6px;right:-6px;top:calc(100% + 4px);display:flex;flex-direction:column;gap:4px;z-index:5}
.card .pop .btn{font-size:14px;padding:6px 0;border-radius:9px}
.avg{display:flex;align-items:center;gap:8px;margin:12px 0 4px}
.avg .drop{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.3);border-radius:10px;padding:4px 12px 4px 6px;font-family:'Lilita One';font-size:20px}
.avg .drop img{width:26px}
.sec-title{font-family:'Lilita One';font-size:18px;margin:16px 2px 8px;display:flex;align-items:center;gap:8px}
.sec-title:after{content:'';flex:1;height:3px;background:rgba(255,255,255,.2);border-radius:3px}
.hint{font-size:12px;font-weight:800;opacity:.8;text-align:center;margin:6px 0}

/* ---------- modal ---------- */
.modal{position:absolute;inset:0;background:rgba(0,10,30,.65);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.on{display:flex;animation:fade .15s}
.sheet{width:100%;max-width:400px;background:linear-gradient(#2e6ad0,#1a47a0);border:4px solid #0a1f55;border-radius:18px;box-shadow:0 8px 0 rgba(0,0,0,.4);overflow:hidden;animation:popin .25s cubic-bezier(.3,1.5,.5,1)}
.sheet header{background:linear-gradient(#4a8cf0,#2b67cc);padding:10px 14px;font-family:'Lilita One';font-size:22px;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #0a1f55}
.sheet header .x{width:34px;height:34px;border-radius:9px;background:linear-gradient(#ff8a8a,#d8302e);font-size:20px;box-shadow:0 3px 0 #6b1210}
.sheet .body{padding:12px 14px 16px}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.info-top{display:flex;gap:12px;align-items:flex-end}
.info-top .card{width:96px;flex:none}
.info-top .full{width:130px;height:140px;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(0,0,0,.4));margin-left:auto}
.rar{display:inline-block;padding:2px 10px;border-radius:8px;font-family:'Lilita One';font-size:14px;margin-bottom:6px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.stat{background:rgba(0,0,0,.25);border-radius:9px;padding:6px 8px}
.stat small{display:block;font-size:11px;opacity:.75;font-weight:800}
.stat b{font-family:'Lilita One';font-weight:400;font-size:17px}
.desc{font-weight:700;font-size:14px;line-height:1.35;margin-top:10px;opacity:.95}

/* ---------- VS ---------- */
#vs{background:linear-gradient(170deg,#c9283a 0 49.6%,#fff 49.6% 50.4%,#1f5fd0 50.4%);align-items:center;justify-content:center;overflow:hidden}
.vs-side{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:'Lilita One'}
.vs-top{top:18%;animation:slidein-r .5s cubic-bezier(.3,1.3,.5,1)}
.vs-bot{bottom:20%;animation:slidein-l .5s cubic-bezier(.3,1.3,.5,1)}
.vs-side .n{font-size:32px;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.vs-side .t{display:flex;align-items:center;gap:4px;font-size:20px}
.vs-side .t img{width:28px}
.vs-mid{font-family:'Lilita One';font-size:90px;color:#ffe25c;text-shadow:0 6px 0 #a35a00,4px 4px 0 #3a1c00,-4px -4px 0 #3a1c00,4px -4px 0 #3a1c00,-4px 4px 0 #3a1c00;animation:vspop .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes vspop{from{transform:scale(3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slidein-r{from{transform:translateX(100%)}to{transform:none}}
@keyframes slidein-l{from{transform:translateX(-100%)}to{transform:none}}

/* ---------- battle ---------- */
#battle{background:#3d6b3a}
#stage{position:relative;flex:1;min-height:0}
#gl,#ov{position:absolute;left:0;top:0;width:100%;height:100%}
#ov{pointer-events:none}
.hud-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:8px 10px;pointer-events:none;z-index:3}
.enemy-tag{background:rgba(0,0,0,.45);border-radius:10px;padding:4px 10px}
.enemy-tag .n{font-family:'Lilita One';font-size:18px;color:#ff9aa5}
.enemy-tag .c{font-size:11px;font-weight:800;opacity:.8}
.timer{background:rgba(0,0,0,.55);border-radius:10px;padding:4px 10px;text-align:right}
.timer small{display:block;font-size:10px;font-weight:800;opacity:.8}
.timer b{font-family:'Lilita One';font-weight:400;font-size:24px}
.timer.ot b{color:#ffb14a}
.crowns{position:absolute;right:8px;top:36%;display:flex;flex-direction:column;gap:70px;z-index:3;pointer-events:none}
.crowns div{display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.45);border-radius:10px;padding:3px 7px;font-family:'Lilita One';font-size:22px}
.crowns img{width:30px}
.crowns .red img{filter:hue-rotate(150deg) saturate(1.6)}
.hand-panel{position:relative;flex:none;background:linear-gradient(#2d69cc,#1a47a0);border-top:3px solid #0a1f55;padding:6px 8px calc(8px + env(safe-area-inset-bottom));z-index:4}
.hand-row{display:flex;gap:6px;align-items:flex-end}
.next{width:50px;flex:none;text-align:center;font-size:10px;font-weight:900;overflow:hidden}
.next .card{margin-top:4px}
.next .card .cost{transform:scale(.75);left:-6px;top:-8px}
.hand{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hand .card{transition:transform .12s,filter .2s}
.hand .card.dim{filter:grayscale(.85) brightness(.75)}
.hand .card.sel{transform:translateY(-10px) scale(1.05)}
.hand .card.dragging{opacity:.35}
.hand .card.enter{animation:cardin .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes cardin{from{transform:translateY(30px) scale(.5);opacity:0}to{transform:none;opacity:1}}
.elixir{display:flex;align-items:center;gap:6px;margin-top:7px}
.elixir .dropn{width:40px;height:40px;position:relative;flex:none;display:grid;place-items:center;font-family:'Lilita One';font-size:22px}
.elixir .dropn img{position:absolute;inset:0;width:100%}
.elixir .dropn span{position:relative;margin-top:4px;text-shadow:0 2px 0 #000,1px 1px 0 #000,-1px -1px 0 #000}
.ebar{flex:1;height:22px;border-radius:8px;background:#0a1a40;border:2px solid #000;position:relative;overflow:hidden}
.ebar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#ff8cff,#d02de0 60%,#9a14b0);transition:width .1s linear}
.ebar .seg{position:absolute;inset:0;display:flex}
.ebar .seg span{flex:1;border-right:2px solid rgba(0,0,0,.45)}
.ebar .seg span:last-child{border:0}
.ebar .mult{position:absolute;right:6px;top:0;font-family:'Lilita One';font-size:14px;line-height:18px;color:#fff;text-shadow:0 1px 0 #000;display:none}
.banner{position:absolute;left:0;right:0;top:38%;text-align:center;z-index:6;pointer-events:none;display:none}
.banner.on{display:block;animation:banner 2.2s ease-in-out forwards}
.banner div{display:inline-block;padding:10px 30px;background:linear-gradient(90deg,transparent,rgba(120,20,160,.85) 15%,rgba(120,20,160,.85) 85%,transparent);font-family:'Lilita One';font-size:34px;text-shadow:0 3px 0 #000}
.banner small{display:block;font-family:Nunito;font-weight:900;font-size:14px;margin-top:2px}
@keyframes banner{0%{transform:scale(2);opacity:0}12%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
.drag-card{position:absolute;width:64px;z-index:20;pointer-events:none;transform:translate(-50%,-110%);display:none}
.toast{position:absolute;left:50%;bottom:170px;transform:translateX(-50%);background:rgba(0,0,0,.7);padding:6px 14px;border-radius:10px;font-weight:900;font-size:13px;z-index:9;display:none}
.pausebtn{pointer-events:auto;width:34px;height:34px;border-radius:9px;background:rgba(0,0,0,.45);font-size:18px;margin-left:6px}

/* ---------- result ---------- */
#result{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#3f8cff,#0b1f55 75%);gap:12px;text-align:center}
#result .title{font-family:'Lilita One';font-size:60px;animation:vspop .6s cubic-bezier(.3,1.8,.5,1)}
#result .title.win{color:#ffe25c;text-shadow:0 6px 0 #a35a00,3px 3px 0 #3a1c00,-3px -3px 0 #3a1c00,3px -3px 0 #3a1c00,-3px 3px 0 #3a1c00}
#result .title.lose{color:#ff8b95;text-shadow:0 6px 0 #6b1210,3px 3px 0 #2a0505,-3px -3px 0 #2a0505,3px -3px 0 #2a0505,-3px 3px 0 #2a0505}
.res-row{display:flex;align-items:center;gap:10px;font-family:'Lilita One';font-size:22px}
.res-crowns{display:flex;gap:4px}
.res-crowns img{width:44px;filter:grayscale(1) brightness(.4);transition:filter .3s}
.res-crowns img.lit{filter:none;animation:vspop .5s cubic-bezier(.3,1.8,.5,1) both}
.res-crowns.red img.lit{filter:hue-rotate(150deg) saturate(1.6)}
.trophy-delta{display:flex;align-items:center;gap:6px;font-family:'Lilita One';font-size:28px;background:rgba(0,0,0,.3);padding:6px 16px;border-radius:12px}
.trophy-delta img{width:36px}
.confetti{position:absolute;width:10px;height:14px;top:-20px;animation:fall linear forwards;z-index:1}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion: reduce){.diorama,.cloud,.logo .crown,#battleBtn:after,.slot.full.ready,.card.wiggle{animation:none!important}}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}