/* v0.5.2a — corrective mobile-only positioning. Desktop intentionally untouched. */
@media (max-width:760px){
  /* Keep the proven v0.4.9c / v0.5.1 composition:
     left column = board, then forecast
     right column = A/B/C rack spanning both rows
     command panel below full width
  */
  #topGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 72px!important;
    grid-template-areas:
      "board pieces"
      "forecast pieces"
      "control control"!important;
    column-gap:3px!important;
    row-gap:0!important;
    align-items:start!important;
  }
  #topGrid>.board-panel{grid-area:board!important;margin:0!important;min-width:0!important;align-self:start!important}
  #topGrid>#piecesPanel{grid-area:pieces!important;margin:0!important;min-width:0!important;width:72px!important;align-self:stretch!important}
  #topGrid>#controlPanel{grid-area:control!important;margin-top:6px!important;min-width:0!important}

  /* Forecast sits inside the left-side blank area, but remains its own normal card. */
  #survivalForecastMobile{
    display:block!important;
    grid-area:forecast!important;
    width:100%!important;
    min-width:0!important;
    margin:4px 0 0!important;
    padding:6px 7px!important;
    border:1px solid #6d482e!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,#17100c,#0d0907)!important;
    box-shadow:inset 0 1px 0 rgba(255,228,190,.03)!important;
  }

  /* Keep header balanced: no decorative anchor icon on tiny mobile header. */
  .board-panel .panel-cap span i{display:none!important}
  .board-panel .panel-cap{padding:2px 7px 4px!important;margin-bottom:4px!important}
  .board-panel .panel-cap span{font-size:7px!important;letter-spacing:.09em!important}

  /* Do not merge/reshape the board frame. */
  .board-panel{border-radius:10px!important;padding:4px!important}

  /* Compact forecast internals so it fits the available gap cleanly. */
  #survivalForecastMobile .forecast-head{padding-bottom:4px!important;margin-bottom:4px!important}
  #survivalForecastMobile .forecast-empty,
  #survivalForecastMobile .forecast-complete{padding:3px 1px!important;line-height:1.25!important}
  #survivalForecastMobile .forecast-main{grid-template-columns:50px minmax(0,1fr)!important;gap:5px!important}
  #survivalForecastMobile .forecast-gauge{width:47px!important;height:47px!important}
  #survivalForecastMobile .forecast-gauge::before{width:37px!important;height:37px!important}
  #survivalForecastMobile .forecast-gauge strong{font-size:14px!important}
  #survivalForecastMobile .forecast-stats{gap:3px!important}
  #survivalForecastMobile .forecast-stats>div{padding:3px 2px!important}
  #survivalForecastMobile .forecast-bars{margin-top:4px!important;gap:4px!important}
  #survivalForecastMobile .forecast-note{display:none!important}
}
@media (max-width:380px){
  #topGrid{grid-template-columns:minmax(0,1fr) 66px!important}
  #topGrid>#piecesPanel{width:66px!important}
  #survivalForecastMobile{padding:5px!important}
  #survivalForecastMobile .forecast-main{grid-template-columns:45px minmax(0,1fr)!important}
  #survivalForecastMobile .forecast-gauge{width:43px!important;height:43px!important}
  #survivalForecastMobile .forecast-gauge::before{width:34px!important;height:34px!important}
}