/* ============================================================
   MERGE TO MILLION — UI PRO (chibi · cartoon · cómic)
   Un solo sistema para todas las pantallas: fondos con rayos y
   tramas de cómic, títulos con contorno grueso, tarjetas con
   sombra dura, botones 3D y sellos tipo explosión de cómic.
   ============================================================ */
:root{
  --pk:#ff4fd8; --pr:#8a4bff; --bl:#2f7bff; --tl:#19d3c5; --or:#ff8a1a; --yl:#ffe14a; --gr:#3fdc5a; --rd:#ff3f5e; --sl:#5a6488;
  --t1:#5b2dd6; --t2:#1b0f4a; --t3:#ff4fd8; /* tema de la pantalla */
  --card:#2b1a66; --card2:#1d1150;
}
/* ---------- contenedor ---------- */
.p-scr{min-height:100%;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:calc(8px + var(--safeT)) 14px calc(18px + var(--safeB))}
.p-scr > :not(.p-bg):not(.p-confetti):not(.mf-split){animation:pIn .35s cubic-bezier(.2,1.4,.4,1) backwards}
.p-scr > :nth-child(3){animation-delay:.03s}
.p-scr > :nth-child(4){animation-delay:.06s}
.p-scr > :nth-child(5){animation-delay:.09s}
.p-scr > :nth-child(6){animation-delay:.12s}
.p-scr > :nth-child(7){animation-delay:.15s}
.p-scr > :nth-child(n+8){animation-delay:.18s}
@keyframes pIn{from{opacity:0;transform:scale(.96) translateY(14px)}}
.p-scr > *{width:min(100%,480px)}
.p-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,var(--t1) 0%,var(--t2) 70%)}
.p-bg::before{content:"";position:absolute;left:50%;top:22%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.075) 0 7deg,transparent 7deg 18deg);animation:pSpin 60s linear infinite;mask:radial-gradient(circle,#000 0 18%,transparent 60%);-webkit-mask:radial-gradient(circle,#000 0 18%,transparent 60%)}
.p-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.11) 1.2px,transparent 1.6px) 0 0/14px 14px,linear-gradient(180deg,transparent 55%,rgba(8,4,24,.55));mask:linear-gradient(180deg,#000,transparent 75%);-webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 80%)}
@keyframes pSpin{to{transform:rotate(360deg)}}
.p-bg i{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:110%;border-radius:22%;background:linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,.06));box-shadow:0 0 0 2px rgba(26,15,46,.35);animation:pFloat var(--d) linear infinite;animation-delay:var(--dl);opacity:.55;transform:rotate(18deg)}
@keyframes pFloat{to{top:-12%;transform:rotate(380deg)}}
.p-bg.in-game{background:linear-gradient(180deg,rgba(14,7,40,.95),rgba(40,20,110,.84) 30%,rgba(10,5,30,.93))}
.p-bg.in-game::before{opacity:.5}
/* temas */
.th-shop{--t1:#d43aa8;--t2:#3a0f52;--t3:#ffd84a}
.th-miss{--t1:#119e9a;--t2:#0b2547;--t3:#5dff7a}
.th-daily{--t1:#e2711a;--t2:#4a1438;--t3:#ffe14a}
.th-rank{--t1:#2f6bff;--t2:#0d1446;--t3:#ffe14a}
.th-ach{--t1:#a36a12;--t2:#2b1240;--t3:#ffe14a}
.th-set{--t1:#46529a;--t2:#141a3a;--t3:#7fe8ff}
.th-lvl{--t1:#2a8fe6;--t2:#141048;--t3:#ffe14a}
.th-vs{--t1:#c42fae;--t2:#170b45;--t3:#3fd6ff}
.th-elem{--t1:#6a2fd6;--t2:#0b0a30;--t3:#7fe8ff}
.th-prof{--t1:#1a9fd6;--t2:#16104a;--t3:#ffe14a}
.th-win{--t1:#f0a514;--t2:#5a1a0a;--t3:#fff6b0}
.th-lose{--t1:#a3203c;--t2:#1a0820;--t3:#ffb0c0}
.th-cred{--t1:#3a3f8a;--t2:#100b30;--t3:#ffd84a}
/* ---------- cabecera ---------- */
.p-head{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:8px;position:relative;z-index:3;padding-top:2px}
.p-head.solo{grid-template-columns:1fr}
.p-iconbtn{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(#ffffff,#d9d2ff 55%,#a99be8);color:var(--ink);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink);transition:transform .08s}
.p-iconbtn svg{width:26px;height:26px}
.p-iconbtn:active{transform:translateY(4px);box-shadow:0 0 0 3px var(--ink),0 1px 0 3px var(--ink)}
.p-cur{display:flex;gap:6px;justify-self:end}
.p-pill{display:flex;align-items:center;gap:4px;height:32px;padding:0 10px 0 4px;border-radius:16px;background:rgba(12,6,32,.78);box-shadow:0 0 0 2.5px var(--ink),inset 0 -3px 0 rgba(0,0,0,.35);font-family:"Lilita One";font-size:15px}
.p-pill svg{width:24px;height:24px}
/* título tipo cartel de cómic */
.p-title{display:flex;justify-content:center;filter:drop-shadow(0 5px 0 var(--ink))}
.p-title svg{height:clamp(40px,11vw,54px);width:auto;max-width:100%;overflow:visible}
.p-title.big svg{height:clamp(56px,16vw,78px)}
.p-sub{margin:-6px 0 0;text-align:center;font-family:"Baloo 2";font-weight:700;font-size:14px;line-height:1.3;color:rgba(255,255,255,.88)}
.p-sub b{color:var(--t3);font-family:"Lilita One";font-weight:400}
/* ---------- tarjetas ---------- */
.p-card{position:relative;border-radius:22px;padding:14px;background:linear-gradient(180deg,var(--c1,#3a2490),var(--c2,#22145e));box-shadow:0 0 0 3px var(--ink),0 7px 0 3px var(--ink),inset 0 2px 0 rgba(255,255,255,.22);overflow:hidden}
.p-card::before{content:"";position:absolute;left:10px;right:10px;top:6px;height:38%;border-radius:16px 16px 40% 40%/16px 16px 22px 22px;background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,0));pointer-events:none}
.p-card > *{position:relative}
.p-card.light{--c1:#fff8e8;--c2:#ffe7c2;color:var(--ink)}
.p-card.flat{box-shadow:0 0 0 3px var(--ink),inset 0 2px 0 rgba(255,255,255,.18)}
.p-ribbon{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:4px 0 -2px 6px;padding:5px 16px 6px 12px;font-family:"Lilita One";font-size:16px;letter-spacing:.5px;color:#fff;background:linear-gradient(var(--rb1,#ff5fd8),var(--rb2,#b02a9a));clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%);text-shadow:0 2px 0 var(--ink);transform:rotate(-2deg);filter:drop-shadow(0 3px 0 var(--ink))}
.p-ribbon svg{width:18px;height:18px}
/* ---------- botones ---------- */
.p-btn{--b1:#7dff8a;--b2:#1fb84a;--b3:#0f7a2e;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:10px 16px;border-radius:18px;font-family:"Lilita One";font-size:21px;letter-spacing:.5px;color:#fff;text-shadow:0 2px 0 var(--ink);background:linear-gradient(var(--b1),var(--b2) 62%,var(--b3));box-shadow:0 0 0 3px var(--ink),0 6px 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.18);overflow:hidden;transition:transform .08s,filter .1s}
.p-btn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:pShine 3.6s ease-in-out infinite}
@keyframes pShine{0%,62%{left:-40%}100%{left:130%}}
.p-btn:active{transform:translateY(5px);box-shadow:0 0 0 3px var(--ink),0 1px 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.45)}
.p-btn svg{width:28px;height:28px;flex:none;filter:drop-shadow(0 2px 0 var(--ink))}
.p-btn small{display:block;font-family:"Baloo 2";font-weight:800;font-size:12px;letter-spacing:0;opacity:.92;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.p-btn .bl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left}
.p-btn.c{align-items:center}
.p-btn.big{min-height:66px;font-size:27px}
.p-btn.sm{min-height:40px;font-size:15px;padding:6px 12px;border-radius:14px;gap:6px}
.p-btn.sm svg{width:20px;height:20px}
.p-btn.blue{--b1:#7fb4ff;--b2:#2f6bff;--b3:#1a3aa8}
.p-btn.gold{--b1:#fff3a0;--b2:#ffbe1a;--b3:#d97a00;color:#4a2400;text-shadow:0 1.5px 0 rgba(255,255,255,.6)}
.p-btn.gold svg{filter:none}
.p-btn.pink{--b1:#ff9ff0;--b2:#e43ac4;--b3:#9a1a86}
.p-btn.gray{--b1:#9aa0c0;--b2:#5d6385;--b3:#3a3e5a}
.p-btn.red{--b1:#ff9aa8;--b2:#ef3a5a;--b3:#a81a34}
.p-btn.purple{--b1:#c39bff;--b2:#7a3cf0;--b3:#4a1aa8}
.p-btn.off{filter:grayscale(.75) brightness(.8)}
.p-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.p-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.p-stack{display:flex;flex-direction:column;gap:12px}
/* sello de explosión (cómic) */
.p-burst{position:absolute;display:grid;place-items:center;width:var(--bs,46px);height:var(--bs,46px);font-family:"Lilita One";font-size:13px;line-height:1;color:#fff;text-align:center;background:var(--bc,#ff3f5e);clip-path:polygon(50% 0,61% 18%,82% 8%,80% 30%,100% 36%,86% 52%,100% 68%,79% 72%,82% 93%,61% 84%,50% 100%,39% 84%,18% 93%,21% 72%,0 68%,14% 52%,0 36%,20% 30%,18% 8%,39% 18%);text-shadow:0 1.5px 0 var(--ink);animation:pPulse 1.2s ease-in-out infinite}
@keyframes pPulse{50%{transform:scale(1.12) rotate(8deg)}}
/* pestañas */
.p-tabs{display:flex;gap:6px;padding:5px;border-radius:18px;background:rgba(10,5,30,.6);box-shadow:0 0 0 3px var(--ink),inset 0 3px 6px rgba(0,0,0,.4)}
.p-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:13px;font-family:"Lilita One";font-size:15px;color:rgba(255,255,255,.7);background:transparent}
.p-tab svg{width:20px;height:20px}
.p-tab.on{color:var(--ink);background:linear-gradient(#fff,#ffe7a0 60%,#ffc533);box-shadow:0 0 0 2.5px var(--ink),0 3px 0 2.5px var(--ink)}
/* barra de progreso */
.p-bar{position:relative;height:16px;border-radius:9px;background:#0c0620;box-shadow:0 0 0 2.5px var(--ink),inset 0 2px 3px #000;overflow:hidden}
.p-bar i{position:absolute;inset:0 auto 0 0;border-radius:9px;background:linear-gradient(#a6ff8a,#2fd15a);box-shadow:inset 0 3px 0 rgba(255,255,255,.4)}
.p-bar.gold i{background:linear-gradient(#fff3a0,#ffb21a)}
.p-bar.cyan i{background:linear-gradient(#bff6ff,#2fb4ff)}
.p-bar span{position:absolute;inset:0;display:grid;place-items:center;font-family:"Lilita One";font-size:11px;text-shadow:0 1px 0 var(--ink)}
/* fichas de estadística */
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p-stat{border-radius:16px;padding:8px 4px 7px;text-align:center;background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:0 0 0 2.5px var(--ink),inset 0 2px 0 rgba(255,255,255,.18)}
.p-stat svg{width:22px;height:22px;display:block;margin:0 auto 2px}
.p-stat small{display:block;font-family:"Baloo 2";font-weight:800;font-size:11px;opacity:.8;letter-spacing:.3px;text-transform:uppercase}
.p-stat b{display:block;font-family:"Lilita One";font-weight:400;font-size:20px;line-height:1.1;color:#fff;text-shadow:0 2px 0 var(--ink)}
/* iconos svg genéricos */
.p-i{display:inline-block;vertical-align:middle}
/* recompensa */
.p-reward{display:flex;justify-content:center;gap:10px}
.p-reward span{display:flex;align-items:center;gap:6px;padding:6px 16px 6px 8px;border-radius:20px;background:rgba(10,5,30,.65);box-shadow:0 0 0 3px var(--ink);font-family:"Lilita One";font-size:22px;color:var(--yl);text-shadow:0 2px 0 var(--ink)}
.p-reward svg{width:30px;height:30px}
/* modal */
.p-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(8,4,24,.7);animation:pFade .2s}
@keyframes pFade{from{opacity:0}}
.p-modal .p-card{width:min(100%,360px);text-align:center;display:flex;flex-direction:column;gap:12px;animation:pIn .3s cubic-bezier(.2,1.4,.4,1)}
.p-modal h3{margin:0;font-family:"Luckiest Guy";font-weight:400;font-size:26px;color:var(--yl);text-shadow:0 3px 0 var(--ink)}
.p-modal p{margin:0;font-family:"Baloo 2";font-weight:700;font-size:15px}
/* confeti */
.p-confetti{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.p-confetti i{position:absolute;top:-20px;left:var(--x);width:9px;height:14px;background:var(--c);border-radius:2px;box-shadow:0 0 0 1.5px var(--ink);animation:pConf var(--d) linear var(--dl) infinite}
@keyframes pConf{to{transform:translate(var(--dx),110vh) rotate(720deg)}}
/* ---- niveles: mapa de mundos ---- */
.lv-chap{display:flex;flex-direction:column;gap:10px;padding:0;overflow:hidden}
.lv-cover{position:relative;height:96px;background-size:cover;background-position:center 30%;display:flex;align-items:flex-end;padding:10px 14px;box-shadow:inset 0 -60px 50px -20px rgba(10,5,30,.85)}
.lv-cover.night::after{content:"";position:absolute;inset:0;background:rgba(25,12,70,.45)}
.lv-cover > *{position:relative;z-index:1}
.lv-cover h4{margin:0;font-family:"Luckiest Guy";font-weight:400;font-size:24px;line-height:1;color:var(--tc);text-shadow:0 3px 0 var(--ink),0 0 14px rgba(0,0,0,.5)}
.lv-cover p{margin:2px 0 0;font-family:"Baloo 2";font-weight:800;font-size:12px;opacity:.95;text-shadow:0 1px 0 var(--ink)}
.lv-cover .p-bar{position:absolute;right:12px;bottom:14px;width:34%;height:12px}
.lv-nodes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 8px;padding:4px 12px 14px}
.lv-n{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:"Luckiest Guy";font-size:21px;color:#fff;text-shadow:0 2px 0 var(--ink),0 0 6px var(--ink);background-size:280% auto;background-position:center;box-shadow:0 0 0 3px var(--ink),0 4px 0 3px var(--ink),inset 0 0 0 4px var(--tc),inset 0 -14px 16px rgba(0,0,0,.45)}
.lv-n.night{filter:saturate(.8) brightness(.8)}
.lv-n.done::after{content:"";position:absolute;right:-4px;top:-4px;width:20px;height:20px;border-radius:50%;background:var(--gr) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4 10-10' fill='none' stroke='%231a0f2e' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 0 2.5px var(--ink)}
.lv-n.cur{animation:lvCur 1.2s ease-in-out infinite;box-shadow:0 0 0 3px var(--ink),0 4px 0 3px var(--ink),inset 0 0 0 4px #fff,0 0 0 8px rgba(255,225,74,.55)}
@keyframes lvCur{50%{transform:scale(1.1)}}
.lv-n.cur::before{content:"TÚ";position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:"Lilita One";font-size:11px;padding:1px 6px;border-radius:7px;background:var(--yl);color:var(--ink);box-shadow:0 0 0 2px var(--ink);text-shadow:none}
.lv-n small{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);font-family:"Lilita One";font-size:9px;padding:0 5px;border-radius:6px;background:var(--ink);color:#ffd84a;text-shadow:none;white-space:nowrap}
.lv-next{display:flex;align-items:center;gap:12px}
.lv-next canvas{width:84px;height:84px;flex:none}
.lv-next .bl b{font-family:"Luckiest Guy";font-weight:400;font-size:26px;line-height:1;color:var(--yl);text-shadow:0 3px 0 var(--ink)}
.lv-next .bl span{display:block;font-family:"Baloo 2";font-weight:800;font-size:13px;opacity:.9}
/* ---- tienda ---- */
.sh-hero{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}
.sh-hero canvas{width:120px;height:120px;border-radius:20px;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.35),rgba(255,255,255,0) 65%)}
.sh-hero h4{margin:0;font-family:"Luckiest Guy";font-weight:400;font-size:24px;line-height:1;color:var(--yl);text-shadow:0 3px 0 var(--ink)}
.sh-hero p{margin:4px 0 8px;font-family:"Baloo 2";font-weight:800;font-size:13px;opacity:.92}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sh-it{--rc:#8aa0c8;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 8px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 55%,#2a1a66),#1d1150 85%);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink),inset 0 2px 0 rgba(255,255,255,.25)}
.sh-it.eq{box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink),0 0 0 7px var(--yl),inset 0 2px 0 rgba(255,255,255,.25)}
.sh-it canvas{width:100%;max-width:96px;aspect-ratio:1.1;height:auto}
.sh-it b{font-family:"Lilita One";font-weight:400;font-size:14px;line-height:1;text-shadow:0 2px 0 var(--ink)}
.sh-it .rar{position:absolute;top:6px;left:6px;font-family:"Lilita One";font-size:9px;letter-spacing:.5px;padding:2px 6px;border-radius:7px;background:var(--rc);color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.sh-it .p-btn{min-height:32px;font-size:14px;padding:4px 8px;border-radius:12px;gap:4px}
.sh-it .p-btn svg{width:16px;height:16px}
.sh-tag{font-family:"Lilita One";font-size:12px;padding:5px 10px;border-radius:11px;background:var(--yl);color:var(--ink);box-shadow:0 0 0 2.5px var(--ink)}
.r-com{--rc:#9fb4d8}
.r-rar{--rc:#4fb4ff}
.r-epi{--rc:#c06bff}
.r-leg{--rc:#ffb21a}
.sh-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sh-pack{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:16px;background:linear-gradient(#3b8bff,#1a3aa8);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink);font-family:"Lilita One";text-shadow:0 2px 0 var(--ink)}
.sh-pack svg{width:38px;height:38px}
.sh-pack small{font-family:"Baloo 2";font-weight:800;font-size:11px;opacity:.85}
/* ---- misiones ---- */
.ms{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center}
.ms-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(#5dffd0,#11a89a);box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.35)}
.ms-ic svg{width:32px;height:32px}
.ms b{display:block;font-family:"Lilita One";font-weight:400;font-size:16px;line-height:1.15;margin-bottom:6px}
.ms.done .ms-ic{background:linear-gradient(#fff3a0,#ffb21a)}
.ms.claimed{opacity:.6}
.ms-rw{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:"Lilita One";font-size:15px;color:var(--yl);text-shadow:0 2px 0 var(--ink)}
.ms-rw svg{width:26px;height:26px}
.ms-timer{display:flex;align-items:center;justify-content:center;gap:6px;font-family:"Lilita One";font-size:15px;color:#bff6ff}
.ms-timer svg{width:20px;height:20px}
/* ---- diario ---- */
.dy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dy{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 10px;border-radius:18px;background:linear-gradient(#5a3ac8,#2a1880);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink),inset 0 2px 0 rgba(255,255,255,.25);font-family:"Lilita One";text-shadow:0 2px 0 var(--ink)}
.dy small{font-size:12px;opacity:.9}
.dy svg{width:40px;height:40px}
.dy b{font-weight:400;font-size:17px;color:var(--yl)}
.dy.big{grid-column:span 2;flex-direction:row;justify-content:center;gap:10px;background:linear-gradient(#ff9a3a,#c4401a)}
.dy.big svg{width:64px;height:64px}
.dy.got{filter:saturate(.4) brightness(.75)}
.dy.got::after{content:"";position:absolute;inset:auto 6px 6px auto;width:30px;height:30px;border-radius:50%;background:var(--gr) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4 10-10' fill='none' stroke='%231a0f2e' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 0 0 3px var(--ink);transform:rotate(-12deg)}
.dy.today{background:linear-gradient(#fff3a0,#ffb21a);color:var(--ink);text-shadow:none;animation:lvCur 1.1s ease-in-out infinite;box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink),0 0 0 8px rgba(255,225,74,.4)}
.dy.today b{color:var(--ink)}
.dy-streak{display:flex;align-items:center;justify-content:center;gap:8px;font-family:"Lilita One";font-size:18px}
.dy-streak svg{width:30px;height:30px}
/* ---- ranking ---- */
.rk-pod{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:6px;padding-top:6px}
.rk-p{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:"Lilita One";text-shadow:0 2px 0 var(--ink)}
.rk-p canvas{width:84px;height:78px}
.rk-p b{font-weight:400;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-p small{font-size:13px;color:var(--yl)}
.rk-step{width:100%;display:grid;place-items:center;border-radius:14px 14px 4px 4px;font-family:"Luckiest Guy";font-size:30px;box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.4)}
.rk-p.n1 .rk-step{height:86px;background:linear-gradient(#fff3a0,#ffb21a)}
.rk-p.n2 .rk-step{height:62px;background:linear-gradient(#f2f6ff,#9aa8c8)}
.rk-p.n3 .rk-step{height:46px;background:linear-gradient(#ffc28a,#c46a2a)}
.rk-list{display:flex;flex-direction:column;gap:7px}
.rk-row{display:grid;grid-template-columns:34px 1fr auto auto;gap:8px;align-items:center;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:0 0 0 2.5px var(--ink);font-family:"Lilita One";font-size:15px}
.rk-row.me{background:linear-gradient(rgba(255,225,74,.35),rgba(255,225,74,.12))}
.rk-row i{font-style:normal;color:var(--yl)}
.rk-row small{font-family:"Baloo 2";font-weight:800;opacity:.8}
/* ---- logros ---- */
.ac-top{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center}
.ac-ring{width:92px;height:92px}
.ac-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ac{display:grid;grid-template-columns:50px 1fr;gap:8px;align-items:center;padding:10px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:0 0 0 2.5px var(--ink)}
.ac-m{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#6a6f8a,#3a3e5a);box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.25)}
.ac-m svg{width:28px;height:28px;opacity:.6}
.ac.got{background:linear-gradient(rgba(255,204,51,.28),rgba(255,204,51,.08))}
.ac.got .ac-m{background:radial-gradient(circle at 40% 35%,#fff7c0,#ffc533 55%,#d98a00);animation:acShine 2.6s ease-in-out infinite}
.ac.got .ac-m svg{opacity:1}
@keyframes acShine{50%{box-shadow:0 0 0 3px var(--ink),0 0 18px #ffd84a,inset 0 3px 0 rgba(255,255,255,.4)}}
.ac b{display:block;font-family:"Lilita One";font-weight:400;font-size:14px;line-height:1.1}
.ac small{display:block;font-family:"Baloo 2";font-weight:700;font-size:11px;line-height:1.15;opacity:.8}
/* ---- ajustes ---- */
.st-sec{display:flex;flex-direction:column;gap:2px}
.st-row{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;min-height:52px;padding:4px 2px;border-bottom:2px dashed rgba(255,255,255,.12)}
.st-row:last-child{border-bottom:0}
.st-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--ic,#2f6bff);box-shadow:0 0 0 2.5px var(--ink),inset 0 3px 0 rgba(255,255,255,.35)}
.st-ic svg{width:24px;height:24px}
.st-row > span{font-family:"Lilita One";font-size:16px;line-height:1.1}
.st-row > span small{display:block;font-family:"Baloo 2";font-weight:700;font-size:11.5px;opacity:.75;line-height:1.2}
.st-row input[type=range]{grid-column:2 / span 2;width:100%}
.st-row.rg{grid-template-columns:40px 1fr 54px}
.st-row.rg em{font-style:normal;font-family:"Lilita One";font-size:15px;text-align:right;color:var(--yl)}
.st-row.rg input{grid-column:auto}
.st-range{grid-column:1 / -1;margin:-6px 0 6px 50px}
.p-tg{position:relative;width:62px;height:34px;flex:none}
.p-tg input{position:absolute;opacity:0;inset:0;margin:0;z-index:2;cursor:pointer}
.p-tg i{position:absolute;inset:0;border-radius:17px;background:#3a3e5a;box-shadow:0 0 0 2.5px var(--ink),inset 0 3px 4px rgba(0,0,0,.45);transition:background .2s}
.p-tg i::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:linear-gradient(#fff,#cfc8f0);box-shadow:0 0 0 2.5px var(--ink),0 2px 0 2px var(--ink);transition:left .2s cubic-bezier(.3,1.6,.5,1)}
.p-tg input:checked + i{background:linear-gradient(#7dff8a,#1fb84a)}
.p-tg input:checked + i::after{left:31px}
input.p-rg{-webkit-appearance:none;appearance:none;height:14px;border-radius:8px;background:linear-gradient(90deg,var(--yl) 0 var(--v,50%),#0c0620 var(--v,50%));box-shadow:0 0 0 2.5px var(--ink);outline:none}
input.p-rg::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#ffd84a 60%,#e08a00);box-shadow:0 0 0 2.5px var(--ink),0 3px 0 2.5px var(--ink);cursor:pointer}
input.p-rg::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#ffd84a;border:2.5px solid var(--ink)}
.p-seg{display:flex;gap:4px;padding:3px;border-radius:14px;background:#0c0620;box-shadow:0 0 0 2.5px var(--ink)}
.p-seg button{min-width:42px;height:32px;padding:0 9px;border-radius:11px;font-size:13px;color:rgba(255,255,255,.7);background:transparent}
.p-seg button.on{color:var(--ink);background:linear-gradient(#fff,#ffd84a);box-shadow:0 0 0 2px var(--ink)}
.p-inp{width:100%;font-family:"Lilita One";font-size:17px;color:#fff;padding:9px 12px;border-radius:13px;border:0;background:#0c0620;box-shadow:0 0 0 2.5px var(--ink),inset 0 3px 4px rgba(0,0,0,.5);outline:none;user-select:text;-webkit-user-select:text}
.p-inp:focus{box-shadow:0 0 0 2.5px var(--ink),0 0 0 5px var(--yl)}
/* ---- 1v1 ---- */
.vs-hero{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.vs-globe{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bff6ff,#2f9bff 45%,#1a3aa8 75%);box-shadow:0 0 0 3px var(--ink),0 0 30px rgba(63,214,255,.6);position:relative;overflow:hidden}
.vs-globe::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 30% 22% at 30% 40%,#5dff7a 60%,transparent 62%),radial-gradient(ellipse 22% 30% at 68% 62%,#5dff7a 60%,transparent 62%),radial-gradient(ellipse 18% 12% at 70% 24%,#5dff7a 60%,transparent 62%);animation:vsSpin 6s linear infinite;background-size:200% 100%}
@keyframes vsSpin{to{background-position:-200% 0}}
.vs-wl{display:flex;gap:8px;margin-top:6px}
.vs-wl span{flex:1;text-align:center;padding:4px;border-radius:12px;box-shadow:0 0 0 2.5px var(--ink);font-family:"Lilita One";font-size:14px}
.vs-wl .w{background:linear-gradient(#5dff7a,#1fa84a)}
.vs-wl .l{background:linear-gradient(#ff8a9a,#c42a4a)}
.vs-cpu{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vs-cpu button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 10px;border-radius:18px;background:linear-gradient(var(--b1),var(--b2));box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.35);font-size:16px;text-shadow:0 2px 0 var(--ink)}
.vs-cpu canvas{width:70px;height:62px}
.vs-cpu small{font-family:"Baloo 2";font-weight:800;font-size:11px;opacity:.9}
.vs-code{display:grid;grid-template-columns:1fr auto;gap:10px}
/* emparejado: pantalla partida en diagonal */
.mf-split{position:fixed;inset:0;z-index:-1;background:linear-gradient(115deg,#2f6bff 0 49.6%,#1a0f2e 49.6% 50.4%,#ef3a8a 50.4%)}
.mf-split::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.8px) 0 0/12px 12px}
.mf{display:grid;grid-template-rows:auto 1fr auto 1fr auto;min-height:calc(100vh - 40px);align-items:center}
.mf-p{display:flex;flex-direction:column;align-items:center;gap:4px;animation:mfL .5s cubic-bezier(.2,1.4,.4,1)}
.mf-p.r{animation-name:mfR}
@keyframes mfL{from{transform:translateX(-120%)}}
@keyframes mfR{from{transform:translateX(120%)}}
.mf-p canvas{width:150px;height:140px}
.mf-name{font-family:"Luckiest Guy";font-size:28px;text-shadow:0 3px 0 var(--ink)}
.mf-tag{font-family:"Lilita One";font-size:14px;padding:3px 12px;border-radius:10px;background:rgba(10,5,30,.65);box-shadow:0 0 0 2.5px var(--ink)}
.mf-vs{justify-self:center;width:120px;height:120px;display:grid;place-items:center;font-family:"Luckiest Guy";font-size:58px;color:var(--yl);text-shadow:0 4px 0 var(--ink),0 0 18px #ff8a1a;background:#1a0f2e;clip-path:polygon(50% 0,61% 18%,82% 8%,80% 30%,100% 36%,86% 52%,100% 68%,79% 72%,82% 93%,61% 84%,50% 100%,39% 84%,18% 93%,21% 72%,0 68%,14% 52%,0 36%,20% 30%,18% 8%,39% 18%);animation:pPulse .8s ease-in-out infinite}
.mf-go{text-align:center;font-family:"Luckiest Guy";font-size:30px;text-shadow:0 3px 0 var(--ink)}
.mf-go b{font-weight:400;color:var(--yl);font-size:44px}
/* sala privada */
.rm-code{display:flex;justify-content:center;gap:8px}
.rm-code b{width:52px;height:64px;display:grid;place-items:center;border-radius:14px;font-family:"Luckiest Guy";font-weight:400;font-size:40px;color:var(--ink);background:linear-gradient(#fff,#ffe7a0 60%,#ffc533);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink)}
/* buscando: radar */
.mm2-radar{position:relative;width:min(70vw,250px);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle,#0f5a8a 0,#0a2a55 55%,#06142e 70%);box-shadow:0 0 0 4px var(--ink),0 0 0 10px rgba(63,214,255,.25),0 0 40px rgba(63,214,255,.5);overflow:hidden}
.mm2-radar::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(127,232,255,.55),transparent 22%);animation:pSpin 2.2s linear infinite;border-radius:50%}
.mm2-radar::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 0 31%,rgba(127,232,255,.35) 31.5% 32.5%,transparent 33% 64%,rgba(127,232,255,.35) 64.5% 65.5%,transparent 66%),linear-gradient(rgba(127,232,255,.25),rgba(127,232,255,.25)) center/2px 100% no-repeat,linear-gradient(rgba(127,232,255,.25),rgba(127,232,255,.25)) center/100% 2px no-repeat}
.mm2-radar canvas{position:absolute;left:50%;top:50%;width:46%;height:auto;transform:translate(-50%,-50%);z-index:2}
.mm2-dot{position:absolute;z-index:1;left:calc(50% + var(--r) * cos(var(--a)) / 2);top:calc(50% + var(--r) * sin(var(--a)) / 2);width:12px;height:12px;margin:-6px;border-radius:50%;background:#7fe8ff;box-shadow:0 0 10px #7fe8ff;animation:mmBlip 2.2s ease-out infinite;animation-delay:var(--d)}
@keyframes mmBlip{0%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.4)}60%{opacity:0}}
.mm2-time{text-align:center;font-family:"Luckiest Guy";font-size:44px;line-height:1;text-shadow:0 4px 0 var(--ink)}
.mm2-tip{text-align:center;font-family:"Baloo 2";font-weight:800;font-size:13px;opacity:.85;min-height:2.6em}
/* ---- pausa ---- */
.pz-top{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center}
.pz-top canvas{width:86px;height:86px}
.pz-top h4{margin:0;font-family:"Luckiest Guy";font-weight:400;font-size:22px;color:var(--yl);text-shadow:0 3px 0 var(--ink)}
.pz-top p{margin:2px 0 0;font-family:"Baloo 2";font-weight:800;font-size:13px;opacity:.9}
/* ---- resultados ---- */
.rs-hero{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:4px}
.rs-hero canvas{width:150px;height:140px;position:relative;z-index:1}
.rs-hero .rays{position:absolute;top:-10px;width:250px;height:250px;border-radius:50%;background:repeating-conic-gradient(rgba(255,240,170,.55) 0 8deg,transparent 8deg 20deg);animation:pSpin 14s linear infinite;mask:radial-gradient(circle,#000 20%,transparent 68%);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%)}
.th-lose .rs-hero .rays{background:repeating-conic-gradient(rgba(255,120,150,.3) 0 8deg,transparent 8deg 20deg)}
.rs-score{text-align:center;font-family:"Lilita One";margin-top:-6px}
.rs-score small{display:block;font-size:14px;letter-spacing:2px;opacity:.85}
.rs-score b{display:block;font-family:"Luckiest Guy";font-weight:400;font-size:54px;line-height:1;color:#fff;text-shadow:0 4px 0 var(--ink),0 0 20px var(--t3)}
.rs-ko{position:absolute;top:6px;right:8%;z-index:2;--bs:76px;--bc:#ff3f5e;font-family:"Luckiest Guy";font-size:22px;transform:rotate(12deg)}
.rs-new{position:absolute;top:6px;left:6%;z-index:2;--bs:82px;--bc:#ffbe1a;color:var(--ink);text-shadow:0 1px 0 #fff;font-size:13px}
.rs-reason{display:flex;align-items:center;justify-content:center;gap:8px;font-family:"Lilita One";font-size:16px;color:var(--t3)}
.rs-reason svg{width:22px;height:22px}
/* comparación 1v1 */
.rv-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.rv-p{display:flex;flex-direction:column;align-items:center;font-family:"Lilita One";text-shadow:0 2px 0 var(--ink)}
.rv-p canvas{width:110px;height:100px}
.rv-p.win canvas{filter:drop-shadow(0 0 14px #ffd84a)}
.rv-p .crown{width:40px;height:30px;margin-bottom:-12px;z-index:1}
.rv-vs{font-family:"Luckiest Guy";font-size:32px;color:var(--yl);text-shadow:0 3px 0 var(--ink)}
.rv-rows{display:flex;flex-direction:column;gap:8px}
.rv-row{display:grid;grid-template-columns:62px 1fr 62px;gap:8px;align-items:center;font-family:"Lilita One";font-size:15px}
.rv-row b{font-weight:400;text-align:center}
.rv-row b.w{color:var(--yl)}
.rv-mid{position:relative;height:22px;border-radius:11px;background:#0c0620;box-shadow:0 0 0 2.5px var(--ink);overflow:hidden;display:flex}
.rv-mid i{height:100%}
.rv-mid .a{background:linear-gradient(#7fe8ff,#2f9bff)}
.rv-mid .b{background:linear-gradient(#ff9ff0,#e43ac4);margin-left:auto}
.rv-mid span{position:absolute;inset:0;display:grid;place-items:center;font-family:"Baloo 2";font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 0 var(--ink)}
/* sin vidas: temporizador circular */
.ct-ring{position:relative;width:170px;height:170px;margin:0 auto}
.ct-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ct-ring canvas{position:absolute;left:50%;top:50%;width:120px;height:112px;transform:translate(-50%,-52%)}
.ct-ring em{position:absolute;right:0;top:4px;--bs:50px;--bc:#ff3f5e;font-style:normal;font-family:"Luckiest Guy";font-size:22px}
/* ---- elementos ---- */
.el-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.el{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;border-radius:16px;background:linear-gradient(color-mix(in srgb,var(--ec) 70%,#fff),color-mix(in srgb,var(--ec) 70%,#1a0f2e));box-shadow:0 0 0 2.5px var(--ink),0 4px 0 2.5px var(--ink),inset 0 2px 0 rgba(255,255,255,.4);font-family:"Lilita One";font-size:12px;text-shadow:0 1.5px 0 var(--ink)}
.el i{font-style:normal;font-size:24px;line-height:1.1;filter:drop-shadow(0 2px 0 var(--ink))}
.el.sel{transform:translateY(-3px);box-shadow:0 0 0 2.5px var(--ink),0 4px 0 2.5px var(--ink),0 0 0 6px #fff}
.el-det{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;font-family:"Baloo 2";font-weight:800;font-size:14px}
.el-det .big{font-size:46px;filter:drop-shadow(0 3px 0 var(--ink))}
.el-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.el-chips span{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 4px;border-radius:10px;font-family:"Lilita One";font-size:12px;box-shadow:0 0 0 2px var(--ink);background:var(--ec)}
.el-rule{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;font-family:"Lilita One";font-size:14px;text-align:center}
.el-rule .ball{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 6px;border-radius:22px;font-size:18px;box-shadow:0 0 0 2.5px var(--ink),inset 0 3px 0 rgba(255,255,255,.4)}
.el-rule small{display:block;font-family:"Baloo 2";font-weight:800;font-size:11px;opacity:.85}
.el-rule .op{font-family:"Luckiest Guy";font-size:22px;color:var(--yl);text-shadow:0 2px 0 var(--ink)}
/* ---- perfil ---- */
.pf-top{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.pf-top canvas{width:120px;height:112px}
.pf-lv{display:flex;align-items:center;gap:8px;margin-top:6px}
.pf-lv b{font-family:"Luckiest Guy";font-weight:400;font-size:20px;color:var(--yl);text-shadow:0 2px 0 var(--ink)}
/* ---- carga ---- */
#loading.pro{background:radial-gradient(120% 80% at 50% 10%,#6a2fd6,#14083a 70%)}
#loading.pro::before{content:"";position:absolute;left:50%;top:30%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(rgba(255,255,255,.07) 0 7deg,transparent 7deg 18deg);animation:pSpin 40s linear infinite}
#loading.pro .load-inner{position:relative}
.ld-cube{width:84px;height:84px;margin:4px auto 0;border-radius:20px;background:linear-gradient(145deg,#ff8ab0,#ff3f5e 55%,#a8183a);box-shadow:0 0 0 4px var(--ink),0 8px 0 4px var(--ink),inset 0 6px 0 rgba(255,255,255,.45);display:grid;place-items:center;font-family:"Luckiest Guy";font-size:38px;color:#fff;text-shadow:0 3px 0 var(--ink);animation:ldHop .9s cubic-bezier(.3,0,.4,1) infinite}
@keyframes ldHop{0%,100%{transform:translateY(0) scale(1.08,.92)}45%{transform:translateY(-22px) scale(.95,1.05)}}
/* tarjeta de nivel completado (sobre el juego, sin pausar) */
.lc{position:fixed;left:50%;top:22%;z-index:8;transform:translateX(-50%);width:min(88vw,360px);pointer-events:none;animation:lcIn 3.2s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes lcIn{0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-8deg)}12%{opacity:1;transform:translateX(-50%) scale(1.06) rotate(1deg)}18%{transform:translateX(-50%) scale(1) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-40px) scale(.9)}}
.lc .p-card{text-align:center;--c1:#ffbe1a;--c2:#d9620a;padding:12px 14px 14px}
.lc h3{margin:0;font-family:"Luckiest Guy";font-weight:400;font-size:30px;line-height:1;color:#fff;text-shadow:0 3px 0 var(--ink)}
.lc .stars{display:flex;justify-content:center;gap:6px;margin:6px 0}
.lc .stars svg{width:40px;height:40px;animation:lcStar .5s cubic-bezier(.2,1.6,.4,1) both}
.lc .stars svg:nth-child(2){width:52px;height:52px;margin-top:-8px;animation-delay:.15s}
.lc .stars svg:nth-child(3){animation-delay:.3s}
@keyframes lcStar{from{transform:scale(0) rotate(-90deg)}}
.lc p{margin:0;font-family:"Lilita One";font-size:16px;text-shadow:0 2px 0 var(--ink)}
@media (max-height:700px){.p-scr{gap:9px}
.p-title svg{height:38px}
.lv-cover{height:80px}
}
.p-empty{text-align:center;font-family:'Lilita One';font-size:16px;display:flex;flex-direction:column;align-items:center;gap:6px}
.p-empty svg{width:54px;height:54px}
.pf-lv svg{width:26px;height:26px}
.dy-streak svg,.ms-timer svg{flex:none}
.st-range input{width:100%}
/* ============================================================
   v2.1.3 · pantallas en una columna centrada (en PC ya no se desbordan)
   ============================================================ */
.p-scr{width:100%;max-width:520px;margin:0 auto}
.p-scr > .p-bg,.p-scr > .p-confetti,.p-scr > .mf-split{width:auto;max-width:none}
.p-scr > *{max-width:100%}
/* AJUSTES: un solo panel con pestañas, cinta, opciones y LISTO */
.st-panel{display:flex;flex-direction:column;gap:10px;padding:12px 12px 16px;overflow:visible}
.st-panel > .p-tabs{width:100%}
.st-panel > .p-ribbon{margin:6px 0 -4px -2px;width:auto;max-width:calc(100% - 8px)}
.st-panel > .st-sec{padding:4px 12px;border-radius:16px;background:rgba(8,4,30,.38);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 2px rgba(26,15,46,.6)}
.st-panel > .p-btn{width:100%;margin-top:4px}
.st-panel .st-row{min-height:50px}
@media (max-width:360px){.st-panel .st-row.rg{grid-template-columns:34px 1fr 50px}
.st-panel{padding:10px 8px 14px}
.st-panel > .st-sec{padding:2px 8px}
.st-row{grid-template-columns:34px 1fr auto;gap:8px}
.st-ic{width:34px;height:34px;border-radius:11px}
.st-range{margin-left:42px}
.p-tab{min-height:36px}
}
@media (max-height:640px){.st-panel{gap:6px}
.st-panel .st-row{min-height:44px}
}