/* FormyDog v60 · safe UI refinement. Visual-only: no Phaser transforms or gameplay hooks. */
:root{
  --fd60-surface:rgba(248,253,255,.92);
  --fd60-surface-strong:rgba(255,255,255,.96);
  --fd60-line:rgba(102,190,230,.30);
  --fd60-ink:#133a57;
  --fd60-muted:#67859a;
  --fd60-blue:#0874d8;
  --fd60-blue2:#0758b7;
  --fd60-cyan:#66dfff;
  --fd60-shadow:0 8px 24px rgba(5,59,102,.11);
}

/* Decorative layers must never interfere with the board. */
body::before,body::after,
.topbar::before,.topbar::after,
.board-shell::before,.board-shell::after,
.board-mount::before,.board-mount::after,
.fd47-ambient,.fd47-light,.fd47-scene-decor,.fd47-flash,
.fd59-spark{pointer-events:none!important}

.app{box-sizing:border-box!important;width:100%!important;max-width:1480px!important;margin:0 auto!important}

/* --- Header ------------------------------------------------------------- */
.topbar{
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(237,249,255,.90))!important;
  border:1px solid var(--fd60-line)!important;
  color:var(--fd60-ink)!important;
}
.brand{min-width:0!important}
.brand h1{letter-spacing:.02em!important}
.brand p{color:var(--fd60-muted)!important}
.fd-level-chip{
  border:1px solid rgba(78,174,220,.32)!important;
  background:linear-gradient(180deg,#fff,#eaf8ff)!important;
  box-shadow:inset 0 1px #fff,0 4px 12px rgba(4,68,113,.08)!important;
}
.fd-level-chip span,.fd-level-chip small{color:#5c7b90!important}
.fd-level-chip b{color:#075fb7!important}

.fd-header-tools{align-items:center!important;justify-items:center!important}
.fd-header-tools button{
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#fff,#edf9ff)!important;
  border:1px solid rgba(103,191,229,.36)!important;
  color:#164b6b!important;
}
.fd-header-tools button::before{
  position:static!important;
  inset:auto!important;
  margin:0!important;
  transform:none!important;
  flex:none!important;
}

.resources{align-items:stretch!important}
.resource{
  box-sizing:border-box!important;
  align-items:center!important;
  background:linear-gradient(180deg,#fff,#f1fbff)!important;
  border:1px solid rgba(108,193,229,.34)!important;
  color:var(--fd60-ink)!important;
}
.resource img{object-fit:contain!important;align-self:center!important;justify-self:center!important}
.resource b{font-variant-numeric:tabular-nums!important;color:#0a5da9!important}
.resource span{color:#648298!important}

/* --- Objective strip ---------------------------------------------------- */
.goals{
  background:var(--fd60-surface)!important;
  border:1px solid var(--fd60-line)!important;
  box-shadow:var(--fd60-shadow)!important;
}
.goal-box,.moves-box,.progress-row{
  border-color:rgba(112,198,233,.26)!important;
  background:rgba(255,255,255,.80)!important;
}
.goal-box img{object-fit:contain!important}
.goal-box strong,.moves-box strong{font-variant-numeric:tabular-nums!important}
.progress-track{overflow:hidden!important;background:rgba(98,164,194,.16)!important}
.progress-track i{box-shadow:0 0 12px rgba(42,196,236,.24)!important}

/* --- Board -------------------------------------------------------------- */
.center{min-width:0!important;box-sizing:border-box!important}
.board-shell{
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:20px!important;
  padding:4px!important;
  border:1px solid rgba(141,215,245,.70)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(220,244,255,.84))!important;
  box-shadow:0 4px 0 rgba(5,75,139,.68),0 12px 26px rgba(3,45,84,.16),inset 0 1px #fff!important;
  overflow:visible!important;
}
.board-mount{
  box-sizing:border-box!important;
  overflow:hidden!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(231,248,255,.93),rgba(215,241,252,.88))!important;
  box-shadow:inset 0 0 0 1px rgba(83,178,218,.20),inset 0 8px 20px rgba(255,255,255,.30)!important;
}
.board-mount canvas{
  display:block!important;
  margin:0!important;
  padding:0!important;
  max-width:none!important;
  transform:none!important;
  transform-origin:center center!important;
  touch-action:none!important;
  pointer-events:auto!important;
}
.status{
  box-sizing:border-box!important;
  border:1px solid rgba(111,196,232,.28)!important;
  background:rgba(250,254,255,.94)!important;
  color:#476a80!important;
}
.status-dot{flex:0 0 auto!important}
.fd-board-ad{
  background:rgba(250,254,255,.90)!important;
  border:1px solid rgba(107,193,229,.25)!important;
  color:#55768b!important;
}

/* --- Booster dock ------------------------------------------------------- */
.boosters{
  box-sizing:border-box!important;
  background:linear-gradient(180deg,rgba(252,255,255,.96),rgba(235,249,255,.94))!important;
  border:1px solid rgba(105,193,231,.30)!important;
  box-shadow:0 7px 23px rgba(3,54,96,.12),inset 0 1px #fff!important;
}
.booster,.mini-btn{
  box-sizing:border-box!important;
  min-width:0!important;
  border:1px solid rgba(105,193,231,.30)!important;
  background:linear-gradient(180deg,#fff,#edf9ff)!important;
  color:#174965!important;
}
.booster img{object-fit:contain!important}
.booster span{min-width:0!important}
.booster span b,.mini-btn{letter-spacing:.01em!important}
.booster em{
  z-index:5!important;
  min-width:22px!important;
  height:22px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#168bed,#0758b7)!important;
  border:2px solid #fff!important;
  box-shadow:0 3px 9px rgba(5,73,132,.22)!important;
}
.booster em i{font-size:11px!important;font-weight:950!important;font-variant-numeric:tabular-nums!important}
.booster.active{
  border-color:rgba(36,169,230,.64)!important;
  background:linear-gradient(180deg,#fff,#e1f7ff)!important;
  box-shadow:0 0 0 2px rgba(61,202,250,.20),0 6px 18px rgba(6,97,165,.13)!important;
}
.store{
  background:linear-gradient(180deg,#1387ec,#075ab9)!important;
  color:#fff!important;
  border-color:#0754aa!important;
  text-shadow:0 1px rgba(0,0,0,.10)!important;
}

/* Give overlays their own layer instead of changing document geometry. */
.toast,.result,.fd-instructions-modal{isolation:isolate!important}
.result[hidden]{display:none!important;pointer-events:none!important}

/* --- Desktop ------------------------------------------------------------ */
@media(min-width:901px){
  .app{padding:10px 14px 16px!important}
  .topbar{border-radius:20px!important}
  .game-layout{gap:12px!important;align-items:start!important}
  .center{padding:0 3px!important}
  .board-shell{max-width:650px!important}
  .boosters{border-radius:18px!important}
}

/* --- Mobile ------------------------------------------------------------- */
@media(max-width:900px){
  html,body{min-height:100%!important}
  body{min-height:100dvh!important;overflow-x:hidden!important}
  .app{
    min-height:100dvh!important;
    padding:4px 5px max(5px,env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
  }

  .topbar{
    flex:0 0 auto!important;
    width:100%!important;
    min-height:76px!important;
    height:auto!important;
    margin:0!important;
    padding:5px 6px!important;
    border-radius:16px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:31px 34px!important;
    grid-template-areas:"brand level" "tools resources"!important;
    column-gap:6px!important;
    row-gap:3px!important;
    align-items:center!important;
  }
  .topbar .brand{grid-area:brand!important;display:flex!important;align-items:center!important;gap:6px!important;overflow:hidden!important}
  .topbar .brand-avatar{width:27px!important;height:27px!important;min-width:27px!important;border-radius:9px!important}
  .topbar .brand-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}
  .topbar .brand h1{margin:0!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important}
  .topbar .brand p{margin:2px 0 0!important;font-size:6px!important;line-height:1!important;white-space:nowrap!important}

  #fdLevelChip{
    grid-area:level!important;
    position:static!important;
    justify-self:end!important;
    align-self:center!important;
    min-width:70px!important;
    width:auto!important;
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
    padding:2px 6px!important;
    border-radius:10px!important;
  }
  #fdLevelChip span{font-size:5px!important}
  #fdLevelChip b{font-size:12px!important;line-height:1!important}
  #fdLevelChip small{font-size:4.7px!important}

  .topbar .fd-header-tools{
    grid-area:tools!important;
    align-self:center!important;
    justify-self:start!important;
    display:grid!important;
    grid-template-columns:repeat(4,36px)!important;
    gap:5px!important;
    width:auto!important;
    height:34px!important;
    margin:0!important;
    padding:0!important;
  }
  .topbar .fd-header-tools button{
    width:36px!important;
    min-width:36px!important;
    height:32px!important;
    min-height:32px!important;
    border-radius:10px!important;
  }
  .topbar .fd-header-tools button::before{
    display:grid!important;
    place-items:center!important;
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    line-height:22px!important;
    font-size:13px!important;
  }

  .topbar .resources{
    grid-area:resources!important;
    align-self:center!important;
    justify-self:end!important;
    display:grid!important;
    grid-template-columns:repeat(2,50px)!important;
    gap:5px!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
  }
  .topbar .resource:first-child{display:none!important}
  .topbar .resource{
    width:50px!important;
    min-width:50px!important;
    height:32px!important;
    min-height:32px!important;
    padding:2px 4px!important;
    border-radius:10px!important;
    display:grid!important;
    grid-template-columns:17px 1fr!important;
    grid-template-rows:17px 8px!important;
    gap:0 3px!important;
    align-items:center!important;
  }
  .topbar .resource img{grid-row:1/3!important;width:17px!important;height:17px!important;margin:0!important}
  .topbar .resource b{grid-column:2!important;grid-row:1!important;font-size:10px!important;line-height:1!important;text-align:center!important}
  .topbar .resource span{grid-column:2!important;grid-row:2!important;font-size:4.5px!important;line-height:1!important;text-align:center!important;white-space:nowrap!important}

  .game-layout{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    overflow:visible!important;
  }

  .game-layout>.goals{
    flex:0 0 auto!important;
    order:1!important;
    width:100%!important;
    min-height:54px!important;
    height:54px!important;
    margin:0!important;
    padding:4px!important;
    border-radius:14px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 77px!important;
    grid-template-rows:1fr!important;
    gap:5px!important;
    align-items:stretch!important;
  }
  .goals>.side-title,.goals>.progress-row,.goals>.how{display:none!important}
  .goals>.goal-box{
    margin:0!important;
    min-width:0!important;
    height:100%!important;
    padding:4px 7px!important;
    border-radius:11px!important;
    display:grid!important;
    grid-template-columns:36px 1fr!important;
    gap:6px!important;
    align-items:center!important;
  }
  .goals>.goal-box img{width:32px!important;height:32px!important;margin:0!important}
  .goals>.goal-box strong{font-size:18px!important;line-height:1!important}
  .goals>.goal-box span{font-size:6.4px!important;line-height:1.15!important;white-space:normal!important}
  .goals>.moves-box{
    margin:0!important;
    width:77px!important;
    height:100%!important;
    padding:4px!important;
    border-radius:11px!important;
    display:grid!important;
    place-content:center!important;
    text-align:center!important;
  }
  .goals>.moves-box span{font-size:5.5px!important;line-height:1!important}
  .goals>.moves-box strong{font-size:20px!important;line-height:1.05!important}

  .game-layout>.center{
    flex:0 0 auto!important;
    order:2!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:3px!important;
  }
  .center>.board-shell{
    position:relative!important;
    width:min(calc(100vw - 12px),520px)!important;
    max-width:calc(100vw - 12px)!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    margin:0 auto!important;
    padding:4px!important;
    border-radius:18px!important;
  }
  .center>.board-shell>.board-mount{
    position:absolute!important;
    inset:4px!important;
    width:auto!important;
    height:auto!important;
    border-radius:13px!important;
  }
  .center>.status{
    flex:0 0 auto!important;
    width:min(calc(100vw - 22px),502px)!important;
    min-height:21px!important;
    height:auto!important;
    margin:1px auto 0!important;
    padding:3px 7px!important;
    border-radius:9px!important;
    font-size:6.7px!important;
    line-height:1.15!important;
  }
  .fd-game-share,.fd-pet-tools{display:none!important}

  .game-layout>.fd-board-ad{
    order:3!important;
    flex:0 0 auto!important;
    align-self:center!important;
    min-height:17px!important;
    height:17px!important;
    margin:0 auto!important;
    padding:0 9px!important;
    border-radius:999px!important;
    font-size:6px!important;
    line-height:17px!important;
  }

  .game-layout>.boosters{
    order:4!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-height:54px!important;
    height:54px!important;
    margin-top:auto!important;
    margin-bottom:0!important;
    padding:4px!important;
    padding-bottom:max(4px,env(safe-area-inset-bottom))!important;
    border-radius:14px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.16fr) minmax(0,1.16fr) minmax(0,1.16fr) minmax(0,.78fr) minmax(0,.88fr) minmax(0,.74fr) minmax(0,.74fr)!important;
    grid-template-rows:46px!important;
    gap:3px!important;
    align-items:stretch!important;
    overflow:visible!important;
  }
  .boosters>.side-title,.boosters>.fd47-booster-health,.boosters>.fd47-power-preview{display:none!important}
  .boosters>.booster,.boosters>.mini-btn{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:3px 2px!important;
    border-radius:10px!important;
    overflow:visible!important;
  }
  .boosters>.booster{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
  }
  .boosters>.booster img{width:27px!important;height:27px!important;max-width:27px!important;max-height:27px!important;margin:0!important}
  .boosters>.booster span{display:block!important;width:100%!important;text-align:center!important;line-height:1!important}
  .boosters>.booster span b{display:block!important;font-size:5.6px!important;line-height:1!important;white-space:nowrap!important}
  .boosters>.booster span small{display:none!important}
  .boosters>.booster em{
    position:absolute!important;
    top:-5px!important;
    right:-3px!important;
    min-width:22px!important;
    height:22px!important;
    padding:0 4px!important;
  }
  .boosters>.booster em i{font-size:11px!important}
  .boosters>.mini-btn{
    display:grid!important;
    place-items:center!important;
    white-space:normal!important;
    text-align:center!important;
    font-size:5.4px!important;
    line-height:1.05!important;
    padding:3px 2px!important;
  }

  /* No reserved web-ad space. Native banner remains independent from game layout. */
  html,body,.app,.game-layout{--fd-ad-space:0px!important}
  .fd-ad-spacer,.fd-bottom-ad,[data-formydog-ad][data-reserve-space="1"]{min-height:0!important;margin:0!important;padding:0!important}
}

@media(max-width:390px){
  .app{padding-left:3px!important;padding-right:3px!important}
  .topbar{padding-left:4px!important;padding-right:4px!important;column-gap:4px!important}
  .topbar .fd-header-tools{grid-template-columns:repeat(4,33px)!important;gap:3px!important}
  .topbar .fd-header-tools button{width:33px!important;min-width:33px!important}
  .topbar .resources{grid-template-columns:repeat(2,46px)!important;gap:3px!important}
  .topbar .resource{width:46px!important;min-width:46px!important;padding:2px!important}
  .center>.board-shell{width:min(calc(100vw - 8px),500px)!important;max-width:calc(100vw - 8px)!important}
  .game-layout>.boosters{gap:2px!important;padding-left:3px!important;padding-right:3px!important}
  .boosters>.booster img{width:25px!important;height:25px!important}
  .boosters>.booster span b{font-size:5px!important}
  .boosters>.mini-btn{font-size:4.9px!important}
}

@media(max-height:720px) and (max-width:900px){
  .topbar{min-height:70px!important;grid-template-rows:28px 31px!important;padding-top:3px!important;padding-bottom:3px!important}
  .topbar .fd-header-tools{height:31px!important}
  .topbar .fd-header-tools button{height:29px!important;min-height:29px!important}
  .topbar .resource{height:29px!important;min-height:29px!important}
  .game-layout>.goals{height:49px!important;min-height:49px!important}
  .goals>.goal-box img{width:28px!important;height:28px!important}
  .goals>.goal-box strong{font-size:16px!important}
  .goals>.moves-box strong{font-size:18px!important}
  .center>.status{min-height:18px!important;padding-top:2px!important;padding-bottom:2px!important}
  .game-layout>.boosters{height:49px!important;min-height:49px!important;grid-template-rows:41px!important}
  .boosters>.booster,.boosters>.mini-btn{height:41px!important;min-height:41px!important}
  .boosters>.booster img{width:23px!important;height:23px!important}
}

@media(prefers-reduced-motion:reduce){
  .fd-header-tools button,.resource,.booster,.mini-btn,.board-shell,.goal-box,.moves-box{transition:none!important;animation:none!important}
}