/* FormyDog v59 · visual refinement, game-wide background, clean board and compact mobile HUD */
:root{
  --fd59-blue:#0a67c7;
  --fd59-deep:#06498f;
  --fd59-cyan:#67dcff;
  --fd59-mint:#55dca7;
  --fd59-gold:#ffd86a;
  --fd59-card:rgba(255,255,255,.90);
  --fd59-line:rgba(122,205,239,.36);
  --fd59-shadow:0 10px 28px rgba(3,51,96,.14);
}

/* The former header artwork is now the scene background. */
html body::before,
html.fd46-bg-ready body::before,
html.fd47-bg-ready body::before{
  background-image:
    linear-gradient(180deg,rgba(221,246,255,.18),rgba(236,248,255,.24)),
    url('./assets/header/pet-header.png')!important;
  background-size:cover!important;
  background-position:center 24%!important;
  background-repeat:no-repeat!important;
  opacity:.34!important;
  filter:saturate(1.03) brightness(1.035) contrast(1.015)!important;
  transform:scale(1.018)!important;
}
html body::after{
  background:
    radial-gradient(circle at 14% 15%,rgba(89,214,255,.24),transparent 28%),
    radial-gradient(circle at 85% 18%,rgba(126,119,255,.14),transparent 25%),
    radial-gradient(circle at 76% 86%,rgba(66,216,159,.15),transparent 28%),
    linear-gradient(180deg,rgba(241,251,255,.62),rgba(248,253,255,.74) 48%,rgba(230,243,255,.68))!important;
}

/* Header is now interface, not scenery. */
html body .topbar::after,
html.fd46-header-art-ready body .topbar::after,
html.fd47-header-ready body .topbar::after{
  display:none!important;
  background-image:none!important;
  content:none!important;
}
html body .topbar::before{
  background:linear-gradient(118deg,rgba(255,255,255,.88),rgba(236,249,255,.84) 58%,rgba(230,244,255,.82))!important;
}
html body .topbar{
  border-color:rgba(130,205,237,.36)!important;
  box-shadow:0 8px 26px rgba(5,61,108,.12),inset 0 1px rgba(255,255,255,.94)!important;
  backdrop-filter:blur(13px) saturate(1.06);
  -webkit-backdrop-filter:blur(13px) saturate(1.06);
}

/* Reduce always-running decoration. Effects are event-driven in v59 JS. */
.fd47-light{opacity:.16!important;filter:blur(34px)!important;animation-duration:14s!important}
.fd47-scene-decor img{opacity:.10!important;animation-duration:9s!important}
.app::before,.app::after{opacity:.07!important}

/* Clean board frame: centered, even margins, no top-heavy sweep. */
html body .board-shell{
  box-sizing:border-box!important;
  isolation:isolate!important;
  padding:5px!important;
  border:1px solid rgba(173,226,248,.82)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(225,246,255,.72))!important;
  box-shadow:
    0 5px 0 rgba(4,69,132,.78),
    0 13px 30px rgba(2,43,84,.18),
    0 0 0 1px rgba(255,255,255,.85) inset,
    0 0 22px rgba(79,205,255,.09)!important;
}
html body .board-shell::before{
  inset:3px!important;
  opacity:.34!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
  border-radius:inherit!important;
  background:linear-gradient(180deg,rgba(104,222,255,.12),transparent 24%,transparent 76%,rgba(63,196,245,.06))!important;
}
html body .board-shell::after{display:none!important;opacity:0!important;animation:none!important}
html body .board-mount{
  background:linear-gradient(180deg,rgba(234,249,255,.82),rgba(222,243,253,.76))!important;
  box-shadow:inset 0 0 0 1px rgba(103,197,235,.20),inset 0 10px 24px rgba(255,255,255,.30)!important;
}
html body .board-mount::after{
  background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 32%,transparent 70%,rgba(89,214,255,.045))!important;
  opacity:.7!important;
}
html body .board-mount canvas{
  display:block!important;
  margin:0!important;
  transform:none!important;
  transform-origin:center!important;
}

/* Status and level belong visually to the board. */
html body .status{
  min-height:24px!important;
  border-color:rgba(123,201,235,.30)!important;
  background:rgba(247,253,255,.90)!important;
  box-shadow:0 5px 15px rgba(7,68,112,.08)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
html body .status-dot{width:6px!important;height:6px!important}
html body .fd-board-ad{
  border-color:rgba(126,204,237,.28)!important;
  background:rgba(247,253,255,.88)!important;
  color:#35617c!important;
  box-shadow:0 4px 13px rgba(5,64,108,.07)!important;
}

/* Cleaner goal strip. */
html body .goals{
  border-color:rgba(131,205,236,.30)!important;
  background:rgba(248,253,255,.89)!important;
  box-shadow:0 7px 20px rgba(3,59,103,.09)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
html body .goal-box,
html body .moves-box{
  box-shadow:inset 0 1px rgba(255,255,255,.92),0 4px 12px rgba(4,67,113,.06)!important;
}

/* Unified tactile controls. */
html body .fd-header-tools button,
html body .resource,
html body .booster,
html body .mini-btn{
  border-color:rgba(124,202,236,.34)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.94),0 4px 12px rgba(5,62,106,.08)!important;
}
html body .fd-header-tools button:active,
html body .booster:not(:disabled):active,
html body .mini-btn:active{transform:translateY(1px)!important}

/* Booster dock: readable inventory, equal visual rhythm. */
html body .boosters{
  border-color:rgba(121,201,235,.30)!important;
  background:rgba(246,252,255,.91)!important;
  box-shadow:0 8px 24px rgba(3,57,103,.11),inset 0 1px rgba(255,255,255,.94)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
html body .booster{overflow:visible!important}
html body .booster img{
  filter:drop-shadow(0 3px 6px rgba(5,67,112,.18)) saturate(1.06)!important;
}
html body .booster em{
  display:grid!important;
  place-items:center!important;
  min-width:21px!important;
  height:20px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#1687ed,#0758b8)!important;
  border:2px solid rgba(255,255,255,.96)!important;
  box-shadow:0 3px 9px rgba(3,72,136,.24)!important;
}
html body .booster em i{
  display:block!important;
  margin:0!important;
  color:#fff!important;
  font:900 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-style:normal!important;
  text-align:center!important;
}
html body .booster.active{
  box-shadow:0 0 0 2px rgba(74,210,255,.36),0 7px 18px rgba(8,111,191,.15),inset 0 1px #fff!important;
}

/* Event-driven board effects. No transforms: touch coordinates remain stable. */
.board-shell.fd59-hit{animation:fd59Hit .44s ease-out!important}
.board-shell.fd59-combo{animation:fd59Combo .62s ease-out!important}
.board-shell.fd59-power{animation:fd59Power .58s ease-out!important}
.board-shell.fd59-win{animation:fd59Win .82s ease-out!important}
.fd59-spark{
  position:absolute!important;
  z-index:70!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 0 10px rgba(94,221,255,.95),0 0 18px rgba(255,255,255,.72)!important;
  animation:fd59Spark .64s ease-out forwards!important;
}
.goal-box.fd59-pulse,.moves-box.fd59-pulse{animation:fd59HudPulse .48s ease-out!important}
.booster.fd59-used img{animation:fd59BoosterPop .52s ease-out!important}

@keyframes fd59Hit{
  0%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 30px rgba(2,43,84,.18),0 0 0 rgba(80,216,255,0)}
  45%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 30px rgba(2,43,84,.18),0 0 28px rgba(80,216,255,.28)}
  100%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 30px rgba(2,43,84,.18),0 0 0 rgba(80,216,255,0)}
}
@keyframes fd59Combo{
  0%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 30px rgba(2,43,84,.18),0 0 0 rgba(108,230,255,0)}
  38%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 32px rgba(2,43,84,.18),0 0 36px rgba(108,230,255,.42),0 0 62px rgba(130,119,255,.18)}
  100%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 30px rgba(2,43,84,.18),0 0 0 rgba(108,230,255,0)}
}
@keyframes fd59Power{
  0%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 30px rgba(2,43,84,.18)}
  42%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 30px rgba(2,43,84,.18),0 0 40px rgba(255,215,92,.34)}
  100%{box-shadow:0 5px 0 rgba(4,69,132,.78),0 13px 30px rgba(2,43,84,.18)}
}
@keyframes fd59Win{
  0%,100%{filter:none}
  42%{filter:brightness(1.08) saturate(1.08);box-shadow:0 5px 0 #064584,0 13px 30px rgba(2,43,84,.18),0 0 48px rgba(82,222,168,.38),0 0 74px rgba(255,218,106,.22)}
}
@keyframes fd59Spark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  28%{opacity:1;transform:translate(calc(-50% + var(--fd59-dx)*.35),calc(-50% + var(--fd59-dy)*.35)) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--fd59-dx)),calc(-50% + var(--fd59-dy))) scale(.2)}
}
@keyframes fd59HudPulse{0%,100%{filter:none}45%{filter:brightness(1.08);box-shadow:0 0 0 3px rgba(94,219,255,.16),0 6px 16px rgba(5,77,126,.10)}}
@keyframes fd59BoosterPop{0%,100%{transform:scale(1)}42%{transform:scale(1.13) rotate(-3deg)}}

@media(max-width:900px){
  html body::before,html.fd46-bg-ready body::before,html.fd47-bg-ready body::before{
    opacity:.26!important;
    background-position:center 18%!important;
  }
  .fd47-scene-decor{display:none!important}
  .fd47-light{opacity:.10!important}
  .app::before,.app::after{display:none!important}

  html body .app>.topbar{
    border-radius:15px!important;
    margin-bottom:2px!important;
  }
  html body .app>.topbar .fd-header-tools{
    align-items:center!important;
    justify-items:center!important;
  }
  html body .app>.topbar .fd-header-tools button{
    width:40px!important;
    min-width:40px!important;
    height:34px!important;
    min-height:34px!important;
    border-radius:11px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
  }
  html body .app>.topbar .fd-header-tools button::before{
    inset:0!important;
    width:26px!important;
    height:26px!important;
    margin:auto!important;
    line-height:26px!important;
  }

  html body .app>.game-layout>.center{
    box-sizing:border-box!important;
    width:100%!important;
    padding:0 5px!important;
  }
  html body .app>.game-layout>.center .board-shell{
    width:min(calc(100vw - 14px),510px)!important;
    max-width:calc(100vw - 14px)!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    margin:0 auto!important;
    padding:5px!important;
    border-radius:17px!important;
  }
  html body .app>.game-layout>.center .board-mount{
    position:absolute!important;
    inset:5px!important;
    width:auto!important;
    height:auto!important;
    border-radius:12px!important;
  }
  html body .app>.game-layout>.center .status{
    width:min(calc(100vw - 24px),496px)!important;
    margin:4px auto 0!important;
    padding:3px 8px!important;
    font-size:7px!important;
  }
  html body .app>.game-layout>.fd-board-ad{
    min-height:18px!important;
    height:18px!important;
    padding:0 9px!important;
    font-size:6.4px!important;
    border-radius:999px!important;
    justify-self:center!important;
  }

  html body .app>.game-layout>.boosters{
    min-height:50px!important;
    height:50px!important;
    padding:3px!important;
    border-radius:14px!important;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.92fr) minmax(0,.92fr) 40px 40px!important;
    gap:3px!important;
  }
  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    min-height:42px!important;
    height:42px!important;
    border-radius:10px!important;
  }
  html body .app>.game-layout>.boosters .booster img{
    width:29px!important;
    height:29px!important;
    max-width:29px!important;
    max-height:29px!important;
    margin:0 auto!important;
  }
  html body .app>.game-layout>.boosters .booster em{
    top:-4px!important;
    right:-3px!important;
    min-width:20px!important;
    height:19px!important;
    padding:0 4px!important;
  }
  html body .app>.game-layout>.boosters .booster em i{font-size:9.5px!important}
  html body .app>.game-layout>.boosters .booster span b{font-size:6.3px!important}
  html body .app>.game-layout>.boosters .booster span small{display:none!important}
  html body .app>.game-layout>.boosters .mini-btn{font-size:6px!important;line-height:1.08!important;padding:2px!important}
  html body .app>.game-layout>.boosters .fd-menu-btn,
  html body .app>.game-layout>.boosters .fd-notify-btn{font-size:0!important}
  html body .app>.game-layout>.boosters .fd-menu-btn::before{content:"☰"!important;font-size:16px!important;line-height:1!important}
  html body .app>.game-layout>.boosters .fd-notify-btn::before{content:"🔔"!important;font-size:13px!important;line-height:1!important}
}

@media(max-width:520px){
  html body .app>.topbar .resources>.resource:nth-child(2),
  html body .app>.topbar .resources>.resource:nth-child(3){
    height:34px!important;
    min-height:34px!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    gap:4px!important;
    padding:2px 7px!important;
    border-radius:10px!important;
  }
  html body .app>.topbar .resources>.resource:nth-child(2) img,
  html body .app>.topbar .resources>.resource:nth-child(3) img{
    width:20px!important;
    height:20px!important;
    max-width:20px!important;
    max-height:20px!important;
  }
  html body .app>.topbar .resources>.resource:nth-child(2) b,
  html body .app>.topbar .resources>.resource:nth-child(3) b{
    font-size:10px!important;
  }
  html body .app>.topbar #fdLevelChip{
    right:6px!important;
    margin-left:auto!important;
  }
}

@media(max-width:390px){
  html body .app>.game-layout>.center{padding:0 3px!important}
  html body .app>.game-layout>.center .board-shell{
    width:calc(100vw - 10px)!important;
    max-width:calc(100vw - 10px)!important;
    padding:4px!important;
    border-radius:15px!important;
  }
  html body .app>.game-layout>.center .board-mount{inset:4px!important;border-radius:11px!important}
  html body .app>.game-layout>.boosters{
    height:47px!important;
    min-height:47px!important;
    grid-template-columns:minmax(0,1.22fr) minmax(0,1.22fr) minmax(0,1.22fr) minmax(0,.86fr) minmax(0,.86fr) 36px 36px!important;
    gap:2px!important;
  }
  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{height:39px!important;min-height:39px!important}
  html body .app>.game-layout>.boosters .booster img{width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important}
  html body .app>.game-layout>.boosters .booster em{min-width:19px!important;height:18px!important;right:-2px!important}
}

@media(prefers-reduced-motion:reduce){
  .board-shell.fd59-hit,.board-shell.fd59-combo,.board-shell.fd59-power,.board-shell.fd59-win,
  .fd59-spark,.goal-box.fd59-pulse,.moves-box.fd59-pulse,.booster.fd59-used img{animation:none!important}
}