/* =========================================================
   WEBSITE PORTRAIT — CENTERED COMPACT CONTROLS
   Website only. No landscape, tablet landscape, iOS or Android.
========================================================= */

@media screen
  and (max-width:768px)
  and (orientation:portrait){

  /*
   * Center the complete controls/statistics group.
   * Width remains slightly narrower than the phone.
   */
  body[data-screen="play"] .play-actions.toolbar-actions{
    display:grid!important;

    grid-template-columns:
      1.08fr
      .78fr
      .78fr
      1.34fr
      .72fr!important;

    width:calc(100% - 18px)!important;
    max-width:390px!important;
    min-width:0!important;

    margin:0 auto 5px!important;
    padding:3px!important;
    gap:3px!important;

    align-items:stretch!important;
    justify-content:center!important;

    border-radius:12px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  /*
   * Five buttons remain on one row:
   * New Game / Undo / Hint / Leaderboard / SFX
   */
  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action{
    grid-column:auto!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    height:38px!important;
    min-height:38px!important;

    margin:0!important;
    padding:2px 1px!important;

    border-radius:8px!important;

    font-size:clamp(7px,2.05vw,10px)!important;
    line-height:1!important;
    letter-spacing:-.02em!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;

    box-sizing:border-box!important;
  }

  /*
   * Compact generated icons above button labels.
   */
  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action::before{
    display:block!important;

    margin:0 0 2px!important;
    padding:0!important;

    font-size:10px!important;
    line-height:1!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action::after{
    display:none!important;
    content:none!important;
  }

  /*
   * Statistics occupy a centered second row.
   */
  body[data-screen="play"]
  .play-actions.toolbar-actions > .status-strip{
    grid-column:1 / -1!important;

    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;

    width:86%!important;
    max-width:330px!important;
    min-width:0!important;

    height:44px!important;
    min-height:44px!important;

    margin:1px auto 0!important;
    padding:0!important;
    gap:0!important;

    border-radius:10px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body[data-screen="play"] .status-strip > div{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    height:44px!important;
    min-height:44px!important;

    margin:0!important;
    padding:2px!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body[data-screen="play"] .status-strip span{
    display:block!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    margin:0 0 2px!important;
    padding:0!important;

    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.10em!important;
    text-align:center!important;
    text-transform:uppercase!important;

    white-space:nowrap!important;
    overflow:hidden!important;
  }

  body[data-screen="play"] .status-strip strong{
    display:block!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    margin:0!important;
    padding:0!important;

    font-size:15px!important;
    line-height:1!important;
    letter-spacing:0!important;
    text-align:center!important;

    white-space:nowrap!important;
    overflow:hidden!important;
  }

  body[data-screen="play"] #timerValue{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    text-align:center!important;
  }
}


/* =========================================================
   EXTRA-NARROW PORTRAIT PHONES
========================================================= */

@media screen
  and (max-width:390px)
  and (orientation:portrait){

  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:
      1.08fr
      .76fr
      .76fr
      1.38fr
      .68fr!important;

    width:calc(100% - 10px)!important;
    max-width:370px!important;

    padding:2px!important;
    gap:2px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action{
    height:36px!important;
    min-height:36px!important;

    padding:2px 0!important;
    font-size:7px!important;
    border-radius:7px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action::before{
    margin-bottom:1px!important;
    font-size:9px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > .status-strip{
    width:84%!important;
    max-width:310px!important;

    height:41px!important;
    min-height:41px!important;
  }

  body[data-screen="play"] .status-strip > div{
    height:41px!important;
    min-height:41px!important;
  }

  body[data-screen="play"] .status-strip span{
    font-size:7px!important;
  }

  body[data-screen="play"] .status-strip strong{
    font-size:14px!important;
  }
}


/* =========================================================
   VERY NARROW PORTRAIT PHONES
========================================================= */

@media screen
  and (max-width:350px)
  and (orientation:portrait){

  body[data-screen="play"] .play-actions.toolbar-actions{
    width:calc(100% - 6px)!important;
    gap:1px!important;
    padding:1px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action{
    height:34px!important;
    min-height:34px!important;
    font-size:6.4px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action::before{
    font-size:8px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > .status-strip{
    width:82%!important;
  }
}


/* =========================================================
   12/10 PORTRAIT BUTTON ROW — FORCE FIX
   Does not change Score / Moves / Time
========================================================= */

@media screen
  and (max-width:768px)
  and (orientation:portrait){

  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:
      minmax(0,1.12fr)
      minmax(0,.82fr)
      minmax(0,.78fr)
      minmax(0,1.38fr)
      minmax(0,.78fr)!important;

    width:calc(100% - 10px)!important;
    max-width:400px!important;

    padding:2px!important;
    column-gap:2px!important;
    row-gap:2px!important;

    justify-content:center!important;
    align-items:center!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:row!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;

    margin:0!important;
    padding:0 2px!important;

    font-size:clamp(6.8px,1.9vw,9px)!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:-.03em!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;

    border-radius:7px!important;
    box-sizing:border-box!important;
  }

  /* Remove generated icons so text has full button width */
  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action::before,
  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action::after{
    display:none!important;
    content:none!important;
  }

  /* Exact text sizing per button */
  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="new"]{
    font-size:8px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="undo"],
  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="hint"]{
    font-size:8px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="leaderboard"]{
    font-size:7px!important;
    letter-spacing:-.05em!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="sound"]{
    font-size:7px!important;
    letter-spacing:-.04em!important;
  }
}


/* Standard iPhone portrait widths */
@media screen
  and (max-width:430px)
  and (orientation:portrait){

  body[data-screen="play"] .play-actions.toolbar-actions{
    grid-template-columns:
      minmax(0,1.14fr)
      minmax(0,.80fr)
      minmax(0,.76fr)
      minmax(0,1.42fr)
      minmax(0,.76fr)!important;

    width:calc(100% - 6px)!important;
    max-width:410px!important;

    padding:1px!important;
    column-gap:1px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;

    padding:0 1px!important;
    font-size:7px!important;
    border-radius:6px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="new"],
  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="undo"],
  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="hint"]{
    font-size:7px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="leaderboard"]{
    font-size:6.4px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="sound"]{
    font-size:6.4px!important;
  }
}


/* Narrow iPhone portrait */
@media screen
  and (max-width:375px)
  and (orientation:portrait){

  body[data-screen="play"] .play-actions.toolbar-actions{
    width:calc(100% - 4px)!important;

    grid-template-columns:
      minmax(0,1.13fr)
      minmax(0,.78fr)
      minmax(0,.74fr)
      minmax(0,1.46fr)
      minmax(0,.72fr)!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button.action{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="new"],
  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="undo"],
  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="hint"]{
    font-size:6.5px!important;
  }

  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="leaderboard"],
  body[data-screen="play"]
  .play-actions.toolbar-actions > button[data-action="sound"]{
    font-size:5.9px!important;
  }
}



/* =========================================================
   MOBILE PORTRAIT ACCOUNT BOTTOM-GAP FIX
   Pulls the final Account section closer to bottom tabs
========================================================= */

@media screen
  and (max-width:768px)
  and (orientation:portrait){

  body[data-screen="account"] #screen-account{
    width:100%!important;
    max-width:100%!important;

    min-height:calc(
      100dvh
      - 112px
      - env(safe-area-inset-bottom)
    )!important;

    padding-top:8px!important;
    padding-bottom:
      calc(
        104px
        + env(safe-area-inset-bottom)
      )!important;

    box-sizing:border-box!important;
  }

  body[data-screen="account"] #screen-account .screen-grid{
    width:100%!important;
    max-width:100%!important;

    min-height:calc(
      100dvh
      - 225px
      - env(safe-area-inset-bottom)
    )!important;

    margin:0 auto!important;
    padding-bottom:0!important;

    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;

    box-sizing:border-box!important;
  }

  body[data-screen="account"] #screen-account .account-panel,
  body[data-screen="account"] #screen-account .account-screen-card,
  body[data-screen="account"] #screen-account .panel-card{
    margin-bottom:0!important;
  }

  /*
   * Remove excess space beneath the final social section.
   */
  body[data-screen="account"] .account-social-block{
    margin-bottom:0!important;
    padding-bottom:8px!important;
  }

  body[data-screen="account"] .account-social-links{
    margin-bottom:0!important;
  }

  body[data-screen="account"] .account-social-links a:last-child{
    margin-bottom:0!important;
  }

  /*
   * Keep bottom tabs fixed while moving their top edge
   * slightly closer to the Account content.
   */
  body[data-screen="account"] .bottom-nav,
  body[data-screen="account"] .app-bottom-nav,
  body[data-screen="account"] .tab-bar{
    bottom:
      calc(
        6px
        + env(safe-area-inset-bottom)
      )!important;
  }
}


/* Standard iPhone portrait */
@media screen
  and (max-width:430px)
  and (orientation:portrait){

  body[data-screen="account"] #screen-account{
    padding-bottom:
      calc(
        96px
        + env(safe-area-inset-bottom)
      )!important;
  }

  body[data-screen="account"] #screen-account .screen-grid{
    min-height:calc(
      100dvh
      - 205px
      - env(safe-area-inset-bottom)
    )!important;
  }
}