/* fasttrack/3d.css — extracted from 3d.html
 * 3D viewport chrome (loader, glass panels, fixed control rail per HR-6.2,
 * settings/replay overlays, emoji reactions). No game logic — purely the
 * presentation surface for fasttrack-3d.js + fasttrack-game-core.js.
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0a0a14;
  color: #fff;
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  overflow: hidden;
  font-size: clamp(16px, 2.6vw, 19px);
}

button,
input,
select,
textarea,
.glass-panel,
.player-name,
.player-status,
.player-meta {
  font-size: clamp(14px, 2.4vw, 18px);
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  button,
  input,
  select,
  textarea,
  .glass-panel,
  .player-name,
  .player-status,
  .player-meta {
    font-size: 14px !important;
  }
}

#container {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* ══════════════════════════════════════════════
       BOARD LOADING SCREEN — 80s wizard atmosphere
       Fades out on ft3d:ready
       ══════════════════════════════════════════════ */
#ft3d-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  background: #07040f;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(140, 0, 220, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 60% 35% at 50% 100%, rgba(30, 220, 40, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 90% 30% at 50% 58%, rgba(0, 200, 255, 0.10) 0%, transparent 60%);
  transition: opacity 0.65s ease;
}

#ft3d-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Three concentric spinning rings */
.ft3d-spinner {
  position: relative;
  width: 120px;
  height: 120px;
}

.ft3d-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  animation: ft3dSpin linear infinite;
}

.ft3d-ring:nth-child(1) {
  border-top-color: #00ffff;
  border-right-color: rgba(0, 255, 255, 0.15);
  width: 120px;
  height: 120px;
  animation-duration: 1.1s;
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.4);
}

.ft3d-ring:nth-child(2) {
  border-top-color: #39ff14;
  border-left-color: rgba(57, 255, 20, 0.15);
  width: 88px;
  height: 88px;
  top: 16px;
  left: 16px;
  animation-duration: 0.8s;
  animation-direction: reverse;
  box-shadow: 0 0 14px rgba(57, 255, 20, 0.35);
}

.ft3d-ring:nth-child(3) {
  border-top-color: #bf00ff;
  border-bottom-color: rgba(191, 0, 255, 0.15);
  width: 56px;
  height: 56px;
  top: 32px;
  left: 32px;
  animation-duration: 0.6s;
  box-shadow: 0 0 12px rgba(191, 0, 255, 0.4);
}

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

/* Pulsing center dot */
.ft3d-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 55px;
  left: 55px;
  border-radius: 50%;
  background: #00ffff;
  box-shadow: 0 0 16px #00ffff, 0 0 32px rgba(0, 255, 255, 0.5);
  animation: ft3dPulse 1.1s ease-in-out infinite alternate;
}

@keyframes ft3dPulse {
  from {
    transform: scale(0.7);
    opacity: 0.6;
  }

  to {
    transform: scale(1.3);
    opacity: 1.0;
  }
}

/* Label */
#ft3d-loader-label {
  font-family: 'Orbitron', monospace;
  font-size: clamp(11px, 1.8vw, 15px);
  letter-spacing: 0.25em;
  color: rgba(0, 255, 255, 0.85);
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.55);
  animation: ft3dBlink 1.4s ease-in-out infinite alternate;
}

@keyframes ft3dBlink {
  from {
    opacity: 0.55;
  }

  to {
    opacity: 1.00;
  }
}

/* 80s horizon grid at the bottom */
#ft3d-loader-grid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38vh;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(140, 0, 220, 0.18) 100%),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(0, 200, 255, 0.12) 60px),
    repeating-linear-gradient(180deg, transparent, transparent 29px, rgba(0, 200, 255, 0.10) 30px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
       3D GLASS PANEL SYSTEM — minimalist, never covers board
       ═══════════════════════════════════════════════════════════════ */

/* ── Shared glass effect ── */
.glass-panel {
  background: rgba(8, 10, 24, 0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 0.5px rgba(0, 180, 255, 0.1);
  transform-style: flat;
  will-change: transform;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 12px rgba(0, 180, 255, 0.15);
}

/* ── Player strip — top-left corner ── */
#panel-players {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
  border-radius: 14px;
  padding: 10px 14px;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  transform: perspective(800px) rotateY(1.5deg) rotateX(-0.5deg);
  max-width: 220px;
}

#panel-players:hover {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg);
}

#game-status {
  color: #ffe033;
  font-weight: 700;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-shadow: 0 0 12px rgba(255, 220, 0, 0.6);
}

#player-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
  font-size: 1em;
  transform: perspective(600px) rotateY(0.5deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.player-row:hover {
  transform: perspective(600px) rotateY(0deg) translateX(2px);
  background: rgba(255, 255, 255, 0.04);
}

.player-row.active {
  background: rgba(0, 180, 255, 0.1);
  border-left: 2px solid rgba(0, 180, 255, 0.7);
  box-shadow: inset 0 0 12px rgba(0, 180, 255, 0.06), 0 2px 8px rgba(0, 180, 255, 0.15);
  transform: perspective(600px) rotateY(0deg) translateX(3px) scale(1.02);
  outline: 2px solid rgba(255, 224, 51, 0.9);
  box-shadow: inset 0 0 16px rgba(0, 180, 255, 0.22), 0 0 14px rgba(255, 224, 51, 0.75), 0 2px 8px rgba(0, 180, 255, 0.2);
  animation: playerTurnPulse 1.15s ease-in-out infinite;
}

@keyframes playerTurnPulse {

  0%,
  100% {
    box-shadow: inset 0 0 16px rgba(0, 180, 255, 0.18), 0 0 8px rgba(255, 224, 51, 0.45), 0 2px 8px rgba(0, 180, 255, 0.18);
  }

  50% {
    box-shadow: inset 0 0 24px rgba(0, 180, 255, 0.28), 0 0 18px rgba(255, 224, 51, 0.95), 0 2px 12px rgba(0, 180, 255, 0.28);
  }
}

.turn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  background: linear-gradient(135deg, #ffe033, #ffc400);
  box-shadow: 0 0 8px rgba(255, 224, 51, 0.75);
  margin-left: 4px;
  flex-shrink: 0;
}

.player-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}

.player-name {
  flex: 1;
  font-size: 1em;
  color: #e8eeff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(200, 220, 255, 0.3);
}

.player-pegs {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82em;
  white-space: nowrap;
}

/* ── Action panel — bottom-left ── */
#panel-action {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 55;
  border-radius: 14px;
  padding: 12px 14px;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  transform: perspective(800px) rotateY(1.5deg) rotateX(0.5deg);
  width: 200px;
}

/* Dedicated options panel so move choices never cover the selected card. */
#panel-options {
  position: fixed;
  bottom: 12px;
  left: 226px;
  z-index: 70;
  display: none;
  border-radius: 14px;
  padding: 12px;
  width: min(420px, calc(100vw - 252px));
  max-height: 46vh;
  overflow: hidden;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  transform: perspective(800px) rotateY(0.6deg) rotateX(0.25deg);
}

#panel-options:hover {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg);
}

#panel-action:hover {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg);
}

#card-area {
  text-align: center;
  padding: 8px 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: perspective(500px) rotateX(3deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#card-area:hover {
  transform: perspective(500px) rotateX(0deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 215, 0, 0.1);
}

#card-label {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#current-card {
  font-size: 2.8em;
  margin: 4px 0;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 2px 0 rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease;
}

#current-card:hover {
  transform: scale(1.1) rotateZ(-2deg);
}

#current-card .card-back {
  display: inline-block;
  width: 52px;
  height: 72px;
  border-radius: 6px;
  border: 2.5px solid #c8a84e;
  background: linear-gradient(135deg, #8b0000, #b22222 30%, #8b0000 50%, #b22222 70%, #8b0000);
  box-shadow: inset 0 0 0 3px #1a0a0a, inset 0 0 0 5px #c8a84e,
    inset 0 0 12px rgba(0, 0, 0, 0.6), 0 3px 10px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

#current-card .card-back::before {
  content: '♠♥♦♣';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  letter-spacing: 1px;
  color: #c8a84e;
  opacity: 0.7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#current-card .card-back::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(200, 168, 78, 0.4);
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(200, 168, 78, 0.08) 3px, rgba(200, 168, 78, 0.08) 6px);
}

#card-info {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85em;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

#draw-btn {
  width: 100%;
  padding: 12px 8px;
  font-size: 1.05em;
  background: linear-gradient(135deg, rgba(0, 180, 255, 0.9), rgba(0, 100, 200, 0.9));
  border: 1.5px solid rgba(0, 200, 255, 0.6);
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  transition: all 0.25s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 18px rgba(0, 100, 200, 0.45);
  transform: perspective(400px) rotateX(2deg);
  min-height: 44px;
}

#draw-btn:hover:not(:disabled) {
  transform: perspective(400px) rotateX(0deg) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 180, 255, 0.4);
}

#draw-btn:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

#move-hints {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}

@keyframes hintPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.45), 0 0 22px rgba(0, 255, 136, 0.2), inset 0 0 10px rgba(0, 255, 136, 0.08);
    border-color: rgba(0, 255, 136, 0.55);
  }

  50% {
    box-shadow: 0 0 22px rgba(0, 255, 136, 0.75), 0 0 40px rgba(0, 255, 136, 0.35), inset 0 0 18px rgba(0, 255, 136, 0.15);
    border-color: rgba(0, 255, 136, 0.9);
  }
}

.hint {
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(0, 255, 136, 0.14);
  border: 2px solid rgba(0, 255, 136, 0.6);
  font-size: 0.95em;
  color: #e8fff5;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  letter-spacing: 0.02em;
  line-height: 1.4;
  min-height: 44px;
  display: flex;
  align-items: center;
  animation: hintPulse 1.6s ease-in-out infinite;
}

.hint:hover {
  background: rgba(0, 255, 136, 0.28);
  transform: translateX(5px) scale(1.03);
  box-shadow: 0 0 28px rgba(0, 255, 136, 0.8), 0 4px 20px rgba(0, 255, 136, 0.4), inset 0 0 24px rgba(0, 255, 136, 0.12);
  border-color: #00ff88;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 255, 136, 0.9);
  animation: none;
}

.hint-group {
  background: rgba(64, 146, 255, 0.16);
  border-color: rgba(95, 170, 255, 0.62);
  color: #e2f0ff;
  text-shadow: 0 0 8px rgba(110, 190, 255, 0.55);
}

.hint-group.expanded {
  border-color: rgba(255, 224, 51, 0.9);
  box-shadow: 0 0 22px rgba(255, 224, 51, 0.38);
  color: #fff7cf;
}

.hint-sublist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 6px 12px;
  padding-left: 8px;
  border-left: 2px solid rgba(90, 178, 255, 0.35);
}

.hint-sub {
  background: rgba(0, 255, 136, 0.09);
  border-color: rgba(0, 255, 136, 0.4);
  font-size: 0.88em;
  min-height: 40px;
  padding: 8px 11px;
}

/* ── Split Selector — interactive 7-card split UI ── */
.split-header {
  font-size: 0.9em;
  color: #ffe566;
  text-align: center;
  padding: 6px 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.split-ratios {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  padding: 4px 0 6px;
}

.split-ratio-btn {
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 215, 0, 0.12);
  border: 1.5px solid rgba(255, 215, 0, 0.4);
  color: #fff8cc;
  font-size: 0.95em;
  font-weight: 700;
  transition: all 0.2s ease;
  font-family: 'Rajdhani', sans-serif;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  min-height: 40px;
}

.split-ratio-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
  transform: scale(1.05);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

.split-ratio-btn.selected {
  background: rgba(255, 215, 0, 0.25);
  border-color: rgba(255, 215, 0, 0.6);
  color: #ffd700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.split-ratio-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.split-pairs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 120px;
  overflow: hidden;
}

.split-pair {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 165, 0, 0.10);
  border: 1.5px solid rgba(255, 165, 0, 0.35);
  font-size: 0.92em;
  color: #ffe8b0;
  transition: all 0.2s ease;
  min-height: 42px;
}

.split-pair:hover {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.35);
  transform: translateX(3px);
  box-shadow: 0 2px 10px rgba(255, 165, 0, 0.15);
}

.split-peg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

.split-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.9em;
}

.split-back-btn {
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: center;
  padding: 6px 0;
  transition: color 0.15s;
}

.split-back-btn:hover {
  color: #fff;
}

/* ── Camera controls — bottom-right, tiny ── */
#panel-cam {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 20;
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  gap: 3px;
  transform: perspective(800px) rotateY(-1.5deg);
}

#panel-cam:hover {
  transform: perspective(800px) rotateY(0deg);
}

.cam-btn {
  padding: 6px 11px;
  font-size: 0.78em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Rajdhani', sans-serif;
  min-height: 36px;
}

.cam-btn:hover {
  background: rgba(0, 180, 255, 0.15);
  color: #fff;
}

.cam-btn.active {
  background: rgba(0, 180, 255, 0.25);
  color: #00b4ff;
  border-color: rgba(0, 180, 255, 0.5);
}

/* ── Manifold Metrics — collapsible, bottom-right above cam ── */
#panel-metrics {
  position: fixed;
  bottom: 50px;
  right: 12px;
  z-index: 25;
  border-radius: 10px;
  padding: 0;
  width: 340px;
  max-height: 24px;
  overflow: hidden;
  transition: all 0.35s ease;
  transform: perspective(800px) rotateY(-1deg);
  cursor: pointer;
}

#panel-metrics:hover,
#panel-metrics.expanded {
  max-height: 400px;
  padding-bottom: 8px;
  transform: perspective(800px) rotateY(0deg);
}

#metrics-toggle {
  padding: 4px 10px;
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
}

#metrics-body {
  padding: 4px 8px;
  font-size: 0.65em;
  font-family: 'Rajdhani', sans-serif;
}

.metric-row {
  display: grid;
  grid-template-columns: 62px 28px 52px 52px 1fr 38px;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
}

.metric-label {
  font-weight: bold;
  color: rgba(255, 255, 255, 0.7);
}

.metric-entries {
  text-align: center;
  color: rgba(0, 180, 255, 0.8);
}

.metric-manifold {
  text-align: right;
  color: rgba(0, 255, 136, 0.7);
  font-size: 0.9em;
}

.metric-json {
  text-align: right;
  color: rgba(255, 170, 0, 0.7);
  font-size: 0.9em;
}

.metric-bar-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.metric-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.metric-pct {
  text-align: right;
  font-weight: bold;
  font-size: 0.9em;
}

.metric-totals {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}

.metric-totals strong {
  color: rgba(255, 255, 255, 0.85);
}

/* ── Game log — collapsible, top-left ── */
#panel-log {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  border-radius: 10px;
  padding: 0;
  width: 180px;
  max-height: 24px;
  overflow: hidden;
  transition: all 0.35s ease;
  transform: perspective(800px) rotateY(1deg);
  cursor: pointer;
}

#panel-log:hover,
#panel-log.expanded {
  max-height: 200px;
  padding-bottom: 6px;
  transform: perspective(800px) rotateY(0deg);
}

#log-toggle {
  padding: 4px 10px;
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
}

#game-log {
  max-height: 160px;
  overflow: hidden;
  padding: 2px 8px;
  font-size: 0.65em;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Rajdhani', sans-serif;
}

#game-log::-webkit-scrollbar {
  width: 3px;
}

#game-log::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.log-entry {
  padding: 1px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

/* ── Helix viz — subtle, below players ── */
#helix-viz {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.helix-section {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  font-weight: bold;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════
       HR-6.2 — FastTrack chrome at desktop sizes:
       fixed top header (player strip) + fixed bottom rail
       (action / hints / camera). 3D canvas insets to fit
       the middle band (see onWindowResize).
       ════════════════════════════════════════════════ */
@media (min-width: 601px) {
  #panel-players {
    top: 0;
    left: 0;
    right: 0;
    max-width: none;
    width: 100%;
    border-radius: 0;
    /* Card now lives at bottom-left and #game-status is hidden, so the
       header strip starts flush at the far left. Right padding still
       reserves space for the music/camera/leave/settings round icons. */
    padding: 6px 200px 6px 12px;
    transform: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    box-sizing: border-box;
  }

  #panel-players:hover {
    transform: none;
  }

  #helix-viz {
    display: none;
  }

  #game-status {
    border-bottom: none;
    padding: 0;
    margin: 0;
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 180px;
  }

  #player-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .player-row {
    padding: 4px 9px;
    font-size: 0.92em;
    transform: none;
    flex: 0 0 auto;
    min-width: 0;
  }

  .player-row:hover {
    transform: none;
  }

  .player-name {
    max-width: 110px;
  }

  /* Card + draw lives in the TOP-LEFT corner of the header.
         The card image itself acts as the draw button — no separate
         #draw-btn is shown at desktop sizes. */
  #panel-action {
    top: 4px;
    left: 8px;
    bottom: auto;
    right: auto;
    width: auto;
    min-width: 0;
    max-width: 156px;
    border-radius: 8px;
    padding: 2px 6px;
    transform: none;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 60;
  }

  #panel-action:hover {
    transform: none;
  }

  #panel-action #card-area {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: none;
    border-radius: 0;
    transform: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  #panel-action #card-area:hover {
    transform: none;
    box-shadow: none;
  }

  #panel-action #card-label {
    display: none;
  }

  #panel-action #current-card {
    font-size: 1.6em;
    margin: 0;
    line-height: 1;
  }

  #panel-action #current-card .card-back {
    width: 28px;
    height: 40px;
    border-width: 2px;
    box-shadow: inset 0 0 0 2px #1a0a0a, inset 0 0 0 3px #c8a84e,
      inset 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  }

  #panel-action #current-card .card-back::before {
    font-size: 8px;
  }

  #panel-action #card-info {
    font-size: 0.72em;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #panel-action #draw-btn {
    display: none;
  }

  /* Camera fills the bottom rail. Move hints are NOT shown as pill
         buttons on desktop — the player picks moves directly on the 3D
         board (see setupBoardPickHandler in fasttrack-3d.js). The hints
         panel is reserved for the 7-split selector only, which has its
         own complex multi-stage UI that doesn't fit pick-on-board. */
  #panel-options {
    left: 12px;
    right: 240px;
    bottom: 0;
    width: auto;
    max-height: 38vh;
    border-radius: 0;
    padding: 6px 12px;
    transform: none;
  }

  #panel-options:hover {
    transform: none;
  }

  /* Hide the regular hint pills — desktop picks moves on the board. */
  #panel-options #move-hints .hint {
    display: none;
  }

  /* Collapse the hints panel entirely when no split selector is
         present (i.e. for non-7 cards there's nothing to render here). */
  #panel-options:not(:has(.split-header)) {
    display: none;
  }

  #panel-cam {
    right: 12px;
    bottom: 0;
    top: auto;
    border-radius: 0;
    transform: none;
  }

  #panel-cam:hover {
    transform: none;
  }

  /* The header strip carries a faint translucent backdrop so player
         text stays readable over the 3D scene. The footer band gets its
         own opaque-ish strip so its controls read clearly without each
         control needing its own card background. */
  #panel-players {
    background: rgba(8, 16, 30, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }

  #panel-action,
  #panel-options,
  #panel-cam {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
  }

  #ft-footer-bg {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    z-index: 10;
    pointer-events: none;
    background: rgba(8, 16, 30, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
  }

  /* Game log lives out of the header strip — collapsed pill in the
         bottom-right corner of the footer, above the camera buttons. */
  #panel-log {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 52px;
    width: 140px;
    max-height: 22px;
    z-index: 60;
  }

  #panel-log.expanded {
    max-height: 220px;
  }
}

/* ═══ MOBILE: top strip + bottom action ═══ */
@media (max-width: 600px) {
  #panel-players {
    top: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    border-radius: 0 0 12px 12px;
    padding: 5px 8px;
    transform: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    overflow: hidden;
  }

  #panel-players:hover {
    transform: none;
  }

  #game-status {
    border-bottom: none;
    margin: 0;
    padding: 0;
    font-size: 1.05em;
    color: #ffe033;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 90px;
    font-size: 0.85em;
  }

  #player-list {
    flex-direction: row;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Mobile shows only the current player's chip — name + color swatch.
         Hiding the other players prevents the row from overflowing the
         narrow strip and bleeding into the game-status text. */
  #player-list .player-row {
    display: none;
  }

  #player-list .player-row.active {
    display: flex;
    padding: 3px 7px;
    font-size: 0.9em;
    transform: none !important;
    animation: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .player-name {
    font-size: 0.9em;
    color: #e8eeff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-pegs,
  .turn-chip {
    display: none;
  }

  #helix-viz {
    display: none;
  }

  #panel-action {
    bottom: 0;
    left: 0;
    right: auto;
    width: 148px;
    max-width: 42vw;
    border-radius: 12px 12px 0 0;
    padding: 5px 8px;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    z-index: 90;
  }

  #panel-options {
    left: 154px;
    right: 6px;
    bottom: 0;
    width: auto;
    max-height: 32vh;
    border-radius: 12px 12px 0 0;
    padding: 8px;
    transform: none;
    z-index: 85;
  }

  #panel-action:hover {
    transform: none;
  }

  #card-area {
    border-bottom: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  #current-card {
    font-size: 1.9em;
    margin: 0;
  }

  #card-label {
    display: none;
  }

  #card-info {
    display: block;
    font-size: 0.78em;
    line-height: 1.2;
  }

  #draw-btn {
    width: auto;
    padding: 9px 16px;
    font-size: 0.95em;
    flex-shrink: 0;
    transform: none;
    min-height: 42px;
  }

  #draw-btn:hover:not(:disabled) {
    transform: none;
  }

  .hint {
    font-size: 1.05em;
    padding: 12px 14px;
    min-height: 48px;
    color: #d0fff0;
    border-color: rgba(0, 255, 136, 0.55);
  }

  #move-hints {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    flex: 1;
  }

  #panel-cam {
    bottom: auto;
    top: auto;
    right: 6px;
    bottom: 60px;
  }

  .cam-btn {
    font-size: 0.8em;
    padding: 6px 10px;
  }

  #panel-log {
    width: 160px;
  }

  #log-toggle,
  #metrics-toggle {
    font-size: 0.75em;
  }

  #game-log,
  #metrics-body {
    font-size: 0.8em;
  }
}

/* ── Settings gear button — top-right ── */
#btn-settings {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(8, 10, 24, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

#btn-settings:hover {
  background: rgba(8, 10, 24, 0.8);
  color: #fff;
  transform: rotate(30deg);
}

/* ── Emoji reactions (hidden until opened) ── */
#emoji-ui {
  position: fixed;
  top: 56px;
  right: 12px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

#btn-emoji-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(8, 10, 24, 0.72);
  border: 1px solid rgba(80, 220, 255, 0.35);
  color: rgba(190, 240, 255, 0.95);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  backdrop-filter: blur(12px);
}

#btn-emoji-toggle:hover {
  background: rgba(16, 45, 62, 0.84);
  border-color: rgba(80, 235, 255, 0.65);
  transform: scale(1.06);
}

#emoji-panel {
  width: min(280px, 82vw);
  background: rgba(8, 10, 24, 0.94);
  border: 1px solid rgba(80, 220, 255, 0.28);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#emoji-panel.open {
  display: grid;
}

.emoji-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: #d9f5ff;
  min-height: 50px;
  font-size: 11px;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 1.15;
  padding: 6px 4px;
  transition: all 0.15s;
}

.emoji-btn:hover {
  border-color: rgba(80, 220, 255, 0.55);
  background: rgba(42, 127, 157, 0.22);
}

.emoji-glyph {
  font-size: 20px;
  margin-bottom: 3px;
}

#emoji-feed {
  position: fixed;
  left: 12px;
  top: 132px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: min(340px, 86vw);
  pointer-events: none;
}

.emoji-toast {
  background: rgba(8, 12, 24, 0.86);
  border: 1px solid rgba(80, 220, 255, 0.36);
  border-radius: 10px;
  padding: 8px 10px;
  color: #eefbff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.emoji-toast.fade {
  opacity: 0;
  transform: translateY(-4px);
}

.emoji-balloon {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) scale(0.75);
  z-index: 95;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 180px;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
  animation: emojiBalloonRise 1.1s ease-out forwards;
}

.emoji-balloon-glyph {
  font-size: clamp(88px, 17vw, 148px);
  line-height: 1;
  text-shadow: 0 0 26px rgba(80, 220, 255, 0.35);
}

.emoji-balloon-sender {
  background: rgba(7, 12, 25, 0.9);
  border: 1px solid rgba(80, 220, 255, 0.42);
  border-radius: 999px;
  padding: 5px 12px;
  color: #eaf8ff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.emoji-balloon.pop {
  animation: emojiBalloonPop 0.24s ease-in forwards;
}

@keyframes emojiBalloonRise {
  from {
    bottom: 14px;
    opacity: 0;
    transform: translateX(-50%) scale(0.75);
  }

  12% {
    opacity: 1;
  }

  to {
    bottom: 48vh;
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes emojiBalloonPop {
  from {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) scale(1.34);
  }
}

/* ── Settings overlay ── */
#settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}

#settings-overlay.open {
  display: flex;
}

#settings-panel {
  background: rgba(8, 10, 24, 0.92);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 28px 32px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
}

#settings-panel h2 {
  margin: 0 0 20px;
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.setting-row label {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.7);
}

.setting-row input[type="range"] {
  width: 120px;
  accent-color: #00b4ff;
  cursor: pointer;
}

.settings-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 18px 0;
}

#btn-exit-game {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: rgba(220, 50, 50, 0.25);
  border: 1px solid rgba(220, 50, 50, 0.4);
  border-radius: 8px;
  color: #ff6b6b;
  font-size: 0.9em;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

#btn-exit-game:hover {
  background: rgba(220, 50, 50, 0.45);
  color: #fff;
}

#btn-close-settings {
  display: block;
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85em;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}

#btn-close-settings:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ── Music toggle — always visible, top-right between Leave and Settings ── */
#btn-music-toggle {
  position: fixed;
  top: 12px;
  right: 100px;
  z-index: 50;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(8, 20, 30, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 180, 255, 0.28);
  color: rgba(160, 220, 255, 0.80);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  user-select: none;
}

#btn-music-toggle:hover {
  background: rgba(0, 80, 120, 0.55);
  color: #fff;
  border-color: rgba(0, 220, 255, 0.6);
  transform: scale(1.06);
}

#btn-music-toggle.muted {
  border-color: rgba(255, 80, 80, 0.35);
  color: rgba(255, 160, 160, 0.7);
}

@media (max-width: 600px) {
  #btn-music-toggle {
    top: 8px;
    right: 90px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

/* ── Leave Game button — always visible, top-right next to gear ── */
#btn-leave-game {
  position: fixed;
  top: 12px;
  right: 56px;
  z-index: 50;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(28, 8, 12, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(220, 80, 80, 0.28);
  color: rgba(255, 180, 180, 0.75);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-family: 'Rajdhani', sans-serif;
}

#btn-leave-game:hover {
  background: rgba(180, 30, 40, 0.55);
  color: #fff;
  border-color: rgba(255, 120, 120, 0.6);
  transform: scale(1.06);
}

@media (max-width: 600px) {
  #btn-leave-game {
    top: 8px;
    right: 52px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  #emoji-ui {
    top: 78px;
    right: 8px;
  }

  #btn-emoji-toggle {
    display: none;
  }

  #emoji-panel {
    width: min(320px, 92vw);
  }

  #emoji-feed {
    top: 96px;
  }

  #btn-settings {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* ── Replay / End-of-game overlay ── */
#replay-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#replay-overlay.open {
  display: flex;
}

#replay-panel {
  background: rgba(8, 10, 24, 0.92);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 16px;
  padding: 26px 28px;
  min-width: 260px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 215, 0, 0.08);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  text-align: center;
}

#replay-panel h2 {
  margin: 0 0 6px;
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #ffd966;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

#replay-winner {
  margin: 0 0 18px;
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.75);
}

#btn-replay-again,
#btn-replay-leave {
  display: block;
  width: 100%;
  padding: 11px;
  margin-top: 8px;
  border-radius: 8px;
  font-size: 0.95em;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

#btn-replay-again {
  background: rgba(0, 180, 255, 0.22);
  border: 1px solid rgba(0, 180, 255, 0.45);
  color: #9be3ff;
}

#btn-replay-again:hover {
  background: rgba(0, 180, 255, 0.42);
  color: #fff;
}

#btn-replay-leave {
  background: rgba(220, 50, 50, 0.22);
  border: 1px solid rgba(220, 50, 50, 0.4);
  color: #ff8f8f;
}

#btn-replay-leave:hover {
  background: rgba(220, 50, 50, 0.45);
  color: #fff;
}

/* ─── Confirm-move bar (HR-6.2 fixed control rail) ─── */
#ft-confirm-bar {
  position: fixed;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 14px;
  background: rgba(8, 16, 30, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #f6f9ff;
}

#ft-confirm-bar[hidden] {
  display: none;
}

#ft-confirm-bar #ft-confirm-label {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
}

#ft-confirm-bar button {
  font: inherit;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: #f6f9ff;
  transition: background 0.15s ease, transform 0.1s ease;
}

#ft-confirm-bar button:hover {
  background: rgba(255, 255, 255, 0.16);
}

#ft-confirm-bar button:active {
  transform: scale(0.96);
}

#ft-confirm-bar #ft-confirm-ok {
  background: linear-gradient(135deg, #1f9d55 0%, #2bb673 100%);
  border-color: rgba(43, 182, 115, 0.85);
  font-weight: 600;
}

#ft-confirm-bar #ft-confirm-ok:hover {
  background: linear-gradient(135deg, #2bb673 0%, #3ed089 100%);
}

#ft-confirm-bar #ft-confirm-cancel {
  background: rgba(220, 80, 80, 0.18);
  border-color: rgba(220, 80, 80, 0.55);
}

#ft-confirm-bar #ft-confirm-cancel:hover {
  background: rgba(220, 80, 80, 0.32);
}

#ft-confirm-bar #ft-confirm-prev,
#ft-confirm-bar #ft-confirm-next {
  font-size: 16px;
  line-height: 1;
  padding: 5px 12px;
  background: rgba(80, 140, 220, 0.18);
  border-color: rgba(120, 170, 230, 0.55);
}

#ft-confirm-bar #ft-confirm-prev:hover,
#ft-confirm-bar #ft-confirm-next:hover {
  background: rgba(120, 170, 230, 0.32);
}

#ft-confirm-bar button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  filter: saturate(0.4);
}

@media (max-width: 640px) {
  #ft-confirm-bar {
    font-size: 12px;
    padding: 5px 10px;
    gap: 6px;
  }

  #ft-confirm-bar #ft-confirm-label {
    max-width: 160px;
  }

  #ft-confirm-bar button {
    padding: 6px 10px;
  }
}

/* ─── Instruction banner — anchored to the bottom footer rail (HR-6.2) ─── */
/* All player-facing info lives in the bottom footer; the header is reserved
   for player identity. This banner sits just above #ft-confirm-bar. */
#ft-instruction-banner {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(8, 18, 36, 0.94) 0%, rgba(12, 32, 60, 0.94) 100%);
  border: 2px solid var(--ft-ib-accent, #00c8ff);
  border-radius: 999px;
  box-shadow:
    0 0 24px var(--ft-ib-accent, #00c8ff),
    0 -6px 22px rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-family: 'Orbitron', 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px var(--ft-ib-accent, #00c8ff);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  animation: ft-ib-pulse 1.6s ease-in-out infinite;
}

#ft-instruction-banner[hidden] {
  display: none;
}

#ft-instruction-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#ft-instruction-banner .ft-ib-icon {
  font-size: 22px;
  display: inline-block;
  animation: ft-ib-bounce 1s ease-in-out infinite;
}

#ft-instruction-banner .ft-ib-text {
  white-space: nowrap;
}

@keyframes ft-ib-pulse {

  0%,
  100% {
    box-shadow: 0 0 24px var(--ft-ib-accent, #00c8ff), 0 8px 28px rgba(0, 0, 0, 0.55);
  }

  50% {
    box-shadow: 0 0 38px var(--ft-ib-accent, #00c8ff), 0 8px 28px rgba(0, 0, 0, 0.55);
  }
}

@keyframes ft-ib-bounce {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

@media (max-width: 640px) {
  #ft-instruction-banner {
    font-size: 13px;
    padding: 8px 16px;
    gap: 8px;
    bottom: 50px;
  }

  #ft-instruction-banner .ft-ib-icon {
    font-size: 16px;
  }
}

/* Card-area disabled state — mirrors #draw-btn:disabled while a play is
   still resolving (peg hops, cutscenes, redraw window). */
#card-area.disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.45;
  filter: saturate(0.5);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

/* Card-area locked state — the deck is non-interactive (a card is already
   face-up for the active player), but the card stays brightly legible for
   every viewer for the entire duration of the turn. No dim, no desaturate. */
#card-area.locked {
  pointer-events: none;
  cursor: default;
  opacity: 1;
  filter: none;
}

/* ════════════════════════════════════════════════════════════════
   PEG CONTROL BAR — non-text gameplay control (HR-6.2 fixed rail)
   5 peg buttons (per-peg nickname) + Confirm. Replaces the
   text-based instruction banner, confirm bar, and move-hints panel.
   Centered between #panel-action (bottom-left) and #panel-cam
   (bottom-right) so neither is covered.
   ════════════════════════════════════════════════════════════════ */

/* Hide legacy text-based controls — peg bar is the canonical input. */
#ft-confirm-bar,
#ft-instruction-banner,
#panel-options {
  display: none !important;
}

#ft-peg-bar {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 220;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(8, 16, 30, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  font-family: 'Inter', system-ui, sans-serif;
  pointer-events: auto;
  max-width: calc(100vw - 360px);
  /* leave room for panel-action + panel-cam */
}

#ft-peg-buttons {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
}

#ft-peg-bar .peg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 30, 50, 0.55);
  color: #f6f9ff;
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

#ft-peg-bar .peg-btn .peg-glyph {
  font-size: 22px;
  line-height: 1;
  color: var(--peg-color, #88a);
  text-shadow: 0 0 8px var(--peg-color, transparent);
}

#ft-peg-bar .peg-btn .peg-nickname {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.85;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active = peg is in play AND has legal moves with the current card. */
#ft-peg-bar .peg-btn.active {
  background: rgba(30, 60, 100, 0.7);
  border-color: var(--peg-color, #6cf);
  box-shadow:
    0 0 12px var(--peg-color, #6cf),
    inset 0 0 8px rgba(255, 255, 255, 0.08);
}

#ft-peg-bar .peg-btn.active:hover {
  transform: translateY(-1px);
  background: rgba(40, 80, 130, 0.8);
}

/* Selected = currently staged peg whose move is previewed on the board. */
#ft-peg-bar .peg-btn.selected {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.35) 0%,
      rgba(255, 165, 0, 0.35) 100%);
  border-color: #ffd54a;
  box-shadow:
    0 0 18px #ffd54a,
    inset 0 0 10px rgba(255, 215, 0, 0.25);
  color: #fffbe6;
}

#ft-peg-bar .peg-btn.selected .peg-glyph {
  text-shadow: 0 0 12px #ffd54a;
}

#ft-peg-bar .peg-btn[disabled],
#ft-peg-bar .peg-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  filter: saturate(0.4);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(20, 20, 30, 0.4);
  box-shadow: none;
}

#ft-peg-bar .peg-confirm-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(43, 182, 115, 0.85);
  background: linear-gradient(135deg, #1f9d55 0%, #2bb673 100%);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-left: 4px;
  transition: transform 0.1s ease, background 0.15s ease,
    box-shadow 0.15s ease, opacity 0.15s ease;
}

#ft-peg-bar .peg-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2bb673 0%, #3ed089 100%);
  box-shadow: 0 0 16px rgba(62, 208, 137, 0.6);
}

#ft-peg-bar .peg-confirm-btn:active:not(:disabled) {
  transform: scale(0.96);
}

#ft-peg-bar .peg-confirm-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: saturate(0.4);
}

#ft-peg-bar .peg-confirm-check {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 760px) {
  #ft-peg-bar {
    /* user_directive_2026-05-19 — on phones the bar becomes a full-width
       docked tab panel pinned to the bottom edge. Holes are too small to
       reliably tap, so buttons stay primary input here. */
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0));
    gap: 6px;
    max-width: none;
    width: 100vw;
    justify-content: space-between;
    box-sizing: border-box;
  }

  #ft-peg-buttons {
    flex: 1 1 auto;
    justify-content: space-around;
  }

  #ft-peg-bar .peg-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 4px;
  }

  #ft-peg-bar .peg-btn .peg-glyph {
    font-size: 18px;
  }

  #ft-peg-bar .peg-btn .peg-nickname {
    font-size: 9px;
    max-width: 56px;
  }

  #ft-peg-bar .peg-confirm-btn {
    padding: 8px 12px;
    flex: 0 0 auto;
  }

  #ft-peg-bar .peg-confirm-label {
    display: none;
  }

  /* Card deck sits 5px directly above the docked button tab on phones. */
  #panel-action {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(72px + env(safe-area-inset-bottom, 0) + 5px);
    width: min(260px, calc(100vw - 24px));
    padding: 8px 10px;
  }
}

@media (min-width: 761px) {

  /* user_directive_2026-05-19 — desktop relies on direct hole/peg clicks.
     The bar is mobile-only; hide it (and its help pill) so the board is
     unobstructed. Players click halos to stage; click again to commit. */
  #ft-peg-bar,
  #ft-peg-help {
    display: none !important;
  }
}

/* Legacy mobile breakpoint (kept for backward compat — overridden above). */
@media (max-width: 760px) and (max-height: 0) {
  #ft-peg-bar {
    /* no-op guard */
  }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE FIT — keep the 3D board visible on phones.
   The footer chrome (peg bar, card panel, cam panel) is restacked
   so it never piles vertically on top of itself. Peg bar gets its
   own row at bottom:0; card panel sits just above it as a thin
   chip strip; cam panel becomes a slim icon row above that. The
   board canvas is full-viewport behind everything, so collapsing
   the chrome reveals more board.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* Peg bar — own row, full-width, slim. Confirm collapses to ✔ only
     (peg-confirm-label already hidden on small screens above). */
  #ft-peg-bar {
    left: 4px;
    right: 4px;
    bottom: 0;
    transform: none;
    width: auto;
    max-width: none;
    padding: 4px 6px;
    gap: 4px;
    border-radius: 14px 14px 0 0;
    justify-content: center;
    z-index: 230;
  }

  #ft-peg-buttons {
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    justify-content: space-between;
  }

  #ft-peg-bar .peg-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 64px;
    padding: 4px 2px;
    border-radius: 10px;
    gap: 0;
  }

  #ft-peg-bar .peg-btn .peg-glyph {
    font-size: 16px;
  }

  #ft-peg-bar .peg-btn .peg-nickname {
    font-size: 9px;
    max-width: 60px;
  }

  #ft-peg-bar .peg-confirm-btn {
    flex: 0 0 auto;
    padding: 6px 10px;
    margin-left: 2px;
    border-radius: 999px;
  }

  #ft-peg-bar .peg-confirm-check {
    font-size: 14px;
  }
}

@media (max-width: 600px) {

  /* Card / draw panel — collapse to a thin chip strip just above the
     peg bar so it doesn't eat board real-estate. Keeps draw + card
     readout reachable without dominating the screen. */
  #panel-action {
    bottom: 56px;
    left: 4px;
    right: auto;
    width: auto;
    max-width: 56vw;
    padding: 3px 6px;
    gap: 4px;
    flex-wrap: nowrap;
    z-index: 90;
    background: rgba(8, 16, 30, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
  }

  #panel-action #card-area {
    transform: scale(0.7);
    transform-origin: left center;
    max-width: 70px;
    padding: 0;
  }

  #panel-action #current-card {
    font-size: 1.3em;
  }

  #panel-action #card-info {
    font-size: 0.7em;
    line-height: 1.1;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #panel-action #draw-btn {
    padding: 6px 10px;
    font-size: 0.8em;
    min-height: 32px;
  }

  /* Camera panel — slim icon-pill row above the card panel, never
     covered by peg bar or card chip. */
  #panel-cam {
    left: auto;
    right: 4px;
    bottom: 56px;
    top: auto;
    padding: 2px 4px;
    gap: 2px;
    background: rgba(8, 16, 30, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    display: flex;
    flex-direction: row;
    z-index: 95;
  }

  #panel-cam .cam-btn {
    font-size: 0.7em;
    padding: 4px 7px;
    min-width: 0;
  }

  /* Game log out of the way — peg bar already owns the bottom strip. */
  #panel-log {
    right: 6px;
    bottom: 100px;
    width: 130px;
    max-height: 20px;
  }

  #panel-log.expanded {
    max-height: 180px;
  }

  /* Footer band must clear the peg bar so it doesn't visually compete. */
  #ft-footer-bg {
    height: 50px;
  }
}

@media (max-width: 420px) {

  /* Very narrow phones — squeeze the peg row further. */
  #ft-peg-bar .peg-btn {
    max-width: 52px;
  }

  #ft-peg-bar .peg-btn .peg-nickname {
    font-size: 8px;
    max-width: 48px;
  }

  #panel-action {
    max-width: 50vw;
  }

  #panel-action #card-area {
    transform: scale(0.6);
    max-width: 56px;
  }

  #panel-action #card-info {
    max-width: 70px;
    font-size: 0.65em;
  }
}

/* ════════════════════════════════════════════════════════════════
   PLAYER STRIP — only show humans + the currently active player.
   Bots are hidden unless it's their turn, so the top-left strip
   doesn't pile up with 5 bot rows. Applies on all viewports.
   ════════════════════════════════════════════════════════════════ */
#player-list .player-row.is-bot:not(.active) {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   TURN LIGHT (user_directive_2026-05-18)
   Every player row carries a small round indicator on the far left.
   ON  — bright amber, pulsing — when it is that player's turn.
   OFF — dim grey, low opacity — for everyone else (including bots).
   Non-active human rows are also globally dimmed so the active row
   pops as the obvious focal point.
   ════════════════════════════════════════════════════════════════ */
#player-list .player-row .turn-light {
  flex: 0 0 auto;
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(180, 190, 210, 0.18);
  border: 1px solid rgba(180, 190, 210, 0.35);
  box-shadow: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  opacity: 0.55;
}

#player-list .player-row.active .turn-light {
  background: #ffd633;
  border-color: #fff2a8;
  box-shadow:
    0 0 6px rgba(255, 214, 51, 0.95),
    0 0 14px rgba(255, 214, 51, 0.55),
    inset 0 0 4px rgba(255, 255, 255, 0.7);
  opacity: 1;
  animation: turnLightPulse 1.15s ease-in-out infinite;
}

/* user_directive_2026-05-18: bright YELLOW only when it is a HUMAN's turn.
   A bot's active row keeps a subdued blue tint so players can see "bot is
   playing" without the dramatic yellow glow that signals "your move". */
#player-list .player-row.is-bot.active .turn-light {
  background: rgba(120, 170, 230, 0.55);
  border-color: rgba(170, 210, 255, 0.7);
  box-shadow: 0 0 4px rgba(120, 170, 230, 0.55);
  opacity: 0.85;
  animation: none;
}

@keyframes turnLightPulse {

  0%,
  100% {
    box-shadow:
      0 0 5px rgba(255, 214, 51, 0.7),
      0 0 10px rgba(255, 214, 51, 0.4),
      inset 0 0 3px rgba(255, 255, 255, 0.6);
  }

  50% {
    box-shadow:
      0 0 9px rgba(255, 214, 51, 1),
      0 0 18px rgba(255, 214, 51, 0.75),
      inset 0 0 5px rgba(255, 255, 255, 0.85);
  }
}

/* Dim the non-active human rows so the active glow stands out. */
#player-list .player-row.is-human:not(.active) {
  opacity: 0.55;
  filter: saturate(0.7);
}

#player-list .player-row.is-human:not(.active):hover {
  opacity: 0.85;
}


/* ════════════════════════════════════════════════════════════════
   FOOTER TAB-PANEL UNIFICATION
   Camera state buttons + draw card adopt the same pill/tab look as
   the peg buttons. Log panel is removed entirely.
   ════════════════════════════════════════════════════════════════ */

/* Kill log panel everywhere. */
#panel-log {
  display: none !important;
}

/* ── Camera state buttons → peg-style pills ── */
#panel-cam {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

#panel-cam .cam-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 30, 50, 0.55);
  color: #f6f9ff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}

#panel-cam .cam-btn:hover {
  transform: translateY(-1px);
  background: rgba(40, 80, 130, 0.8);
}

#panel-cam .cam-btn.active {
  background: rgba(30, 60, 100, 0.7);
  border-color: #6cf;
  box-shadow: 0 0 12px #6cf, inset 0 0 8px rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
}

/* ── Draw-card panel → peg-style pill ── */
#panel-action {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

#panel-action #card-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 30, 50, 0.55);
  color: #f6f9ff;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 0;
  min-width: 0;
  width: auto;
  height: auto;
}

#panel-action #card-area:hover {
  transform: translateY(-1px);
  background: rgba(40, 80, 130, 0.8);
}

#panel-action #card-label {
  display: none;
}

#panel-action #current-card {
  width: 22px;
  height: 30px;
  margin: 0;
  flex: 0 0 auto;
}

#panel-action #current-card .card-back,
#panel-action #current-card .card-face {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

#panel-action #card-info {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-action #draw-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(43, 182, 115, 0.85);
  background: linear-gradient(135deg, #1f9d55 0%, #2bb673 100%);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

#panel-action #draw-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(43, 182, 115, 0.65);
}

#panel-action #draw-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: saturate(0.4);
}

/* ════════════════════════════════════════════════════════════════
   HAMBURGER MENU (mobile only)
   On small screens the individual top-right buttons (music, gear,
   leave, emoji) collapse into a single ☰ button. Tapping it slides
   open a vertical menu of the same actions. Every panel keeps a
   reserved spot: nothing covers anything else.
   ════════════════════════════════════════════════════════════════ */

#btn-hamburger {
  display: none;
  /* desktop: hidden, individual icons visible */
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 260;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 30, 50, 0.78);
  color: #f6f9ff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

#btn-hamburger:hover {
  background: rgba(40, 80, 130, 0.85);
}

#hamburger-menu {
  display: none;
  position: fixed;
  top: 56px;
  right: 10px;
  z-index: 259;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  min-width: 160px;
  background: rgba(10, 20, 35, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

#hamburger-menu.open {
  display: flex;
}

#hamburger-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(20, 30, 50, 0.6);
  color: #f6f9ff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

#hamburger-menu button:hover {
  background: rgba(40, 80, 130, 0.8);
}

#hamburger-menu button.hm-danger {
  border-color: rgba(220, 80, 80, 0.6);
  color: #ffd6d6;
}

#hamburger-menu button.hm-danger:hover {
  background: rgba(130, 30, 30, 0.7);
}

#hamburger-menu .hm-icon {
  font-size: 18px;
  min-width: 22px;
  text-align: center;
}

#hamburger-menu .hm-label {
  flex: 1 1 auto;
}

@media (max-width: 760px) {

  /* Show the hamburger; hide the individual top-right icons + emoji UI. */
  #btn-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #btn-music-toggle,
  #btn-leave-game,
  #btn-settings,
  #emoji-ui {
    display: none !important;
  }

  /* Keep the top-left player strip from colliding with the hamburger. */
  #panel-players {
    max-width: calc(100vw - 64px);
    /* leave room for ☰ */
  }
}

/* ════════════════════════════════════════════════════════════════
   Camera controls inside hamburger (mobile)
   ════════════════════════════════════════════════════════════════ */
#hamburger-menu .hm-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: 4px 6px 2px;
}

#hamburger-menu .hm-cam-row {
  display: flex;
  gap: 4px;
  padding: 2px;
}

#hamburger-menu .hm-cam-btn {
  flex: 1 1 0;
  padding: 8px 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(20, 30, 50, 0.6);
  color: #f6f9ff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

#hamburger-menu .hm-cam-btn.active {
  background: rgba(30, 60, 100, 0.85);
  border-color: #6cf;
  box-shadow: 0 0 10px #6cf, inset 0 0 6px rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
}

#hamburger-menu .hm-divider {
  height: 1px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 760px) {

  /* Hide the on-board cam pill — camera lives in hamburger now. */
  #panel-cam {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Card panel — larger so the drawn card is easy to read.
   ════════════════════════════════════════════════════════════════ */
#panel-action {
  padding: 6px 8px;
  gap: 8px;
}

#panel-action #card-area {
  padding: 8px 12px;
  gap: 10px;
}

#panel-action #current-card {
  width: 44px;
  height: 60px;
}

#panel-action #card-info {
  font-size: 16px;
  max-width: 220px;
}

#panel-action #draw-btn {
  padding: 12px 20px;
  font-size: 15px;
}

@media (max-width: 760px) {
  #panel-action #current-card {
    width: 38px;
    height: 52px;
  }

  #panel-action #card-info {
    font-size: 14px;
    max-width: 160px;
  }

  #panel-action #draw-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  #panel-action #current-card {
    width: 32px;
    height: 44px;
  }

  #panel-action #card-info {
    font-size: 12px;
    max-width: 110px;
  }

  #panel-action #draw-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   CARD = DECK = BUTTON. No separate Draw button.
   The card display itself is the click target. We grow it large
   enough that it's unmistakably a deck of cards.
   ════════════════════════════════════════════════════════════════ */

/* Drop the redundant Draw button + the in-panel Break button — Break
   lives in the hamburger menu now. */
#panel-action #draw-btn {
  display: none !important;
}

#panel-action #btn-break {
  display: none !important;
}

/* Pass-turn safety button (user_directive_2026-05-19) — always visible inside
   the action panel so a stuck player can manually end their turn. */
#panel-action #btn-pass-turn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #fff8d8;
  background: linear-gradient(180deg, rgba(140, 60, 80, 0.85), rgba(80, 24, 40, 0.92));
  border: 1.5px solid rgba(255, 154, 122, 0.85);
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 10px rgba(255, 120, 90, 0.25);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

#panel-action #btn-pass-turn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(170, 75, 95, 0.92), rgba(95, 30, 50, 0.95));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 140, 105, 0.45);
}

#panel-action #btn-pass-turn:active {
  transform: translateY(0);
}

@media (max-width: 760px) {
  #panel-action #btn-pass-turn {
    margin-left: 6px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Make the card big and deck-like. Layered shadow gives a "stack" cue. */
#panel-action #current-card {
  width: 72px;
  height: 100px;
  position: relative;
  box-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.18),
    4px 4px 0 rgba(255, 255, 255, 0.12),
    6px 6px 0 rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

#panel-action #current-card .card-back,
#panel-action #current-card .card-face {
  border-radius: 8px;
}

#panel-action #card-area {
  padding: 8px 14px;
}

#panel-action #card-info {
  font-size: 18px;
  max-width: 260px;
}

/* Hover/active feedback on the card itself — reinforces clickability. */
#panel-action #card-area:not(.disabled):not(.locked):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 18px rgba(108, 204, 255, 0.6);
  border-color: #6cf;
}

#panel-action #card-area.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#panel-action #card-area.locked {
  cursor: default;
}

@media (max-width: 760px) {
  #panel-action #current-card {
    width: 60px;
    height: 84px;
  }

  #panel-action #card-info {
    font-size: 15px;
    max-width: 180px;
  }
}

@media (max-width: 420px) {
  #panel-action #current-card {
    width: 50px;
    height: 70px;
  }

  #panel-action #card-info {
    font-size: 13px;
    max-width: 120px;
  }
}

/* ════════════════════════════════════════════════════════════════
   Card panel: invisible chrome, slightly larger deck.
   Only the card stack + its info text are visible — no pill,
   no border, no glass background.
   ════════════════════════════════════════════════════════════════ */
#panel-action {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 10px;
}

#panel-action #card-area {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#panel-action #card-area:not(.disabled):not(.locked):hover {
  background: transparent !important;
  border: none !important;
  /* Keep the lift + glow on the card itself so it still feels clickable. */
}

/* Bump deck size a touch. */
#panel-action #current-card {
  width: 88px;
  height: 122px;
}

@media (max-width: 760px) {
  #panel-action #current-card {
    width: 72px;
    height: 100px;
  }
}

@media (max-width: 420px) {
  #panel-action #current-card {
    width: 60px;
    height: 84px;
  }
}

/* Drop a soft text-shadow on card-info so it stays legible without a panel. */
#panel-action #card-info {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* ════════════════════════════════════════════════════════════════
   DRAWN CARD FACE — solid white, big rank + suit, readable on phones.
   The face is rendered by _drawCardCommit() as:
     <div class="card-face red|black" data-suit="…">
       <span class="cf-rank">5</span><span class="cf-suit">♠</span>
     </div>
   The back-of-deck (#current-card .card-back) is unaffected.
   ════════════════════════════════════════════════════════════════ */
#current-card .card-face {
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #111;
  border: 1.5px solid #c8a84e;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(255, 255, 255, 0.95);
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  font-weight: 800;
  text-shadow: none;
  /* Override the parent #current-card's text-shadow/filter. */
  filter: none;
}

#current-card .card-face.red {
  color: #c41e3a;
}

#current-card .card-face.black {
  color: #111;
}

#current-card .card-face .cf-rank {
  font-size: 38px;
  letter-spacing: -0.02em;
}

#current-card .card-face .cf-suit {
  font-size: 30px;
  margin-top: -4px;
}

/* Mobile: scale rank/suit to fit the smaller deck. */
@media (max-width: 760px) {
  #current-card .card-face .cf-rank {
    font-size: 32px;
  }

  #current-card .card-face .cf-suit {
    font-size: 26px;
  }
}

@media (max-width: 420px) {
  #current-card .card-face .cf-rank {
    font-size: 26px;
  }

  #current-card .card-face .cf-suit {
    font-size: 22px;
  }
}

/* Kill the outer text-shadow/filter when face-up so the white face stays
   crisp (those styles were designed for the older textContent rendering). */
#current-card:has(.card-face) {
  text-shadow: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

/* Active-player chip already says whose turn it is in the player row;
   the top-of-panel status line is redundant. */
#panel-players #game-status {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   FULL-WIDTH FOOTER RAIL  (revised)
   The bar holds ONLY the 5 peg buttons, spanning the entire bottom.
   Card-deck floats ABOVE the bar at the left; Confirm floats ABOVE
   the bar at the right.  Nicknames sit beneath each peg glyph.
   All actionable buttons get a gold outline for visibility.
   ════════════════════════════════════════════════════════════════ */
#ft-peg-bar {
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  transform: none !important;
  max-width: none !important;
  width: auto !important;
  padding: 4px 14px !important;
  border-radius: 18px !important;
  gap: 10px !important;
  overflow: visible !important;
  /* allow confirm to float above */
}

#ft-peg-buttons {
  flex: 1 1 auto !important;
  display: flex !important;
  width: 100%;
  gap: 8px !important;
}

#ft-peg-bar .peg-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 3px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 2px solid #d4af37 !important;
  border-radius: 10px !important;
  /* gold outline */
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .25), 0 2px 8px rgba(0, 0, 0, .45) !important;
}

#ft-peg-bar .peg-btn .peg-glyph {
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
}

#ft-peg-bar .peg-btn .peg-nickname {
  font-size: 10px !important;
  line-height: 1 !important;
  max-width: none !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
  text-align: center;
  opacity: .95;
}

/* Confirm — same size/shape as peg buttons.
   Disabled: neutral. Enabled ("active"): solid gold w/ dark text. */
#ft-peg-bar .peg-confirm-btn {
  position: absolute !important;
  right: 4px !important;
  bottom: 0 !important;
  top: auto !important;
  margin: 0 !important;
  /* Match peg-btn geometry */
  width: auto !important;
  min-width: 72px !important;
  padding: 3px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 2px solid #d4af37 !important;
  border-radius: 10px !important;
  background: rgba(20, 30, 50, 0.55) !important;
  background-image: none !important;
  color: #f6f9ff !important;
  font: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-shadow: none !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .25), 0 4px 14px rgba(0, 0, 0, .45) !important;
  z-index: 230;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

#ft-peg-bar .peg-confirm-btn .peg-confirm-check {
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
}

#ft-peg-bar .peg-confirm-btn .peg-confirm-label {
  font-size: 10px !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center;
  width: 100%;
  opacity: .95;
}

/* Confirm ENABLED = staged-and-ready. Solid gold w/ near-black text. */
#ft-peg-bar .peg-confirm-btn:not(:disabled) {
  background: #d4af37 !important;
  background-image: linear-gradient(180deg, #f0cc55 0%, #d4af37 55%, #a8862a 100%) !important;
  color: #1a1306 !important;
  border-color: #fff3a8 !important;
  box-shadow: 0 0 0 1px rgba(255, 230, 130, .45), 0 0 14px rgba(212, 175, 55, .65), 0 4px 14px rgba(0, 0, 0, .55) !important;
}

#ft-peg-bar .peg-confirm-btn:not(:disabled) .peg-confirm-check,
#ft-peg-bar .peg-confirm-btn:not(:disabled) .peg-confirm-label {
  color: #1a1306 !important;
  text-shadow: 0 1px 0 rgba(255, 240, 180, .55) !important;
}

#ft-peg-bar .peg-confirm-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background-image: linear-gradient(180deg, #ffe27a 0%, #e6c24a 55%, #b8932f 100%) !important;
}

#ft-peg-bar .peg-confirm-btn:disabled {
  background: rgba(20, 20, 30, 0.4) !important;
  background-image: none !important;
  color: rgba(246, 249, 255, .35) !important;
  border-color: rgba(212, 175, 55, .35) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Card deck — pinned to the UPPER-LEFT, just under the player
   header strip. The bottom row is now exclusively for peg buttons. */
#panel-action {
  position: fixed !important;
  top: 56px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 230 !important;
  width: auto !important;
  max-width: 100px !important;
  padding: 4px 6px !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#panel-action #card-area {
  padding: 2px 4px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 8px !important;
}

#panel-action #card-label {
  display: none !important;
}

#panel-action #card-info {
  display: none !important;
}

#panel-action #current-card {
  font-size: 1em !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#panel-action #current-card .card-back {
  width: 34px !important;
  height: 48px !important;
  border-width: 2px !important;
}

#panel-action #current-card .card-face {
  min-width: 38px !important;
  min-height: 48px !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
}

#panel-action #current-card .card-face .cf-rank {
  font-size: 20px !important;
}

#panel-action #current-card .card-face .cf-suit {
  font-size: 16px !important;
}

#current-card {
  outline: 2px solid #d4af37 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .2), 0 4px 12px rgba(0, 0, 0, .55) !important;
}

@media (max-width: 760px) {
  #ft-peg-bar {
    padding: 0 88px 0 8px !important;
    gap: 6px !important;
  }

  #ft-peg-bar .peg-btn {
    padding: 2px 4px !important;
  }

  #ft-peg-bar .peg-btn .peg-glyph {
    font-size: 17px !important;
  }

  #ft-peg-bar .peg-btn .peg-nickname {
    font-size: 9px !important;
  }

  #ft-peg-bar .peg-confirm-btn {
    padding: 2px 6px !important;
    min-width: 64px !important;
  }

  #panel-action {
    max-width: 88px !important;
  }
}

@media (max-width: 420px) {
  #ft-peg-bar {
    gap: 4px !important;
    padding: 0 70px 0 6px !important;
  }

  #ft-peg-bar .peg-btn {
    padding: 2px 2px !important;
  }

  #ft-peg-bar .peg-btn .peg-glyph {
    font-size: 15px !important;
  }

  #ft-peg-bar .peg-btn .peg-nickname {
    font-size: 8px !important;
  }

  #ft-peg-bar .peg-confirm-btn {
    padding: 2px 4px !important;
    min-width: 56px !important;
  }

  #panel-action {
    max-width: 72px !important;
  }

  #panel-action #current-card .card-back {
    width: 28px !important;
    height: 40px !important;
  }

  #panel-action #current-card .card-face {
    min-width: 32px !important;
    min-height: 40px !important;
  }

  #panel-action #current-card .card-face .cf-rank {
    font-size: 16px !important;
  }

  #panel-action #current-card .card-face .cf-suit {
    font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   TOASTS — larger and easier to read.
   ════════════════════════════════════════════════════════════════ */
.emoji-toast {
  font-size: 18px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#emoji-feed {
  max-width: min(420px, 92vw) !important;
  gap: 10px !important;
}

/* ════════════════════════════════════════════════════════════════
   STRIP PEG-BAR PANEL CHROME — KEEP BOARD UNCOVERED
   The peg-bar must be invisible (no background/border/shadow) and
   no taller than its buttons. Padding-left reserves the card-deck
   slot, padding-right reserves the confirm-button slot, so the
   peg buttons never overlap either floating control.
   ════════════════════════════════════════════════════════════════ */
#ft-peg-bar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 120px 0 12px !important;
  /* right=confirm slot; card moved to top-right so no left reservation needed */
  pointer-events: none !important;
}

#ft-peg-bar>* {
  pointer-events: auto;
}

@media (max-width: 760px) {
  #ft-peg-bar {
    padding: 0 96px 0 8px !important;
  }
}

@media (max-width: 420px) {
  #ft-peg-bar {
    padding: 0 78px 0 6px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CAMERA TOGGLE — round icon top-right, matches music/leave/gear.
   Replaces the on-board #panel-cam (Manual/Top/Angle/Auto) which
   covered the play field.
   ════════════════════════════════════════════════════════════════ */
#btn-camera-toggle {
  position: fixed;
  top: 12px;
  right: 144px;
  z-index: 50;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(8, 20, 30, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 180, 255, 0.28);
  color: rgba(160, 220, 255, 0.80);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  user-select: none;
}

#btn-camera-toggle:hover {
  background: rgba(0, 80, 120, 0.55);
  color: #fff;
  border-color: rgba(0, 220, 255, 0.6);
  transform: scale(1.06);
}

#camera-panel {
  position: fixed;
  top: 56px;
  right: 144px;
  z-index: 60;
  background: rgba(8, 10, 24, 0.94);
  border: 1px solid rgba(80, 220, 255, 0.28);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  gap: 6px;
  min-width: 120px;
}

#camera-panel.open {
  display: flex;
}

#camera-panel .cam-pop-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e6f4ff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#camera-panel .cam-pop-btn:hover {
  background: rgba(0, 180, 255, 0.18);
  border-color: rgba(80, 220, 255, 0.5);
}

#camera-panel .cam-pop-btn.active {
  background: rgba(0, 200, 255, 0.28);
  border-color: rgba(120, 235, 255, 0.7);
  color: #fff;
  font-weight: 600;
}

/* On mobile the round icons collapse into the hamburger — keep this
   icon and its popup hidden there too. */
@media (max-width: 760px) {

  #btn-camera-toggle,
  #camera-panel {
    display: none !important;
  }
}

/* The old on-board camera panel must NEVER cover the board. */
#panel-cam {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   PEG-BUTTON ACTIVATION COLORS
   Active = the peg's own color fills the background; the dot and
   nickname switch to a complementary near-white with a dark halo
   so they stay legible against any peg hue.
   ════════════════════════════════════════════════════════════════ */
#ft-peg-bar .peg-btn.active {
  background: var(--peg-color, #6cf) !important;
  border-color: #fff3a8 !important;
  box-shadow:
    0 0 0 1px rgba(255, 230, 130, .4),
    0 0 14px var(--peg-color, #6cf),
    inset 0 0 8px rgba(0, 0, 0, .25) !important;
  color: #ffffff !important;
}

#ft-peg-bar .peg-btn.active .peg-glyph {
  color: #ffffff !important;
  text-shadow:
    0 0 4px rgba(0, 0, 0, .55),
    0 1px 2px rgba(0, 0, 0, .7) !important;
}

#ft-peg-bar .peg-btn.active .peg-nickname {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65) !important;
  opacity: 1 !important;
}

/* Selected (staged) stays gold-tinted to distinguish from merely-active. */
#ft-peg-bar .peg-btn.selected {
  background: linear-gradient(135deg, #f0cc55 0%, #d4af37 100%) !important;
  border-color: #fff3a8 !important;
  color: #1a1306 !important;
  box-shadow:
    0 0 0 1px rgba(255, 230, 130, .55),
    0 0 18px #d4af37,
    inset 0 0 8px rgba(255, 240, 180, .25) !important;
}

#ft-peg-bar .peg-btn.selected .peg-glyph,
#ft-peg-bar .peg-btn.selected .peg-nickname {
  color: #1a1306 !important;
  text-shadow: 0 1px 0 rgba(255, 240, 180, .55) !important;
}

/* ════════════════════════════════════════════════════════════════
   HR-6.2: Footer black band REMOVED.
   The #ft-footer-bg strip was covering the bottom of the play
   field. The peg buttons and confirm sit directly on the viewport;
   no decorative band is needed.
   ════════════════════════════════════════════════════════════════ */
#ft-footer-bg {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   HARD RULE (HR-6.2) ENFORCEMENT — KILL ALL LEFTOVER BOTTOM PANELS
   The only bottom-of-viewport UI is #ft-peg-bar. Every other
   floating panel (debug metrics, log pill, hint pill, old confirm
   bar, dev hud) is hidden so nothing can cover the play field.
   ════════════════════════════════════════════════════════════════ */
#panel-options,
#panel-metrics,
#panel-log,
#ft-confirm-bar,
#ft-instruction-banner,
#ft-footer-bg,
#fasttrack-hud,
#fasttrack-3d-hud,
#fasttrack-xcode-hud {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   PEG BUTTONS — opaque filled tiles with gold outline.
   ════════════════════════════════════════════════════════════════ */
#ft-peg-bar .peg-btn {
  background: #0e1422 !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .25), 0 2px 8px rgba(0, 0, 0, .55) !important;
}

#ft-peg-bar .peg-btn:hover:not(:disabled):not(.active):not(.selected) {
  background: #182336 !important;
}

#ft-peg-bar .peg-confirm-btn:disabled {
  background: #0e1422 !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .25), 0 2px 8px rgba(0, 0, 0, .55) !important;
}

/* Footer band stays fully hidden — buttons float directly on the
   board, no rail, no border, no void. */
#ft-footer-bg {
  display: none !important;
}

/* Disabled peg buttons stay tinted with the owner's peg color so the
   player can still read the roster — they're just dimmed to communicate
   "no legal move with this peg right now". (user_directive_2026-05-18) */
#ft-peg-bar .peg-btn[disabled],
#ft-peg-bar .peg-btn:disabled {
  opacity: 0.7 !important;
  filter: brightness(0.65) saturate(0.85) !important;
  /* DO NOT force background here — inline style from JS carries the
     per-peg color and must survive the disabled state. */
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .18), 0 2px 8px rgba(0, 0, 0, .55) !important;
}

/* Confirm button visible in disabled state too. */
#ft-peg-bar .peg-confirm-btn:disabled {
  opacity: 0.85 !important;
  filter: none !important;
  background: #0e1422 !important;
  color: #f6f9ff !important;
  border-color: rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .2), 0 2px 8px rgba(0, 0, 0, .55) !important;
}

/* ════════════════════════════════════════════════════════════════
   PEG NICKNAMES — float as little toasts ABOVE each button so the
   button itself shows only the dot. Toast matches peg color.
   ════════════════════════════════════════════════════════════════ */
#ft-peg-bar .peg-btn {
  position: relative !important;
  overflow: visible !important;
}

#ft-peg-bar .peg-btn .peg-nickname {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 4px) !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100% + 16px) !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  background: rgba(8, 12, 24, 0.85) !important;
  color: #f6f9ff !important;
  border: 1px solid var(--peg-color, rgba(212, 175, 55, 0.55)) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 2;
}

/* Centre the dot now that the label is outside. */
#ft-peg-bar .peg-btn .peg-glyph {
  font-size: 22px !important;
}

/* ════════════════════════════════════════════════════════════════
   CARD PANEL (user_directive_2026-05-18)
   HARD RULE: buttons/forms must never cover other buttons or forms.
   The player panel lives top-left and grows downward with each
   added player row, so the card panel was anchored at top:140
   and overlapped it. Relocate the card to the TOP-RIGHT corner,
   tucked under the icon strip (music/leave/gear/cam at top:12,
   ~36px tall), so it can never overlap the player panel.

   Also: only the word "DRAW" appears, painted ON the card itself
   via ::after. The legacy #card-info text label and #draw-btn
   button are hidden — clicking the card itself draws.
   ════════════════════════════════════════════════════════════════ */
#panel-action {
  position: fixed !important;
  top: 56px !important;
  /* clears 36px icon row + 8px gap */
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 230 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  display: block !important;
  /* don't lay out hidden children */
}

/* Hide the standalone label/button — card itself is the draw control. */
#panel-action #card-label,
#panel-action #card-info,
#panel-action #draw-btn {
  display: none !important;
}

#panel-action #card-area {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  display: block !important;
  width: 60px !important;
  height: 84px !important;
}

#panel-action #current-card {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  width: 60px !important;
  height: 84px !important;
  display: block !important;
}

#panel-action #current-card .card-back,
#panel-action #current-card .card-face {
  width: 60px !important;
  height: 84px !important;
  min-width: 60px !important;
  min-height: 84px !important;
  max-width: 60px !important;
  max-height: 84px !important;
  padding: 4px 4px !important;
  border-width: 2px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

#panel-action #current-card .card-face .cf-rank {
  font-size: 22px !important;
  line-height: 1 !important;
}

#panel-action #current-card .card-face .cf-suit {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* "DRAW" label PAINTED ON the card back (only while the card back
   is showing, i.e. before a card is drawn this turn). Centered. */
#panel-action #card-area {
  position: relative !important;
}

#panel-action #current-card:has(.card-back)::after {
  content: "DRAW";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #fff8d8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 6px rgba(255, 214, 51, 0.55);
  pointer-events: none;
  text-transform: uppercase;
}

/* ────────────────────────────────────────────────────────────────
   TEXT-FREE GAMEPLAY MODE (user_directive_2026-05-18)
   The peg-button bar + Confirm button is now the SOLE gameplay
   input. The legacy text-based move-cycle bar and "Tap a glowing…"
   instruction banner are kept in the DOM only as engine state
   proxies — they must never render. !important overrides any
   inline display:flex applied by _refreshConfirmBar.
   ──────────────────────────────────────────────────────────────── */
#ft-confirm-bar,
#ft-instruction-banner,
#ft-hover-tip {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════
   PEG-BAR HELP TIP — small dismissible pill floating ABOVE the peg
   bar (and above the floating nickname toasts) so it never covers
   the buttons or their labels. Auto-hides once the user dismisses
   it (localStorage). Auto-hides during bot turns via [hidden].
   Anchored bottom-centre; max-width keeps it from overlapping the
   left/right edge controls.
   ════════════════════════════════════════════════════════════════ */
#ft-peg-help {
  position: fixed;
  left: 50%;
  bottom: 88px;
  /* clears peg bar (~46px) + nickname pill (~24px) + 8px gap */
  transform: translateX(-50%);
  z-index: 45;
  /* above board, below modal overlays */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 7px 10px 7px 14px;
  background: rgba(10, 16, 30, 0.92);
  color: #f6f9ff;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.18);
  font-size: 12.5px;
  line-height: 1.25;
  pointer-events: auto;
  animation: ft-peg-help-pulse 2.4s ease-in-out infinite;
}

#ft-peg-help[hidden] {
  display: none !important;
}

#ft-peg-help .ft-peg-help-text {
  white-space: normal;
  text-align: center;
}

#ft-peg-help .ft-peg-help-text b {
  color: #ffd86b;
  font-weight: 700;
}

#ft-peg-help-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #f6f9ff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#ft-peg-help-close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
}

@keyframes ft-peg-help-pulse {

  0%,
  100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.18);
  }

  50% {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(212, 175, 55, 0.45);
  }
}

/* On narrow screens the peg bar grows a row taller — lift the tip. */
@media (max-width: 540px) {
  #ft-peg-help {
    bottom: 104px;
    font-size: 11.5px;
    padding: 6px 8px 6px 12px;
  }
}