@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/lilita-one-latin-400-normal.woff2') format('woff2')}
.loading-view{position:relative;height:100%;overflow:hidden;isolation:isolate;background:#111b32;container-type:inline-size}
#arena-view:focus{outline:none}
.wallet-add,.home-settings{position:relative}.wallet-add:after{content:'';position:absolute;inset:-9px -8px}.home-settings:after{content:'';position:absolute;inset:-4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-symbols{position:absolute;width:0;height:0;overflow:hidden}.home-mode{border-inline-color:#191a25}.home-mode>.topbar,.home-mode>.bottom-nav{display:none}.home-mode>main{padding:0;position:relative}.home-view{height:100%;position:relative;overflow:hidden;isolation:isolate;background:#28202b}.home-art{position:absolute;inset:0;background:url('/assets/menu/home-art.webp') center top/cover no-repeat;z-index:-3}.home-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#09224222,transparent 16%,transparent 56%,#160b160a 64%,#140b1c22 79%,#0a07144d);z-index:-2}.home-hud{position:absolute;top:max(13px,env(safe-area-inset-top));left:14px;right:14px;display:flex;align-items:center;justify-content:flex-end;gap:8px;z-index:2}.home-wallet{height:32px;min-width:0;flex:1;max-width:171px;position:relative;display:flex;align-items:center;padding:0 2px 0 30px;border-radius:9px;background:linear-gradient(180deg,#293967,#101a3d 55%,#17264d);border:2px solid #0c132b;box-shadow:inset 0 1px 0 #b6c9f1b3,inset 0 -2px 0 #040b23,0 2px 0 #070b20,0 2px 4px #0007}.wallet-icon{position:absolute!important;left:-10px;top:-7px;width:41px!important;height:43px!important;filter:drop-shadow(0 2px 0 #623409)}.gems-wallet .wallet-icon{left:-6px;top:-5px;width:37px!important;height:40px!important;filter:drop-shadow(0 2px 0 #3c0c63)}.wallet-value{flex:1;font-family:'Lilita One',var(--display);font-size:20px;line-height:1;white-space:nowrap;letter-spacing:.4px;text-align:center;color:#f9faff;text-shadow:0 2px 0 #060e2d,1px 0 0 #060e2d,-1px 0 0 #060e2d;overflow:hidden;text-overflow:ellipsis}.wallet-add{display:grid;place-items:center;flex-shrink:0;width:25px;min-height:26px;align-self:stretch;margin:1px 0;border:1px solid #0c4c07;border-radius:6px;background:linear-gradient(180deg,#a0ff5a,#4ad625 48%,#269e12 49%,#3bbb13);box-shadow:inset 0 1px 0 #e7ffb4,inset 0 -2px 0 #165a0a,0 1px 0 #030b13;color:white;font-size:28px;font-family:Arial,sans-serif;font-weight:900;line-height:.7;text-shadow:0 2px 0 #25830f;padding:0 0 2px}.wallet-add:hover{filter:brightness(1.15)}.home-settings{flex-shrink:0;width:36px;height:36px;border:2px solid #07152c;border-radius:10px;background:linear-gradient(180deg,#779bc8,#235187 55%,#123363);box-shadow:inset 0 1px 0 #d4e7ff,inset 0 -3px 0 #0b234c,0 3px 0 #030b1c;padding:2px;margin-left:2px}.home-settings svg{width:100%;height:100%;filter:drop-shadow(0 2px 0 #112241)}.home-settings:hover{filter:brightness(1.15)}.home-settings:active{transform:translateY(2px)}
.home-actions{position:absolute;left:15px;right:15px;bottom:max(15px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:42px;z-index:1}.home-battle{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:108px;width:100%;border-radius:43px;border:3px solid #fff39c;background:linear-gradient(170deg,#fffaa0 0%,#ffe838 12%,#ffce04 42%,#ffad00 82%,#ffbe0a);box-shadow:0 0 0 2px #ffcf10,0 0 0 5px #f18b06,0 6px 0 5px #a64304,0 9px 0 5px #57220a,0 11px 16px 7px #1e071b70,0 -3px 24px 2px #ffb92360,inset 0 4px 0 #fffca6,inset 0 -7px 0 #f58200,inset 0 0 0 5px #ffd519;isolation:isolate;transition:filter .18s,transform .16s}.home-battle:before{content:'';position:absolute;inset:7px;border:1px solid #fff78c;border-radius:34px;pointer-events:none}.battle-button-shine{position:absolute;left:5%;top:5%;width:45%;height:45%;background:linear-gradient(135deg,#fff7,transparent 75%);border-radius:80% 10% 100% 0;pointer-events:none;z-index:-1}.battle-button-main{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 12px 9px}.battle-button-main>svg{width:42px;height:42px;flex-shrink:0;filter:drop-shadow(0 3px 0 #b96710)}.battle-button-main>span{font-family:'Lilita One','Arial Black',var(--display);font-size:clamp(43px,13cqw,65px);font-weight:400;line-height:1;letter-spacing:.5px;color:#fff1d0;-webkit-text-stroke:2px #753414;paint-order:stroke fill;text-shadow:0 2px 0 #b9661c,0 4px 0 #74300f,0 6px 0 #41200f;transform:rotate(-1deg);white-space:nowrap}.home-battle:hover{filter:brightness(1.06)}.home-battle:active{transform:translateY(5px);box-shadow:0 0 0 2px #ffcf10,0 0 0 5px #f18b06,0 2px 0 5px #a64304,0 4px 0 5px #57220a,0 6px 12px 5px #1e071b70,inset 0 4px 0 #fffca6,inset 0 -5px 0 #f58200}.battle-rules{display:flex;align-items:center;justify-content:center;gap:7px;position:absolute;bottom:-14px;height:31px;padding:1px 16px 4px;white-space:nowrap;border-radius:12px;border:2px solid #052039;background:linear-gradient(180deg,#2a457e,#152954 55%,#123364);box-shadow:0 0 0 2px #f6b923,0 3px 0 #080b25,inset 0 2px 0 #4a71b3;color:#fff5c8;font-family:'Lilita One',var(--sans);font-size:18px;letter-spacing:.1px;text-shadow:0 2px 0 #0a0b23}.battle-rules svg{width:26px;height:24px;filter:drop-shadow(0 1px 0 #000)}
.battle-sticker{position:absolute;right:-6px;top:-16px;display:flex;align-items:center;gap:3px;padding:4px 11px 5px 6px;border-radius:20px;border:2px solid #052039;background:linear-gradient(180deg,#2a457e,#152954 55%,#123364);box-shadow:0 0 0 2px #f6b923,0 3px 0 #080b25,inset 0 2px 0 #4a71b3;transform:rotate(8deg);color:#fff5c8;font:400 20px 'Lilita One',var(--sans);text-shadow:0 2px 0 #0a0b23;pointer-events:none;z-index:2}.battle-sticker[hidden]{display:none}.battle-sticker svg{width:24px;height:24px;filter:drop-shadow(0 1px 0 #000)}
.home-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-items:end;padding-top:17px}.home-tile{position:relative;display:flex;align-items:flex-end;justify-content:center;height:80px;min-width:0;border:2px solid #050a25;border-radius:16px;background:linear-gradient(145deg,#7348ff,#5318d1 52%,#390d92);box-shadow:0 4px 0 #18053d,0 6px 4px #0008,inset 0 2px 0 #d0b5ff,inset 0 0 0 2px #8c41fb,inset 0 -7px 0 #3d10a3;isolation:isolate}.home-tile:before{content:'';position:absolute;inset:6px 3px 6px;border-radius:40% 70% 11px 11px;background:linear-gradient(180deg,#b377ff77,#7313da44 70%);z-index:-1}.home-tile.fighters-tile{background:linear-gradient(145deg,#1de1ff,#078be9 52%,#0754b2);box-shadow:0 4px 0 #082758,0 6px 4px #0008,inset 0 2px 0 #bdfaff,inset 0 0 0 2px #22b4ff,inset 0 -7px 0 #06479d}.fighters-tile:before{background:linear-gradient(180deg,#11b5ffbb,#0c77d644 70%)}.home-tile.shop-tile{background:linear-gradient(145deg,#36a7ff,#136dd1 52%,#11479e);box-shadow:0 4px 0 #091e4d,0 6px 4px #0008,inset 0 2px 0 #bdedff,inset 0 0 0 2px #3d9dff,inset 0 -7px 0 #113a8e}.shop-tile:before{background:linear-gradient(180deg,#277ee088,#0b58aa44 70%)}.menu-illustration{display:block;position:absolute;left:-9%;right:-9%;top:-48px;height:99px;background-image:url('/assets/menu/menu-icons.webp');background-repeat:no-repeat;filter:drop-shadow(0 3px 1px #13061e70);pointer-events:none;z-index:-1}.chest-illustration{background-image:url('/assets/menu/menu-icons.webp');background-repeat:no-repeat;background-size:356.066% 100%;background-position:0% center}.fighters-illustration{background-image:url('/assets/menu/menu-icons.webp');background-repeat:no-repeat;background-size:266.503% 100%;background-position:44.952% center}.shop-illustration{background-image:url('/assets/menu/menu-icons.webp');background-repeat:no-repeat;background-size:290.763% 100%;background-position:100% center}.home-tile-label{font-family:'Lilita One','Arial Black',var(--display);font-size:clamp(18px,5.9cqw,25px);font-weight:400;letter-spacing:.2px;color:#fff;line-height:1;padding:0 2px 13px;text-shadow:0 2px 0 #1b1739,1px 0 0 #1b1739,-1px 0 0 #1b1739,0 3px 0 #1b1739,0 4px 0 #1b1739;-webkit-text-stroke:.7px #171d39;paint-order:stroke fill}.home-tile:hover{filter:brightness(1.12);transform:translateY(-2px)}.home-tile:active{transform:translateY(3px)}.reward-dot{height:12px;width:12px;border-radius:50%;background:#71f341;border:2px solid #173f10;position:absolute;right:4px;top:5px;box-shadow:0 0 0 1px #c0ff88,0 0 9px #76ec3b70}.home-view{container-type:inline-size}
.menu-modal{text-align:center}.menu-modal h2{font-size:29px;margin:4px 0 12px}.modal-illustration{height:156px;width:174px;display:block;margin:12px auto 7px;filter:drop-shadow(0 8px 8px #0003)}.menu-modal>p{font-size:12px;line-height:1.7;margin:8px 0 17px}.daily-amount{font-family:'Lilita One',var(--display);font-size:45px;color:#ffd76b;margin:4px 0 20px;text-shadow:0 3px 0 #694620}.daily-amount>span{font-family:var(--sans);font-size:10px;letter-spacing:1.5px;color:#c0a674}.menu-modal .primary-button{font-size:13px}.menu-modal .primary-button:disabled{opacity:.5;box-shadow:none}.menu-fineprint{font-size:9px!important;color:#8594a9!important;margin:14px 0 0!important}.shop-soon{font-size:9px;letter-spacing:2px;font-weight:650;background:#27374b;border:1px solid #415a78;border-radius:6px;padding:13px;color:#a7c7e7;margin:20px 0}.menu-modal .secondary-button{width:100%}.menu-settings-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:22px 0;padding:16px 0;border-block:1px solid #313c4e;font-size:12px;color:#b2bfd0}.menu-settings-row .secondary-button{min-width:95px}.menu-record{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.menu-record>span{font-size:9px;color:#8599b1;padding:14px;background:#222e3e;border-radius:8px}.menu-record strong{display:block;font-family:var(--display);font-size:25px;line-height:1.2;color:#d5e1ed;margin-top:8px}.settings-guide{width:100%}
@media(min-width:501px){.home-actions{left:21px;right:21px;bottom:20px;gap:52px}.home-battle{min-height:133px;border-radius:55px}.battle-button-main>span{font-size:78px}.battle-button-main>svg{width:49px;height:49px}.battle-rules{height:36px;font-size:21px;padding-inline:21px;bottom:-16px}.home-tile{height:101px;border-radius:20px}.menu-illustration{height:128px;top:-61px}.home-tile-label{font-size:29px;padding-bottom:17px}.home-hud{top:16px;left:20px;right:20px;gap:13px}.home-wallet{height:38px;padding-left:35px}.wallet-icon{width:48px!important;height:51px!important;top:-9px}.gems-wallet .wallet-icon{width:43px!important;height:45px!important;top:-6px}.wallet-value{font-size:24px}.wallet-add{width:29px;font-size:31px}.home-settings{width:43px;height:43px}}
@media(max-height:740px){.home-actions{gap:34px;bottom:12px}.home-battle{min-height:94px}.battle-button-main>span{font-size:54px}.battle-button-main>svg{width:35px;height:35px}.battle-rules{height:27px;bottom:-12px;font-size:16px}.battle-rules svg{height:20px;width:22px}.home-tile{height:66px;border-radius:13px}.menu-illustration{height:86px;top:-41px}.home-tile-label{font-size:22px;padding-bottom:10px}.home-tiles{padding-top:12px}.home-hud{top:10px}.wallet-value{font-size:19px}.home-art{background-position:center 28%}.home-actions{left:14px;right:14px}}
@media(max-width:360px){.home-hud{left:13px;right:11px;gap:6px}.home-wallet{height:29px;padding-left:26px}.wallet-value{font-size:17px}.wallet-icon{width:35px!important;height:39px!important;top:-7px;left:-9px}.gems-wallet .wallet-icon{width:32px!important;height:34px!important;top:-4px}.wallet-add{width:22px;font-size:25px;min-height:22px;border-radius:5px}.home-settings{height:33px;width:33px}.home-actions{left:13px;right:13px;gap:32px}.home-battle{min-height:90px}.battle-button-main{gap:5px;padding-inline:7px}.battle-button-main>span{font-size:47px}.battle-button-main>svg{width:32px;height:32px}.battle-rules{font-size:15px}.home-tiles{gap:6px}.home-tile-label{font-size:19px}.menu-illustration{height:85px;top:-40px}.home-tile{height:64px}}
@media(orientation:landscape) and (max-height:560px){.home-mode{max-width:500px}.home-hud{left:15px;right:15px;top:9px}.home-actions{gap:20px;left:22px;right:22px;bottom:9px}.home-battle{min-height:60px}.battle-button-main{padding-bottom:6px}.battle-button-main>span{font-size:38px}.battle-button-main>svg{width:28px;height:28px}.battle-rules{height:20px;bottom:-9px;font-size:12px}.battle-rules svg{height:16px;width:17px}.home-tiles{padding-top:14px}.home-tile{height:43px}.home-tile-label{font-size:18px;padding-bottom:7px}.menu-illustration{height:59px;top:-27px}.home-art{background-position:center 22%;filter:brightness(.85)}}
@media(min-width:501px){.battle-sticker{font-size:30px;top:-22px;right:-8px;padding:5px 16px 7px 8px;border-radius:24px}.battle-sticker svg{width:36px;height:36px}}
@media(max-height:740px){.battle-sticker{font-size:17px;top:-13px;padding:3px 9px 4px 5px}.battle-sticker svg{width:20px;height:20px}}
@media(orientation:landscape) and (max-height:560px){.battle-sticker{font-size:13px;top:-10px;right:-4px;padding:2px 7px 3px 4px}.battle-sticker svg{width:15px;height:15px}}
/* Trophy badge: sits just above the BATTLE! button and opens the profile. */
.home-trophies{position:absolute;top:-46px;left:0;right:0;width:fit-content;margin-inline:auto;display:flex;align-items:center;gap:7px;height:34px;padding:2px 16px 3px 10px;border-radius:17px;border:2px solid #052039;background:linear-gradient(180deg,#2a457e,#152954 55%,#123364);box-shadow:0 0 0 2px #f6b923,0 3px 0 2px #6b3a07,0 6px 12px #0008;color:#fff4c4;font:400 19px 'Lilita One',sans-serif;letter-spacing:.4px;text-shadow:0 2px #071331;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
.home-trophies svg{width:28px;height:23px;filter:drop-shadow(0 1px 0 #000)}
.home-trophies small{font-size:12px;color:#b9cbef;letter-spacing:.8px;margin-top:2px}
.home-trophies:hover{filter:brightness(1.1)}
.home-trophies:focus-visible{outline:3px solid #fff39c;outline-offset:3px}
@media(min-width:501px){.home-trophies{top:-54px;height:40px;font-size:23px}.home-trophies small{font-size:14px}}
@media(max-height:740px){.home-trophies{top:-40px;height:30px;font-size:17px}}
/* The shared sprite places the Fighters slime just left of the shop; trim that sliver (it ends in the transparent gap). */
.shop-illustration{clip-path:inset(0 0 0 11%)}
/* League colours on the Home trophy badge. */
.home-trophies[class*="tier-"]{background:linear-gradient(180deg,var(--t2),var(--t3));padding-left:6px}
.home-trophies[class*="tier-"] small{color:#fff2d6}

/* ===== Living Home screen ===== */
/* Background: the castle slowly drifts and breathes. */
.home-art{transform-origin:50% 38%;animation:home-drift 24s ease-in-out infinite alternate}
@keyframes home-drift{from{transform:scale(1.03)}to{transform:scale(1.09) translate(-1.2%,.8%)}}
/* Embers rise from the torches; sparkles twinkle in the sky. */
.home-embers{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.home-embers i{position:absolute;left:var(--x);bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff6c0 0,#ffb13b 45%,transparent 72%);box-shadow:0 0 6px 2px #ff9a2a77;opacity:0;animation:ember-rise var(--t) linear var(--delay) infinite}
@keyframes ember-rise{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:.95}70%{opacity:.6}100%{transform:translate(var(--w),-78vh) scale(.35);opacity:0}}
.home-embers b{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;background:#fff8d6;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:twinkle 3.2s ease-in-out var(--delay) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}45%{opacity:.95;transform:scale(1) rotate(45deg)}60%{opacity:.5;transform:scale(.7) rotate(60deg)}}

/* Entrance: castle zooms in, HUD drops, trophy badge pops, BATTLE! rises, tiles pop one by one.
   Only "backwards" fill, so the finished animations never lock the buttons' press effects. */
.home-intro .home-art{animation:home-art-in 1s cubic-bezier(.2,.7,.2,1) backwards,home-drift 24s ease-in-out 1s infinite alternate}
@keyframes home-art-in{from{transform:scale(1.28);opacity:0}to{transform:scale(1.03);opacity:1}}
.home-intro .home-hud{animation:home-drop .6s cubic-bezier(.2,1.35,.4,1) .25s backwards}
@keyframes home-drop{from{transform:translateY(-140%);opacity:0}}
.home-intro .home-trophies{animation:home-pop .5s cubic-bezier(.2,1.6,.4,1) .7s backwards}
.home-intro .home-battle{animation:home-rise .75s cubic-bezier(.2,1.3,.4,1) .4s backwards}
@keyframes home-rise{from{transform:translateY(70px) scale(.75);opacity:0}}
.home-intro .home-tile{animation:home-pop .55s cubic-bezier(.2,1.6,.4,1) backwards}
.home-intro .home-tile:nth-child(1){animation-delay:.75s}
.home-intro .home-tile:nth-child(2){animation-delay:.85s}
.home-intro .home-tile:nth-child(3){animation-delay:.95s}
@keyframes home-pop{from{transform:scale(.3);opacity:0}}

/* BATTLE!: a breathing golden glow, a shine sweeping across, sparks and a zoom on tap. */
.home-battle:after{content:'';position:absolute;inset:-8px;border-radius:inherit;box-shadow:0 0 34px 10px #ffd23f;opacity:0;pointer-events:none;z-index:-2;animation:battle-glow 2.6s ease-in-out infinite}
@keyframes battle-glow{50%{opacity:.75}}
.battle-sweep{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.battle-sweep:before{content:'';position:absolute;top:-30%;bottom:-30%;left:-45%;width:30%;background:linear-gradient(100deg,transparent,#ffffffb8 50%,transparent);transform:skewX(-20deg);animation:battle-sweep 4s ease-in-out 1.6s infinite}
@keyframes battle-sweep{0%{left:-45%}30%,100%{left:125%}}
.battle-burst{position:absolute;left:50%;top:42%;width:0;height:0;pointer-events:none;z-index:3}
.battle-burst i{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffe36b 45%,#ff9a00);box-shadow:0 0 10px #ffcf3a;animation:battle-burst .42s ease-out forwards}
@keyframes battle-burst{from{transform:rotate(var(--a)) translateX(0) scale(1.3)}to{transform:rotate(var(--a)) translateX(var(--d)) scale(.2);opacity:0}}
.home-view.launching{transform:scale(1.14);opacity:0;transition:transform .38s cubic-bezier(.5,0,.8,.4),opacity .32s ease-in .06s}

/* Tiles: springy press, gently bobbing icons, and a wiggling chest when a reward is ready. */
.home-tile{transition:transform .28s cubic-bezier(.3,1.8,.5,1),filter .15s}
.home-tile:active{transform:translateY(3px) scale(.93)}
.home-tile .menu-illustration{animation:icon-bob 3.4s ease-in-out infinite}
.home-tile:nth-child(2) .menu-illustration{animation-delay:-1.1s}
.home-tile:nth-child(3) .menu-illustration{animation-delay:-2.2s}
@keyframes icon-bob{50%{transform:translateY(-4px)}}
.rewards-tile:has(.reward-dot:not([hidden])) .menu-illustration{animation:chest-wiggle 2.6s ease-in-out infinite;transform-origin:50% 80%}
@keyframes chest-wiggle{0%,62%,100%{transform:none}68%{transform:rotate(-7deg) scale(1.06)}74%{transform:rotate(6deg) scale(1.06)}80%{transform:rotate(-4deg)}86%{transform:rotate(2deg)}}
.reward-dot:not([hidden]){animation:dot-pulse 1.6s ease-in-out infinite}
@keyframes dot-pulse{50%{transform:scale(1.25);box-shadow:0 0 0 1px #c0ff88,0 0 14px #76ec3b}}

.reduce-motion .home-embers{display:none}.reduce-motion .home-art,.reduce-motion .home-intro .home-art,.reduce-motion .home-battle:after,.reduce-motion .battle-sweep:before,.reduce-motion .home-tile .menu-illustration,.reduce-motion .rewards-tile .menu-illustration,.reduce-motion .reward-dot{animation:none}.reduce-motion .home-view.launching{transition:none}

/* ===== Squad on stage ===== */
.home-squad{position:absolute;left:0;right:0;top:-190px;height:148px;display:flex;justify-content:center;align-items:flex-end;gap:0;pointer-events:none;z-index:0}
/* Darkens the painted scene behind the squad so the fighters stand out. */
.stage-backdrop{position:absolute;left:50%;bottom:-24px;width:420px;height:210px;transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 72%,#0a0f24d9,#0a0f2499 45%,transparent 72%);pointer-events:none}
.stage-fighter{pointer-events:auto;position:relative;width:108px;height:142px;padding:0;border:0;background:none;cursor:pointer;display:grid;justify-items:center;align-content:end;-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.stage-fighter.is-leader{width:124px;height:160px;z-index:1;margin-bottom:-4px}
.stage-fighter:active{transform:scale(.92)}
/* An empty squad slot: a faint glass box standing on the stand, with a ghost ball and a + inside. */
.stage-empty .stage-body{display:flex;align-items:flex-end;justify-content:center;animation:none}
.stage-slot{position:relative;display:grid;place-items:center;width:64%;aspect-ratio:1/1.1;margin-bottom:2%;border:2.5px dashed #ffffffa6;border-radius:18px;background:linear-gradient(180deg,#ffffff24,#ffffff0d);box-shadow:inset 0 0 18px #ffffff1f,0 0 16px #fff3c033}
.stage-slot:before{content:'';position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff40,#ffffff14 70%)}
.stage-slot b{position:relative;font:400 clamp(30px,10cqw,46px)/1 'Lilita One',sans-serif;color:#ffffffcc;text-shadow:0 2px 0 #0b1f4d99}
.stage-fighter:focus-visible{outline:3px solid #fff39c;outline-offset:2px;border-radius:14px}
/* Soft spotlight falling on each fighter. */
.stage-beam{position:absolute;left:50%;bottom:22px;width:96px;height:150px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--glow) 30%,#fff2c0 20%) 70%,color-mix(in srgb,var(--glow) 45%,#ffe08a 30%));clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);opacity:.5;pointer-events:none;animation:beam-flicker 4s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
@keyframes beam-flicker{50%{opacity:.32}}
.stage-body{position:relative;z-index:1;display:block;width:108px;height:104px;margin-bottom:-26px;transform-origin:50% 88%;animation:stage-breathe 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s)}
.is-leader .stage-body{width:126px;height:122px;margin-bottom:-30px}
.stage-canvas{display:block;width:100%;height:100%;transform-origin:50% 88%;animation:stage-hop 5.4s ease-in-out infinite;animation-delay:calc(var(--i) * 1.8s + 1.2s)}
@keyframes stage-breathe{50%{transform:scale(1.035,.965)}}
@keyframes stage-hop{0%,78%,100%{transform:none}84%{transform:translateY(-24px) rotate(-5deg) scale(.95,1.06)}91%{transform:translateY(0) scale(1.1,.9)}95%{transform:scale(.97,1.03)}}
/* 3D podium: gold-rimmed stone top with a glowing rune ring, and a front face with a gold band. */
.stage-podium{position:relative;display:block;width:86px;height:30px;border-radius:0 0 12px 12px/0 0 8px 8px;background:linear-gradient(90deg,#2b2440,#4a3f63 30%,#5a4d75 50%,#3b3253 75%,#231d36);box-shadow:inset 0 -5px 0 #b8862c,inset 0 -7px 0 #ffd76a,0 10px 14px -4px #000c}
.stage-podium:before{content:'';position:absolute;left:-3px;right:-3px;top:-11px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#8e82ad,#5b5078 55%,#40375a);border:2px solid #ffd76a;box-shadow:0 0 0 1px #6b4a12,inset 0 3px 4px #ffffff33}
.stage-podium i{position:absolute;left:12%;right:12%;top:-6px;height:12px;border-radius:50%;border:2px solid color-mix(in srgb,var(--glow) 70%,#fff);box-shadow:0 0 10px color-mix(in srgb,var(--glow) 80%,transparent),inset 0 0 8px color-mix(in srgb,var(--glow) 60%,transparent);animation:rune-pulse 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
@keyframes rune-pulse{50%{opacity:.45;transform:scale(.92)}}
.is-leader .stage-podium{width:100px;height:40px;box-shadow:inset 0 -6px 0 #b8862c,inset 0 -9px 0 #ffd76a,inset 0 -18px 0 #4a3f63,inset 0 -20px 0 #ffd76a88,0 12px 16px -4px #000c}
.is-leader .stage-podium:after{content:'';position:absolute;left:50%;bottom:9px;width:16px;height:14px;transform:translateX(-50%);background:linear-gradient(180deg,#fff39a,#e8a40c);clip-path:polygon(0 30%,25% 55%,50% 0,75% 55%,100% 30%,88% 100%,12% 100%);filter:drop-shadow(0 1px 0 #6b3508)}
.home-intro .stage-fighter{animation:stage-drop .7s cubic-bezier(.2,1.4,.4,1) backwards;animation-delay:calc(1.05s + var(--i) * .12s)}
@keyframes stage-drop{from{transform:translateY(-150px);opacity:0}}
@media(max-height:740px){.home-squad{top:-160px;height:124px}.stage-fighter{width:92px;height:122px}.stage-fighter.is-leader{width:106px;height:138px}.stage-body{width:92px;height:88px;margin-bottom:-22px}.is-leader .stage-body{width:108px;height:104px;margin-bottom:-26px}.stage-podium{width:74px}.is-leader .stage-podium{width:86px;height:34px}.stage-beam{height:120px}}
.reduce-motion .stage-body,.reduce-motion .stage-canvas,.reduce-motion .stage-podium i,.reduce-motion .stage-beam,.reduce-motion .home-intro .stage-fighter{animation:none}
/* Bigger fighters on a higher stage, clear of the trophy badge. */
.home-squad{top:-214px;height:160px}
.stage-body{width:132px;height:124px;margin-bottom:-34px}
.is-leader .stage-body{width:150px;height:142px;margin-bottom:-38px}
.stage-fighter{width:104px}
.stage-fighter.is-leader{width:122px}
.stage-beam{bottom:18px;width:110px;height:170px}
@media(max-height:740px){.home-squad{top:-176px;height:132px}.stage-body{width:110px;height:104px;margin-bottom:-28px}.is-leader .stage-body{width:126px;height:120px;margin-bottom:-32px}.stage-fighter{width:90px}.stage-fighter.is-leader{width:104px}}
/* Fighters always stand in front of their podium; colours punch through the busy backdrop. */
.stage-podium{z-index:0}
.stage-body{z-index:2;margin-bottom:-14px}
.is-leader .stage-body{margin-bottom:-16px}
.stage-canvas{filter:saturate(1.35) contrast(1.08) drop-shadow(0 6px 4px #000a)}
.stage-backdrop{width:460px;height:250px;background:radial-gradient(ellipse 50% 58% at 50% 70%,#070b1cf0,#070b1cb3 48%,transparent 74%)}
.stage-beam{opacity:.35}
@media(max-height:740px){.stage-body{margin-bottom:-12px}.is-leader .stage-body{margin-bottom:-14px}}

/* ===== Home scene: one painted picture (castle, logo, three podiums) ===== */
/* The picture and the squad layer share the same "cover" box, so podium positions in % stay
   locked to the painting on any screen shape. Podium tops measured on the 941x1672 source. */
.home-view{container-type:size}
/* The painting covers the screen (941x1672, so width = height x .5628). On squat screens (tablets, split screen)
   that would put the squad behind the BATTLE stack, so fitHomeArt() in app.js sets --art-h to make it just short
   enough (and adds .art-fitted). A few % too narrow is hidden by stretching it sideways (up to 6%, which doesn't
   show on this painting); anything more shows the same painting blurred at the sides, with soft edges. On tall
   phones it also keeps the painting at most 7% wider than the screen, so the side fighters aren't cut in half. The
   squad layer always gets the same box, so the fighters stay on their podiums. */
.home-view{--art:var(--art-h,max(100cqh,177.69cqw));--art-w:max(calc(var(--art) * .5628),min(100cqw,calc(var(--art) * .5966)))}
.home-view.art-fitted:before{content:'';position:absolute;inset:-24px;z-index:-4;background:url('/assets/menu/home-stage.webp') center/cover no-repeat;filter:blur(14px) brightness(.55)}
/* Soft side edges, and a soft bottom edge: on tall phones the fitted painting ends above the BATTLE tiles. */
.art-fitted .home-art{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent),linear-gradient(#000 calc(100% - 90px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent),linear-gradient(#000 calc(100% - 90px),transparent);mask-composite:intersect}
.home-art,.home-squad{inset:auto;left:50%;top:0;width:var(--art-w);height:var(--art);margin-left:calc(var(--art-w) / -2)}
.home-art{background:url('/assets/menu/home-stage.webp') 0 0/100% 100% no-repeat;filter:none}
.home-squad{display:block;container-type:size;transform-origin:50% 38%;animation:home-drift 24s ease-in-out infinite alternate}
.home-intro .home-squad{animation:home-drift 24s ease-in-out 1s infinite alternate backwards}
.home-vignette{background:linear-gradient(180deg,#0a1a3c40,transparent 12%,transparent 60%,#0a0c1e33 70%,#0a0c1e99)}
.stage-backdrop,.stage-beam,.stage-podium{display:none}
.stage-fighter,.stage-fighter.is-leader{position:absolute;width:auto;height:auto;margin:0;translate:-50% -97%}
.stage-fighter:nth-child(2){left:19.7%;top:54.4%}
.stage-fighter:nth-child(3){left:50%;top:52.8%}
.stage-fighter:nth-child(4){left:80.7%;top:54.4%}
.stage-body,.is-leader .stage-body{width:29cqw;height:auto;aspect-ratio:1/.94;margin:0}
.is-leader .stage-body{width:33cqw}
.reduce-motion .home-squad,.reduce-motion .home-intro .home-squad{animation:none}

/* ===== Painted Home tiles (owner art): each tile is one picture with its sign painted in ===== */
/* The text label stays in the button for screen readers but is hidden visually. */
.home-tiles{gap:2px;padding-top:0;margin-inline:-8px}
.home-tile,.home-tile.fighters-tile,.home-tile.shop-tile{height:auto;aspect-ratio:360/347;border:0;border-radius:0;background:none;box-shadow:none;isolation:auto}
.home-tile:before{display:none}
.home-tile .menu-illustration{inset:0;height:auto;background-size:contain;background-position:50% 100%;clip-path:none;filter:drop-shadow(0 5px 4px #000a);z-index:0;animation:none}
.chest-illustration{background-image:url('/assets/menu/tile-rewards.webp')}
.fighters-illustration{background-image:url('/assets/menu/tile-fighters.webp')}
.shop-illustration{background-image:url('/assets/menu/tile-shop.webp')}
.home-tile-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.home-tile:hover{filter:brightness(1.1);transform:translateY(-2px)}
.home-tile:active{transform:translateY(3px) scale(.94)}
.home-tile:focus-visible{outline:3px solid #fff39c;outline-offset:2px;border-radius:14px}
.reward-dot{width:18px;height:18px;right:6%;top:14%;z-index:1}
.rewards-tile:has(.reward-dot:not([hidden])) .menu-illustration{animation:chest-wiggle 2.6s ease-in-out infinite;transform-origin:50% 85%}
.reduce-motion .rewards-tile:has(.reward-dot:not([hidden])) .menu-illustration{animation:none}
/* Rewards badge: a red, gold-rimmed counter like other mobile games, bouncing to get attention. */
.reward-dot{display:grid;place-items:center;width:auto;min-width:26px;height:26px;padding:0 6px;right:2%;top:6%;border-radius:999px;border:2px solid #fff3b0;background:radial-gradient(circle at 35% 30%,#ff8a7a,#ec2a3a 48%,#a80f26);box-shadow:0 0 0 2px #7a0a1a,0 3px 0 2px #4a0510,0 5px 8px #000a,inset 0 2px 0 #ffffff66;font:400 16px/1 'Lilita One',sans-serif;color:#fff;text-shadow:0 2px 0 #7a0a1a;-webkit-text-stroke:.6px #7a0a1a;paint-order:stroke fill;font-variant-numeric:tabular-nums}
.reward-dot[hidden]{display:none}
.reward-dot:not([hidden]){animation:badge-bounce 2.6s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes badge-bounce{0%,58%,100%{transform:none}64%{transform:translateY(-7px) scale(1.15)}72%{transform:translateY(0) scale(.92,1.08)}80%{transform:scale(1.04)}}
.reduce-motion .reward-dot:not([hidden]){animation:none}
/* Pinned to the top-right corner of the chest lid (measured on tile-rewards.webp). */
.chest-illustration .reward-dot{left:74%;top:18%;right:auto;translate:-50% -50%}
/* The Home badge shows the league's painted shield. */
.home-trophies .league-art.is-badge{width:auto;height:28px;filter:drop-shadow(0 1px 0 #0008)}
@media(min-width:501px){.home-trophies .league-art.is-badge{height:34px}}
/* ===== Short portrait screens (16:9 Android phones, about 360x592) ===== */
/* On short screens the painting is fitted to the screen's width, so its podiums land low and the BATTLE stack can
   cover the squad. Here the stack starts at the sizes the 740px rules above use and gives up exactly the space the
   squad is short of (--short: how far the stack's top would reach above a line 16px under the fighters' feet).
   Each part gives up its share of it, down to its most compact size, so the stack shrinks smoothly with the
   screen's shape and never more than needed. The shares add up to 1, split in proportion to how much each part can
   shrink (BATTLE 94->68px, tiles to 74% wide, gap 34->16px, badge lift 40->34px, bottom 12->10px).
   If that isn't enough the painting may slide up, at most 4px, because the logo's crown sits only a few px under the
   top bar. (With a phone bottom bar the bottom margin can't shrink, so the slide makes up its 1-2px share.)
   The background's slow zoom carries the feet about 13px lower at its far end, so the 16px clearance shrinks to a
   few px then.
   Screens 360px wide and narrower start from the 740px sizes too, so at full height their BATTLE is 4px taller and
   the gap 2px bigger than the narrow-screen rule above sets.
   When even the most compact stack isn't enough (squatter shapes: tablets, split screen, a phone bottom bar),
   fitHomeArt() in app.js makes the painting shorter instead (--art-h), so the squad always stands clear. */
@media(orientation:portrait) and (max-height:740px){
  .home-view{
    --tile-full:calc((100cqw - 16px) / 3);
    /* Feet at 54.4% of the painting's height plus about 4px of shadow; full stack = bottom (12px, or the phone's
       bottom safe area if bigger) + tile + 34 + 94 + 40. */
    --short:max(0px,calc(max(12px,env(safe-area-inset-bottom)) + var(--tile-full) * 347 / 360 + 34px + 94px + 40px + 16px + 4px + max(100cqh,177.69cqw) * .544 - 100cqh));
    --home-bottom:max(clamp(10px,calc(12px - var(--short) * .025),12px),env(safe-area-inset-bottom));
    --home-gap:clamp(16px,calc(34px - var(--short) * .223),34px);
    --battle-h:clamp(68px,calc(94px - var(--short) * .322),94px);
    --trophy-lift:clamp(34px,calc(40px - var(--short) * .074),40px);
    --tile-w:clamp(var(--tile-full) * .74,calc(var(--tile-full) - var(--short) * .356 * 360 / 347),var(--tile-full));
    --tile-h:calc(var(--tile-w) * 347 / 360)}
  .home-actions{gap:var(--home-gap);bottom:var(--home-bottom)}
  .home-battle{min-height:var(--battle-h);border-radius:clamp(36px,calc(43px - var(--short) * .087),43px)}
  .home-battle:before{border-radius:clamp(28px,calc(34px - var(--short) * .074),34px)}
  .battle-button-main{padding-bottom:clamp(6px,calc(9px - var(--short) * .037),9px)}
  .battle-button-main>span{font-size:min(clamp(40px,calc(54px - var(--short) * .173),54px),13cqw)}
  .battle-rules{height:clamp(24px,calc(27px - var(--short) * .037),27px);bottom:clamp(-12px,calc(-12px + var(--short) * .012),-11px);font-size:clamp(14px,calc(16px - var(--short) * .025),16px)}
  .home-trophies{top:calc(-1 * var(--trophy-lift));height:clamp(28px,calc(30px - var(--short) * .025),30px);font-size:clamp(16px,calc(17px - var(--short) * .012),17px)}
  .home-tiles{grid-template-columns:repeat(3,var(--tile-w));justify-content:center}
  .home-art,.home-squad{top:clamp(-4px,calc(100cqh - var(--home-bottom) - var(--tile-h) - var(--home-gap) - var(--battle-h) - var(--trophy-lift) - 16px - 4px - max(100cqh,177.69cqw) * .544),0px)}
}