/* Mobile settings adjustments */
@media (max-width: 768px) {
  .guide-item {
    margin-bottom: 6px;
  }

  .guide-icon {
    font-size: 20px;
    width: 28px;
    height: 28px;
  }

  .guide-item strong {
    font-size: 13px;
  }

  .guide-item p {
    font-size: 12px;
  }

  .guide-item kbd {
    font-size: 10px;
    padding: 1px 4px;
  }

  .sailing-ship {
    font-size: 32px;
  }

  .ship-2 {
    font-size: 40px;
  }

  .compass-rose {
    font-size: 48px;
    top: 3%;
    right: 3%;
  }

  .treasure-float {
    font-size: 28px;
  }

  .fish-swim {
    font-size: 20px;
  }

  .waves-container {
    height: 150px;
  }

  #kill-feed {
    top: auto;
    bottom: 90px;
    right: 10px;
    left: 10px;
    width: auto;
    font-size: 11px;
  }

  .kill-msg {
    padding: 6px 10px;
  }

  #leaderboard {
    top: 10px;
    left: 10px;
    padding: 10px;
    min-width: 150px;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.8);
  }

  #leaderboard h3 {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .leaderboard-entry {
    font-size: 11px;
    margin: 3px 0;
  }

  #level-bar {
    width: 200px;
    height: 25px;
    top: 10px;
  }

  #level-text {
    font-size: 12px;
    left: 8px;
  }

  #points-badge {
    font-size: 11px;
    padding: 3px 8px;
    right: 8px;
  }

  #upgrade-menu {
    bottom: 15px;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 120px);
  }

  .upgrade-button {
    padding: 10px 16px;
    font-size: 12px;
    min-width: 70px;
  }

  .stat-level {
    width: 22px;
    height: 22px;
    font-size: 11px;
    top: -6px;
    right: -6px;
  }

  #health-display {
    bottom: 15px;
    left: 15px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Portrait mode adjustments */
@media (max-width: 768px) and (orientation: portrait) {
  #leaderboard {
    max-height: 25vh;
    overflow-y: auto;
  }

  #mobile-shoot-button {
    width: 85px;
    height: 85px;
    bottom: 20px;
    right: 20px;
  }

  #upgrade-menu {
    max-width: calc(100vw - 110px);
  }
}

/* Landscape mode adjustments for phones */
@media (max-width: 812px) and (orientation: landscape) {
  #leaderboard {
    font-size: 10px;
    padding: 8px;
    min-width: 130px;
  }

  #level-bar {
    width: 180px;
    height: 22px;
  }

  #mobile-shoot-button {
    width: 75px;
    height: 75px;
    bottom: 15px;
    right: 15px;
  }

  #mobile-shoot-button::before {
    font-size: 28px;
  }

  #upgrade-menu {
    bottom: 10px;
    gap: 5px;
  }

  .upgrade-button {
    padding: 8px 12px;
    font-size: 11px;
  }

  .stat-level {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}

/* Prevent text selection on mobile */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  input, textarea {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* Settings Hint Badge (Bottom Right, Above Mic) */
.settings-hint {
  position: fixed;
  bottom: 80px;
  right: 20px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 100%);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.5px;
  z-index: 150;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.03);
  user-select: none;
  pointer-events: none;
}

.settings-hint kbd {
  display: inline-block;
  padding: 2px 5px;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 3px;
  font-family: 'Rajdhani', monospace;
  font-weight: 700;
  font-size: 10px;
  margin: 0 2px;
  color: #0ea5e9;
  text-shadow: 0 0 6px rgba(14, 165, 233, 0.3);
}

/* Microphone Status Indicator (Bottom Right) */
.mic-status {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
  backdrop-filter: blur(15px);
  border-radius: 10px;
  color: white;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  z-index: 150;
  border: 2px solid;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}