/* 
  Fishdle - High-End Branding CSS 
  Fonts: Outfit (Headers), Manrope (UI), Space Mono (Meta/Labels)
*/

:root {
  --accent: #38bdf8;
  --glass: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.1);
  --success: #10b981;
  --warning: #fbbf24;
  --danger: #ef4444;
}

#fish-info-overlay {
  pointer-events: none;
  transition: all 0.5s ease;
}

#btn-duel-join-lobby {
  width: 54px !important;
  height: 54px !important;
}

@media (max-width: 768px) {
  #fish-info-overlay {
    background: none !important;
    padding: 0 !important;
    border: none !important;
  }
}

@layer base {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
}

html,
body {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ─────────────────────────────────── */
.font-display {
  font-family: 'Outfit', sans-serif;
}

.font-mono {
  font-family: 'Space Mono', monospace;
}

/* ── UI Components ───────────────────────────────── */
.btn-pill-white {
  background: #fff;
  color: #000;
  border-radius: 999px;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-pill-white:active {
  transform: scale(0.96);
}

.btn-pill-glass {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: all 0.25s ease;
}

.btn-pill-glass:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Slider Specifics (Image 2 Style) ────────────── */
.noUi-target {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 99px !important;
  height: 6px !important;
}

.noUi-connects {
  border-radius: 4px;
  overflow: visible !important;
}

.noUi-connect {
  background: #fff !important;
}

/* Visible Handle matching requested Thumb style */
.noUi-horizontal .noUi-handle {
  width: 20px !important;
  height: 20px !important;
  right: -10px !important;
  /* half of handle width */
  top: -7px !important;
  /* -(handle_h/2 - rail_h/2) = -(10 - 3) = -7 */
  border-radius: 50% !important;
  background: #fff !important;
  border: none !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1) !important;
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s;
}

.noUi-handle:hover {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15) !important;
}

.noUi-handle:active {
  transform: scale(1.1);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

.noUi-handle::before,
.noUi-handle::after {
  display: none !important;
}

/* Tooltip Bubble Style: Large Grey Glass Circle with Black Border */
.noUi-tooltip {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(60, 60, 60, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: #fff !important;
  border: 2px solid #7c7a79 !important;
  /* Black contour as requested */
  border-radius: 50% !important;
  width: 85px !important;
  height: 85px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 950 !important;
  /* Even bolder to pop over grey */
  font-size: 32px !important;
  text-align: center !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6) !important;
}

.noUi-tooltip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.noUi-handle:active .noUi-tooltip,
.noUi-handle:hover .noUi-tooltip {
  opacity: 1;
  transform: scale(1);
}

.noUi-horizontal .noUi-tooltip {
  bottom: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) scale(0.6) !important;
}

.noUi-horizontal .noUi-tooltip::after {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #7c7a79;
}

.noUi-vertical .noUi-tooltip {
  left: -105px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(0.6);
}

.noUi-vertical .noUi-tooltip::after {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #7c7a79;
}

/* Specific scale for vertical when active */
.noUi-vertical .noUi-handle:active .noUi-tooltip,
.noUi-vertical .noUi-handle:hover .noUi-tooltip {
  transform: translateY(-50%) scale(1);
}

/* Specific scales for active state while maintaining coordinate offsets */
.noUi-horizontal .noUi-handle:active .noUi-tooltip,
.noUi-horizontal .noUi-handle:hover .noUi-tooltip {
  transform: translateX(-50%) scale(1) !important;
}

.noUi-vertical .noUi-handle:active .noUi-tooltip,
.noUi-vertical .noUi-handle:hover .noUi-tooltip {
  transform: translateY(-50%) scale(1) !important;
}

/* ── Scrollbar ──────────────────────────────────── */
.custom-scroll::-webkit-scrollbar {
  width: 4px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* ── Animations ─────────────────────────────────── */
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-modal-in {
  animation: modal-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes progress-line {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

.animate-progress-line {
  animation: progress-line 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pulse-subtle {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

.animate-pulse-subtle {
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#view-landing,
#view-game,
#view-leaderboard {
  animation: fade-up 0.6s ease-out forwards;
}

/* ── VFX ────────────────────────────────────────── */
.fd-emoji {
  position: fixed;
  pointer-events: none;
  z-index: 500;
  animation: fall 2.5s linear forwards;
}

@keyframes fall {
  0% {
    transform: translateY(-50px) rotate(0);
    opacity: 1;
  }

  100% {
    transform: translateY(110dvh) rotate(360deg);
    opacity: 0;
  }
}

/* ── Mobile Layout Overrides ─────────────────────── */
@media (max-width: 768px) {

  /* Header elements sizing */
  #btn-quit {
    width: 42px !important;
    height: 42px !important;
  }

  /* Info Overlay in header : Slightly Larger */
  #fish-info-overlay {
    max-width: 180px;
  }

  #fish-info-overlay h2 {
    font-size: 13px !important;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  /* Restore horizontal rows compact : 3.2rem height */
  .game-slider-row {
    padding-left: 0.6rem !important;
    padding-right: 0.5rem !important;
    gap: 0.2rem !important;
    height: 3.2rem !important;
    position: relative !important;
    width: 100% !important;
    border-radius: 999px !important;
    flex-direction: row !important;
  }

  /* Slider thickness adjustment */
  .game-slider-row .noUi-target {
    height: 8px !important;
  }

  .game-slider-row .noUi-handle {
    width: 20px !important;
    height: 20px !important;
    top: -8px !important;
  }

  /* Values compact but legible */
  #val-weight,
  #val-length {
    width: 2.8rem !important;
    font-size: 15px !important;
    text-align: right !important;
  }

  /* Validate button circular on mobile */
  #btn-validate {
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important;
  }

  /* Ensure rows stack tightly */
  #mobile-controls-row .flex-grow {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Hide labels on mobile to save space */
  .game-slider-row>span {
    display: none !important;
  }
}

.color-status-success {
  color: var(--success);
}

.color-status-warning {
  color: var(--warning);
}

.color-status-danger {
  color: var(--danger);
}

/* Smoothly update card backgrounds */
#res-card-w,
#res-card-l {
  transition: background-color 0.5s ease, border-color 0.5s ease;
}