/* 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: 50vw;
  left: 25vw;
  right: 25vw;
  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;
  border-radius: 100px 100px 0px 0px;
}

.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, exclude stacked cards */
[data-source="playground"]:hover {
  z-index: 9999 !important;
}

/* [data-source="playground"]:not(.stacked-card):hover { */
/*   z-index: 9999 !important; */
/* } */
.stacked-card:hover button.playground-card-action {
  z-index: 10001 !important;
}

@media (max-width: 768px) {
  /* The base raise/lower states redeclare translateX(-50%) (wide-board
     centering) at class+pseudo-class specificity, which out-paints the
     transform:none below once the hand is hovered — sliding the 95vw strip
     ~half a viewport left and taking the spawn `+` off-screen (720x960:
     trigger x≈-76, elementFromPoint null). Restate both raised states
     inside the breakpoint: same vertical rise, no centering shift. The
     resting strip already resolves to transform:none by source order. */
  .floating-hand {
    width: 95vw;
    left: 2.5vw;
    transform: none;
  }

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

  .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;
  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;
}

/* Spawn Token Button */
.spawn-token-button {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  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: #3b82f6;
  font-size: 18px;
  font-weight: bold;
}

.spawn-token-button:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #2563eb;
}

.card-container:hover .spawn-token-button {
  opacity: 1;
}

/* Spawn Token Overlay — Slice 9C: a native <dialog> opened with showModal(),
   so it paints in the browser top layer above every board chrome (the gated
   board layers included). No z-index: the top layer outranks it all, and
   a z-index here would be dead weight. The closed shell keeps its native
   display:none; the [open] rule below owns geometry and centering (Tailwind
   preflight resets dialog margin, so margin:auto restores showModal's
   centering, mirroring the gated help dialog). */
.spawn-token-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border: none;
  padding: 0;
  max-height: min(90vh, 640px);
  max-width: min(440px, calc(100vw - 32px));
}

.spawn-token-overlay[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.spawn-token-overlay::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

.spawn-token-modal {
  background: white;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  max-height: 70vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

.spawn-token-overlay.visible .spawn-token-modal,
.spawn-token-overlay[open] .spawn-token-modal {
  transform: scale(1);
}

.spawn-token-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.spawn-token-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.close-button:hover {
  background: #e5e7eb;
  color: #374151;
}

.spawn-token-list {
  max-height: 50vh;
  overflow-y: auto;
}

.spawn-token-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s ease;
}

.spawn-token-item:hover {
  background-color: #f8fafc;
}

.spawn-token-item span {
  font-weight: 500;
  color: #374151;
}

.spawn-token-item .spawn-button {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

.spawn-token-item .spawn-button:hover {
  background: #2563eb;
}

.spawn-token-item .spawn-button:active {
  background: #1d4ed8;
}

/* ------------------------------------------------------------------
 * Slice 8: tap/click/keyboard card movement (card-move controller)
 * ------------------------------------------------------------------ */

/* Screen-reader-only status region for movement announcements. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

[hidden] {
  display: none;
}

/* The owner's card face doubles as the movement source. It must cover the
   card face without shifting the layout of the drag wrapper. */
button.card-move-source {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  color: inherit;
  font: inherit;
}

button.card-move-source > img,
button.card-move-source > div {
  pointer-events: none;
}

button.card-move-source:focus-visible {
  outline: 3px solid #ffc866;
  outline-offset: -3px;
  border-radius: 6px;
}

/* SS8F-D1: in the hand, the source button HOLDS the art/fallback — it is the
   card's only in-flow content, and the hand flex chain sizes itself from it.
   An absolute overlay there leaves nothing in flow and collapses the card to
   0x0. Participate in normal flow instead; the contained art keeps its own
   inline max dimensions and the outer drag wrapper keeps w-full/h-full. The
   playground face stays an absolute overlay — its parent has explicit size. */
button.card-move-source--hand {
  position: relative;
  inset: auto;
}

/* Selected source: a warm physical ring plus lift — never color alone. */
button.card-move-source.is-card-move-selected,
[data-card-move-target='source'].is-card-move-selected {
  outline: 3px solid #ffb347;
  outline-offset: -3px;
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
  transform: translateY(-6px);
}

/* Deck picker stacking: the gated board's fixed chrome lives at
   z-index 2200-2250 (table_board.css), so the picker overlay needs
   an explicit layer safely above it. 2300 clears every gated layer while
   staying below the card-move chrome (2340/2400), which never coexists with
   an open picker. The semantic class replaces the arbitrary Tailwind z-50
   that lost the paint fight to the gated board. */
.deck-picker-modal {
  z-index: 2300;
}

/* Visible fixed Cancel control (>= 44x44). */
button.card-move-cancel {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 2400;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid #3a2413;
  background: linear-gradient(180deg, #8a4b20, #5d2f11);
  color: #ffe9c2;
  font: 600 14px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}

button.card-move-cancel:hover {
  background: linear-gradient(180deg, #a25b2a, #6d3816);
}

button.card-move-cancel:focus-visible {
  outline: 3px solid #ffc866;
  outline-offset: 2px;
}

/* Destination overlays: inset absolute panels inside each zone, revealed only
   while a selection exists. Border + shape + color, never color alone. */
button.card-move-destination {
  position: absolute;
  inset: 6px;
  z-index: 2340;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  border: 3px dashed #ffc866;
  border-radius: 14px;
  background: rgba(30, 17, 6, 0.88);
  color: #ffe9c2;
  font: 700 13px/1.3 Inter, system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

button.card-move-destination span {
  pointer-events: none;
  display: block;
}

button.card-move-destination:hover {
  border-style: solid;
  background: rgba(58, 34, 15, 0.92);
}

button.card-move-destination:focus-visible {
  outline: 3px solid #ffc866;
  outline-offset: 2px;
}

button.card-move-destination.is-busy {
  opacity: 0.85;
  cursor: progress;
}

/* The destination's own display:flex would defeat the hidden attribute without
   a !important from Tailwind; this selector is self-sufficient. */
button.card-move-destination[hidden] {
  display: none;
}

/* The current playground movement zone is the containing block for its
    destination overlay: position:relative without touching its geometry, so
    the overlay is bounded to the zone instead of a broad positioned ancestor. */
.card-move-zone-containing-block {
  position: relative;
}

/* Zone active state pairs with the overlay: a soft edge in addition to color. */
[data-card-move-zone].card-move-zone-active {
  border-color: #ffb347;
  box-shadow: 0 0 0 2px rgba(255, 179, 71, 0.35);
  border-radius: 14px;
}

/* The gated fixed shells must never inherit a generic position: the drag
   controller's .drop-zone-hover hook sets position:relative, so pin the zone
   states explicitly without touching their geometry. */
.board__deck-zone.card-move-zone-active,
.board__graveyard-zone.card-move-zone-active {
  position: fixed;
}

/* Keyboard sources on legacy piles need the same affordances. */
[data-card-move-target='source'][role='button'] {
  cursor: pointer;
  touch-action: manipulation;
}

[data-card-move-target='source'][role='button']:focus-visible {
  outline: 3px solid #ffc866;
  outline-offset: -3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  button.card-move-source.is-card-move-selected,
  [data-card-move-target='source'].is-card-move-selected,
  button.card-move-destination {
    transition: none;
  }

  button.card-move-source.is-card-move-selected,
  [data-card-move-target='source'].is-card-move-selected {
    transform: none;
  }
}