/* =========================================================
   DOOFUS CREST: CABANA CHAOS
========================================================= */


/* =========================================================
   1. THEME
========================================================= */

.doofus-feature-mount{

  --doof-orange:#ff8a24;
  --doof-orange-light:#ffb45d;
  --doof-orange-dark:#c95209;

  --doof-teal:#39c6aa;
  --doof-teal-light:#78ead3;
  --doof-teal-dark:#0e6557;

  --doof-cream:#fff2d2;
  --doof-white:#fffaf0;

}


/* =========================================================
   2. FEATURE MOUNT
========================================================= */

.doofus-feature-mount{

  width:
    min(
      1180px,
      calc(100% - 72px)
    );

  margin:
    0 auto 36px;

}


/* =========================================================
   3. CARD
========================================================= */

.doofus-card{

  position:relative;

  isolation:isolate;

  width:100%;

  min-height:430px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,157,67,.42);

  border-radius:28px;

  background:#06100e;

  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    0 0 44px rgba(255,125,26,.06),
    inset 0 1px 0 rgba(255,255,255,.06);

}


/* =========================================================
   4. BEACH BACKGROUND
========================================================= */

.doofus-card-background{

  position:absolute;

  inset:-2%;

  z-index:-4;

  background:

    url("/bingo/bingomedia/DoofusBeachBackground.png")
    center center / cover
    no-repeat;

  transform:
    scale(1.035);

  animation:
    doofusBackgroundDrift
    20s
    ease-in-out
    infinite alternate;

}


/* =========================================================
   5. OVERLAY
========================================================= */

.doofus-card-overlay{

  position:absolute;

  inset:0;

  z-index:-3;

  pointer-events:none;

  background:

    linear-gradient(
      90deg,
      rgba(3,10,9,.93) 0%,
      rgba(4,16,13,.82) 34%,
      rgba(7,15,13,.50) 67%,
      rgba(4,8,7,.62) 100%
    ),

    linear-gradient(
      180deg,
      rgba(0,0,0,.16),
      transparent 46%,
      rgba(0,0,0,.34)
    ),

    radial-gradient(
      circle at 77% 43%,
      rgba(255,142,43,.15),
      transparent 35%
    );

}


/* =========================================================
   6. TEXTURE
========================================================= */

.doofus-card::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:-2;

  pointer-events:none;

  background:

    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.012) 0,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 18px
    );

}


/* =========================================================
   7. STATUS
========================================================= */

.doofus-card-status-group{

  position:absolute;

  top:22px;
  right:24px;

  z-index:8;

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  gap:8px;

}


.doofus-card-status{

  display:inline-flex;

  align-items:center;

  gap:7px;

  padding:
    8px 14px;

  border:
    1px solid
    rgba(255,185,97,.72);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #ffdc8d,
      #f4a134
    );

  color:#482200;

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

  font-size:.64rem;

  font-weight:950;

  letter-spacing:.07em;

  text-transform:uppercase;

}


.doofus-card-featured{

  padding:
    7px 12px;

  border:
    1px solid
    rgba(89,218,191,.36);

  border-radius:999px;

  background:
    rgba(5,41,34,.74);

  color:
    var(--doof-teal-light);

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

  font-size:.59rem;

  font-weight:900;

  letter-spacing:.07em;

  text-transform:uppercase;

  backdrop-filter:
    blur(8px);

}


/* =========================================================
   8. CARD LAYOUT
========================================================= */

.doofus-card-layout{

  position:relative;

  z-index:3;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,360px);

  align-items:center;

  gap:
    clamp(26px,4vw,54px);

  min-height:430px;

  padding:
    68px
    clamp(34px,5vw,58px)
    52px;

}


/* =========================================================
   9. COPY
========================================================= */

.doofus-card-copy{

  min-width:0;

}


/* =========================================================
   10. TOP BADGE
========================================================= */

.doofus-card-top{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:15px;

}


.doofus-card-badge{

  display:inline-flex;

  align-items:center;

  padding:
    6px 11px;

  border:
    1px solid
    rgba(62,207,177,.32);

  border-radius:999px;

  background:
    rgba(10,92,76,.24);

  color:
    var(--doof-teal-light);

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

  font-size:.61rem;

  font-weight:900;

  letter-spacing:.1em;

  text-transform:uppercase;

}


.doofus-card-icon{

  display:grid;

  place-items:center;

  width:32px;
  height:32px;

  flex:0 0 32px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:50%;

  background:
    rgba(0,0,0,.28);

  font-size:.95rem;

}


/* =========================================================
   11. TITLE
========================================================= */

.doofus-card h2{

  margin:0;

  color:
    var(--doof-cream);

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

  font-size:
    clamp(2.8rem,5vw,4.9rem);

  font-weight:1000;

  line-height:.86;

  letter-spacing:-.055em;

  text-transform:uppercase;

  text-shadow:
    0 7px 0 rgba(0,0,0,.17),
    0 16px 38px rgba(0,0,0,.45);

}


.doofus-card-subtitle{

  margin:
    9px 0 0;

  color:
    var(--doof-orange-light);

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

  font-size:
    clamp(1.1rem,2vw,1.7rem);

  font-weight:950;

  letter-spacing:.09em;

  text-transform:uppercase;

}


/* =========================================================
   12. DESCRIPTION
========================================================= */

.doofus-card-description{

  max-width:630px;

  margin:
    20px 0 0;

  color:
    rgba(255,255,255,.78);

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

  font-size:.92rem;

  font-weight:650;

  line-height:1.66;

}


/* =========================================================
   13. STATS
========================================================= */

.doofus-card-stats{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:9px;

  max-width:610px;

  margin-top:23px;

}


.doofus-card-stats > div{

  padding:
    11px 12px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:12px;

  background:
    rgba(0,0,0,.30);

  backdrop-filter:
    blur(8px);

}


.doofus-card-stats strong{

  display:block;

  margin-bottom:4px;

  color:
    rgba(255,255,255,.45);

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

  font-size:.52rem;

  font-weight:900;

  letter-spacing:.11em;

  text-transform:uppercase;

}


.doofus-card-stats span{

  display:block;

  color:
    var(--doof-white);

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

  font-size:.7rem;

  font-weight:850;

}


/* =========================================================
   14. FEATURES
========================================================= */

.doofus-card-features{

  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin-top:15px;

}


.doofus-card-features span{

  padding:
    6px 10px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius:999px;

  background:
    rgba(0,0,0,.23);

  color:
    rgba(255,255,255,.64);

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

  font-size:.59rem;

  font-weight:800;

}


/* =========================================================
   15. ITCH PANEL
========================================================= */

.doofus-card-launch{

  position:relative;

  overflow:hidden;

  padding:28px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:20px;

  background:

    linear-gradient(
      145deg,
      rgba(5,38,32,.76),
      rgba(18,15,13,.74)
    );

  box-shadow:
    0 22px 52px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter:
    blur(14px);

}


.doofus-card-launch::before{

  content:"";

  position:absolute;

  right:-80px;
  top:-80px;

  width:180px;
  height:180px;

  border-radius:50%;

  background:
    rgba(255,135,32,.13);

  filter:
    blur(20px);

}


/* =========================================================
   16. PANEL COPY
========================================================= */

.doofus-launch-kicker{

  position:relative;

  margin:
    0 0 8px;

  color:
    var(--doof-teal-light);

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

  font-size:.6rem;

  font-weight:950;

  letter-spacing:.14em;

  text-transform:uppercase;

}


.doofus-card-launch h3{

  position:relative;

  margin:
    0 0 12px;

  color:
    var(--doof-cream);

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

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

  font-weight:950;

  line-height:1;

}


.doofus-card-launch > p:not(.doofus-launch-kicker){

  position:relative;

  margin:
    0 0 18px;

  color:
    rgba(255,255,255,.68);

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

  font-size:.78rem;

  line-height:1.55;

}


/* =========================================================
   17. HIGHLIGHTS
========================================================= */

.doofus-launch-highlights{

  position:relative;

  display:flex;

  flex-direction:column;

  gap:7px;

  margin-bottom:21px;

}


.doofus-launch-highlights span{

  display:flex;

  align-items:center;

  min-height:31px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:9px;

  background:
    rgba(0,0,0,.20);

  color:
    rgba(255,255,255,.68);

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

  font-size:.64rem;

  font-weight:800;

}


/* =========================================================
   18. VIEW ON ITCH BUTTON
========================================================= */

.doofus-launch-button{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  min-height:50px;

  padding:
    12px 16px;

  border:
    1px solid
    #ffb866;

  border-radius:11px;

  background:

    linear-gradient(
      135deg,
      var(--doof-orange-dark),
      var(--doof-orange)
    );

  color:#fff;

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

  font-size:.69rem;

  font-weight:950;

  letter-spacing:.07em;

  text-transform:uppercase;

  text-decoration:none;

  box-shadow:
    0 12px 28px rgba(215,84,8,.28);

  transition:
    transform .17s ease,
    box-shadow .17s ease;

}


.doofus-launch-button:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 17px 34px rgba(255,105,14,.34);

}


/* =========================================================
   19. ACCESSIBILITY
========================================================= */

.doofus-card a:focus-visible{

  outline:
    3px solid
    rgba(255,181,93,.95);

  outline-offset:4px;

}


/* =========================================================
   20. TABLET
========================================================= */

@media(max-width:950px){

  .doofus-feature-mount{

    width:
      min(
        100%,
        calc(100% - 30px)
      );

  }


  .doofus-card-layout{

    grid-template-columns:1fr;

    gap:25px;

  }


  .doofus-card-launch{

    max-width:620px;

  }

}


/* =========================================================
   21. MOBILE
========================================================= */

@media(max-width:700px){

  .doofus-feature-mount{

    width:
      calc(100% - 20px);

    margin-bottom:26px;

  }


  .doofus-card{

    min-height:0;

    border-radius:20px;

  }


  .doofus-card-status-group{

    position:relative;

    top:auto;
    right:auto;

    align-items:flex-start;

    padding:
      20px 18px 0;

  }


  .doofus-card-layout{

    min-height:0;

    padding:
      22px 18px 24px;

  }


  .doofus-card-stats{

    grid-template-columns:1fr;

  }


  .doofus-card-launch{

    padding:22px;

  }

}


/* =========================================================
   22. BACKGROUND ANIMATION
========================================================= */

@keyframes doofusBackgroundDrift{

  from{

    transform:
      scale(1.035)
      translate3d(-.45%,0,0);

  }

  to{

    transform:
      scale(1.07)
      translate3d(.55%,-.4%,0);

  }

}


/* =========================================================
   23. REDUCED MOTION
========================================================= */

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

  .doofus-card-background{

    animation:none;

  }


  .doofus-launch-button{

    transition:none;

  }

}