/* Drag and Drop Styles */
.drop-zone {
  transition: all 0.2s ease-in-out;
}

.drop-zone-active {
  /* Only show overlay on hover during drag */
  background-color: rgba(70, 160, 50, 0.2);
}

.drop-zone-hover {
  position: relative;
}

.drop-zone-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease-in-out;
}

/* Area-specific drop zones */
.drop-zone-playground.drop-zone-hover::before {
  /* For playground, position overlay behind cards */
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

/* Ensure cards in playground are above the overlay */
.drop-zone-playground .card-image,
.drop-zone-playground .playground-card,
.drop-zone-playground [draggable="true"] {
  position: relative;
  z-index: 2;
}

.drop-zone-playground.drop-zone-hover {
  /* border-color: oklch(0.527 0.154 150.069) !important; */
  /* background-color: #dbeafe !important; */
  /* box-shadow: 0 0 0 10px rgba(66, 153, 225, 0.2) !important; */
}

.drop-zone-graveyard.drop-zone-active {
  /* border-color: #ffffff !important; */
  /* box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important; */
  /* border-color: #e53e3e !important; */
  /* background-color: #fed7d7 !important; */
}

.drop-zone-graveyard.drop-zone-hover {
  /* border-color: #c53030 !important; */
  /* background-color: #feb2b2 !important; */
  /* box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2) !important; */
}

.drop-zone-hand.drop-zone-active {
  /* border-color: #ffffff !important; */
  /* box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important; */
  /* border-color: #38a169 !important; */
  /* background-color: #c6f6d5 !important; */
}

.drop-zone-hand.drop-zone-hover {
  /* border-color: #2f855a !important; */
  /* background-color: #9ae6b4 !important; */
  /* box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.2) !important; */
}

.drop-zone-deck.drop-zone-active {
  /* border-color: #ffffff !important; */
  /* box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important; */
  /* background-color: #dbeafe !important; */
}

.drop-zone-deck.drop-zone-hover {
  /* border-color: #2563eb !important; */
  /* background-color: #bfdbfe !important; */
  /* box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; */
}

/* Graveyard Stacking */
.graveyard-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.graveyard-card {
  position: absolute;
  transition:
    transform 0.2s ease-out,
    z-index 0.2s ease-out;
}

.graveyard-card:hover {
  transform: translateY(-4px);
  z-index: 50 !important;
}

/* Card Hover Overlay */
.card-hover-overlay {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.actions-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.actions-panel {
  position: absolute;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  width: 140px;
  transform: translateY(-50%);
}

.actions-header {
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.actions-title {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin: 0;
}

.actions-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-form {
  width: 100%;
}

.action-button {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.action-button-draw {
  background: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}

.action-button-draw:hover {
  background: #bbdefb;
}

.action-button-shuffle {
  background: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}

.action-button-shuffle:hover {
  background: #bbdefb;
}

.action-button-discard {
  background: #ffebee;
  color: #d32f2f;
  border: 1px solid #ffcdd2;
}

.action-button-discard:hover {
  background: #ffcdd2;
}

/* Floating Hands */
.floating-hand {
  position: fixed;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.floating-hand > div {
  pointer-events: auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}

.hand-current-player {
  bottom: 0px;
  z-index: 1000;
  transform: translateX(-50%) translateY(60%);
  transition: transform 0.3s ease-in-out;
}

.hand-current-player:hover {
  transform: translateX(-50%) translateY(0%);
}

.hand-other-player {
  top: 0px;
  z-index: 999;
  transform: translateX(-50%) translateY(-60%);
  transition: transform 0.3s ease-in-out;
}

.hand-other-player:hover {
  transform: translateX(-50%) translateY(0%);
}

/* Layout Flex for Current Player */
.current-player-section {
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: none;
}

.current-player-area {
  position: relative;
  width: 100%;
  min-height: 50vh;
  flex: 1;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 1fr;
  gap: 8px;
  padding: 0 8px;
  padding-bottom: 10vh;
}

.current-player-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/assets/ground/tavern-table-f523386c.avif");
  background-repeat: repeat;
  background-size: 512px 512px;
  /* background-size: cover; */
  /* filter: blur(10px); */
  z-index: -1;
}

.current-player-graveyard {
  grid-column: 1;
  grid-row: 1;
}

.current-player-playground {
  grid-column: 2;
  grid-row: 1;
}

.current-player-deck {
  grid-column: 3;
  grid-row: 1;
}

.deck-actions button {
  font-size: 30px !important;
  padding: 0px !important;
}

.deck-actions .icon {
  font-size: 30px !important;
  padding: 0px !important;
}

.deck-actions .text-button {
  font-size: 14px !important;
}

.graveyard-vertical-container {
  height: 100%;
}

/* Table Page Container */
.table-page-container {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Main Game Container */
.main-game-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Other Players Section */
.other-players-section {
  height: 50vh;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  overflow-y: auto;
  border-bottom: 2px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Other Players Layout */
.other-player-area {
  width: 100%;
  min-height: 30vh;
  flex: 1;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  gap: 8px;
  padding: 0 8px;
  padding-top: 8vh;
}

.other-player-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/assets/ground/tavern-table-f523386c.avif");
  background-repeat: repeat;
  background-size: 512px 512px;
  /* background-size: cover; */
  /* filter: blur(10px); */
  z-index: -1;
}

.other-player-graveyard {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column-reverse;
}

.other-player-playground {
  grid-column: 2;
  grid-row: 1;
}

.other-player-deck {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Floating UI Elements */
.floating-user-info.current-user {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2000;
}

.floating-user-info.other-players {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 2000;
}

.floating-help-button {
  position: fixed;
  right: 0px;
  bottom: 10px;
  z-index: 2000;
}

.table-info-overlay {
  position: absolute;
  right: 40px;
  bottom: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999999;
}

/* Fix hover gap for help button */
.floating-help-button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: -1;
}

/* Hand Rest Bars */
.hand-rest {
  position: fixed;
  width: 100vw;
  height: 60px;
  background-color: #000000;
  filter: blur(10px);
  --webkit-backdrop-filter: blur(10px);
  z-index: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hand-rest.current-player {
  bottom: 0;
}

.hand-rest.other-player {
  top: 0;
}

/* Rotate other player's cards to appear upside down */
.other-player-card {
  transform: rotate(180deg);
}
.other-player-playground {
  width: 100%;
  height: 100%;
}

.other-player-playground .drop-zone-playground {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: flex-start;
}

.other-player-playground .playground-content {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: flex-start;
}

/* Vertical Graveyard Stacking */
.graveyard-stack-vertical {
  position: relative;
  width: 100%;
  height: 100%;
}

.graveyard-card-vertical {
  position: absolute;
  transition:
    transform 0.2s ease-out,
    z-index 0.2s ease-out;
}

/* .graveyard-card-vertical:hover { */
/*   transform: translateX(-50%) translateY(-2px) scale(1.05); */
/*   z-index: 50 !important; */
/* } */

/* Empty Hand Symbol */
.empty-hand-drop-target {
  width: 80px;
  height: 112px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.empty-hand-svg {
  width: 50%;
  height: 50%;
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
  filter: brightness(0) invert(1);
}

.hand-current-player .empty-hand-svg {
  opacity: 1;
  transform: scale(1.1);
}

.hand-current-player:not(:hover) .empty-hand-symbol {
  pointer-events: none;
}

/* Responsive Design */
/* Card Styles */
.card-image {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 6px;
}

/* Playground Card Actions */
button.playground-card-action {
  position: absolute;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: black;
}

/* Remove hover effects for playground card action buttons */
button.playground-card-action:hover {
  background: white !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
}

.playground-card-action svg {
  color: #000000;
  width: 16px;
  height: 16px;
}

.playground-card-flip {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.playground-card-turn {
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
}

/* Ensure buttons are perfect circles - higher specificity for all states */
button.playground-card-action.playground-card-turn,
button.playground-card-action.playground-card-flip,
.turned button.playground-card-action.playground-card-turn,
.turned button.playground-card-action.playground-card-flip {
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  box-sizing: border-box !important;
}

/* Ensure hovered playground cards are elevated above adjacent cards */
[data-source="playground"]:hover {
  z-index: 9999 !important;
}

@media (max-width: 768px) {
  .floating-hand {
    width: 95vw;
    left: 2.5vw;
    transform: none;
  }

  .current-player-area {
    grid-template-columns: 1fr 100px;
    height: 50vh;
  }

  .other-player-area {
    height: 30vh;
  }

  .sidebar-area {
    gap: 8px;
  }
}

/* Card Turn State - Fixed to work with stacked card positioning */
.turned {
  /* Remove the transform here to avoid overriding inline positioning */
  /* transform: rotate(90deg); */
}

/* Apply rotation only to non-stacked cards (those without inline transforms) */
.turned:not(.stacked-card) {
  transform: rotate(90deg);
}

/* For stacked cards, the rotation is handled in the inline style */
/* The .turned class can be used for other styling if needed */

/* Card Turn State */
.other-player-turned-card {
  transform: rotate(270deg);
}

.counter-chip {
  position: absolute;
  bottom: 1px;
  right: 0px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  font-size: 12px;
  z-index: 10;
  transition:
    transform 0.2s ease,
    font-size 0.2s ease;
  user-select: none;
  width: 42px;
  height: 40;
}

.counter-chip:hover,
.counter-chip.expanded {
  transform: scale(2);
  font-size: 12px;
}

.counter-chip-left-column,
.counter-chip-right-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25px;
}

.counter-chip-separator {
  margin: 0 2px;
}

.counter-chip-control-up,
.counter-chip-control-down {
  font-size: 12px;
  line-height: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
  pointer-events: none;
  display: none;
}

.counter-chip:hover .counter-chip-control-up,
.counter-chip:hover .counter-chip-control-down,
.counter-chip.expanded .counter-chip-control-up,
.counter-chip.expanded .counter-chip-control-down {
  opacity: 1;
  pointer-events: auto;
  display: block;
}

.counter-chip-number {
  min-width: 12px;
  text-align: center;
  line-height: 18px;
  user-select: none;
}

/* 3D Card flip structure */
.card-container {
  perspective: 1000px;
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.card-face-front {
  transform: rotateY(0deg);
}

.card-face-back {
  transform: rotateY(180deg);
}

/* When card is revealed, show front face */
.card-revealed .card-flip-inner {
  transform: rotateY(0deg);
}

/* When card is not revealed, show back face */
.card-container:not(.card-revealed) .card-flip-inner {
  transform: rotateY(180deg);
}

/* Animation enhancement during flip */
.card-flipping .card-flip-inner {
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
}

/* Ensure card maintains 3D perspective during flip */
[data-controller*="playground-card-actions"] {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Final override for playground card buttons - MUST BE PERFECT CIRCLES */
button.playground-card-action {
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  box-sizing: border-box !important;
}

button.playground-card-action:hover {
  padding: 0 !important;
}