:root {
    --card-initial-width: 95px;
    --card-initial-height: 152px;
    --small-card-scale: 0.46;
  
    --vertical-twitch-container-width: 100%;
    --vertical-twitch-container-height: calc(59.6% * 1.05);
  
    --horizontal-twitch-container-width: 45.6%;
    --horizontal-twitch-container-height: 100%;
  
    --mobile-hand-card-margin: 0.2vw;

    --mobile-board-card-margin: 1.2vw;

    --max-hand-cards: 7;

    --max-avatars: 3;
    --mobile-avatar-margin: 0.65vw;

    --avatar-container-width: 33vw;
    --avatar-container-height: 5vh;

    --default-padding-width: 1vw;
    --default-padding-height: 0.5vw;



    --hand-card-inactive-translateY: 10vh;


  }



  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 400;
    src: url("fonts/Inter-Regular.woff2") format("woff2"),
         url("fonts/Inter-Regular.woff") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 500;
    src: url("fonts/Inter-Medium.woff2") format("woff2"),
         url("fonts/Inter-Medium.woff") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 600;
    src: url("fonts/Inter-SemiBold.woff2") format("woff2"),
         url("fonts/Inter-SemiBold.woff") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 700;
    src: url("fonts/Inter-Bold.woff2") format("woff2"),
         url("fonts/Inter-Bold.woff") format("woff");
  }


  html{ 
    height: 100%;
    overflow: hidden;
    user-select: none;
  }

  body {
    margin: 0;
    display: flex;
  /*   height: calc(100% - 56px); */
    height: 100%;
    /* overscroll-behavior-y: none; */
    font-family: 'Inter';
  }
  
  .gameplay-container {
    height: 100%;
    background: #131313;
    display: flex;
    flex-direction: column;
    /*   
    justify-content: flex-end; */
    position: relative;
  }
  

  .debug-container{
    position: absolute;
    top: 0;
    left: 0;
  }

  .debug {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Courier';
    pointer-events: none;
  }

  .debug:nth-of-type(2){
     left: unset;
     right: 0;
  }
  
  .hand,
  .board,
  .leaderboard-container,
  .status-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: calc(var(--mobile-card-initial-height) * 0.1);
  }
  
  .board{
      margin-top: calc(var(--mobile-card-initial-height) * 0.1);
      margin-bottom: unset;
      justify-content: space-evenly;
  }


  .leaderboard-container{
    margin-top: calc(var(--mobile-card-initial-height) * 0.1);
    margin-bottom: calc(var(--mobile-card-initial-height) * 0.1);
  }

  .status-container{
    margin-top: calc(var(--mobile-card-initial-height) * 0.1);
    margin-bottom: calc(var(--mobile-card-initial-height) * 0.2);
  }

  .match-timer{
    color: #fff;
    padding: var(--default-padding-height) var(--default-padding-width);
    background: rgba(255,255,255,.13);
    border-radius: 3px;
  }

  .card,
  .slot{
    width: var(--mobile-card-initial-width);
    height: var(--mobile-card-initial-height);
    background: red;
    border-radius: 3px;
    margin-left: 0.65vw;
    margin-right: 0.65vw;
    flex-shrink: 0;
  }
  
  .slot{
      background: rgba(255,255,255,.13);
  }

  .avatar-container{
    width: var(--avatar-container-width);
    height: var(--avatar-container-height);
    background: gray;
    border-radius: 3px;
    margin-left: 0.65vw;
    margin-right: 0.65vw;
    flex-shrink: 0;
  }

  .is-display-none{
    display: none;
  }


  .card.is-active{
    /* width: var(--mobile-card-active-width);
    height: var(--mobile-card-active-height); */
    border: 5px solid rgba(255,255,255,.34);
  }

  .card.is-inactive{
    transform: translateY(var(--hand-card-inactive-translateY));
    opacity: 0.1;
  }

  @media (min-resolution: 120dpi) {
    .card {
      background: green;
    }
  }
  
  @media (min-resolution: 144dpi) {
    .card {
      background: blue;
    }
  }
  
  @media (orientation: landscape) {
    
    :root{
      --mobile-hand-card-margin: 0.3vw;
      
      --mobile-card-initial-width: calc(100vw / var(--max-hand-cards) * 0.5 - var(--mobile-hand-card-margin) * var(--max-hand-cards));
      --mobile-card-initial-height: calc(var(--mobile-card-initial-width) * 1.1);

      /* --mobile-card-active-width: calc(33vw * 0.5 - var(--mobile-board-card-margin) * 3);
      --mobile-card-active-height: calc(var(--mobile-card-initial-width) * 3.5); */

      --avatar-container-width: calc(100vw / var(--max-avatars) * 0.475 - var(--mobile-avatar-margin) * var(--max-avatars));
      --avatar-container-height: calc(var(--avatar-container-width) * 0.175);


      --hand-card-inactive-translateY: 10vh;
    }

    
    .twitch-container {
      width: var(--horizontal-twitch-container-width);
      height: var(--horizontal-twitch-container-height);
      margin-left: auto;
    }
  }
  
  @media (orientation: portrait) {
  
    :root{
      --default-padding-width: 2vw;
      --default-padding-height: 1vw;

      --mobile-card-initial-width: calc(100vw / var(--max-hand-cards) - var(--mobile-hand-card-margin) * var(--max-hand-cards));
      --mobile-card-initial-height: calc(var(--mobile-card-initial-width) * 1.1);

      /* --mobile-card-active-width: calc(33vw * 1 - var(--mobile-board-card-margin) * 3);
      --mobile-card-active-height: calc(var(--mobile-card-initial-width) * 3.5); */

      --avatar-container-width: calc(100vw / var(--max-avatars) - var(--mobile-avatar-margin) * var(--max-avatars));
      --avatar-container-height: calc(var(--avatar-container-width) * 0.175);

      --hand-card-inactive-translateY: 10vh;
    }
    
    .twitch-container {
      width: var(--vertical-twitch-container-width);
      height: var(--vertical-twitch-container-height);
      margin-top: auto;
    }
  }