/* ============================================================
   BATTLE.CSS — extracted from index.html
   ============================================================ */

/* ============================================================
   ARENA TOKENS  (battle-scene-only palette, layered on top of
   the global --Y/--R/--G/--BK identity used by the lobby)
   ============================================================ */
:root{
  --arena-deep:#1a0f2e; --arena-mid:#2d1b4e; --arena-glow:#4a2d7a;
  --spotlight:#fff4cc; --rope:#c9a06a; --rope-dark:#8a6a3f;
}


/* ============================================================
   LIVE OPPONENT VOICE — status pill + mute toggle (screen-round)
   ============================================================ */
.voice-status-pill{
  position:relative; z-index:2; padding:3px 12px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  background:rgba(0,0,0,.35); color:#fff;
  transition:opacity .25s;
}
.voice-status-pill.vs-connecting{ color:#ffe083; }
.voice-status-pill.vs-connected{ color:#8bffb0; }
.voice-status-pill.vs-failed{ color:#ff9d9d; }
.voice-mute-btn{
  position:relative; z-index:2; display:flex; align-items:center;
  justify-content:center; gap:6px; padding:4px 12px; border-radius:16px;
  border:none; background:rgba(0,0,0,.35); color:#fff; font-size:14px;
  cursor:pointer;
}
.voice-mute-btn:active{ transform:scale(.94); }
.voice-mic-btn.is-off{ background:rgba(255,80,80,.35); }


/* ============================================================
   DOG CSS  (shared rig used by dog-select, battle stage, and
   the victory/defeat stage — bigger + more alive than before)
   ============================================================ */
.dog-stage{position:relative;width:230px;height:250px;margin:0 auto;}
.bark-aura{position:absolute;top:52%;left:50%;width:190px;height:190px;border-radius:50%;transform:translate(-50%,-50%) scale(1);opacity:0;transition:opacity .05s;z-index:0;}
.dog-char{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:200px;height:235px;z-index:1;transition:transform .05s ease-out;animation:dog-idle-breathe 2.6s ease-in-out infinite;}
@keyframes dog-idle-breathe{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-3px) scale(1.015)}}
.dog-tail{position:absolute;bottom:55px;right:-2px;width:20px;height:58px;border-radius:40%;transform:rotate(35deg);transform-origin:bottom center;z-index:0;animation:dog-tail-wag 0.55s ease-in-out infinite;}
@keyframes dog-tail-wag{0%,100%{transform:rotate(25deg)}50%{transform:rotate(48deg)}}
.dog-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:148px;height:92px;border-radius:50% 50% 45% 45%;z-index:1;overflow:hidden;}
.dog-spot{position:absolute;background:#fff;border-radius:50%;}
.dog-spot-1{width:38px;height:32px;top:8px;left:12px;}
.dog-spot-2{width:28px;height:26px;bottom:8px;right:18px;}
.dog-head{position:absolute;top:0;left:50%;transform:translateX(-50%);width:138px;height:128px;border-radius:50%;z-index:2;}
.dog-ear{position:absolute;top:2px;width:46px;height:72px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;z-index:1;transition:transform .15s;animation:dog-ear-twitch 3.4s ease-in-out infinite;}
.dog-ear-left{left:0;transform:rotate(-25deg);transform-origin:top center;--ear-rot:-25deg;}
.dog-ear-right{right:0;transform:rotate(25deg);transform-origin:top center;animation-delay:.2s;--ear-rot:25deg;}
@keyframes dog-ear-twitch{0%,85%,100%{transform:rotate(var(--ear-rot,-25deg))}90%{transform:rotate(calc(var(--ear-rot, -25deg) - 10deg))}}
.dog-eye{position:absolute;width:15px;height:15px;background:#2b2b2b;border-radius:50%;top:46px;z-index:3;animation:dog-blink 4.2s ease-in-out infinite;}
.dog-eye::after{content:'';position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;top:2px;left:2px;}
@keyframes dog-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.dog-eye-right{animation-delay:.05s;}
.dog-eye-left{left:30px;}.dog-eye-right{right:30px;}
.dog-blush{position:absolute;width:17px;height:9px;background:#ff9e9e;border-radius:50%;opacity:.65;top:66px;z-index:2;}
.dog-blush-left{left:16px;}.dog-blush-right{right:16px;}
.dog-snout{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:58px;height:48px;border-radius:45% 45% 50% 50%;z-index:3;overflow:visible;}
.dog-mouth{position:absolute;bottom:1px;left:50%;width:30px;height:26px;background:#5c2a2a;border-radius:0 0 15px 15px;transform:translateX(-50%) scaleY(.15);transform-origin:bottom center;transition:transform .04s;z-index:3;}
.dog-tongue{position:absolute;bottom:0;left:50%;width:13px;height:16px;background:#ff7d7d;border-radius:0 0 7px 7px;transform:translateX(-50%);z-index:4;}
.dog-char.celebrating{animation:celebrate .42s ease-in-out infinite;}
@keyframes celebrate{0%,100%{transform:translateX(-50%) translateY(0) rotate(0) scale(1)}50%{transform:translateX(-50%) translateY(-26px) rotate(-6deg) scale(1.06)}}
.dog-char.celebrating .dog-tail{animation:dog-tail-wag .18s ease-in-out infinite;}
.dog-char.celebrating .dog-ear-left{transform:rotate(-50deg)!important;animation:none;}
.dog-char.celebrating .dog-ear-right{transform:rotate(50deg)!important;animation:none;}
.dog-char.sulking{animation:sulk 2s ease-in-out infinite;}
@keyframes sulk{0%,100%{transform:translateX(-50%) translateY(0) rotate(0)}50%{transform:translateX(-50%) translateY(6px) rotate(3deg)}}
.dog-char.sulking .dog-ear-left{transform:rotate(-65deg)!important;animation:none;}
.dog-char.sulking .dog-ear-right{transform:rotate(65deg)!important;animation:none;}
.dog-char.sulking .dog-tail{animation:none;transform:rotate(70deg);}
/* Bark recoil + jump pose, toggled by JS on loud hits */
.dog-char.bark-recoil{animation:dog-recoil .18s ease-out;}
@keyframes dog-recoil{0%{transform:translateX(-50%) translateY(0) scale(1)}30%{transform:translateX(-50%) translateY(-14px) scale(1.08) rotate(-3deg)}100%{transform:translateX(-50%) translateY(0) scale(1)}}

/* Dog preview grid (dog-select screen — untouched layout, just inherits the rig above) */
.dog-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:330px;}
.dog-option{background:rgba(255,255,255,.04);border:3px solid rgba(255,255,255,.08);border-radius:16px;padding:10px 8px 12px;cursor:pointer;transition:transform .1s,border-color .1s,background .1s;}
.dog-option:hover{border-color:rgba(255,230,0,.35);}
.dog-option.selected{border-color:var(--Y);background:rgba(255,230,0,.08);transform:scale(1.05);box-shadow:0 0 18px rgba(255,230,0,.18);}
.dog-option .dog-stage{width:100%;height:110px;overflow:hidden;position:relative;pointer-events:none;}
.dog-option .dog-stage>*{transform:scale(.55);transform-origin:bottom center;animation:none!important;}
.dog-option .dname{font-family:'Luckiest Guy',sans-serif;font-size:.92rem;color:var(--W);margin-top:4px;letter-spacing:1px;}
.dog-option.selected .dname{color:var(--Y);}


/* ============================================================
   PROGRESS DOTS
   ============================================================ */
.pdots{display:flex;gap:10px;justify-content:center;}
.dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.25);transition:all .2s;}
.dot.active{background:var(--Y);border-color:var(--Y);box-shadow:0 0 10px rgba(255,230,0,.5);}
.dot.win{background:var(--G);border-color:var(--G);box-shadow:0 0 10px rgba(0,255,135,.4);}
.dot.lose{background:var(--R);border-color:var(--R);box-shadow:0 0 10px rgba(255,45,45,.4);}


/* ============================================================
   BATTLE ARENA — background, stadium frame
   ============================================================ */
#screen-round, #screen-result, #screen-final{
  /* overflow-x stays hidden (the arena-rays/crowd background layers use
     negative insets that would otherwise cause horizontal scroll), but
     overflow-y needs to be scrollable: on shorter/wide desktop windows
     this screen's content (arena art + peak-value boxes at the bottom)
     can be taller than the viewport, and overflow:hidden was clipping
     the bottom off entirely with no way to reach it. */
  position:relative;overflow-x:hidden;overflow-y:auto;
  scrollbar-width:none;
  background:#0a0a1a;
}
#screen-round::-webkit-scrollbar, #screen-result::-webkit-scrollbar, #screen-final::-webkit-scrollbar{
  display:none;
}
.arena-rays{position:absolute;top:-10%;right:-10%;bottom:auto;left:-10%;height:75%;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 250deg at 20% -10%, var(--spotlight) 0deg 1.2deg, transparent 1.2deg 9deg);
  mix-blend-mode:screen;
  animation:arena-ray-sweep 9s ease-in-out infinite alternate;
}
@keyframes arena-ray-sweep{0%{transform:rotate(-4deg) translateX(-2%)}100%{transform:rotate(4deg) translateX(2%)}}
.arena-crowd{position:absolute;top:0;left:0;right:0;height:46px;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 8px 30px, #000 5px, transparent 6px);
  background-size:18px 36px; background-position:0 6px;
  background-color:rgba(0,0,0,.25);
}
.arena-fog{position:absolute;left:-20%;right:-20%;height:120px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  filter:blur(6px); opacity:.5;
}
.arena-fog.f1{bottom:18%; animation:arena-fog-drift 14s linear infinite;}
.arena-fog.f2{bottom:6%; opacity:.35; animation:arena-fog-drift 21s linear infinite reverse;}
@keyframes arena-fog-drift{from{transform:translateX(-15%)}to{transform:translateX(15%)}}
.arena-floaters{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden;}
.arena-floaters span{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--Y);opacity:.55;
  animation:arena-float 7s linear infinite;}
.arena-floaters span:nth-child(1){left:8%;animation-delay:0s;background:var(--Y);}
.arena-floaters span:nth-child(2){left:22%;animation-delay:1.4s;background:var(--R);width:3px;height:3px;}
.arena-floaters span:nth-child(3){left:38%;animation-delay:2.8s;background:var(--G);}
.arena-floaters span:nth-child(4){left:55%;animation-delay:.7s;background:var(--Y);width:5px;height:5px;}
.arena-floaters span:nth-child(5){left:70%;animation-delay:3.6s;background:var(--R);width:3px;height:3px;}
.arena-floaters span:nth-child(6){left:85%;animation-delay:2s;background:var(--G);}
.arena-floaters span:nth-child(7){left:93%;animation-delay:4.4s;background:var(--Y);width:3px;height:3px;}
@keyframes arena-float{0%{transform:translateY(0) translateX(0);opacity:0;}10%{opacity:.6;}50%{transform:translateY(-220px) translateX(12px);}100%{transform:translateY(-440px) translateX(-10px);opacity:0;}}
.arena-floor-glow{position:absolute;left:50%;bottom:6%;width:340px;height:90px;transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(255,230,0,.16), transparent 70%);z-index:0;pointer-events:none;}


/* ============================================================
   BATTLE TOP BAR — avatars + round timer
   ============================================================ */
.battle-topbar{position:relative;z-index:2;width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px;}
.battle-fighter{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0;}
.battle-fighter-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  border:3px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);transition:box-shadow .2s,border-color .2s;}
.battle-fighter.lead .battle-fighter-avatar{border-color:var(--Y);box-shadow:0 0 16px rgba(255,230,0,.55);}
.battle-fighter-name{font-family:'Luckiest Guy',sans-serif;font-size:.68rem;letter-spacing:1px;color:rgba(255,255,255,.7);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.battle-fighter.you .battle-fighter-name{color:var(--G);}
.battle-fighter.rival .battle-fighter-name{color:var(--R);}
.battle-clock{font-family:'Luckiest Guy',sans-serif;font-size:1.5rem;color:var(--Y);text-shadow:2px 2px 0 #000;
  background:rgba(0,0,0,.35);border:2px solid rgba(255,230,0,.3);border-radius:10px;padding:2px 12px;min-width:54px;text-align:center;}
.battle-clock.urgent{color:var(--R);border-color:rgba(255,45,45,.5);animation:gopulse .3s ease-in-out infinite alternate;}


/* ============================================================
   ROUND / BATTLE SCREEN
   ============================================================ */
.tally{font-family:'Luckiest Guy',sans-serif;color:rgba(255,255,255,.55);font-size:.95rem;letter-spacing:2px;position:relative;z-index:2;}
.countdown-display{font-family:'Luckiest Guy',sans-serif;font-size:5rem;color:var(--Y);text-shadow:4px 4px 0 var(--R);height:80px;line-height:80px;position:relative;z-index:2;
  animation:countdown-punch .5s cubic-bezier(.2,1.4,.4,1) both;
  will-change:transform,opacity,filter;
}
@keyframes countdown-punch{
  0%{transform:scale(.3);opacity:0;filter:drop-shadow(0 0 0 rgba(255,230,0,0));}
  35%{transform:scale(1.25);opacity:1;filter:drop-shadow(0 0 22px rgba(255,230,0,.9));}
  60%{transform:scale(.95);filter:drop-shadow(0 0 10px rgba(255,230,0,.6));}
  100%{transform:scale(1);opacity:1;filter:drop-shadow(0 0 6px rgba(255,230,0,.35));}
}
.countdown-display.bark-mode{
  color:var(--R);text-shadow:4px 4px 0 #700;
  animation:barkanim .12s ease-in-out infinite;
  font-size:3.2rem; /* smaller to fit the seconds countdown */
}
@keyframes barkanim{0%,100%{transform:rotate(-2deg) scale(1.05)}50%{transform:rotate(2deg) scale(1.12)}}
.instr{font-family:'Luckiest Guy',sans-serif;font-size:1.15rem;color:rgba(255,255,255,.7);min-height:28px;letter-spacing:1px;position:relative;z-index:2;}
.instr.go{color:var(--R);font-size:1.5rem;animation:gopulse .25s ease-in-out infinite alternate;}
@keyframes gopulse{from{opacity:.6}to{opacity:1}}

/* ---- LIVE TUG-OF-WAR — styled as a taut rope with a bone center pin ---- */
.tug-wrap{width:100%;max-width:440px;padding:0 4px;position:relative;z-index:2;}
.tug-labels{display:flex;justify-content:space-between;margin-bottom:5px;}
.tug-label{font-family:'Luckiest Guy',sans-serif;font-size:.84rem;letter-spacing:1px;color:rgba(255,255,255,.65);}
.tug-bar-outer{
  width:100%;height:42px;
  background:repeating-linear-gradient(115deg, var(--rope) 0 8px, var(--rope-dark) 8px 16px);
  border-radius:21px;overflow:hidden;
  border:3px solid #5c4424;
  position:relative;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.5), 0 4px 0 rgba(0,0,0,.3);
}
.tug-bar-me{
  position:absolute;left:0;top:0;height:100%;
  background:linear-gradient(90deg,var(--G),#00cc6a);
  transition:width .28s cubic-bezier(.22,.8,.32,1),box-shadow .2s,filter .2s;
  border-radius:21px 0 0 21px;
  box-shadow:0 0 18px 2px rgba(0,255,135,.55);
  overflow:hidden;will-change:width;
}
.tug-bar-me::after, .tug-bar-opp::after{
  content:'';position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  background-size:200% 100%;
  animation:tug-shimmer 1.4s linear infinite;
}
@keyframes tug-shimmer{from{background-position:200% 0}to{background-position:-50% 0}}
.tug-bar-opp{
  position:absolute;right:0;top:0;height:100%;
  background:linear-gradient(270deg,var(--R),#cc2200);
  transition:width .28s cubic-bezier(.22,.8,.32,1),box-shadow .2s,filter .2s;
  border-radius:0 21px 21px 0;
  box-shadow:0 0 18px 2px rgba(255,45,45,.55);
  overflow:hidden;will-change:width;
}
/* Lead-change flash: brief glow pulse for whichever side just took the lead (green-gain / red-gain feel) */
.tug-bar-me.lead-flash{animation:tug-flash-green .5s ease-out;}
.tug-bar-opp.lead-flash{animation:tug-flash-red .5s ease-out;}
@keyframes tug-flash-green{
  0%{filter:brightness(1);box-shadow:0 0 18px 2px rgba(0,255,135,.55);}
  35%{filter:brightness(1.6);box-shadow:0 0 34px 10px rgba(0,255,135,.95);}
  100%{filter:brightness(1);box-shadow:0 0 18px 2px rgba(0,255,135,.55);}
}
@keyframes tug-flash-red{
  0%{filter:brightness(1);box-shadow:0 0 18px 2px rgba(255,45,45,.55);}
  35%{filter:brightness(1.6);box-shadow:0 0 34px 10px rgba(255,45,45,.95);}
  100%{filter:brightness(1);box-shadow:0 0 18px 2px rgba(255,45,45,.55);}
}
.tug-center-line{
  position:absolute;left:50%;top:50%;width:26px;height:26px;
  transform:translate(-50%,-50%);z-index:2;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #e8e0c8 55%, #b8ac82 100%);
  border:2px solid #5c4424;box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.tug-center-line::before{content:'\1F9B4';position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;filter:grayscale(1) brightness(1.4);}
.tug-pcts{display:flex;justify-content:space-between;margin-top:5px;}
.tug-pct{font-family:'Luckiest Guy',sans-serif;font-size:1.2rem;letter-spacing:1px;}
.tug-pct.me{color:var(--G);text-shadow:0 0 10px rgba(0,255,135,.5);}
.tug-pct.opp{color:var(--R);text-shadow:0 0 10px rgba(255,45,45,.5);}

/* ---- VS DIVIDER between the two dogs ---- */
.battle-vs-divider{font-family:'Luckiest Guy',sans-serif;font-size:1.3rem;color:var(--Y);text-shadow:2px 2px 0 var(--R);
  position:relative;z-index:2;letter-spacing:1px;}

/* ---- CAMERA EFFECTS: shake / zoom / flash ---- */
@keyframes screen-shake{
  0%,100%{transform:translate(0,0) scale(1);}
  10%{transform:translate(-7px,4px) scale(1.005);}
  25%{transform:translate(6px,-5px) scale(1.005);}
  40%{transform:translate(-6px,-3px) scale(1.01);}
  55%{transform:translate(7px,4px) scale(1.005);}
  70%{transform:translate(-4px,5px) scale(1.005);}
  85%{transform:translate(4px,-4px) scale(1.0);}
}
#app.shake{animation:screen-shake .32s ease-in-out;}
@keyframes camera-zoom-pulse{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
#app.camera-zoom{animation:camera-zoom-pulse .5s ease-out;}
.screen-flash{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none;z-index:500;}
.screen-flash.fire{animation:flash-fire .28s ease-out;}
@keyframes flash-fire{0%{opacity:.85}100%{opacity:0}}

/* ---- COMIC BARK-TEXT BURST LAYER ---- */
#bark-text-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;pointer-events:none;overflow:hidden;}
.bark-burst{
  position:absolute;font-family:'Luckiest Guy',sans-serif;letter-spacing:1px;
  -webkit-text-stroke:3px #000; paint-order:stroke fill;
  transform:translate(-50%,-50%) scale(.4) rotate(var(--burst-rot,-8deg));
  opacity:0; white-space:nowrap;
  animation:bark-burst-pop .85s cubic-bezier(.18,.9,.32,1.2) forwards;
}
@keyframes bark-burst-pop{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(var(--burst-rot,-8deg));opacity:0;}
  18%{transform:translate(-50%,-50%) scale(1.15) rotate(var(--burst-rot,-8deg));opacity:1;}
  35%{transform:translate(-50%,-50%) scale(1) rotate(var(--burst-rot,-8deg));opacity:1;}
  100%{transform:translate(-50%,-58%) scale(.92) rotate(var(--burst-rot,-8deg));opacity:0;}
}
.bark-burst.you{color:var(--G);}
.bark-burst.rival{color:var(--R);}

/* ---- shockwave ring on impact ---- */
.shock-ring{
  position:absolute;border-radius:50%;border:5px solid var(--Y);
  transform:translate(-50%,-50%) scale(0);opacity:.9;
  animation:shock-ring-out .55s ease-out forwards;
}
@keyframes shock-ring-out{0%{transform:translate(-50%,-50%) scale(0);opacity:.9;}100%{transform:translate(-50%,-50%) scale(1);opacity:0;}}

/* ---- LIVE LEADER INDICATOR ---- */
.live-leader{
  font-family:'Luckiest Guy',sans-serif;
  font-size:1.05rem;letter-spacing:1px;
  min-height:26px;padding:4px 14px;border-radius:20px;
  transition:all .2s;position:relative;z-index:2;
}
.live-leader.winning{color:var(--G);background:rgba(0,255,135,.12);border:1px solid rgba(0,255,135,.3);}
.live-leader.losing{color:var(--R);background:rgba(255,45,45,.12);border:1px solid rgba(255,45,45,.3);}
.live-leader.tied{color:var(--Y);background:rgba(255,230,0,.1);border:1px solid rgba(255,230,0,.25);}

/* ---- PEAK / POWER / MOMENTUM READOUT STRIP ---- */
.peak-row{display:flex;gap:18px;justify-content:center;position:relative;z-index:2;flex-wrap:wrap;}
.peak-box{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:4px 14px;}
.peak-val{font-family:'Luckiest Guy',sans-serif;font-size:2.2rem;color:var(--W);transition:transform .1s;}
.peak-val.me-peak{color:var(--G);text-shadow:0 0 18px rgba(0,255,135,.6);}
.peak-val.opp-peak{color:var(--R);text-shadow:0 0 18px rgba(255,45,45,.6);}
.peak-lbl{font-family:'Luckiest Guy',sans-serif;font-size:.62rem;color:rgba(255,255,255,.45);letter-spacing:1px;}
.peak-box.combo{border-color:rgba(255,230,0,.3);}
.peak-val.combo-val{color:var(--Y);text-shadow:0 0 18px rgba(255,230,0,.6);font-size:1.9rem;}

/* ---- volume / HYPE meter ---- */
.vol-meter{
  width:60px;height:180px;background:rgba(255,255,255,.05);border-radius:12px;
  position:relative;overflow:hidden;border:2.5px solid rgba(255,255,255,.12);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.4);z-index:2;
}
.vol-fill{
  position:absolute;bottom:0;left:0;width:100%;height:0%;background:var(--G);
  transition:height .04s linear,background .08s,box-shadow .08s;
}
.vol-lbl{font-family:'Luckiest Guy',sans-serif;font-size:.62rem;color:rgba(255,255,255,.35);letter-spacing:1px;margin-top:4px;}

/* ---- scores ---- */
.score-big{font-family:'Luckiest Guy',sans-serif;font-size:4rem;color:var(--W);text-shadow:3px 3px 0 rgba(0,0,0,.4);line-height:1;}
.sbox{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 20px;min-width:95px;}
.sbox.hi{border-color:var(--Y);box-shadow:0 0 14px rgba(255,230,0,.12);}
.vs-row{display:flex;gap:18px;justify-content:center;align-items:center;position:relative;z-index:2;}
.vs-col{display:flex;flex-direction:column;align-items:center;gap:4px;}
.vs-div{font-family:'Luckiest Guy',sans-serif;color:var(--Y);font-size:1.5rem;text-shadow:2px 2px 0 var(--R);}

/* ---- RESULT SCREEN: dramatic badge + verdict ---- */
.result-badge{
  width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;margin:0 auto 2px;position:relative;z-index:2;
  border:4px solid #000;animation:badge-pop .45s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes badge-pop{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}
.result-badge.win{background:radial-gradient(circle,#00FF87,#00a85d);box-shadow:0 0 30px rgba(0,255,135,.6);}
.result-badge.lose{background:radial-gradient(circle,#555,#222);box-shadow:0 0 20px rgba(0,0,0,.6);}
.result-badge.tie{background:radial-gradient(circle,#FFE600,#c9a700);box-shadow:0 0 30px rgba(255,230,0,.6);}
.verdict{font-family:'Luckiest Guy',sans-serif;font-size:clamp(1.4rem,6.5vw,2rem);letter-spacing:1px;animation:verdict-pop .35s cubic-bezier(.175,.885,.32,1.275) both;position:relative;z-index:2;}
@keyframes verdict-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.verdict.win{color:var(--G);text-shadow:3px 3px 0 #005c38,0 0 22px rgba(0,255,135,.4);}
.verdict.lose{color:var(--R);text-shadow:3px 3px 0 #700,0 0 22px rgba(255,45,45,.3);}
.verdict.tie{color:var(--Y);text-shadow:3px 3px 0 #886000,0 0 22px rgba(255,230,0,.35);}
.meme-line{font-size:.92rem;color:rgba(255,255,255,.5);font-weight:800;max-width:270px;line-height:1.4;position:relative;z-index:2;}

/* ---- CHAMPIONSHIP / FINAL SCREEN ---- */
.champion-banner{
  position:relative;z-index:2;width:90%;max-width:340px;
  background:linear-gradient(135deg, rgba(255,230,0,.18), rgba(255,230,0,.04));
  border:3px solid var(--Y);border-radius:14px;padding:10px 18px;
  font-family:'Luckiest Guy',sans-serif;color:var(--Y);font-size:.78rem;letter-spacing:3px;
  text-align:center;box-shadow:0 0 24px rgba(255,230,0,.25);
}
.champion-banner.lose-banner{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.45);background:rgba(255,255,255,.03);box-shadow:none;}
.final-win{font-family:'Luckiest Guy',sans-serif;font-size:clamp(3rem,14vw,5.5rem);color:var(--Y);text-shadow:5px 5px 0 var(--R),10px 10px 0 rgba(255,45,45,.2);animation:final-bounce .5s ease-in-out infinite;letter-spacing:2px;position:relative;z-index:2;}
@keyframes final-bounce{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.06) rotate(1deg)}}
.final-lose{font-family:'Luckiest Guy',sans-serif;font-size:clamp(2.6rem,11vw,4.5rem);color:rgba(255,255,255,.18);letter-spacing:2px;position:relative;z-index:2;}
.final-sub{font-family:'Luckiest Guy',sans-serif;font-size:1.1rem;color:var(--W);letter-spacing:1px;position:relative;z-index:2;}
.final-score{font-family:'Luckiest Guy',sans-serif;font-size:.85rem;color:rgba(255,255,255,.32);letter-spacing:2px;position:relative;z-index:2;}

.final-stage-ring{
  position:relative;display:flex;align-items:center;justify-content:center;
  margin:8px auto 4px;z-index:2;width:220px;height:220px;
}
.final-stage-ring::before{
  content:'';position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,0,.28),transparent 70%);
  animation:final-ring-pulse 1.8s ease-in-out infinite;
}
@keyframes final-ring-pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}
#final-title.final-lose ~ .final-stage-ring::before{
  background:radial-gradient(circle,rgba(120,140,255,.14),transparent 70%);
  animation:final-ring-pulse-lose 2.6s ease-in-out infinite;
}
@keyframes final-ring-pulse-lose{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:.75}}
.final-sprite-img{
  position:relative;z-index:2;width:200px;height:200px;object-fit:contain;
  filter:
    drop-shadow(0 0 26px rgba(255,230,0,.55))
    drop-shadow(0 10px 24px rgba(0,0,0,.7))
    brightness(1.08) contrast(1.05);
  animation:final-sprite-bob 2.2s ease-in-out infinite;
}
@keyframes final-sprite-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}
#final-title.final-lose ~ .final-stage-ring .final-sprite-img{
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.75))
    brightness(.82) saturate(.75) contrast(.97);
  animation:final-sprite-sulk 2.6s ease-in-out infinite;
}
@keyframes final-sprite-sulk{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(4px) rotate(-2deg)}}

/* ---- points / XP / rank badges ---- */
.pts-badge{
  font-family:'Luckiest Guy',sans-serif;
  font-size:1.4rem;letter-spacing:1px;position:relative;z-index:2;
  padding:8px 24px;border-radius:30px;
  animation:pts-pop .4s cubic-bezier(.175,.885,.32,1.275) both;
}
.pts-badge.earn{background:rgba(0,255,135,.15);color:var(--G);border:2px solid rgba(0,255,135,.4);}
.pts-badge.small{background:rgba(255,230,0,.12);color:var(--Y);border:2px solid rgba(255,230,0,.3);}
@keyframes pts-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.final-buttons{position:relative;z-index:2;}

/* ============================================================
   RESULT / FINAL SCREEN — FIT-TO-VIEWPORT
   Scales title, sprite ring and spacing down on short viewports so
   the score, rewards, and action buttons never get pushed off-screen.
   Falls back to a scrollable screen only on extremely small heights.
   ============================================================ */
#screen-result, #screen-final{
  min-height:100vh;min-height:100dvh;
  max-height:100vh;max-height:100dvh; /* dvh LAST so it wins where supported (iOS toolbar) */
  overflow-y:auto;
  padding-top:max(20px, env(safe-area-inset-top));
  padding-bottom:max(20px, env(safe-area-inset-bottom));
}
@media (max-height:760px){
  #screen-result, #screen-final{padding:16px 16px;gap:8px;}
  .final-win{font-size:clamp(2.1rem,9vw,3.4rem);}
  .final-lose{font-size:clamp(1.9rem,7.5vw,3rem);}
  .final-stage-ring{width:150px;height:150px;margin:4px auto 2px;}
  .final-stage-ring::before{width:135px;height:135px;}
  .final-sprite-img{width:150px;height:150px;}
  .final-sub{font-size:1rem;}
  .score-big{font-size:3rem;}
  .result-arena, .battle-arena-wrap{min-height:200px;}
}
@media (max-height:600px){
  #screen-result, #screen-final{padding:12px 14px;gap:6px;}
  .final-win{font-size:clamp(1.7rem,8vw,2.4rem);}
  .final-lose{font-size:clamp(1.5rem,7vw,2.2rem);}
  .final-stage-ring{width:104px;height:104px;margin:2px auto;}
  .final-stage-ring::before{width:92px;height:92px;}
  .final-sprite-img{width:104px;height:104px;}
  .final-sub{font-size:.88rem;}
  .final-score{font-size:.75rem;}
  .pts-badge{font-size:1.1rem;padding:6px 18px;}
  .score-big{font-size:2.2rem;}
  .result-arena, .battle-arena-wrap{min-height:150px;}
  .dog-sprite-img{width:110px;height:110px;}
}


/* ============================================================
   CALIBRATION BAR
   ============================================================ */
.calib-bar{width:240px;height:10px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;}
.calib-fill{height:100%;width:0%;background:var(--Y);transition:width .1s linear;}


/* ============================================================
   DUAL-DOG BATTLE ARENA — face-to-face layout with real background
   ============================================================ */

/* Override screen-round background — use arena image */
#screen-round{
  background: #0a0a1a !important;
  position:relative;overflow-x:hidden;overflow-y:auto;
}
#screen-round::before{ display:none !important; } /* kill old gradient */

/* Real arena background image layer */
.arena-bg-layer{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
  background-image: var(--arena-bg-img);
  background-size:cover;background-position:center 30%;
  filter:brightness(.75) saturate(1.2);
}
/* Vignette + floor darkening on top of bg */
.arena-bg-layer::after{
  content:'';position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.0) 40%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse 80% 50% at 50% 50%, transparent 40%, rgba(0,0,0,.4) 100%);
}

/* All arena children need z-index > 0 — EXCEPT the bg layer itself, which
   must stay position:absolute (see .arena-bg-layer above). Without this
   :not() exclusion, this rule's ID-based selector has HIGHER CSS specificity
   than the .arena-bg-layer class rule, so it was overriding position:absolute
   back to position:relative on that div — collapsing it to a 0-height empty
   box (no width/height of its own) and making the whole arena background
   invisible. This was a real cross-browser CSS bug, not an image issue. */
#screen-round > *:not(.arena-bg-layer){ position:relative;z-index:2; }
.arena-bg-layer{ z-index:0; }

.battle-arena-wrap{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:0;width:100%;max-width:1080px;position:relative;z-index:2;
  padding:0 10px;min-height:360px;
}
.fighter-slot{
  display:flex;flex-direction:column;align-items:center;
  width:clamp(170px, 40vh, 400px);position:relative;flex-shrink:0;
}
.fighter-slot.p1{ align-items:flex-start; }
.fighter-slot.p2{ align-items:flex-end; }

.dog-sprite-wrap{
  position:relative;width:clamp(180px, 40vh, 400px);height:clamp(200px, 44vh, 440px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:dog-sprite-sway 4.4s ease-in-out infinite;
  transform-origin:center bottom;
  will-change:transform;
}
.fighter-slot.p2 .dog-sprite-wrap{
  animation-name:dog-sprite-sway-r;
}
@keyframes dog-sprite-sway{
  0%,100%{transform:rotate(-0.6deg)}
  50%{transform:rotate(0.6deg)}
}
@keyframes dog-sprite-sway-r{
  0%,100%{transform:rotate(0.6deg)}
  50%{transform:rotate(-0.6deg)}
}

/* Dog images — sprites are real RGBA PNGs with a true alpha channel
   already (verified: transparent background baked into the pixels,
   not a faked white background). They no longer need a blend-mode
   hack to "remove" a white background — mix-blend-mode:multiply was
   darkening the opaque dog pixels themselves against the dark arena,
   which is what made them look dim/muddy. Plain alpha compositing
   (the browser default) renders them at full brightness/contrast. */
.dog-sprite-img{
  width:clamp(170px, 38vh, 380px);height:clamp(170px, 38vh, 380px);object-fit:contain;
  filter:
    drop-shadow(0 0 14px rgba(0,0,0,.8))
    drop-shadow(0 10px 26px rgba(0,0,0,.7))
    brightness(1.05) contrast(1.05);
  transition:transform .08s ease-out, filter .12s;
  animation:dog-sprite-breathe 2.8s ease-in-out infinite;
  transform-origin:center bottom;
  background:transparent;
  image-rendering:auto;
  will-change:transform,filter;
}

/* Layered glow behind each dog to help blend with dark arena */
.dog-sprite-wrap::before{
  content:'';position:absolute;bottom:0;left:50%;
  width:270px;height:270px;border-radius:50%;
  transform:translateX(-50%);z-index:-1;
  background:radial-gradient(circle,rgba(0,10,30,.75) 28%,transparent 75%);
  pointer-events:none;
}
/* Secondary soft depth halo, slightly larger + dimmer, for layering */
.dog-sprite-wrap::after{
  content:'';position:absolute;bottom:-6px;left:50%;
  width:320px;height:150px;border-radius:50%;
  transform:translateX(-50%);z-index:-2;
  background:radial-gradient(ellipse,rgba(0,0,0,.5) 0%,transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}

/* P1 (shiba/left) — natural orientation */
.fighter-slot.p1 .dog-sprite-img{
  transform-origin:center bottom;
}
/* P2 (doge/right) — mirrored to face left
   FIX: transform-origin was "left bottom". Combined with scaleX(-1),
   mirroring around an edge (instead of the center) shifts the
   element's rendered box sideways by roughly its own width, which
   pushed the doge sprite almost entirely off its slot and on top of
   the shiba sprite — making it look invisible/overlapping ("dikit").
   Mirroring must pivot around the horizontal CENTER so the flip
   happens in place. */
.fighter-slot.p2 .dog-sprite-img{
  transform:scaleX(-1);
  transform-origin:center bottom;
  animation:dog-sprite-breathe-r 2.8s ease-in-out infinite;
}
@keyframes dog-sprite-breathe{
  0%,100%{transform:scaleX(1) translateY(0)}
  50%{transform:scaleX(1) translateY(-5px)}
}
@keyframes dog-sprite-breathe-r{
  0%,100%{transform:scaleX(-1) translateY(0)}
  50%{transform:scaleX(-1) translateY(-5px)}
}

/* Spotlight glow under each dog */
.dog-ground-shadow{
  width:150px;height:24px;margin-top:-8px;
  background:radial-gradient(ellipse,rgba(100,150,255,.35),transparent 70%);
  border-radius:50%;
  filter:blur(1.5px);
  transition:opacity .2s,transform .2s;
}
.fighter-slot.p1 .dog-ground-shadow{
  background:radial-gradient(ellipse,rgba(0,180,255,.4),transparent 70%);
}
.fighter-slot.p2 .dog-ground-shadow{
  background:radial-gradient(ellipse,rgba(255,60,60,.4),transparent 70%);
}

/* Fighter nametag */
.fighter-nametag{
  font-family:'Luckiest Guy',sans-serif;font-size:.62rem;
  letter-spacing:1px;padding:2px 10px;border-radius:4px;margin-top:4px;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
.fighter-slot.p1 .fighter-nametag{background:rgba(0,194,255,.22);color:#00c2ff;border:1px solid rgba(0,194,255,.4);}
.fighter-slot.p2 .fighter-nametag{background:rgba(255,45,45,.22);color:#ff5555;border:1px solid rgba(255,45,45,.4);}

/* Center VS + hype */
.battle-vs-center{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:22px;gap:4px;flex-shrink:0;width:50px;
}
.battle-vs-txt{
  font-family:'Luckiest Guy',sans-serif;font-size:1.1rem;
  color:var(--Y);text-shadow:0 0 12px rgba(255,230,0,.7),2px 2px 0 var(--R);
}

/* BARK animations */
.dog-sprite-img.barking{
  animation:dog-bark-anim .11s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 22px rgba(0,255,200,.7))
    drop-shadow(0 6px 20px rgba(0,0,0,.7))
    brightness(1.15) contrast(1.1) !important;
}
.fighter-slot.p2 .dog-sprite-img.barking{
  animation:dog-bark-anim-r .11s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 22px rgba(255,100,0,.7))
    drop-shadow(0 6px 20px rgba(0,0,0,.7))
    brightness(1.15) contrast(1.1) !important;
}
@keyframes dog-bark-anim{
  0%,100%{transform:scaleX(1) scale(1,1) rotate(-1.5deg) translate(0,0)}
  40%{transform:scaleX(1) scale(1.12,0.94) rotate(1.5deg) translate(10px,-9px)}
  70%{transform:scaleX(1) scale(1.06,1.03) rotate(0.5deg) translate(6px,-2px)}
}
@keyframes dog-bark-anim-r{
  0%,100%{transform:scaleX(-1) scale(1,1) rotate(1.5deg) translate(0,0)}
  40%{transform:scaleX(-1) scale(1.12,0.94) rotate(-1.5deg) translate(-10px,-9px)}
  70%{transform:scaleX(-1) scale(1.06,1.03) rotate(-0.5deg) translate(-6px,-2px)}
}

/* Winning dog — brighter spotlight */
.fighter-slot.winning .dog-sprite-img{
  filter:
    drop-shadow(0 0 28px rgba(255,230,0,.9))
    drop-shadow(0 6px 20px rgba(0,0,0,.6))
    brightness(1.2) contrast(1.05) !important;
}
.fighter-slot.winning .dog-ground-shadow{
  opacity:1.5;transform:scaleX(1.3);
}
/* Losing dog */
.fighter-slot.losing .dog-sprite-img{
  filter:
    drop-shadow(0 6px 20px rgba(0,0,0,.8))
    brightness(.75) saturate(.7) contrast(.95) !important;
}
.fighter-slot.p1.losing .dog-sprite-img{
  transform:scaleX(1) translateX(-8px) !important;
}
.fighter-slot.p2.losing .dog-sprite-img{
  transform:scaleX(-1) translateX(8px) !important;
}

/* Aura glow ring behind dog */
.dog-aura-ring{
  position:absolute;top:40%;left:50%;
  width:120px;height:120px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;transition:opacity .12s, transform .12s;
  pointer-events:none;z-index:-1;mix-blend-mode:screen;
}

/* Bark sound wave */
.bark-wave{
  position:absolute;top:25%;border-radius:50%;
  border:3px solid rgba(0,220,255,.8);
  width:26px;height:26px;
  opacity:0;pointer-events:none;
  animation:bark-wave-out .55s ease-out forwards;
}
.fighter-slot.p1 .bark-wave{ right:-8px; border-color:rgba(0,220,255,.8); }
.fighter-slot.p2 .bark-wave{ left:-8px; border-color:rgba(255,80,0,.8); animation-name:bark-wave-out-l; }
@keyframes bark-wave-out{
  0%{transform:scale(0);opacity:.9;}
  100%{transform:scale(5);opacity:0;}
}
@keyframes bark-wave-out-l{
  0%{transform:scale(0);opacity:.9;}
  100%{transform:scale(5);opacity:0;}
}

/* Bark milestone callouts — floating "NICE! / LOUDER! / MAX BARK!" pop-ups.
   Pure visual juice; spawned from js/battle.js maybeBarkCallout(). */
.bark-callout{
  position:absolute; top:-6%; left:50%;
  transform:translate(-50%,0) scale(.6);
  font-family:"Baloo 2","Poppins",sans-serif; font-weight:800;
  font-size:clamp(1.1rem,4vw,1.9rem); letter-spacing:.02em;
  white-space:nowrap; pointer-events:none; z-index:40;
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 14px currentColor;
  animation:bark-callout-pop .9s cubic-bezier(.2,1.4,.35,1) forwards;
}
.bark-callout.tier1{ color:#00FF87; }
.bark-callout.tier2{ color:#FFE600; }
.bark-callout.tier3{ color:#FF8C00; }
.bark-callout.tier4{ color:#FF2D2D; font-size:clamp(1.3rem,5vw,2.3rem); }
@keyframes bark-callout-pop{
  0%  { transform:translate(-50%,0) scale(.4);   opacity:0; }
  25% { transform:translate(-50%,-34px) scale(1.15); opacity:1; }
  70% { transform:translate(-50%,-52px) scale(1);    opacity:1; }
  100%{ transform:translate(-50%,-84px) scale(.9);   opacity:0; }
}

/* Sweat drop for losing dog */
.sweat-drop{
  position:absolute;top:15%;right:8px;
  width:5px;height:8px;background:#7ec8e3;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);opacity:0;
  animation:sweat-fall .9s ease-in forwards;
}
@keyframes sweat-fall{0%{opacity:.9;transform:rotate(-45deg) translateY(0)}100%{opacity:0;transform:rotate(-45deg) translateY(36px)}}

/* Camera zoom zone */
.arena-zoom-wrap{transition:transform .3s ease-out;transform-origin:center center;}

/* Camera zoom effect zone */
.arena-zoom-wrap{transition:transform .3s ease-out;transform-origin:center center;}


/* ============================================================
   FIX: dogs were colliding ("dikit") on narrow/mobile screens.
   .battle-arena-wrap + .fighter-slot + .dog-sprite-img used fixed
   px widths (160+50+160=370px) that didn't fit inside phone
   viewports, leaving no gap between the two fighters. Scale
   everything down responsively so there's always breathing room.
   ============================================================ */
@media(max-width:480px){
  .battle-arena-wrap{padding:0;min-height:260px;}
  .fighter-slot{width:190px;}
  .dog-sprite-wrap{width:190px;height:235px;}
  .dog-sprite-img{width:178px;height:178px;}
  .battle-vs-center{width:32px;padding-bottom:16px;}
  .fighter-nametag{max-width:160px;font-size:.6rem;}
  .dog-ground-shadow{width:120px;}
  .dog-sprite-wrap::before{width:170px;height:170px;}
  .dog-sprite-wrap::after{width:200px;height:100px;}
}
@media(max-width:380px){
  .fighter-slot{width:160px;}
  .dog-sprite-wrap{width:160px;height:205px;}
  .dog-sprite-img{width:150px;height:150px;}
  .battle-vs-center{width:24px;padding-bottom:12px;}
  .fighter-nametag{max-width:135px;}
  .dog-ground-shadow{width:100px;}
  .dog-sprite-wrap::before{width:145px;height:145px;}
  .dog-sprite-wrap::after{width:170px;height:85px;}
}
/* Result screen has no center VS column, only two slots — give it
   its own breathing room so it doesn't collide on phones either */
.result-arena{justify-content:center;gap:24px;}
@media(max-width:480px){
  .result-arena{gap:14px;}
}
@media(max-width:380px){
  .result-arena{gap:8px;}
}

/* ============================================================
   HYPE BACKGROUND ART — win / lose poster reveal on final screen
   Toggled via JS: final-bg-layer.className swaps to
   'final-bg-win' or 'final-bg-lose' in showFinalScreen()
   ============================================================ */
.final-bg-win{
  background-image:
    linear-gradient(180deg, rgba(6,4,14,.55) 0%, rgba(6,4,14,.85) 100%),
    url("../assets/backgrounds/promo/you-won.webp") !important;
  background-size:cover !important;
  background-position:center 15% !important;
  filter:none !important;
}
.final-bg-lose{
  background-image:
    linear-gradient(180deg, rgba(6,4,14,.60) 0%, rgba(6,4,14,.88) 100%),
    url("../assets/backgrounds/promo/dont-lose-this-one.webp") !important;
  background-size:cover !important;
  background-position:center 15% !important;
  filter:none !important;
}

/* ============================================================
   HYPE BACKGROUND ART — round result screen accent
   ============================================================ */
#screen-result{
  background:
    linear-gradient(180deg, rgba(6,4,14,.88) 0%, rgba(6,4,14,.95) 100%),
    url("../assets/backgrounds/promo/real-voices-real-battles.webp") !important;
  background-size:cover !important;
  background-position:center !important;
}

/* ============================================================
   HYPE BACKGROUND ART — VS banner strip above the live battle arena
   ============================================================ */
.battle-top-bar{
  position:relative;
}
.battle-top-bar::before{
  content:'';
  position:absolute; inset:-4px -4px auto -4px; height:64px;
  background:
    linear-gradient(180deg, rgba(6,4,14,0) 0%, rgba(6,4,14,.9) 100%),
    url("../assets/backgrounds/promo/vs-battle-now.webp");
  background-size:cover; background-position:center;
  opacity:.35; z-index:-1; border-radius:0 0 20px 20px; pointer-events:none;
}

/* ============================================================
   BATTLE ROUND — SHORT-SCREEN FIT (height-based)
   ------------------------------------------------------------
   The round screen has overflow:hidden and was sized for tall
   viewports, so on short laptops the dogs + tug bar + tip got
   clipped off the bottom. These height breakpoints shrink the
   big vertical consumers (countdown, dog sprites, arena) so the
   whole battle always fits without scrolling.
   ============================================================ */
@media (max-height:768px){
  #screen-round{ padding:6px 12px !important; }
  .countdown-display{ font-size:3.6rem; height:56px; line-height:56px; }
  .battle-arena-wrap{ min-height:0; }
  .peak-row{ gap:12px; }
  /* dog sizes intentionally left to the fluid clamp() base rule so they
     stay as large as the height allows (bigger on tall screens); only the
     ≤640/≤540 caps below force them smaller when space is truly tight. */
}
@media (max-height:640px){
  #screen-round{ padding:4px 10px !important; }
  .battle-topbar{ padding-top:0; }
  .countdown-display{ font-size:2.7rem; height:42px; line-height:42px; }
  .fighter-slot{ width:180px; }
  .dog-sprite-wrap{ width:180px; height:186px; }
  .dog-sprite-img{ width:168px; height:168px; }
  .tug-labels{ margin-bottom:2px; }
  .tug-pcts{ margin-top:2px; }
  .peak-row{ gap:8px; }
  .peak-box{ padding:2px 10px; }
  .round-tip{ font-size:.66rem; }
}
@media (max-height:540px){
  .countdown-display{ font-size:2.1rem; height:32px; line-height:32px; }
  .fighter-slot{ width:150px; }
  .dog-sprite-wrap{ width:150px; height:150px; }
  .dog-sprite-img{ width:140px; height:140px; }
}

/* ============================================================
   PRE-GAME VOICE CHOICE (mic screen) — on/off before the match
   ============================================================ */
.voice-choice{
  width:100%; max-width:360px; margin:0 auto 16px;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:14px;
}
.voice-choice-label{
  font-family:'Luckiest Guy',sans-serif; font-size:.82rem; letter-spacing:.5px;
  color:rgba(255,255,255,.82); margin-bottom:10px; text-align:center;
}
.voice-choice-btns{ display:flex; gap:8px; }
.voice-opt{
  flex:1; padding:11px 8px; border-radius:10px; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.7); font-weight:800; font-size:.78rem;
  transition:border-color .15s, background .15s, color .15s;
}
.voice-opt:hover{ border-color:rgba(255,255,255,.3); }
.voice-opt.active{
  border-color:var(--Y); color:#fff; background:rgba(255,230,0,.12);
  box-shadow:0 0 14px rgba(255,230,0,.25);
}
#voice-opt-on.active{ border-color:var(--G); background:rgba(0,255,135,.12); box-shadow:0 0 14px rgba(0,255,135,.25); }
.voice-choice-note{
  margin-top:9px; font-size:.66rem; color:rgba(255,255,255,.42);
  text-align:center; line-height:1.4;
}

/* ---- Voice changer (optional, only shown when voice is On) ---- */
.voice-fx-picker{
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08);
}
.voice-fx-label{
  font-family:'Luckiest Guy',sans-serif; font-size:.72rem; letter-spacing:.3px;
  color:rgba(255,255,255,.6); margin-bottom:8px; text-align:center;
}
.voice-fx-btns{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.voice-fx-opt{
  padding:8px 10px; border-radius:9px; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.6); font-weight:800; font-size:.7rem;
  transition:border-color .15s, background .15s, color .15s;
}
.voice-fx-opt:hover{ border-color:rgba(255,255,255,.3); }
.voice-fx-opt.active{
  border-color:var(--P); color:#fff; background:rgba(255,107,214,.14);
  box-shadow:0 0 12px rgba(255,107,214,.25);
}

/* In-battle nametag now carries a small round avatar (uploaded photo or
   emoji) next to the name — see fighterNametag() in js/battle.js. */
.fighter-nametag{ display:inline-flex; align-items:center; gap:6px; justify-content:center; }
.nametag-av{
  width:20px; height:20px; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; background:rgba(255,255,255,.14); line-height:1;
}
.nametag-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.nametag-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- battle screen polish ---- */
.bark-ai-status small{display:block;font-size:.6rem;opacity:.5;font-weight:700;letter-spacing:.06em;margin-top:2px;font-family:inherit;}
.vol-meter{
  background:repeating-linear-gradient(to top, rgba(255,255,255,.07) 0 2px, transparent 2px 14px), rgba(255,255,255,.04);
  border-color:rgba(255,230,0,.25);box-shadow:inset 0 2px 10px rgba(0,0,0,.5), 0 0 18px rgba(255,230,0,.08);
}
.vol-fill{border-radius:0 0 9px 9px;}
.vol-lbl{color:rgba(255,230,0,.6);font-size:.58rem;}
.countdown-display.bark-mode{text-shadow:0 0 22px rgba(255,45,45,.65), 4px 4px 0 #700;}
.bark-ai-status.is-bark{box-shadow:0 0 22px rgba(0,255,135,.35);}

/* ============================================================
   COSMETICS (js/cosmetics.js) — equipped skins, frames, titles,
   Bark FX, emotes, and the "your look" preview in Rewards.
   Skins tint the whole sprite wrap so they stack with the sprite's
   own barking / winning / losing filters.
   ============================================================ */
.gear-skin-shadow{ filter:grayscale(1) brightness(.34) contrast(1.4) drop-shadow(0 0 3px rgba(190,120,255,1)) drop-shadow(0 0 12px rgba(168,85,247,.95)) drop-shadow(0 0 26px rgba(120,40,220,.7)); }
.gear-skin-golden{ filter:sepia(.9) saturate(2.6) hue-rotate(-10deg) brightness(1.1) drop-shadow(0 0 10px rgba(255,200,40,.95)) drop-shadow(0 0 24px rgba(255,160,0,.55)); }

.nametag-av.gear-frame-neon{ box-shadow:0 0 0 2px #00f0ff, 0 0 8px 2px rgba(255,0,230,.85); animation:gear-neon 1.4s ease-in-out infinite alternate; }
@keyframes gear-neon{ from{ box-shadow:0 0 0 2px #00f0ff, 0 0 6px 1px rgba(255,0,230,.6); } to{ box-shadow:0 0 0 2px #ff00e6, 0 0 12px 3px rgba(0,240,255,.9); } }
.nametag-av.gear-frame-champ{ box-shadow:0 0 0 2px #ffd54a, 0 0 10px 2px rgba(255,190,30,.9); }
.nametag-title{ display:block; font-size:.78em; color:#ffe600; letter-spacing:.08em; line-height:1.15; text-shadow:0 0 6px rgba(255,200,0,.6); }

.fighter-slot .bark-wave.gear-fx-fire{ border-color:rgba(255,120,0,.95); box-shadow:0 0 14px rgba(255,60,0,.85); }
.fighter-slot .bark-wave.gear-fx-lightning{ border-color:rgba(190,235,255,.95); box-shadow:0 0 14px rgba(90,180,255,.95); }

.emote-bubble{ position:absolute; top:-6%; left:50%; font-size:2.6rem; z-index:6; pointer-events:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); animation:emote-pop 2.4s ease-out forwards; }
@keyframes emote-pop{ 0%{ transform:translate(-50%,12px) scale(.3); opacity:0; } 12%{ transform:translate(-50%,-6px) scale(1.2); opacity:1; } 25%{ transform:translate(-50%,0) scale(1); } 80%{ opacity:1; } 100%{ transform:translate(-50%,-32px) scale(1); opacity:0; } }
#emote-bar{ position:fixed; left:12px; bottom:calc(20px + env(safe-area-inset-bottom)); display:none; gap:8px; z-index:60; }
#emote-bar.show{ display:flex; }
#emote-bar button{ width:48px; height:48px; border-radius:50%; font-size:1.5rem; line-height:1; border:1px solid rgba(255,255,255,.22); background:rgba(18,18,28,.82); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.45); }
#emote-bar button:active{ transform:scale(.9); }

/* Rewards → Equip */
.reward-item-btn.equip{ background:rgba(255,230,0,.14); color:#ffe600; border:1px solid rgba(255,230,0,.5); }
.reward-item-btn.equipped{ background:linear-gradient(135deg,#00ff87,#00c46a); color:#062414; }
.reward-item.is-owned.is-equipped{ opacity:1; border-color:#00ff87; box-shadow:0 0 16px rgba(0,255,135,.25); }
.owned-item.is-equipped{ outline:1px solid rgba(0,255,135,.7); border-radius:10px; }

.gear-preview{ display:flex; align-items:center; gap:16px; margin:0 0 16px; padding:12px 16px; border-radius:16px; background:linear-gradient(135deg,rgba(0,194,255,.08),rgba(255,230,0,.05)); border:1px solid rgba(255,255,255,.12); }
.gear-preview:empty{ display:none; }
.gear-prev-dog{ position:relative; width:96px; height:96px; flex-shrink:0; }
.gear-prev-dog img{ width:100%; height:100%; object-fit:contain; display:block; }
.gear-prev-info{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.gear-prev-lbl{ font-size:.62rem; font-weight:800; letter-spacing:.1em; color:rgba(255,255,255,.45); }
.gear-prev-tag{ align-self:flex-start; max-width:220px; background:rgba(0,194,255,.22); color:#00c2ff; border:1px solid rgba(0,194,255,.4); font-size:.72rem; white-space:normal; }
.gear-prev-list{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.74rem; color:rgba(255,255,255,.7); }
.gear-prev-list b{ color:rgba(255,255,255,.45); font-weight:700; }
.gear-prev-emotes{ font-size:.74rem; color:rgba(255,255,255,.6); }
@media (max-width:520px){ .gear-preview{ gap:10px; padding:10px 12px; } .gear-prev-dog{ width:72px; height:72px; } }
/* short screens (landscape phones / small windows): the bottom-left corner is taken by your nametag */
@media (max-height:560px){
  #emote-bar{ top:calc(10px + env(safe-area-inset-top)); bottom:auto; }
  #emote-bar button{ width:40px; height:40px; font-size:1.25rem; }
}
.gear-prev-info{ text-align:left; }
/* emotes are opt-in: one closed 😀 button, the equipped emotes open beside it */
#emote-bar{ align-items:center; }
#emote-bar .emote-menu{ display:none; gap:8px; }
#emote-bar.open .emote-menu{ display:flex; animation:emote-menu-in .15s ease-out; }
#emote-bar.open .emote-toggle{ background:rgba(255,230,0,.2); border-color:rgba(255,230,0,.7); }
@keyframes emote-menu-in{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
/* Bark FX particles — drawn, not emoji (js/cosmetics.js particles()) */
.gear-ember{ position:absolute; left:50%; top:55%; width:var(--s,9px); height:var(--s,9px); margin:calc(var(--s,9px) / -2) 0 0 calc(var(--s,9px) / -2);
  border-radius:50%; pointer-events:none; z-index:4; opacity:0;
  background:radial-gradient(circle,#fffbe0 0%,#ffd84a 28%,#ff8a00 58%,rgba(255,70,0,0) 74%);
  box-shadow:0 0 8px 2px rgba(255,120,0,.8), 0 0 18px 4px rgba(255,60,0,.45);
  animation:gear-ember var(--t,.9s) ease-out var(--d,0s) forwards; }
.gear-ember.loop{ animation-iteration-count:infinite; animation-duration:calc(var(--t,.9s) * 1.8); }
@keyframes gear-ember{ 0%{ transform:translate(var(--x,0px),0) scale(1); opacity:0; } 12%{ opacity:1; } 60%{ opacity:.9; } 100%{ transform:translate(var(--dx,0px),var(--dy,-90px)) scale(.25); opacity:0; } }
.gear-bolt{ position:absolute; left:50%; top:40%; width:var(--s,22px); height:calc(var(--s,22px) * 1.6); margin:calc(var(--s,22px) * -.8) 0 0 calc(var(--s,22px) / -2);
  pointer-events:none; z-index:4; opacity:0; transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));
  filter:drop-shadow(0 0 3px #d8f2ff) drop-shadow(0 0 9px #3fa9ff) drop-shadow(0 0 16px rgba(63,169,255,.7));
  animation:gear-bolt-once .55s linear var(--d,0s) forwards; }
.gear-bolt svg{ width:100%; height:100%; display:block; fill:#f4fbff; }
.gear-bolt.loop{ animation:gear-bolt-loop 2.4s linear var(--d,0s) infinite; }
@keyframes gear-bolt-once{ 0%{ opacity:0; } 15%{ opacity:1; } 35%{ opacity:.25; } 50%{ opacity:1; } 100%{ opacity:0; } }
@keyframes gear-bolt-loop{ 0%{ opacity:0; } 5%{ opacity:1; } 10%{ opacity:.2; } 15%{ opacity:1; } 26%{ opacity:0; } 100%{ opacity:0; } }
/* Rewards preview: the FX glows under the dog and its particles loop */
.gear-prev-img{ width:100%; height:100%; }
.gear-prev-dog.gear-fx-fire::before, .gear-prev-dog.gear-fx-lightning::before{ content:''; position:absolute; inset:18% 6% -4%; border-radius:50%; filter:blur(8px); animation:gear-glow 1.1s ease-in-out infinite alternate; }
.gear-prev-dog.gear-fx-fire::before{ background:radial-gradient(ellipse at 50% 80%, rgba(255,120,0,.6), transparent 68%); }
.gear-prev-dog.gear-fx-lightning::before{ background:radial-gradient(ellipse at 50% 70%, rgba(80,170,255,.55), transparent 68%); }
@keyframes gear-glow{ from{ opacity:.55; transform:scale(.96); } to{ opacity:1; transform:scale(1.04); } }
/* ---- Snow / Wind / Water Bark FX (drawn SVG particles, js/cosmetics.js) ---- */
.gear-flake{ position:absolute; left:50%; top:45%; width:var(--s,14px); height:var(--s,14px); margin:calc(var(--s,14px) / -2) 0 0 calc(var(--s,14px) / -2);
  pointer-events:none; z-index:4; opacity:0; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgba(140,210,255,1)) drop-shadow(0 0 18px rgba(90,180,255,.6));
  animation:gear-flake var(--t,1.3s) ease-out var(--d,0s) forwards; }
.gear-flake svg{ width:100%; height:100%; display:block; fill:none; stroke:#ffffff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.gear-flake.loop{ animation-iteration-count:infinite; animation-duration:calc(var(--t,1.3s) * 1.7); }
@keyframes gear-flake{ 0%{ transform:translate(var(--x,0px),var(--y,-30px)) rotate(0deg) scale(.4); opacity:0; } 15%{ opacity:1; transform:translate(var(--x,0px),var(--y,-30px)) rotate(40deg) scale(1); } 70%{ opacity:1; } 100%{ transform:translate(calc(var(--x,0px) + var(--dx,30px)),calc(var(--y,-30px) + var(--dy,50px))) rotate(var(--r,200deg)) scale(.7); opacity:0; } }

.gear-gust{ position:absolute; left:50%; top:45%; width:var(--s,56px); height:calc(var(--s,56px) * .32); margin:calc(var(--s,56px) * -.16) 0 0 calc(var(--s,56px) / -2);
  pointer-events:none; z-index:4; opacity:0; transform:translate(var(--x,0px),var(--y,0px)) scaleX(var(--dir,1));
  filter:drop-shadow(0 0 4px rgba(170,255,220,.95)) drop-shadow(0 0 10px rgba(90,255,190,.5)); animation:gear-gust var(--t,.85s) ease-out var(--d,0s) forwards; }
.gear-gust svg{ width:100%; height:100%; display:block; overflow:visible; fill:none; stroke:#effff8; stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:90; stroke-dashoffset:90; animation:gear-gust-draw var(--t,.85s) ease-out var(--d,0s) forwards; }
.gear-gust.loop, .gear-gust.loop svg{ animation-iteration-count:infinite; animation-duration:calc(var(--t,.85s) * 2.4); }
@keyframes gear-gust{ 0%{ opacity:0; transform:translate(var(--x,0px),var(--y,0px)) scaleX(var(--dir,1)); } 15%{ opacity:1; } 65%{ opacity:1; } 100%{ opacity:0; transform:translate(calc(var(--x,0px) + var(--dx,90px)),var(--y,0px)) scaleX(var(--dir,1)); } }
@keyframes gear-gust-draw{ 0%{ stroke-dashoffset:90; } 60%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-60; } }

.gear-drop{ position:absolute; left:50%; top:50%; width:var(--s,10px); height:calc(var(--s,10px) * 1.375); margin:calc(var(--s,10px) * -.7) 0 0 calc(var(--s,10px) / -2);
  pointer-events:none; z-index:4; opacity:0; filter:drop-shadow(0 0 4px rgba(90,190,255,.95));
  animation:gear-drop var(--t,1s) cubic-bezier(.2,.6,.4,1) var(--d,0s) forwards; }
.gear-drop svg{ width:100%; height:100%; display:block; fill:#3fb4ff; stroke:#e6f6ff; stroke-width:1.2; }
.gear-drop svg .hl{ fill:rgba(255,255,255,.8); }
.gear-drop.loop{ animation-iteration-count:infinite; animation-duration:calc(var(--t,1s) * 1.9); }
@keyframes gear-drop{ 0%{ transform:translate(var(--x,0px),0) scale(.5); opacity:0; } 10%{ opacity:1; } 45%{ transform:translate(calc(var(--x,0px) + var(--dx,40px) * .55),var(--up,-80px)) scale(1); } 75%{ opacity:1; } 100%{ transform:translate(calc(var(--x,0px) + var(--dx,40px)),40px) scale(.8); opacity:0; } }
.gear-splash{ position:absolute; left:50%; top:78%; width:110px; height:26px; margin:calc(var(--foot,0px) - 13px) 0 0 -55px; border-radius:50%;
  border:2px solid rgba(120,210,255,.9); box-shadow:0 0 12px rgba(60,170,255,.75), inset 0 0 8px rgba(120,210,255,.5); pointer-events:none; z-index:3; opacity:0;
  animation:gear-splash .8s ease-out var(--d,0s) forwards; }
.gear-splash.loop{ animation-iteration-count:infinite; animation-duration:2.2s; }
@keyframes gear-splash{ 0%{ transform:scale(.2); opacity:.95; } 100%{ transform:scale(1.6); opacity:0; } }

.fighter-slot .bark-wave.gear-fx-snow{ border-color:rgba(235,248,255,.95); box-shadow:0 0 14px rgba(160,220,255,.9); }
.fighter-slot .bark-wave.gear-fx-wind{ border-color:rgba(170,255,220,.9); box-shadow:0 0 12px rgba(120,255,200,.7); }
.fighter-slot .bark-wave.gear-fx-water{ border-color:rgba(60,170,255,.95); box-shadow:0 0 14px rgba(30,130,255,.85); }
.gear-prev-dog.gear-fx-snow::before, .gear-prev-dog.gear-fx-wind::before, .gear-prev-dog.gear-fx-water::before{ content:''; position:absolute; inset:18% 6% -4%; border-radius:50%; filter:blur(8px); animation:gear-glow 1.1s ease-in-out infinite alternate; }
.gear-prev-dog.gear-fx-snow::before{ background:radial-gradient(ellipse at 50% 75%, rgba(200,235,255,.6), transparent 68%); }
.gear-prev-dog.gear-fx-wind::before{ background:radial-gradient(ellipse at 50% 75%, rgba(120,255,200,.45), transparent 68%); }
.gear-prev-dog.gear-fx-water::before{ background:radial-gradient(ellipse at 50% 75%, rgba(30,140,255,.55), transparent 68%); }
/* shop icons for the new FX until they get their own art (lightning icon, re-tinted) */
img.icon-fx-snow{ filter:grayscale(1) brightness(1.5) drop-shadow(0 0 6px rgba(170,225,255,.95)); }
img.icon-fx-wind{ filter:hue-rotate(-55deg) saturate(1.3) brightness(1.1); }
img.icon-fx-water{ filter:hue-rotate(70deg) saturate(1.4) brightness(1.05); }

/* ---- round header: 🔊 BARK NOW 🎤 on one row (was three stacked rows) ---- */
.round-instr-row{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:30px; }
.round-instr-row .voice-mute-btn{ padding:4px 10px; flex-shrink:0; }
/* ---- dogs sized from the height that is LEFT after the header (desktop / tablet / landscape) ----
   The fixed 44vh sizing overflowed every laptop screen (nametags cut 15–137px). The header
   (dots, score, 🔊 BARK NOW 🎤, AI badge, timer, tug bar) is ~490px tall, so the dog gets the rest. */
@media (min-width:481px){
  #screen-round{ --dogH: clamp(140px, calc(100dvh - 505px), 440px); }
  #screen-round .fighter-slot{ width:calc(var(--dogH) * .91); }
  #screen-round .dog-sprite-wrap{ width:calc(var(--dogH) * .91); height:var(--dogH); }
  #screen-round .dog-sprite-img{ width:calc(var(--dogH) * .86); height:calc(var(--dogH) * .86); }
}
@media (min-width:481px) and (max-height:768px){ #screen-round{ --dogH: clamp(140px, calc(100dvh - 462px), 440px); } }
/* very short screens (phone held sideways): drop the extras so the fight itself fits */
@media (max-height:520px){
  #screen-round .voice-status-pill, #screen-round .live-leader, #screen-round .round-tip, #screen-round .tally{ display:none !important; }
  #screen-round .countdown-display{ font-size:1.8rem; height:30px; line-height:30px; }
  #screen-round .bark-ai-status small{ display:none; }
  #screen-round{ --dogH: clamp(110px, calc(100dvh - 250px), 300px); }
}

/* Codex emote art (images instead of emoji) */
.emote-bubble img{ width:84px; height:84px; display:block; }
#emote-bar button img{ width:34px; height:34px; display:block; margin:auto; pointer-events:none; }
#emote-bar .emote-toggle img{ width:30px; height:30px; }
.gear-prev-emote img{ width:26px; height:26px; vertical-align:middle; }
.gear-prev-emote-btn{ width:18px; height:18px; vertical-align:middle; }
@media (max-height:520px){ .emote-bubble img{ width:60px; height:60px; } }
/* Arena v2 art is already dark in the fight area — lighter filter than the old arena, anchored to the top so the crowd stays visible */
.arena-bg-layer{ filter:brightness(.92) saturate(1.1); background-position:center top; }
/* keep the score / BARK NOW / timer readable over the arena-v2 neon paw sign */
.arena-bg-layer::after{
  background:
    radial-gradient(ellipse 34% 30% at 50% 17%, rgba(4,6,18,.72), rgba(4,6,18,.35) 55%, transparent 80%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}

/* Codex avatar frames + title banners */
.nametag-av-wrap{ position:relative; display:inline-flex; flex-shrink:0; margin:3px; }
.nametag-av-wrap::after{ content:''; position:absolute; inset:-30%; background:center/contain no-repeat; pointer-events:none; }
.nametag-av-wrap.gear-frame-neon::after{ background-image:url('../assets/cosmetics/frame-neon.webp'); }
.nametag-av-wrap.gear-frame-champ::after{ background-image:url('../assets/cosmetics/frame-champion.webp'); inset:-34% -30% -30%; }
.fighter-nametag{ overflow:visible; }
.nametag-title-img{ display:block; height:17px; width:auto; margin-top:1px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.gear-prev-tag .nametag-title-img{ height:22px; }

/* ---- WIDE DESKTOP: big dogs on the left/right of the scoreboard column ----
   On wide screens the dogs used to sit UNDER the header (score, BARK NOW, timer, tug bar),
   so they only got the leftover ~40% of the height and the sides stayed empty.
   Here the arena is pinned to the bottom across the full width and each dog stands
   beside the centre column, so they can be ~65% of the screen tall. */
@media (min-width:1300px) and (min-height:600px){
  #screen-round{ --dogH: min(64dvh, 640px); }
  #screen-round > .arena-zoom-wrap{
    position:absolute; left:0; right:0; bottom:1.5dvh; z-index:1; pointer-events:none;
  }
  #screen-round .battle-arena-wrap{ max-width:none; width:100%; padding:0 max(3vw, calc(50vw - 560px - var(--dogH) * .91)); box-sizing:border-box; }
  #screen-round .battle-arena-wrap *{ pointer-events:auto; }
  #screen-round .battle-vs-center{ align-self:flex-end; }
}
@media (min-width:1300px) and (min-height:600px){
  #screen-round{ justify-content:flex-start !important; padding-top:2.5dvh !important; } /* header at the top, clear of the Bark Power meter */
  #screen-round .fighter-nametag{ font-size:.82rem; max-width:240px; padding:4px 12px; }
  #screen-round .nametag-av{ width:26px; height:26px; }
  #screen-round .nametag-title-img{ height:22px; }
}
/* ---- PHONE IN LANDSCAPE: same side-by-side idea, scaled down ---- */
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  #screen-round{ --dogH: min(66dvh, 300px); justify-content:flex-start !important; padding-top:4px !important; }
  #screen-round > .arena-zoom-wrap{ position:absolute; left:0; right:0; bottom:2px; z-index:1; pointer-events:none; }
  #screen-round .battle-arena-wrap{ max-width:none; width:100%; padding:0 2vw; box-sizing:border-box; min-height:0; }
  #screen-round .battle-arena-wrap *{ pointer-events:auto; }
  #screen-round .tug-wrap, #screen-round .live-leader, #screen-round .bark-ai-status, #screen-round .round-instr-row{ max-width:calc(100vw - 2 * var(--dogH) * .91 - 16px); margin-left:auto; margin-right:auto; }
  #screen-round .battle-vs-center{ transform:scale(.7); transform-origin:bottom center; }
  #screen-round .peak-row{ display:none !important; }
  #screen-round .fighter-nametag{ max-width:calc(var(--dogH) * .9); }
}

/* BARK NOW / SUDDEN DEATH with our icons */
.instr{ display:inline-flex; align-items:center; justify-content:center; gap:.35em; }
.instr-ico{ height:1.25em; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.instr.go .instr-ico{ animation:instr-ico-bounce .5s ease-in-out infinite alternate; }
@keyframes instr-ico-bounce{ from{ transform:translateY(0) rotate(-8deg) } to{ transform:translateY(-3px) rotate(8deg) } }

/* WIDE DESKTOP: the centre column was sized for phones — scale every text up so it reads from arm's length */
@media (min-width:1300px) and (min-height:600px){
  #screen-round .pdots .dot{ width:16px; height:16px; }
  #screen-round .tally{ font-size:1.35rem; letter-spacing:2px; }
  #screen-round .voice-status-pill{ font-size:.95rem; padding:5px 16px; }
  #screen-round .round-instr-row .voice-mute-btn{ font-size:1.2rem; padding:6px 14px; }
  #screen-round .instr{ font-size:1.9rem; }
  #screen-round .instr.go{ font-size:clamp(2.4rem, 3.6vw, 3.6rem); text-shadow:0 0 18px rgba(255,45,45,.55), 3px 3px 0 #3a0000; }
  #screen-round .bark-ai-status{ font-size:1.15rem; padding:8px 20px; }
  #screen-round .bark-ai-status small{ font-size:.8rem; }
  #screen-round .countdown-display{ font-size:6rem; height:96px; line-height:96px; }
  #screen-round .tug-wrap{ width:min(560px, 36vw); max-width:none; }
  #screen-round .tug-label{ font-size:1.05rem; }
  #screen-round .tug-bar-outer{ height:44px; }
  #screen-round .tug-pct{ font-size:1.6rem; }
  #screen-round .live-leader{ font-size:1.25rem; padding:8px 22px; }
  #screen-round .peak-box{ padding:8px 18px; }
  #screen-round .peak-val{ font-size:2rem; }
  #screen-round .peak-lbl{ font-size:.8rem; }
  #screen-round .vol-lbl{ font-size:.85rem; }
  #screen-round .round-tip{ font-size:1rem; }
}
/* player names ABOVE their dog (owner request), centred over the dog — battle + round result */
.fighter-slot .fighter-nametag{ order:-1; align-self:center; margin:0 0 6px; }
.fighter-slot .dog-ground-shadow{ order:2; }
.fighter-slot .emote-bubble{ top:4%; }
@media (min-width:1300px) and (min-height:600px){
  #screen-round .tug-wrap{ width:min(560px, 32vw); }
}
/* BARK NOW: brand yellow instead of red (red was hard on the eyes) */
.instr.go{ color:#FFE600 !important; text-shadow:0 0 16px rgba(255,200,0,.45), 2px 2px 0 #2a1a00, -1px -1px 0 #2a1a00, 1px -1px 0 #2a1a00, -1px 1px 0 #2a1a00 !important; }
@media (min-width:1300px) and (min-height:600px){
  /* name sits right over the dog's head (the sprite box has empty space above the art) */
  #screen-round .fighter-slot .fighter-nametag{ margin-bottom:calc(var(--dogH) * -.17); position:relative; z-index:3; font-size:1rem; padding:6px 16px; }
  #screen-round .nametag-av{ width:30px; height:30px; }
  #screen-round .nametag-title-img{ height:26px; }
}
.instr.go{ animation:instr-glow 1.1s ease-in-out infinite alternate !important; } /* gentle glow instead of the fast 0.25s flicker */
@keyframes instr-glow{ from{ opacity:.9; transform:scale(1) } to{ opacity:1; transform:scale(1.04) } }
/* nametags: solid dark plate so names read over the busy crowd art */
.fighter-slot.p1 .fighter-nametag{ background:rgba(6,14,30,.88); border:1.5px solid rgba(0,194,255,.75); color:#6fdcff; box-shadow:0 4px 14px rgba(0,0,0,.5); }
.fighter-slot.p2 .fighter-nametag{ background:rgba(30,6,10,.88); border:1.5px solid rgba(255,70,70,.75); color:#ff8a8a; box-shadow:0 4px 14px rgba(0,0,0,.5); }
#rotate-hint{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:70; display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 32px); padding:10px 12px 10px 14px; border-radius:14px; background:rgba(12,12,22,.94); border:1.5px solid rgba(255,230,0,.55);
  color:#FFE600; font-weight:800; font-size:.85rem; box-shadow:0 8px 24px rgba(0,0,0,.5); animation:rotate-in .3s ease-out; }
#rotate-hint svg{ flex-shrink:0; animation:rotate-wiggle 1.6s ease-in-out infinite; }
#rotate-hint span{ color:#fff; }
#rotate-hint button{ background:none; border:0; color:rgba(255,255,255,.6); font-size:1rem; cursor:pointer; padding:2px 4px; }
@keyframes rotate-in{ from{ opacity:0; transform:translate(-50%, 10px) } to{ opacity:1; transform:translate(-50%, 0) } }
@keyframes rotate-wiggle{ 0%,60%,100%{ transform:rotate(0) } 30%{ transform:rotate(-90deg) } }
/* Codex Bark FX burst sheets: 8 frames in a 2048x256 strip, played once per bark wave */
.gear-burst{ position:absolute; width:var(--size,220px); height:var(--size,220px); margin:calc(var(--size,220px) / -2) 0 0 calc(var(--size,220px) / -2);
  background-repeat:no-repeat; background-size:800% 100%; background-position:0 0; pointer-events:none; z-index:4;
}
@keyframes gear-burst{ to{ background-position:100% 0; } }
.gear-prev-dog .gear-burst{ opacity:.9; }