/* =========================================================
   MUNDO MÍSTICO
   UI MODERNA / MMO
   MAPA EXPANSÍVEL
   ========================================================= */

*{
  box-sizing:border-box;
}

:root{
  --bg:#050a11;
  --bg-2:#07111d;

  --panel:#09131f;
  --panel-2:#0c1928;

  --panel-glass:rgba(6,16,27,.92);
  --panel-glass-strong:rgba(5,13,22,.97);

  --line:rgba(85,154,198,.28);
  --line-strong:rgba(89,192,240,.6);

  --cyan:#69ddff;
  --cyan-2:#36bde9;

  --gold:#f0c83f;
  --gold-2:#b68a10;

  --green:#56ed8c;

  --text:#f1f7fb;
  --muted:#8195a8;

  --danger:#ff7373;

  --shadow:0 16px 45px rgba(0,0,0,.45);
}


/* =========================================================
   BASE
   ========================================================= */

html{
  width:100%;
  height:100%;
  margin:0;
}

body{
  width:100%;
  min-height:100%;
  margin:0;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(30,101,142,.18),
      transparent 35%
    ),
    #050911;

  color:var(--text);

  font-family:
    Inter,
    "Segoe UI",
    system-ui,
    Arial,
    sans-serif;

  overflow-x:hidden;
}

button,
input,
select{
  font-family:inherit;
}

button{
  cursor:pointer;
}


/* =========================================================
   SCROLL
   ========================================================= */

::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track{
  background:#050b13;
}

::-webkit-scrollbar-thumb{
  background:#233b4d;
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:#315a73;
}


/* =========================================================
   TOPBAR PRINCIPAL
   ========================================================= */

.topbar{
  height:58px;

  position:sticky;
  top:0;

  z-index:100;

  display:flex;
  align-items:center;

  gap:10px;

  padding:0 18px;

  background:
    linear-gradient(
      180deg,
      rgba(10,25,40,.98),
      rgba(5,13,23,.98)
    );

  border-bottom:
    1px solid
    rgba(85,175,220,.32);

  box-shadow:
    0 7px 25px
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(14px);
}


/* =========================================================
   LOGO
   ========================================================= */

.brand{
  min-width:220px;

  display:flex;
  align-items:center;

  gap:10px;
}

.brand-mark{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:
    linear-gradient(
      145deg,
      rgba(39,162,218,.24),
      rgba(15,68,102,.25)
    );

  border:
    1px solid
    rgba(89,210,255,.45);

  color:#8feaff;

  font-size:22px;

  text-shadow:
    0 0 15px
    rgba(59,207,255,.8);

  box-shadow:
    inset 0 0 12px
    rgba(67,195,255,.08);
}

.brand b{
  display:block;

  color:#effbff;

  font-size:13px;

  font-weight:900;

  letter-spacing:1.4px;
}

.brand small{
  display:block;

  margin-top:1px;

  color:#607a91;

  font-size:9px;

  letter-spacing:.7px;
}


/* =========================================================
   RECURSOS
   ========================================================= */

.resources{
  margin-left:auto;

  display:flex;
  align-items:center;

  gap:7px;
}

.resources span{
  min-height:34px;

  display:flex;
  align-items:center;

  gap:6px;

  padding:
    0
    10px;

  border-radius:9px;

  background:
    rgba(8,20,32,.86);

  border:
    1px solid
    rgba(72,135,175,.26);

  color:#a8bed0;

  font-size:12px;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.025);
}

.resources b{
  color:#f1f8ff;
}

.user-pill{
  color:#8fe7ff !important;
}


/* =========================================================
   BOTÕES TOPO
   ========================================================= */

.icon-btn{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  padding:0;

  border-radius:9px;

  border:
    1px solid
    rgba(73,147,190,.32);

  background:
    rgba(12,31,48,.9);

  color:#dff7ff;

  font-size:15px;

  transition:.15s ease;
}

.icon-btn:hover{
  transform:translateY(-1px);

  border-color:
    rgba(91,221,255,.8);

  color:#7de7ff;

  background:
    rgba(17,49,72,.95);

  box-shadow:
    0 0 18px
    rgba(43,207,255,.12);
}


/* =========================================================
   MENU PRINCIPAL
   ========================================================= */

.game-menu{
  height:44px;

  position:sticky;
  top:58px;

  z-index:90;

  display:flex;
  align-items:center;

  gap:4px;

  padding:0 15px;

  background:
    rgba(5,13,23,.97);

  border-bottom:
    1px solid
    rgba(64,121,158,.24);

  box-shadow:
    0 7px 20px
    rgba(0,0,0,.28);

  backdrop-filter:
    blur(12px);
}

.menu-btn{
  position:relative;

  height:43px;

  min-width:105px;

  padding:0 16px;

  border:0;

  background:transparent;

  color:#71879b;

  font-size:12px;

  font-weight:800;

  transition:.15s ease;
}

.menu-btn:hover{
  color:#ccefff;
}

.menu-btn.active{
  color:#7be6ff;

  background:
    linear-gradient(
      180deg,
      rgba(43,140,185,.1),
      transparent
    );
}

.menu-btn.active::after{
  content:"";

  position:absolute;

  left:13px;
  right:13px;
  bottom:0;

  height:2px;

  border-radius:
    2px
    2px
    0
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #52d7ff,
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(72,213,255,.65);
}


/* =========================================================
   MAPA EXPANSÍVEL
   ========================================================= */

.map-page{
  position:relative;

  width:100%;

  height:
    calc(100dvh - 102px);

  min-height:
    calc(100dvh - 102px);

  padding:0;
  margin:0;

  overflow:hidden;

  background:#050b12;
}

#realMapContainer{
  position:relative;

  display:block;

  width:100%;
  max-width:none;

  height:100%;
  min-height:0;

  margin:0;
  padding:0;

  overflow:hidden;

  background:#06111d;

  border:0;
  border-radius:0;

  box-shadow:
    inset
    0
    0
    60px
    rgba(0,0,0,.38);

  isolation:isolate;
}

#realMapCanvas{
  position:absolute;

  top:0;
  left:0;

  display:block;

  width:100%;
  height:100%;

  min-width:100%;
  min-height:100%;

  margin:0;
  padding:0;

  background:#06111d;

  image-rendering:pixelated;
  image-rendering:crisp-edges;
}


/* =========================================================
   LOCALIZAÇÃO SUPERIOR ESQUERDA
   ========================================================= */

.mm-location{
  position:absolute;

  z-index:40;

  top:14px;
  left:14px;

  min-width:180px;

  display:flex;
  align-items:center;

  gap:9px;

  padding:
    7px
    10px;

  border-radius:11px;

  background:
    rgba(5,15,25,.88);

  border:
    1px solid
    rgba(78,161,205,.35);

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.34);

  backdrop-filter:
    blur(12px);
}

.mm-location-icon{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:
    rgba(54,157,207,.12);

  border:
    1px solid
    rgba(73,182,231,.18);

  font-size:16px;
}

.mm-location small{
  display:block;

  color:#62869f;

  font-size:8px;

  font-weight:900;

  letter-spacing:1px;
}

.mm-location strong{
  display:block;

  margin-top:1px;

  color:#dff7ff;

  font-size:11px;
}


/* =========================================================
   BARRA FLUTUANTE CENTRAL
   ========================================================= */

.mm-map-top{
  position:absolute;

  top:14px;
  left:50%;

  z-index:45;

  transform:
    translateX(-50%);

  display:flex;
  align-items:center;

  gap:4px;

  padding:5px;

  border-radius:14px;

  background:
    rgba(5,15,25,.94);

  border:
    1px solid
    rgba(91,173,213,.35);

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.42);

  backdrop-filter:
    blur(15px);
}

.mm-map-top button{
  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  padding:0;

  border-radius:10px;

  border:
    1px solid
    transparent;

  background:
    transparent;

  color:#d5ba45;

  font-size:16px;

  transition:.15s ease;
}

.mm-map-top button:hover{
  background:
    rgba(29,76,104,.42);

  border-color:
    rgba(74,176,223,.38);

  color:#f8df6d;

  transform:
    translateY(-1px);
}

.mm-map-top button.active{
  color:#ffffff;

  background:
    linear-gradient(
      180deg,
      rgba(28,111,167,.9),
      rgba(13,66,106,.9)
    );

  border:
    1px solid
    rgba(85,196,250,.65);

  box-shadow:
    0 0 16px
    rgba(35,180,255,.22),

    inset
    0
    1px
    rgba(255,255,255,.12);
}


/* =========================================================
   CONTROLES
   ========================================================= */

.mm-controls{
  position:absolute;

  z-index:40;

  top:14px;
  right:14px;

  padding:
    7px
    10px;

  border-radius:10px;

  background:
    rgba(5,14,23,.86);

  border:
    1px solid
    rgba(77,148,188,.25);

  color:#6f899e;

  font-size:9px;

  backdrop-filter:
    blur(10px);
}

.mm-controls b{
  color:#d7f4ff;
}


/* =========================================================
   CHAT
   ========================================================= */

.mm-chat{
  position:absolute;

  z-index:45;

  left:14px;
  bottom:14px;

  width:390px;
  height:290px;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border-radius:13px;

  background:
    rgba(2,8,14,.94);

  border:
    1px solid
    rgba(75,142,183,.38);

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.48);

  backdrop-filter:
    blur(14px);
}

.mm-chat-tabs{
  height:37px;

  display:flex;
  align-items:stretch;

  background:
    rgba(5,17,28,.98);

  border-bottom:
    1px solid
    rgba(75,133,170,.2);
}

.mm-chat-tabs button{
  position:relative;

  min-width:68px;

  padding:
    0
    10px;

  border:0;

  background:
    transparent;

  color:#667c8f;

  font-size:9px;

  font-weight:900;

  letter-spacing:.4px;
}

.mm-chat-tabs button:hover{
  color:#c9e6f5;
}

.mm-chat-tabs button.active{
  color:#ffffff;

  background:
    linear-gradient(
      180deg,
      rgba(199,155,15,.09),
      transparent
    );
}

.mm-chat-tabs button.active::after{
  content:"";

  position:absolute;

  left:9px;
  right:9px;
  bottom:0;

  height:2px;

  background:#d8b31d;

  border-radius:
    2px
    2px
    0
    0;
}

.mm-chat-body{
  flex:1;

  overflow-y:auto;

  padding:
    11px
    12px;

  color:#9cb1c0;

  font-size:11px;

  line-height:1.45;
}

.mm-chat-line{
  margin-bottom:5px;
}

.mm-chat-line.system{
  color:#67cceb;
}

.mm-chat-input{
  height:48px;

  display:flex;

  gap:6px;

  padding:6px;

  background:
    rgba(4,13,22,.98);

  border-top:
    1px solid
    rgba(76,137,176,.2);
}

.mm-chat-input input{
  flex:1;

  min-width:0;

  padding:
    0
    10px;

  border-radius:8px;

  border:
    1px solid
    rgba(67,118,152,.4);

  outline:none;

  background:#07111c;

  color:#f0f8ff;

  font-size:11px;
}

.mm-chat-input input:focus{
  border-color:
    rgba(80,194,243,.65);

  box-shadow:
    0 0 0
    2px
    rgba(42,180,235,.07);
}

.mm-chat-input button{
  min-width:64px;

  border:0;

  border-radius:8px;

  background:
    linear-gradient(
      180deg,
      #b99213,
      #81650a
    );

  color:#fff5c8;

  font-size:10px;

  font-weight:900;
}

.mm-chat-input button:hover{
  filter:brightness(1.12);
}


/* =========================================================
   PAINEL INFERIOR
   ========================================================= */

.mm-player-panel{
  position:absolute;

  z-index:44;

  left:50%;
  bottom:0;

  transform:
    translateX(-5%);

  width:545px;

  padding:
    11px
    14px
    13px;

  border-radius:
    15px
    15px
    0
    0;

  background:
    linear-gradient(
      180deg,
      rgba(6,17,27,.97),
      rgba(2,8,14,.98)
    );

  border:
    1px solid
    rgba(77,143,183,.35);

  border-bottom:0;

  box-shadow:
    0 -10px 35px
    rgba(0,0,0,.46);

  backdrop-filter:
    blur(14px);
}

.mm-player-level{
  display:flex;
  align-items:center;

  gap:6px;

  color:#f3d454;

  font-size:13px;

  font-weight:950;
}

.mm-player-level small{
  padding:
    2px
    5px;

  border-radius:4px;

  background:
    rgba(171,132,15,.78);

  color:#fff0a0;

  font-size:7px;

  font-weight:900;
}


/* =========================================================
   XP
   ========================================================= */

.mm-exp-bar{
  position:relative;

  height:9px;

  margin:
    6px
    0;

  overflow:hidden;

  border-radius:8px;

  background:#010509;

  border:
    1px solid
    rgba(67,104,130,.18);
}

.mm-exp-fill{
  width:0%;
  height:100%;

  border-radius:8px;

  background:
    linear-gradient(
      90deg,
      #1daacb,
      #72e3ff
    );

  box-shadow:
    0
    0
    12px
    rgba(80,219,255,.38);
}


/* =========================================================
   DINHEIRO
   ========================================================= */

.mm-player-money{
  height:20px;

  display:flex;
  align-items:center;

  gap:13px;

  margin-bottom:7px;

  color:#92aabb;

  font-size:11px;
}

.mm-player-money b{
  color:#ebd158;
}


/* =========================================================
   AÇÕES INFERIORES
   ========================================================= */

.mm-bottom-actions{
  display:grid;

  grid-template-columns:
    repeat(7,1fr);

  gap:5px;
}

.mm-bottom-actions button{
  position:relative;

  min-height:54px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:2px;

  padding:4px;

  border-radius:10px;

  border:
    1px solid
    rgba(70,130,168,.31);

  background:
    linear-gradient(
      180deg,
      rgba(10,27,42,.95),
      rgba(5,15,25,.97)
    );

  color:#ddeaf2;

  transition:.15s ease;
}

.mm-bottom-actions button::before{
  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  opacity:0;

  background:
    linear-gradient(
      180deg,
      rgba(218,179,28,.12),
      transparent
    );

  transition:.15s ease;
}

.mm-bottom-actions button:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(220,180,28,.72);

  color:#fff4bb;

  box-shadow:
    0 0 12px
    rgba(218,174,20,.08);
}

.mm-bottom-actions button:hover::before{
  opacity:1;
}

.mm-bottom-actions button span{
  position:relative;

  z-index:2;

  font-size:17px;
}

.mm-bottom-actions button small{
  position:relative;

  z-index:2;

  color:#738b9e;

  font-size:7px;

  font-weight:950;

  letter-spacing:.3px;
}


/* =========================================================
   DEPÓSITO NO MAPA
   ========================================================= */

.mm-depot-button{
  position:absolute;

  z-index:44;

  right:20px;
  bottom:100px;

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:5px;
}

.mm-depot-orb{
  width:62px;
  height:62px;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:
    4px solid
    #dce6e9;

  background:
    radial-gradient(
      circle at 33% 28%,
      #ff9d87,
      #dc4940 32%,
      #a21e20 62%,
      #5b1014
    );

  color:white;

  font-size:20px;

  box-shadow:
    0 8px 28px
    rgba(0,0,0,.5),

    inset
    0 0 12px
    rgba(255,255,255,.3);
}

.mm-depot-button button{
  padding:
    6px
    11px;

  border:0;

  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      #f0cd3f,
      #c49513
    );

  color:#151007;

  font-size:8px;

  font-weight:950;

  box-shadow:
    0 4px 12px
    rgba(0,0,0,.35);
}

.mm-depot-button button:hover{
  filter:brightness(1.1);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  padding:
    25px
    30px
    20px;

  display:flex;
  justify-content:space-between;
  align-items:end;

  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(28,100,143,.25),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #0b1625,
      #070d17
    );

  border-bottom:
    1px solid
    rgba(68,125,160,.22);
}

.eyebrow{
  color:#69dbff;

  font-size:10px;

  font-weight:900;

  letter-spacing:1.5px;
}

h1{
  margin:
    4px
    0;

  font-size:34px;
}

p{
  margin:0;

  color:#8295a8;
}

.hero-stat{
  min-width:130px;

  padding:
    10px
    14px;

  border-radius:11px;

  border:
    1px solid
    rgba(74,134,173,.3);

  background:
    rgba(7,18,29,.88);

  text-align:right;
}

.hero-stat span{
  display:block;

  color:#6e8498;

  font-size:10px;
}

.hero-stat strong{
  display:block;

  margin-top:2px;

  color:#f1d250;

  font-size:23px;
}


/* =========================================================
   DEPÓSITO
   ========================================================= */

.toolbar{
  padding:
    11px
    18px;

  display:flex;
  align-items:center;

  gap:7px;

  flex-wrap:wrap;

  background:#07101a;

  border-bottom:
    1px solid
    rgba(61,111,143,.22);
}

.search{
  width:230px;

  height:38px;

  display:flex;
  align-items:center;

  padding:
    0
    9px;

  border-radius:9px;

  background:#0a1725;

  border:
    1px solid
    rgba(63,119,157,.32);
}

.search input{
  width:100%;

  padding:
    0
    8px;

  border:0;

  outline:0;

  background:transparent;

  color:#fff;
}

select,
.filter-btn{
  min-height:38px;

  padding:
    0
    11px;

  border-radius:9px;

  border:
    1px solid
    rgba(66,122,157,.32);

  background:#0a1725;

  color:#b9c9d7;
}

.filter-btn.active{
  color:#79e4ff;

  background:
    rgba(32,118,158,.18);

  border-color:
    rgba(78,201,246,.52);
}


/* =========================================================
   CARDS
   ========================================================= */

.grid{
  padding:
    20px
    22px
    45px;

  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(190px,1fr)
    );

  gap:13px;
}

.card{
  position:relative;

  min-height:230px;

  overflow:hidden;

  border-radius:14px;

  border:
    1px solid
    rgba(58,107,145,.28);

  background:
    linear-gradient(
      180deg,
      #0c1928,
      #07111c
    );

  cursor:pointer;

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.25);

  transition:.15s ease;
}

.card:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(79,205,250,.65);

  box-shadow:
    0 14px 30px
    rgba(0,0,0,.38);
}

.rarity{
  position:absolute;

  top:9px;
  left:9px;

  z-index:3;

  padding:
    4px
    7px;

  border-radius:7px;

  background:
    rgba(3,10,17,.82);

  color:#dceaf4;

  font-size:9px;

  font-weight:900;
}

.fav{
  position:absolute;

  z-index:3;

  top:7px;
  right:8px;

  border:0;

  background:transparent;

  color:#51677a;

  font-size:18px;
}

.fav.on{
  color:#f3d65a;
}

.creature-art{
  height:133px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(
      circle,
      rgba(39,82,112,.6),
      #0b1724 67%
    );
}

.creature{
  font-size:72px;

  filter:
    drop-shadow(
      0
      10px
      7px
      rgba(0,0,0,.55)
    );
}

.card-info{
  padding:
    10px
    12px;
}

.name{
  color:#eef8ff;

  font-size:15px;

  font-weight:900;
}

.type{
  margin-top:2px;

  color:#6f879b;

  font-size:10px;
}

.power{
  display:flex;
  justify-content:space-between;

  margin-top:9px;

  color:#6c8396;

  font-size:10px;
}

.power b{
  color:#e7cc53;
}

.bar{
  height:4px;

  margin-top:5px;

  overflow:hidden;

  border-radius:8px;

  background:#172837;
}

.bar i{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #40cdec,
      #7a6bf0
    );
}


/* =========================================================
   DUELO
   ========================================================= */

#pageDuelo{
  min-height:
    calc(100vh - 102px);

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(36,104,146,.17),
      transparent 40%
    ),
    #050b13;
}

.duel-box{
  margin:
    22px
    25px
    45px;

  padding:22px;

  border-radius:17px;

  background:
    linear-gradient(
      180deg,
      #0b1726,
      #07101b
    );

  border:
    1px solid
    rgba(65,119,157,.3);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.32);
}

.duel-title{
  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:7px;
}

.duel-title span{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#10283d;

  border:
    1px solid
    rgba(66,156,204,.38);
}

.duel-title h2{
  margin:0;

  font-size:21px;
}

.duel-description{
  color:#71879b;

  line-height:1.5;
}

.duel-arena{
  position:relative;

  margin-top:24px;

  padding:20px;

  min-height:320px;

  display:grid;

  grid-template-columns:
    1fr
    80px
    1fr;

  gap:16px;

  align-items:center;

  overflow:hidden;

  border-radius:16px;

  border:
    1px solid
    rgba(60,112,148,.28);

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(36,92,128,.09),
      transparent 40%
    ),
    #07111d;
}

.duel-side{
  position:relative;

  z-index:2;

  min-height:270px;

  padding:19px;

  border-radius:14px;

  border:
    1px solid
    rgba(61,119,157,.3);

  background:
    linear-gradient(
      180deg,
      #0c1b2b,
      #08121e
    );

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.3);
}

.duel-side label{
  display:block;

  margin-bottom:6px;

  color:#70889d;

  font-size:9px;

  font-weight:900;

  letter-spacing:.8px;

  text-transform:uppercase;
}

.duel-side select,
.duel-side input{
  width:100%;
  height:38px;

  padding:
    0
    9px;

  margin-bottom:10px;

  outline:none;

  border-radius:8px;

  border:
    1px solid
    rgba(65,119,155,.36);

  background:#050e18;

  color:#dfeef8;
}

.duel-side select:focus,
.duel-side input:focus{
  border-color:
    rgba(75,207,250,.65);
}

.duel-icon{
  width:100px;
  height:100px;

  margin:
    3px
    auto
    14px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #24445e,
      #09131f 72%
    );

  border:
    1px solid
    rgba(75,148,190,.5);

  font-size:53px;

  box-shadow:
    0 0 26px
    rgba(44,184,237,.14);
}

.duel-side h3{
  margin:
    0
    0
    12px;

  text-align:center;

  font-size:16px;
}

.duel-vs{
  position:relative;

  z-index:3;

  width:62px;
  height:62px;

  margin:auto;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#102235;

  border:
    1px solid
    rgba(116,159,193,.5);

  color:white;

  font-size:17px;

  font-style:italic;

  font-weight:950;

  box-shadow:
    0 0 20px
    rgba(0,0,0,.6);
}

.duel-start-btn{
  display:block;

  min-width:230px;

  margin:
    21px
    auto
    0;

  padding:
    12px
    24px;

  border-radius:10px;

  border:
    1px solid
    rgba(95,225,255,.68);

  background:
    linear-gradient(
      90deg,
      #138faf,
      #5744c9
    );

  color:#fff;

  font-weight:900;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.3);
}

.duel-start-btn:hover{
  filter:brightness(1.1);

  transform:
    translateY(-1px);
}

.duel-result{
  min-height:25px;

  margin-top:17px;

  text-align:center;

  color:#70ddff;

  font-size:14px;

  font-weight:800;
}


/* =========================================================
   PAINEL LATERAL
   ========================================================= */

.panel{
  position:fixed;

  z-index:200;

  top:0;
  right:-420px;

  width:390px;
  height:100vh;

  padding:27px;

  overflow:auto;

  background:
    linear-gradient(
      180deg,
      #091522,
      #050c15
    );

  border-left:
    1px solid
    rgba(79,149,192,.38);

  box-shadow:
    -15px
    0
    50px
    rgba(0,0,0,.45);

  transition:
    right
    .22s ease;
}

.panel.open{
  right:0;
}

.close{
  position:absolute;

  top:13px;
  right:14px;

  width:34px;
  height:34px;

  border-radius:9px;

  border:
    1px solid
    rgba(71,135,176,.32);

  background:#102032;

  color:white;

  font-size:19px;
}

.detail-art{
  height:215px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:16px;

  background:
    radial-gradient(
      circle,
      #244762,
      #09131f 72%
    );

  font-size:110px;
}

.detail h2{
  margin:
    16px
    0
    2px;

  font-size:27px;
}

.badges{
  display:flex;

  gap:6px;

  flex-wrap:wrap;

  margin:
    9px
    0;
}

.badge{
  padding:
    5px
    8px;

  border-radius:8px;

  background:#102235;

  color:#8be8ff;

  font-size:10px;
}

.stats{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:8px;

  margin-top:15px;
}

.stat{
  padding:10px;

  border-radius:10px;

  background:#0b1827;

  border:
    1px solid
    rgba(62,120,157,.28);
}

.stat small{
  display:block;

  color:#6f879b;
}

.stat b{
  font-size:16px;
}

.action{
  width:100%;

  margin-top:16px;

  padding:11px;

  border:0;

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      #2bbada,
      #6557df
    );

  color:white;

  font-weight:900;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast{
  position:fixed;

  z-index:300;

  left:50%;
  bottom:24px;

  transform:
    translateX(-50%)
    translateY(80px);

  padding:
    10px
    15px;

  border-radius:10px;

  background:
    rgba(8,23,36,.97);

  border:
    1px solid
    rgba(81,158,203,.45);

  color:#dff6ff;

  font-size:12px;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.45);

  transition:.2s ease;
}

.toast.show{
  transform:
    translateX(-50%)
    translateY(0);
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-screen{
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(28,107,150,.35),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #091420,
      #04070d
    );
}

.login-card{
  width:
    min(
      400px,
      100%
    );

  padding:31px;

  border-radius:19px;

  border:
    1px solid
    rgba(75,154,202,.43);

  background:
    rgba(7,18,30,.96);

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.55);

  backdrop-filter:
    blur(18px);
}

.login-logo{
  width:55px;
  height:55px;

  display:grid;
  place-items:center;

  margin:
    0
    auto
    9px;

  border-radius:14px;

  background:
    rgba(32,121,163,.2);

  border:
    1px solid
    rgba(79,220,255,.55);

  color:#7be8ff;

  font-size:29px;

  box-shadow:
    0 0 25px
    rgba(43,209,255,.15);
}

.login-card h1{
  margin:
    7px
    0;

  text-align:center;

  font-size:23px;

  letter-spacing:1.7px;
}

.login-sub{
  margin-bottom:21px;

  text-align:center;

  color:#7890a4;
}

.login-card label{
  display:block;

  margin:
    11px
    0
    5px;

  color:#7f96aa;

  font-size:10px;

  font-weight:800;

  letter-spacing:.8px;

  text-transform:uppercase;
}

.login-card input{
  width:100%;

  padding:11px;

  outline:none;

  border-radius:9px;

  border:
    1px solid
    rgba(66,123,161,.35);

  background:#07121e;

  color:white;
}

.login-card input:focus{
  border-color:
    rgba(78,207,250,.65);

  box-shadow:
    0 0 0
    2px
    rgba(42,189,239,.06);
}

.auth-btn{
  width:100%;

  margin-top:17px;

  padding:11px;

  border:0;

  border-radius:9px;

  background:
    linear-gradient(
      90deg,
      #28b9d8,
      #6556dc
    );

  color:white;

  font-weight:900;
}

.switch-btn{
  width:100%;

  margin-top:9px;

  padding:7px;

  border:0;

  background:transparent;

  color:#65daf6;
}

.auth-message{
  min-height:18px;

  text-align:center;

  color:#ff8e8e;

  font-size:11px;
}

.demo-note{
  display:block;

  margin-top:17px;

  text-align:center;

  color:#566d80;

  font-size:9px;
}


/* =========================================================
   NPC / ELEMENTOS ANTIGOS
   ========================================================= */

.npc-character{
  position:absolute;

  z-index:19;

  left:39%;
  bottom:72px;

  width:72px;
  height:92px;

  text-align:center;

  pointer-events:auto;

  cursor:pointer;
}

.npc-sprite{
  width:64px;
  height:64px;

  margin:0 auto;

  background-image:
    url("assets/npc.png");

  background-repeat:no-repeat;

  background-position:0 0;

  image-rendering:pixelated;

  filter:
    drop-shadow(
      0
      8px
      5px
      rgba(0,0,0,.55)
    );
}

.npc-name{
  display:inline-block;

  padding:
    3px
    7px;

  border-radius:7px;

  background:
    rgba(6,18,30,.94);

  border:
    1px solid
    rgba(67,142,183,.7);

  color:white;

  font-size:9px;

  font-weight:900;
}

#playerCharacter{
  display:none !important;
}

.map-location.village,
.map-location.shop,
.map-location.portal{
  display:none !important;
}

#npcTrainer{
  position:absolute !important;

  z-index:35 !important;

  left:50% !important;
  bottom:58px !important;

  width:110px !important;
  height:135px !important;

  transform:
    translateX(-50%) !important;

  text-align:center !important;
}

#npcTrainer .npc-sprite{
  width:96px !important;
  height:100px !important;

  margin:
    0
    auto
    4px !important;

  background-image:
    url("/assets/player_trainer.png") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    left center !important;

  background-size:
    200% 100% !important;

  image-rendering:
    pixelated !important;

  animation:
    none !important;

  filter:
    drop-shadow(
      0
      8px
      5px
      rgba(0,0,0,.65)
    ) !important;
}

#npcTrainer .npc-name{
  display:inline-block !important;

  padding:
    4px
    9px !important;

  border-radius:
    7px !important;

  background:
    rgba(5,18,30,.95) !important;

  border:
    1px solid
    rgba(64,146,190,.8) !important;

  color:white !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;
}

.player-rpg-image,
.player-sprite{
  font-size:0 !important;
}


/* =========================================================
   TELAS GRANDES
   ========================================================= */

@media(
  min-width:1400px
){

  .map-page{
    width:100%;

    height:
      calc(100dvh - 102px);

    min-height:
      calc(100dvh - 102px);
  }

  #realMapContainer{
    width:100%;
    height:100%;
  }

  #realMapCanvas{
    width:100%;
    height:100%;
  }

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(
  max-width:1050px
){

  .brand{
    min-width:auto;
  }

  .brand small{
    display:none;
  }

  .mm-chat{
    width:335px;
    height:250px;
  }

  .mm-player-panel{
    width:490px;

    transform:
      translateX(0);
  }

  .mm-map-top{
    top:58px;
  }

}


@media(
  max-width:800px
){

  .topbar{
    height:54px;

    padding:
      0
      9px;

    gap:6px;
  }

  .brand-mark{
    width:31px;
    height:31px;

    font-size:18px;
  }

  .brand b{
    font-size:10px;
  }

  .resources{
    gap:4px;
  }

  .resources span{
    min-height:31px;

    padding:
      0
      7px;

    font-size:10px;
  }

  .resources span:nth-child(n+3){
    display:none;
  }

  .icon-btn{
    width:31px;
    height:31px;
  }

  .game-menu{
    top:54px;

    height:42px;

    padding:
      0
      7px;

    overflow-x:auto;
  }

  .menu-btn{
    min-width:90px;

    height:41px;

    padding:
      0
      10px;

    white-space:nowrap;

    font-size:10px;
  }

  /*
    54px topbar + 42px menu = 96px.
  */

  .map-page{
    width:100%;

    height:
      calc(100dvh - 96px);

    min-height:
      calc(100dvh - 96px);
  }

  #realMapContainer{
    width:100%;
    height:100%;

    min-height:0;
  }

  #realMapCanvas{
    width:100%;
    height:100%;
  }

  .mm-location{
    top:7px;
    left:7px;

    min-width:145px;

    padding:
      5px
      7px;
  }

  .mm-location-icon{
    width:27px;
    height:27px;

    font-size:13px;
  }

  .mm-location strong{
    font-size:9px;
  }

  .mm-map-top{
    top:48px;

    max-width:
      calc(100% - 16px);

    overflow-x:auto;

    padding:4px;
  }

  .mm-map-top button{
    flex:
      0
      0
      35px;

    width:35px;
    height:35px;
  }

  .mm-controls{
    display:none;
  }

  .mm-chat{
    display:none;
  }

  .mm-depot-button{
    display:none;
  }

  .mm-player-panel{
    left:8px;
    right:8px;
    bottom:0;

    width:auto;

    transform:none;

    padding:
      8px
      9px
      10px;
  }

  .mm-player-level{
    font-size:11px;
  }

  .mm-player-money{
    font-size:9px;
  }

  .mm-bottom-actions{
    gap:3px;
  }

  .mm-bottom-actions button{
    min-height:44px;

    border-radius:8px;
  }

  .mm-bottom-actions button span{
    font-size:15px;
  }

  .mm-bottom-actions button small{
    display:none;
  }

  .hero{
    padding:
      19px
      14px;
  }

  .hero h1{
    font-size:28px;
  }

  .toolbar{
    padding:
      10px
      12px;
  }

  .grid{
    padding:
      15px
      12px;
  }

  .panel{
    width:100%;
    right:-100%;
  }

  .duel-box{
    margin:
      15px
      11px
      30px;

    padding:13px;
  }

  .duel-arena{
    grid-template-columns:
      1fr;

    gap:12px;

    padding:13px;
  }

  .duel-vs{
    width:50px;
    height:50px;
  }

  .duel-side{
    min-height:auto;
  }

  .duel-icon{
    width:82px;
    height:82px;

    font-size:42px;
  }

  .duel-start-btn{
    width:100%;

    min-width:0;
  }

}


/* =========================================================
   CELULAR PEQUENO
   ========================================================= */

@media(
  max-width:500px
){

  .map-page{
    width:100%;

    height:
      calc(100dvh - 96px);

    min-height:
      calc(100dvh - 96px);
  }

  #realMapContainer{
    width:100%;
    height:100%;
    min-height:0;
  }

  #realMapCanvas{
    width:100%;
    height:100%;
  }

}


/* =========================================================
   TELA CHEIA
   ========================================================= */

:fullscreen #realMapContainer{
  width:100vw;
  height:100vh;
}

:fullscreen #realMapCanvas{
  width:100%;
  height:100%;
}


/* =========================================================
   POKEPDA - PACOTE VISUAL HD
   ========================================================= */

:root {
  --pokepda-hd-bg: #050a0f;
  --pokepda-hd-panel: rgba(7,15,22,.94);
  --pokepda-hd-border: rgba(83,207,255,.28);
  --pokepda-hd-glow: rgba(31,188,255,.18);
  --pokepda-hd-gold: #f2c94c;
  --pokepda-hd-text: #f5fbff;
}

#realMapCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #07131f;
  filter: saturate(1.08) contrast(1.045) brightness(1.015);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

#realMapContainer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(32,145,194,.09), transparent 52%),
    linear-gradient(180deg, #081723 0%, #050b11 100%);
  box-shadow:
    inset 0 0 0 1px rgba(110,215,255,.12),
    inset 0 -38px 80px rgba(0,0,0,.18),
    0 12px 42px rgba(0,0,0,.26);
}

#realMapContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.025),
    transparent 12%,
    transparent 82%,
    rgba(0,0,0,.13)
  );
  box-shadow: inset 0 0 55px rgba(0,0,0,.14);
}

.topbar,
.mm-map-top,
.mm-chat,
.mm-bag,
.mm-player-panel,
#mapCharacterMenu {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.topbar {
  box-shadow:
    0 1px 0 rgba(255,255,255,.035),
    0 8px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.icon-btn,
.menu-btn,
.resources span,
.user-pill {
  transition:
    transform .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    background-color .14s ease;
}

.icon-btn:hover,
.menu-btn:hover {
  transform: translateY(-1px);
}

.mm-chat,
.mm-bag,
.mm-player-panel {
  box-shadow:
    0 18px 50px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.025);
}

button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(45,196,255,.14);
}

img[src*="/assets/"],
.player-sprite,
.player-rpg-image {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#mapLookMessage,
#autoWalkMessage {
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 7px rgba(0,0,0,.52);
  backdrop-filter: blur(5px);
}

#realMapContainer,
#realMapCanvas {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn,
  .menu-btn,
  .resources span,
  .user-pill {
    transition: none !important;
  }
}

/* =========================================================
   AUTO HELPER V202
   ========================================================= */
.mm-auto-helper-btn-v202 {
  color:#79f5a2 !important;
  border-color:rgba(77,226,132,.34) !important;
}

.mm-auto-helper-btn-v202 svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mm-auto-helper-btn-v202:hover,
.mm-auto-helper-btn-v202.active {
  color:#b6ffd0 !important;
  border-color:rgba(82,241,145,.8) !important;
  background:rgba(18,82,49,.45) !important;
  box-shadow:0 0 18px rgba(65,232,128,.16) !important;
}

.ppd-auto-helper-v202 {
  position:fixed;
  top:195px;
  left:4px;
  right:auto;
  z-index:32000;
  width:min(240px,calc(100vw - 8px));
  height:min(380px,calc(100dvh - 8px));
  min-width:220px;
  min-height:260px;
  max-width:calc(100vw - 12px);
  max-height:calc(100dvh - 12px);
  color:#ffffff;
  background:
    linear-gradient(180deg,rgba(13,22,25,.985),rgba(8,15,17,.985));
  border:1px solid rgba(82,151,108,.48);
  border-radius:7px;
  box-shadow:0 20px 55px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.025);
  overflow:hidden;
  resize:both;
  display:flex;
  flex-direction:column;
  backdrop-filter:blur(14px);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.ppd-auto-helper-v202[hidden] {
  display:none !important;
}

.ppd-auto-helper-v202::after {
  content:"";
  position:absolute;
  right:3px;
  bottom:3px;
  width:13px;
  height:13px;
  pointer-events:none;
  opacity:.58;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(127,190,150,.75) 47% 53%, transparent 54% 100%),
    linear-gradient(135deg, transparent 0 66%, rgba(127,190,150,.48) 67% 73%, transparent 74% 100%);
}

.ppd-auto-helper-header-v202 {
  min-height:58px;
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px 9px;
  background:
    linear-gradient(135deg,rgba(53,16,19,.9),rgba(18,33,34,.82) 58%,rgba(12,34,24,.78));
  border-bottom:1px solid rgba(101,157,119,.27);
  cursor:move;
  cursor:grab;
  user-select:none;
  touch-action:none;
}

.ppd-auto-helper-v202.is-dragging .ppd-auto-helper-header-v202 {
  cursor:grabbing;
}

.ppd-auto-helper-header-v202 button,
.ppd-auto-helper-header-v202 input,
.ppd-auto-helper-header-v202 select {
  cursor:pointer;
  touch-action:auto;
}

.ppd-auto-helper-header-v202 strong {
  display:block;
  color:#ffffff;
  font-size:15px;
  font-weight:900;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 1px 2px #000;
  letter-spacing:.15px;
}

.ppd-auto-helper-header-v202 small {
  display:block;
  margin-top:4px;
  color:#ffffff;
  font-size:11.5px;
  line-height:1.42;
}

.ppd-auto-helper-close-v202 {
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:5px;
  color:#89978d;
  background:transparent;
  font-size:18px;
  line-height:1;
}

.ppd-auto-helper-close-v202:hover {
  color:#fff;
  background:rgba(255,255,255,.06);
}

.ppd-auto-helper-scroll-v202 {
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
  padding:9px;
}

.ppd-auto-helper-section-label-v202 {
  display:flex;
  align-items:center;
  gap:7px;
  margin:6px 2px 5px;
  color:#ffffff;
  font-size:11px;
  font-weight:900;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.ppd-auto-helper-card-v202 {
  margin-bottom:6px;
  padding:8px;
  border:1px solid rgba(74,116,88,.42);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(19,31,32,.94),rgba(13,24,24,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.015);
}

.ppd-auto-helper-card-v202.is-enabled {
  border-color:rgba(75,166,105,.62);
  box-shadow:inset 0 0 0 1px rgba(60,125,82,.08);
}

.ppd-auto-helper-card-v202.is-disabled,
.ppd-auto-helper-card-v202.is-locked {
  opacity:.88;
}

.ppd-auto-helper-card-v202 p {
  margin:6px 0 0 28px;
  color:#ffffff;
  font-size:11.5px;
  line-height:1.48;
}

.ppd-auto-helper-row-v202 {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.ppd-auto-helper-row-v202 > input[type="checkbox"] {
  width:14px;
  height:14px;
  margin:0;
  accent-color:#67d48c;
  flex:0 0 auto;
}

.ppd-auto-helper-icon-v202,
.ppd-auto-helper-item-icon-v202 {
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  border-radius:4px;
  background:rgba(35,48,45,.9);
  border:1px solid rgba(94,126,106,.27);
  font-size:14px;
}

.ppd-auto-helper-item-icon-v202 img {
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
  image-rendering:pixelated;
}

.ppd-auto-helper-main-v202 {
  min-width:0;
  flex:1;
}

.ppd-auto-helper-main-v202 b {
  display:block;
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  line-height:1.2;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.ppd-auto-helper-main-v202 small {
  display:block;
  margin-top:3px;
  color:#ffffff;
  font-size:11.5px;
  line-height:1.45;
}

.ppd-auto-helper-count-v202,
.ppd-auto-helper-lock-v202 {
  margin-left:auto;
  flex:0 0 auto;
  min-width:28px;
  padding:2px 5px;
  border-radius:4px;
  color:#ffffff;
  background:rgba(5,10,10,.68);
  border:1px solid rgba(91,125,101,.2);
  font-size:10.5px;
  font-weight:900;
  text-align:center;
}

.ppd-auto-helper-field-v202 {
  display:flex;
  align-items:center;
  gap:7px;
  margin:6px 0 0 28px;
  min-width:0;
}

.ppd-auto-helper-field-v202 > span {
  flex:0 0 88px;
  color:#ffffff;
  font-size:11.5px;
  font-weight:800;
  text-shadow:0 1px 1px #000;
}

.ppd-auto-helper-field-v202 select,
.ppd-auto-helper-field-v202 input {
  min-width:0;
  flex:1;
  height:23px;
  padding:2px 6px;
  color:#ffffff;
  background:#111b1e;
  border:1px solid rgba(85,113,95,.42);
  border-radius:3px;
  outline:none;
  font-size:11.5px;
}

.ppd-auto-helper-field-v202 select:focus,
.ppd-auto-helper-field-v202 input:focus {
  border-color:rgba(85,189,120,.74);
  box-shadow:0 0 0 2px rgba(66,165,99,.08);
}

.ppd-auto-helper-field-v202 input:disabled,
.ppd-auto-helper-field-v202 select:disabled {
  color:rgba(255,255,255,.68);
  background:#101617;
}

.ppd-auto-helper-field-stack-v202 {
  align-items:flex-start;
}

.ppd-auto-helper-lockline-v202 {
  margin-bottom:7px;
  color:#ffffff;
  font-size:11.5px;
  font-weight:900;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.ppd-auto-helper-vip-badge-v202,
.ppd-auto-helper-vip-on-v202 {
  margin-left:auto;
  padding:2px 6px;
  border-radius:10px;
  font-size:9px;
  letter-spacing:.4px;
}

.ppd-auto-helper-vip-badge-v202 {
  color:#ffffff;
  border:1px solid rgba(226,177,59,.42);
  background:rgba(104,74,10,.2);
}

.ppd-auto-helper-vip-on-v202 {
  color:#ffffff;
  border:1px solid rgba(74,198,111,.42);
  background:rgba(19,86,44,.22);
}

.ppd-auto-helper-note-v202 {
  display:block;
  margin:5px 0 0 28px;
  color:#ffffff;
  font-size:11.5px;
  line-height:1.45;
}


/* V205 - textos internos maiores e mais legíveis; cabeçalhos preservados. */
.ppd-auto-helper-v202 .ppd-auto-helper-main-v202 small,
.ppd-auto-helper-v202 .ppd-auto-helper-card-v202 p,
.ppd-auto-helper-v202 .ppd-auto-helper-note-v202,
.ppd-auto-helper-v202 .ppd-auto-helper-field-v202 > span,
.ppd-auto-helper-v202 .ppd-auto-helper-header-v202 small {
  color:#ffffff;
  text-shadow:0 1px 2px #000;
}

.ppd-auto-helper-footer-v202 {
  padding:6px 2px 2px;
  color:#ffffff;
  font-size:10.5px;
  line-height:1.4;
  text-align:center;
  letter-spacing:.25px;
}

.ppd-auto-helper-rest-v202 {
  position:fixed;
  inset:0;
  z-index:33000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(2,7,8,.72);
  backdrop-filter:blur(5px);
}

.ppd-auto-helper-rest-v202[hidden] {
  display:none !important;
}

.ppd-auto-helper-rest-card-v202 {
  position:relative;
  width:min(420px,calc(100vw - 28px));
  padding:17px;
  border:1px solid rgba(82,176,113,.52);
  border-radius:9px;
  background:linear-gradient(180deg,#13211f,#0b1414);
  box-shadow:0 22px 70px rgba(0,0,0,.58);
  color:#e8f0eb;
}

.ppd-auto-helper-rest-card-v202 .ppd-auto-helper-close-v202 {
  position:absolute;
  top:8px;
  right:8px;
}

.ppd-auto-helper-rest-title-v202 {
  color:#ffffff;
  font-size:19px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  font-weight:900;
}

.ppd-auto-helper-rest-time-v202 {
  margin-top:5px;
  color:#ffffff;
  font-size:12px;
}

.ppd-auto-helper-rest-grid-v202 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:14px;
}

.ppd-auto-helper-rest-grid-v202 span {
  min-width:0;
  padding:10px 5px;
  border:1px solid rgba(80,127,96,.28);
  border-radius:6px;
  background:rgba(6,13,13,.5);
  text-align:center;
}

.ppd-auto-helper-rest-grid-v202 b,
.ppd-auto-helper-rest-grid-v202 small {
  display:block;
}

.ppd-auto-helper-rest-grid-v202 b {
  color:#eef6f1;
  font-size:15px;
}

.ppd-auto-helper-rest-grid-v202 small {
  margin-top:2px;
  color:#ffffff;
  font-size:9px;
  text-transform:uppercase;
}

.ppd-auto-helper-rest-ok-v202 {
  width:100%;
  min-height:34px;
  margin-top:12px;
  border:1px solid rgba(87,196,121,.5);
  border-radius:6px;
  color:#dffff0;
  background:linear-gradient(180deg,rgba(44,133,74,.82),rgba(23,85,48,.86));
  font-size:9px;
  font-weight:900;
  letter-spacing:.4px;
}

.ppd-auto-helper-rest-ok-v202:hover {
  filter:brightness(1.08);
}

@media (max-width:720px) {
  .ppd-auto-helper-v202 {
    top:62px;
    right:8px;
    width:calc(100vw - 16px);
    height:calc(100dvh - 70px);
    min-width:220px;
    min-height:240px;
    max-width:calc(100vw - 12px);
    max-height:calc(100dvh - 12px);
    resize:both;
  }

  .ppd-auto-helper-scroll-v202 {
    max-height:none;
  }

  .ppd-auto-helper-rest-grid-v202 {
    grid-template-columns:repeat(2,1fr);
  }
}


/* =========================================================
   AUTO HELPER V206 - ABAS POÇÕES / CAPTURA
   Somente nomes, com seleção animada no estilo da referência.
   ========================================================= */
.ppd-auto-helper-tabs-v206 {
  position:relative;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:7px 8px 0;
  padding:3px;
  min-height:36px;
  border:1px solid rgba(79,112,95,.34);
  border-radius:7px;
  background:rgba(5,10,12,.9);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.ppd-auto-helper-tab-slider-v206 {
  position:absolute;
  z-index:0;
  top:3px;
  bottom:3px;
  left:3px;
  width:calc((100% - 10px) / 2);
  border:1px solid rgba(191,139,36,.56);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(103,69,14,.96),rgba(69,44,8,.97));
  box-shadow:inset 0 1px 0 rgba(255,229,156,.12),0 0 12px rgba(179,119,24,.10);
  transition:transform .24s cubic-bezier(.2,.85,.25,1),box-shadow .22s ease,background .22s ease;
  pointer-events:none;
}

.ppd-auto-helper-tabs-v206.is-capture .ppd-auto-helper-tab-slider-v206 {
  transform:translateX(calc(100% + 4px));
}

.ppd-auto-helper-tab-v206 {
  position:relative;
  z-index:1;
  min-width:0;
  height:28px;
  padding:0 8px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#ffffff;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.15px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  cursor:pointer;
  transition:transform .16s ease,opacity .18s ease,color .18s ease;
}

.ppd-auto-helper-tab-v206:hover {
  transform:translateY(-1px);
}

.ppd-auto-helper-tab-v206:not(.active) {
  opacity:.72;
}

.ppd-auto-helper-tab-v206.active {
  color:#fff8df;
  opacity:1;
}

.ppd-auto-helper-tab-page-v206[hidden] {
  display:none !important;
}

.ppd-auto-helper-tab-page-v206 {
  animation:ppdAutoHelperTabEnterV206 .20s ease both;
}

@keyframes ppdAutoHelperTabEnterV206 {
  from { opacity:0; transform:translateY(4px); }
  to { opacity:1; transform:translateY(0); }
}

/* =========================================================
   AUTO HELPER V207 - SELETOR MODERNO DE BALL
   Dropdown próprio para permitir animação real de abertura/seleção.
   ========================================================= */
.ppd-auto-helper-field-picker-v207 {
  align-items:flex-start;
}

.ppd-auto-helper-field-picker-v207 > span {
  padding-top:8px;
}

.ppd-auto-helper-ball-picker-v207 {
  position:relative;
  flex:1;
  min-width:0;
  border-radius:7px;
  transition:filter .18s ease,transform .18s ease;
}

.ppd-auto-helper-ball-trigger-v207 {
  position:relative;
  width:100%;
  min-height:38px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 22px;
  align-items:center;
  gap:7px;
  padding:5px 6px;
  overflow:hidden;
  color:#fff;
  text-align:left;
  border:1px solid rgba(102,142,118,.50);
  border-radius:7px;
  background:
    radial-gradient(circle at 12% 0%,rgba(84,157,115,.13),transparent 36%),
    linear-gradient(180deg,rgba(20,31,34,.98),rgba(10,18,20,.99));
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 13px rgba(0,0,0,.22);
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .16s ease,background .18s ease;
}

.ppd-auto-helper-ball-trigger-v207::before {
  content:"";
  position:absolute;
  inset:0 auto 0 -60%;
  width:42%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(105deg,transparent,rgba(255,240,180,.18),transparent);
  transform:skewX(-18deg);
}

.ppd-auto-helper-ball-picker-v207:not(.is-disabled) .ppd-auto-helper-ball-trigger-v207:hover {
  transform:translateY(-1px);
  border-color:rgba(205,162,68,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 0 1px rgba(176,125,33,.08),0 7px 16px rgba(0,0,0,.28);
}

.ppd-auto-helper-ball-picker-v207.is-open .ppd-auto-helper-ball-trigger-v207 {
  border-color:rgba(224,174,67,.90);
  background:
    radial-gradient(circle at 16% 0%,rgba(205,154,49,.18),transparent 42%),
    linear-gradient(180deg,rgba(34,31,22,.98),rgba(15,19,18,.99));
  box-shadow:0 0 0 2px rgba(187,134,35,.10),0 8px 18px rgba(0,0,0,.31);
}

.ppd-auto-helper-ball-picker-v207.is-just-selected .ppd-auto-helper-ball-trigger-v207 {
  animation:ppdBallTriggerSelectedV207 .55s cubic-bezier(.2,.8,.25,1) both;
}

.ppd-auto-helper-ball-picker-v207.is-just-selected .ppd-auto-helper-ball-trigger-v207::before {
  animation:ppdBallTriggerShineV207 .62s ease-out both;
}

.ppd-auto-helper-ball-trigger-icon-v207,
.ppd-auto-helper-ball-option-icon-v207 {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  border:1px solid rgba(126,157,137,.25);
  border-radius:6px;
  background:rgba(5,10,11,.62);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}

.ppd-auto-helper-ball-trigger-icon-v207 img,
.ppd-auto-helper-ball-option-icon-v207 img {
  width:22px;
  height:22px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 1px 1px #000);
}

.ppd-auto-helper-ball-auto-icon-v207 {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#ffe3a0;
  font-size:7.5px;
  font-weight:950;
  letter-spacing:.3px;
  text-shadow:0 1px 2px #000;
}

.ppd-auto-helper-ball-trigger-copy-v207,
.ppd-auto-helper-ball-option-copy-v207 {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.ppd-auto-helper-ball-trigger-copy-v207 b,
.ppd-auto-helper-ball-option-copy-v207 b {
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#fff;
  font-size:11.5px;
  font-weight:900;
  line-height:1.15;
  text-shadow:0 1px 2px #000;
}

.ppd-auto-helper-ball-trigger-copy-v207 small,
.ppd-auto-helper-ball-option-copy-v207 small {
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#c9d2cc;
  font-size:9.5px;
  line-height:1.2;
}

.ppd-auto-helper-ball-trigger-copy-v207 small {
  color:#e3c981;
  font-weight:800;
}

.ppd-auto-helper-ball-chevron-v207 {
  justify-self:center;
  color:#e8d6a1;
  font-size:17px;
  line-height:1;
  transform:translateY(-2px) rotate(0deg);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),color .18s ease;
}

.ppd-auto-helper-ball-picker-v207.is-open .ppd-auto-helper-ball-chevron-v207 {
  color:#fff2c6;
  transform:translateY(2px) rotate(180deg);
}

.ppd-auto-helper-ball-menu-v207 {
  max-height:0;
  margin-top:0;
  padding:0 3px;
  overflow:hidden;
  opacity:0;
  transform:translateY(-5px) scale(.985);
  transform-origin:top center;
  pointer-events:none;
  border:0 solid rgba(139,113,55,.0);
  border-radius:7px;
  background:rgba(7,13,15,.98);
  box-shadow:0 12px 28px rgba(0,0,0,.42);
  transition:max-height .28s cubic-bezier(.2,.85,.25,1),opacity .18s ease,transform .22s ease,margin .22s ease,padding .22s ease,border-color .22s ease;
}

.ppd-auto-helper-ball-picker-v207.is-open .ppd-auto-helper-ball-menu-v207 {
  max-height:222px;
  margin-top:5px;
  padding:4px;
  overflow:auto;
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  border-width:1px;
  border-color:rgba(139,113,55,.36);
}

.ppd-auto-helper-ball-menu-v207::-webkit-scrollbar {
  width:6px;
}

.ppd-auto-helper-ball-menu-v207::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(200,155,60,.35);
}

.ppd-auto-helper-ball-option-v207 {
  position:relative;
  width:100%;
  min-height:39px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  margin:0 0 3px;
  padding:5px 6px;
  overflow:hidden;
  color:#fff;
  text-align:left;
  border:1px solid transparent;
  border-radius:6px;
  background:rgba(15,23,25,.72);
  cursor:pointer;
  opacity:0;
  transform:translateY(-5px);
  transition:transform .14s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.ppd-auto-helper-ball-picker-v207.is-open .ppd-auto-helper-ball-option-v207 {
  animation:ppdBallOptionEnterV207 .24s ease forwards;
  animation-delay:calc(var(--ah-option-index,0) * 22ms);
}

.ppd-auto-helper-ball-option-v207:last-child {
  margin-bottom:0;
}

.ppd-auto-helper-ball-option-v207:not(.is-selected):hover {
  transform:translateX(2px);
  border-color:rgba(98,161,122,.44);
  background:linear-gradient(90deg,rgba(30,59,45,.75),rgba(17,28,29,.88));
}

.ppd-auto-helper-ball-option-meta-v207 {
  position:relative;
  z-index:2;
  min-width:34px;
  padding:2px 5px;
  border:1px solid rgba(109,140,119,.24);
  border-radius:999px;
  color:#f2f4f2;
  background:rgba(2,7,8,.62);
  font-size:9.5px;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
}

.ppd-auto-helper-ball-option-v207.is-selected {
  border-color:rgba(226,174,63,.88);
  background:
    radial-gradient(circle at 12% 50%,rgba(217,164,54,.18),transparent 44%),
    linear-gradient(90deg,rgba(79,55,12,.92),rgba(42,34,18,.96) 58%,rgba(22,28,26,.94));
  box-shadow:inset 0 0 0 1px rgba(255,230,160,.05),0 0 12px rgba(207,152,39,.13);
  animation:ppdBallSelectedPulseV207 1.8s ease-in-out infinite;
}

.ppd-auto-helper-ball-option-v207.is-selected::after {
  content:"";
  position:absolute;
  z-index:1;
  top:-35%;
  bottom:-35%;
  left:-38%;
  width:30%;
  pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,244,201,.16),transparent);
  transform:skewX(-20deg);
  animation:ppdBallSelectedShineV207 2.5s ease-in-out infinite;
}

.ppd-auto-helper-ball-option-v207.is-selected .ppd-auto-helper-ball-option-copy-v207 b {
  color:#fff2c3;
}

.ppd-auto-helper-ball-option-v207.is-selected .ppd-auto-helper-ball-option-meta-v207 {
  color:#ffefb0;
  border-color:rgba(226,174,63,.40);
  background:rgba(53,38,10,.62);
}

.ppd-auto-helper-ball-selected-ring-v207 {
  position:absolute;
  inset:2px;
  z-index:0;
  border:1px solid rgba(255,211,105,.12);
  border-radius:5px;
  pointer-events:none;
  animation:ppdBallRingV207 1.8s ease-in-out infinite;
}

.ppd-auto-helper-ball-option-icon-v207,
.ppd-auto-helper-ball-option-copy-v207 {
  position:relative;
  z-index:2;
}

.ppd-auto-helper-ball-picker-v207.is-disabled {
  opacity:.58;
  filter:saturate(.7);
}

.ppd-auto-helper-ball-picker-v207.is-disabled .ppd-auto-helper-ball-trigger-v207 {
  cursor:not-allowed;
}

@keyframes ppdBallOptionEnterV207 {
  from { opacity:0; transform:translateY(-5px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes ppdBallSelectedPulseV207 {
  0%,100% { box-shadow:inset 0 0 0 1px rgba(255,230,160,.04),0 0 8px rgba(207,152,39,.08); }
  50% { box-shadow:inset 0 0 0 1px rgba(255,230,160,.10),0 0 17px rgba(225,168,50,.23); }
}

@keyframes ppdBallSelectedShineV207 {
  0%,52% { left:-38%; opacity:0; }
  58% { opacity:1; }
  82% { left:118%; opacity:.85; }
  100% { left:118%; opacity:0; }
}

@keyframes ppdBallRingV207 {
  0%,100% { opacity:.35; transform:scale(1); }
  50% { opacity:.9; transform:scale(.99); }
}

@keyframes ppdBallTriggerSelectedV207 {
  0% { transform:scale(.985); box-shadow:0 0 0 0 rgba(222,173,72,0); }
  45% { transform:scale(1.012); box-shadow:0 0 0 3px rgba(222,173,72,.13),0 0 18px rgba(222,173,72,.16); }
  100% { transform:scale(1); box-shadow:0 0 0 0 rgba(222,173,72,0); }
}

@keyframes ppdBallTriggerShineV207 {
  0% { left:-60%; opacity:0; }
  20% { opacity:1; }
  100% { left:125%; opacity:0; }
}


/* =========================================================
   AUTO HELPER V208 - PICKER DE BALL RESPONSIVO
   Mantém o seletor legível mesmo quando a janela fica estreita.
   ========================================================= */
.ppd-auto-helper-field-picker-v207 {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  margin-left:0;
}

.ppd-auto-helper-field-picker-v207 > span {
  flex:none;
  width:auto;
  padding-top:0;
  padding-left:28px;
  line-height:1.2;
}

.ppd-auto-helper-field-picker-v207 .ppd-auto-helper-ball-picker-v207 {
  width:100%;
  min-width:0;
}

.ppd-auto-helper-field-picker-v207 .ppd-auto-helper-ball-trigger-v207 {
  min-width:0;
  width:100%;
  grid-template-columns:30px minmax(0,1fr) 22px;
}

.ppd-auto-helper-field-picker-v207 .ppd-auto-helper-ball-menu-v207 {
  width:100%;
}

.ppd-auto-helper-field-picker-v207 .ppd-auto-helper-ball-option-v207 {
  grid-template-columns:28px minmax(0,1fr) auto;
}

@media (max-width: 520px) {
  .ppd-auto-helper-field-picker-v207 > span {
    padding-left:0;
  }

  .ppd-auto-helper-ball-trigger-copy-v207 small,
  .ppd-auto-helper-ball-option-copy-v207 small {
    white-space:normal;
  }
}


/* =========================================================
   AUTO HELPER V211 - AUTO-CATCH SHINY VIP
   CTA Assinar VIP + transição para Loja de Diamonds > Personagem.
   ========================================================= */
.ppd-auto-helper-shiny-card-v211 {
  position:relative;
  overflow:visible;
  border-color:rgba(66,151,92,.56);
  background:
    radial-gradient(circle at 100% 0%,rgba(64,158,96,.10),transparent 45%),
    linear-gradient(180deg,rgba(19,33,31,.97),rgba(12,24,23,.98));
}

.ppd-auto-helper-shiny-card-v211.is-locked {
  opacity:1;
  border-color:rgba(190,143,45,.48);
  box-shadow:inset 0 0 0 1px rgba(215,169,66,.025);
}

.ppd-auto-helper-shiny-card-v211.is-enabled {
  border-color:rgba(76,196,112,.78);
  box-shadow:inset 0 0 0 1px rgba(82,198,118,.10),0 0 13px rgba(57,190,99,.08);
}

.ppd-auto-helper-shiny-icon-v211 {
  color:#ffe584;
  text-shadow:0 0 7px rgba(255,213,66,.65);
}

.ppd-auto-helper-vip-filter-v211 {
  margin:8px -8px -8px;
  padding:7px 8px 8px;
  border-top:1px solid rgba(183,140,48,.26);
  border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,rgba(68,53,23,.12),rgba(29,28,23,.15));
}

.ppd-auto-helper-vip-filter-head-v211 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.ppd-auto-helper-vip-filter-head-v211 > strong {
  color:#e4bd4f;
  font-size:11px;
  font-weight:950;
  letter-spacing:.8px;
  text-shadow:0 1px 2px #000;
}

.ppd-auto-helper-vip-filter-v211 p {
  margin:7px 0 0;
  color:#ffffff;
  font-size:11.5px;
  line-height:1.45;
  text-shadow:0 1px 2px #000;
}

.ppd-auto-helper-subscribe-vip-v211 {
  position:relative;
  min-width:78px;
  height:25px;
  padding:0 12px;
  overflow:hidden;
  border:1px solid rgba(255,219,121,.74);
  border-radius:999px;
  color:#352405;
  background:
    linear-gradient(180deg,#f3d677 0%,#d2a640 52%,#b98223 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(103,63,8,.34),
    0 2px 7px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,205,88,.08);
  font-size:10.5px;
  font-weight:950;
  text-shadow:0 1px rgba(255,244,197,.5);
  cursor:pointer;
  transform:translateZ(0);
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    filter .16s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.ppd-auto-helper-subscribe-vip-v211::before {
  content:"";
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:-45%;
  width:34%;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-20deg);
}

.ppd-auto-helper-subscribe-vip-v211:hover,
.ppd-auto-helper-subscribe-vip-v211:focus-visible {
  outline:none;
  transform:translateY(-2px) scale(1.045);
  filter:brightness(1.10) saturate(1.08);
  border-color:#fff0ae;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 5px 13px rgba(0,0,0,.40),
    0 0 0 2px rgba(222,173,58,.13),
    0 0 16px rgba(236,184,57,.34);
  animation:ppdAhVipHoverPulseV211 .95s ease-in-out infinite alternate;
}

.ppd-auto-helper-subscribe-vip-v211:hover::before,
.ppd-auto-helper-subscribe-vip-v211:focus-visible::before {
  animation:ppdAhVipShineV211 1.25s ease-in-out infinite;
}

.ppd-auto-helper-subscribe-vip-v211:active {
  transform:translateY(0) scale(.95);
}

.ppd-auto-helper-subscribe-vip-v211.is-selected {
  pointer-events:none;
  animation:ppdAhVipSelectedV211 .42s cubic-bezier(.2,.9,.25,1) both;
}

.ppd-auto-helper-vip-status-v211 {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:1px 8px;
  border:1px solid rgba(84,220,126,.48);
  border-radius:999px;
  color:#bfffd1;
  background:rgba(24,105,51,.34);
  box-shadow:0 0 9px rgba(61,221,111,.12);
  font-size:9.5px;
  font-weight:950;
  letter-spacing:.45px;
  text-shadow:0 1px 2px #000;
}

@keyframes ppdAhVipHoverPulseV211 {
  from { box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 5px 13px rgba(0,0,0,.38),0 0 0 2px rgba(222,173,58,.10),0 0 11px rgba(236,184,57,.22); }
  to { box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 6px 15px rgba(0,0,0,.42),0 0 0 3px rgba(244,198,78,.15),0 0 20px rgba(247,195,57,.42); }
}

@keyframes ppdAhVipShineV211 {
  0%,35% { left:-45%; opacity:0; }
  48% { opacity:1; }
  75% { left:118%; opacity:.9; }
  100% { left:118%; opacity:0; }
}

@keyframes ppdAhVipSelectedV211 {
  0% { transform:scale(1); filter:brightness(1); }
  45% { transform:scale(1.12); filter:brightness(1.28); box-shadow:0 0 0 4px rgba(242,194,72,.20),0 0 26px rgba(255,201,66,.55); }
  100% { transform:scale(.98); filter:brightness(1.06); }
}

/* =========================================================
   AUTO HELPER V212 - AUTO HUNT / POKEVIEW
   ========================================================= */
.ppd-auto-helper-header-copy-v212 {
  min-width:0;
  flex:1 1 auto;
}

.ppd-auto-helper-header-actions-v212 {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  padding-top:1px;
}

.ppd-auto-helper-hunt-toggle-v212 {
  position:relative;
  width:62px;
  height:27px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.8px;
  text-shadow:0 1px 2px #000,-1px 0 #000,1px 0 #000;
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 3px 9px rgba(0,0,0,.30);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .24s ease,
    box-shadow .24s ease,
    filter .18s ease;
  isolation:isolate;
}

.ppd-auto-helper-hunt-toggle-v212::before {
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  opacity:.0;
  background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.38) 45%,transparent 70%);
  transform:translateX(-110%);
}

.ppd-auto-helper-hunt-toggle-v212 span {
  position:relative;
  z-index:2;
}

.ppd-auto-helper-hunt-toggle-v212.is-off {
  border-color:rgba(255,87,87,.68);
  background:
    linear-gradient(180deg,rgba(104,24,27,.98),rgba(57,11,14,.98));
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(255,44,44,.08),
    0 0 10px rgba(229,42,42,.18),
    0 3px 9px rgba(0,0,0,.32);
}

.ppd-auto-helper-hunt-toggle-v212.is-on {
  border-color:rgba(82,255,145,.78);
  background:
    linear-gradient(180deg,rgba(25,126,65,.98),rgba(7,72,34,.99));
  box-shadow:
    inset 0 1px rgba(255,255,255,.13),
    0 0 0 1px rgba(61,255,126,.12),
    0 0 12px rgba(44,235,110,.34),
    0 3px 9px rgba(0,0,0,.32);
  animation:ppdAutoHuntOnPulseV212 1.55s ease-in-out infinite;
}

.ppd-auto-helper-hunt-toggle-v212:hover {
  transform:translateY(-1px) scale(1.035);
  filter:brightness(1.14);
}

.ppd-auto-helper-hunt-toggle-v212:active {
  transform:scale(.94);
}

.ppd-auto-helper-hunt-toggle-v212.is-switching {
  animation:ppdAutoHuntSelectV212 .46s cubic-bezier(.2,.95,.25,1.25);
}

.ppd-auto-helper-hunt-toggle-v212.is-switching::before {
  opacity:1;
  animation:ppdAutoHuntShineV212 .52s ease-out;
}

@keyframes ppdAutoHuntSelectV212 {
  0% { transform:scale(.88); }
  48% { transform:scale(1.13); }
  100% { transform:scale(1); }
}

@keyframes ppdAutoHuntShineV212 {
  0% { transform:translateX(-115%); opacity:0; }
  30% { opacity:.9; }
  100% { transform:translateX(115%); opacity:0; }
}

@keyframes ppdAutoHuntOnPulseV212 {
  0%,100% {
    box-shadow:
      inset 0 1px rgba(255,255,255,.13),
      0 0 0 1px rgba(61,255,126,.10),
      0 0 9px rgba(44,235,110,.24),
      0 3px 9px rgba(0,0,0,.32);
  }
  50% {
    box-shadow:
      inset 0 1px rgba(255,255,255,.16),
      0 0 0 2px rgba(61,255,126,.14),
      0 0 17px rgba(44,235,110,.46),
      0 3px 10px rgba(0,0,0,.36);
  }
}

@media (max-width:520px) {
  .ppd-auto-helper-hunt-toggle-v212 {
    width:55px;
  }
  .ppd-auto-helper-header-actions-v212 {
    gap:4px;
  }
}
/* Desktop gameplay only: closer reference scale while the map is active. */
@media screen and (min-width:901px) and (pointer:fine) {
  body.pokepda-map-desktop-zoom {
    zoom:1;
  }
  /* Keep the map filling the viewport while CSS zoom scales its layout. */
  body.pokepda-map-desktop-zoom #pageMapa {
    min-height:calc(100vh - 58px) !important;
  }
  body.pokepda-map-desktop-zoom #realMapContainer {
    height:calc(100vh - 58px) !important;
  }
}