body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  margin: 0;
  padding: 20px;
  color: #222;
  line-height: 1.6;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #4a90e2;
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

#paragraph-container {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Style for masked words */
#paragraph-container [data-masked="true"] {
  font-family: "Courier New", monospace;
  background-color: #fff9c4;
  padding: 2px 4px;
  border-radius: 3px;
  letter-spacing: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin: 0 1px;
  display: inline-block;
  transition: all 0.2s ease;
  cursor: pointer;
}

#paragraph-container [data-masked="true"].highlight {
  background-color: #ffd54f;
  border-color: #ffa000;
  box-shadow: 0 2px 6px rgba(255, 160, 0, 0.2);
  transform: translateY(-1px) scale(1.05);
  color: #333333;
  z-index: 1;
  position: relative;
  font-weight: 600;
  letter-spacing: 2px; /* Keep same as base to prevent reflow/pulsing */
}

#clues-container {
  background: #f8f9fa;
  padding: 8px 4px 8px 4px;
  border-radius: 8px;
  margin-bottom: 10px;
  margin-top: 0;
  box-shadow: none;
  border: none;
  max-height: 500px; /* Set maximum height */
  min-height: 0;
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  perspective: 1000px; /* Add perspective for 3D effect */
}

#clues-container.disabled-clues {
  opacity: 0.5;
  position: relative;
  pointer-events: none;
}

#clues-container.disabled-clues::after {
  content: "Select letters first";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9em;
  pointer-events: none;
  z-index: 10;
}

#clues-container h2 {
  color: #2c3e50;
  margin-top: 0;
}

#clues-list {
  list-style-type: none;
  padding-left: 0;
  padding-right: 5px; /* Add small right padding for scrollbar */
  font-size: 0.85rem;
  line-height: 1.2;
  margin: 0; /* Remove all margins */
  position: relative;
}

/* Container for active clues */
.active-clues-container {
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

/* Container for solved clues */
.solved-clues-container {
  position: relative;
  border-top: 1px dashed #ccc;
  padding-top: 10px;
  margin-top: 15px;
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 10px;
}

/* Solved clues heading */
.solved-clues-heading {
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  margin-bottom: 8px;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 1px solid #e0e0e0;
}

#clues-list li {
  margin-bottom: 6px; /* Reduce bottom margin */
  padding: 6px 10px 6px 8px; /* Reduce padding all around */
  position: relative;
  background: #fff;
  border-radius: 6px; /* Slightly smaller radius */
  border: 1px solid #e0e0e0; /* Thinner border */
  box-shadow: 0 1px 3px rgba(74, 144, 226, 0.07); /* Smaller shadow */
  transition: all 0.3s cubic-bezier(.4,2,.6,1);
  cursor: pointer;
  border-left: 3px solid #4a90e2; /* Slightly smaller left border */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px; /* Reduced minimum height */
}

#clues-list li:hover,
#clues-list li.highlight {
  background: #f0f7ff;
  transform: translateX(2px); /* Remove scale to save space */
  box-shadow: 0 1px 4px rgba(74, 144, 226, 0.18);
  color: #4a90e2;
  border-left: 3px solid #4a90e2;
  padding-left: 10px; /* Smaller left padding when highlighted */
}

#clues-list .found {
  color: #4caf50;
  text-decoration: line-through;
  opacity: 0.7;
}

#clues-list .revealed {
  color: #e65100; /* Darker orange color for revealed words */
  border-left-color: #e65100 !important;
  opacity: 0.9;
}

/* Simplified slide-down animation for clues */
@keyframes slideDown {
  0% {
    transform: translateY(0);
    opacity: 1;
    max-height: 100px;
    margin-bottom: 6px;
    padding: 6px 10px 6px 8px;
  }
  25% {
    background-color: rgba(76, 175, 80, 0.1);
    border-left-color: #4caf50;
  }
  75% {
    transform: translateY(20px);
    opacity: 0.5;
    max-height: 100px;
    margin-bottom: 6px;
    padding: 6px 10px 6px 8px;
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    border-width: 0;
  }
}

/* Class applied when a word is found */
.tumble-down {
  animation: slideDown 2.5s ease-in-out forwards;
  overflow: hidden;
  position: relative;
  z-index: 1;
  pointer-events: none; /* Prevent interaction during animation */
}

/* Styles for solved clues container items */
.solved-clues-container li {
  transform: rotateX(0deg);
  opacity: 0.7;
  margin-bottom: 4px !important; /* Less spacing for solved items */
  background-color: #f9f9f9;
  border-left-width: 2px;
  font-size: 0.8em;
  min-height: 24px;
  box-shadow: none;
  transition: none;
}

.solved-clues-container li:hover {
  transform: none;
  background-color: #f0f0f0;
  box-shadow: none;
}

.clue-text {
  flex: 1;
  margin-right: 8px;
}

/* Stack multiple revealed clues vertically */
.clue-line {
  display: block;
  color: #999;
  font-style: italic;
  font-size: 0.9em;
}

/* The most recently revealed clue is shown prominently */
.clue-line-current {
  color: inherit;
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
}

/* Earlier (dimmed) clues get a subtle indent marker */
.clue-line:not(.clue-line-current)::before {
  content: "• ";
  font-style: normal;
}

.clue-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.clue-icon, .clue-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85em;
  opacity: 0.7;
  background-color: #f1f1f1;
  border: 1px solid #e0e0e0;
}

.clue-icon:hover, .clue-eye:hover {
  opacity: 1;
  transform: scale(1.1);
}

.clue-icon.active {
  opacity: 1;
  border-color: #4a90e2;
  background-color: #e3f2fd;
  position: relative;
  box-shadow: 0 0 0 2px #4a90e2;
}

.clue-icon.active::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  background-color: #2196F3; /* Blue circle */
  border-radius: 50%;
  border: 1px solid white;
}

.clue-icon-hard {
  color: #d32f2f; /* Red */
}

.clue-icon-medium {
  color: #f57c00; /* Orange */
}

.clue-icon-easy {
  color: #388e3c; /* Green */
}

/* Style for clues with reduced points */
.clue-icon.reduced-points {
  opacity: 0.6;
}

.clue-eye {
  margin-left: 0;
  color: #666666; /* Darker color for better visibility */
  font-size: 0.85em; /* Smaller icon */
  background-color: #f1f1f1;
}

#clues-list li:hover .clue-eye {
  color: #2c6bbd; /* Darker blue on hover */
}

/* Make the clue list items flex containers for better layout */
#clues-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

#guess-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

#guess-input {
  flex: 1;
  padding: 10px;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
}

#guess-input.correct {
  background-color: #e8f5e9;
  border-color: #4caf50;
}

#guess-input.wrong {
  background-color: #ffebee;
  border-color: #ef5350;
}

#guess-input.disabled,
button.disabled {
  opacity: 0.5;
  background-color: #f0f0f0;
  cursor: not-allowed;
}

button {
  padding: 10px 20px;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background: #357abd;
}

#score {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #2c3e50;
}

/* Score and input styling */
.score-display {
  margin: 0;
  margin-left: 20px;
  font-size: 1.2rem;
  color: #2c3e50;
  white-space: nowrap;
}

.score-display #score-value {
  font-weight: bold;
  color: #4a90e2;
  font-size: 1.3rem;
}

.score-display .max-score {
  font-size: 0.85rem;
  color: #666;
  margin-left: 4px;
  font-weight: normal;
  white-space: nowrap;
}

/* Chain Links Progress Styling */
.chain-progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 5px;
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  overflow-y: hidden;
  width: 100%;
  padding: 5px 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: thin; /* Firefox */
  scroll-behavior: smooth;
}

.chain-links {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  flex-wrap: nowrap; /* Prevent wrapping */
  width: auto;
  white-space: nowrap; /* Keep all links in a single line */
  position: relative;
  margin: 0 auto;
}

/* Responsive adjustments for chain links */
@media (max-width: 768px) {
  .chain-progress-container {
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 8px; /* Add padding for scrollbar */
  }
  
  .chain-link {
    width: 24px;
    height: 24px;
    font-size: 12px;
    margin: 0 -4px; /* Slightly reduced negative margin on mobile */
  }
}

@media (max-width: 480px) {
  .input-container {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .chain-progress-container {
    margin-top: 10px;
    order: 4; /* Push it below other elements */
    width: 100%;
  }
  
  .chain-link {
    width: 20px;
    height: 20px;
    font-size: 10px;
    margin: 0;
  }
}

.chain-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  margin: 0 -5px; /* More negative margin for tighter chain appearance */
  font-size: 15px;
  position: relative;
  transition: all 0.3s ease;
  /* No default rotation - will be applied via JS */
  z-index: 1;
}

.chain-link.active {
  color: #4a90e2;
  transform: scale(1.2);
  z-index: 3;
}

.chain-link.inactive {
  color: #ccc;
  opacity: 0.7;
  z-index: 1;
}

.chain-link.revealed {
  color: #e65100; /* Orange color for revealed words */
  transform: scale(1.1);
  z-index: 2;
}

/* Animation for new chain link */
@keyframes linkAdded {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.chain-link-new {
  animation: linkAdded 0.8s ease-out forwards !important;
  z-index: 3 !important; /* Ensure animated links appear on top */
}

.input-container {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
}

/* Give all direct children of input-container an order for responsive layout */
.input-container > * {
  order: 1;
}

.input-container > input[type="text"] {
  order: 1;
}

.input-container > button {
  order: 2;
}

.input-container > .score-display {
  order: 3;
}

.input-container > .chain-progress-container {
  order: 4;
}

#vowel-selection {
  text-align: center;
  margin: 30px 0;
}

.vowel-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 15px;
}

.vowel-tile {
  width: 40px;
  height: 40px;
  font-size: 20px;
  font-weight: bold;
  font-family: "Arial", sans-serif;
  background: #f4e4bc;
  border: 2px solid #c4a484;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
}

.vowel-tile:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 50%
  );
  border-radius: 4px;
}

.vowel-tile:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}

.vowel-tile.disabled {
  background: #d1d1d1;
  border-color: #999;
  cursor: not-allowed;
  color: #666;
  transform: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Style for revealed words */
#paragraph-container span[data-masked="true"] {
  font-family: "Courier New", monospace;
  letter-spacing: 2px;
  padding: 0 2px;
  margin: 0 1px;
  border-radius: 3px;
  display: inline-block; /* Prevents layout shifts */
  transition: all 0.3s ease;
}

#paragraph-container span[data-masked="true"].found {
  color: #2e7d32;
  background-color: #e8f5e9;
  border: 1px solid #a5d6a7;
  font-weight: 500;
  transition: all 0.2s ease;
}

#paragraph-container span[data-masked="true"].revealed {
  color: #d84315;
  background-color: #fbe9e7;
  border: 1px solid #ffab91;
  font-weight: 500;
  transition: all 0.2s ease;
}

#paragraph-container span[data-masked="true"].found.highlight {
  background-color: #c8e6c9;
  border-color: #66bb6a;
  color: #1b5e20;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.2);
  transform: translateY(-1px) scale(1.05);
  font-weight: 600;
  letter-spacing: 2px; /* Keep same as base to prevent reflow/pulsing */
}

#paragraph-container span[data-masked="true"].revealed.highlight {
  background-color: #ffccbc;
  border-color: #ff8a65;
  color: #bf360c;
  box-shadow: 0 2px 6px rgba(216, 67, 21, 0.25);
  transform: translateY(-1px) scale(1.05);
  font-weight: 600;
  letter-spacing: 2px; /* Keep same as base to prevent reflow/pulsing */
}

.game-over-message {
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
  animation: slideDown 0.5s ease-out;
  /* default (high score) */
  background-color: #e8f5e9;
  border: 2px solid #4caf50;
}

.game-over-message.score-high {
  background-color: #e8f5e9;
  border-color: #4caf50;
}

.game-over-message.score-mid {
  background-color: #fffde7;
  border-color: #f9a825;
}

.game-over-message.score-low {
  background-color: #ffebee;
  border-color: #ef5350;
}

.game-over-message h2 {
  color: #2e7d32;
  margin-top: 0;
}

.game-over-message.score-mid h2 { color: #e65100; }
.game-over-message.score-low h2 { color: #b71c1c; }

.game-over-message .final-score {
  font-weight: bold;
  font-size: 1.2em;
  color: #4caf50; /* default high */
}

.game-over-message.score-mid .final-score { color: #f9a825; }
.game-over-message.score-low .final-score { color: #ef5350; }

.game-over-message .max-score {
  font-size: 0.9em;
  color: #555;
}

.share-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.share-btn,
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.share-btn {
  background-color: #25d366;
  color: #fff;
}

.share-btn:hover {
  background-color: #1ebe5a;
}

.copy-btn {
  background-color: #e0e0e0;
  color: #333;
}

.copy-btn:hover {
  background-color: #c8c8c8;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.game-layout {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 0.6fr);
  grid-template-areas:
    "paragraph clues"
    "input input"
    "marketplace marketplace";
  gap: 10px; /* Slightly reduced gap */
  height: calc(100vh - 100px);
  min-height: 700px;
}

.section {
  padding: 15px;
  border-radius: 8px;
  overflow: auto;
}

#paragraph-section {
  grid-area: paragraph;
}

#clues-section {
  grid-area: clues;
}

#input-section {
  grid-area: input;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

#marketplace-section {
  grid-area: marketplace;
  padding: 12px;
  display: flex;
  align-items: flex-start;
}

/* Common section styles */
#paragraph-section,
#clues-section,
#input-section {
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  max-height: 100%;
  overflow-y: auto;
}

#marketplace-section {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  max-height: 100%;
  overflow-y: auto;
}

/* Market items styling */
.marketplace-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.market-item {
  background: white;
  padding: 6px 6px 6px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: 5px;
  text-align: left;
  width: calc(100% - 20px);
}

.vowel-market-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.consonant-market-container {
  display: flex;
  align-items: center;
  gap: 10px; /* Reduced gap and removed space-between */
}

.vowel-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hint-text {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
  margin-left: 0;
}

.consonant-tile {
  padding: 10px 20px;
  margin-left: 8px; /* Reduced margin to match new gap */
  background: #4a90e2; /* Changed to match submit button color */
  border: none;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.consonant-tile:hover:not(.disabled) {
  background: #357abd; /* Changed to match submit button hover color */
  transform: translateY(-2px);
}

.consonant-tile.disabled {
  background: #e0e0e0;
  cursor: not-allowed;
}

/* Toast styles */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s ease;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast.toast-error {
  background: rgba(244, 67, 54, 0.9);
}

.toast.toast-success {
  background: rgba(76, 175, 80, 0.9);
}

.toast.toast-info {
  background: rgba(33, 150, 243, 0.9);
}

/* Letter grid styling */
.letter-grid-container {
  background: #f8f9fa;
  padding: 12px 8px;
  border-radius: 8px;
  text-align: left;
  margin-top: 10px;
}

.letter-selection-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* Notification Panel Styles */
.notification-panel {
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 8px;
  margin-left: 15px;
  min-width: 250px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 200px;
}

.notification-header {
  background: #1565c0;
  color: white;
  padding: 8px 12px;
  border-radius: 7px 7px 0 0;
  margin: 0;
  border-bottom: 1px solid #1565c0;
}

.notification-header h4 {
  margin: 0;
  font-size: 0.9em;
  font-weight: 600;
  text-align: center;
}

.notification-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  max-height: calc(200px - 40px);
  scrollbar-width: thin;
  scrollbar-color: #bbdefb #f5f5f5;
}

.notification-content::-webkit-scrollbar {
  width: 6px;
}

.notification-content::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.notification-content::-webkit-scrollbar-thumb {
  background: #bbdefb;
  border-radius: 3px;
}

.notification-content::-webkit-scrollbar-thumb:hover {
  background: #90caf9;
}

.notification-card {
  background: white;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 3px solid #2196f3;
  transition: all 0.2s ease;
  cursor: pointer;
}

.notification-card:last-child {
  margin-bottom: 0;
}

.notification-card:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transform: translateX(2px);
}

.notification-text {
  font-size: 0.85em;
  line-height: 1.3;
  color: #333;
  display: block;
}

/* Notification Types */
.notification-info {
  border-left-color: #2196f3;
}

.notification-success {
  border-left-color: #4caf50;
  background: #f1f8e9;
}

.notification-error {
  border-left-color: #f44336;
  background: #ffebee;
}

.notification-warning {
  border-left-color: #ff9800;
  background: #fff3e0;
}

/* Guess Result Notifications */
.notification-correct-guess {
  border-left-color: #4caf50;
  background: #e8f5e9;
  border-left-width: 4px;
}

.notification-correct-guess .notification-text {
  color: #2e7d32;
  font-weight: 600;
}

.notification-wrong-guess {
  border-left-color: #f44336;
  background: #ffebee;
  border-left-width: 4px;
}

.notification-wrong-guess .notification-text {
  color: #c62828;
  font-weight: 600;
}

/* Legacy styles for backward compatibility - can be removed later */
.selection-label {
  font-weight: bold;
  color: #555;
}

.selected-letter {
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #0d47a1;
  font-size: 1.1em;
}

.letter-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  margin: 0;
}

.keyboard-row {
  display: flex;
  gap: 3px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* First row (Q-P) stays aligned left */
.keyboard-row:nth-child(1) {
  margin-left: 0;
}

/* Second row (A-L) centered below first row */
.keyboard-row:nth-child(2) {
  margin-left: 19px; /* Adjust so G and H center under Y */
}

/* Third row (Z-M) centered below second row */
.keyboard-row:nth-child(3) {
  margin-left: 54px; /* Adjust so V and B center below G and H */
}

.letter-tile {
  width: 34px;
  height: 34px;
  font-size: 16px;
  font-weight: bold;
  font-family: "Arial", sans-serif;
  background: #f8eddb;
  border: 1px solid #d9c99e;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 2px;
  color: #333333;
}

.letter-tile .count {
  font-size: 10px;
  position: absolute;
  bottom: 2px;
  right: 3px;
  color: #666;
  font-weight: normal;
}

.letter-tile:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%
  );
  border-radius: 3px;
  pointer-events: none;
}

.letter-tile:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}

.letter-tile.disabled {
  background: #e0e0e0;
  border-color: #bdbdbd;
  cursor: not-allowed;
  color: #9e9e9e;
  transform: none;
  box-shadow: none;
  opacity: 0.5;
}

.letter-tile.purchased {
  background: #e8e8e8;
  border-color: #ccc;
  color: #aaa;
  cursor: not-allowed;
  transform: none;
  opacity: 0.7;
}

.letter-tile.purchased .count {
  display: none;
}

.letter-tile.purchased.purchased-golden,
.letter-tile.purchased-golden {
  background: #e8e8e8;
  border-color: #ccc;
  color: #aaa;
  cursor: not-allowed;
  transform: none;
  opacity: 0.7;
}

.letter-tile.empty {
  background: #e0e0e0;
  border-color: #bdbdbd;
  color: #9e9e9e;
  opacity: 0.6;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: not-allowed;
}

.letter-tile.empty .count {
  display: none;
}

.letter-tile.selected {
  background: #e8edf2;
  border-color: #c5cdd6;
  color: #6b7a8a;
  font-weight: bold;
  transform: translateY(-3px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.letter-tile.selected .count {
  color: #8899a6;
}

/* Selection-phase highlighting */
.letter-tile.vowel-enabled {
  background: #fff9c4;
  border-color: #f9a825;
  color: #e65100;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(249, 168, 37, 0.4);
}

.letter-tile.vowel-enabled:hover {
  background: #fff176;
  transform: translateY(-2px);
}

.letter-tile.consonant-enabled {
  background: #e8f5e9;
  border-color: #66bb6a;
  color: #1b5e20;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(102, 187, 106, 0.4);
}

.letter-tile.consonant-enabled:hover {
  background: #c8e6c9;
  transform: translateY(-2px);
}

.letter-tile.phase-disabled {
  background: #f0f0f0;
  border-color: #d0d0d0;
  color: #bdbdbd;
  cursor: default;
  transform: none;
  box-shadow: none;
  opacity: 0.45;
}

#reset-selection {
  margin-top: 6px;
  padding: 4px 12px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  cursor: pointer;
  color: #555;
  display: none;
}

#reset-selection:hover {
  background: #f5f5f5;
  border-color: #999;
}

.game-header {
  width: 100%;
  padding: 10px 0;
  position: relative;
}

.header-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 600px;
  margin: 0 auto;
}

.left-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.right-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.title-container {
  text-align: center;
  padding: 0 60px;
}

.title-container h1 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.icon-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.date-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  font-size: 1.1em;
}

.arrow {
  cursor: pointer;
  user-select: none;
}

.arrow.disabled {
  cursor: not-allowed;
  opacity: 0.4;
  color: #999;
}

.date-picker-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.date-selector {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s;
  border: 1px solid transparent;
}

.date-selector:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
}

#current-date {
  min-width: 150px;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #333;
}

.date-selector:hover #current-date {
  color: #4a90e2;
}

/* Calendar button styling */
.calendar-button {
  background: none;
  border: none;
  font-size: 1rem;
  color: #4a90e2;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* Custom calendar dropdown styling */
.custom-calendar {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  padding: 8px;
  margin-top: 8px;
  border: 1px solid #e0e0e0;
}

.custom-calendar.show {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

.today-button {
  display: block;
  margin: 4px auto 6px;
  padding: 3px 14px;
  background: #4a90e2;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.today-button:hover {
  background: #357abd;
}

.today-button:active {
  background: #2a6099;
}

#month-year {
  font-weight: bold;
  color: #333;
  font-size: 1rem;
}

.month-nav {
  background: none;
  border: none;
  color: #4a90e2;
  cursor: pointer;
  font-size: 0.9rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.month-nav:hover {
  background-color: rgba(74, 144, 226, 0.1);
}

.month-nav:disabled {
  color: #ccc;
  cursor: default;
  opacity: 0.3;
  pointer-events: none;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  width: 100%;
}

.weekdays div {
  text-align: center;
  font-size: 0.7rem;
  color: #666;
  font-weight: 600;
  width: 30px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 100%;
}

.calendar-day {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
}

/* Score color fills for played dates */
.calendar-day.played-green {
  background-color: #4caf50 !important;
  color: white;
  font-weight: bold;
}

.calendar-day.played-yellow {
  background-color: #ffc107 !important;
  color: #333 !important; /* Dark text for yellow background */
  font-weight: bold;
}

.calendar-day.played-red {
  background-color: #f44336 !important;
  color: white;
  font-weight: bold;
}

.calendar-day:hover:not(.empty):not(.selected):not(.played-green):not(.played-yellow):not(.played-red) {
  background-color: rgba(74, 144, 226, 0.1);
}

/* Subtle hover effect for played dates */
.calendar-day.played-green:hover:not(.selected),
.calendar-day.played-yellow:hover:not(.selected),
.calendar-day.played-red:hover:not(.selected) {
  opacity: 0.9;
  cursor: pointer;
}

.calendar-day.today {
  border: 2px solid #4a90e2;
  font-weight: bold;
  box-sizing: border-box;
}

/* Today indicator works nicely with played colors */
.calendar-day.today.played-green,
.calendar-day.today.played-yellow,
.calendar-day.today.played-red {
  border: 2px solid #333;
}

.calendar-day.selected {
  background-color: #4a90e2;
  color: white;
  font-weight: bold;
  border-radius: 50%;
}

/* When a played date is selected, show a thick border instead of changing background */
.calendar-day.selected.played-green,
.calendar-day.selected.played-yellow,
.calendar-day.selected.played-red {
  border: 3px solid #4a90e2;
  box-sizing: border-box;
}

.calendar-day.empty {
  cursor: default;
}

.calendar-day.has-content {
  position: relative;
  z-index: 1;
}

.calendar-day.has-content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2em;
  height: 2.2em;
  transform: translate(-50%, -50%);
  border: 1px solid #1976d2;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
  z-index: 2;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(25, 118, 210, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
  }
}

/* Remove the old dot indicator */
.calendar-day.has-content::after {
  display: none;
}

/* Future date styles */
.calendar-day.future-date {
  cursor: not-allowed;
  opacity: 0.4;
  color: #999;
}

.calendar-day.future-date::before {
  border-color: #999;
  animation: none;
}

.calendar-day.future-date:hover {
  background-color: transparent;
}

/* Style for dates without content - make them appear grayed out and non-clickable */
.calendar-day.no-content {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

.calendar-day.no-content:hover {
  background-color: transparent;
}

/* Style for dates outside the 60-day window */
.calendar-day.too-old {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

.calendar-day.too-old::before {
  display: none;
}

.calendar-day.too-old:hover {
  background-color: transparent;
}

/* Style for no puzzle message */
.no-puzzle-message {
  text-align: center;
  padding: 40px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.no-puzzle-message h3 {
  color: #6c757d;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.no-puzzle-message p {
  color: #6c757d;
  font-size: 1rem;
  margin: 0;
}

.paragraph-title-small {
  font-size: 1rem;
  font-weight: 600;
  color: #4a90e2;
  margin-bottom: 10px;
  margin-top: 0;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
  word-break: break-word;
}

/* ─── Golden Key & Golden Coin ─────────────────────────────────────── */

#golden-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.golden-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0.85;
  line-height: 1;
  transition: opacity 0.2s, transform 0.1s;
}

.golden-btn:hover:not(:disabled) {
  opacity: 1;
  transform: scale(1.15);
}

.golden-btn.used,
.golden-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  filter: grayscale(1);
}

.assisted-badge {
  display: inline-block;
  font-size: 0.8rem;
  color: #888;
  margin-top: 0.3rem;
  font-style: italic;
}

/* Golden modals reuse .modal-container from existing styles */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE LAYOUT — max-width: 768px
   ═══════════════════════════════════════════════════════════════════ */

/* Hide mobile elements on desktop */
.mobile-active-clue,
.mobile-progress-row,
.mobile-bottom-spacer,
.mobile-input-bar,
.mobile-toggle-bar,
.mobile-panel,
.mobile-toast {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding: 8px;
  }

  .container {
    padding: 6px;
    border-radius: 6px;
  }

  /* ── Convert grid to single column ──────────────────────────── */
  .game-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: auto;
    gap: 6px;
  }

  /* ── Hide desktop-only sections ─────────────────────────────── */
  #clues-section,
  #input-section,
  #marketplace-section {
    display: none !important;
  }

  /* ── Paragraph section ──────────────────────────────────────── */
  #paragraph-section {
    max-height: 30vh;
    padding: 10px;
    /* Always show scrollbar so user knows content is scrollable */
    overflow-y: scroll;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #999 #e0e0e0; /* Firefox: thumb track */
  }

  #paragraph-section::-webkit-scrollbar {
    width: 6px;
  }

  #paragraph-section::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 3px;
  }

  #paragraph-section::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 3px;
    min-height: 30px;
  }

  #paragraph-section::-webkit-scrollbar-thumb:active {
    background: #666;
  }

  #paragraph-container {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 10px;
    padding: 10px;
  }

  /* ── Paragraph title compact ─────────────────────────────────── */
  #paragraph-container h2.paragraph-title {
    font-size: 1.1rem;
    margin: 0 0 4px 0;
  }

  #paragraph-container .paragraph-title-small {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }

  /* ── Compact header ─────────────────────────────────────────── */
  .game-header {
    padding: 4px 0;
  }

  .title-container h1 {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .date-display {
    font-size: 0.95em;
    margin-bottom: 8px;
    gap: 8px;
  }

  .title-container {
    padding: 0 40px;
  }

  .icon-button {
    font-size: 20px;
    padding: 4px;
  }

  /* ── Mobile active clue strip (hidden — clues always visible) ─ */
  .mobile-active-clue {
    display: none !important;
  }

  /* ── Always-visible clues on mobile ──────────────────────────── */
  .game-layout > #clues-container {
    max-height: 30vh;
    overflow-y: auto;
    margin: 0;
    padding: 6px 4px;
    border-radius: 6px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
  }

  /* ── Mobile progress row (no longer used — score in Score tab) ─ */
  .mobile-progress-row {
    display: none !important;
  }

  /* ── Score panel content ──────────────────────────────────────── */
  .mobile-panel .score-display {
    margin: 12px auto;
    font-size: 1.1rem;
    text-align: center;
  }

  .mobile-panel .chain-progress-container {
    margin: 8px auto;
    padding: 0 10px;
    justify-content: center;
  }

  /* ── Bottom spacer ──────────────────────────────────────────── */
  .mobile-bottom-spacer {
    display: block;
    height: 120px; /* space for fixed input bar + toggle bar */
  }

  /* ── Fixed input bar ────────────────────────────────────────── */
  .mobile-input-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-input-bar #guess-input {
    flex: 1;
    font-size: 16px; /* Prevents iOS auto-zoom */
    padding: 8px 10px;
    min-width: 0;
  }

  .mobile-input-bar #submit-guess {
    padding: 8px 14px;
    font-size: 0.9rem;
    white-space: nowrap;
    min-height: 44px; /* Touch target */
  }

  .mobile-input-bar #golden-actions {
    display: flex;
    gap: 2px;
  }

  .mobile-input-bar .golden-btn {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Fixed toggle bar ───────────────────────────────────────── */
  .mobile-toggle-bar {
    display: flex;
    position: fixed;
    bottom: 56px;
    left: 0;
    right: 0;
    z-index: 49;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
  }

  .mobile-tab-btn {
    flex: 1;
    padding: 10px 4px;
    font-size: 0.8rem;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px; /* Touch target */
    transition: color 0.2s, background 0.2s;
  }

  .mobile-tab-btn.active {
    color: #4a90e2;
    background: #e3f2fd;
    font-weight: 600;
  }

  .mobile-tab-btn i {
    font-size: 1rem;
  }

  /* ── Slide-up panels ────────────────────────────────────────── */
  .mobile-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 100px; /* above toggle bar + input bar */
    left: 0;
    right: 0;
    top: auto;
    z-index: 48;
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .mobile-panel.open {
    max-height: 40vh;
    overflow-y: auto;
  }

  /* Panel inner content padding */
  .mobile-panel .letter-grid-container {
    margin-top: 0;
    padding: 8px 4px;
  }

  .mobile-panel .notification-panel {
    margin: 0;
    min-width: auto;
    max-height: none;
    border-radius: 0;
    border: none;
  }

  .mobile-panel .notification-content {
    max-height: 45vh;
  }

  /* ── Letter tiles sizing for mobile ─────────────────────────── */
  .mobile-panel .letter-tile {
    width: 30px;
    height: 30px;
    font-size: 14px;
    margin: 1px;
  }

  /* Make selected (initial pick) tiles visually distinct on mobile */
  .letter-tile.selected {
    background: #e8edf2;
    border: 2px solid #4a90e2;
    color: #4a90e2;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
  }

  .mobile-panel .keyboard-row:nth-child(2) {
    margin-left: 16px;
  }

  .mobile-panel .keyboard-row:nth-child(3) {
    margin-left: 46px;
  }

  /* ── Mobile toast ───────────────────────────────────────────── */
  .mobile-toast {
    display: block;
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    pointer-events: none;
  }

  .mobile-toast-item {
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: auto;
    text-align: center;
    white-space: nowrap;
  }

  .mobile-toast-item.show {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-toast-item.toast-success {
    background: rgba(76, 175, 80, 0.92);
  }

  .mobile-toast-item.toast-error {
    background: rgba(244, 67, 54, 0.92);
  }

  .mobile-toast-item.toast-info {
    background: rgba(33, 150, 243, 0.92);
  }

  .mobile-toast-item.toast-warning {
    background: rgba(255, 152, 0, 0.92);
  }

  /* ── Chain links compact ────────────────────────────────────── */
  .chain-link {
    width: 22px;
    height: 22px;
    font-size: 11px;
    margin: 0 -4px;
  }

  /* ── Game over message mobile adjustments ───────────────────── */
  .game-over-message {
    margin: 10px 0 120px 0; /* extra bottom for fixed bars */
    padding: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NARROW MOBILE — max-width: 480px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #paragraph-section {
    max-height: 30vh;
  }

  .mobile-panel .letter-tile {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .mobile-panel .keyboard-row:nth-child(2) {
    margin-left: 14px;
  }

  .mobile-panel .keyboard-row:nth-child(3) {
    margin-left: 42px;
  }

  .chain-link {
    width: 20px;
    height: 20px;
    font-size: 10px;
    margin: 0 -3px;
  }

  .mobile-tab-btn {
    font-size: 0.75rem;
  }
}