/* Small bits that are easier as plain CSS than as Tailwind utility soup. */

html, body {
  height: 100%;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body {
  background:
    radial-gradient(1200px 700px at 50% 35%, #14532d 0%, #0b2a18 55%, #07180e 100%);
}

input, button { font-family: inherit; }
input { user-select: text; -webkit-user-select: text; }

/* Touch: no double-tap zoom, no long-press callouts or text selection outside input fields. */
html, body, button, canvas, #app {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
canvas { touch-action: none; -webkit-user-drag: none; }
img { -webkit-user-drag: none; }

.glass {
  background: rgba(8, 20, 14, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.08s ease, filter 0.15s ease, opacity 0.15s ease;
  pointer-events: auto;
  cursor: pointer;
}
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  color: #1c1204;
  box-shadow: 0 4px 0 #b45309, 0 8px 18px rgba(245, 158, 11, 0.35);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-danger {
  background: linear-gradient(180deg, #f87171, #dc2626);
  color: white;
  box-shadow: 0 4px 0 #991b1b;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
}
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }

.field {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.9rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: white;
  outline: none;
  font-size: 1rem; /* 16px avoids iOS zoom-on-focus */
}
.field:focus { border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25); }

/* Floating info / help panels: overlays that never take layout space from the table.
   --hud-top is set by the HUD to the height of the top bar. */
.panels {
  position: absolute;
  z-index: 15;
  left: 0.75rem;
  right: 0.75rem;
  top: calc(var(--hud-top, 100px) + 0.25rem);
  bottom: calc(var(--hud-bottom, 90px) + 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .panels { left: auto; width: 19rem; }
}
/* when both are open the player list / log keeps most of the room */
#panel-help { flex: 0 1 auto; max-height: 45%; }
#panel-info { flex: 1 1 auto; min-height: 9rem; }

.safe-bottom { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
.safe-top { padding-top: max(0.5rem, env(safe-area-inset-top)); }

/* Player labels and badges floating over the 3D scene */
.plabel, .badge {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  background: rgba(8, 20, 14, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2rem;
  white-space: nowrap;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.badge { font-size: 0.72rem; color: #cbd5e1; padding: 0.1rem 0.6rem; }
.badge.need { color: #fde68a; border-color: rgba(251, 191, 36, 0.45); font-weight: 600; }
.chip {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(8, 20, 14, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  pointer-events: auto;
  cursor: pointer;
}
.chip-on { background: #fbbf24; border-color: #fbbf24; color: #1c1204; font-weight: 600; }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }

.stackchip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #fbbf24;
  color: #1c1204;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.05rem;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.pdot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  vertical-align: 0.05rem;
}
.pcount {
  margin-left: 0.15rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 700;
}

/* soft shade behind the hand tray so cards stand out from the table edge */
.tray-shade {
  height: 46%;
  max-height: 22rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.plabel.compact { font-size: 0.66rem; padding: 0.05rem 0.4rem; max-width: 6rem; line-height: 1.05rem; }
.plabel.compact .pcount { padding: 0 0.25rem; }
.plabel.turn {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35), 0 0 18px rgba(251, 191, 36, 0.55);
  color: #fde68a;
}
.plabel.out { opacity: 0.55; }
.plabel.offline { border-color: #f87171; }

@keyframes pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop-in { animation: pop-in 0.22s ease-out both; }

@keyframes float-up {
  0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  15% { transform: translate(-50%, -10px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}
.float-text {
  position: absolute;
  font-weight: 700;
  font-size: 1.4rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  animation: float-up 1.4s ease-out forwards;
  pointer-events: none;
}

@keyframes shimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.shimmer { animation: shimmer 1.6s ease-in-out infinite; }

/* scrollbars in side panel */
.thin-scroll::-webkit-scrollbar { width: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }