/* ========================================================================== 
   CannaGrow 0.14.9 – finaler Smartphone-HUD-Fix

   Diese Datei wird absichtlich als LETZTES Stylesheet geladen. Ältere
   responsive Regeln dürfen den mobilen HUD dadurch nicht mehr auf zwei Zeilen
   vergrößern oder über den eigentlichen Spielinhalt legen.
   ========================================================================== */

@media (max-width:600px){
  /* Der Header bleibt beim Scrollen oben, bleibt aber im normalen Seitenfluss.
     Dadurch überdeckt er keine Pflanzen-/Raumansicht mehr. */
  .app-shell{
    padding-top:0 !important;
  }

  .topbar{
    position:sticky !important;
    top:0 !important;
    left:auto !important;
    right:auto !important;
    width:calc(100% + 18px) !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 -9px 8px !important;
    padding:max(5px, env(safe-area-inset-top)) 7px 5px !important;
    border-radius:0 0 14px 14px !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    z-index:200 !important;
    box-shadow:0 7px 20px rgba(0,0,0,.34) !important;
  }

  /* Auf dem Smartphone zählt nur der Status – Logo/Branding spart Höhe. */
  .topbar .brand-wrap{
    display:none !important;
  }

  .topbar .hud{
    flex:1 1 100% !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:.70fr 1.35fr 1fr !important;
    gap:4px !important;
    align-items:stretch !important;
  }

  /* Mobil nur Level, Guthaben und CannaCoins. */
  .topbar .hud-item:nth-child(1),
  .topbar .hud-item:nth-child(2),
  .topbar .hud-item:nth-child(6){
    display:none !important;
  }

  .topbar .hud-item:nth-child(3),
  .topbar .hud-item:nth-child(4),
  .topbar .hud-item:nth-child(5){
    display:flex !important;
  }

  .topbar .hud-item{
    min-width:0 !important;
    min-height:32px !important;
    height:32px !important;
    padding:3px 4px !important;
    margin:0 !important;
    border-radius:9px !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  .topbar .hud-item span{
    font-size:7px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .topbar .hud-item strong{
    font-size:10.5px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }

  /* 0.14.8 reservierte Platz für einen fixed Header. Das ist nun unnötig. */
  main{
    padding-top:0 !important;
    margin-top:0 !important;
  }
}

@media (max-width:380px){
  .topbar{
    width:calc(100% + 12px) !important;
    margin-left:-6px !important;
    margin-right:-6px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }

  .topbar .hud{
    /* Auch auf sehr schmalen Geräten bewusst EINE Zeile. */
    grid-template-columns:.62fr 1.42fr .96fr !important;
    gap:3px !important;
  }

  .topbar .hud-item{
    min-height:30px !important;
    height:30px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  .topbar .hud-item strong{
    font-size:10px !important;
  }
}