/* ============================================================
   UI KIT con el arte del proyecto (botones, iconos, barras, paneles)
   Las piezas viven en assets/ui/kit/*.webp. Los botones se estiran
   con border-image en un ::before para no deformar las esquinas.
   ============================================================ */
:root{--kit:url("../assets/ui/kit/")}
/* ---------- fondo del inicio (castillo celestial) ---------- */
.h2-bgimg{position:fixed;inset:0;z-index:-2;background:#5aa8e8 url("../assets/bg/home_v.webp") no-repeat;background-size:cover;background-position:50% 55%;animation:kitBgIn .8s ease-out both}
.h2-bgimg.wide{background-image:url("../assets/bg/home_h.webp")}
@keyframes kitBgIn{from{opacity:0;transform:scale(1.04)}}
.h2 .h2-bg{background:linear-gradient(180deg,rgba(20,10,46,.35),rgba(20,10,46,0) 18%,rgba(20,10,46,0) 58%,rgba(14,6,36,.55) 82%,rgba(14,6,36,.78))}
.h2 .h2-rays{opacity:.18}
/* ---------- barra superior ---------- */
.h2-prof{position:relative;height:46px;width:118px;padding:0 0 0 46px;border-radius:0;background:url("../assets/ui/kit/pill_profile.webp") left center/auto 100% no-repeat;box-shadow:none;flex:none}
.h2-prof .h2-av{display:none}
.h2-prof .h2-pt{padding-left:2px}
.h2-pt b{font-size:13px;max-width:62px;text-shadow:0 1.5px 0 var(--ink)}
.h2-pt small{font-size:9.5px}
.h2-pill{position:relative;height:34px;min-width:88px;padding:0 34px 0 34px;border-radius:0;background:none;box-shadow:none;justify-content:center;isolation:isolate}
.h2-pill::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-image:url("../assets/ui/kit/pill_coin.webp") 64 132 64 132 fill / 50% 35px 50% 35px}
.h2-pill.gem::before{border-image-source:url("../assets/ui/kit/pill_gem.webp");border-image-slice:63 120 64 108 fill}
.h2-pill .coin-ic,.h2-pill .gem-ic{display:none}
.h2-pill b{padding:0;font-size:14px;text-shadow:0 1.5px 0 var(--ink)}
.h2-pill i{position:absolute;right:0;top:0;width:34px;height:34px;margin:0;background:none;box-shadow:none;color:transparent;text-shadow:none;font-size:0}
.h2-set{width:40px;height:40px;border-radius:0;background:url("../assets/ui/kit/btn_gear.webp") center/contain no-repeat;box-shadow:none;color:transparent;font-size:0}
/* ---------- regalo y misiones ---------- */
.h2-chest,.h2-quest{width:62px;height:60px;padding:0;border-radius:0;background:none;box-shadow:none;justify-content:flex-end}
.h2-chest{background:none}
.h2-chest.on{background:none;box-shadow:none;filter:drop-shadow(0 0 10px rgba(255,210,80,.9))}
.h2-quest{background:url("../assets/ui/kit/btn_scroll.webp") center/contain no-repeat}
.h2-chest span,.h2-quest span{display:none}
.h2-chest::before{content:"";position:absolute;left:2%;right:2%;top:0;bottom:16%;background:url("../assets/ui/kit/gift_icon.webp") center/contain no-repeat;filter:drop-shadow(0 3px 0 rgba(26,15,46,.55))}
.h2-chest.on::after{content:"";position:absolute;right:-7px;top:-8px;width:24px;height:24px;background:url("../assets/ui/kit/alert.webp") center/contain no-repeat;animation:pPulse 1s ease-in-out infinite}
.h2-chest b,.h2-quest b{position:relative;margin-bottom:-6px;padding:0 6px;border-radius:8px;background:rgba(26,15,46,.85);font-size:10px;line-height:15px}
.h2-quest b{margin-bottom:-6px}
/* ---------- escalera 2 → 1M ---------- */
.h2-bar{height:16px;border-radius:0;background:none;box-shadow:none;isolation:isolate}
.h2-bar::before{content:"";position:absolute;inset:-3px -2px;z-index:-1;border-style:solid;border-image:url("../assets/ui/kit/bar_dark.webp") 60 60 64 60 fill / 50% 12px 50% 12px}
.h2-bar i{top:2px;bottom:2px;left:2px;max-width:calc(100% - 4px);border-radius:8px;background:linear-gradient(90deg,#ff3f5e,#ff9a1a 22%,#ffe14a 40%,#5dff7a 58%,#3fd6ff 76%,#b77bff 92%,#ff4fd8);background-size:var(--bw,380px) 100%;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.18),0 0 8px rgba(255,220,120,.55)}
/* ---------- JUGAR y CARRERA ---------- */
.h2-play,.h2-vs{background:none!important;box-shadow:none!important;overflow:visible;isolation:isolate;border-radius:0}
.h2-play::before,.h2-vs::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid}
.h2-play{min-height:88px;padding:10px 22px 14px;justify-content:center;gap:14px;animation:kitBreathe 1.8s ease-in-out infinite}
@keyframes kitBreathe{50%{transform:scale(1.025)}}
.h2-cta{margin-top:10px;gap:12px}
.h2-play::before{inset:-12px -6px -4px;border-image:url("../assets/ui/kit/btn_play.webp") 92 120 96 120 fill / 46% 56px 48% 56px;animation:kitGlow 1.8s ease-in-out infinite}
@keyframes kitGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(93,255,122,.35))}50%{filter:drop-shadow(0 0 20px rgba(140,255,120,.8))}}
.h2-vs{min-height:66px;padding:8px 22px 10px;justify-content:center;gap:12px}
.h2-vs::before{inset:-3px -2px;border-image:url("../assets/ui/kit/btn_race.webp") 86 92 94 92 fill / 47% 44px 50% 44px;filter:drop-shadow(0 0 12px rgba(200,80,255,.45))}
.h2-tri{width:60px;height:60px;border-radius:0;background:url("../assets/ui/kit/ic_play.webp") center/contain no-repeat;box-shadow:none}
.h2-tri::after{display:none}
.h2-shine{display:none}
.h2-vsb{width:46px;height:46px;border-radius:0;background:url("../assets/ui/kit/sq_orange.webp") center/contain no-repeat;box-shadow:none;color:#fff;text-shadow:0 2px 0 var(--ink);line-height:44px}
.h2-pl small{background:rgba(10,40,15,.55)}
/* ---------- muelle de iconos ---------- */
.h2-dock{background:none;box-shadow:none;position:relative;isolation:isolate;padding:8px 8px 6px}
.h2-dock::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-image:url("../assets/ui/kit/bar_purple.webp") 62 64 66 64 fill / 26px 28px 28px 28px;filter:drop-shadow(0 4px 0 rgba(26,15,46,.6))}
.h2-dk-ic{width:48px;height:48px;border-radius:0;background:none!important;box-shadow:none}
.h2-dk-ic .ic{display:none}
.h2-dk-ic::before{content:"";width:100%;height:100%;background:var(--ki) center/contain no-repeat;filter:drop-shadow(0 3px 0 rgba(26,15,46,.55))}
.h2-dk[data-act="shop"]{--ki:url("../assets/ui/kit/ic_shop.webp")}
.h2-dk[data-act="missions"]{--ki:url("../assets/ui/kit/ic_missions.webp")}
.h2-dk[data-act="daily"]{--ki:url("../assets/ui/kit/ic_daily.webp")}
.h2-dk[data-act="ranking"]{--ki:url("../assets/ui/kit/ic_rank.webp")}
.h2-dk[data-act="achievements"]{--ki:url("../assets/ui/kit/ic_trophy.webp")}
.h2-dk[data-act="elements"],.h2-dk[data-act="tutorial"]{--ki:url("../assets/ui/kit/ic_guide.webp")}
.h2-dk em{right:calc(50% - 32px);top:-8px;background:url("../assets/ui/kit/alert.webp") center/contain no-repeat;box-shadow:none;width:22px;min-width:22px;height:22px;color:transparent}
.h2-dk b{font-size:11px}
@media (max-height:700px){.h2-play{min-height:64px;padding-top:6px;padding-bottom:8px}
.h2-vs{min-height:52px;padding-top:4px;padding-bottom:6px}
.h2-vsb{width:38px;height:38px;line-height:36px;font-size:18px}
.h2-tri{width:46px;height:46px}
.h2-dk-ic{width:38px;height:38px}
.h2-cta{margin-top:6px;gap:9px}
.h2-chest,.h2-quest{width:52px;height:50px}
}
/* ============ resto de pantallas: botones, iconos y controles del kit ============ */
.p-btn{--h:54px;--ki:url("../assets/ui/kit/btn_green.webp");--ks:40 46 46 46;background:none!important;box-shadow:none!important;isolation:isolate;overflow:visible;border-radius:calc(var(--h)*.5)}
.p-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-image-source:var(--ki);border-image-slice:var(--ks) fill;border-image-width:44% calc(var(--h)*.52) 50% calc(var(--h)*.52);filter:drop-shadow(0 4px 0 rgba(26,15,46,.55))}
.p-btn::after{display:none}
.p-btn:active{box-shadow:none!important;transform:translateY(3px) scale(.98)}
.p-btn.big{--h:66px;--ki:url("../assets/ui/kit/btn_play.webp");--ks:92 120 96 120;padding-left:22px;padding-right:22px}
.p-btn.big::before{inset:-10px -4px -3px}
.p-btn.sm{--h:42px}
.p-btn.blue{--ki:url("../assets/ui/kit/btn_blue.webp");--ks:52 60 58 60}
.p-btn.gold{--ki:url("../assets/ui/kit/btn_orange.webp");--ks:52 60 58 60;color:#fff;text-shadow:0 2px 0 var(--ink)}
.p-btn.gold svg{filter:drop-shadow(0 2px 0 var(--ink))}
.p-btn.pink{--ki:url("../assets/ui/kit/btn_purple.webp");--ks:52 60 58 60}
.p-btn.red{--ki:url("../assets/ui/kit/btn_red.webp");--ks:52 60 58 60}
.p-btn.purple{--ki:url("../assets/ui/kit/btn_purple2.webp");--ks:40 46 46 46}
.p-btn.gray{--ki:url("../assets/ui/kit/btn_navy.webp");--ks:40 46 46 46}
.p-btn.big.pink{--ki:url("../assets/ui/kit/btn_race.webp");--ks:86 92 94 92}
.p-btn.big.pink::before{inset:-3px -2px}
.p-btn.big.gold,.p-btn.big.blue,.p-btn.big.red,.p-btn.big.purple,.p-btn.big.gray{--ks:52 60 58 60}
.p-btn.big.gold::before,.p-btn.big.blue::before,.p-btn.big.red::before,.p-btn.big.purple::before,.p-btn.big.gray::before{inset:0}
.p-btn.big.purple{--ki:url("../assets/ui/kit/btn_purple.webp")}
.p-btn.big.gray{--ki:url("../assets/ui/kit/btn_navy.webp");--ks:40 46 46 46}
/* botón volver y pastillas de moneda */
.p-iconbtn{width:48px;height:48px;border-radius:50%;background:url("../assets/ui/kit/ic_back.webp") center/contain no-repeat;box-shadow:none}
.p-iconbtn svg{display:none}
.p-iconbtn:active{box-shadow:none;transform:translateY(3px)}
.p-pill{position:relative;height:32px;min-width:84px;padding:0 32px 0 33px;border-radius:0;background:none;box-shadow:none;justify-content:center;isolation:isolate}
.p-pill::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-image:url("../assets/ui/kit/pill_coin.webp") 64 132 64 132 fill / 50% 33px 50% 33px}
.p-pill:nth-child(2)::before{border-image-source:url("../assets/ui/kit/pill_gem.webp");border-image-slice:63 120 64 108 fill}
.p-pill svg{display:none}
.p-pill b{font-weight:400;font-size:14px;text-shadow:0 1.5px 0 var(--ink)}
/* interruptores y deslizadores */
.p-tg{width:66px;height:34px}
.p-tg i{border-radius:0;background:url("../assets/ui/kit/tg_off.webp") center/contain no-repeat;box-shadow:none}
.p-tg i::after{display:none}
.p-tg input:checked + i{background:url("../assets/ui/kit/tg_on.webp") center/contain no-repeat}
input.p-rg{height:16px;border-radius:9px;background:linear-gradient(90deg,#ffcf3a 0 var(--v,50%),#141a3a var(--v,50%));box-shadow:0 0 0 2.5px #d99a1a,0 0 0 4.5px var(--ink)}
input.p-rg::-webkit-slider-thumb{width:32px;height:32px;background:radial-gradient(circle at 40% 35%,#fff 0 45%,#e8e4f4 60%,#c8c0e0);box-shadow:0 0 0 3px #f0b020,0 0 0 5px var(--ink),0 3px 0 5px rgba(26,15,46,.6)}
/* ventana de confirmación con el panel crema */
.p-modal .p-card{background:none;box-shadow:none;color:var(--ink);padding:52px 26px 28px;isolation:isolate}
.p-modal .p-card::before{content:"";position:absolute;inset:0;left:0;right:0;top:0;height:auto;border-radius:0;z-index:-1;border-style:solid;border-image:url("../assets/ui/kit/panel_gem.webp") 96 70 70 70 fill / 64px 44px 44px 44px;background:none}
.p-modal h3{position:absolute;left:0;right:0;top:12px;color:#fff;font-size:21px}
.p-modal p{color:#3a2a5a}
/* pestañas con el arte */
.p-tab.on{background:none;box-shadow:none;isolation:isolate;position:relative}
.p-tab.on::before{content:"";position:absolute;inset:-2px;z-index:-1;border-style:solid;border-image:url("../assets/ui/kit/btn_orange.webp") 52 60 58 60 fill / 44% 20px 50% 20px}
.p-tab.on{color:#fff;text-shadow:0 2px 0 var(--ink)}
@media (max-width:380px){.h2-pill{min-width:82px;padding-left:31px;padding-right:31px}
.h2-pill b{font-size:12.5px}
.h2-prof{width:108px}
}
/* contenido de los botones grandes centrado y más grande */
.h2-play .h2-pl,.h2-vs .h2-pl{align-items:center;text-align:center}
.h2-play .h2-pl b{font-size:clamp(36px,11vw,50px)}
.h2-vs .h2-pl b{font-size:clamp(24px,7vw,30px)}
.h2-play .h2-tri{width:66px;height:66px}
@media (max-height:700px){.h2-play .h2-pl b{font-size:clamp(30px,9vw,40px)}
.h2-play .h2-tri{width:50px;height:50px}
}
/* aviso de nueva versión (sobre la pantalla de carga) */
.p-modal.upd{z-index:200;background:rgba(8,4,24,.78)}
.p-modal.upd .p-card{padding-top:58px}
.p-modal.upd b{color:#7a2cff}
.upd-ic{width:110px;height:110px;margin:0 auto;background:url("../assets/ui/kit/gift_icon.webp") center/contain no-repeat;animation:pPulse 1.2s ease-in-out infinite;filter:drop-shadow(0 4px 0 rgba(26,15,46,.4))}
/* v2.1.7 · el regalo del inicio va SIN fondo: solo la caja (PNG transparente), con brillo cuando hay premio */
.h2-chest,.h2-chest.on{width:66px;height:66px;border-radius:0;background:none!important;box-shadow:none!important;justify-content:flex-end;overflow:visible;animation:none;filter:none}
.h2-chest::before{left:0;right:0;top:0;bottom:14%}
.h2-chest.on::before{filter:drop-shadow(0 3px 0 rgba(26,15,46,.55)) drop-shadow(0 0 8px rgba(255,220,90,.95));animation:h2wiggle 1.6s ease-in-out infinite}
.h2-chest b{margin-bottom:-6px}
.h2-chest:active{transform:translateY(3px)}
@media (max-height:700px){.h2-chest,.h2-chest.on{width:54px;height:54px}
}
.p-modal.upd a.p-btn{text-decoration:none;color:#fff}
.upd-help{font-size:12.5px!important;opacity:.8;margin-top:-4px!important}