/* WARBLE - Field Notes Theme */

/* ==========================================================================
   IMPORTS AND FONTS
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Playfair+Display:wght@400;600;700&display=swap');

   /* ==========================================================================
      COLOR SCHEME IMPORT - Change this line to switch themes!
      ========================================================================== */
   
   @import url('css/colors-forest.css');
   
   /* Available options:
      @import url('css/colors-forest.css');    - Deep Forest & Earth Tones
      @import url('css/colors-coastal.css');   - Coastal & Ocean Blues  
      @import url('css/colors-desert.css');    - Desert & Warm Sands
      @import url('css/colors-autumn.css');    - Autumn & Rich Harvest
      @import url('css/colors-minimal.css');   - Minimal & Monochrome
   */
   
   /* ==========================================================================
      BASE STYLES
      ========================================================================== */
   
   body {
       font-family: 'Crimson Text', serif;
       max-width: 640px;
       margin: 0 auto;
       padding: 20px;
       background: var(--warm-cream);
       color: var(--text-dark);
       min-height: 100vh;
       font-size: 18px;
       line-height: 1.6;
   }
   
   /* Wide container for developer page */
   body.wide-container {
       max-width: 800px;
   }
   
   /* ==========================================================================
      TYPOGRAPHY
      ========================================================================== */
   
   h1 {
       font-family: 'Playfair Display', serif;
       color: var(--forest-green);
       text-align: center;
       font-size: 3.5rem;
       margin-bottom: 10px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }
   
   .puzzle-title {
       text-align: center;
       font-size: 1.3rem;
       color: var(--sage-green);
       margin-bottom: 20px;
       margin-top: 0;
       font-weight: 600;
       font-family: 'Playfair Display', serif;
   }
   
   .puzzle-title:before {
       content: "Theme: ";
       color: var(--text-medium);
       font-weight: 400;
   }
   
   .instructions {
       text-align: center;
       margin-bottom: 25px;
       color: var(--text-medium);
       font-size: 1.2rem;
   }
   
   .status {
       text-align: center;
       margin: 20px 0;
       color: var(--sage-green);
       font-size: 1.2rem;
   }
   
   /* ==========================================================================
      LAYOUT CONTAINERS
      ========================================================================== */
   
   .game-container, .dev-container {
       background: var(--cream-white);
       border-radius: 15px;
       padding: 30px;
       border: 2px solid var(--sage-green);
   }
   
   /* ==========================================================================
      BUTTONS
      ========================================================================== */
   
   /* Base button styles with field notes aesthetic */
   .btn, .guess-button, .audio-button, .refresh-btn, .date-nav-button, .puzzle-link {
       font-family: 'Crimson Text', serif;
       background: var(--sage-green);
       color: var(--cream-white);
       border: 2px solid var(--forest-green);
       border-radius: 8px;
       cursor: pointer;
       font-size: 18px;
       font-weight: 600;
       text-decoration: none;
       display: inline-block;
   }
   
   .btn:disabled, .guess-button:disabled, .audio-button:disabled, 
   .refresh-btn:disabled, .date-nav-button:disabled {
       background: var(--text-light);
       border-color: var(--text-light);
       cursor: not-allowed;
   }
   
   /* Specific button padding */
   .guess-button {
       padding: 12px 24px;
       border-radius: 0 8px 8px 0;
       border-left: none;
   }
   
   .audio-button {
       padding: 14px 22px;
       margin: 0 5px;
       font-size: 14px;
   }
   
   .refresh-btn {
       padding: 12px 24px;
       margin: 15px auto;
       display: block;
   }
   
   .date-nav-button {
       width: 55px;
       height: 55px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
       font-size: 18px;
   }
   
   .puzzle-link {
       padding: 14px 18px;
       min-width: 55px;
       text-align: center;
       font-size: 18px;
   }
   
   /* ==========================================================================
      FORMS AND INPUTS
      ========================================================================== */
   
   .guess-form {
       display: flex;
       margin: 25px 0;
       position: relative;
       box-shadow: 0 4px 12px rgba(0,0,0,0.1);
       border-radius: 8px;
   }
   
   .guess-input {
       flex-grow: 1;
       padding: 12px 16px;
       font-size: 18px;
       font-family: 'Crimson Text', serif;
       border: 2px solid var(--sage-green);
       border-right: none;
       border-radius: 8px 0 0 8px;
       background: var(--cream-white);
       color: var(--text-dark);
   }
   
   .guess-input:focus {
       outline: none;
       border-color: var(--forest-green);
       background: var(--warm-cream);
   }
   
   .guess-input::placeholder {
       color: var(--text-light);
       font-style: italic;
   }
   
   /* ==========================================================================
      AUTOCOMPLETE DROPDOWN
      ========================================================================== */
   
   .autocomplete-dropdown {
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       max-height: 320px;
       overflow-y: auto;
       background: var(--cream-white);
       border: 2px solid var(--sage-green);
       border-top: none;
       border-radius: 0 0 8px 8px;
       z-index: 10;
       display: none;
   }
   
   .autocomplete-item {
       padding: 12px 16px;
       cursor: pointer;
       border-bottom: 1px solid var(--pale-green);
       font-family: 'Crimson Text', serif;
       color: var(--text-dark);
       font-size: 18px;
   }
   
   .autocomplete-item:hover,
   .autocomplete-item.highlighted {
       background: var(--pale-green);
       color: var(--forest-green);
       font-weight: 600;
   }
   
   .autocomplete-item:last-child {
       border-bottom: none;
   }
   
   /* ==========================================================================
      GAME ELEMENTS
      ========================================================================== */
   
   .attempts-counter {
       text-align: center;
       font-weight: 600;
       margin-bottom: 20px;
       font-size: 1.3rem;
       color: var(--sage-green);
       font-family: 'Playfair Display', serif;
   }
   
   .guesses {
       margin-top: 25px;
   }
   
   .guess-row {
       display: flex;
       margin-bottom: 12px;
   }
   
   .guess-cell {
       flex-grow: 1;
       height: 50px;
       line-height: 50px;
       text-align: center;
       margin-right: 8px;
       background: var(--text-light);
       border-radius: 8px;
       font-weight: 600;
       font-family: 'Crimson Text', serif;
       font-size: 1.1rem;
       border: 2px solid transparent;
   }
   
   .guess-cell.correct {
       background: var(--correct-green);
       color: var(--cream-white);
       border-color: var(--forest-green);
   }
   
   .guess-cell.partial {
       background: var(--partial-gold);
       color: var(--text-dark);
       border-color: var(--dusty-gold);
   }
   
   .guess-cell.incorrect {
       background: var(--incorrect-brown);
       color: var(--cream-white);
       border-color: var(--soft-brown);
   }
   
   .message {
       text-align: center;
       margin: 25px 0;
       font-weight: 600;
       font-size: 1.4rem;
       color: var(--forest-green);
       font-family: 'Playfair Display', serif;
   }
   
   /* ==========================================================================
      CLUES AND INFO PANELS
      ========================================================================== */
   
   .clue-container {
       margin-top: 25px;
       padding: 20px;
       background: var(--pale-green);
       border-radius: 10px;
       border-left: 6px solid var(--sage-green);
   }
   
   .clue-title {
       font-weight: 600;
       margin-bottom: 8px;
       color: var(--forest-green);
       font-family: 'Playfair Display', serif;
       font-size: 1.3rem;
   }
   
   .bird-info {
       margin-top: 25px;
       padding: 20px;
       background: var(--warm-cream);
       border-radius: 12px;
       display: none;
       border: 3px solid var(--sage-green);
   }
   
   .bird-image {
       margin-top: 15px;
       width: 100%;
       text-align: center;
   }
   
   .bird-image img {
       max-width: 100%;
       height: auto;
       border-radius: 10px;
       display: block;
       margin: 0 auto;
       border: 3px solid var(--cream-white);
   }
   
   /* ==========================================================================
      AUDIO PLAYER
      ========================================================================== */
   
   .audio-container {
       text-align: center;
       margin: 25px 0;
   }
   
   .simple-audio-player {
       background: var(--pale-green);
       border-radius: 15px;
       padding: 25px;
       margin: 25px auto;
       max-width: 350px;
       border: 3px solid var(--sage-green);
   }
   
   .audio-controls {
       display: flex;
       justify-content: center;
       gap: 12px;
       margin-bottom: 18px;
   }
   
   .audio-status {
       text-align: center;
       font-size: 15px;
       color: var(--text-medium);
       margin-top: 12px;
   }
   
   /* ==========================================================================
      DATE NAVIGATION
      ========================================================================== */
   
   .date-navigation {
       text-align: center;
       margin-bottom: 25px;
       display: flex;
       justify-content: center;
       gap: 10px;
   }
   
   /* ==========================================================================
      DEVELOPER PAGE SPECIFIC
      ========================================================================== */
   
   .puzzle-list {
       margin-top: 25px;
   }
   
   .puzzle-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 18px;
       margin: 12px 0;
       background: var(--pale-green);
       border-radius: 10px;
       border-left: 6px solid var(--sage-green);
   }
   
   .puzzle-date {
       font-weight: 600;
       color: var(--forest-green);
       min-width: 130px;
       font-family: 'Playfair Display', serif;
       font-size: 1.1rem;
   }
   
   .puzzle-bird {
       flex-grow: 1;
       margin: 0 20px;
       font-size: 1.2rem;
       text-align: center;
       color: var(--text-dark);
       font-weight: 500;
   }
   
   .stats {
       background: var(--warm-cream);
       padding: 20px;
       border-radius: 10px;
       margin-bottom: 25px;
       text-align: center;
       border: 2px solid var(--sage-green);
       font-size: 1.1rem;
   }
   
   /* ==========================================================================
      LINKS AND NAVIGATION
      ========================================================================== */
   
   .back-link {
       text-align: center;
       margin-top: 25px;
   }
   
   .back-link a {
       color: var(--sage-green);
       text-decoration: none;
       font-weight: 600;
       font-family: 'Crimson Text', serif;
       font-size: 1.2rem;
   }
   
   .attribution {
       font-size: 20px;
       text-align: center;
       margin-top: 25px;
       color: var(--text-light);
   }
   
   .attribution a {
       color: var(--text-light);
       text-decoration: none;
       font-weight: 500;
   }
   
   .attribution a:hover {
       color: var(--sage-green);
       text-decoration: underline;
   }
   
   .attribution a:visited {
       color: var(--text-light);
   }
   
   /* ==========================================================================
      ERROR STATES
      ========================================================================== */
   
   .error {
       color: var(--muted-red);
       text-align: center;
       padding: 18px;
       background: rgba(155, 68, 68, 0.1);
       border-radius: 8px;
       margin: 25px 0;
       border: 2px solid rgba(155, 68, 68, 0.3);
       font-family: 'Crimson Text', serif;
       font-weight: 500;
       font-size: 1.1rem;
   }
   
   /* ==========================================================================
      RESPONSIVE DESIGN
      ========================================================================== */
   
   @media (max-width: 600px) {
       body {
           padding: 15px;
       }
       
       h1 {
           font-size: 2.5rem;
       }
       
       .game-container, .dev-container {
           padding: 20px;
       }
       
       .date-navigation {
           gap: 8px;
       }
       
       .date-nav-button {
           width: 45px;
           height: 45px;
           font-size: 16px;
       }
       
       .puzzle-item {
           flex-direction: column;
           text-align: center;
           gap: 10px;
       }
       
       .puzzle-date {
           min-width: auto;
       }
       
       .puzzle-bird {
           margin: 0;
       }
   }
   
   /* ==========================================================================
      ANIMATIONS AND TRANSITIONS
      ========================================================================== */
   
   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   .clue-container,
   .bird-info {
       animation: slideIn 0.5s ease;
   }