:root {
  --shithead-cream: #FEFFF1;
  --accent1: #ff3cac;
  --accent2: #ffed00;
  --accent3: #00f0ff;
  --shithead-red: #F8331E;
  --shithead-dark-red: #540800;
  --shithead-black: #1E1E1E;
}

@font-face {
  font-family: 'TuskerGrotesk';
  src: url('fonts/TuskerGrotesk-9800Super.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.font-tusker {
  font-family: 'TuskerGrotesk', sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: 'TuskerGrotesk';
}


/* reset DaisyUI body background */
html, body { background-color: transparent; }


/* ── App frame ──────────────────────────────────────────── */
#appFrame {
  position: fixed;
  margin-top: 40px;
  margin-bottom: 20px;
  inset: 12px;
  background: var(--shithead-red);
  border-radius: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--shithead-black);
}

.demo {
  .cards-stack .cards-row:last-child {
    margin-top: clamp(-350px, -22vw, -192px);
  }
  .cards-row {
    gap: 1vw;
  }
  .card {
    width: clamp(40px,24vw,280px);
    height: clamp(40px,30vw,380px);
    border-radius: 16px;;
    padding: clamp(12px,1vw,20px);
  }
}

/* ── Small screen ─────────── */
@media (max-width: 640px) {
  #cursor {
    display: none;
  }
}
/* ── Medium screen ─────────── */
@media (min-width: 768px) {
  #appFrame {
      margin-top: 72px;
  }
}



#splashScreen {
  .btn {
    font-family: 'TuskerGrotesk', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
  }
  .carousel .carousel-item {
    width: clamp(200px,57vw,285px);
    padding: clamp(24px,5vw,285px);

    .card {
      width: clamp(180px,42vw,288px);
      height: clamp(200px, 62vw, 400px);
      border-radius: 18px;
      padding: clamp(12px, 1.8vw, 20px);
      border: none;
      box-shadow: 1px 2px 5px rgba(0,0,0,0.15);

      .suit {
        font-variant-emoji: text; /* suppresses emoji rendering */
        font-size: clamp(44px, 10vw, 72px);
      }
      .corner {
        font-size: clamp(52px, 12vw, 84px);
      }
      .badge {
        font-size: clamp(11px, 1.8vw, 16px);
        padding: 14px 12px;      
      }
    }
  }
}

footer {
  position: absolute;
  bottom: 0.5rem;
  right: 1rem;
}


/* ── Cards (fixed-dimension visual components) ─────────── */
/* overflow:visible overrides DaisyUI's .card which sets overflow:hidden */
.card {
  width: clamp(40px,25vw,100px);
  height: clamp(40px,36vw,142px);
  border-radius: 7px;
  background: #fff;
  border: 1px solid #bbb;
  box-shadow: 1px 2px 5px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4px 5px;
  font-size: 13px; font-weight: bold;
  position: relative;
  transition: transform 0.12s, box-shadow 0.12s;
  flex-shrink: 0;
  user-select: none;
  overflow: visible;
}
.card.selectable { cursor: pointer; }
.card.selectable:hover { transform: translateY(-6px); box-shadow: 1px 8px 14px rgba(0,0,0,0.5); }
.card.selected { transform: translateY(-14px); box-shadow: 0 12px 20px rgba(0,0,0,0.55); outline: 3px solid #f4d03f; outline-offset: 1px; }
.card.red   { color: #c0392b; }
.card.black { color: #1a1a1a; }
.card .corner     { font-family: 'TuskerGrotesk'; font-size: 18px; line-height: 1; text-align: left; }
.card .corner.bot { transform: rotate(180deg); align-self: flex-end; }
.card .center-suit { font-size: 28px; text-align: center; line-height: 1; }
.card .badge {
  position: absolute; top: -7px; right: -7px;
  background: #e74c3c; color: #fff;
  font-size: 9px; font-family: Arial, sans-serif; font-weight: 900;
  padding: 2px 4px; border-radius: 8px;
  pointer-events: none; letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
}
.card .badge.reset   { background: blue; }
.card .badge.burn   { background: #df1804; }
.card .badge.below  { background: blueviolet; }
.card .badge.killer  { background: darkorange; }
.card .badge.high  { background: black; color:white; }
.card .badge.window { background: #cee6ee; color: black; border: 1px solid black;}
.card.back {
  background-image: repeating-linear-gradient(
    45deg,
    #6b21a8 0px,
    #6b21a8 8px,
    #a855f7 8px,
    #a855f7 16px
  );
  border: 3px solid #fff;
}
.card.empty-slot {
  background: transparent;
  border: 2px dashed rgba(255,255,255,0.25);
  box-shadow: none;
}
.card.pile-placeholder {
  background: rgba(0,0,0,0.2);
  border: 2px dashed rgba(255,255,255,0.3);
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(255,255,255,0.45); font-family: Arial, sans-serif;
}
.turn-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #4ade80;
  animation: blink 1s ease-in-out infinite;
  display: inline-block;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Custom cursor label ────────────────────────────────────── */
#cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  transform: translate(10px, 10px);
}
#cursor-label {
  font-family: 'TuskerGrotesk', sans-serif;
  text-transform: uppercase;
  font-size: 50px;
  line-height: 1;
  color: #000;
  background: var(--accent2);
  padding: 8px 14px 6px;
  border-radius: 6px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  white-space: nowrap;
  display: block;
  transition: background 0.12s ease, transform 0.08s ease;
  user-select: none;
}
body.clicking #cursor-label {
  background: var(--accent1);
  color: #fff;
  transform: scale(0.93) rotate(-3deg);
}

/* ── SVG cursor ─────────────────────────────────────────────── */
body {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='34'><polygon points='0,0 0,28 7,21 11,33 17,31 13,19 22,19' fill='%231E1E1E' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>") 0 0, default;
}
.card.selectable {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='34'><polygon points='0,0 0,28 7,21 11,33 17,31 13,19 22,19' fill='%231E1E1E' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>") 0 0, pointer;
}

/* ── Opponent layout ────────────────────────────────────── */
.opponent-zone .card-groups {
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* face-down overlaid by face-up */
.cards-stack {
  position: relative;
}
.cards-stack .cards-row:last-child {
  margin-top: -124px;
  position: relative;
  z-index: 1;
}

.opponent-zone {
  .table-cards {
    width: 49%;
    
    .card {
      width: 30%;
    }
  }
  .hand {
      width: 49%;

      .card {
        width: 30%;
      }
  }
}
/* ── Pile ──────────────────────────────────────────── */
.center-row.pile {
  gap: 0px;
  padding: 16px 40px;

  .pile-block {
    width: 100%;
  }
  .card {
    height: clamp(120px, 40vw, 300px);
    width: clamp(120px, 70%, 240px);
    margin: auto;
  }

}
/* ── Your hand ──────────────────────────────────────────── */
.your-hand {
  .card-groups {
    gap: 2%;
    width: 100%;

    .cards-row {
      gap: 1%;
    }
  }
  .card-group.face-down, .card-group.face-up {
    gap: 0px;
    width: 49%;
  }
  .face-down .card, .face-up .card  {
    width: clamp(44px,33.33%,134px);
    height: clamp(100px,19.2vw,184px);
    width: 32.6%;

    .corner {
      font-size: 14px;
    }
  }
  .hand {
    width: 100%;

    .cards-row {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 6px;
      gap: 6px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.2) transparent;
    }
    .card {
      flex-shrink: 0;
      width: clamp(44px, 24vw, 160px);
      height: clamp(100px,19.2vw,184px);
    }
  }
}