/* Gatos Artilleros: violeta tinta con naranja gato como acento (misma identidad del original). */
:root{
  --ink:#14121f; --panel:#1f1b33; --panel2:#2a2545; --line:#3b3460;
  --text:#f3ecff; --mute:#a79fc7; --accent:#ff8a3d; --accent-ink:#2a1304;
  --foe:#38bdf8; --good:#4ade80; --bad:#f87171; --gold:#ffcf4a; --gem:#7ee8ff;
  --display:'Chango','Impact',system-ui,sans-serif; --body:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink);color:var(--text);font:15px/1.45 var(--body);overscroll-behavior:none}
body{min-height:100dvh}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--foe);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h2{font-family:var(--display);font-size:1.5rem}
h3{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:8px}
p{margin:0}
.mute{color:var(--mute)}
.small{font-size:.82rem}

/* ---------- estructura ---------- */
#app{display:flex;flex-direction:column;min-height:100dvh;max-width:1100px;margin:0 auto}
.top{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) 16px 10px;position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--ink) 70%,rgba(20,18,31,0))}
.me{display:flex;align-items:center;gap:10px;min-width:0;flex:1;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.lvl{position:relative;width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p,0)*1%),var(--panel2) 0);}
.lvl b{width:34px;height:34px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-family:var(--display);font-size:1rem}
.me .nm{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .rk{display:block;font-size:.78rem;color:var(--mute)}
.cur{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 8px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cur i{font-style:normal}
.cur.gem{cursor:pointer}
.cur.gem::after{content:'+';display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.85rem;margin-left:2px}
.iconbtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;flex:none}
main{flex:1;padding:4px 16px calc(84px + var(--safe-b))}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;background:rgba(20,18,31,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--safe-b))}
.tabs button{flex:1;max-width:140px;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--mute);font-size:.72rem;font-weight:700;cursor:pointer;border-radius:12px}
.tabs button span{font-size:1.35rem;line-height:1}
.tabs button[aria-selected=true]{color:var(--text);background:var(--panel2)}
.tabs .dot{position:relative}
.tabs .dot::after{content:'';position:absolute;top:4px;right:calc(50% - 18px);width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- componentes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#ffa05c,#ff8a3d);color:var(--accent-ink);border:0;border-radius:14px;padding:12px 20px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px -6px rgba(255,138,61,.7),inset 0 -3px 0 rgba(0,0,0,.15);transition:transform .08s,filter .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.gemb{background:linear-gradient(180deg,#9af0ff,#4cc9f0);color:#05222e;box-shadow:0 6px 18px -6px rgba(76,201,240,.7)}
.btn.sm{padding:7px 12px;font-size:.85rem;border-radius:10px}
.btn.big{font-family:var(--display);font-weight:400;font-size:1.6rem;padding:14px 28px;border-radius:18px;letter-spacing:.02em}
.btn.wide{width:100%}
.panel{background:linear-gradient(180deg,#262142,#1c1830);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;background:var(--panel2);color:var(--mute);border:1px solid var(--line)}
.pill.r-común{color:#cfc8e6}.pill.r-rara{color:#7ee8ff;border-color:#2f6a80}.pill.r-épica{color:#d59bff;border-color:#6a3b95}
.pill.r-legendaria{color:#ffcf4a;border-color:#8a6a1a}.pill.r-mítica{color:#ff7ad9;border-color:#8a2f70}
.prog{height:8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s}
.seg{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;overflow-x:auto}
.seg button{flex:1;white-space:nowrap;background:none;border:0;border-radius:9px;padding:8px 12px;font-weight:700;color:var(--mute);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--panel2);color:var(--text)}

/* ---------- inicio ---------- */
.hero{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;background:#2b1f45 center/cover no-repeat}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,31,.1) 0%,rgba(20,18,31,.25) 45%,rgba(20,18,31,.92) 100%)}
.hero>*{position:relative}
.logo{font-family:var(--display);font-size:clamp(2.1rem,8vw,3.6rem);line-height:.95;text-align:center;padding:18px 12px 0;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 30px rgba(0,0,0,.4);position:absolute;top:0;left:0;right:0}
.logo span{color:var(--accent)}
.hero .stage{display:flex;justify-content:center;align-items:flex-end;padding-top:96px}
.hero canvas{width:min(220px,52vw);height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.hero .play{display:flex;flex-direction:column;gap:10px;padding:14px}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gift{display:flex;align-items:center;gap:12px;justify-content:space-between}
.gift .em{font-size:2rem}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:1.4rem}
.adbanner{min-height:90px;border:1px dashed var(--line);border-radius:14px;display:grid;place-items:center;color:var(--mute);font-size:.8rem;overflow:hidden}

/* ---------- tienda / armario ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:10px;text-align:left;cursor:pointer;min-width:0}
.card[aria-pressed=true]{border-color:var(--accent);background:#2c2350}
.card .pic{aspect-ratio:1;border-radius:12px;background:radial-gradient(circle at 50% 60%,#3d3366,#221d3a);display:grid;place-items:center;overflow:hidden}
.card .pic img,.card .pic canvas{max-width:88%;max-height:88%;object-fit:contain}
.card strong{font-size:.92rem;line-height:1.2}
.card .price{display:flex;gap:6px;flex-wrap:wrap;font-weight:700;font-size:.85rem}
.card .lock{font-size:.78rem;color:var(--mute)}
.card .tick{position:absolute;top:8px;right:8px;background:var(--good);color:#052e12;border-radius:999px;font-size:.7rem;font-weight:700;padding:2px 7px}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pack{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:linear-gradient(160deg,#2c2752,#1b1730);border:1px solid var(--line);border-radius:16px;padding:14px}
.pack .gems{font-family:var(--display);font-size:1.5rem;color:var(--gem)}
.pack.feature{grid-column:1/-1;background:linear-gradient(120deg,#4a2a6e,#26204a 60%);border-color:#7b4fb3}
.devnote{border:1px solid #6b5a1a;background:#2c2610;color:#ffe08a;border-radius:12px;padding:10px 12px;font-size:.85rem}

/* ---------- arsenal ---------- */
.weap{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.weap:first-child{border-top:0}
.weap canvas{flex:none;width:64px;height:64px;border-radius:14px;background:var(--panel2)}
.weap .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.weap.locked canvas{filter:grayscale(1) brightness(.6)}
.req{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--mute)}

/* ---------- ranking ---------- */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line)}
th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
td.num,th.num{text-align:right}
tr.me td{background:#352c57;font-weight:700}
td img{width:30px;height:30px;object-fit:contain;vertical-align:middle;margin-right:6px}

/* ---------- partida ---------- */
#game{position:fixed;inset:0;z-index:20;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;left:0;right:0;top:0;padding:calc(8px + var(--safe-t)) 10px 0;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start;pointer-events:none}
.hp{background:rgba(20,17,38,.78);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:6px 10px;backdrop-filter:blur(6px);min-width:0}
.hp .n{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp .bar{height:8px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:4px}
.hp .bar i{display:block;height:100%;border-radius:999px;background:var(--good);transition:width .35s}
.hp.r{text-align:right}
.hp.r .bar i{margin-left:auto}
.hp .v{font-size:.72rem;color:#ddd}
.center{display:flex;flex-direction:column;align-items:center;gap:6px}
.clock{background:rgba(20,17,38,.82);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:4px 14px;text-align:center;min-width:120px}
.clock .ph{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.clock .t{font-family:var(--display);font-size:1.6rem;line-height:1.05;color:var(--gold)}
.clock .t.low{color:var(--bad)}
.wind{display:flex;align-items:center;gap:6px;background:rgba(20,17,38,.82);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.85rem}
.wind svg{width:54px;height:16px}
.banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(1.8rem,7vw,3.4rem);text-align:center;text-shadow:0 4px 0 rgba(0,0,0,.5),0 0 24px rgba(0,0,0,.6);pointer-events:none;white-space:nowrap;animation:pop .35s ease-out}
.banner small{display:block;font-family:var(--body);font-weight:700;font-size:clamp(.85rem,3vw,1.1rem)}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.6);opacity:0}}
.ctrl{position:absolute;left:0;right:0;bottom:0;padding:0 10px calc(10px + var(--safe-b));display:flex;justify-content:space-between;align-items:flex-end;gap:8px;pointer-events:none}
.ctrl>*{pointer-events:auto}
.pad{display:flex;gap:8px}
.pad button,.side button{width:64px;height:64px;border-radius:20px;border:1px solid rgba(255,255,255,.18);background:rgba(20,17,38,.72);backdrop-filter:blur(6px);font-size:1.5rem;font-weight:700;cursor:pointer;touch-action:none}
.pad button:active,.pad button.on{background:rgba(255,138,61,.55)}
.side{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.side button{width:46px;height:46px;font-size:1.1rem;border-radius:14px}
.weps{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:62vw}
.weps button{display:flex;align-items:center;gap:6px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(20,17,38,.78);padding:6px 10px;font-size:.8rem;font-weight:700;cursor:pointer}
.weps button[aria-pressed=true]{border-color:var(--accent);background:rgba(255,138,61,.3)}
.weps canvas{width:22px;height:22px}
.firebox{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fire{width:96px;height:96px;border-radius:50%;font-family:var(--display);font-size:1.1rem;padding:0}
.aiminfo{background:rgba(20,17,38,.8);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:4px 10px;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.hint{position:absolute;left:50%;bottom:calc(120px + var(--safe-b));transform:translateX(-50%);background:rgba(20,17,38,.8);border-radius:999px;padding:6px 14px;font-size:.82rem;white-space:nowrap;pointer-events:none}
.emotes{position:absolute;right:62px;bottom:calc(66px + var(--safe-b));display:flex;gap:6px;background:rgba(20,17,38,.9);border:1px solid var(--line);border-radius:14px;padding:6px}
.emotes button{font-size:1.5rem;background:none;border:0;cursor:pointer;padding:4px}
.overlay{position:absolute;inset:0;background:rgba(12,10,24,.86);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;z-index:3}
.rcard{max-width:420px;width:100%;text-align:center}
.rcard h2{font-size:2.4rem}
.rew{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rew div{background:var(--panel2);border-radius:12px;padding:8px 4px}
.rew b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem}
.unl{background:linear-gradient(120deg,#4a2a6e,#26204a);border:1px solid #7b4fb3;border-radius:14px;padding:10px;font-weight:700}

/* ---------- modal y avisos ---------- */
.modal{position:fixed;inset:0;z-index:40;background:rgba(10,8,20,.75);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .panel{max-width:400px;width:100%;text-align:center}
.code{font-family:var(--display);font-size:2.6rem;letter-spacing:.2em;color:var(--accent)}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--panel2);border-top-color:var(--accent);animation:sp 0.9s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
#toast div{background:#2a2545;border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-weight:600;box-shadow:0 10px 30px -10px #000;animation:pop2 .25s ease-out}
@keyframes pop2{from{transform:translateY(10px);opacity:0}}
input[type=text]{background:var(--ink);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;width:100%}
.rot{position:absolute;inset:auto 0 calc(170px + var(--safe-b));text-align:center;font-size:.8rem;color:#ddd;pointer-events:none;opacity:.85}
@media (min-width:800px){
  .home-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
  .hero{min-height:420px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#closetCat canvas{width:min(200px,50vw);height:auto}
.side.zoom{position:absolute;left:10px;top:calc(96px + var(--safe-t))}
.side button.on{background:rgba(255,138,61,.55)}
.aiminfo{white-space:pre-line;text-align:right;line-height:1.35}
.gbtn{background:#fff;color:#1f1f1f;border:1px solid #dadce0;box-shadow:none;font-weight:600}
.gbtn svg,.acct svg{width:18px;height:18px;flex:none}
.acct{display:flex;align-items:center;gap:10px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.fine{display:grid;grid-template-columns:repeat(4,40px);gap:6px}
.fine button{height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(20,17,38,.8);font-weight:700;font-size:1rem;cursor:pointer;touch-action:none}
.fine button:active{background:rgba(255,138,61,.5)}
.hint{bottom:auto;top:calc(112px + var(--safe-t))}