/* Lightweight overrides for settings UI: buttons + panels */
.hidden{ display:none !important; }
/* AI_TAG: FRONTEND_RENDER | Respect [hidden] attribute universally
   Fix: Game overlays (snake/flappy/warp) defined with display:flex were overriding the UA [hidden] rule.
   Enforce display:none when [hidden] is present so pause screens are not shown by default. */
[hidden],
.snake-overlay[hidden],
.flappy-overlay[hidden],
.warp-overlay[hidden]{
  display: none !important;
}
.btn { 
  background:#0e151e; 
  border:1px solid #243141; 
  color:var(--ink); 
  border-radius:12px; 
  padding:10px 12px; 
  cursor:pointer; 
  font-weight:700; 
  transition:transform .15s,border-color .15s,box-shadow .15s,background .15s; 
  user-select:none;
}
/* AI_TAG: FRONTEND_RENDER | Ensure login/register primary buttons are prominent and clickable */
#btnLogin,
#btnRegister{
  background: linear-gradient(135deg, #4da3ff, #76beff) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(77,163,255,.4) !important;
}
#btnLogin:hover,
#btnRegister:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(77,163,255,.6) !important;
}
#btnLogin:disabled,
#btnRegister:disabled{
  opacity: .75 !important;
  cursor: progress !important;
}
.btn:hover{ 
  transform:translateY(-1px); 
  border-color:#4da3ff; 
  box-shadow:0 3px 12px #0006,inset 0 1px 3px #96c8a033; 
}
.btn:disabled{ opacity:.6; cursor:not-allowed }
.btn-block{ width:100% }

.btn-brand{ background:#4da3ff1a; border-color:#4da3ff; color:#4da3ff }
.btn-brand:hover{ background:#4da3ff33 }

.btn-ok{ background:#38d39f1a; border-color:#38d39f; color:#38d39f }
.btn-ok:hover{ background:#38d39f33 }

.btn-warn{ background:#ffa9401a; border-color:#ffa940; color:#ffa940 }
.btn-warn:hover{ background:#ffa94033 }

.btn-danger{ background:#ff59681a; border-color:#ff5968; color:#ff7a85 }
.btn-danger:hover{ background:#ff596833 }

.panel{ 
  background:#132031; 
  border:1px solid #1a2430; 
  border-radius:14px; 
  padding:14px; 
  margin:14px 0; 
}
.panelHeader{ 
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; 
}
.panelTitle{ 
  margin:0; font-size:1rem; font-weight:900; letter-spacing:.3px; 
}
.panelBody{ 
  display:grid; gap:10px; 
}

#emailStatus { 
  margin-bottom:12px; 
  padding:10px; 
  border-radius:10px; 
  background:#0e151e; 
  border:1px solid #1a2430; 
}

/* High-specificity overrides to force fairy borders and tight spacing in breeding modal */
main#page-hub .breeding-modal .egg-preview-grid,
#page-hub.page.active .breeding-modal .egg-preview-grid{
  gap: 2px !important;
}
main#page-hub .breeding-modal .egg-card,
#page-hub.page.active .breeding-modal .egg-card{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
main#page-hub .breeding-modal .parents-pill,
#page-hub.page.active .breeding-modal .parents-pill{
  display: inline-flex !important;
  gap: 2px !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
}

.actionGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:10px }

/* Subtle debug chip hover */
#chipDebug:hover{ opacity:.6 !important }

/* Envelope container static positioning (no animations) */

/* ----------------------------------------------
   AI_TAG: FRONTEND_GRAPHICS | Sun halo hardening
   Render the sun as a solid CSS circle to prevent any black halo from
   transparent-edge gradients or layer compositing. Hide any inner SVG.
   ---------------------------------------------- */
main#page-hub .sun,
#page-hub.page.active .sun,
#page-hub .sun,
/* Extra-high specificity on the concrete element id to decisively override any late-loaded .sun rules with !important */
#page-hub #sun{
  background: #ffe84d !important;
  background-image: none !important;
  background-color: #ffe84d !important;
  border-radius: 50% !important;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: none !important; /* CRITICAL: No shadows to eliminate black supernova artifact */
  mix-blend-mode: normal !important;
  filter: none !important;
  contain: paint !important; /* isolate painting to this element to prevent compositing halos */
  transform: translate(-50%, -50%) !important; /* avoid 3D layer */
  pointer-events: none !important;
}
#page-hub #sun .sun-sprite{ display:none !important; }
/* Nuke any pseudo-element halos/flares added by upstream CSS */
#page-hub .sun::before,
#page-hub .sun::after,
#page-hub #sun::before,
#page-hub #sun::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  mix-blend-mode: normal !important;
}

/* ====================================
   EXPERIMENTAL VARIANTS (removed): envelope/feet animations permanently disabled
   ==================================== */

/* AI_TAG: FRONTEND_RENDER | Mobile envelope vertical alignment fix
   The letter sat too low on phones. We override the mobile top margin to a
   width-proportional negative value so it stays snug under the toes.
  Chosen approach: ratio-based lift with safe-area tweak. */

/* AI_TAG: FRONTEND_RENDER | Envelope foot alignment (desktop/base)
   Nudge the envelope so it visually sits in the grip of the toes. We keep
   transforms static (animations disabled above) and apply small, explicit
   offsets. Use !important to reliably override minified site CSS. */
#pWrap .pigeon-envelope{
  /* Restore legacy envelope grip position at the feet */
  left: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
  /* Lower the envelope to sit snugly under the toes (further) */
  margin-top: -30px !important;
  transform: translateX(7px) translateY(10px) rotate(2deg) !important;
}

/* Shadow alignment to match the lifted envelope */
#pWrap .pigeon-envelope::after{
  /* AI_TAG: FRONTEND_RENDER | Envelope shadow disabled */
  content: none !important;
}

/* AI_TAG: FRONTEND_RENDER | Mobile-specific alignment
   Keep the envelope snug on narrow screens, accounting for safe-area. */
@media (max-width: 720px){
  #pWrap .pigeon-envelope{
    width: 96px !important;
    margin-top: -28px !important; /* slightly lower (closer to toes) on mobile */
    transform: translateX(9px) translateY(12px) rotate(2deg) !important; /* keep slightly right/down on mobile too */
  }
}

/* Standalone pigeon alignment (outside hub's #pWrap) */
.standalone-pigeon .pigeon-envelope{
  /* Match legacy envelope position for standalone too */
  left: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
  margin-top: -30px !important;
  transform: translateX(7px) translateY(10px) rotate(2deg) !important;
}
@media (max-width: 720px){
  .standalone-pigeon .pigeon-envelope{
    width: 96px !important;
    margin-top: -28px !important;
    transform: translateX(6px) translateY(10px) rotate(2deg) !important;
  }
}
@supports (margin-top: env(safe-area-inset-top)){
  @media (max-width: 720px){
    #pWrap .pigeon-envelope{
      /* Minor compensation for dynamic mobile URL bars */
      margin-top: calc(-34px + (env(safe-area-inset-top, 0px) * -0.08)) !important; /* down 4px */
    }
  }
}


/* AI_TAG: FRONTEND_RENDER | Lock feet + envelope swing together */
/* Register a typed custom property so the angle can animate smoothly even with !important transforms */
@property --carry-swing{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}


/* AI_TAG: FRONTEND_RENDER | Soft bounce for whole pigeon + envelope
   Replace any prior swing with a gentle vertical bob on the shared wrapper. */
@keyframes softFloat{
  0%,100%{ transform: translate(-50%, -50%) translateY(-4px); }
  50%    { transform: translate(-50%, -50%) translateY(4px); }
}

/* Apply bounce to the wrapper so bird and envelope move together */
#pWrap{ animation: softFloat 4.6s ease-in-out infinite !important; }

/* AI_TAG: FRONTEND_RENDER | Hub pigeon stacking + leg positioning
  Ensure a positioned stacking context and enforce the corrected 6px leg lift behind the toes. */
#pWrap{ isolation: isolate; }
#pWrap #frontToesOverlay{ z-index: 4 !important; }

/* Ensure front toes are visible and not clipped */
#pWrap #myPigeon .front-toes,
#pWrap #frontToesOverlay .front-toes{
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* (Removed) Positioning overrides for legs/toes layers.
   Graphics should not depend on settings.override.css for geometry. */

/* Ensure leg stems are visible; do not force color here (handled in graphics). */
#pWrap #frontLegsBack .foot-main-left,
#pWrap #frontLegsBack .foot-main-right,
#pWrap .front-stems .foot-main-left,
#pWrap .front-stems .foot-main-right{
  display: inline !important;
  opacity: 1 !important;
  stroke-linecap: round !important;
  stroke-width: 1.8 !important; /* match standalone builder */
}

/* Ensure toe segments are visible; do not force color here. */
#pWrap #leftToesBack .toe-left,
#pWrap #frontToesOverlay .toe-right,
#pWrap .front-toes .toe-left,
#pWrap .front-toes .toe-right{
  display: inline !important;
  opacity: 1 !important;
  stroke-linecap: round !important;
  stroke-width: 1.5 !important;
}

@media (prefers-reduced-motion: reduce){
  #pWrap{ animation: none !important; }
}

/* AI_TAG: FRONTEND_RENDER | FORCE: Ensure RIGHT wings always flap with correct pivot
   Purpose: Some environments or cascade rules were preventing right wings from animating.
   This ultra-high-specificity rule is appended here as a final override to guarantee
   the working elder pivot (76px 66px) and the calm flap animation are applied.
*/
main#page-hub .wing-right,
#page-hub.page.active .wing-right,
#pWrap .wing-right,
.flyby-pigeon .wing-right,
.sidePigeon .wing-right,
#incomingLeft .wing-right,
#incomingRight .wing-right,
.backgroundPigeon .wing-right,
#fxLayer .wing-right,
.pigeon-instance .wing-right{
  animation: wingFlapRight15 1.2s var(--wing-flap-ease, ease-in-out) infinite !important;
  transform-origin: 76px 66px !important;
  transform-box: view-box !important;
  will-change: transform !important;
}



/* Feet: 200% amplitude */

/* AI_TAG: FRONTEND_RENDER | Front-toes base static; per-foot grip animates in animations/pigeon.css */
#pWrap #frontToesOverlay .front-toes,
#pWrap #myPigeon .front-toes{
  animation: none !important;
  transform: none !important;
  transform-box: fill-box !important;
}

/* ----------------------------------------------
   AI_TAG: FRONTEND_RENDER | HUD bottom bar simplification
   Show only Paper, Feathers, and Stamina; emphasize icons for visibility
   ---------------------------------------------- */

/* Hide non-essential chips on the HUD dock */
#chipFlyby,
#chipShortstop,
#chipXP {
  display: none !important;
}

/* Make the resource icons larger and add subtle glow for contrast */
.hud-dock .chip .chip-icon {
  display: inline-block;
  overflow: visible;
  transform-origin: center;
  transform-box: fill-box;
}
/* AI_TAG: FRONTEND_RENDER | Feather icon bottom bar size reduced 25% with safeguards */
.hud-dock .chip .feather-icon-hud {
  /* Previous size: 14x28 (already an override of base 14x28 / dock 18x36). Reduce by ~25% => 10.5x21 → rounded to 11x22 */
  width: 11px !important;
  height: 22px !important;
  min-width: 11px !important; /* Prevent collapse/invisibility */
  min-height: 22px !important;
  display: inline-block !important;
  transform: rotate(-25deg) !important;
  transform-origin: center !important;
  background: linear-gradient(135deg, #ffffff 0%, #d0d0d0 50%, #ffffff 100%) !important;
  border-radius: 50% 50% 50% 0 !important;
  box-shadow: 0 2px 3px rgba(0,0,0,0.35);
  opacity: 1 !important;
}

/* Reduce paper and stamina icons to match feathers height using scale variable */
#chipPaper .chip-icon,
#chipStamina .chip-icon {
  --chip-icon-scale: 0.8;
}

/* Stronger glow for Paper & Feathers specifically */
#chipPaper .chip-icon,
#chipFeathers .chip-icon,
#chipFeathers .feather-icon-animated,
#chipFeathers .feather-icon-svg,
#chipFeathers .feather-icon-hud {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(255, 240, 200, 0.25)) !important;
}

/* Ensure feather icon maintains proper aspect and visibility */
#featherIcon.feather-icon-hud {
  /* Match reduced HUD chip feather size */
  width: 11px !important;
  height: 22px !important;
  min-width: 11px !important;
  min-height: 22px !important;
}

/* Mobile-specific feather visibility fix */
@media (max-width: 720px) {
  .hud-dock .chip .feather-icon-animated,
  .hud-dock .chip .feather-icon-svg,
  .hud-dock .chip .feather-icon-hud,
  #featherIcon.feather-icon-hud {
    /* Mobile: scale 11x22 by 0.85 instead of full 0.75 of original mobile (12x24) to retain visibility on small screens */
    width: 9px !important;
    height: 18px !important;
    min-width: 9px !important;
    min-height: 18px !important;
  }
  /* Maintain ~10% reduction scale on mobile without shrinking container drastically */
  #chipPaper .chip-icon,
  #chipStamina .chip-icon {
    --chip-icon-scale: 0.9;
  }
}

/* ====================================
   FRONT VIEW WING ANIMATION (match debug)
   Force hub front pigeon to use hatchling flaps and pivots.
   This overrides earlier generic right-wing rules that enforce elder flaps.
   ==================================== */
main#page-hub #pWrap #myPigeon .wing-left,
#page-hub.page.active #pWrap #myPigeon .wing-left{
  animation: wingFlapLeft15 1.2s ease-in-out infinite !important;
  transform-origin: 48px 74px !important;
  transform-box: view-box !important;
}
main#page-hub #pWrap #myPigeon .wing-right,
#page-hub.page.active #pWrap #myPigeon .wing-right{
  animation: wingFlapRight15 1.2s ease-in-out infinite !important;
  transform-origin: 80px 74px !important;
  transform-box: view-box !important;
}

/* AI_TAG: FRONTEND_RENDER | LAST RESORT: Reassert right-wing animation if any other rules disabled it */
/* This comes after other overrides to guarantee final state. */
main#page-hub .wing-right,
#page-hub.page.active .wing-right,
#pWrap .wing-right,
.flyby-pigeon .wing-right,
.sidePigeon .wing-right,
#incomingLeft .wing-right,
#incomingRight .wing-right,
.backgroundPigeon .wing-right,
#fxLayer .wing-right,
.pigeon-instance .wing-right{
  animation: wingFlapRight15 1.2s var(--wing-flap-ease, ease-in-out) infinite !important;
  animation-play-state: running !important;
  transform-origin: 76px 66px !important;
  transform-box: view-box !important;
}

/* Enlarge numeric values for readability */
#chipPaper span,
#chipFeathers span,
#chipStamina span {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Slightly increase chip padding to fit larger icons comfortably */
.hud-dock .chip {
  padding: 6px 12px;
  gap: 8px;
}

/* ====================================
  PIGEON FRONT VIEW FIXES (Wings, Beak, Feet)
  ULTRA HIGH SPECIFICITY to override minified CSS
  ==================================== */

/* Hub wings: use hardcoded animation from animations/pigeon.css */
#pWrap #myPigeon .wing-left,
#pWrap #myPigeon .wing-right{
  transform-box: view-box !important;
}

/* Animation assignment handled by animations/pigeon.css - no overrides needed */

/* CRITICAL: Ensure RIGHT wing uses correct pivot/animation even if dist overrides it */
main#page-hub #pWrap #myPigeon .wing-right,
#page-hub.page.active #pWrap #myPigeon .wing-right,
#pWrap #myPigeon .wing-right{
  transform-box: view-box !important;
  /* Hub/front-view hinge differs from elder side: use front-view pivot */
  transform-origin: 80px 74px !important; /* hub/front-view pivot (RIGHT wing) */
  /* Let animations/pigeon.css decide animation and timing based on context */
}

/* AI_TAG: FRONTEND_RENDER | Also bias background pigeon flaps slightly downward */
/* Background pigeon: use library defaults (animations/pigeon.css) */


/* ====================================
  Reduced-motion overrides: re-enable essential flaps/grip
  The dist CSS kills all animations on reduce; we opt-in wings + subtle toe grip.
  ==================================== */
@media (prefers-reduced-motion: reduce){
  /* Keep global minimal bob off, but allow wing flaps + front-toe grip */
  #pWrap #myPigeon .wing-left{ 
    animation: wingFlapLeft15 1.6s ease-in-out infinite !important; 
  }
  #pWrap #myPigeon .wing-right{ 
    animation: wingFlapRight15 1.6s ease-in-out infinite !important; 
  }
  /* Keep subtle per-foot grip; root remains static */
  #pWrap #myPigeon .front-toes .foot-left{ animation: footGrip 3.2s ease-in-out infinite !important; }
  #pWrap #myPigeon .front-toes .foot-right{ animation: footGrip 3.2s ease-in-out infinite reverse !important; }
  /* Background ambient bird: keep a very light flap so the scene isn't dead */
  .backgroundPigeon .wing-left{ animation: wingFlapLeft15 0.8s ease-in-out infinite !important; }
  .backgroundPigeon .wing-right{ animation: wingFlapRight15 0.8s ease-in-out infinite !important; }
}
/* removed dev-only anim-test panel + side pigeon CSS */
/* Egg: show egg, hide torso/head/wings/feet */
main#page-hub #pWrap #myPigeon.life-egg .egg,
#page-hub.page.active #pWrap #myPigeon.life-egg .egg{ 
  display: inline !important; 
}
main#page-hub #pWrap #myPigeon.life-egg .torso,
#page-hub.page.active #pWrap #myPigeon.life-egg .torso,
main#page-hub #pWrap #myPigeon.life-egg .head,
#page-hub.page.active #pWrap #myPigeon.life-egg .head,
main#page-hub #pWrap #myPigeon.life-egg .eye,
#page-hub.page.active #pWrap #myPigeon.life-egg .eye,
main#page-hub #pWrap #myPigeon.life-egg .beak,
#page-hub.page.active #pWrap #myPigeon.life-egg .beak,
main#page-hub #pWrap #myPigeon.life-egg .belly,
#page-hub.page.active #pWrap #myPigeon.life-egg .belly,
main#page-hub #pWrap #myPigeon.life-egg .wing-left,
#page-hub.page.active #pWrap #myPigeon.life-egg .wing-left,
main#page-hub #pWrap #myPigeon.life-egg .wing-right,
#page-hub.page.active #pWrap #myPigeon.life-egg .wing-right,
main#page-hub #pWrap #myPigeon.life-egg .front-toes,
#page-hub.page.active #pWrap #myPigeon.life-egg .front-toes{ 
  display:none !important; 
}

/* Juvenile: soften only; avoid double-transform stacking on torso */
main#page-hub #pWrap #myPigeon.life-juvenile .torso,
#page-hub.page.active #pWrap #myPigeon.life-juvenile .torso,
main#page-hub .sidePigeon.life-juvenile .torso,
#page-hub.page.active .sidePigeon.life-juvenile .torso{
  transform: translateY(5px) !important;
}
main#page-hub #pWrap #myPigeon.life-juvenile .head,
#page-hub.page.active #pWrap #myPigeon.life-juvenile .head{ 
  cx: 104px !important; 
}
main#page-hub #pWrap #myPigeon.life-juvenile .beak,
#page-hub.page.active #pWrap #myPigeon.life-juvenile .beak{ 
  transform: rotate(2deg) !important; 
}
main#page-hub #pWrap #myPigeon.life-juvenile .wing-left,
#page-hub.page.active #pWrap #myPigeon.life-juvenile .wing-left{ 
  animation-duration: 1.0s !important; 
}
main#page-hub #pWrap #myPigeon.life-juvenile .wing-right,
#page-hub.page.active #pWrap #myPigeon.life-juvenile .wing-right{ 
  animation-duration: 1.0s !important; 
}

/* Elder: nudge head closer; slow wings */
main#page-hub #pWrap #myPigeon.life-elder .head,
#page-hub.page.active #pWrap #myPigeon.life-elder .head{ 
  cx: 105px !important; 
}
main#page-hub #pWrap #myPigeon.life-elder .wing-left,
#page-hub.page.active #pWrap #myPigeon.life-elder .wing-left,
main#page-hub #pWrap #myPigeon.life-elder .wing-right,
#page-hub.page.active #pWrap #myPigeon.life-elder .wing-right{ 
  animation-duration: 1.6s !important; 
}

/* AI_TAG: FRONTEND_RENDER | Elder front-view palette polish (lighter, clearer) */
/* Limit to hub front pigeon so side elder visuals remain unchanged */
main#page-hub #pWrap #myPigeon.life-elder .torso,
#page-hub.page.active #pWrap #myPigeon.life-elder .torso,
main#page-hub #pWrap #myPigeon.life-elder .head,
#page-hub.page.active #pWrap #myPigeon.life-elder .head{
  /* Lighten elder body/head for better contrast on hub */
  fill: #c5d1dc !important; /* was gradient; use soft flat fill for clarity */
}
main#page-hub #pWrap #myPigeon.life-elder .wing-left,
#page-hub.page.active #pWrap #myPigeon.life-elder .wing-left,
main#page-hub #pWrap #myPigeon.life-elder .wing-right,
#page-hub.page.active #pWrap #myPigeon.life-elder .wing-right{
  fill: #b1c1cf !important; /* slightly lighter wings */
  opacity: 0.92 !important;
}
main#page-hub #pWrap #myPigeon.life-elder .belly,
#page-hub.page.active #pWrap #myPigeon.life-elder .belly{
  fill: #bdc9d4 !important;
}
main#page-hub #pWrap #myPigeon.life-elder .beak,
#page-hub.page.active #pWrap #myPigeon.life-elder .beak{
  fill: #e6ad58 !important; /* slightly muted gold */
}
/* Ensure front-toes overlay lines are visible; do NOT enforce stroke color here.
   Graphics are self-contained and define their own gradients (footFlow/dbgFootFront). */
main#page-hub #pWrap #frontToesOverlay .front-toes line,
#page-hub.page.active #pWrap #frontToesOverlay .front-toes line,
/* Fallback: if symbol lacks .front-toes grouping, target all toe lines in overlay */
main#page-hub #pWrap #frontToesOverlay line,
#page-hub.page.active #pWrap #frontToesOverlay line,
main#page-hub #pWrap #frontToesOverlay path.toe,
#page-hub.page.active #pWrap #frontToesOverlay path.toe{
  /* color left to inline SVGs to avoid cascade conflicts */
  stroke-linecap: round !important;
  stroke-width: 1.4 !important; /* match symbol */
  opacity: 1 !important;
}
/* Ensure the middle toes (toe-2) are never hidden or collapsed by upstream minified rules */
main#page-hub #pWrap #frontToesOverlay .toe-left.toe-2,
#page-hub.page.active #pWrap #frontToesOverlay .toe-left.toe-2,
main#page-hub #pWrap #frontToesOverlay .toe-right.toe-2,
#page-hub.page.active #pWrap #frontToesOverlay .toe-right.toe-2{
  opacity: 1 !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}
/* Ensure toe-3 (third angled toe) is visible on overlay feet */
main#page-hub #pWrap #frontToesOverlay .toe-left.toe-3,
#page-hub.page.active #pWrap #frontToesOverlay .toe-left.toe-3,
main#page-hub #pWrap #frontToesOverlay .toe-right.toe-3,
#page-hub.page.active #pWrap #frontToesOverlay .toe-right.toe-3{
  opacity: 1 !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}
/* Ensure the simplified feet (/|\) keep visible middle toes in new IDs */
#pWrap #footLeftBack .toe-left.toe-2,
#pWrap #footLeftBack .toe-right.toe-2,
#pWrap #footRightFront .toe-left.toe-2,
#pWrap #footRightFront .toe-right.toe-2{
  opacity: 1 !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}
/* Apply the same visibility guarantees to the left/back toes layer for toe-2 */
#pWrap #leftToesBack .toe-left.toe-2,
#pWrap #leftToesBack .toe-right.toe-2{
  opacity: 1 !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}
/* Ensure toe-3 (third angled toe) is always visible on all feet layers */
#pWrap #footLeftBack .toe-left.toe-3,
#pWrap #footLeftBack .toe-right.toe-3,
#pWrap #footRightFront .toe-left.toe-3,
#pWrap #footRightFront .toe-right.toe-3,
#pWrap #leftToesBack .toe-left.toe-3,
#pWrap #leftToesBack .toe-right.toe-3{
  opacity: 1 !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}
/* General toe-3 visibility for standalone pigeons */
#pWrap .pigeon-instance .toe-left.toe-3,
#pWrap .pigeon-instance .toe-right.toe-3{
  opacity: 1 !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}
/* General toe visibility for standalone pigeons */
#pWrap .pigeon-instance .toe-left.toe-1,
#pWrap .pigeon-instance .toe-left.toe-2,
#pWrap .pigeon-instance .toe-right.toe-1,
#pWrap .pigeon-instance .toe-right.toe-2{
  opacity: 1 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}
main#page-hub .sidePigeon.life-elder .head,
#page-hub.page.active .sidePigeon.life-elder .head{ 
  cx: 100px !important; 
}
main#page-hub .sidePigeon.life-elder .beak,
#page-hub.page.active .sidePigeon.life-elder .beak{ 
  cx: 100px !important; 
}

/* Front pigeon beak positions: elder lowest, juvenile middle, adult highest */
main#page-hub #pWrap #myPigeon.life-juvenile .beak,
#page-hub.page.active #pWrap #myPigeon.life-juvenile .beak{
  transform: translateY(-4px) !important;
}
main#page-hub #pWrap #myPigeon .beak,
#page-hub.page.active #pWrap #myPigeon .beak{
  transform: translateY(-5px) !important;
}
main#page-hub #pWrap #myPigeon.life-elder .beak,
#page-hub.page.active #pWrap #myPigeon.life-elder .beak{
  transform: translateY(-4px) !important;
}
main#page-hub #pWrap #myPigeon.life-elder .eyebrow,
#page-hub.page.active #pWrap #myPigeon.life-elder .eyebrow{
  transform: translateY(-2px) !important;
}

/* ====================================
   SIDE PIGEON FIXES (Adults/Elders)
   ULTRA HIGH SPECIFICITY
   ==================================== */
/* AI_TAG: FRONTEND_RENDER | Minimal leg/feet for side pigeons (landing + sitting) */
main#page-hub .sidePigeon,
#page-hub.page.active .sidePigeon,
.sidePigeon,
main#page-hub .sidePigeon.landing,
#page-hub.page.active .sidePigeon.landing,
.sidePigeon.landing,
main#page-hub .sidePigeon.sitting,
#page-hub.page.active .sidePigeon.sitting,
.sidePigeon.sitting{
  position: relative !important;
}
/* AI_TAG: FRONTEND_RENDER | Side leg stem (render across states; tiny and subtle) */
main#page-hub .sidePigeon::before,
#page-hub.page.active .sidePigeon::before,
.sidePigeon::before,
main#page-hub .sidePigeon.landing::before,
#page-hub.page.active .sidePigeon.landing::before,
.sidePigeon.landing::before,
main#page-hub .sidePigeon.sitting::before,
#page-hub.page.active .sidePigeon.sitting::before,
.sidePigeon.sitting::before{
  content:"" !important;
  position:absolute !important;
  left:calc(50% + 1px) !important;
  bottom:16px !important; /* AI_TAG: FRONTEND_RENDER | Grey V-shaped leg: 3px up from 19px, 1px right, z-index 0 (behind foot) */
  /* Grey triangle leg – single inverted isosceles triangle (smaller) */
  width:14px !important;
  height:12px !important;
  /* Push the leg slightly forward/right by 3px while keeping centering for animations */
  transform:translateX(calc(-50% + 3px)) !important;
  background: #c3ccd6 !important;
  -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%) !important;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%) !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18)) !important;
  pointer-events: none !important;
  z-index: 0 !important; /* behind foot (::after which uses auto/default) */
}
/* AI_TAG: FRONTEND_RENDER | Side foot pad */
main#page-hub .sidePigeon::after,
#page-hub.page.active .sidePigeon::after,
.sidePigeon::after,
main#page-hub .sidePigeon.landing::after,
#page-hub.page.active .sidePigeon.landing::after,
.sidePigeon.landing::after,
main#page-hub .sidePigeon.sitting::after,
#page-hub.page.active .sidePigeon.sitting::after,
.sidePigeon.sitting::after{
  /* Remove side foot pad entirely (no yellow/beige shapes) */
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  opacity: 0 !important;
}

/* AI_TAG: FRONTEND_RENDER | Side adult: restore subtle foot pad and correct wing flaps
   The adult side pigeon should show a small foot pad and use the calmer side flap timing. */
main#page-hub .sidePigeon.life-adult::after,
#page-hub.page.active .sidePigeon.life-adult::after,
.sidePigeon.life-adult::after{
  /* Re-introduce a tiny ground-contact pad for adults only */
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  width: 18px !important;
  height: 6px !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(ellipse at center, #c8a874 60%, #b08f5e 100%) !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18)) !important;
  opacity: 0.95 !important;
}

/* AI_TAG: FRONTEND_RENDER | Side adult wing animation: match side cadence and pivots */
main#page-hub .sidePigeon.life-adult .wing-left,
#page-hub.page.active .sidePigeon.life-adult .wing-left,
.sidePigeon.life-adult .wing-left{
  animation: oldWingLeft 2.2s ease-in-out infinite !important;
  transform-origin: 46px 66px !important;
  transform-box: view-box !important;
}
main#page-hub .sidePigeon.life-adult .wing-right,
#page-hub.page.active .sidePigeon.life-adult .wing-right,
.sidePigeon.life-adult .wing-right{
  animation: oldWingRight 2.2s ease-in-out infinite !important;
  transform-origin: 76px 66px !important;
  transform-box: view-box !important;
}

/* AI_TAG: FRONTEND_RENDER | Ensure inline pigeon instances (age-stage-sym-body = adult) flap correctly too */
.pigeon-instance.age-stage-sym-body .wing-left{
  animation: oldWingLeft 2.2s ease-in-out infinite !important;
  transform-origin: 46px 66px !important;
  transform-box: view-box !important;
  animation-play-state: running !important;
}
.pigeon-instance.age-stage-sym-body .wing-right{
  animation: oldWingRight 2.2s ease-in-out infinite !important;
  transform-origin: 76px 66px !important;
  transform-box: view-box !important;
  animation-play-state: running !important;
}

/* AI_TAG: FRONTEND_RENDER | Align adult beak with hub main pigeon for inline SVG side instances */
.pigeon-instance.age-stage-sym-body .beak{
  transform-box: fill-box !important;
  transform-origin: 10% 50% !important;
  transform: translateY(-5px) rotate(6deg) !important;
}
/* AI_TAG: FRONTEND_RENDER | Apply elder-correct RIGHT wing flap to any side pigeons that render SVG wings */
/* Target common cases: inline .pigeon-instance under incoming lanes, or potential .sidePigeon svg markup */
/* COMPREHENSIVE: Ensure ALL right wings use the working elder configuration (76px 66px pivot) */
/* NOTE: All right wings now handled by animations/pigeon.css comprehensive rule at the top */

/* Left wing animation and timing are defined in animations/pigeon.css; avoid overriding here. */

/* ====================================
   WING GEOMETRY ADJUSTMENTS (Side views)
   ==================================== */
/* AI_TAG: FRONTEND_RENDER | Juvenile side: shorten wings by 10% and drop side body slightly */
main#page-hub .sidePigeon.life-juvenile .wing-left,
#page-hub.page.active .sidePigeon.life-juvenile .wing-left,
main#page-hub .sidePigeon.life-juvenile .wing-right,
#page-hub.page.active .sidePigeon.life-juvenile .wing-right{
  /* Length reduction by 10% along X axis; keep thickness */
  --wing-scale-x: 0.9;
  --wing-scale-y: 1;
  transform-box: view-box !important;
}
/* AI_TAG: FRONTEND_RENDER | Juvenile side body: move down a bit for posture */
main#page-hub .sidePigeon.life-juvenile .torso,
#page-hub.page.active .sidePigeon.life-juvenile .torso,
main#page-hub .pigeon-instance.age-stage-sym-juvenile .torso,
#page-hub.page.active .pigeon-instance.age-stage-sym-juvenile .torso{
  /* Make juvenile side body a touch fatter for cuteness/readability */
  transform: translateY(10px) scaleX(1.08) !important; /* +8% width */
  transform-origin: 64px 84px !important; /* center-ish of torso */
  transform-box: view-box !important;
}

/* AI_TAG: FRONTEND_RENDER | Elder side: slim wings by 10% (thickness on Y axis) */
main#page-hub .sidePigeon.life-elder .wing-left,
#page-hub.page.active .sidePigeon.life-elder .wing-left,
main#page-hub .sidePigeon.life-elder .wing-right,
#page-hub.page.active .sidePigeon.life-elder .wing-right{
  /* Make side-elder wings shorter by 30% (scale-x 0.7) and 10% thinner (scale-y 0.9)
     Also push left/right slightly outward so they read as 'pushed' */
  --wing-scale-x: 0.7; /* 30% shorter */
  --wing-scale-y: 0.9; /* 10% thinner */
  /* Per-wing horizontal push (applied via keyframes/transform translateX) */
  --wing-translate-x: 0px; /* default for grouped selector */
  /* Individual wing offsets below (more specific) */
  transform-box: view-box !important;
}

/* Specific push for left/right elder side wings (ensure outward push) */
main#page-hub .sidePigeon.life-elder .wing-left,
#page-hub.page.active .sidePigeon.life-elder .wing-left{
  --wing-translate-x: -6px; /* push left wing slightly left */
}
main#page-hub .sidePigeon.life-elder .wing-right,
#page-hub.page.active .sidePigeon.life-elder .wing-right{
  --wing-translate-x: 6px; /* push right wing slightly right */
}

/* AI_TAG: FRONTEND_RENDER | Gentle bob for side pigeons (redundant to base but survives RM overrides) */
@keyframes sideBobLite{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }

/* Default: keep existing animations; Reduced-motion: allow minimal bob so they don’t look frozen */
@media (prefers-reduced-motion: reduce){
  #incomingLeft .sidePigeon,
  #incomingRight .sidePigeon{
    animation: sideBobLite 4.4s ease-in-out infinite !important;
  }
  /* Keep a tiny grip pulse on the sitting leg to show life */
  .sidePigeon.sitting::before{
    transform-origin: bottom center;
    animation: sideLegGrip 2.8s ease-in-out infinite !important;
  }
}
@keyframes sideLegGrip{ 0%,100%{ transform: translateX(-50%) rotate(0deg) } 50%{ transform: translateX(-50%) rotate(-2deg) } }

/* ====================================
   RESILIENCE: Essentials even when RM is active globally
   ULTRA HIGH SPECIFICITY to override minified reduce-motion kills
   ==================================== */
@media (prefers-reduced-motion: reduce){
  /* Allow tiny flap bias (no big swings) */
  main#page-hub #pWrap #myPigeon .wing-left,
  #page-hub.page.active #pWrap #myPigeon .wing-left{ 
    animation: wingFlapLeft15 1.6s ease-in-out infinite !important; 
  }
  main#page-hub #pWrap #myPigeon .wing-right,
  #page-hub.page.active #pWrap #myPigeon .wing-right{ 
    animation: wingFlapRight15 1.6s ease-in-out infinite !important; 
  }
  /* Keep micro grip (per-foot) */
  main#page-hub #pWrap #myPigeon .front-toes .foot-left,
  #page-hub.page.active #pWrap #myPigeon .front-toes .foot-left{ 
    animation: footGrip 3.2s ease-in-out infinite !important; 
  }
  main#page-hub #pWrap #myPigeon .front-toes .foot-right,
  #page-hub.page.active #pWrap #myPigeon .front-toes .foot-right{ 
    animation: footGrip 3.2s ease-in-out infinite reverse !important; 
  }
  
  /* Side pigeons minimal bob */
  main#page-hub #incomingLeft .sidePigeon,
  #page-hub.page.active #incomingLeft .sidePigeon,
  main#page-hub #incomingRight .sidePigeon,
  #page-hub.page.active #incomingRight .sidePigeon{
    animation: sideBobLite 4.4s ease-in-out infinite !important;
  }
  
  /* Sitting/landing leg grip pulse */
  main#page-hub .sidePigeon::before,
  #page-hub.page.active .sidePigeon::before,
  .sidePigeon::before,
  main#page-hub .sidePigeon.landing::before,
  #page-hub.page.active .sidePigeon.landing::before,
  .sidePigeon.landing::before,
  main#page-hub .sidePigeon.sitting::before,
  #page-hub.page.active .sidePigeon.sitting::before,
  .sidePigeon.sitting::before{
    transform-origin: bottom center !important;
    animation: sideLegGrip 2.8s ease-in-out infinite !important;
  }
}

/* Reduce country block list item sizes to one-third and limit visible to 4 */
.blockedCountriesList {
  max-height: 80px !important;
}
.countryRow {
  padding: 3px 4px !important;
  gap: 4px !important;
  font-size: 0.6rem !important;
  margin: 1px 0 !important;
}
.countryFlag {
  font-size: 0.6em !important;
}

/* Force right wing flapping in all contexts */
.wing-right {
  animation: wingFlapRight15 1.2s ease-in-out infinite !important;
  transform-origin: 76px 66px !important;
  transform-box: fill-box !important;
  animation-play-state: running !important;
}

/* AI_TAG: FRONTEND_RENDER | Day/Night visual polish (override)
   Flat solid sun disk to eliminate rendering artifacts.
   -------------------------------------------------- */
/* AI_TAG: FRONTEND_RENDER | Solid CSS disk sun (no halos)
   Keep the sun as a pure CSS circle to eliminate AA seams and black halos. */
#page-hub .sun{
  background: #ffe84d !important;
  background-color: #ffe84d !important;
  background-image: none !important;
  border-radius: 50% !important;
  border: 0 !important;
  box-shadow: none !important; /* CRITICAL: No shadows to eliminate black supernova */
  mix-blend-mode: normal !important;
  filter: none !important;
  outline: none !important;
  background-clip: padding-box !important;
  transition: opacity 1s ease !important;
  /* Use simple -50% translate to align with percent left/top; avoid 3D layer */
  transform: translate(-50%, -50%) !important;
  backface-visibility: hidden;
  will-change: left, top, opacity !important;
  pointer-events: none !important;
}
/* Hide any inner SVG sprite to avoid double-render and seams */
#page-hub #sun .sun-sprite{ display: none !important; }
#page-hub .moon{
  background-color: #e8e8c8 !important;
  background: #e8e8c8 !important; /* SOLID COLOR to prevent any gradient artifacts */
  background-image: none !important;
  box-shadow: none !important;
  transition: opacity 1s ease !important;
  backface-visibility: hidden;
  will-change: left, top, opacity;
  /* Match sun transform: use simple -50% translate, NOT calc()
     This ensures consistent and predictable positioning */
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}
#page-hub .sun.visible,
#page-hub .moon.visible{
  pointer-events: auto !important;
}

/* Subtle sunrise/sunset phase flags for sky background transitions */
#page-hub .sky.sunrise{ transition: background 0.8s ease; }
#page-hub .sky.sunset{ transition: background 0.8s ease; }

/* Ensure blend-modes (screen) don't interact with the whole page backdrop */
/* This creates a new stacking context so halo/flare/rays blend only with the hub stage */
#page-hub .stage{
  isolation: isolate;
}

/* Neutralize any darkening artifacts: ensure atmospheric layers only lighten the scene */
#page-hub .hazeLayer,
#page-hub .rayLayer{
  mix-blend-mode: screen !important; /* prevent dark halos when overlapping gradients */
  will-change: opacity, background !important;
}

/* AI_TAG: FRONTEND_RENDER | Sun halo/flare removed completely
   - Removed halo and flare elements to prevent any rendering artifacts
   - Sun gradient provides all necessary visual aura effects
   - Clean, artifact-free day/night cycle
*/
/* Belt-and-suspenders: hide any legacy halo/flare/ray/haze nodes if they appear */
#page-hub #sunHalo,
#page-hub .sunHalo,
#page-hub #sunFlare,
#page-hub .sunFlare,
#page-hub #hazeLayer,
#page-hub #rayLayer{
  display: none !important;
}

/* Global kill-switch: ensure any stray legacy atmospheric overlays are disabled app-wide.
   This defends against debug UIs or late-loaded bundles inserting them outside #page-hub. */
.sunHalo,
#sunHalo,
.sunFlare,
#sunFlare,
.hazeLayer,
#hazeLayer,
.rayLayer,
#rayLayer{
  display: none !important;
}

/* Ensure the sun/moon layer between halo and flare for intuitive stacking */
/* Ensure stage fills the viewport for all absolute children (matches base styles) */
#page-hub .stage{ position: absolute; inset: 0; }

/* Put sun/moon decisively on top; keep them artifact-free */
#page-hub .sun{ z-index: 7; position: absolute; }
#page-hub .moon{ z-index: 7; position: absolute; }

/* The rules previously here were moved to styles.css to avoid conflicts. */

/* AI_TAG: FRONTEND_RENDER | Daytime sky cleanup
   During the day, the sky should have no celestial bodies visible — only clouds.
   Enforce this at the CSS layer to be resilient to any late JS or class toggles. */
body.phase-day #page-hub .sun,
body.phase-day #page-hub .moon,
body.phase-day #page-hub .star,
body.phase-day #particleLayer{
  display: none !important;
}

/* AI_TAG: FRONTEND_RENDER | DayNight NEO variable-driven rendering (halo-free) */
/* Positions and opacities controlled purely by CSS variables to avoid class flicker */
#page-hub .sun{
  left: var(--sun-x, -200%);
  top: var(--sun-y, -200%);
  opacity: var(--sun-opacity, 0) !important;
  /* ABSOLUTE PROTECTION AGAINST BLACK SUPERNOVA */
  background: #ffe84d !important;
  background-color: #ffe84d !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  outline: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  backface-visibility: hidden !important;
  transform: translate(-50%, -50%) !important;
  will-change: left, top, opacity !important;
  pointer-events: none !important;
}
#page-hub .moon{
  left: var(--moon-x, -200%);
  top: var(--moon-y, -200%);
  opacity: var(--moon-opacity, 0) !important;
}
#page-hub #particleLayer{
  opacity: var(--stars-opacity, 0);
  transition: opacity 1s ease, transform 0.5s ease;
  pointer-events: none;
  transform: translate(var(--stars-parallax-x, 0px), var(--stars-parallax-y, 0px));
}

/* Cloud tinting via variables (no blend modes) */
#page-hub .cloud{
  background: var(--cloud-color, #ffffff18) !important;
  filter: var(--cloud-filter, none) !important;
  opacity: var(--cloud-opacity, 0.8) !important;
}

/* AI_TAG: FRONTEND_RENDER | Weather layer (separate from day/night) */
#page-hub #weatherLayer{
  position:absolute; inset:0;
  z-index:6; /* above clouds and terrain for clear visibility; below sun/moon (z=7) */
  pointer-events:none;
}

/* Rain: diagonal streaks via repeating-linear-gradient; animated by background-position */
#page-hub #weatherLayer.w-rain{
  --rain-alpha: var(--rain-alpha, 0.14);
  --rain-gap: var(--rain-gap, 18px);
  --rain-thickness: var(--rain-thickness, 1px);
  --rain-speed: var(--rain-speed, 120px);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(200,220,255,var(--rain-alpha)) 0px,
      rgba(200,220,255,var(--rain-alpha)) var(--rain-thickness),
      transparent var(--rain-thickness),
      transparent var(--rain-gap)
    );
  background-size: 100% 100%;
  animation: rainFall var(--rain-anim-dur, 0.9s) linear infinite;
}
@keyframes rainFall{ from{ background-position: 0 0; } to{ background-position: 0 var(--rain-speed); } }

/* Snow: soft dots via repeating-radial-gradient; slow drift down */
#page-hub #weatherLayer.w-snow{
  --snow-alpha: var(--snow-alpha, 0.9);
  --snow-size: var(--snow-size, 2px);
  --snow-gap: var(--snow-gap, 24px);
  --snow-speed: var(--snow-speed, 40px);
  background-image:
    repeating-radial-gradient(circle,
      rgba(255,255,255,var(--snow-alpha)) 0px,
      rgba(255,255,255,var(--snow-alpha)) var(--snow-size),
      transparent var(--snow-size),
      transparent var(--snow-gap)
    );
  background-size: 100% 100%;
  animation: snowFall var(--snow-anim-dur, 4s) linear infinite;
}
@keyframes snowFall{ from{ background-position: 0 0; } to{ background-position: 0 var(--snow-speed); } }

/* Fog: large soft gradient band; gentle horizontal drift */
#page-hub #weatherLayer.w-fog{
  --fog-alpha: var(--fog-alpha, 0.12);
  --fog-y: var(--fog-y, 68%);
  --fog-x: var(--fog-x, 50%);
  --fog-w: var(--fog-w, 1400px);
  --fog-h: var(--fog-h, 600px);
  background:
    radial-gradient(ellipse var(--fog-w) var(--fog-h) at var(--fog-x) var(--fog-y),
      rgba(230,240,255,var(--fog-alpha)) 0%, rgba(230,240,255,0.0) 70%);
  animation: fogDrift var(--fog-anim-dur, 12s) ease-in-out infinite alternate;
}
@keyframes fogDrift{ from{ transform: translateX(-8px); } to{ transform: translateX(10px); } }

/* Thunder: brief flash overlay; JS toggles .w-thunder-flash for a single beat */
#page-hub #weatherLayer.w-thunder-flash{
  background: rgba(255,255,255,0.25);
  animation: thunderFlash 180ms ease-out 1;
}
@keyframes thunderFlash{ 0%{opacity:0;} 30%{opacity:1;} 100%{opacity:0;} }

/* AI_TAG: FRONTEND_DEBUG | DayNight debug overlay */
#dnDebug{
  position:fixed; right:10px; top:74px; z-index:200;
  background: rgba(17,26,38,0.86);
  border:1px solid #1a2430; border-radius:12px;
  padding:8px 10px; color:#e8eff8; font-size:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
#dnDebug .row{ display:flex; align-items:center; gap:8px; }
#dnDebug .row.small{ opacity:0.9; gap:12px; justify-content:space-between; }
#dnDebug input[type=range]{ width: 220px; }

/* Compact buttons for debug overlay */
#dnDebug .btn.btn-mini{
  padding: 3px 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  background:#0e151e !important;
}
#dnDebug .wx{ display:inline-flex; gap:6px; }