/* =======================================================================
   SUPER AUTO PETS - CSS CONSOLIDADO E OTIMIZADO
   - Layout fullscreen
   - HUD / Footer transparentes (via overrides)
   - Bases independentes (não escalam em hover/drag)
   - Loja em uma única fileira: pets + foods com gap entre grupos
   - Personalização: editar SOMENTE o bloco final ":root" (OVERRIDES)
   - Este arquivo mantém os mesmos nomes de classes e animações
   ======================================================================= */

/* ===================== ANIMAÇÕES ===================== */
@keyframes popIn{0%{transform:scale(.2);opacity:0}55%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
@keyframes sellUp{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-70px) scale(.4);opacity:0}}
@keyframes buffPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes buffGlow{0%{box-shadow:0 0 0 0 #4caf5077}50%{box-shadow:0 0 14px 6px #4caf50aa}100%{box-shadow:0 0 0 0 #4caf5000}}
@keyframes xpGlow{0%{box-shadow:0 0 0 0 #ff980066}50%{box-shadow:0 0 14px 5px #ffa726aa}100%{box-shadow:0 0 0 0 #ff980000}}
@keyframes mergeSpin{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.3) rotate(10deg)}70%{transform:scale(1.05) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes levelFlash{0%,100%{outline:0}30%{outline:5px solid #ffe082;outline-offset:2px}}
@keyframes freezeAura{0%,100%{filter:drop-shadow(0 0 0 #4fc3f7)}50%{filter:drop-shadow(0 0 12px #4fc3f7)}}
@keyframes unfreezeFade{0%{filter:hue-rotate(160deg) brightness(1.3)}100%{filter:hue-rotate(0) brightness(1)}}
@keyframes attackLungeRight{0%{transform:translateX(0)}45%{transform:translateX(44px) translateY(-6px) scale(1.05)}100%{transform:translateX(0)}}
@keyframes attackLungeLeft{0%{transform:translateX(0)}45%{transform:translateX(-44px) translateY(-6px) scale(1.05)}100%{transform:translateX(0)}}
@keyframes dmgFloat{0%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,-44px);opacity:0}}
@keyframes faintOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.15)}}
@keyframes summonPop{0%{transform:scale(.25);opacity:0}65%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}
@keyframes coinRise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-36px);opacity:0}}
@keyframes buyShine{0%{opacity:0;transform:scale(.5)}40%{opacity:.9;transform:scale(1.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes foodSplash{0%{transform:scale(.2);opacity:0}40%{transform:scale(1.15);opacity:.85}100%{transform:scale(1.6);opacity:0}}
@keyframes healPulse{0%{box-shadow:0 0 0 0 #81c784aa}50%{box-shadow:0 0 18px 6px #81c784}100%{box-shadow:0 0 0 0 #81c78400}}

.anim-pop{animation:popIn .48s cubic-bezier(.25,.8,.25,1)}
.anim-sell{animation:sellUp .42s forwards ease-in}
.anim-buff{animation:buffPulse .55s ease-in-out,buffGlow .8s ease-in-out}
.anim-xp{animation:xpGlow .85s ease-in-out}
.anim-merge{animation:mergeSpin .75s ease-in-out}
.anim-level{animation:levelFlash 1.1s ease-in-out}
.anim-freeze{animation:freezeAura 1.2s ease-in-out}
.anim-unfreeze{animation:unfreezeFade .45s ease-in-out}
.anim-heal{animation:healPulse .8s ease-in-out}
.attack-lunge-right{animation:attackLungeRight .38s ease}
.attack-lunge-left{animation:attackLungeLeft .38s ease}
.faint-out{animation:faintOut .28s forwards ease-in}
.pet.summoned{animation:summonPop .55s ease}

/* Float feedback */
.dmg-float,.coin-float{
  position:absolute;left:50%;transform:translateX(-50%);
  font-weight:700;pointer-events:none;text-shadow:0 1px 2px #000;z-index:30;
}
.dmg-float{top:-6px;font-size:.8rem;color:#ff3d2e;animation:dmgFloat .65s ease forwards}
.coin-float{top:10px;font-size:.7rem;color:#ffb300;animation:coinRise .6s ease forwards}
.buy-shine,.food-splash{
  position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:20;
}
.buy-shine{background:radial-gradient(circle at 50% 55%,#fff8,#ffa00055,#ff980000);animation:buyShine .7s ease-out}
.food-splash{background:radial-gradient(circle at 50% 60%,#fff6,#66bb6a66,#66bb6a00);border-radius:18px;animation:foodSplash .55s ease-out;z-index:19}

/* ===================== BASE GLOBAL (ANTES DOS OVERRIDES) ===================== */
*{box-sizing:border-box;font-family:system-ui,Arial,sans-serif}
body{
  margin:0;
  background:#68b4ff url("../assets/fundo.png") center/cover no-repeat fixed;
  color:#111;min-height:100vh;overflow-x:hidden;
}
h1,h2,h3{margin:0;padding:0;font-weight:700}
.hidden{display:none !important}

/* HUD BASE */
#hudBar{
  position:fixed;inset:0 0 auto;height:64px;
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 14px;background:linear-gradient(#ffffffee,#ffffffc8);
  border-bottom:3px solid #111;z-index:200;backdrop-filter:blur(4px);
}
.hud-left{display:flex;gap:8px;align-items:center}
.hud-box{
  display:flex;align-items:center;gap:4px;
  padding:4px 10px;background:#fff;border:2px solid #111;
  border-radius:12px;font-size:.7rem;font-weight:700;min-height:30px;
  box-shadow:0 2px 0 #111;
}
.hud-box.tier{background:#ffe9c4}
.hud-ico{width:18px;height:18px;image-rendering:pixelated}
.hud-title{text-align:center;flex:1}
.icon-btn{
  border:2px solid #111;background:#fff;font-weight:700;font-size:1rem;
  padding:6px 12px;border-radius:10px;box-shadow:0 3px 0 #111;
  cursor:pointer;transition:transform .12s,box-shadow .12s;
}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #111}

/* Settings */
.settings-panel{
  position:fixed;top:70px;right:14px;width:320px;max-height:calc(100vh - 90px);
  background:#ffffffef;border:3px solid #111;border-radius:18px;
  display:flex;flex-direction:column;z-index:250;
  box-shadow:0 4px 0 #111,0 10px 18px #0005;backdrop-filter:blur(4px);overflow:hidden;
}
.settings-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:3px solid #111;background:#ffe9c4;
}
.settings-header h2{font-size:.8rem}
.settings-section{padding:8px 12px 10px;border-bottom:1px solid #ddd;display:flex;flex-direction:column;gap:6px}
.settings-section:last-of-type{border-bottom:none}
.toggle-row{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:600}
.settings-buttons{display:flex;gap:8px;flex-wrap:wrap}
.mini-btn{
  background:#e0e0e0;border:2px solid #111;border-radius:10px;
  padding:6px 12px;font-size:.65rem;font-weight:700;cursor:pointer;
  box-shadow:0 3px 0 #111;transition:transform .1s,box-shadow .1s;
}
.mini-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #111}
.mini-btn.danger{background:#ffcdd2}
.settings-panel .log{max-height:190px;font-size:.6rem;line-height:1.25}

/* Screen base */
.screen{
  padding-top:72px;min-height:calc(100vh - 72px);
  width:100%;position:relative;display:flex;align-items:flex-start;justify-content:center;
  padding-bottom:140px;
}

/* Board base (será redesenhado nos overrides) */
#board{
  width:1080px;max-width:96vw;
  padding:40px 30px;
  background:linear-gradient(#ffffff14,#00000010),url("../assets/fundo.png") center/cover no-repeat;
  border:4px solid #111;border-radius:22px;box-shadow:0 6px 0 #111,0 8px 20px #0005;
  display:flex;flex-direction:column;gap:34px;
}

/* Lane base */
.lane{width:100%;display:flex;justify-content:center;position:relative;min-height:130px}
.lane-inner{display:flex;gap:18px;align-items:flex-end;flex-wrap:nowrap;min-height:130px}

/* Card base (substituído por overrides, mas mantido para fallback) */
.pet,.food{
  position:relative;width:100px;height:118px;padding:0;
  background:transparent;border:none;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;cursor:grab;user-select:none;
  transition:transform .15s;z-index:1;
}
.pet.dragging,.food.dragging{opacity:.6;transform:scale(.9)}
.pet::before,.food::before,.empty-slot::before{
  content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:90px;height:55px;background:url("../assets/base.png") center/contain no-repeat;
  image-rendering:pixelated;z-index:0;
}
.pet img,.food img{
  max-width:64px;max-height:64px;image-rendering:pixelated;
  pointer-events:none;margin-bottom:8px;filter:drop-shadow(0 3px 2px #0004);
  transition:transform .15s;z-index:2;
}
.pet:hover img,.food:hover img{transform:translateY(-4px) scale(1.05)}
.pet.frozen::after,.food.frozen::after{
  content:"❄";position:absolute;top:-6px;left:-6px;
  background:#0288d1;color:#fff;font-size:14px;padding:2px 5px 3px;
  border:2px solid #111;border-radius:8px;font-weight:700;z-index:5;box-shadow:0 2px 0 #111;
}
.empty-slot{
  width:100px;height:118px;opacity:.5;background:transparent;border:none;position:relative;
}
.empty-slot::before{opacity:.6}
.empty-slot:hover{opacity:.85}
.drop-target{outline:4px solid #ffcf33;outline-offset:-4px;border-radius:14px}

/* Badges base */
.badges{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;z-index:6;font-weight:700;font-size:.65rem;text-shadow:0 1px 1px #000;
}
.badge{
  min-width:22px;padding:3px 5px 2px;border:2px solid #111;border-radius:10px;
  display:flex;justify-content:center;align-items:center;line-height:1;background:#fff;box-shadow:0 2px 0 #111;
}
.badge.atk{background:#ff5630;color:#fff}
.badge.hp{background:#4caf50;color:#fff}
.badge.lvl{background:#ffc400;color:#222}

/* XP bar base */
.xp-bar{
  position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
  width:70px;height:6px;background:#333a;border:2px solid #111;
  border-radius:6px;overflow:hidden;z-index:5;box-shadow:0 2px 0 #111;
}
.xp-fill{height:100%;background:linear-gradient(90deg,#ffe082,#ff9800,#ef6c00);width:0;transition:width .3s}

/* Action Zone */
.action-zone{
  position:fixed;width:160px;height:160px;background:#ffffffdd;border:4px dashed #222;
  border-radius:30px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.9rem;letter-spacing:.5px;z-index:180;
  backdrop-filter:blur(4px);box-shadow:0 6px 14px -4px #0006;
  transition:transform .25s,background .25s,opacity .25s;opacity:0;pointer-events:none;
}
.action-zone.visible{opacity:1;pointer-events:auto}
.action-zone.freeze{right:140px;bottom:155px}
.action-zone.sell{left:140px;bottom:155px}
.action-zone.drag-over{background:#ffc107;transform:scale(1.07);border-style:solid}

/* Footer base */
#mainFooterBar{
  position:fixed;bottom:0;left:0;right:0;height:100px;
  background:linear-gradient(#ffffff,#f1f1f1);border-top:4px solid #111;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 50px;z-index:190;box-shadow:0 -6px 0 #111,0 -8px 16px #0004;
}
.main-btn{
  border:4px solid #111;border-radius:24px;background:#ffb347;
  padding:18px 48px;font-size:.95rem;font-weight:700;letter-spacing:.5px;
  cursor:pointer;box-shadow:0 6px 0 #111;transition:transform .12s,box-shadow .12s;
}
.main-btn.primary{background:#ffa726}
.main-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #111}
.main-btn.hidden{display:none !important}
.main-btn.back-btn{background:#e0e0e0}

/* Battle base */
#battleScreen{flex-direction:column;align-items:center;padding-bottom:160px}
.battle-hud-bar{
  position:fixed;top:72px;left:50%;transform:translateX(-50%);
  width:100%;max-width:1040px;background:#ffffffee;border:4px solid #111;
  border-radius:20px;display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;box-shadow:0 6px 0 #111,0 6px 14px #0005;z-index:210;backdrop-filter:blur(4px);font-size:.7rem;
}
.battle-controls{display:flex;gap:12px;align-items:center}
.small-btn{
  background:#e0e0e0;border:3px solid #111;border-radius:14px;
  padding:8px 16px;font-size:.65rem;font-weight:700;cursor:pointer;
  box-shadow:0 3px 0 #111;transition:transform .1s,box-shadow .1s;
}
.small-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #111}
.speed-label select{font-size:.65rem;padding:3px 4px;border:2px solid #111;border-radius:8px;background:#fff}
.battle-status{font-weight:700;font-size:.7rem}
.battle-field{
  margin-top:140px;display:flex;gap:50px;flex-wrap:wrap;justify-content:center;
  width:100%;max-width:1040px;
}
.battle-lane{
  background:#ffffffdd;padding:18px 24px 28px;border:4px solid #111;
  border-radius:24px;box-shadow:0 6px 0 #111,0 6px 16px #0005;min-width:440px;
}
.battle-slots{
  display:flex;flex-wrap:wrap;gap:18px;min-height:140px;align-items:flex-end;justify-content:center;
  position:relative;
}
.battle-log-wrapper{
  position:fixed;left:14px;bottom:110px;width:300px;max-height:360px;
  background:#ffffffee;border:4px solid #111;border-radius:22px;
  padding:10px 14px;z-index:205;box-shadow:0 6px 0 #111,0 6px 16px #0005;
  display:flex;flex-direction:column;
}
.battle-log-wrapper h2{margin:0 0 6px;font-size:.7rem;text-transform:uppercase}
.log{
  background:#101d24;border:2px solid #111;flex:1;border-radius:12px;
  padding:6px 8px;color:#eee;font-size:.6rem;line-height:1.25;overflow-y:auto;max-height:300px;
}
.log-entry{margin-bottom:4px}
.log::-webkit-scrollbar{width:7px}
.log::-webkit-scrollbar-track{background:#0d161b;border-radius:10px}
.log::-webkit-scrollbar-thumb{background:#37464f;border-radius:10px}
.log::-webkit-scrollbar-thumb:hover{background:#455a64}

/* Responsivo base */
@media (max-width:1150px){
  #board{padding:30px 15px}
  #mainFooterBar{padding:16px 18px}
  .main-btn{padding:14px 30px;font-size:.8rem}
  .action-zone.freeze{right:40px;bottom:150px}
  .action-zone.sell{left:40px;bottom:150px}
  .battle-lane{min-width:360px}
}
@media (max-width:780px){
  .battle-lane{min-width:300px}
  #board{gap:28px}
  .lane-inner{gap:10px}
  .pet,.food,.empty-slot{width:80px;height:100px}
  .pet::before,.food::before,.empty-slot::before{width:70px;height:44px}
  .badges{font-size:.55rem}
  .main-btn{padding:12px 22px}
  .action-zone{width:130px;height:130px;font-size:.7rem}
}

/* =======================================================================
   ================== OVERRIDES (EDITÁVEL) ================================
   Edite apenas valores das variáveis abaixo.
   ======================================================================= */
:root{
  /* Estrutura / Fundo */
  --hud-height:64px;
  --footer-height:100px;
  --board-bg-offset:-150px;

  /* Lanes (ajustam altura e deslocamento vertical) */
  --lane-height:220px;
  --team-lane-top:150px;
  --shop-lane-top:225px;

  /* Pets / Bases */
  --pet-width:130px;
  --pet-height:150px;
  --pet-img-max:120px;
  --pet-base-width:216px;
  --pet-base-height:108px;

  /* Offsets (distância imagem ↔ base) */
  --pet-image-bottom-offset:40px;
  --food-image-bottom-offset:40px;

  /* Loja (gaps) */
  --team-gap:24px;          /* Entre pets do time */
  --shop-pet-gap:28px;      /* Entre pets da loja */
  --shop-food-gap:28px;     /* Entre foods da loja */
  --shop-group-gap:500px;   /* Espaço entre bloco de pets e bloco de foods */

  /* Opacidades */
  --base-opacity-team:1;
  --base-opacity-shop:0.85;
  --empty-slot-opacity-team:0.35;
  --empty-slot-opacity-shop:1;

  /* Badges */
  --badge-font-size:1rem;
  --badge-font-weight:700;
  --badge-min-width:40px;
  --badge-gap:10px;
  --badge-offset-y:6px;

  /* Barra de XP */
  --xp-bar-height:14px;
  --xp-bar-width:calc(var(--pet-base-width) - 90px);
  --xp-bar-radius:10px;
  --xp-bar-lift:50px;

  /* HUD */
  --hud-counter-font:1.05rem;
  --hud-icon-size:30px;
  --hud-box-padding:8px 18px;

  /* Título */
  --title-font-size:3rem;
  --title-font-weight:700;
  --title-letter-spacing:1px;

  /* Botões inferiores */
  --bottom-btn-font:2rem;
  --bottom-btn-pad-y:35px;
  --bottom-btn-pad-x:62px;
  --bottom-btn-radius:10px;

  /* Flip pets (-1 direita / 1 esquerda) */
  --pet-flip:-1;

  /* Outline */
  --outline-enabled:1;
  --outline-thickness:1px;

  /* Batalha (zoom) */
  --battle-scale:0.9;

  /* Escala responsiva global */
  --responsive-scale:1;
}

/* Board fullscreen + fundo separado */
.screen{
  padding-top:var(--hud-height);
  padding-bottom:var(--footer-height);
  min-height:100vh;display:flex;justify-content:stretch;align-items:stretch;
}
#board{
  flex:1;position:relative;min-height:calc(100vh - var(--hud-height) - var(--footer-height));
  width:100%!important;max-width:100%!important;margin:0;padding:0!important;
  border:none!important;border-radius:0!important;box-shadow:none!important;background:none!important;
  display:flex;flex-direction:column;gap:0;overflow:hidden;
}
#board::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/fundo.png") center var(--board-bg-offset) / cover no-repeat;
  z-index:0;
}

/* Lanes finais */
#board .lane{
  position:relative;z-index:1;min-height:var(--lane-height);
  display:flex;align-items:flex-start;justify-content:center;
  background:transparent!important;margin:0;padding:0;border:none;box-shadow:none;
}
#board .team-lane{padding-top:var(--team-lane-top)}
#board .shop-lane{padding-top:var(--shop-lane-top);padding-bottom:30px}
#team.lane-inner{gap:var(--team-gap)!important}
#shopPets.lane-inner{gap:var(--shop-pet-gap)!important}
#shopFoods.lane-inner{gap:var(--shop-food-gap)!important}

/* Loja em fileira única com gap entre grupos */
#board .shop-lane{
  flex-direction:row!important;align-items:flex-end!important;
  justify-content:center!important;gap:var(--shop-group-gap)!important;
}
#shopPets.lane-inner,#shopFoods.lane-inner{
  flex-wrap:nowrap!important;margin:0!important;padding:0!important;width:auto!important;order:0!important;
}

/* HUD transparente + escalas */
#hudBar{
  background:none!important;border-bottom:0!important;box-shadow:none!important;
  backdrop-filter:none!important;padding:8px 24px!important;
}
.hud-box{
  font-size:var(--hud-counter-font)!important;
  padding:var(--hud-box-padding)!important;gap:10px!important;border-radius:16px!important;
}
.hud-ico{width:var(--hud-icon-size)!important;height:var(--hud-icon-size)!important}
.hud-title h1{
  font-size:var(--title-font-size)!important;font-weight:var(--title-font-weight)!important;
  letter-spacing:var(--title-letter-spacing)!important;
  text-shadow:0 2px 0 #ffffffaa,0 3px 4px #00000050;
}

/* Footer transparente + botões */
#mainFooterBar{
  background:none!important;border-top:0!important;box-shadow:none!important;backdrop-filter:none!important;
}
.main-btn{
  font-size:var(--bottom-btn-font)!important;
  padding:var(--bottom-btn-pad-y) var(--bottom-btn-pad-x)!important;
  border-radius:var(--bottom-btn-radius)!important;letter-spacing:1px;
  box-shadow:0 6px 0 #111,0 8px 14px #0004;
}
.main-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #111}

/* Slots dimensionados por variáveis */
.pet,.food,.empty-slot{
  width:calc(var(--pet-width)*var(--responsive-scale))!important;
  height:calc(var(--pet-height)*var(--responsive-scale))!important;
  position:relative;padding:0;background:transparent;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  cursor:grab;user-select:none;transition:filter .15s;transform:none!important;
}

/* Base fixa */
.pet::before,.food::before,.empty-slot::before{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:calc(var(--pet-base-width)*var(--responsive-scale))!important;
  height:calc(var(--pet-base-height)*var(--responsive-scale))!important;
  background:url("../assets/base.png") center/contain no-repeat;
  image-rendering:pixelated;z-index:0;pointer-events:none;
  transition:filter .15s,opacity .15s;opacity:var(--base-opacity-shop);
}
#team .pet::before,#team .empty-slot::before{opacity:var(--base-opacity-team)!important}
#team .empty-slot::before{opacity:var(--empty-slot-opacity-team)!important}
#shopPets .empty-slot::before,#shopFoods .empty-slot::before{opacity:var(--empty-slot-opacity-shop)}
.empty-slot:hover::before{opacity:.85}

/* Sprites */
.pet img,.food img{
  position:relative;z-index:2;
  max-width:calc(var(--pet-img-max)*var(--responsive-scale))!important;
  max-height:calc(var(--pet-img-max)*var(--responsive-scale))!important;
  image-rendering:pixelated;pointer-events:none;
  margin-bottom:var(--pet-image-bottom-offset);
  transition:transform .15s,filter .15s;
  transform:scaleX(var(--pet-flip));filter:drop-shadow(0 3px 2px #0006);
}
.food img{
  margin-bottom:var(--food-image-bottom-offset);transform:scaleX(1);filter:drop-shadow(0 3px 2px #0006);
}

/* Outline paramétrica (apenas pets) */
.pet img{
  filter:
    drop-shadow(0 3px 2px #0006)
    drop-shadow(calc(var(--outline-enabled)*var(--outline-thickness)) 0 0 #fff)
    drop-shadow(calc(var(--outline-enabled)*-1*var(--outline-thickness)) 0 0 #fff)
    drop-shadow(0 calc(var(--outline-enabled)*var(--outline-thickness)) 0 #fff)
    drop-shadow(0 calc(var(--outline-enabled)*-1*var(--outline-thickness)) 0 #fff)
    drop-shadow(calc(var(--outline-enabled)*var(--outline-thickness)) calc(var(--outline-enabled)*var(--outline-thickness)) 0 #fff)
    drop-shadow(calc(var(--outline-enabled)*-1*var(--outline-thickness)) calc(var(--outline-enabled)*var(--outline-thickness)) 0 #fff)
    drop-shadow(calc(var(--outline-enabled)*var(--outline-thickness)) calc(var(--outline-enabled)*-1*var(--outline-thickness)) 0 #fff)
    drop-shadow(calc(var(--outline-enabled)*-1*var(--outline-thickness)) calc(var(--outline-enabled)*-1*var(--outline-thickness)) 0 #fff)
    drop-shadow(0 3px 2px #0006);
}

.pet:hover img{transform:scaleX(var(--pet-flip)) translateY(-8px) scale(1.07)}
.food:hover img{transform:translateY(-8px) scale(1.07)}
.pet:hover::before,.food:hover::before{filter:brightness(1.05)}

/* Drag somente imagem */
.pet.dragging img{transform:scaleX(var(--pet-flip)) scale(.9);opacity:.85}
.food.dragging img{transform:scale(.9);opacity:.85}
.pet.dragging,.food.dragging{transform:none!important}

/* Badges custom */
.badges{
  left:50%;transform:translateX(-50%);
  bottom:var(--badge-offset-y);
  display:flex;gap:var(--badge-gap);
  font-size:var(--badge-font-size)!important;
  font-weight:var(--badge-font-weight);
  text-shadow:0 1px 1px #000;z-index:3;
}
.badge{
  min-width:var(--badge-min-width)!important;
  padding:6px 8px 4px!important;border:2px solid #111;border-radius:14px!important;
  line-height:1;display:flex;justify-content:center;align-items:center;box-shadow:0 2px 0 #111;
}

/* XP bar custom */
.xp-bar{
  bottom:calc(var(--pet-base-height) + var(--xp-bar-lift));
  height:var(--xp-bar-height)!important;
  width:var(--xp-bar-width)!important;
  background:#333a;border:2px solid #111;border-radius:var(--xp-bar-radius);
  box-shadow:0 2px 0 #111;z-index:1;
}

/* Batalha: inimigo olha esquerda */
#battleEnemyTeam .pet img{transform:scaleX(1)}
#battleEnemyTeam .pet:hover img{transform:scaleX(1) translateY(-8px) scale(1.07)}

/* Zoom batalha */
#battleScreen .pet,#battleScreen .food,#battleScreen .empty-slot{
  width:calc(var(--pet-width)*var(--battle-scale)*var(--responsive-scale))!important;
  height:calc(var(--pet-height)*var(--battle-scale)*var(--responsive-scale))!important;
}
#battleScreen .pet::before,#battleScreen .food::before,#battleScreen .empty-slot::before{
  width:calc(var(--pet-base-width)*var(--battle-scale)*var(--responsive-scale))!important;
  height:calc(var(--pet-base-height)*var(--battle-scale)*var(--responsive-scale))!important;
}
#battleScreen .xp-bar{
  bottom:calc(var(--pet-base-height)*var(--battle-scale) + var(--xp-bar-lift));
  width:calc(var(--xp-bar-width)*var(--battle-scale))!important;
}

/* Responsividade (escala multiplicadora) */
@media (max-width:1200px){
  :root{--responsive-scale:.92}
}
@media (max-width:1000px){
  :root{
    --responsive-scale:.85;
    --bottom-btn-font:1.6rem;
    --bottom-btn-pad-y:28px;
  }
}
@media (max-width:880px){
  :root{
    --responsive-scale:.78;
    --team-gap:16px;
    --shop-pet-gap:18px;
    --shop-food-gap:18px;
    --bottom-btn-font:1.4rem;
    --bottom-btn-pad-y:22px;
    --bottom-btn-pad-x:42px;
  }
}

/* Telas muito altas ajustam offset */
@media (min-height:900px){
  :root{--board-bg-offset:-150px}
}

/* (Opcional desativar outline)
.pet img{filter:drop-shadow(0 3px 2px #0006)!important}
*/

/* ================== FIM DOS OVERRIDES (EDITÁVEL) ================== */