/* FormyDog v52 · mobile finish pass: balanced header + full-width game + reliable boosters */

@media (max-width:520px){
  html,body{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    background:#062b57!important;
  }

  body{
    overflow-y:auto!important;
    padding-bottom:0!important;
  }

  html body .app{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:5px 5px max(7px,env(safe-area-inset-bottom))!important;
    gap:5px!important;
    overflow:visible!important;
    background:
      radial-gradient(circle at 50% 20%,rgba(74,187,235,.22),transparent 35%),
      linear-gradient(180deg,#0a5795 0%,#073c72 49%,#062b57 100%)!important;
  }

  /* 1-10 · Header: two balanced rows instead of three compressed strips. */
  html body .app>.topbar{
    width:100%!important;
    height:82px!important;
    min-height:82px!important;
    margin:0!important;
    padding:5px 7px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:31px 36px!important;
    gap:4px 7px!important;
    align-items:center!important;
    border-radius:16px!important;
    overflow:hidden!important;
    border:1px solid rgba(117,210,249,.66)!important;
    background:linear-gradient(120deg,rgba(251,254,255,.98),rgba(231,247,255,.97))!important;
    box-shadow:0 3px 0 rgba(4,67,127,.88),0 10px 24px rgba(1,25,54,.17)!important;
  }

  html body .app>.topbar .brand{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    height:31px!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  html body .app>.topbar .brand-avatar{
    width:31px!important;height:31px!important;min-width:31px!important;flex-basis:31px!important;
    border-radius:9px!important;
  }
  html body .app>.topbar .brand-avatar img{width:29px!important;height:29px!important}
  html body .app>.topbar .brand h1{
    max-width:145px!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1!important;
    letter-spacing:.10em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .app>.topbar .brand p{display:none!important}

  html body .app>.topbar #fdLevelChip,
  html body .app>.topbar .fd-level-chip{
    grid-column:2!important;
    grid-row:1!important;
    width:62px!important;min-width:62px!important;
    height:31px!important;min-height:31px!important;
    margin:0!important;padding:2px 5px!important;
    border-radius:10px!important;
    grid-template-rows:16px 8px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(23,96,145,.08)!important;
  }
  html body .app>.topbar .fd-level-chip span{font-size:5px!important}
  html body .app>.topbar .fd-level-chip b{font-size:13px!important}
  html body .app>.topbar .fd-level-chip small{font-size:4.6px!important}

  /* Mobile does not need to repeat total croquettes in the header: the goal card already owns it. */
  html body .app>.topbar .resources{
    grid-column:1!important;
    grid-row:2!important;
    width:auto!important;
    height:36px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:72px 72px!important;
    gap:5px!important;
    justify-content:start!important;
    align-items:center!important;
  }
  html body .app>.topbar .resources>.resource:first-child{display:none!important}
  html body .app>.topbar .resources>.resource:nth-child(2),
  html body .app>.topbar .resources>.resource:nth-child(3){
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    width:72px!important;min-width:72px!important;max-width:72px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
    margin:0!important;padding:3px 7px!important;
    grid-template-columns:23px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    gap:5px!important;
    align-items:center!important;
    border-radius:11px!important;
    border:1px solid rgba(92,181,226,.28)!important;
    box-shadow:0 2px 8px rgba(12,69,105,.07)!important;
  }
  html body .app>.topbar .resources>.resource:nth-child(2){background:linear-gradient(180deg,#f7fcff,#e9f7ff)!important}
  html body .app>.topbar .resources>.resource:nth-child(3){background:linear-gradient(180deg,#fff8fa,#ffedf1)!important}
  html body .app>.topbar .resource img{
    grid-column:1!important;grid-row:1!important;
    width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;
    margin:auto!important;object-fit:contain!important;
  }
  html body .app>.topbar .resource b{
    grid-column:2!important;grid-row:1!important;
    display:block!important;
    min-width:0!important;
    font-size:11px!important;font-weight:1000!important;line-height:1!important;
    text-align:center!important;color:#0758ad!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  html body .app>.topbar .resource span{display:none!important}

  html body .app>.topbar .fd-header-tools{
    grid-column:2!important;
    grid-row:2!important;
    width:auto!important;
    height:36px!important;
    margin:0!important;padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,40px)!important;
    gap:5px!important;
    justify-content:end!important;
    align-items:center!important;
  }
  html body .app>.topbar .fd-header-tools button{
    width:40px!important;min-width:40px!important;max-width:40px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
    margin:0!important;padding:0!important;
    display:grid!important;place-items:center!important;
    border-radius:11px!important;
    font-size:0!important;
    box-shadow:0 2px 0 rgba(44,118,163,.18),0 4px 9px rgba(25,75,111,.07)!important;
    touch-action:manipulation!important;
  }
  html body .app>.topbar #fdHeaderInstructions::before{width:21px!important;height:21px!important;font-size:13px!important}
  html body .app>.topbar #fdHeaderProfile::before{font-size:17px!important}
  html body .app>.topbar #fdHeaderCare::before{font-size:17px!important}
  html body .app>.topbar #fdHeaderEmergency::before{font-size:19px!important}

  /* 11-18 · Goal + board consume the available width cleanly. */
  html body .app>.game-layout{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto auto!important;
    gap:5px!important;
    align-content:start!important;
    overflow:visible!important;
  }

  html body .app>.game-layout>.goals{
    grid-column:1!important;grid-row:1!important;
    width:100%!important;height:50px!important;min-height:50px!important;
    margin:0!important;padding:4px 5px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 74px!important;
    grid-template-rows:42px!important;
    gap:5px!important;
    border-radius:13px!important;
    box-shadow:0 3px 0 rgba(4,69,131,.72),0 8px 18px rgba(2,30,59,.12)!important;
  }
  html body .app>.game-layout>.goals>.side-title,
  html body .app>.game-layout>.goals>.progress-row,
  html body .app>.game-layout>.goals>.how{display:none!important}
  html body .app>.game-layout>.goals .goal-box{
    width:100%!important;height:42px!important;min-height:42px!important;
    margin:0!important;padding:3px 7px!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:6px!important;border-radius:10px!important;
  }
  html body .app>.game-layout>.goals .goal-box img{width:27px!important;height:27px!important}
  html body .app>.game-layout>.goals .goal-box strong{font-size:15px!important;line-height:1!important}
  html body .app>.game-layout>.goals .goal-box span{font-size:6.2px!important;line-height:1.1!important}
  html body .app>.game-layout>.goals .moves-box{
    width:74px!important;height:42px!important;min-height:42px!important;
    margin:0!important;padding:3px!important;border-radius:10px!important;
  }
  html body .app>.game-layout>.goals .moves-box span{font-size:5.3px!important}
  html body .app>.game-layout>.goals .moves-box strong{font-size:16px!important}

  html body .app>.game-layout>.center{
    grid-column:1!important;grid-row:2!important;
    width:100%!important;min-width:0!important;min-height:0!important;
    margin:0!important;padding:0!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
    gap:4px!important;
  }
  html body .app>.game-layout>.center .board-shell{
    width:min(calc(100vw - 10px),520px)!important;
    max-width:100%!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    aspect-ratio:1/1!important;
    margin:0 auto!important;padding:5px!important;
    border-radius:19px!important;
    border:2px solid rgba(202,240,255,.92)!important;
    box-shadow:0 5px 0 #06407d,0 14px 30px rgba(0,18,48,.25),0 0 28px rgba(79,208,255,.12)!important;
  }
  html body .app>.game-layout>.center .board-mount{inset:6px!important;border-radius:15px!important}
  html body #gameMount,html body #gameMount canvas{
    pointer-events:auto!important;touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;
  }

  html body .app>.game-layout>.center .status{
    width:min(calc(100vw - 14px),510px)!important;
    height:25px!important;min-height:25px!important;max-height:25px!important;
    margin:0 auto!important;padding:4px 9px!important;
    border-radius:10px!important;
    font-size:7.2px!important;line-height:1!important;
    background:rgba(5,45,95,.94)!important;
    border:1px solid rgba(104,211,255,.34)!important;
    color:#eaf9ff!important;
    overflow:hidden!important;
  }
  html body .app>.game-layout>.center .status-dot{width:6px!important;height:6px!important;flex:0 0 6px!important}
  html body .app>.game-layout>.center .fd-game-share,
  html body .app>.game-layout>.center .fd-pet-tools{display:none!important}

  html body .app>.game-layout>.fd-board-ad{
    grid-column:1!important;grid-row:3!important;
    width:max-content!important;max-width:90vw!important;
    height:20px!important;min-height:20px!important;
    margin:0 auto!important;padding:4px 11px!important;
    border-radius:999px!important;
    font-size:6.2px!important;line-height:1!important;
    background:rgba(246,251,255,.86)!important;
    border-color:rgba(121,204,239,.30)!important;
    color:#5f7890!important;
    box-shadow:0 3px 9px rgba(3,39,75,.08)!important;
  }

  /* 19-30 · Booster dock: equal controls, clear states, never looks disconnected by timing alone. */
  html body .app>.game-layout>.boosters{
    grid-column:1!important;grid-row:4!important;
    position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    z-index:1200!important;
    width:100%!important;
    height:68px!important;min-height:68px!important;max-height:68px!important;
    margin:4px 0 0!important;padding:6px 5px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:56px!important;
    gap:4px!important;
    align-items:stretch!important;
    overflow:visible!important;
    border-radius:15px!important;
    background:rgba(249,253,255,.98)!important;
    border:1px solid rgba(100,199,238,.45)!important;
    box-shadow:0 4px 0 rgba(5,70,132,.70),0 12px 24px rgba(1,25,53,.18)!important;
  }

  html body .app>.game-layout>.boosters::before{
    content:attr(data-fd52-label)!important;
    position:absolute!important;
    right:8px!important;top:-17px!important;
    min-height:15px!important;
    padding:3px 8px!important;
    display:flex!important;align-items:center!important;
    border-radius:999px!important;
    background:rgba(10,107,79,.94)!important;
    color:#fff!important;
    font:900 6px/1 system-ui,sans-serif!important;
    letter-spacing:.04em!important;
    box-shadow:0 3px 9px rgba(1,27,54,.16)!important;
    pointer-events:none!important;
    white-space:nowrap!important;
  }
  html body .app>.game-layout>.boosters[data-fd52-state="selected"]::before{background:rgba(7,105,199,.96)!important}
  html body .app>.game-layout>.boosters[data-fd52-state="busy"]::before{background:rgba(179,116,15,.95)!important}
  html body .app>.game-layout>.boosters[data-fd52-state="starting"]::before{background:rgba(65,95,128,.95)!important}

  html body .app>.game-layout>.boosters>.side-title,
  html body .app>.game-layout>.boosters>.fd47-booster-health,
  html body .app>.game-layout>.boosters>.fd47-power-preview{display:none!important}

  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    width:100%!important;min-width:0!important;
    height:56px!important;min-height:56px!important;max-height:56px!important;
    margin:0!important;padding:3px!important;
    border-radius:11px!important;
    overflow:hidden!important;
    border:1px solid rgba(83,180,224,.32)!important;
    box-shadow:0 2px 0 rgba(93,160,194,.28),inset 0 1px rgba(255,255,255,.96)!important;
    touch-action:manipulation!important;
  }
  html body .app>.game-layout>.boosters .booster{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:34px 12px!important;
    place-items:center!important;
    background:linear-gradient(180deg,#fff,#eaf8ff)!important;
    transition:transform .14s ease,box-shadow .14s ease,filter .14s ease!important;
  }
  html body .app>.game-layout>.boosters .booster:not(:disabled):active{transform:scale(.96)!important}
  html body .app>.game-layout>.boosters .booster img{
    grid-row:1!important;
    width:31px!important;height:31px!important;max-width:31px!important;max-height:31px!important;
    margin:0!important;
    filter:drop-shadow(0 3px 5px rgba(16,75,113,.18)) saturate(1.08)!important;
  }
  html body .app>.game-layout>.boosters .booster>span{grid-row:2!important;display:block!important;min-width:0!important;max-width:100%!important;line-height:1!important}
  html body .app>.game-layout>.boosters .booster>span b{
    display:block!important;max-width:100%!important;
    font-size:6.3px!important;line-height:1!important;color:#0759ad!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  html body .app>.game-layout>.boosters .booster>span small{display:none!important}
  html body .app>.game-layout>.boosters .booster em{
    position:absolute!important;right:3px!important;top:3px!important;
    min-width:16px!important;height:16px!important;padding:0 3px!important;
    display:grid!important;place-items:center!important;
    border-radius:999px!important;background:#fff!important;color:#0759ad!important;
    font-size:6.8px!important;line-height:1!important;
    box-shadow:0 2px 6px rgba(5,71,122,.16)!important;
  }
  html body .app>.game-layout>.boosters .booster[data-fd52-ready="1"]::after{
    content:""!important;
    position:absolute!important;left:5px!important;top:5px!important;
    width:6px!important;height:6px!important;border-radius:50%!important;
    background:#24c77a!important;
    box-shadow:0 0 0 2px rgba(36,199,122,.12),0 0 7px rgba(36,199,122,.48)!important;
    pointer-events:none!important;
  }
  html body .app>.game-layout>.boosters .booster.active{
    transform:translateY(-2px)!important;
    background:linear-gradient(180deg,#f5fdff,#caefff)!important;
    border-color:rgba(16,137,212,.66)!important;
    box-shadow:0 0 0 2px rgba(46,184,241,.17),0 6px 15px rgba(5,92,156,.20),inset 0 1px #fff!important;
  }
  html body .app>.game-layout>.boosters .booster.active img{transform:scale(1.08)!important}
  html body .app>.game-layout>.boosters .booster:disabled{opacity:.46!important;filter:saturate(.50)!important}
  html body .app>.game-layout>.boosters .mini-btn{
    display:grid!important;place-items:center!important;
    font-size:6.3px!important;line-height:1.05!important;font-weight:1000!important;
    white-space:normal!important;background:linear-gradient(180deg,#f9fdff,#eaf6ff)!important;
  }
  html body .app>.game-layout>.boosters .store{
    background:linear-gradient(180deg,#2c94ed,#0758b6)!important;
    color:#fff!important;border-color:#0a62bd!important;
  }

  /* Native shell never reserves a web-ad rectangle. */
  html[data-formydog-native-shell="1"] body,
  html[data-formydog-native-shell="1"] body .app{padding-bottom:max(7px,env(safe-area-inset-bottom))!important;margin-bottom:0!important}
  html[data-formydog-native-shell="1"] #fdAdDock,
  html[data-formydog-native-shell="1"] .fd-bottom-ad,
  html[data-formydog-native-shell="1"] .fd-ad-slot,
  html[data-formydog-native-shell="1"] .fd-ad-spacer,
  html[data-formydog-native-shell="1"] [data-formydog-ad],
  html[data-formydog-native-shell="1"] [data-web-ad],
  html[data-formydog-native-shell="1"] [data-rtk-web-ad]{display:none!important;width:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
}

@media (max-width:360px){
  html body .app>.topbar{height:80px!important;min-height:80px!important;padding-inline:5px!important;gap:4px!important}
  html body .app>.topbar .resources{grid-template-columns:64px 64px!important;gap:4px!important}
  html body .app>.topbar .resources>.resource:nth-child(2),
  html body .app>.topbar .resources>.resource:nth-child(3){width:64px!important;min-width:64px!important;max-width:64px!important;padding-inline:5px!important}
  html body .app>.topbar .fd-header-tools{grid-template-columns:repeat(4,36px)!important;gap:4px!important}
  html body .app>.topbar .fd-header-tools button{width:36px!important;min-width:36px!important;max-width:36px!important}
  html body .app>.topbar .brand h1{max-width:110px!important;font-size:10px!important}
  html body .app>.game-layout>.boosters{gap:3px!important;padding-inline:4px!important}
  html body .app>.game-layout>.boosters .booster>span b,
  html body .app>.game-layout>.boosters .mini-btn{font-size:5.7px!important}
}

@media (max-width:520px) and (max-height:720px){
  html body .app{gap:4px!important}
  html body .app>.topbar{height:78px!important;min-height:78px!important;grid-template-rows:29px 34px!important;padding-block:4px!important}
  html body .app>.topbar .resources,html body .app>.topbar .fd-header-tools{height:34px!important}
  html body .app>.topbar .resources>.resource:nth-child(2),
  html body .app>.topbar .resources>.resource:nth-child(3),
  html body .app>.topbar .fd-header-tools button{height:34px!important;min-height:34px!important;max-height:34px!important}
  html body .app>.game-layout>.goals{height:47px!important;min-height:47px!important;grid-template-rows:39px!important}
  html body .app>.game-layout>.goals .goal-box,html body .app>.game-layout>.goals .moves-box{height:39px!important;min-height:39px!important}
  html body .app>.game-layout>.boosters{height:64px!important;min-height:64px!important;max-height:64px!important;grid-template-rows:52px!important}
  html body .app>.game-layout>.boosters .booster,html body .app>.game-layout>.boosters .mini-btn{height:52px!important;min-height:52px!important;max-height:52px!important}
}