/* Card Styling - Responsive + Retro */

:root {
  /* Card dimensions - responsive to viewport width for consistent 7-column fit */
  --card-width: min(12vw, 90px);
  --card-height: calc(var(--card-width) * 1.4);
  --card-radius: 3px;

  /* Stack offsets */
  --stack-offset: clamp(18px, 3.5vmin, 28px);
  --stack-offset-facedown: clamp(4px, 0.8vmin, 8px);

  /* Spacing */
  --pile-gap: clamp(8px, 1.5vmin, 16px);
}

/* Mobile: horizontal tableau layout */
@media (max-width: 500px) {
  :root {
    /* Larger cards since they're stacked vertically now */
    --card-width: min(18vw, 65px);
    /* Horizontal stack offsets */
    --stack-offset: clamp(18px, 5vw, 24px);
    --stack-offset-facedown: clamp(6px, 2vw, 10px);
    --pile-gap: clamp(3px, 1vw, 8px);
  }
}

/* Small phones */
@media (max-width: 380px) {
  :root {
    --card-width: min(17vw, 55px);
    --stack-offset: clamp(16px, 4.5vw, 22px);
    --stack-offset-facedown: clamp(5px, 1.5vw, 8px);
  }
}

/* Container query support for iframe embedding */
@supports (container-type: inline-size) {
  .game-container {
    container-type: inline-size;
  }

  @container (max-width: 500px) {
    :root {
      --card-width: min(13cqw, 70px);
    }
  }

  @container (max-width: 400px) {
    :root {
      --card-width: min(13cqw, 55px);
      --stack-offset: clamp(12px, 2.5cqw, 20px);
    }
  }
}

/* Card base - recordOS Matrix style */
.card {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: var(--card-radius);
  background-color: #1a1a1a;
  border: 1px solid #3a3a3a;
  box-shadow:
    inset 1px 1px 0 #2a2a2a,
    inset -1px -1px 0 #0a0a0a,
    2px 2px 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  /* CSS-rendered card layout */
  display: flex;
  flex-direction: column;
  padding: 3px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Card hover state - simple green outline (retro) */
.card:hover {
  outline: 2px solid #00ff41;
  outline-offset: -2px;
}

/* Card active/dragging state */
.card.dragging {
  cursor: grabbing;
  outline: 2px solid #00ff41;
  outline-offset: -2px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
  z-index: 1000 !important;
}

/* Cards being dragged along with the main card */
.card.dragging-child {
  z-index: 1000 !important;
}

/* Card selected state */
.card.selected {
  box-shadow: 0 0 0 2px #00ff41, 1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* Face-down card - recordOS Matrix style back */
.card.facedown {
  background-color: #0d1f0d;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 65, 0.08) 2px,
      rgba(0, 255, 65, 0.08) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 65, 0.08) 2px,
      rgba(0, 255, 65, 0.08) 4px
    );
  border: 1px solid #00cc33;
  box-shadow:
    inset 1px 1px 0 #1a3a1a,
    inset -1px -1px 0 #0a0a0a,
    2px 2px 0 rgba(0, 0, 0, 0.5);
  cursor: default;
  filter: none;
}

/* Face-down but clickable (top of stock) */
.card.facedown.clickable {
  cursor: pointer;
}

/* Last facedown card in tableau - can be clicked to flip */
.card.facedown.flippable {
  cursor: pointer;
}

/* CSS-Rendered Card Face - recordOS Matrix Theme */

/* Card content structure */
.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 0;
}

.card-corner.top {
  align-self: flex-start;
}

.card-corner.bottom {
  align-self: flex-end;
  transform: rotate(180deg);
  margin-top: auto;
}

.card-rank {
  font-family: 'VT323', monospace;
  font-weight: normal;
  font-size: calc(var(--card-width) * 0.28);
  line-height: 1;
}

.card-suit-small {
  font-size: calc(var(--card-width) * 0.18);
  line-height: 1;
}

.card-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--card-width) * 0.45);
}

/* Suit colors - recordOS theme */
.card[data-suit="hearts"],
.card[data-suit="diamonds"] {
  color: #ff4444; /* Red suits - warm accent */
}

.card[data-suit="clubs"],
.card[data-suit="spades"] {
  color: #00ff41; /* Green suits - Matrix theme */
}

/* Suit symbols */
.card[data-suit="hearts"] .card-suit-small::before,
.card[data-suit="hearts"] .card-center::before { content: '♥'; }

.card[data-suit="diamonds"] .card-suit-small::before,
.card[data-suit="diamonds"] .card-center::before { content: '♦'; }

.card[data-suit="clubs"] .card-suit-small::before,
.card[data-suit="clubs"] .card-center::before { content: '♣'; }

.card[data-suit="spades"] .card-suit-small::before,
.card[data-suit="spades"] .card-center::before { content: '♠'; }

/* Face cards get special center display */
.card[data-rank="11"] .card-center::before,
.card[data-rank="12"] .card-center::before,
.card[data-rank="13"] .card-center::before {
  content: none;
}

.card[data-rank="11"] .card-center::after { content: 'J'; font-family: 'VT323', monospace; }
.card[data-rank="12"] .card-center::after { content: 'Q'; font-family: 'VT323', monospace; }
.card[data-rank="13"] .card-center::after { content: 'K'; font-family: 'VT323', monospace; }

/* Facedown cards hide content */
.card.facedown .card-corner,
.card.facedown .card-center {
  display: none;
}

/* Pile placeholders - recordOS Matrix style */
.pile-placeholder {
  width: var(--card-width);
  height: var(--card-height);
  border: 1px solid #2a2a2a;
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--card-width) * 0.4);
  color: rgba(0, 255, 65, 0.2);
  background-color: #0d0d0d;
  box-shadow:
    inset 1px 1px 0 #1a1a1a,
    inset -1px -1px 0 #0a0a0a;
}

/* Stock pile - show pixel art reload icon when empty */
.pile.stock.empty .pile-placeholder {
  cursor: pointer;
}

.pile.stock.empty .pile-placeholder::after {
  content: '';
  display: block;
  width: calc(var(--card-width) * 0.5);
  height: calc(var(--card-width) * 0.5);
  /* Pixelarticons reload icon v1.8.1 - Matrix green */
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 2h-2v2h2v2H4v2H2v5h2V8h12v2h-2v2h2v-2h2V8h2V6h-2V4h-2V2zM6 20h2v2h2v-2H8v-2h12v-2h2v-5h-2v5H8v-2h2v-2H8v2H6v2H4v2h2v2z' fill='%2300ff41'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  opacity: 0.6;
}

/* Foundation pile - valid drop highlight */
.pile.foundation.valid-drop .pile-placeholder,
.pile.foundation.valid-drop .card:last-child {
  outline: 2px solid #00ff41;
  outline-offset: -2px;
}

/* Tableau pile - valid drop highlight */
.pile.tableau-pile.valid-drop .pile-placeholder,
.pile.tableau-pile.valid-drop .card:last-child {
  outline: 2px solid #00ff41;
  outline-offset: -2px;
}

/* Hint highlighting - pulsing outline */
.card.hint-from {
  outline: 2px solid #ffff00;
  outline-offset: -2px;
  animation: hint-pulse 0.6s ease-in-out infinite alternate;
}

.card.hint-to,
.pile-placeholder.hint-to {
  outline: 2px dashed #ffff00;
  outline-offset: -2px;
  animation: hint-pulse 0.6s ease-in-out infinite alternate;
}

.pile.hint-action {
  outline: 2px solid #ffff00;
  outline-offset: 2px;
  animation: hint-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes hint-pulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}