/* =====================================================
   GAME LIBRARY CARDS
   Shared cinematic card system
===================================================== */


/* =====================================================
   SECTION 1: CARDS SECTION
===================================================== */

.game-cards-section{
  position:relative;

  width:100%;

  padding:
    0 24px 74px;
}

.game-cards-wrap{
  width:min(1560px,100%);

  margin:0 auto;
}

.game-cards-heading{
  position:relative;
  isolation:isolate;

  max-width:780px;

  margin:
    0 auto 30px;

  text-align:center;
}

.game-cards-heading-glow{
  position:absolute;

  left:50%;
  top:50%;

  z-index:-1;

  width:min(620px,92%);
  height:150px;

  transform:
    translate(-50%,-50%);

  border-radius:999px;

  background:
    radial-gradient(
      circle,
      rgba(255,197,89,.18),
      rgba(255,116,61,.07),
      transparent 70%
    );

  filter:blur(22px);
}

.game-cards-heading p{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  margin:0;

  color:#ffe7a5;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.7rem;
  font-weight:950;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.game-cards-heading p span{
  width:42px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,202,100,.82)
    );
}

.game-cards-heading p span:last-child{
  background:
    linear-gradient(
      90deg,
      rgba(255,202,100,.82),
      transparent
    );
}


/* =====================================================
   SECTION 2: GAME GRID
===================================================== */

.game-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;

  align-items:stretch;
}

#gameLibraryBingoCard,
#gameLibraryTriviaCard{
  min-width:0;
  height:100%;
}


/* =====================================================
   SECTION 3: DISPLAY CARD SHELL
===================================================== */

.game-display-card{
  position:relative;
  isolation:isolate;

  min-height:720px;
  height:100%;

  overflow:hidden;

  border:
    1px solid
    rgba(255,226,170,.34);

  border-radius:30px;

  background:#170f20;

  box-shadow:
    0 34px 86px rgba(0,0,0,.43),
    0 14px 32px rgba(32,10,27,.3),
    0 0 0 1px rgba(255,255,255,.05);

  transition:
    transform .32s ease,
    box-shadow .32s ease;
}

.game-display-card:hover{
  transform:
    translateY(-5px);

  box-shadow:
    0 44px 100px rgba(0,0,0,.5),
    0 18px 38px rgba(32,10,27,.34),
    0 0 28px rgba(255,175,67,.1);
}


/* =====================================================
   SECTION 4: CARD BACKGROUND
===================================================== */

.game-display-background{
  position:absolute;
  inset:-2%;

  z-index:-4;

  pointer-events:none;

  transform:
    scale(1.04);

  animation:
    gameCardBackgroundDrift
    20s
    ease-in-out
    infinite alternate;
}

.game-card-stingo .game-display-background{
  background:
    url("/bingo/bingomedia/DoofusBeachBackground.png")
    center center / cover
    no-repeat;
}

.game-display-overlay{
  position:absolute;
  inset:0;

  z-index:-3;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(6,8,21,.91) 0%,
      rgba(15,10,24,.76) 41%,
      rgba(12,9,21,.29) 69%,
      rgba(8,8,18,.47) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5,7,18,.13) 0%,
      rgba(8,8,18,.04) 35%,
      rgba(21,10,22,.47) 76%,
      rgba(18,8,19,.88) 100%
    ),
    radial-gradient(
      circle at 73% 54%,
      rgba(255,191,76,.12),
      transparent 34%
    );
}


/* =====================================================
   SECTION 5: STATUS GROUP
===================================================== */

.game-display-status-group{
  position:absolute;

  top:22px;
  right:22px;

  z-index:8;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
}

.game-display-status,
.game-display-featured{
  width:max-content;

  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:
    8px 13px;

  border-radius:
    999px;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.61rem;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.game-display-status{
  border:
    1px solid
    rgba(255,235,173,.84);

  color:#4c2911;

  background:
    linear-gradient(
      180deg,
      #fff0a9,
      #ffc153 54%,
      #df8e24
    );

  box-shadow:
    0 12px 24px rgba(40,16,20,.3),
    inset 0 1px 0 rgba(255,255,255,.76);
}

.game-display-featured{
  border:
    1px solid
    rgba(255,231,185,.32);

  color:#fff2d2;

  background:
    rgba(17,14,24,.58);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  box-shadow:
    0 12px 22px rgba(8,5,14,.25),
    inset 0 1px 0 rgba(255,255,255,.1);
}


/* =====================================================
   SECTION 6: INFO CONTENT
===================================================== */

.game-display-info{
  position:relative;
  z-index:4;

  width:58%;

  display:flex;
  flex-direction:column;

  min-height:720px;

  padding:
    72px
    18px
    46px
    clamp(28px,3.5vw,52px);
}

.game-display-info::before{
  content:"";

  width:58px;
  height:3px;

  margin-bottom:22px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #ffc451,
      #ff743d
    );

  box-shadow:
    0 0 15px rgba(255,165,57,.42);
}

.game-display-top{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:17px;
}

.game-display-badge{
  display:inline-flex;
  align-items:center;

  width:max-content;
  max-width:calc(100% - 50px);

  padding:
    8px 12px;

  border:
    1px solid
    rgba(255,224,164,.44);

  border-radius:999px;

  color:#ffe2a1;

  background:
    rgba(17,14,24,.52);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.61rem;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.game-display-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border:
    1px solid
    rgba(255,226,169,.42);

  border-radius:50%;

  background:
    rgba(17,14,24,.58);

  box-shadow:
    0 10px 20px rgba(6,4,12,.28);

  font-size:.95rem;
}

.game-display-info h3{
  max-width:100%;

  margin:0;

  color:#fff4d3;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(4rem,5.7vw,5.65rem);

  font-weight:1000;
  line-height:.83;
  letter-spacing:-.072em;
  text-transform:uppercase;

  text-shadow:
    0 5px 0 rgba(78,25,39,.26),
    0 17px 36px rgba(6,4,12,.48);
}

.game-display-subtitle{
  margin:
    14px 0 16px;

  color:#ff9344;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(1rem,1.5vw,1.35rem);

  font-weight:950;
  line-height:1.03;
  letter-spacing:.07em;
  text-transform:uppercase;

  text-shadow:
    0 3px 0 rgba(92,32,34,.3),
    0 8px 18px rgba(6,4,12,.3);
}

.game-display-description{
  max-width:385px;

  margin:
    0 0 20px;

  color:
    rgba(255,244,220,.9);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.84rem;
  font-weight:720;
  line-height:1.55;

  text-shadow:
    0 3px 10px rgba(5,3,11,.75);
}


/* =====================================================
   SECTION 7: STATS
===================================================== */

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

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;

  margin-bottom:12px;
}

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

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;

  padding:
    9px;

  border:
    1px solid
    rgba(255,231,185,.2);

  border-radius:12px;

  background:
    rgba(15,13,22,.42);

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);
}

.game-display-stats strong{
  color:#ffbd55;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.49rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.game-display-stats span{
  color:#fff2d3;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.65rem;
  font-weight:900;
  line-height:1.15;
}


/* =====================================================
   SECTION 8: DETAILS
===================================================== */

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

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;

  margin-bottom:20px;
}

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

  display:flex;
  align-items:center;
  gap:7px;

  padding:
    7px 8px;

  border:
    1px solid
    rgba(255,230,182,.14);

  border-radius:10px;

  color:
    rgba(255,243,217,.86);

  background:
    rgba(14,12,21,.34);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.6rem;
  font-weight:850;
}

.game-display-details span::before{
  content:"";

  width:6px;
  height:6px;

  flex:0 0 6px;

  border-radius:50%;

  background:#ffbc50;

  box-shadow:
    0 0 9px rgba(255,185,72,.68);
}


/* =====================================================
   SECTION 9: ACTIONS
===================================================== */

.game-display-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;

  margin-top:auto;
}

.game-display-btn{
  appearance:none;

  min-height:44px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:
    10px 15px;

  border-radius:12px;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.64rem;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;

  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.game-display-btn.primary{
  border:
    1px solid
    rgba(255,238,183,.88);

  color:#4e2b12;

  background:
    linear-gradient(
      180deg,
      #fff0aa,
      #ffc054 52%,
      #df8e25
    );

  box-shadow:
    0 14px 26px rgba(55,20,20,.34),
    inset 0 2px 0 rgba(255,255,255,.72);
}

.game-display-btn.primary::after{
  content:"›";

  margin-left:9px;

  font-size:1.05rem;
}

.game-display-btn.secondary{
  border:
    1px solid
    rgba(255,232,193,.32);

  color:#fff2d1;

  background:
    rgba(16,13,23,.58);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  box-shadow:
    0 12px 22px rgba(6,4,12,.26),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.game-display-btn:hover{
  transform:
    translateY(-3px);
}


/* =====================================================
   SECTION 10: FEATURE ART
===================================================== */

.game-display-art{
  position:absolute;

  right:18px;
  bottom:122px;

  z-index:3;

  width:42%;
  height:39%;

  display:grid;
  place-items:center;

  pointer-events:none;
}

.game-display-glow{
  position:absolute;

  width:88%;
  height:88%;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,220,123,.28),
      rgba(255,143,54,.08) 42%,
      transparent 70%
    );

  filter:blur(26px);

  animation:
    gameGlowPulse
    5s
    ease-in-out
    infinite;
}

.game-display-image{
  position:relative;
  z-index:2;

  display:block;

  width:min(100%,285px);
  max-height:245px;

  object-fit:contain;

  border-radius:3px;

  filter:
    drop-shadow(0 22px 24px rgba(5,3,10,.5))
    drop-shadow(0 0 20px rgba(255,182,68,.12));

  animation:
    gameLogoFloat
    5s
    ease-in-out
    infinite;
}

.game-card-stingo .game-display-image{
  width:min(100%,300px);
  max-height:250px;
}


/* =====================================================
   SECTION 11: PRESS START
===================================================== */

.game-display-start{
  position:absolute;

  right:30px;
  bottom:24px;

  z-index:6;

  min-height:42px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:
    10px 18px;

  border:
    1px solid
    rgba(255,232,193,.38);

  border-radius:999px;

  color:#fff1cf;

  background:
    rgba(16,13,23,.6);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  box-shadow:
    0 12px 22px rgba(5,3,10,.3),
    inset 0 1px 0 rgba(255,255,255,.08);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.64rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;

  transition:
    transform .2s ease,
    border-color .2s ease;
}

.game-display-start:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(255,219,146,.68);
}


/* =====================================================
   SECTION 12: MODAL
===================================================== */

.game-details-modal{
  position:fixed;
  inset:0;

  z-index:9999;

  display:none;
  align-items:center;
  justify-content:center;

  padding:30px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.game-details-modal.show{
  display:flex;

  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.game-details-modal[aria-hidden="true"]{
  display:none !important;
}

.game-details-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(6,4,12,.82);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.game-details-card{
  position:relative;
  z-index:2;

  width:min(1080px,100%);
  max-height:90vh;

  overflow:auto;

  border:
    1px solid
    rgba(255,224,164,.34);

  border-radius:30px;

  background:
    linear-gradient(
      180deg,
      #351b31,
      #17101d
    );

  box-shadow:
    0 42px 110px rgba(0,0,0,.68);

  transform:
    translateY(30px)
    scale(.97);

  transition:
    transform .3s ease;
}

.game-details-modal.show .game-details-card{
  transform:
    translateY(0)
    scale(1);
}

.game-details-close{
  position:absolute;

  top:16px;
  right:16px;

  z-index:5;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,232,193,.28);

  border-radius:50%;

  color:#fff0cf;

  background:
    rgba(13,11,19,.7);

  font-size:1.5rem;

  cursor:pointer;
}

body.game-details-open{
  overflow:hidden;
}


/* =====================================================
   SECTION 13: LARGE TABLET
===================================================== */

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

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

    padding-left:38px;
  }

  .game-display-info h3{
    font-size:
      clamp(3.7rem,5.4vw,5.1rem);
  }

  .game-display-description{
    max-width:350px;

    font-size:.8rem;
  }

  .game-display-art{
    right:14px;

    width:43%;
  }

  .game-card-stingo .game-display-image{
    width:min(100%,275px);
  }

}


/* =====================================================
   SECTION 14: STACKED GRID
===================================================== */

@media(max-width:1320px){

  .game-card-grid{
    grid-template-columns:1fr;

    width:min(920px,100%);

    margin:0 auto;
  }

}


/* =====================================================
   SECTION 15: MOBILE
===================================================== */

@media(max-width:760px){

  .game-cards-section{
    padding:
      0 14px 70px;
  }

  .game-display-card{
    min-height:860px;

    border-radius:24px;
  }

  .game-display-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(6,8,19,.5),
        rgba(13,10,22,.7) 44%,
        rgba(17,8,19,.92) 100%
      );
  }

  .game-display-status-group{
    top:16px;
    right:16px;
  }

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

    min-height:auto;

    padding:
      92px
      18px
      340px;

    text-align:center;
  }

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

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

  .game-display-info h3{
    font-size:
      clamp(3.8rem,18vw,5.4rem);
  }

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

    font-size:1.05rem;
  }

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

  .game-display-description{
    max-width:450px;
  }

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

  .game-display-art{
    right:50%;
    bottom:86px;

    width:92%;
    height:275px;

    transform:
      translateX(50%);
  }

  .game-display-image,
  .game-card-stingo .game-display-image{
    width:min(100%,310px);
    max-height:250px;
  }

  .game-display-start{
    right:50%;
    bottom:20px;

    transform:
      translateX(50%);
  }

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

}


/* =====================================================
   SECTION 16: SMALL MOBILE
===================================================== */

@media(max-width:520px){

  .game-display-card{
    min-height:940px;
  }

  .game-display-status,
  .game-display-featured{
    font-size:.54rem;
  }

  .game-display-info{
    padding:
      102px
      14px
      330px;
  }

  .game-display-info h3{
    font-size:
      clamp(3.3rem,17vw,4.6rem);
  }

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

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

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

  .game-display-art{
    height:255px;
  }

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

}


/* =====================================================
   SECTION 17: ANIMATIONS
===================================================== */

@keyframes gameCardBackgroundDrift{
  from{
    transform:
      scale(1.04)
      translate3d(-.4%,0,0);
  }

  to{
    transform:
      scale(1.07)
      translate3d(.5%,-.4%,0);
  }
}

@keyframes gameLogoFloat{
  0%,
  100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(-7px);
  }
}

@keyframes gameGlowPulse{
  0%,
  100%{
    opacity:.5;

    transform:
      scale(.94);
  }

  50%{
    opacity:.8;

    transform:
      scale(1.06);
  }
}


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

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

  .game-display-background,
  .game-display-glow,
  .game-display-image{
    animation:none;
  }

  .game-display-card,
  .game-display-btn,
  .game-display-start{
    transition:none;
  }

}