/* Placed chip — single team-colour border on the cell, interior filled */
.board-cell-chip-red { box-shadow: inset 0 0 0 4px #ef4444; }
.board-cell-chip-blue { box-shadow: inset 0 0 0 4px #3b82f6; }
.board-cell-chip-green { box-shadow: inset 0 0 0 4px #22c55e; }

/* Valid targets — team border outside + black flash inside */
.cell-highlight-team-red { box-shadow: inset 0 0 0 4px #ef4444; }
.cell-highlight-team-blue { box-shadow: inset 0 0 0 4px #3b82f6; }
.cell-highlight-team-green { box-shadow: inset 0 0 0 4px #22c55e; }

.cell-highlight-team {
  z-index: 10;
  position: relative;
}

/* Valid play targets — flash card face (not wild corners) */
.cell-highlight-flash .card-face {
  animation: flash-target-black 0.85s ease-in-out infinite alternate;
  z-index: 2;
}

.cell-highlight-flash {
  z-index: 10;
  position: relative;
}

.cell-highlight-remove-flash .card-face {
  animation: flash-target-red 0.85s ease-in-out infinite alternate;
}

@keyframes flash-target-black {
  from { background-color: #f8fafc; color: #0f172a; }
  to { background-color: #0a0a0a; color: #f8fafc; }
}

@keyframes flash-target-red {
  from { background-color: #f8fafc; }
  to { background-color: #7f1d1d; color: #fecaca; }
}

/* Logo demo (?logo) — flash suit ring + white logo plate */
.cell-highlight-flash .card-face-logo-mode {
  animation: flash-target-logo-suit-black 0.85s ease-in-out infinite alternate;
}

.cell-highlight-flash .card-face-logo-mode .card-face-logo {
  animation: flash-target-logo-plate-black 0.85s ease-in-out infinite alternate;
}

.cell-highlight-remove-flash .card-face-logo-mode {
  animation: flash-target-logo-suit-red 0.85s ease-in-out infinite alternate;
}

.cell-highlight-remove-flash .card-face-logo-mode .card-face-logo {
  animation: flash-target-logo-plate-red 0.85s ease-in-out infinite alternate;
}

@keyframes flash-target-logo-suit-black {
  from { background-color: var(--card-suit-bg, #1e293b); }
  to { background-color: #0a0a0a; }
}

@keyframes flash-target-logo-plate-black {
  from { background-color: #ffffff; }
  to { background-color: #141414; }
}

@keyframes flash-target-logo-suit-red {
  from { background-color: var(--card-suit-bg, #1e293b); }
  to { background-color: #7f1d1d; }
}

@keyframes flash-target-logo-plate-red {
  from { background-color: #ffffff; }
  to { background-color: #991b1b; }
}

.card-tap:active { transform: scale(0.96); }
.card-selected { outline: 3px solid #fbbf24; outline-offset: 2px; }

/* Plain playing-card face — rank + suit only */
.card-face {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.2);
  user-select: none;
}

.card-face-plain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #f8fafc;
  line-height: 0.9;
  font-weight: 900;
  container-type: size;
  container-name: card-face;
}

.card-face-rank {
  font-size: 42cqmin;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 0.85;
}

.card-face-suit {
  font-size: 48cqmin;
  line-height: 0.85;
  margin-top: -0.08em;
}

/* Hand cards — still large relative to the card face */
.card-face-hand.card-face-plain .card-face-rank {
  font-size: 38cqmin;
}

.card-face-hand.card-face-plain .card-face-suit {
  font-size: 44cqmin;
}

/* Board cells — fill the square */
.take5-board-grid .card-face-plain .card-face-rank {
  font-size: 42cqmin;
}

.take5-board-grid .card-face-plain .card-face-suit {
  font-size: 48cqmin;
}

.card-face-plain.card-face-wild {
  background: #fef3c7 !important;
  color: #92400e;
}

.card-face-plain .card-face-wild-label {
  font-size: 28cqmin;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  padding: 2px;
}

.card-face-empty {
  background: #e2e8f0;
}

/* —— Corporate logo demo (?logo) —— */
.card-face-logo-mode.suit-hearts { --card-suit-bg: #9333ea; background-color: #9333ea; }
.card-face-logo-mode.suit-diamonds { --card-suit-bg: #f97316; background-color: #f97316; }
.card-face-logo-mode.suit-clubs { --card-suit-bg: #eab308; background-color: #eab308; }
.card-face-logo-mode.suit-spades { --card-suit-bg: #0d9488; background-color: #0d9488; }

/* Thin suit ring; logo plate fills almost the whole cell */
.card-face-logo {
  position: absolute;
  inset: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.card-face-hand.card-face-logo-mode .card-face-logo {
  inset: 1px;
  padding: 0;
}

.card-face-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  padding: 0;
}

.take5-board-grid .card-face-logo-mode .card-face-logo {
  inset: 1px !important;
  padding: 0 !important;
  border-radius: 2px;
  overflow: hidden;
}

.take5-board-grid .card-face-logo-mode .card-face-logo img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center;
  transform: none !important;
}

.card-face-logo-mode.card-face-wild {
  --card-suit-bg: #f59e0b;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
}

.card-face-logo-mode.card-face-wild .card-face-logo {
  background: rgba(255, 255, 255, 0.95);
  inset: 1px 1px 12px;
  padding: 0;
}

.card-face-logo-mode.card-face-wild .card-face-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  transform: none;
}

.card-face-logo-mode .card-face-wild-label {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(6px, 2vw, 9px);
  font-weight: 800;
  color: #78350f;
  letter-spacing: 0.04em;
  line-height: 1;
  z-index: 1;
}

.hand-card-compact .card-face-logo-mode .card-face-logo {
  inset: 1px;
  padding: 0;
}

.hand-card-compact .card-face-logo-mode .card-face-logo img {
  object-fit: cover;
  transform: none;
}

.take5-board-mobile .card-face-logo-mode .card-face-logo {
  inset: 1px !important;
}

.take5-board-mobile .card-face-logo-mode.card-face-wild .card-face-logo {
  inset: 1px 1px 10px !important;
}

.take5-board-mobile .card-face-logo-mode .card-face-logo img {
  object-fit: cover !important;
  transform: none !important;
}

.hand-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hand-card:hover {
  transform: translateY(-4px);
}

.room-code {
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
}

/* —— Play view (shared) —— */
.play-game {
  width: 100%;
  overflow-x: hidden;
}

.play-header {
  flex-shrink: 0;
}

.play-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  min-height: 0;
}

.play-stack {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  min-height: 0;
}

.play-board-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  --board-side: 100%;
  gap: 0.25rem;
}

.play-board-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  container-type: size;
  container-name: play-board;
  contain: layout style;
}

.play-board-pane .take5-board-grid {
  width: min(100cqw, 100cqh) !important;
  height: min(100cqw, 100cqh) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1;
  align-content: stretch;
}

.play-hand-pane {
  flex-shrink: 0;
  width: var(--board-side);
  max-width: 100%;
}

#play-hint {
  width: var(--board-side);
  max-width: 100%;
}

.play-start-btn:not(.hidden) {
  flex-shrink: 0;
  width: var(--board-side);
  max-width: 100%;
}

.play-game-lobby .play-hand-pane,
.play-game-lobby #play-hint {
  display: none;
}

/* —— Phone play view —— */
@media (max-width: 767px) {
  .play-view-mobile.play-game {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.375rem;
    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
    gap: 0.25rem;
    max-width: none;
  }

  .play-view-mobile .play-main {
    flex: 1 1 auto;
    min-height: 0;
  }

  .play-view-mobile .play-stack {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .play-view-mobile .play-board-column {
    flex: 1 1 auto;
    min-height: 0;
  }

  .play-view-mobile .play-board-pane {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .play-view-mobile .play-hand-pane {
    padding-bottom: 0;
  }

}

/* —— Desktop play view —— */
@media (min-width: 768px) {
  .play-view-desktop.play-game {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
    gap: 0.35rem;
    max-width: 52rem;
  }

  .play-view-desktop .play-main {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .play-view-desktop .play-stack {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .play-view-desktop .play-board-column {
    flex: 1 1 auto;
    min-height: 0;
  }

  .play-view-desktop .play-board-pane {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .play-view-desktop .take5-board-grid {
    gap: 5px !important;
  }

}

/* Hand cards — equal width, height from aspect-ratio */
.play-hand-grid-compact {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.2rem;
  width: 100%;
  overflow: visible;
}

.hand-card-compact {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.take5-board-mobile .board-cell {
  cursor: default;
}

.take5-board-mobile .card-face-plain .card-face-rank {
  font-size: 40cqmin;
}

.take5-board-mobile .card-face-plain .card-face-suit {
  font-size: 46cqmin;
  margin-top: 0.12em;
}

/* Sequence-style preview token on valid targets — hard blink team / black */
.board-cell-has-preview .card-face,
.board-cell-has-token .card-face {
  visibility: hidden;
}

.chip-token-preview {
  position: absolute;
  left: 6%;
  top: 6%;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  z-index: 12;
  pointer-events: none;
  opacity: 1;
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    0 2px 5px rgba(0, 0, 0, 0.45);
}

.chip-token-preview-blink.chip-token-preview-red {
  animation: token-blink-red 0.55s steps(1, end) infinite;
}

.chip-token-preview-blink.chip-token-preview-blue {
  animation: token-blink-blue 0.55s steps(1, end) infinite;
}

.chip-token-preview-blink.chip-token-preview-green {
  animation: token-blink-green 0.55s steps(1, end) infinite;
}

@keyframes token-blink-red {
  0%, 49% { background: #ef4444; }
  50%, 100% { background: #000000; }
}

@keyframes token-blink-blue {
  0%, 49% { background: #3b82f6; }
  50%, 100% { background: #000000; }
}

@keyframes token-blink-green {
  0%, 49% { background: #22c55e; }
  50%, 100% { background: #000000; }
}

.chip-token-preview-remove {
  animation: token-blink-remove 0.55s steps(1, end) infinite !important;
}

@keyframes token-blink-remove {
  0%, 49% { background: #ef4444; }
  50%, 100% { background: #000000; }
}

/* Placed chip — solid token, no logo */
.chip-token-placed {
  position: absolute;
  left: 6%;
  top: 6%;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  z-index: 12;
  pointer-events: none;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.35),
    inset 0 2px 5px rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

.chip-token-placed-red { background: radial-gradient(circle at 35% 28%, #fca5a5, #ef4444 55%, #b91c1c); }
.chip-token-placed-blue { background: radial-gradient(circle at 35% 28%, #93c5fd, #3b82f6 55%, #1d4ed8); }
.chip-token-placed-green { background: radial-gradient(circle at 35% 28%, #86efac, #22c55e 55%, #15803d); }

/* Winning team tokens — hard blink team / white */
.chip-token-win-flash-red {
  animation: win-flash-red 0.55s steps(1, end) infinite;
}
.chip-token-win-flash-blue {
  animation: win-flash-blue 0.55s steps(1, end) infinite;
}
.chip-token-win-flash-green {
  animation: win-flash-green 0.55s steps(1, end) infinite;
}

@keyframes win-flash-red {
  0%, 49% { background: radial-gradient(circle at 35% 28%, #fca5a5, #ef4444 55%, #b91c1c); filter: brightness(1.15); }
  50%, 100% { background: #ffffff; filter: brightness(1.4); box-shadow: 0 0 0 2px #ef4444, 0 0 12px #ef4444; }
}

@keyframes win-flash-blue {
  0%, 49% { background: radial-gradient(circle at 35% 28%, #93c5fd, #3b82f6 55%, #1d4ed8); filter: brightness(1.15); }
  50%, 100% { background: #ffffff; filter: brightness(1.4); box-shadow: 0 0 0 2px #3b82f6, 0 0 12px #3b82f6; }
}

@keyframes win-flash-green {
  0%, 49% { background: radial-gradient(circle at 35% 28%, #86efac, #22c55e 55%, #15803d); filter: brightness(1.15); }
  50%, 100% { background: #ffffff; filter: brightness(1.4); box-shadow: 0 0 0 2px #22c55e, 0 0 12px #22c55e; }
}

.play-win-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 4.5rem;
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.play-win-title {
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.play-win-title-red { color: #f87171; }
.play-win-title-blue { color: #60a5fa; }
.play-win-title-green { color: #4ade80; }

.play-again-btn {
  width: 100%;
  max-width: 16rem;
  border-radius: 0.75rem;
  background: #059669;
  color: #ecfdf5;
  font-weight: 800;
  padding: 0.75rem 1rem;
  border: none;
  cursor: pointer;
}

.play-again-btn:hover {
  background: #10b981;
}

/* Watch TV — remote-friendly on-screen keyboard */
.watch-keyboard-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.watch-key {
  min-height: 3.25rem;
  border-radius: 0.85rem;
  background: #1e293b;
  border: 1px solid #475569;
  color: #f8fafc;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
}

.watch-key:hover,
.watch-key:focus-visible {
  background: #334155;
  border-color: #fbbf24;
  outline: none;
}

.watch-key:active {
  transform: scale(0.96);
  background: #0f172a;
}

@media (min-width: 640px) {
  .watch-keyboard-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .watch-key {
    min-height: 3.75rem;
    font-size: 1.5rem;
  }
}

.board-cell-seq-picked .chip-token-placed,
.chip-token-frozen {
  box-shadow:
    0 0 0 3px #fbbf24,
    inset 0 -4px 8px rgba(0, 0, 0, 0.35),
    inset 0 2px 5px rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.5);
  animation: none !important;
  opacity: 1 !important;
}