/* ===================== Paw Royale — Lobby ===================== */
:root{
  --blue:#2f72ac;
  --blue-glow:#5aa6da;
  --panel:rgba(7,28,49,.55);
  --panel-edge:rgba(140,190,230,.38);
  --panel-deep:rgba(4,18,33,.6);
  --green:#5fc233;
  --green-dk:#3c8a1e;
  --gold:#ffce3d;
  --gold-dk:#b96d0c;
  --red:#e23b2e;
  --rail:#2f6aa0;
  --rail-edge:#7bb7e6;
  --ink:#0c2236;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:#0a131c;
  font-family:'Lilita One',system-ui,Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden;}
.ico{width:100%;height:100%;display:block;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}

/* ---- Container do jogo (proporção 9:16, escala por container query) ---- */
.game{
  position:relative;
  width:min(100vw,56.25vh);
  height:min(177.78vw,100vh);
  container-type:size;
  overflow:hidden;
  background-color:var(--blue);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 0.25cqw, transparent 0.25cqw 8cqw),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 0.25cqw, transparent 0.25cqw 8cqw),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 0.25cqw, transparent 0.25cqw 8cqw),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 0.25cqw, transparent 0.25cqw 8cqw),
    radial-gradient(125% 75% at 50% 18%, rgba(110,175,220,.65), transparent 65%),
    linear-gradient(180deg, #3a82bd, #205184);
  box-shadow:0 0 8cqw rgba(0,0,0,.6);
}

/* texto com contorno estilo cartoon */
.outline{
  color:#fff;
  -webkit-text-stroke:0.7cqw var(--ink);
  paint-order:stroke fill;
  text-shadow:0 0.45cqw 0 rgba(0,0,0,.35);
  white-space:nowrap;
}
.gold-text{color:#ffe14d;-webkit-text-stroke-color:#6b3d00;}

/* ===================== LOBBY ===================== */
.lobby{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:2.6cqw 2.6cqw 0;
  gap:2cqw;
}

/* ---------- Barra de status ---------- */
.topbar{display:flex;align-items:center;gap:2cqw;}
.xp-cluster{display:flex;align-items:center;}
.level-badge{
  position:relative;width:12cqw;height:12cqw;z-index:2;margin-right:-2.5cqw;
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 1%,95% 26%,95% 74%,50% 99%,5% 74%,5% 26%);
  background:#5a3600;
  filter:drop-shadow(0 0.6cqw 0.4cqw rgba(0,0,0,.4));
}
.level-badge::before{
  content:"";position:absolute;inset:0.7cqw;
  clip-path:polygon(50% 1%,95% 26%,95% 74%,50% 99%,5% 74%,5% 26%);
  background:linear-gradient(180deg,#ffe89a,#e6a323);
}
.level-badge span{
  position:relative;z-index:1;font-size:6.2cqw;color:#fff;
  -webkit-text-stroke:0.55cqw #7a4a00;paint-order:stroke fill;
}
.xp-bar{
  position:relative;width:25cqw;height:6.6cqw;
  background:#0a2a45;border:0.5cqw solid #06203a;border-radius:3.5cqw;
  overflow:hidden;
}
.xp-fill{position:absolute;inset:0;background:linear-gradient(180deg,#43b6ff,#1f7ed6);border-radius:3.5cqw 0 0 3.5cqw;}
.xp-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:3.2cqw;color:#fff;-webkit-text-stroke:0.4cqw #06203a;paint-order:stroke fill;
}

.res-cluster{display:flex;align-items:center;gap:0.7cqw;flex:0 0 auto;}
.res-cluster:nth-of-type(2){margin-left:auto;}
.plus-btn{
  width:7.4cqw;height:7.4cqw;border-radius:50%;
  background:linear-gradient(180deg,#7ada4a,#3c8a1e);
  border:0.5cqw solid #2c6815;
  box-shadow:inset 0 0.6cqw 0 rgba(255,255,255,.35),0 0.5cqw 0 #245510;
  padding:1.6cqw;
}
.res-pill{
  display:flex;align-items:center;gap:0.7cqw;
  background:var(--panel-deep);border:0.4cqw solid var(--panel-edge);
  border-radius:5cqw;padding:0.5cqw 1.1cqw;height:8cqw;
}
.res-pill .outline{font-size:4cqw;}
.res-ico{width:5.4cqw;height:5.4cqw;flex:0 0 auto;}

/* ---------- Perfil ---------- */
.profile-row{display:flex;align-items:center;gap:2cqw;}
.avatar,.clan-badge,.settings-btn{
  background:var(--panel);border:0.4cqw solid var(--panel-edge);border-radius:2.4cqw;
  display:flex;align-items:center;justify-content:center;
}
.avatar{width:12cqw;height:12cqw;padding:1.6cqw;}
.clan-badge{width:10.5cqw;height:12cqw;padding:1.4cqw;}
.settings-btn{width:11cqw;height:11cqw;padding:1.8cqw;}
.player-meta{display:flex;flex-direction:column;justify-content:center;line-height:1.05;}
.player-name{font-size:5.4cqw;color:#fff;-webkit-text-stroke:0.4cqw var(--ink);paint-order:stroke fill;}
.clan-name{font-size:3.3cqw;color:#cfe6f7;}
.trophy-pill{
  margin-left:auto;display:flex;align-items:center;gap:1cqw;
  background:var(--panel-deep);border:0.4cqw solid var(--panel-edge);
  border-radius:5cqw;padding:0.6cqw 2cqw 0.6cqw 1cqw;height:9cqw;
}
.trophy-pill .ico{width:6.4cqw;height:6.4cqw;}
.trophy-pill .outline{font-size:4.8cqw;}

/* ---------- Baús ---------- */
.chests-row{display:flex;gap:2cqw;height:18cqw;}
.chest-card{
  flex:1;display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 2cqw;
  background:var(--panel);border:0.5cqw solid var(--panel-edge);border-radius:3cqw;
  box-shadow:inset 0 0.6cqw 0 rgba(255,255,255,.08);
}
.chest-card.crown{border-color:#5db8ec;box-shadow:inset 0 0 0 0.3cqw rgba(93,184,236,.4);}
.chest-art{display:flex;align-items:center;justify-content:center;position:relative;}
.chest-art .ico{width:13cqw;height:13cqw;filter:drop-shadow(0 0.6cqw 0.4cqw rgba(0,0,0,.35));}
.chest-art.double{width:16cqw;}
.chest-art.double .chest-back{position:absolute;left:0;top:1.2cqw;width:10cqw;height:10cqw;opacity:.85;}
.chest-art.double .chest-front{position:relative;left:3cqw;width:12cqw;height:12cqw;}
.chest-art .chest-gold{width:15cqw;height:15cqw;}
.chest-info{display:flex;flex-direction:column;line-height:1.1;}
.chest-info.center{align-items:center;flex:1;}
.chest-title{font-size:3.7cqw;color:#fff;-webkit-text-stroke:0.35cqw var(--ink);paint-order:stroke fill;}
.crown-title{color:#8fe0ff;-webkit-text-stroke-color:#0d3a55;font-size:4cqw;}
.chest-sub{font-size:2.9cqw;color:#cfe6f7;}
.chest-time{font-size:3.7cqw;color:#ffe14d;-webkit-text-stroke:0.35cqw #6b3d00;paint-order:stroke fill;}
.crown-progress{display:flex;align-items:center;gap:1cqw;background:#0a2a45;border-radius:3cqw;padding:0.3cqw 2cqw 0.3cqw 0.6cqw;margin-top:0.4cqw;}
.crown-progress .ico{width:6cqw;height:6cqw;}
.crown-progress .outline{font-size:3.8cqw;}

/* ---------- Arena ---------- */
.arena-section{flex:1;position:relative;display:flex;align-items:stretch;justify-content:center;min-height:0;}
.arena-card{
  flex:1;margin:0 1cqw;border-radius:3.5cqw;overflow:hidden;position:relative;
  border:0.6cqw solid rgba(10,30,50,.5);
  box-shadow:0 1cqw 2cqw rgba(0,0,0,.3),inset 0 0 4cqw rgba(0,0,0,.35);
}
.arena-art{width:100%;height:100%;display:block;}
.arena-label{
  position:absolute;left:50%;bottom:3cqw;transform:translateX(-50%);
  font-size:6.2cqw;color:#fff;letter-spacing:0.3cqw;
  -webkit-text-stroke:0.7cqw var(--ink);paint-order:stroke fill;
  text-shadow:0 0.6cqw 0.6cqw rgba(0,0,0,.5);
}
.side-rail{position:absolute;top:1cqw;display:flex;flex-direction:column;gap:2.2cqw;z-index:3;}
.side-rail.left{left:0;}
.side-rail.right{right:0;}
.rail-btn{
  position:relative;width:14cqw;height:14cqw;padding:2.4cqw;
  background:linear-gradient(180deg,#3f86c4,#235a8e);
  border:0.5cqw solid var(--rail-edge);border-radius:2.6cqw;
  box-shadow:inset 0 0.7cqw 0 rgba(255,255,255,.25),0 0.6cqw 0 rgba(0,0,0,.3);
}

/* ---------- Botão Battle ---------- */
.battle-btn{
  align-self:center;width:62cqw;height:15cqw;margin:0.5cqw 0;
  background:linear-gradient(180deg,#ffd84a,#f0a81e);
  border:0.6cqw solid #b56a10;border-radius:3.5cqw;
  box-shadow:inset 0 1cqw 0 rgba(255,255,255,.45),0 1.2cqw 0 #b56a10,0 2cqw 2cqw rgba(0,0,0,.35);
  transition:transform .08s;
}
.battle-btn:active{transform:translateY(0.6cqw);box-shadow:inset 0 1cqw 0 rgba(255,255,255,.45),0 0.6cqw 0 #b56a10;}
.battle-btn .outline{font-size:9cqw;letter-spacing:0.4cqw;-webkit-text-stroke:0.9cqw #8a4e08;}

/* ---------- Slots de baú ---------- */
.chest-slots{display:flex;gap:2cqw;height:18cqw;}
.chest-slot{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:rgba(6,24,42,.4);border:0.5cqw solid rgba(120,170,210,.28);
  border-radius:2.6cqw;box-shadow:inset 0 0.6cqw 1.2cqw rgba(0,0,0,.35);
}
.chest-slot span{font-size:3.7cqw;color:rgba(180,210,235,.6);text-align:center;line-height:1.05;}

/* ---------- Navegação inferior ---------- */
.bottom-nav{
  display:flex;align-items:stretch;height:16cqw;margin:0 -2.6cqw;
  padding:0 1cqw;
  background:linear-gradient(180deg,rgba(8,30,52,.7),rgba(5,20,36,.92));
  border-top:0.5cqw solid rgba(130,180,220,.35);
}
.nav-item{
  flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.6cqw 0;
}
.nav-item .ico{width:8.5cqw;height:8.5cqw;}
.battle-tab{flex:1.3;}
.battle-tab.active{
  margin:-3cqw 0.5cqw 0;border-radius:3cqw 3cqw 0 0;
  background:linear-gradient(180deg,#3f86c4,#1d4f80);
  border:0.5cqw solid var(--rail-edge);border-bottom:none;
}
.battle-tab .ico{width:11cqw;height:11cqw;}
.nav-label{font-size:3.2cqw;color:#fff;-webkit-text-stroke:0.3cqw var(--ink);paint-order:stroke fill;margin-top:0.3cqw;}
.nav-arrow{position:absolute;top:50%;transform:translateY(-70%);font-size:6cqw;color:#bfe0f7;}
.nav-arrow.left{left:0.5cqw;}
.nav-arrow.right{right:0.5cqw;}

/* badges */
.badge{
  position:absolute;top:0.4cqw;right:1.4cqw;min-width:5.2cqw;height:5.2cqw;
  display:flex;align-items:center;justify-content:center;padding:0 1cqw;
  background:var(--red);border:0.4cqw solid #fff;border-radius:3cqw;
  font-size:3.2cqw;color:#fff;-webkit-text-stroke:0.25cqw #7a1208;paint-order:stroke fill;
}
.badge.green{background:#3fae28;}
.badge.red{top:-1.5cqw;right:-1.5cqw;}

/* ===================== TELA DE NOME ===================== */
.name-screen{
  position:absolute;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,14,26,.72);backdrop-filter:blur(0.8cqw);
  transition:opacity .25s;
}
.name-screen.hidden{opacity:0;pointer-events:none;}
.name-dialog{
  width:80cqw;padding:6cqw 5cqw;
  background:linear-gradient(180deg,#2d6ca8,#1c4a7a);
  border:0.7cqw solid #7bb7e6;border-radius:5cqw;
  box-shadow:0 2cqw 5cqw rgba(0,0,0,.5),inset 0 1cqw 0 rgba(255,255,255,.2);
  display:flex;flex-direction:column;align-items:center;gap:3.5cqw;
}
.name-logo{
  font-size:8cqw;color:#ffd84a;letter-spacing:0.4cqw;
  -webkit-text-stroke:0.9cqw #6b3d00;paint-order:stroke fill;
  text-shadow:0 0.8cqw 0 rgba(0,0,0,.35);
}
.name-prompt{font-size:4.4cqw;color:#fff;-webkit-text-stroke:0.35cqw var(--ink);paint-order:stroke fill;}
.name-input{
  width:100%;height:11cqw;text-align:center;
  font-family:inherit;font-size:5.2cqw;color:#fff;
  background:#0a2a45;border:0.6cqw solid #06203a;border-radius:3cqw;
  outline:none;caret-color:#ffd84a;
}
.name-input::placeholder{color:rgba(200,225,245,.4);}
.name-ok{
  width:42cqw;height:13cqw;
  background:linear-gradient(180deg,#7ada4a,#3c8a1e);
  border:0.6cqw solid #2c6815;border-radius:3.5cqw;
  box-shadow:inset 0 1cqw 0 rgba(255,255,255,.4),0 1cqw 0 #245510;
  transition:transform .08s;
}
.name-ok:active{transform:translateY(0.6cqw);}
.name-ok .outline{font-size:6.5cqw;-webkit-text-stroke:0.8cqw #1e4a0e;}

/* anima a barra de XP ao ganhar experiência */
.xp-fill{transition:width .45s ease;}

/* ===================== Botões desativados ===================== */
.disabled{opacity:.4;filter:grayscale(.7);cursor:not-allowed;}
.disabled:active{transform:none;}

/* ===================== Toast ("Em breve") ===================== */
.toast{
  position:absolute;left:50%;bottom:24cqw;z-index:60;
  transform:translateX(-50%) translateY(2cqw);
  background:rgba(6,22,40,.94);border:0.4cqw solid var(--panel-edge);
  color:#fff;font-size:3.6cqw;padding:1.5cqw 4cqw;border-radius:4cqw;
  -webkit-text-stroke:0.3cqw var(--ink);paint-order:stroke fill;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===================== Overlay de batalha (simulada) ===================== */
.battle-overlay{
  position:absolute;inset:0;z-index:55;
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,14,26,.78);
}
.battle-overlay.hidden{display:none;}
.battle-dialog{
  width:74cqw;min-height:48cqw;padding:7cqw 5cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;
  background:linear-gradient(180deg,#2d6ca8,#1c4a7a);
  border:0.7cqw solid #7bb7e6;border-radius:5cqw;
  box-shadow:0 2cqw 5cqw rgba(0,0,0,.5),inset 0 1cqw 0 rgba(255,255,255,.2);
}
.bo-searching{display:flex;flex-direction:column;align-items:center;gap:4cqw;}
.bo-searching.hidden,.bo-result.hidden,.bo-levelup.hidden{display:none;}
.spinner{
  width:16cqw;height:16cqw;border-radius:50%;
  border:2.4cqw solid rgba(255,255,255,.25);border-top-color:#ffd84a;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.bo-searching-text{font-size:4.4cqw;color:#fff;-webkit-text-stroke:0.35cqw var(--ink);paint-order:stroke fill;}
.bo-result{display:flex;flex-direction:column;align-items:center;gap:2.6cqw;}
.bo-title{font-size:9cqw;color:#fff;-webkit-text-stroke:0.85cqw var(--ink);paint-order:stroke fill;}
.bo-title.win{color:#7CFC58;}
.bo-title.loss{color:#ff6b5e;}
.bo-title.draw{color:#ffd84a;}
.bo-xp{font-size:6.5cqw;color:#ffe14d;-webkit-text-stroke:0.55cqw #6b3d00;paint-order:stroke fill;}
.bo-levelup{font-size:4cqw;color:#8fe0ff;-webkit-text-stroke:0.35cqw #0d3a55;paint-order:stroke fill;text-align:center;}
.bo-ok{
  margin-top:2cqw;width:40cqw;height:12cqw;
  background:linear-gradient(180deg,#7ada4a,#3c8a1e);
  border:0.6cqw solid #2c6815;border-radius:3.5cqw;
  box-shadow:inset 0 1cqw 0 rgba(255,255,255,.4),0 1cqw 0 #245510;
  transition:transform .08s;
}
.bo-ok:active{transform:translateY(0.6cqw);}
.bo-ok .outline{font-size:6cqw;-webkit-text-stroke:0.8cqw #1e4a0e;}

/* ===================== Arena dinâmica ===================== */
/* os dois SVGs de arena ocupam o mesmo espaço; o JS deixa só um visível */
.arena-card .arena-art{position:absolute;inset:0;width:100%;height:100%;}

/* delta de troféu no resultado da batalha */
.bo-trophy{display:flex;align-items:center;gap:1.2cqw;font-size:5.5cqw;-webkit-text-stroke:0.5cqw var(--ink);paint-order:stroke fill;}
.bo-trophy .ico{width:6.4cqw;height:6.4cqw;}
.bo-trophy.pos{color:#7CFC58;}
.bo-trophy.neg{color:#ff6b5e;}

/* ===================== Overlay de matchmaking (rede) ===================== */
.bo-status{font-size:4.4cqw;color:#fff;-webkit-text-stroke:0.35cqw var(--ink);paint-order:stroke fill;text-align:center;}
.bo-cancel{
  margin-top:1cqw;width:36cqw;height:11cqw;
  background:linear-gradient(180deg,#e8615a,#b32f28);
  border:0.5cqw solid #8a201a;border-radius:3cqw;
  box-shadow:inset 0 0.8cqw 0 rgba(255,255,255,.3),0 0.9cqw 0 #7a1a14;
  transition:transform .08s;
}
.bo-cancel:active{transform:translateY(0.6cqw);}
.bo-cancel .outline{font-size:4.8cqw;-webkit-text-stroke:0.6cqw #6a1610;}
.bo-train{
  margin-top:0.5cqw; width:44cqw; height:10cqw;
  background:linear-gradient(180deg,#4f9ee0,#2f6aa8);
  border:0.5cqw solid #245182; border-radius:3cqw;
  box-shadow:inset 0 0.8cqw 0 rgba(255,255,255,.3),0 0.8cqw 0 #1d4067;
  transition:transform .08s;
}
.bo-train:active{transform:translateY(0.6cqw);}
.bo-train .outline{font-size:4.2cqw;-webkit-text-stroke:0.55cqw #173455;}
.bo-connected{display:flex;flex-direction:column;align-items:center;gap:2.4cqw;}
.bo-connected.hidden{display:none;}
.bo-peer{font-size:5cqw;color:#ffe14d;-webkit-text-stroke:0.4cqw #6b3d00;paint-order:stroke fill;text-align:center;}
.bo-note{font-size:3.4cqw;color:#cfe6f7;text-align:center;line-height:1.45;}