/* Estilos basados en el HTML original */
.aire-wrapper body { margin:0; }
body { margin: 0; padding: 0; min-height: 100vh; font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(to top, #aeefff 0%, #e0f7fa 100%); overflow-x: hidden; }
.cloud { position: absolute; top: 0; width: 200px; height: 80px; background: rgba(255,255,255,0.7); border-radius: 100px; filter: blur(2px); animation: cloudMove 60s linear infinite; }
.cloud:nth-child(1) { left: -200px; top: 10vh; animation-duration: 50s; }
.cloud:nth-child(2) { left: -300px; top: 20vh; animation-duration: 70s; }
.cloud:nth-child(3) { left: -250px; top: 30vh; animation-duration: 60s; }
.cloud:nth-child(4) { left: -220px; top: 40vh; animation-duration: 80s; }
@keyframes cloudMove { 0% { left: -250px; } 100% { left: 100vw; } }
.city { position: fixed; bottom: 0; left: 0; width: 100vw; height: 120px; background: linear-gradient(to top, #b0bec5 60%, transparent 100%); z-index: 2; pointer-events: none; }
.city svg { width: 100vw; height: 120px; display: block; }
.container { position: relative; z-index: 3; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.title { font-size: 3rem; font-weight: bold; color: #2196f3; margin-bottom: 20px; letter-spacing: 0.1em; animation: floatTitle 2s infinite alternate; text-shadow: 0 2px 8px #90caf9; }
@keyframes floatTitle { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
.bubble-btn { background: linear-gradient(to top, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.2) 100%); border: none; border-radius: 30px; padding: 18px 48px; margin: 12px; font-size: 1.3rem; color: #2196f3; font-weight: 600; box-shadow: 0 4px 16px rgba(33,150,243,0.08); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; outline: none; position: relative; }
.bubble-btn:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(33,150,243,0.15); background: linear-gradient(to top, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.3) 100%); }
.game-panel { background: none; border-radius: 24px; box-shadow: none; padding: 16px 0; margin-top: 24px; min-width: 320px; max-width: 420px; display: none; flex-direction: column; align-items: center; position: relative; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95);} to { opacity: 1; transform: scale(1);} }
.back-btn { background: none; border: none; color: #2196f3; font-size: 1.1rem; margin-top: 12px; cursor: pointer; text-decoration: underline; border-radius: 8px; padding: 6px 12px; transition: background 0.2s; }
.back-btn:hover { background: #e3f2fd; }
.wordle-setup { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.wordle-letters-btn { background: #e3f2fd; border: none; border-radius: 16px; margin: 0 8px; padding: 8px 18px; font-size: 1.1rem; color: #1976d2; cursor: pointer; transition: background 0.2s; }
.wordle-letters-btn.selected { background: #1976d2; color: #fff; }
.wordle-board { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 12px 0; align-items: center; }
.wordle-row { display: flex; flex-direction: row; gap: 4px; }
.wordle-cell { width: 44px; height: 44px; background: rgba(255,255,255,0.12); border-radius: 12px; border: 2px solid #b3e5fc; font-size: 1.5rem; color: #1976d2; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: background 0.2s, color 0.2s; box-shadow: 0 2px 8px rgba(33,150,243,0.07); }
.wordle-cell.gray { background: #bdbdbd; color: #fff; }
@keyframes wordleReveal { 0% { transform: scale(1.1); filter: brightness(1.5); } 80% { transform: scale(1.05); filter: brightness(1.2); } 100% { transform: scale(1); filter: brightness(1); } }
.wordle-cell.yellow { background: #fff176; color: #fff; animation: wordleReveal 0.4s; }
.wordle-cell.green { background: #66bb6a; color: #fff; animation: wordleReveal 0.4s; }
.wordle-keyboard { display: flex; flex-wrap: wrap; justify-content: center; margin: 12px 0 0 0; gap: 6px; }
.wordle-key { background: rgba(255,255,255,0.5); border: none; border-radius: 8px; padding: 8px 12px; margin: 2px; font-size: 1rem; color: #1976d2; font-weight: 600; cursor: pointer; transition: background 0.2s; min-width: 32px; box-shadow: 0 2px 6px rgba(33,150,243,0.05); }
.wordle-key.gray { background: #bdbdbd; color: #fff; }
.wordle-key.yellow { background: #fff176; color: #fff; }
.wordle-key.green { background: #66bb6a; color: #fff; }
.wordle-key:active { background: #90caf9; }
.icon-btn { position: absolute; top: 12px; left: 18px; background: none; border: none; cursor: pointer; z-index: 10; padding: 0; }
.icon-btn.help { left: 54px; }
.icon-svg { width: 28px; height: 28px; vertical-align: middle; fill: #ffd600; filter: drop-shadow(0 2px 4px #fffde7); }
.icon-svg.help { fill: #2196f3; filter: drop-shadow(0 2px 4px #e3f2fd); }
.wordle-hints { margin: 10px 0; font-size: 1rem; color: #1976d2; background: #e3f2fd; border-radius: 10px; padding: 8px 14px; box-shadow: 0 2px 8px rgba(33,150,243,0.07); }
.wordle-hints.used { opacity: 0.6; }
.score-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 0.95rem; background: #e3f2fd; border-radius: 12px; overflow: hidden; }
.score-table th, .score-table td { padding: 6px 10px; text-align: center; border-bottom: 1px solid #b3e5fc; }
.score-table th { background: #b3e5fc; color: #1976d2; }
.score-table tr:last-child td { border-bottom: none; }
.quiz-question { font-size: 1.2rem; color: #1976d2; margin-bottom: 12px; text-align: center; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.quiz-option { background: #e3f2fd; border: none; border-radius: 12px; padding: 10px 18px; font-size: 1rem; color: #1976d2; cursor: pointer; transition: background 0.2s; }
.quiz-option.selected { background: #1976d2; color: #fff; }
.quiz-score { font-size: 1.1rem; color: #388e3c; margin-top: 10px; font-weight: bold; }
.hangman-drawing { width: 120px; height: 120px; margin: 0 auto 12px auto; display: block; }
.hangman-word { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.hangman-letter { width: 38px; height: 44px; background: rgba(255,255,255,0.3); border-radius: 10px; border: 2px solid #b3e5fc; font-size: 1.3rem; color: #1976d2; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: background 0.2s, color 0.2s; }
.hangman-letter.green { background: #66bb6a; color: #fff; }
.hangman-letter.gray { background: #bdbdbd; color: #fff; }
.hangman-letter.transparent { background: rgba(255,255,255,0.3); color: #1976d2; }
.hangman-keyboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.hangman-key { background: rgba(255,255,255,0.5); border: none; border-radius: 8px; padding: 8px 12px; margin: 2px; font-size: 1rem; color: #1976d2; font-weight: 600; cursor: pointer; transition: background 0.2s; min-width: 32px; box-shadow: 0 2px 6px rgba(33,150,243,0.05); }
.hangman-key.gray { background: #bdbdbd; color: #fff; }
.hangman-key.green { background: #66bb6a; color: #fff; }
.hangman-key.transparent { background: rgba(255,255,255,0.3); color: #1976d2; }
.hangman-key:active { background: #90caf9; }
@media (max-width: 600px) {
  .title { font-size: 2rem; }
  .game-panel { min-width: 90vw; max-width: 98vw; padding: 18px 4vw; }
  .wordle-cell, .hangman-letter { width: 32px; height: 32px; font-size: 1.1rem; }
  .hangman-drawing { width: 80px; height: 80px; }
}