/* FormyDog v47 · escena visible, luces, assets extra y estados de boosters */
:root{
  --fd47-blue:#0975dc;
  --fd47-cyan:#6fe8ff;
  --fd47-violet:#aa8cff;
  --fd47-mint:#65e7b4;
  --fd47-gold:#ffd96a;
  --fd47-ink:#12324c;
}

/* El fondo debe sentirse parte del juego, no una marca de agua casi invisible. */
html.fd46-bg-ready body::before,
html.fd47-bg-ready body::before{
  background-image:url('./assets/backgrounds/pet-yard.png')!important;
  opacity:.34!important;
  filter:saturate(1.06) brightness(1.035) contrast(1.02)!important;
  transform:scale(1.035)!important;
}
body::after{
  background:
    radial-gradient(circle at 10% 13%,rgba(111,232,255,.42),transparent 24%),
    radial-gradient(circle at 89% 16%,rgba(170,140,255,.28),transparent 23%),
    radial-gradient(circle at 78% 86%,rgba(101,231,180,.25),transparent 24%),
    radial-gradient(circle at 43% 72%,rgba(255,217,106,.11),transparent 21%),
    linear-gradient(180deg,rgba(243,252,255,.62),rgba(248,252,255,.76) 46%,rgba(232,244,255,.72))!important;
}

/* Luces ambientales inyectadas por JS. No capturan input. */
.fd47-ambient{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none!important;
}
.fd47-light{
  position:absolute;border-radius:50%;filter:blur(22px);opacity:.42;
  will-change:transform,opacity;animation:fd47Float 8s ease-in-out infinite alternate;
}
.fd47-light.one{width:240px;height:240px;left:-72px;top:24%;background:rgba(83,218,255,.34)}
.fd47-light.two{width:270px;height:270px;right:-94px;top:9%;background:rgba(157,125,255,.25);animation-delay:-2.4s}
.fd47-light.three{width:220px;height:220px;right:15%;bottom:-92px;background:rgba(67,226,165,.22);animation-delay:-4.6s}

/* Assets adicionales existentes en /boosters usados como ambientación visual. */
.fd47-scene-decor{
  position:fixed;inset:0;z-index:0;pointer-events:none!important;overflow:hidden;
}
.fd47-scene-decor img{
  position:absolute;width:66px;height:66px;object-fit:contain;opacity:.22;
  filter:drop-shadow(0 12px 18px rgba(16,71,108,.18)) saturate(1.08);
  animation:fd47Bob 5.6s ease-in-out infinite alternate;
}
.fd47-scene-decor .doghouse{left:1.2vw;top:27vh;width:78px;height:78px;transform:rotate(-7deg)}
.fd47-scene-decor .splash{right:1.4vw;bottom:18vh;transform:rotate(7deg);animation-delay:-1.7s}
.fd47-scene-decor .cannon{right:3vw;top:38vh;width:72px;height:72px;transform:rotate(5deg);animation-delay:-3.2s}

.app{z-index:2!important}

/* Header art más visible en escritorio. */
html.fd46-header-art-ready .topbar::after,
html.fd47-header-ready .topbar::after{
  background-image:url('./assets/header/pet-header.png')!important;
  opacity:.19!important;
  filter:saturate(1.12) contrast(1.03)!important;
}

/* Tablero con marco luminoso inequívoco para que el cambio sea visible. */
.board-shell{
  position:relative;
  box-shadow:
    0 22px 52px rgba(11,66,108,.20),
    0 0 0 1px rgba(255,255,255,.84) inset,
    0 0 30px rgba(80,209,255,.20),
    0 0 72px rgba(132,115,255,.09)!important;
}
.board-shell::before{
  opacity:.9!important;
  background:conic-gradient(from 170deg,
    rgba(88,226,255,.36),rgba(166,137,255,.22),rgba(96,233,179,.26),
    rgba(255,217,106,.16),rgba(88,226,255,.36))!important;
  animation:fd47Halo 4.4s ease-in-out infinite alternate!important;
}
.board-shell::after{
  top:0!important;height:4px!important;left:3%!important;right:3%!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),var(--fd47-cyan),var(--fd47-violet),rgba(255,255,255,.98),transparent)!important;
  box-shadow:0 0 11px rgba(107,229,255,.78),0 0 25px rgba(139,129,255,.34)!important;
  animation:fd47Sweep 3.6s ease-in-out infinite!important;
}
.board-mount::after{pointer-events:none!important}

/* Boosters: conexión y selección muy evidentes. */
.boosters{position:relative}
.booster{
  touch-action:manipulation;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.booster:not(:disabled):hover{transform:translateY(-2px) scale(1.012)}
.booster.active{
  transform:translateY(-2px) scale(1.018)!important;
  box-shadow:
    0 0 0 3px rgba(95,226,255,.25),
    0 0 18px rgba(83,215,255,.32),
    0 10px 26px rgba(9,117,220,.18),
    inset 0 1px rgba(255,255,255,.96)!important;
}
.booster.active::before{
  content:"LISTO";position:absolute;right:7px;top:6px;z-index:4;
  padding:2px 6px;border-radius:999px;background:#087adf;color:#fff;
  font:800 8px/1 system-ui,sans-serif;letter-spacing:.45px;
  box-shadow:0 3px 9px rgba(5,84,155,.22);
}
.booster[data-fd47-pulse="1"] img{animation:fd47BoosterPulse .38s ease-out}
.booster:disabled{filter:saturate(.68);opacity:.62}

/* Indicador de salud funcional del puente de boosters. */
.fd47-booster-health{
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:24px;margin:5px 0 2px;padding:4px 8px;border-radius:10px;
  color:#1f4a63;background:rgba(235,250,255,.86);border:1px solid rgba(78,187,229,.24);
  font:800 9px/1.15 system-ui,sans-serif;letter-spacing:.35px;
  box-shadow:inset 0 1px rgba(255,255,255,.88),0 5px 14px rgba(10,77,119,.07);
}
.fd47-booster-health::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#76a5b7;
  box-shadow:0 0 0 3px rgba(118,165,183,.12);
}
.fd47-booster-health[data-state="ready"]::before{background:#24c77a;box-shadow:0 0 0 3px rgba(36,199,122,.14),0 0 10px rgba(36,199,122,.42)}
.fd47-booster-health[data-state="selected"]{color:#0757a1;background:rgba(229,248,255,.94);border-color:rgba(50,181,236,.36)}
.fd47-booster-health[data-state="selected"]::before{background:#1bb9f1;box-shadow:0 0 0 3px rgba(27,185,241,.15),0 0 10px rgba(27,185,241,.48)}
.fd47-booster-health[data-state="busy"]::before{background:#ffbb39;animation:fd47StatusPulse .8s ease-in-out infinite alternate}
.fd47-booster-health[data-state="error"]{color:#9a3540;background:rgba(255,241,242,.94);border-color:rgba(224,96,109,.26)}
.fd47-booster-health[data-state="error"]::before{background:#e95767}

/* Galería visual de assets existentes aún no conectados como power-ups jugables. */
.fd47-power-preview{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:5px;padding:5px;
  border-radius:12px;background:rgba(247,252,255,.78);border:1px solid rgba(95,178,220,.14);
}
.fd47-power-preview span{
  display:grid;place-items:center;min-width:0;aspect-ratio:1;border-radius:9px;
  background:rgba(255,255,255,.76);box-shadow:inset 0 1px rgba(255,255,255,.9);
}
.fd47-power-preview img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(20,73,104,.16))}
.fd47-power-preview-label{grid-column:1/-1;text-align:center;font:800 7px/1 system-ui,sans-serif;color:#57788c;letter-spacing:.5px}

.fd47-flash{
  position:fixed;inset:0;z-index:9998;pointer-events:none!important;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.52),rgba(92,218,255,.12) 35%,transparent 67%);
}
.fd47-flash.show{animation:fd47Flash .42s ease-out}

@keyframes fd47Float{from{transform:translate3d(-6px,-4px,0) scale(.96);opacity:.27}to{transform:translate3d(9px,8px,0) scale(1.06);opacity:.5}}
@keyframes fd47Bob{from{translate:0 -3px}to{translate:0 5px}}
@keyframes fd47Halo{from{transform:scale(.991) rotate(-1deg);opacity:.62}to{transform:scale(1.012) rotate(1deg);opacity:.95}}
@keyframes fd47Sweep{0%,12%{transform:translateX(-18%);opacity:.2}50%{opacity:1}88%,100%{transform:translateX(18%);opacity:.2}}
@keyframes fd47BoosterPulse{0%{transform:scale(.92)}55%{transform:scale(1.13)}100%{transform:scale(1)}}
@keyframes fd47StatusPulse{from{opacity:.55;transform:scale(.86)}to{opacity:1;transform:scale(1.08)}}
@keyframes fd47Flash{0%{opacity:0}22%{opacity:.72}100%{opacity:0}}

@media(max-width:900px){
  html.fd46-bg-ready body::before,html.fd47-bg-ready body::before{opacity:.20!important;background-position:50% 45%}
  .fd47-scene-decor .cannon{display:none}
  .fd47-scene-decor .doghouse{width:48px;height:48px;left:-7px;top:31vh;opacity:.12}
  .fd47-scene-decor .splash{width:46px;height:46px;right:-7px;bottom:13vh;opacity:.11}
  .fd47-light{filter:blur(28px);opacity:.28}
  .fd47-power-preview{display:none}
  .fd47-booster-health{min-height:16px;margin:1px 2px;padding:2px 4px;font-size:6.5px;border-radius:7px}
  .fd47-booster-health::before{width:5px;height:5px}
  .booster.active::before{font-size:6px;padding:2px 4px;right:2px;top:2px}
}

@media(max-width:430px){
  html.fd46-bg-ready body::before,html.fd47-bg-ready body::before{opacity:.15!important}
  .fd47-scene-decor{display:none}
  .fd47-light.one{width:150px;height:150px}
  .fd47-light.two{width:170px;height:170px}
  .fd47-light.three{display:none}
}

@media(prefers-reduced-motion:reduce){
  .fd47-light,.fd47-scene-decor img,.board-shell::before,.board-shell::after,.booster[data-fd47-pulse="1"] img,.fd47-booster-health::before{animation:none!important}
}