/* =====================================================
   DOC'S TRIVIA CARD THEME
===================================================== */


/* =====================================================
   TRIVIA BACKGROUND
===================================================== */

.game-card-trivia{
  border-color:
    rgba(117,230,186,.36);

  background:#071812;
}

.game-card-trivia .game-display-background{
  background:
    radial-gradient(
      circle at 70% 56%,
      rgba(231,191,78,.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 84% 17%,
      rgba(62,183,142,.23),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #071211 0%,
      #0d2e24 47%,
      #06140f 100%
    );

  animation-duration:24s;
}

.game-card-trivia .game-display-background::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 53%,
      rgba(117,239,199,.09) 62%,
      transparent 72%
    );

  transform:translateX(-30%);

  animation:
    triviaLightSweep
    12s
    ease-in-out
    infinite alternate;
}

.game-card-trivia .game-display-overlay{
  background:
    linear-gradient(
      90deg,
      rgba(4,11,14,.94) 0%,
      rgba(7,22,22,.83) 42%,
      rgba(6,29,23,.4) 69%,
      rgba(3,13,10,.57) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3,10,11,.08) 0%,
      rgba(4,13,13,.04) 34%,
      rgba(3,13,10,.45) 74%,
      rgba(2,9,7,.91) 100%
    );
}


/* =====================================================
   TRIVIA STATUS
===================================================== */

.game-card-trivia .game-display-status{
  border-color:
    rgba(255,235,164,.86);

  background:
    linear-gradient(
      180deg,
      #ffef9e,
      #f8bc42 54%,
      #c98517
    );
}

.game-card-trivia .game-display-featured{
  border-color:
    rgba(97,220,171,.42);

  color:#dffff2;

  background:
    rgba(7,39,30,.68);
}


/* =====================================================
   TRIVIA INFO
===================================================== */

.game-card-trivia .game-display-info{
  width:57%;

  padding:
    72px
    14px
    46px
    clamp(28px,3.2vw,48px);
}

.game-card-trivia .game-display-info::before{
  width:58px;

  margin-bottom:22px;

  background:
    linear-gradient(
      90deg,
      #f8bd42,
      #53d4a6
    );

  box-shadow:
    0 0 15px rgba(83,212,166,.34);
}

.game-card-trivia .game-display-top{
  margin-bottom:17px;
}

.game-card-trivia .game-display-badge{
  border-color:
    rgba(104,224,181,.42);

  color:#dffff2;

  background:
    rgba(6,37,29,.58);
}

.game-card-trivia .game-display-icon{
  border-color:
    rgba(104,224,181,.42);

  background:
    rgba(6,42,33,.7);
}

.game-card-trivia .game-display-info h3{
  max-width:365px;

  color:#fff4d3;

  font-size:
    clamp(3.45rem,4.8vw,4.85rem);

  line-height:.83;
  letter-spacing:-.067em;
}

.game-card-trivia .game-display-subtitle{
  max-width:365px;

  margin:
    14px 0 16px;

  color:#64d8ad;

  font-size:
    clamp(.92rem,1.25vw,1.18rem);

  line-height:1.04;
}

.game-card-trivia .game-display-description{
  max-width:365px;

  margin-bottom:20px;

  font-size:.82rem;
  line-height:1.54;
}


/* =====================================================
   TRIVIA STATS + DETAILS
===================================================== */

.game-card-trivia .game-display-stats{
  width:min(100%,365px);

  gap:7px;
}

.game-card-trivia .game-display-stats div{
  min-height:66px;

  padding:
    9px 8px;

  border-color:
    rgba(103,220,177,.16);

  background:
    rgba(4,29,23,.48);
}

.game-card-trivia .game-display-stats strong{
  color:#f2c355;

  font-size:.48rem;
}

.game-card-trivia .game-display-stats span{
  font-size:.63rem;
}

.game-card-trivia .game-display-details{
  width:min(100%,390px);

  gap:6px;
}

.game-card-trivia .game-display-details span{
  min-height:32px;

  padding:
    7px 8px;

  border-color:
    rgba(103,220,177,.16);

  background:
    rgba(4,29,23,.48);

  font-size:.59rem;
}

.game-card-trivia .game-display-details span::before{
  background:#60d7aa;

  box-shadow:
    0 0 9px rgba(96,215,170,.66);
}


/* =====================================================
   TRIVIA BUTTONS
===================================================== */

.game-card-trivia .game-display-actions{
  gap:9px;
}

.game-card-trivia .game-display-btn{
  min-height:44px;

  padding:
    10px 15px;

  font-size:.64rem;
}

.game-card-trivia .game-display-btn.primary{
  border-color:
    rgba(122,239,197,.78);

  color:#eafff7;

  background:
    linear-gradient(
      180deg,
      #188a68,
      #0d6b51 55%,
      #08503d
    );

  box-shadow:
    0 14px 26px rgba(3,22,17,.38),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.game-card-trivia .game-display-btn.secondary{
  border-color:
    rgba(108,223,181,.34);

  background:
    rgba(5,34,27,.66);
}


/* =====================================================
   TRIVIA FEATURE ART
===================================================== */

.game-card-trivia .game-display-art{
  right:14px;
  bottom:124px;

  width:44%;
  height:38%;
}

.game-card-trivia .game-display-glow{
  width:84%;
  height:84%;

  background:
    radial-gradient(
      ellipse,
      rgba(232,194,82,.2),
      rgba(72,201,153,.11) 42%,
      transparent 70%
    );
}

.game-card-trivia .game-display-image{
  width:min(100%,285px);
  max-height:225px;

  object-fit:contain;

  border:
    1px solid
    rgba(245,208,104,.24);

  border-radius:2px;

  box-shadow:
    0 22px 38px rgba(0,0,0,.38);

  transform:
    translateY(10px);
}

.game-card-trivia .game-display-start{
  right:28px;
  bottom:24px;

  border-color:
    rgba(105,222,180,.38);

  background:
    rgba(4,31,24,.72);
}


/* =====================================================
   TRIVIA MODAL
===================================================== */

.game-card-trivia + .game-details-modal .game-details-card{
  border-color:
    rgba(104,224,181,.34);

  background:
    linear-gradient(
      180deg,
      #12372d,
      #071b15
    );
}


/* =====================================================
   LARGE TABLET
===================================================== */

@media(max-width:1420px) and (min-width:761px){

  .game-card-trivia .game-display-info{
    width:56%;

    padding-left:34px;
  }

  .game-card-trivia .game-display-info h3{
    max-width:335px;

    font-size:
      clamp(3.1rem,4.45vw,4.25rem);
  }

  .game-card-trivia .game-display-subtitle{
    max-width:335px;

    font-size:
      clamp(.84rem,1.15vw,1.05rem);
  }

  .game-card-trivia .game-display-description{
    max-width:335px;

    font-size:.78rem;
  }

  .game-card-trivia .game-display-stats{
    width:min(100%,340px);
  }

  .game-card-trivia .game-display-details{
    width:min(100%,360px);
  }

  .game-card-trivia .game-display-art{
    right:10px;

    width:45%;
  }

  .game-card-trivia .game-display-image{
    width:min(100%,265px);
    max-height:215px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:760px){

  .game-card-trivia .game-display-info{
    width:100%;

    padding:
      92px
      18px
      330px;

    text-align:center;
  }

  .game-card-trivia .game-display-info::before{
    margin:
      0 auto 22px;
  }

  .game-card-trivia .game-display-top{
    justify-content:center;
  }

  .game-card-trivia .game-display-info h3{
    max-width:none;

    font-size:
      clamp(3.2rem,15vw,4.55rem);
  }

  .game-card-trivia .game-display-subtitle{
    max-width:none;

    font-size:1rem;
  }

  .game-card-trivia .game-display-description{
    max-width:440px;

    margin-left:auto;
    margin-right:auto;
  }

  .game-card-trivia .game-display-stats,
  .game-card-trivia .game-display-details{
    margin-left:auto;
    margin-right:auto;
  }

  .game-card-trivia .game-display-actions{
    justify-content:center;
  }

  .game-card-trivia .game-display-art{
    right:50%;
    bottom:82px;

    width:92%;
    height:260px;

    transform:
      translateX(50%);
  }

  .game-card-trivia .game-display-image{
    width:min(100%,295px);
    max-height:235px;

    transform:none;
  }

  .game-card-trivia .game-display-start{
    right:50%;
    bottom:18px;

    transform:
      translateX(50%);
  }

  .game-card-trivia .game-display-start:hover{
    transform:
      translateX(50%)
      translateY(-3px);
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:520px){

  .game-card-trivia .game-display-info{
    padding:
      102px
      14px
      320px;
  }

  .game-card-trivia .game-display-info h3{
    font-size:
      clamp(2.85rem,14.5vw,4rem);
  }

  .game-card-trivia .game-display-subtitle{
    font-size:.92rem;
  }

  .game-card-trivia .game-display-stats,
  .game-card-trivia .game-display-details{
    grid-template-columns:1fr;
  }

  .game-card-trivia .game-display-actions{
    flex-direction:column;
  }

  .game-card-trivia .game-display-btn{
    width:100%;
  }

  .game-card-trivia .game-display-art{
    height:245px;
  }

  .game-card-trivia .game-display-image{
    width:min(100%,270px);
    max-height:215px;
  }

}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes triviaLightSweep{
  from{
    transform:
      translateX(-45%);
  }

  to{
    transform:
      translateX(55%);
  }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

  .game-card-trivia .game-display-background::before{
    animation:none;
  }

}