/* Landscape tablet mode */
@media screen and (orientation: landscape) and (min-aspect-ratio: 4/4) and (max-aspect-ratio: 3/2) {

   :root {
      --scale: 0.56;
   }

   body {
      font-size: 1.3em;
   }

   /*  --- fight layout  --- */

   #fight {
      background-color: black;
      background-image: url(../images/battlegrounds/bg5-tablet.jpg);
      background-size: 100% auto;
      background-position: top center;
      background-repeat: no-repeat;
   }

   /* Set #battlefield height to 100vh, but cap it at 66vw */
   #battlefield {
      height: 100vh;
      max-height: 56.3vw; /* 16:9 */
      display: flex;
      flex-direction: column;
   }

   /* Set #cpu and #human to each take up 50% of the height of #battlefield */
   #cpu,
   #human {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 50% !important;
   }

   /* Each box inside #cpu and #human will take 50% of their container's height (which will be 25% of #battlefield) */
   .mainRow,
   .boxMs {
      flex: 1;
      display: flex;
      justify-content: center; /* Optional for centering content */
      align-items: center; /* Optional for centering content */
   }

   /*  --- fight --- */


   #boxUserHand .card {
      transform: scale(var(--scale));
   }

   #battlefield .boxCardsPlayed .card {
      transform: scale(var(--scale));
   }

   #popup.tutorial_fight {
      bottom: 65%;
  }
   .evade {
      
   }

   /* set --scale for tablet */

   #battlefield .card {
      transform: scale(var(--scale));
   }

   @keyframes pulse {
      0% {
         transform: scale(var(--scale));
      }

      60% {
         transform: scale(0.7);
         margin-top: -12px;
      }

      100% {
         transform: scale(var(--scale));;
      }
   }

   .boxHp,
   .boxPlayerEnergy {
      font-size: 20px;
   }

   #boxCPUHp {
      top: calc(100% - 32px);
   }
   #boxUserHp {
      bottom: 5px;
   }

   .boxPlayerEnergy {
      top: 0%;
   }

   #boxUserEnergy {
   }

   .imgDeal .card {
      zoom: 1.2;
   }

   #boxUserHand {
      xoverflow: hidden;
   }

   #boxUserHand .card {
   }

   .unitType {
      top: calc(50% + 9px);
   }

   .card .cardTexts {
      top: calc(50% + 60px);
   }

   [data-rarity="0"] .borderOuter {
      bottom: -10px;
   }

   .card .name {
      top: 52%;
      font-size: 24px !important;
   }

   #popupCardDetail .card .name {
      top: 51%;
      line-height: 57px;
      font-size: 24px;
   }

   /* game over*/
   .boxCrates {
   }

   .boxXpGain,
   .boxEloChange {
      top: 120px;
   }

   /*   -------------   G ENE R A L FIGHT -----------  */
   #popupNewCard .card {
      zoom: 1;
   }

   #boxNextTurn {
      position: absolute;
      top: calc(35% - 45px);
   }

   /*  OTHER */

   /* for user area*/
   .boxCrates,
   .boxFilledCrates {
      bottom: 40%;
   }

   #fightGameOver .boxCrates,
   #fightGameOver .boxFilledCrates {
      bottom: 5px; /* here we do have full screen scaling - put on bottom */
   }

   .headingCrates {
      bottom: 53%;
   }

   /* decks ----------------------------------------------------*/
   #decks .row > div {
      height: 100px;
   }

   #decks .label,
   #decks .deckVal {
      font-size: 85%;
      display: inline-block;
      padding: 0px 10px;
      line-height: 30px;
      height: 30px;
   }
}