*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0a1628;
  --bg-light: #162040;
  --text: #e8e0d4;
  --text-muted: #8899aa;
  --accent: #d4a843;
  --accent-dark: #a07820;
  --danger: #c0392b;
  --success: #27ae60;
  --pirate-red: #8b1a1a;
  --ocean-blue: #1a3a5c;
  --card-shadow: rgba(0,0,0,0.5);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(ellipse 80% 50% at 50% 15%, rgba(212,168,67,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(10,22,40,0.95) 0%, transparent 70%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.005) 2px,
      rgba(255,255,255,0.005) 4px
    ),
    linear-gradient(180deg, #0e1e36 0%, #0a1628 40%, #060f1e 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.view {
  display: none;
  height: 100%;
}

.view.active {
  display: flex;
  flex-direction: column;
}

/* ---- Lobby ---- */
.lobby-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 24px;
  position: relative;
}

/* Gold glow behind lobby */
.lobby-container::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(212,168,67,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.game-title {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(212, 168, 67, 0.4), 0 0 40px rgba(212, 168, 67, 0.15);
  letter-spacing: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .game-title {
    animation: titleGlow 3s ease-in-out infinite;
  }
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 2px 12px rgba(212,168,67,0.4), 0 0 40px rgba(212,168,67,0.15); }
  50% { text-shadow: 0 2px 16px rgba(212,168,67,0.6), 0 0 60px rgba(212,168,67,0.25); }
}

.lobby-section {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input[type="text"] {
  padding: 14px 16px;
  border: 2px solid #334;
  border-radius: 10px;
  background: var(--bg-light);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  outline: none;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(212,168,67,0.15);
}

#room-code-input {
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 20px;
  font-weight: bold;
}

.btn {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, filter 0.2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    filter: brightness(1.1);
  }
}

.btn:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #c49a30 100%);
  color: #1a1a2e;
  box-shadow: 0 4px 12px rgba(212,168,67,0.3);
}

/* Shine sweep on primary buttons */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.4s ease;
  }
  .btn-primary:hover::after {
    left: 120%;
  }
}

.btn-secondary {
  background: var(--bg-light);
  color: var(--text);
  border: 2px solid #445;
}

.btn-leave {
  background: transparent;
  color: #889;
  border: 1px solid #334;
  font-size: 14px;
  padding: 8px 20px;
  margin-top: 12px;
}

.btn-leave:active {
  color: #e74c3c;
  border-color: #e74c3c;
}

.btn-confirm {
  background: var(--success);
  color: white;
  font-size: 18px;
  padding: 16px 40px;
}

.btn-tigress-pirate {
  background: var(--pirate-red);
  color: white;
  font-size: 16px;
  padding: 14px 24px;
  flex: 1;
}

.btn-tigress-escape {
  background: #555;
  color: white;
  font-size: 16px;
  padding: 14px 24px;
  flex: 1;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #334;
}

.room-code-display {
  text-align: center;
  padding: 20px;
  background: var(--bg-light);
  border-radius: 12px;
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}

/* Gold gradient border for room code */
.room-code-display::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark), var(--accent));
  z-index: -1;
}

.room-code-display .label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.room-code-display .code {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 10px;
  color: var(--accent);
}

.player-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-item {
  padding: 10px 16px;
  background: var(--bg-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

@media (prefers-reduced-motion: no-preference) {
  .player-item {
    animation: fadeIn 0.3s ease both;
  }
  .player-item:nth-child(1) { animation-delay: 0s; }
  .player-item:nth-child(2) { animation-delay: 0.06s; }
  .player-item:nth-child(3) { animation-delay: 0.12s; }
  .player-item:nth-child(4) { animation-delay: 0.18s; }
  .player-item:nth-child(5) { animation-delay: 0.24s; }
  .player-item:nth-child(6) { animation-delay: 0.30s; }
}

.player-item .host-badge {
  background: var(--accent);
  color: #111;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.ai-badge {
  background: #4a6a8a;
  color: #dde;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.btn-remove-ai {
  background: transparent;
  border: 1px solid #445;
  color: #889;
  font-size: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.btn-remove-ai:active {
  color: var(--danger);
  border-color: var(--danger);
}

.btn-add-ai {
  background: var(--bg-light);
  color: var(--text);
  border: 2px dashed #445;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn-add-ai:active {
  border-color: var(--accent);
}

.btn-add-ai:disabled {
  opacity: 0.4;
  cursor: default;
}

.ai-indicator {
  font-size: 9px;
  color: #6a8aaa;
  font-weight: 400;
}

.muted {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}

.error-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--danger);
  color: white;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 1000;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Game View Layout ---- */
#game-view {
  position: relative;
}

/* Gold glow behind play area center */
.play-area::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(212,168,67,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Scoreboard ---- */
.scoreboard {
  height: 60px;
  background: linear-gradient(180deg, rgba(22,32,64,0.95) 0%, rgba(16,24,48,0.95) 100%);
  border-bottom: 1px solid rgba(212,168,67,0.2);
  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.3);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  cursor: pointer;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,168,67,0.3) transparent;
}

.scoreboard::-webkit-scrollbar {
  height: 4px;
}

.scoreboard::-webkit-scrollbar-track {
  background: transparent;
}

.scoreboard::-webkit-scrollbar-thumb {
  background: rgba(212,168,67,0.3);
  border-radius: 2px;
}

.scoreboard-inner {
  display: flex;
  height: 100%;
  min-width: max-content;
  padding: 0 8px;
  gap: 2px;
}

.sb-player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  min-width: 80px;
  border-radius: 6px;
  font-size: 12px;
  transition: background 0.3s;
  position: relative;
}

.sb-player.current-turn {
  background: rgba(212, 168, 67, 0.15);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Gold triangle indicator for current turn */
.sb-player.current-turn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .sb-player.current-turn::after {
    animation: trianglePulse 1.5s ease-in-out infinite;
  }
}

@keyframes trianglePulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.sb-player.disconnected {
  opacity: 0.4;
}

.sb-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.sb-info {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.sb-score {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .sb-score.score-bump {
    animation: scoreBump 0.4s ease;
  }
}

@keyframes scoreBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---- Play Area ---- */
.play-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.round-info {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.btn-quit-game {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 1px solid #334;
  color: #667;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

.btn-quit-game:active {
  color: var(--danger);
  border-color: var(--danger);
}

.lead-indicator {
  color: var(--accent);
  font-weight: 600;
}

.trick-area {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: relative;
  z-index: 1;
}

/* Fade-out transition for trick area clearing */
@media (prefers-reduced-motion: no-preference) {
  .trick-area.fade-out {
    animation: fadeOut 0.25s ease forwards;
  }
}

@keyframes fadeOut {
  to { opacity: 0; }
}

.trick-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Dramatic card appear animation */
@media (prefers-reduced-motion: no-preference) {
  .trick-card-wrapper {
    animation: cardAppearDramatic 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@keyframes cardAppearDramatic {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.5) rotate(-3deg);
    filter: drop-shadow(0 0 0 transparent);
  }
  60% {
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  }
}

.trick-player-label {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 70px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tigress-mode {
  font-size: 10px;
  font-style: italic;
  text-align: center;
  white-space: nowrap;
}

.tigress-mode-pirate {
  color: var(--danger);
}

.tigress-mode-escape {
  color: var(--text-muted);
}

.game-message {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  padding: 8px;
  min-height: 36px;
}

/* ---- Bid Overlay ---- */
.bid-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.bid-content {
  text-align: center;
  padding: 20px;
}

.bid-content h2 {
  font-family: 'Cinzel', serif;
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 22px;
}

/* Inline bid UI */
.bid-inline {
  text-align: center;
  padding: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .bid-inline {
    animation: slideUpIn 0.35s ease;
  }
}

.bid-inline-title {
  font-family: 'Cinzel', serif;
  color: var(--accent);
  font-size: 20px;
  margin-bottom: 6px;
}

.bid-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.bid-btn {
  width: 60px;
  height: 60px;
  border: 2px solid var(--accent-dark);
  border-radius: 12px;
  background: var(--bg-light);
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
}

.bid-btn:active, .bid-btn.bid-btn-selected {
  background: var(--accent);
  color: #111;
  transform: scale(0.95);
}

/* Gold ring expansion on bid selection */
@media (prefers-reduced-motion: no-preference) {
  .bid-btn.bid-btn-selected::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 2px solid var(--accent);
    animation: bidRing 0.4s ease forwards;
  }
}

@keyframes bidRing {
  from { inset: 0; opacity: 0.8; }
  to { inset: -6px; opacity: 0; }
}

/* ---- Hand Area ---- */
.hand-area {
  flex-shrink: 0;
  background: linear-gradient(to top, rgba(10,22,40,0.98), rgba(22,32,64,0.9));
  border-top: 1px solid #223;
  padding: 10px 4px;
  padding-bottom: calc(6px + var(--safe-bottom));
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
}

/* Your turn glow */
@media (prefers-reduced-motion: no-preference) {
  .hand-area.your-turn {
    border-top: 2px solid var(--accent);
    box-shadow: 0 -8px 30px rgba(212,168,67,0.25), inset 0 -4px 12px rgba(212,168,67,0.08);
    animation: handGlow 1.5s ease-in-out infinite;
  }
}

@keyframes handGlow {
  0%, 100% { box-shadow: 0 -8px 30px rgba(212,168,67,0.25), inset 0 -4px 12px rgba(212,168,67,0.08); }
  50% { box-shadow: 0 -12px 48px rgba(212,168,67,0.45), inset 0 -6px 18px rgba(212,168,67,0.15); }
}

.hand-cards {
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 12px 2px;
  gap: 0;
  scroll-snap-type: x proximity;
  min-height: 168px;
}

/* Center cards when they don't overflow, left-align when they do */
.hand-cards::before,
.hand-cards::after {
  content: '';
  flex: 1 0 0px;
}

.confirm-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  position: absolute;
  top: -56px;
  left: 0;
  right: 0;
  z-index: 20;
  pointer-events: none;
}

.confirm-bar > button {
  pointer-events: auto;
}

/* ---- Score Overlay ---- */
.score-overlay, .gameover-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

@media (prefers-reduced-motion: no-preference) {
  .score-overlay, .gameover-overlay {
    animation: fadeIn 0.3s ease;
  }
}

.score-overlay-content, .gameover-content {
  text-align: center;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .score-overlay-content, .gameover-content {
    animation: slideUpIn 0.4s ease;
  }
}

.score-overlay-content h2, .gameover-content h1 {
  font-family: 'Cinzel', serif;
  color: var(--accent);
  margin-bottom: 16px;
}

.score-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-light);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}

.score-row .name {
  font-weight: 600;
}

.score-row .pts {
  font-weight: 700;
}

.score-row .pts.positive {
  color: var(--success);
}

.score-row .pts.negative {
  color: var(--danger);
}

.score-row .detail {
  color: var(--text-muted);
  font-size: 12px;
}

.gameover-content .winner {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  color: var(--accent);
  margin-bottom: 20px;
}

.final-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-light);
  border-radius: 8px;
  margin-bottom: 6px;
}

.final-score-row.first {
  border: 2px solid var(--accent);
}

.final-score-row .rank {
  font-size: 20px;
  width: 30px;
}

.final-score-row .name {
  flex: 1;
  font-weight: 600;
  text-align: left;
  margin-left: 8px;
}

.final-score-row .score {
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
}

/* Score history table */
.score-history-grid {
  font-size: 12px;
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.score-history-grid th, .score-history-grid td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid #223;
}

.score-history-grid th {
  font-family: 'Cinzel', serif;
  color: var(--accent);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--bg);
}

.score-history-grid td.positive {
  color: var(--success);
}

.score-history-grid td.negative {
  color: var(--danger);
}

/* Waiting indicator */
.waiting-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Trick winner highlight */
.trick-card-wrapper.winner .card {
  box-shadow: 0 0 20px rgba(212,168,67,0.6), 0 0 40px rgba(212,168,67,0.3);
}

@media (prefers-reduced-motion: no-preference) {
  .trick-card-wrapper.winner {
    animation: winPulse 0.6s ease;
  }
  .trick-card-wrapper.winner .card {
    animation: winGlow 0.6s ease;
  }
}

@keyframes winPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes winGlow {
  0% { box-shadow: 0 2px 6px var(--card-shadow); filter: brightness(1); }
  50% { box-shadow: 0 0 24px rgba(212,168,67,0.7), 0 0 48px rgba(212,168,67,0.4); filter: brightness(1.3); }
  100% { box-shadow: 0 0 20px rgba(212,168,67,0.6), 0 0 40px rgba(212,168,67,0.3); filter: brightness(1); }
}

/* Starburst on winner */
.trick-card-wrapper.celebrating::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(212,168,67,0.15) 10deg,
    transparent 20deg, transparent 30deg,
    rgba(212,168,67,0.15) 40deg, transparent 50deg,
    transparent 60deg, rgba(212,168,67,0.15) 70deg,
    transparent 80deg, transparent 90deg,
    rgba(212,168,67,0.15) 100deg, transparent 110deg,
    transparent 120deg, rgba(212,168,67,0.15) 130deg,
    transparent 140deg, transparent 150deg,
    rgba(212,168,67,0.15) 160deg, transparent 170deg,
    transparent 180deg, rgba(212,168,67,0.15) 190deg,
    transparent 200deg, transparent 210deg,
    rgba(212,168,67,0.15) 220deg, transparent 230deg,
    transparent 240deg, rgba(212,168,67,0.15) 250deg,
    transparent 260deg, transparent 270deg,
    rgba(212,168,67,0.15) 280deg, transparent 290deg,
    transparent 300deg, rgba(212,168,67,0.15) 310deg,
    transparent 320deg, transparent 330deg,
    rgba(212,168,67,0.15) 340deg, transparent 350deg
  );
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .trick-card-wrapper.celebrating::after {
    animation: starburstSpin 2s linear infinite;
  }
}

@keyframes starburstSpin {
  to { transform: rotate(360deg); }
}

.trick-card-wrapper.celebrating {
  position: relative;
}

/* ---- Confetti ---- */
.confetti-piece {
  position: fixed;
  width: 8px;
  height: 12px;
  top: -20px;
  z-index: 1000;
  pointer-events: none;
  border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .confetti-piece {
    animation: confettiFall var(--fall-duration, 3s) ease-in forwards;
    animation-delay: var(--fall-delay, 0s);
  }
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 1;
  }
  25% {
    transform: translateY(25vh) rotate(180deg) translateX(var(--sway, 30px));
  }
  50% {
    transform: translateY(50vh) rotate(360deg) translateX(calc(var(--sway, 30px) * -0.5));
  }
  75% {
    transform: translateY(75vh) rotate(540deg) translateX(var(--sway, 30px));
  }
  100% {
    transform: translateY(105vh) rotate(720deg) translateX(0);
    opacity: 0;
  }
}

/* ---- Game Options (Lobby) ---- */
.game-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-light);
  border-radius: 10px;
  border: 1px solid #334;
}

.options-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: 2px;
}

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--accent-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}

.stepper-btn:active {
  background: rgba(212,168,67,0.2);
  transform: scale(0.9);
}

.stepper-val, .stepper-val-readonly {
  font-size: 16px;
  font-weight: 700;
  width: 24px;
  text-align: center;
  color: var(--accent);
}

/* ---- Last Trick Button ---- */
.btn-last-trick {
  position: absolute;
  top: 6px;
  left: 8px;
  background: transparent;
  border: 1px solid #334;
  color: #667;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

.btn-last-trick:active {
  color: var(--accent);
  border-color: var(--accent);
}

@media (min-width: 600px) {
  .game-title { font-size: 3rem; }
  .sb-player { min-width: 100px; padding: 4px 16px; }
  .trick-area { gap: 12px; }
}

@media (min-width: 1024px) {
  #game-view {
    max-width: 800px;
    margin: 0 auto;
  }
}