@font-face {font-family:SoosLight;src:url('font/Doctor Soos Light 1.1.ttf');}
@font-face {font-family:SoosBold;src:url('font/Doctor Soos Bold 2.1.ttf');}
:root {
  --font1: SoosLight;
  --fontName: SoosBold;
}
* {
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-family: var(--font1);
    user-select: none;
  }

  body {
    text-align: center;
  }
  #playerdatas {
    width: 100%;
    padding: 5px;
  }
  #playerCards {
    display: flex;
    justify-content: center;
    .card {
      /* width: 75px; */
      width: calc( (100vw / 7) - 6px );
      /* min-width: 32px; */
      aspect-ratio: 1/1.35;
      border: 1px solid rgb(0, 0, 0);
      /* display: inline-block; */
      display: flex;
      margin: 1px;
      /* margin-right: calc( (100vw / 20)); */
      text-align: center;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      border-radius: 5px;
      background-color: beige;
      background-size: contain;
      &.selected {
        border: 2px solid rgb(38, 172, 11);
        box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.24);
        transform: translateY(-10px);
      }
      &.facedown {
        background-color: #888;
        color: #fff;
      }
      .value {
        position: absolute;
        top: 2px;
        left: 5px;
        font-size: 1.2rem;
        user-select: none;
      }
      .category {
        position: absolute;
        bottom: 0;
        right: 2px;
        font-size: 1.2rem;
        line-height: 1rem;
        user-select: none;
      }
    }
    .item-card{
      width: 90px;
      aspect-ratio: 1/1;
      border: 1px solid rgb(0, 0, 0);
      /* display: inline-block; */
      display: flex;
      margin: 1px;
      text-align: center;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      border-radius: 5px;
      background-color: beige;
      background-size: cover;
      background-position: center;
    }
  }

  .red {
    color: red;
  }

  .button {
    padding: 5px 5px;
    border-radius: 9px;
    &.nextstep{
      background-color: #fff;
    }
  }

  #buttons {
    margin-top: 20px;
  }

  #score {
    font-weight: bold;
    margin-top: 10px;
  }


  #game-messages {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
  }

  /* enemys */
  #stepdatas {
    position: relative;
    display: flex;
    justify-content: center;

    #stepboard {
      position: relative;
      background-position: top center;
      background-size: cover;
      background-repeat: no-repeat;
      width: 80vh;
      aspect-ratio: 16/9;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .step-header{
        position: absolute;
        top: 5px;
        left: 5px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        /* 
        align-items: center; */
        .enemy-data {
          background-color: #ffffffe3;
          border-radius: 7px;
          display: flex;
          padding: 2px;
          margin: 2px;
          gap:5px;
          font-size: 1.4rem;
          line-height: 1.4rem;
          
          .round-item {
            /* padding: 0px 2px 0 0; */
            font-size: 1rem;
            line-height: 1rem;
            color:#888;
            aspect-ratio: 1/1;
            position: relative;
            width: 16px;
            border-radius: 7px;
            &.actual {
              color:#000000;
              /* border: 1px solid rgb(255, 0, 0); */
              background-color: rgba(255, 208, 0, 0.808);
            }
          }
          &.hide {
            display: none;
          }
          &#enemy-name{
            font-family: var(--fontName);
          }
    
          &#enemy-hp {
          }
    
          &#enemy-round {
          }

        }
        
      }

      
      

      .enemy-tip {
        padding: 7px;
        margin: 2px;
        width: 80%;
        background-color: #fff9edd8;
        border: 1px solid rgba(15, 14, 14, 0.822);
        border-radius: 7px;
        font-size: 1.3rem;
        line-height: 1.3rem;
        z-index: 2;
        &.hide {
          display: none;
        }
        &.fade{
          display: initial;
          animation: fadeOut 7s reverse;
          opacity: 0;
        }
      }
      #cursor {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        height: 30px;
        gap: 5px;
        margin-bottom: 5px;
        font-size: 1.3rem;
        line-height: 1rem;

        &.hide {
          display: none;
        }

        .ico {
          height: 32px;
          background-color: #fff;
          border-radius: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1px 8px;
          &.hide {
            display: none;
        }
        }
      }
    }
  }
  .pile,
  .discardPile {
    width: 75px;
    aspect-ratio: 1/1.5;
    border: 1px solid rgb(0, 0, 0);
    display: inline-block;
    margin: 10px;
    padding: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    /* background-color: beige; */
    background-image: url('../playcards/cover.jpg');
    background-size: cover;
    background-position: center;
    color:white;
  }
  
  
  @media (width > 600px) {
    #playerCards {
      display: flex;
      justify-content: center;
      .card {
        width: 120px;
        border-radius: 4px;
        &.selected {
          border: 2px solid rgb(38, 172, 11);
          box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.24);
          transform: translateY(-10px);
        }
        .value {
          position: absolute;
          top: 5px;
          left: 8px;
          font-size: 2rem;
          user-select: none;
        }
        .category {
          position: absolute;
          bottom: 0px;
          right: 8px;
          font-size: 2rem;
          line-height: 2rem;
          user-select: none;
        }
      }
    }
  }
  
  @keyframes fadeOut {
    0% { opacity: 0; }
    20% { opacity: 0; }
    95% { opacity: 1; }
    100% { opacity: 0; }
  }