/* Weightword Game Styles - Mobile First Design */

/* Theme Variables */
:root {
  /* Light theme (default) */
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #6c757d;
  --border-color: #dee2e6;
  --border-light: #ced4da;
  --success-color: #28a745;
  --success-dark: #1e7e34;
  --danger-color: #dc3545;
  --danger-dark: #c82333;
  --primary-color: #007bff;
  --primary-dark: #0056b3;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-heavy: rgba(0, 0, 0, 0.2);
  --overlay-bg: rgba(0, 0, 0, 0.7);

  /* Rainbow weight colors (1-9) */
  --weight-1-color: #6366f1; /* Deep indigo */
  --weight-1-bg: #e0e7ff; /* Light indigo */
  --weight-2-color: #3b82f6; /* Blue */
  --weight-2-bg: #dbeafe; /* Light blue */
  --weight-3-color: #06b6d4; /* Cyan */
  --weight-3-bg: #cffafe; /* Light cyan */
  --weight-4-color: #059669; /* Emerald (darker green) */
  --weight-4-bg: #d1fae5; /* Light emerald */
  --weight-5-color: #84cc16; /* Lime green (balanced) */
  --weight-5-bg: #ecfccb; /* Light lime */
  --weight-6-color: #d97706; /* Less brown, more yellow */
  --weight-6-bg: #fef3c7; /* Light yellow */
  --weight-7-color: #f59e0b; /* Orange */
  --weight-7-bg: #fef3c7; /* Slightly lighter orange */
  --weight-8-color: #f97316; /* Deep orange */
  --weight-8-bg: #ffedd5; /* Light deep orange */
  --weight-9-color: #ef4444; /* Red (heaviest) */
  --weight-9-bg: #fee2e2; /* Wee bit darker light red */

  /* Default gray colors for balance scale */
  --weight-default-color: #6b7280; /* Gray text */
  --weight-default-bg: #f3f4f6; /* Light gray background */
}

[data-theme="dark"] {
  /* Dark theme */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #404040;
  --text-primary: #f8f9fa;
  --text-secondary: #e9ecef;
  --text-muted: #adb5bd;
  --border-color: #495057;
  --border-light: #6c757d;
  --success-color: #20c997;
  --success-dark: #17a085;
  --danger-color: #fd7e14;
  --danger-dark: #e8590c;
  --primary-color: #0d6efd;
  --primary-dark: #0a58ca;
  --shadow-light: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.4);
  --shadow-heavy: rgba(0, 0, 0, 0.6);
  --overlay-bg: rgba(0, 0, 0, 0.8);

  /* Rainbow weight colors (1-9) - muted pastels for dark theme */
  --weight-1-color: #a5b4fc; /* Pastel indigo */
  --weight-1-bg: #f0f0f8; /* Light indigo background */
  --weight-2-color: #93c5fd; /* Pastel blue */
  --weight-2-bg: #f0f5ff; /* Light blue background */
  --weight-3-color: #67e8f9; /* Pastel cyan */
  --weight-3-bg: #eef9fb; /* Light cyan background */
  --weight-4-color: #6ee7b7; /* Pastel emerald */
  --weight-4-bg: #eef9f3; /* Light emerald background */
  --weight-5-color: #bef264; /* Pastel lime (balanced) */
  --weight-5-bg: #f3f9ed; /* Light lime background */
  --weight-6-color: #fbbf24; /* Pastel yellow */
  --weight-6-bg: #faf8ed; /* Light yellow background */
  --weight-7-color: #fcd34d; /* Pastel orange */
  --weight-7-bg: #f9f3ed; /* Light orange background */
  --weight-8-color: #fb923c; /* Pastel deep orange */
  --weight-8-bg: #f9f1ed; /* Light deep orange background */
  --weight-9-color: #f87171; /* Pastel red (heaviest) */
  --weight-9-bg: #f9eded; /* Light red background */

  /* Default gray colors for balance scale in dark theme */
  --weight-default-color: #9ca3af; /* Lighter gray text for dark theme */
  --weight-default-bg: #374151; /* Dark gray background */
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  padding: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Mobile body overflow prevention - only for actual mobile devices */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100vw;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    position: relative;
  }
}

/* Navigation bar */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.nav-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  width: 100%;
  max-width: 1024px;
}

.nav-logo {
  font-size: 1.125rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  position: relative;
  line-height: 1;
}

.logo-weight {
  display: inline-block;
  transform: translateY(-4px);
  font-weight: 700;
  color: var(--weight-4-color);
}

.logo-word {
  display: inline-block;
  transform: translateY(4px);
  font-weight: 500;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.beta-badge {
  background: #f59e0b;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.difficulty-indicator {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-left: 1rem;
  margin-right: -0.5rem;
}

.difficulty-indicator.difficulty-easy {
  background: var(--weight-4-color);
}

.difficulty-indicator.difficulty-classic {
  background: #f59e0b;
}

.difficulty-indicator.difficulty-beast {
  background: #ef4444;
}

/* Nav bar difficulty indicators - grayish badge in light theme, white badge in dark theme */
.nav-bar .difficulty-indicator.difficulty-easy,
.nav-bar .difficulty-indicator.difficulty-classic,
.nav-bar .difficulty-indicator.difficulty-beast {
  background: #4a4a4a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-bar .difficulty-indicator-bar {
  background: var(--bg-secondary);
}

/* Dark mode - white badge with bars matching dark nav background */
[data-theme="dark"] .nav-bar .difficulty-indicator.difficulty-easy,
[data-theme="dark"] .nav-bar .difficulty-indicator.difficulty-classic,
[data-theme="dark"] .nav-bar .difficulty-indicator.difficulty-beast {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .nav-bar .difficulty-indicator-bar {
  background: var(--bg-secondary);
}

.difficulty-indicator-bar {
  width: 2px;
  height: 10px;
  background: white;
  border-radius: 1px;
}

/* Options dropdown */
.options-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 0.5rem;
}

/* Info dropdown */
.info-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 1rem;
  margin-right: -0.75rem;
}

.info-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.info-button:hover {
  background: var(--shadow-light);
}

.info-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(21%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(92%) contrast(86%);
  transition: filter 0.3s ease;
}

[data-theme="dark"] .info-icon {
  filter: brightness(0) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Share nav button */
.share-nav-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.share-nav-button:hover:not(.disabled) {
  background: var(--shadow-light);
}

.share-nav-button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.share-nav-button.disabled:hover {
  background: none;
}

.share-icon {
  width: 20px;
  height: 20px;
  color: white; /* Default white/disabled state */
  transition: color 0.3s ease;
}

/* Enabled state - use weight-4 green color */
.share-nav-button:not(.disabled) .share-icon {
  color: var(--weight-4-color);
}

.options-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.options-button:hover {
  background: var(--shadow-light);
}

.gear-icon {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(21%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(92%) contrast(86%);
  transition: filter 0.3s ease;
}

[data-theme="dark"] .gear-icon {
  filter: brightness(0) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Dark theme keyboard overrides */
[data-theme="dark"] .key {
  background: #555555;
  color: var(--text-primary);
}

[data-theme="dark"] .key:hover {
  background: #606060;
}

[data-theme="dark"] .key:active {
  background: #6a6a6a;
}

[data-theme="dark"] .key.special {
  background: #555555;
  color: var(--text-primary);
}

[data-theme="dark"] .key.special:hover {
  background: #606060;
}

/* Theme toggle in dropdown */
.theme-toggle-container {
  padding: 12px 16px !important;
  cursor: default;
}

.theme-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  margin: 0;
}

.theme-toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.theme-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.theme-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e2e8f0;
  border-radius: 30px;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
}

.theme-toggle-slider.dark {
  background: #4a5568;
}

.theme-toggle-slider::before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.theme-toggle-slider.dark::before {
  transform: translateX(30px);
}

.theme-icon {
  user-select: none;
  z-index: 1;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-icon.light {
  margin-left: 4px;
  color: #94a3b8;
}

.theme-icon.dark {
  margin-right: 4px;
  color: #64748b;
}

.theme-icon svg {
  width: 14px;
  height: 14px;
}

.theme-toggle-slider:not(.dark) .theme-icon.dark {
  opacity: 0.6;
  color: #64748b;
}

.theme-toggle-slider.dark .theme-icon.light {
  opacity: 0.6;
  color: #e2e8f0;
}

/* Dropdown divider */
.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

/* Difficulty toggle (3-way) */
.difficulty-toggle-switch {
  position: relative;
  display: inline-flex;
  width: 90px;
  height: 30px;
  background: #22c55e; /* Default green for Easy */
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  padding: 3px;
  transition: background 0.3s ease;
  flex-shrink: 0;
}

.difficulty-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.333%;
  cursor: pointer;
  z-index: 1;
}

.difficulty-zone.easy {
  left: 0;
  border-radius: 15px 0 0 15px;
}

.difficulty-zone.classic {
  left: 33.333%;
}

.difficulty-zone.beast {
  left: 66.666%;
  border-radius: 0 15px 15px 0;
}

.difficulty-toggle-slider {
  position: absolute;
  height: 24px;
  width: 24px;
  background: white;
  border-radius: 12px;
  transition: left 0.3s ease;
  left: 3px;
  top: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

.difficulty-bars {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.difficulty-bar {
  width: 2px;
  height: 12px;
  border-radius: 1px;
}


[data-theme="dark"] .difficulty-toggle-slider {
  background: white;
}

/* Dark theme adjustments for toggle slider */
[data-theme="dark"] .theme-toggle-slider {
  background: #4a5568;
}

[data-theme="dark"] .theme-toggle-slider.dark {
  background: #2d3748;
}

/* Mobile touch-friendly sizing */
@media (max-width: 767px) {
  .share-nav-button {
    padding: 0.5rem;
  }

  .share-icon {
    width: 24px;
    height: 24px;
  }

  .options-button {
    padding: 0.5rem;
  }

  .gear-icon {
    width: 22px;
    height: 22px;
  }

  .info-button {
    padding: 0.5rem;
  }

  .info-icon {
    width: 24px;
    height: 24px;
  }

  .difficulty-indicator {
    width: 21px;
    height: 21px;
  }
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px var(--shadow-medium);
  min-width: 120px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(10px);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: color 0.3s ease;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

/* Mobile dropdown items - bigger text and touch targets */
@media (max-width: 767px) {
  .dropdown-menu {
    min-width: 140px;
  }

  .dropdown-item {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
  }
}

.dropdown-item:hover {
  background: var(--bg-primary);
  transition: background-color 0.2s ease;
}

.dropdown-item:first-child {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.dropdown-item:last-child {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* Beta-only label styling */
.beta-only-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f59e0b;
  padding: 0.375rem 0.75rem;
  cursor: default;
  pointer-events: none;
  background: rgba(245, 158, 11, 0.1);
}

.beta-only-label:hover {
  background: rgba(245, 158, 11, 0.1);
}

/* Beta menu items with different background */
.beta-menu-item {
  background: rgba(245, 158, 11, 0.1);
}

.beta-menu-item:hover {
  background: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .beta-menu-item {
  background: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .beta-menu-item:hover {
  background: rgba(245, 158, 11, 0.25);
}

/* Game Container */
.game-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem;
  padding-top: 5rem; /* Space for fixed nav */
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
  display: flex;
  flex-direction: column;
}

/* CLEAN MOBILE LAYOUT */
@media (max-width: 767px) {
  /* Balance scale positioned below nav with large top margin */
  .game-header {
    position: fixed;
    top: 66px; /* Moved up another 6px for shorter screens */
    left: 0;
    right: 0;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    margin: 0;
    background: var(--bg-primary);
    z-index: 10;
  }

  /* Word history positioned between balance scale and weight board - force override */
  @media (max-width: 767px) {
    .mobile-word-history {
      position: fixed !important;
      top: 130px !important;
      left: calc(50vw - 140px) !important; /* Center: 50% viewport - half width */
      width: 280px !important;
      height: auto !important;
      bottom: 300px !important;
      display: flex !important; /* Flex to center the grid */
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 8px !important;
      margin: 0 !important;
      max-width: 280px !important;
      min-width: 280px !important; /* Force consistent width */
      transform: none !important; /* Remove transform conflicts */
      right: auto !important; /* Clear any right positioning */
    }
  }

  /* Word history grid - 2 rows of 3 words each - force override with highest specificity */
  @media (max-width: 767px) {
    .mobile-word-history .word-history-grid {
      display: grid !important;
      grid-template-columns: repeat(3, max-content) !important;
      grid-template-rows: repeat(2, auto) !important;
      grid-auto-flow: row !important;
      gap: 8px !important;
      width: fit-content !important;
      max-width: 280px !important;
      height: auto !important;
      padding: 0 !important;
      margin: 0 auto !important; /* Center within container */
      flex-direction: initial !important; /* Override flex settings */
      justify-content: start !important; /* Align grid content to left */
      justify-items: start !important; /* Align items within grid cells to left */
      justify-self: start !important; /* Grid self-alignment to left */
      align-self: center !important;
      align-items: center !important; /* Center items vertically */
      position: static !important; /* Remove positioning conflicts */
      left: auto !important;
      transform: none !important; /* Remove transform conflicts */
      right: auto !important;
    }
  }

  /* Ensure word history items work with grid */
  .word-history-item {
    background: var(--bg-secondary);
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide game container on mobile - use individual positioning */
  .game-container {
    display: none;
  }

  /* Bottom elements group: weight board + input + keyboard */
  .weight-breakdown-container {
    position: fixed;
    bottom: 236px; /* Above input row (176px) + input height (60px) */
    left: 4px;
    right: 4px;
    padding: 8px 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    background: none !important; /* Force no background on iPhone */
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Input row above keyboard */
  .current-row {
    position: fixed;
    bottom: 176px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
  }

  /* Hide traditional attempts area on mobile */
  .attempts-area {
    display: none;
  }


  /* Compact word history for mobile in band layout */
  .mobile-word-history h3 {
    display: none;
  }

  .word-history-grid {
    display: flex;
    flex-direction: row; /* Normal left-to-right order */
    justify-content: flex-start; /* Align items to the left */
    gap: 6px; /* Horizontal gap between items */
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0;
    background: none;
    width: calc(100vw - 8px); /* Match weight board width */
    max-width: calc(100vw - 8px);
    overflow-x: auto; /* Enable horizontal scroll */
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    margin: 0 4px; /* Match weight board margins */
    box-sizing: border-box;
    /* Android scroll fixes */
    touch-action: pan-x; /* Allow horizontal touch scrolling */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .word-history-grid::-webkit-scrollbar {
    display: none;
  }

  .word-history-item {
    padding: 8px 12px; /* More horizontal padding for single line */
    background: var(--bg-secondary);
    border-radius: 6px;
    text-align: center;
    color: var(--text-secondary);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 0.8rem; /* Slightly larger */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px; /* Taller for single row */
    white-space: nowrap; /* Prevent text wrapping */
    flex-shrink: 0; /* Prevent items from shrinking */
  }

  /* Mobile weight breakdown - show mobile version with 3 rows */
  .weight-breakdown-container .weight-breakdown-desktop {
    display: none;
  }
  .weight-breakdown-container .weight-breakdown-mobile {
    display: block !important;
  }

  .weight-breakdown-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: none !important;
    border-radius: 0 !important;
  }

  .weight-breakdown-mobile .weight-letter-item {
    font-size: 0.875rem;
    padding: 4px 2px;
  }

  .weight-breakdown-container {
    max-width: none !important; /* Remove base max-width constraint */
  }
}

/* Beta controls */
.beta-controls {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  justify-content: center;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 1rem;
}

.beta-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.beta-btn:hover {
  background: #0056b3;
}

/* Game Header */
.game-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  margin: 0; /* Remove bottom margin */
  font-weight: 600;
  font-size: 1.1rem;
}

.game-header span {
  color: #495057;
}

.game-header .guess-counter.win {
  color: #28a745;
  font-weight: 700;
}

.game-header .guess-counter.loss {
  color: #dc3545;
  font-weight: 700;
}

/* Balance Scale Component */
.balance-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px; /* Further increased for better visibility */
  height: 90px; /* Further increased for larger scale */
  position: relative;
  margin: 0; /* Remove any default margins */
}

/* Weight Sides - Bounding boxes for left and right */
.weight-side {
  width: 100px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Weight Blocks */
.weight-block {
  width: 70px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 4px 0;
  box-sizing: content-box;
}

.weight-block.target {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 2px solid var(--border-color);
}

.weight-block.guess {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 2px solid var(--border-color);
}

/* Rainbow weight classes for balance scale blocks - match weight board styling exactly */
.weight-block.weight-1 { color: var(--weight-1-color); border-color: var(--weight-1-color); }
.weight-block.weight-2 { color: var(--weight-2-color); border-color: var(--weight-2-color); }
.weight-block.weight-3 { color: var(--weight-3-color); border-color: var(--weight-3-color); }
.weight-block.weight-4 { color: var(--weight-4-color); border-color: var(--weight-4-color); }
.weight-block.weight-5 { color: var(--weight-5-color); border-color: var(--weight-5-color); }
.weight-block.weight-6 { color: var(--weight-6-color); border-color: var(--weight-6-color); }
.weight-block.weight-7 { color: var(--weight-7-color); border-color: var(--weight-7-color); }
.weight-block.weight-8 { color: var(--weight-8-color); border-color: var(--weight-8-color); }
.weight-block.weight-9 { color: var(--weight-9-color); border-color: var(--weight-9-color); }

.weight-block.guess.win {
  /* Win state keeps the weight color but adds subtle emphasis */
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.weight-block.guess.loss {
  /* Loss state keeps the weight color but adds subtle emphasis */
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Weight Block Labels */
.weight-label {
  font-size: 0.6rem;
  opacity: 0.8;
  margin-bottom: 1px;
}

.weight-value {
  font-size: 0.9rem;
  font-weight: 800;
}

/* Balance Fulcrum */
.balance-fulcrum {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 4px;
  background: var(--weight-default-color);
  border-radius: 2px;
  transition: transform 0.4s ease;
  z-index: 2;
}

/* Fulcrum Triangle Base */
.fulcrum-base {
  position: absolute;
  left: 50%;
  top: 87%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid var(--weight-default-color);
  z-index: 1;
}

/* Rainbow weight classes for fulcrum and base - match weight board border/text colors */
.balance-fulcrum.weight-1 { background: var(--weight-1-color); }
.balance-fulcrum.weight-2 { background: var(--weight-2-color); }
.balance-fulcrum.weight-3 { background: var(--weight-3-color); }
.balance-fulcrum.weight-4 { background: var(--weight-4-color); }
.balance-fulcrum.weight-5 { background: var(--weight-5-color); }
.balance-fulcrum.weight-6 { background: var(--weight-6-color); }
.balance-fulcrum.weight-7 { background: var(--weight-7-color); }
.balance-fulcrum.weight-8 { background: var(--weight-8-color); }
.balance-fulcrum.weight-9 { background: var(--weight-9-color); }

.fulcrum-base.weight-1 { border-bottom-color: var(--weight-1-color); }
.fulcrum-base.weight-2 { border-bottom-color: var(--weight-2-color); }
.fulcrum-base.weight-3 { border-bottom-color: var(--weight-3-color); }
.fulcrum-base.weight-4 { border-bottom-color: var(--weight-4-color); }
.fulcrum-base.weight-5 { border-bottom-color: var(--weight-5-color); }
.fulcrum-base.weight-6 { border-bottom-color: var(--weight-6-color); }
.fulcrum-base.weight-7 { border-bottom-color: var(--weight-7-color); }
.fulcrum-base.weight-8 { border-bottom-color: var(--weight-8-color); }
.fulcrum-base.weight-9 { border-bottom-color: var(--weight-9-color); }

/* End Game Message Box */
.end-game-message {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1a1a;
  text-align: center;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  min-width: 80px;
}

[data-theme="dark"] .end-game-message {
  background: #fff;
  border-color: #eee;
  color: #1a1a1a;
}


/* Fulcrum States */
.balance-fulcrum.level {
  /* Guess equals target: horizontal line (-) */
  transform: translate(-50%, -50%) rotate(0deg);
}

.balance-fulcrum.target-heavy {
  /* Target is heavier: fulcrum tilts to / shape (left side down) */
  transform: translate(-50%, -50%) rotate(-15deg);
}

.balance-fulcrum.guess-heavy {
  /* Guess is heavier: fulcrum tilts to \ shape (right side down) */
  transform: translate(-50%, -50%) rotate(15deg);
}

/* Balance Scale States - Alignment within bounding boxes */

/* Target is heavier (guess is lower) */
.balance-scale.target-heavier .target-side {
  justify-content: flex-end; /* Target block aligns to bottom (heavier) */
}

.balance-scale.target-heavier .guess-side {
  justify-content: flex-start; /* Guess block aligns to top (lighter) */
}

/* Balanced */
.balance-scale.balanced .target-side,
.balance-scale.balanced .guess-side {
  justify-content: center; /* Both blocks align to middle (balanced) */
}

/* Guess is heavier (guess is higher) */
.balance-scale.guess-heavier .target-side {
  justify-content: flex-start; /* Target block aligns to top (lighter) */
}

.balance-scale.guess-heavier .guess-side {
  justify-content: flex-end; /* Guess block aligns to bottom (heavier) */
}

/* Mobile adjustments for balance scale */
@media (max-width: 480px) {
  .game-header {
    padding: 0.5rem 1rem 0.25rem 1rem; /* Reduced for more balance scale space */
  }

  .weight-breakdown-container {
    margin-bottom: 0px; /* Remove bottom margin completely */
    padding: 1px 0; /* Minimal vertical padding only */
  }

  .balance-scale {
    max-width: 380px; /* Further maximized for iPhone visibility */
    height: 100px; /* Further maximized mobile height */
    margin: 0; /* Remove any margins */
  }

  .weight-side {
    width: 110px; /* Further maximized for iPhone */
    height: 100px; /* Match new balance scale height */
    padding: 8px 0 4px 0;
  }

  .weight-block {
    width: 75px; /* Further maximized for iPhone */
    height: 45px; /* Further maximized mobile height */
    font-size: 0.85rem; /* Slightly increased font */
    padding: 4px 0;
  }

  .weight-label {
    font-size: 0.6rem; /* Increased from 0.5rem */
  }

  .weight-value {
    font-size: 0.9rem; /* Increased from 0.8rem */
  }

  .balance-fulcrum {
    width: 85px; /* Further maximized for iPhone */
    height: 5px; /* Keep maximized height */
  }

  .fulcrum-base {
    border-left: 14px solid transparent; /* Further maximized for iPhone */
    border-right: 14px solid transparent;
    border-bottom: 20px solid var(--weight-default-color); /* Use consistent default color */
  }

  /* Letter input boxes - made even bigger */
  .letter-box {
    width: 60px !important; /* Back to original 60px */
    height: 60px !important; /* Back to original 60px */
    font-size: 1.5rem !important; /* Back to original 1.5rem */
  }

  .attempt-row {
    gap: 8px !important; /* Increased gap for better spacing */
  }
}

/* Hide old attempts area on all screens */
.attempts-area {
  display: none;
}

/* Fixed layout - prevent scrolling and movement */
body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

.game-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Desktop keyboard positioning - normal flow */
.keyboard-area {
  margin-top: 2rem;
}

.attempt-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  justify-content: center;
}

/* Letter Boxes */
.letter-box {
  width: 60px;
  height: 60px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  position: relative;
  transition: all 0.3s ease;
}

.letter-box.filled {
  border-color: var(--text-muted);
  background: var(--bg-primary);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.letter-box.input-box {
  border-style: dashed;
}

.letter-box.disabled {
  background: var(--bg-tertiary);
  border-color: var(--border-light);
  color: var(--text-muted);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}


/* Submitted Letter Styling */
.letter-box.submitted {
  background: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-secondary);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Weight Display */
.weight-display {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.weight-display.weight-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Subtle weight display - no background, darker color */
.weight-display.subtle {
  background: none;
  color: #6c757d;
  padding: 0;
  font-weight: 600;
}

/* Rainbow weight classes for weight displays */
.weight-display.weight-1 { background: var(--weight-1-color); }
.weight-display.weight-2 { background: var(--weight-2-color); }
.weight-display.weight-3 { background: var(--weight-3-color); }
.weight-display.weight-4 { background: var(--weight-4-color); }
.weight-display.weight-5 { background: var(--weight-5-color); }
.weight-display.weight-6 { background: var(--weight-6-color); }
.weight-display.weight-7 { background: var(--weight-7-color); }
.weight-display.weight-8 { background: var(--weight-8-color); }
.weight-display.weight-9 { background: var(--weight-9-color); }

/* Subtle weight displays get colored text instead of background */
.weight-display.subtle.weight-1 { color: var(--weight-1-color); background: none; }
.weight-display.subtle.weight-2 { color: var(--weight-2-color); background: none; }
.weight-display.subtle.weight-3 { color: var(--weight-3-color); background: none; }
.weight-display.subtle.weight-4 { color: var(--weight-4-color); background: none; }
.weight-display.subtle.weight-5 { color: var(--weight-5-color); background: none; }
.weight-display.subtle.weight-6 { color: var(--weight-6-color); background: none; }
.weight-display.subtle.weight-7 { color: var(--weight-7-color); background: none; }
.weight-display.subtle.weight-8 { color: var(--weight-8-color); background: none; }
.weight-display.subtle.weight-9 { color: var(--weight-9-color); background: none; }
  font-size: 0.65rem;
}

/* Animation Classes */
.letter-box.revealed {
  animation: letterReveal 0.3s ease-out;
}

@keyframes letterReveal {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.current-row.shake {
  animation: shake 0.5s ease-in-out;
}

/* Desktop shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Mobile shake animation that preserves centering */
@keyframes shake-mobile {
  0%, 100% { transform: translateX(-50%); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(calc(-50% - 5px)); }
  20%, 40%, 60%, 80% { transform: translateX(calc(-50% + 5px)); }
}

/* Mobile keyboard positioning */

/* Mobile keyboard positioning */
@media (max-width: 767px) {
  .keyboard-area {
    position: fixed;
    bottom: 2px;
    left: 2px;
    right: 2px;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
    z-index: 100;
    padding: 0 2px;
  }

  /* Use mobile shake animation that preserves centering */
  .current-row.shake {
    animation: shake-mobile 0.5s ease-in-out !important; /* Use mobile shake to preserve translateX(-50%) */
  }
}

/* Additional iPhone-specific rule to ensure mobile shake works */
@media (max-width: 430px) {
  .current-row.shake {
    animation: shake-mobile 0.5s ease-in-out !important;
  }
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.key {
  min-width: 32px;
  height: 48px;
  border: none;
  border-radius: 6px;
  background: var(--text-muted);
  color: var(--bg-secondary);
  transition: background-color 0.2s ease, color 0.2s ease;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.key:hover {
  background: var(--text-secondary);
  transform: translateY(-1px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.key:active {
  transform: translateY(0);
  background: var(--text-secondary);
}

.key.special {
  min-width: 64px;
  background: var(--text-muted);
  color: var(--bg-secondary);
  font-size: 0.8rem;
  transition: background-color 0.2s ease;
}

.key.special:hover {
  background: var(--text-secondary);
}

.key.disabled {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.key.disabled:hover {
  background: var(--bg-tertiary);
  transform: none;
}

/* Key icons styling */
.key-icon {
  filter: brightness(0) invert(1); /* Makes icons white */
  display: block;
  margin: 0 auto;
}

/* Specific icon sizes for visual balance */
.enter-key .key-icon {
  width: 20px;
  height: 20px;
}

.delete-key .key-icon {
  width: 26px;
  height: 26px;
}

.key.special {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Show word history on desktop and mobile */
.mobile-word-history {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the word history grid */
  justify-content: center;
  margin-top: 0rem; /* Remove top margin completely */
  margin-bottom: 0.125rem; /* Further reduced from 0.25rem */
  width: 100%; /* Use full available width */
  max-width: 348px; /* Match desktop weight board width */
  margin-left: auto;
  margin-right: auto;
}

/* Desktop word history styling */
.word-history-grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: row;
  gap: 8px;
  justify-content: center;
  justify-items: start;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem;
  border-radius: 8px;
  min-height: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  width: 100%; /* Take full container width */
  max-width: 348px; /* Match base desktop weight board width */
  /* Touch scroll support for mobile browsers */
  touch-action: pan-x; /* Allow horizontal touch scrolling */
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  box-sizing: border-box;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.word-history-grid::-webkit-scrollbar {
  display: none;
}

.word-history-item {
  padding: 0.5rem 0.75rem; /* Better padding for horizontal layout */
  background: var(--bg-secondary);
  border-radius: 6px;
  text-align: center;
  color: var(--text-muted);
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap; /* Prevent text wrapping */
  flex-shrink: 0; /* Prevent items from shrinking */
  min-width: fit-content; /* Ensure items maintain their content width */
}

/* Game State Messages */
.win-celebration,
.game-over {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  z-index: 1000;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 0.3s ease;
}

.win-celebration.visible,
.game-over.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.win-celebration {
  color: #28a745;
  border: 3px solid #28a745;
}

.game-over {
  color: #dc3545;
  border: 3px solid #dc3545;
}


/* Weight breakdown display */
.weight-breakdown-container {
  width: 100%;
  padding: 8px 0;
  margin-bottom: 8px;
  max-width: 348px; /* Match letter box row width (5 boxes × 60px + 4 gaps × 8px) */
  margin-left: auto;
  margin-right: auto;
}

/* Show desktop version by default */
.weight-breakdown-desktop {
  display: block;
}
.weight-breakdown-mobile {
  display: none;
}

.weight-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin-bottom: 2px;
}

.weight-letter-item {
  font-size: 0.6rem;
  font-weight: bold;
  color: var(--text-muted);
  padding: 2px 4px;
  flex: 1;
  text-align: center;
  border-radius: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Rainbow weight classes for letter breakdown */
.weight-letter-item.weight-1 { color: var(--weight-1-color); border-color: var(--weight-1-color); }
.weight-letter-item.weight-2 { color: var(--weight-2-color); border-color: var(--weight-2-color); }
.weight-letter-item.weight-3 { color: var(--weight-3-color); border-color: var(--weight-3-color); }
.weight-letter-item.weight-4 { color: var(--weight-4-color); border-color: var(--weight-4-color); }
.weight-letter-item.weight-5 { color: var(--weight-5-color); border-color: var(--weight-5-color); }
.weight-letter-item.weight-6 { color: var(--weight-6-color); border-color: var(--weight-6-color); }
.weight-letter-item.weight-7 { color: var(--weight-7-color); border-color: var(--weight-7-color); }
.weight-letter-item.weight-8 { color: var(--weight-8-color); border-color: var(--weight-8-color); }
.weight-letter-item.weight-9 { color: var(--weight-9-color); border-color: var(--weight-9-color); }


/* Responsive Design */
@media (min-width: 768px) {
  .letter-box {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
  }

  .game-header {
    font-size: 1.3rem;
    padding: 0.5rem 1.5rem;
  }

  .key {
    min-width: 40px;
    height: 56px;
    font-size: 1rem;
  }

  .key.special {
    min-width: 80px;
  }

  /* Responsive weight breakdown for tablet */
  .weight-breakdown-container {
    max-width: 392px; /* Match tablet letter box row (5 × 72px + 4 × 8px) */
  }

  /* Match word history width to weight board */
  .mobile-word-history {
    max-width: 392px;
  }

  .word-history-grid {
    max-width: 392px;
  }

  .weight-letter-item {
    font-size: 0.7rem;
    padding: 3px 5px;
  }
}

@media (min-width: 1024px) {
  .game-container {
    max-width: 600px;
  }

  .letter-box {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }

  /* Responsive weight breakdown for desktop */
  .weight-breakdown-container {
    max-width: 432px; /* Match desktop letter box row (5 × 80px + 4 × 8px) */
  }

  /* Match word history width to weight board */
  .mobile-word-history {
    max-width: 432px;
  }

  .word-history-grid {
    max-width: 432px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Touch improvements for mobile */
@media (hover: none) and (pointer: coarse) {
  .key {
    height: 52px;
    min-width: 32px;
    font-size: 0.85rem;
  }

  .key.special {
    min-width: 42px;
    font-size: 1.1rem;
  }

}

/* Additional mobile keyboard sizing */
@media (max-width: 767px) {
  .keyboard-row {
    gap: 2px;
    margin-bottom: 4px;
    padding: 0 2px;
    justify-content: center;
    width: 100%;
  }

  .key {
    height: 50px;
    min-width: 28px;
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
    max-width: 40px;
  }

  .key.special {
    min-width: 36px;
    max-width: 42px;
    font-size: 1rem;
  }

}

/* Extra small mobile screens - optimize further */
@media (max-width: 375px) {
  .key {
    height: 48px;
    min-width: 26px;
    font-size: 0.9rem;
    max-width: 36px;
  }

  .key.special {
    min-width: 32px;
    max-width: 38px;
    font-size: 0.9rem;
  }

  .keyboard-row {
    gap: 1px;
    margin-bottom: 3px;
    padding: 0 1px;
  }


  /* Mobile-specific overrides for word history */
  .mobile-word-history {
    max-width: 100%;
    margin: 0; /* Remove all margins */
    padding: 0px; /* Remove all padding to maximize balance scale space */
  }

  .word-history-grid {
    display: flex;
    flex-direction: row; /* Normal left-to-right order */
    justify-content: flex-start; /* Align items to the left */
    gap: 4px; /* Smaller gap for mobile */
    font-size: 0.75rem;
    padding: 0;
    background: none;
    width: calc(100vw - 8px); /* Match weight board width */
    max-width: calc(100vw - 8px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 4px;
    box-sizing: border-box;
    /* Enhanced Android scroll support */
    touch-action: pan-x; /* Allow horizontal touch scrolling */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    scroll-behavior: auto; /* Instant scrolling for better responsiveness */
  }

  /* Hide scrollbar for mobile word history */
  .word-history-grid::-webkit-scrollbar {
    display: none;
  }

  .word-history-item {
    padding: 6px 8px; /* Better padding for horizontal layout */
    background: var(--bg-secondary);
    border-radius: 4px;
    border: none;
    transition: background-color 0.3s ease;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px; /* Good height for single row */
    white-space: nowrap;
    flex-shrink: 0; /* Prevent items from shrinking */
    min-width: fit-content; /* Ensure items maintain their content width */
  }
}