#board-container, .board-container, .dream-board-frame {
  position: relative !important;
  width: min(860px, 92vw, calc(100vh - 180px)) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  background: #0B111E !important;
  border: 2px solid #F59E0B !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#center-hub, #center-hub-stage, .dream-center-hub {
  position: absolute !important;
  left: 14% !important;
  top: 14% !important;
  width: 72% !important;
  height: 72% !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

/* 1. Base slot elevation */
.board-cell-unit, .board-tile-v2 {
  position: absolute !important;
  box-sizing: border-box !important;
  z-index: 2;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.board-cell-unit:not(.board-corner-tile) {
  position: absolute !important;
  box-sizing: border-box !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2. Base state for the single primary wrapper */
.board-cell-unit:not(.board-corner-tile) .tile-card-art-wrap {
  box-sizing: border-box !important;
  width: calc(100% - 3px) !important;
  height: calc(100% - 3px) !important;
  margin: 1.5px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease-in-out !important;
}

/* 3. Lift hovered tile slot above sibling perimeter cards */
.board-cell-unit:hover,
.board-cell-unit.rail-right:hover,
.board-cell-unit.rail-left:hover {
  z-index: 500 !important;
  overflow: visible !important;
}

/* 4. Scaled art wrap elevation and glowing border */
.board-cell-unit:hover .tile-card-art-wrap {
  z-index: 510 !important;
  overflow: visible !important;
  border: 2px solid #F59E0B !important;
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.95), 
    0 0 0 2px #F59E0B, 
    0 0 14px rgba(245, 158, 11, 0.75) !important;
}

/* Top & Bottom rails hover handling delegated to universal hover portal */
.board-cell-unit:not(.rail-right):not(.rail-left):not(.board-corner-tile):hover .tile-card-art-wrap {
  transform: none !important;
}

/* Universal hover portal frame rules */
#board-hover-portal .portal-card-frame,
#board-hover-portal .portal-card-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

/* Force all elements within the portal to stay upright */
#board-hover-portal,
#board-hover-portal *,
#board-hover-portal img,
#board-hover-portal svg {
  transform: none !important;
  writing-mode: horizontal-tb !important;
  box-sizing: border-box !important;
}

/* Full visibility of cloned artwork without cropping or vertical squishing */
#board-hover-portal .tile-card-art-wrap,
#board-hover-portal .card-face,
#board-hover-portal .tile-fallback-body,
#board-hover-portal .tile-asset-body,
#board-hover-portal .card-content {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #0B111E !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#board-hover-portal img,
#board-hover-portal svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #0B111E !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 8 / 14 !important;
}

/* Remove CSS hover transforms on lateral rails to delegate entirely to Portal */
.board-cell-unit.rail-left:hover .tile-card-art-wrap,
.board-cell-unit.rail-right:hover .tile-card-art-wrap {
  transform: none !important;
}

/* Keep player tokens strictly on top of the scaled card */
.board-cell-unit:hover .tile-tokens-container {
  z-index: 520 !important;
}

/* Specific purge of obsolete "ВІДКРИТИ" button across all cell types and corners */
.board-cell-unit .tile-action-button,
.board-cell-unit .card-action-btn,
.board-cell-unit .tile-badge-open,
.board-corner-tile .tile-action-button,
.board-corner-tile .card-action-btn,
.board-corner-tile .tile-badge-open,
.board-cell-unit button,
.board-cell-unit .btn-open,
.board-cell-unit .open-btn,
.board-cell-unit .tile-btn,
.board-cell-unit .action-btn,
.board-cell-unit .tile-action,
.board-container .tile-action-button,
.board-container .open-action-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Ensure token layer remains full size and unaffected */
.board-cell-unit .tile-tokens-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Refined Active Selection on the inner card face */
.board-cell-unit:not(.board-corner-tile).tile-active-turn .tile-card-art-wrap,
.board-cell-unit:not(.board-corner-tile).tile-selected .tile-card-art-wrap,
.board-cell-unit:not(.board-corner-tile).active .tile-card-art-wrap,
.board-cell-unit:not(.board-corner-tile).tile-active .tile-card-art-wrap {
  border: 1.5px solid #F59E0B !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}

/* 4 Static Corners */
.board-corner-tile, .static-corner-cell {
  background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%) !important;
  border: 2px solid #F59E0B !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.15), 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
  transform: none !important;
  overflow: hidden !important;
  position: absolute !important;
}

.board-corner-tile .corner-content-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 8px 4px !important;
  box-sizing: border-box !important;
  pointer-events: none;
}

.board-corner-tile .c-title, .corner-title {
  font-size: clamp(9px, 1.2cqw, 12px) !important;
  font-weight: 900 !important;
  color: #F59E0B !important;
  text-align: center !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.board-corner-tile .c-icon, .corner-icon {
  font-size: clamp(16px, 2.0cqw, 22px) !important;
  color: #F59E0B !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
}

.board-corner-tile .c-sub, .corner-sub {
  font-size: clamp(7px, 0.9cqw, 9px) !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  text-align: center !important;
  line-height: 1 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dedicated overlay container for tokens on ANY cell */
.tile-tokens-container {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  z-index: 35 !important;
  pointer-events: none !important;
}

/* Upright counter-rotation for rails */
.board-cell-unit.rail-right > .tile-tokens-container {
  transform: rotate(90deg) !important;
}

.board-cell-unit.rail-left > .tile-tokens-container {
  transform: rotate(-90deg) !important;
}

/* Ensure tokens container stays aligned and upright during tile hover */
.board-cell-unit:hover > .tile-tokens-container {
  transform: rotate(0deg) !important;
}

/* 3D Floating Dossier Token Frame */
.player-token-folder {
  position: relative !important;
  width: clamp(22px, 3cqw, 30px) !important;
  height: clamp(22px, 3cqw, 30px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto;
}

/* Inner graphic receives the float animation so direction is always upward */
.player-token-folder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: translateY(-2px);
  transition: transform 0.2s ease-out;
}

/* 4 Role Glow Themes */
.player-token-folder[data-player-color="green"],
.player-token-folder.player-p1 {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(16, 185, 129, 0.95)) !important;
}

.player-token-folder[data-player-color="amber"],
.player-token-folder.player-p2 {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 7px rgba(245, 158, 11, 0.95)) !important;
}

.player-token-folder[data-player-color="blue"],
.player-token-folder.player-p3 {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 7px rgba(59, 130, 246, 0.95)) !important;
}

.player-token-folder[data-player-color="purple"],
.player-token-folder.player-p4 {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 7px rgba(168, 85, 247, 0.95)) !important;
}

/* Active turn floating animation */
.player-token-folder.active-turn img {
  animation: dossierFloat 1.8s infinite ease-in-out;
}

@keyframes dossierFloat {
  0%, 100% { transform: translateY(-2px) scale(1); }
  50% { transform: translateY(-6px) scale(1.12); }
}