/* FormyDog v46 · background real + luces y profundidad sin tocar Phaser */
:root{
  --fd46-sky:#dff7ff;
  --fd46-blue:#0d74d8;
  --fd46-cyan:#69dcff;
  --fd46-violet:#9b82ff;
  --fd46-mint:#62e3ad;
  --fd46-gold:#ffd867;
  --fd46-coral:#ff816f;
}

html,body{background:linear-gradient(180deg,#e8f9ff 0%,#f7fcff 46%,#eaf3ff 100%)!important}
body{position:relative;isolation:isolate}
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;transform:scale(1.025);transition:opacity .65s ease;
  filter:saturate(.96) brightness(1.04);
}
html.fd46-bg-ready body::before{background-image:url('./assets/backgrounds/pet-yard.png');opacity:.22}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 14% 12%,rgba(105,220,255,.34),transparent 26%),
    radial-gradient(circle at 84% 18%,rgba(155,130,255,.22),transparent 25%),
    radial-gradient(circle at 76% 82%,rgba(98,227,173,.22),transparent 27%),
    linear-gradient(180deg,rgba(239,251,255,.72),rgba(248,252,255,.82) 45%,rgba(230,242,255,.78));
}

.app{position:relative;z-index:1}
.app::before,.app::after{
  content:"";position:fixed;pointer-events:none;z-index:-1;background-repeat:no-repeat;background-size:contain;
  opacity:0;transition:opacity .5s ease,transform .5s ease;filter:drop-shadow(0 18px 22px rgba(14,65,102,.16));
}
html.fd46-pets-ready .app::before{background-image:url('./pets/cat-orange.png');opacity:.18}
html.fd46-pets-ready .app::after{background-image:url('./pets/dog-white-tan.png');opacity:.17}
.app::before{width:150px;height:150px;left:2vw;bottom:7vh;transform:rotate(-5deg)}
.app::after{width:170px;height:170px;right:1vw;top:15vh;transform:rotate(4deg)}

.topbar{position:relative;overflow:hidden!important}
.topbar::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(110deg,rgba(255,255,255,.62),rgba(105,220,255,.12) 42%,rgba(155,130,255,.12));
}
.topbar>*{position:relative;z-index:2}
.topbar::after{content:"";display:none;position:absolute;right:0;top:50%;width:310px;height:118px;transform:translateY(-50%);background-size:contain;background-position:right center;background-repeat:no-repeat;opacity:.12;pointer-events:none;z-index:1;filter:saturate(1.08)}
html.fd46-header-art-ready .topbar::after{background-image:url('./assets/header/pet-header.png')}

.board-shell{
  isolation:isolate;
  box-shadow:0 20px 46px rgba(12,68,110,.18),0 0 0 1px rgba(255,255,255,.72) inset,0 0 34px rgba(105,220,255,.13)!important;
}
.board-shell::before{
  background:conic-gradient(from 180deg at 50% 50%,rgba(105,220,255,.22),rgba(155,130,255,.15),rgba(98,227,173,.18),rgba(255,216,103,.10),rgba(105,220,255,.22))!important;
  filter:blur(18px)!important;opacity:.74!important;animation:fd46Halo 5.2s ease-in-out infinite alternate!important;
}
.board-shell::after{
  left:4%!important;right:4%!important;top:0!important;height:3px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),var(--fd46-cyan),rgba(255,255,255,.98),transparent)!important;
  box-shadow:0 0 18px rgba(105,220,255,.58);animation:fd46Sweep 4.2s ease-in-out infinite!important;
}
.board-mount{position:relative;border-radius:inherit;overflow:hidden}
.board-mount::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:25;
  background:linear-gradient(118deg,rgba(255,255,255,.12),transparent 27%,transparent 72%,rgba(105,220,255,.08));
  mix-blend-mode:screen;
}

.resource,.booster,.mini-btn,.fd-header-tools button{position:relative;overflow:hidden!important}
.resource::after,.booster::after,.mini-btn::after,.fd-header-tools button::after{
  content:"";position:absolute;left:10%;right:10%;top:2px;height:32%;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,0));opacity:.72;
}
.resource img,.booster img{filter:drop-shadow(0 4px 8px rgba(12,74,118,.22)) saturate(1.12) brightness(1.06)!important}
.booster.active{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(105,220,255,.18),0 9px 24px rgba(13,116,216,.18),inset 0 1px rgba(255,255,255,.95)!important}
.booster.active img{filter:drop-shadow(0 0 9px rgba(105,220,255,.62)) saturate(1.2) brightness(1.12)!important}

.fd-board-ad{box-shadow:0 7px 20px rgba(11,78,122,.10)!important;background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(232,248,255,.90))!important}
.status{box-shadow:0 8px 22px rgba(10,66,107,.09)!important}
.status-dot{box-shadow:0 0 0 3px rgba(105,220,255,.13),0 0 13px rgba(105,220,255,.58)!important}

@keyframes fd46Halo{from{opacity:.46;transform:scale(.992) rotate(-1deg)}to{opacity:.82;transform:scale(1.01) rotate(1deg)}}
@keyframes fd46Sweep{0%,15%{transform:translateX(-12%);opacity:.18}50%{opacity:.9}85%,100%{transform:translateX(12%);opacity:.18}}

@media(min-width:901px){
  .topbar::after{display:block}
}

@media(max-width:900px){
  html.fd46-bg-ready body::before{opacity:.14;background-position:50% 45%}
  .app::before{width:74px;height:74px;left:-10px;bottom:74px;opacity:.12!important}
  .app::after{width:82px;height:82px;right:-15px;top:116px;opacity:.10!important}
  html body .app>.topbar{min-height:58px!important;grid-template-rows:26px 24px!important;padding:4px 5px!important;gap:2px 4px!important}
  html body .app>.topbar .brand-avatar{width:23px!important;height:23px!important;min-width:23px!important}
  html body .app>.topbar #fdLevelChip{height:25px!important}
  html body .app>.topbar .fd-header-tools button{height:25px!important;min-height:25px!important}
  html body .app>.topbar .resource{height:24px!important;min-height:24px!important;padding:1px 4px!important;grid-template-columns:15px auto 1fr!important;gap:3px!important}
  html body .app>.topbar .resource img{width:14px!important;height:14px!important}
  html body .app>.topbar .resource b{font-size:9px!important}
  html body .app>.topbar .resource span{font-size:5.2px!important}
  html body .app>.game-layout>.boosters{height:52px!important;min-height:52px!important}
  html body .app>.game-layout>.boosters .booster img{max-height:31px!important;max-width:31px!important}
  .board-shell::before{filter:blur(13px)!important}
}

@media(max-width:430px){
  .app::before,.app::after{display:none!important}
  html.fd46-bg-ready body::before{opacity:.11}
  .board-shell::after{opacity:.72}
}

@media(prefers-reduced-motion:reduce){
  body::before,.app::before,.app::after{transition:none!important}
  .board-shell::before,.board-shell::after{animation:none!important}
}