@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
:root { --bg:#f6f7fb; --pastel-yellow:#fff4c2; --pastel-orange: #ffd9b0; --pastel-blue:#dce9ff; --pastel-pink:#f9dce3; --text:#333; --shadow:0 4px 10px rgba(0,0,0,.08); }
* { box-sizing:border-box; font-family:'Nunito', sans-serif; }
body { margin:0; background:var(--bg); display:flex; flex-direction:column; height:100vh; }

/* ======================    HEADER  ====================== */
.app-header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:white; box-shadow:var(--shadow); z-index:10; }
.title { font-size:1.4rem; }
.md-btn { border:none; border-radius:16px; padding:8px 16px; cursor:pointer; transition:all .2s ease; }
.md-btn.primary { background:var(--pastel-blue); }
.md-btn.icon { background:var(--pastel-pink); }

/* ======================    GAME BOARD ====================== */
#gameBoard { flex:1; display:flex; position:relative; }
.player { flex:1; padding:12px; transition:opacity .2s; display:flex; flex-direction:column; height:100%; }
.player.inactive { opacity:.4; }
.player.active { background:rgba(255,255,255,.5); }
.divider { width:4px; background:#ddd; }
.top { display:flex; justify-content:space-between; font-size:1.3rem; }
.time { font-size:2rem; }
.question { background:var(--pastel-orange); margin:16px auto; padding:24px; border-radius:24px; box-shadow:var(--shadow); text-align:center; font-size:3.5rem; min-width: 180px; min-height: 120px;}
.options { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:25px; min-height:180px; align-items:stretch; }
.option-btn { background:#f0f0f0; border-radius:16px; padding:12px; box-shadow:var(--shadow); cursor:pointer; display:flex; justify-content:center; align-items:center; text-align:center; font-size:2rem; border:none; transition:transform .15s, background .2s; margin: 10px;}
.option-btn:hover { transform:scale(1.05); background:#fff9d6; }
.option-btn:disabled { opacity:.6; cursor:not-allowed; }
.option-btn.correct { background: #77dd77; color: white; }
.option-btn.incorrect {  background: #f4a6a6; color: white; }
.pinyin { font-size: 0.6em; opacity: 0.6; margin-left: 6px; white-space: nowrap; }

/* ======================     FOOTER ====================== */
.app-footer { text-align:center; padding:6px; font-size:.85rem; background:white; box-shadow:var(--shadow); }

/* ======================     UTILITIES ====================== */
.hidden { display:none !important; }
.time.penalty { color: #e53935; font-weight: bold; transform: scale(1.15); transition: transform 0.1s ease; }
.time.penalty { animation: penaltyShake 0.12s infinite alternate; }

@keyframes penaltyShake {
  from { transform: translateX(-1px) scale(1.15); }
  to   { transform: translateX(1px) scale(1.15); }
}
/* ====================== COUNTDOWN SCREEN ====================== */
.countdown-overlay { position: fixed; top: 0; left: 0; width: 50vw; height: 100vh; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 9999; } 
.countdown-box { font-size: 96px; font-weight: bold; color: #121211; text-shadow: 0 0 20px rgba(0,0,0,0.4); animation: countdownPop 0.8s ease-out; }
@keyframes countdownPop {
  0% { transform: scale(0.5); opacity: 0; }
  40% { transform: scale(1.2); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
/* ====================== ESTADÍSTICAS ====================== */
.history-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 9999; } 
.history-box { background: white; padding: 20px; width: 320px; max-height: 70vh; border-radius: 12px; display: flex; flex-direction: column; } 
.history-list { overflow-y: auto; flex: 1; margin: 10px 0; } 
.history-item { padding: 8px; border-bottom: 1px solid #ddd; } 
.history-actions { display: flex; justify-content: space-between; }

/* ======================    MENU SELECCIÓN JUEGO / CONFIGURACIÓN ====================== */
.menu-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.55); display:flex; justify-content:center; align-items:center; z-index:1000; }
.menu-box { background:white; padding:24px; border-radius:20px; text-align:center; box-shadow:0 6px 30px rgba(0,0,0,.25); max-width:500px; width:90%; animation:popup .25s ease-out; display:flex; flex-direction:column; gap:16px; }
.menu-box h2 { margin-bottom:8px; font-size:1.5rem; }
.menu-section { display:flex; flex-direction:column; gap:8px; text-align:left; }
.menu-section h3 { margin:0 0 4px 0; font-size:1.1rem; }
.menu-section .flex-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } 
.menu-section .flex-row h3 { margin: 0; font-size: 1rem; }

/* Selección de idioma */
#languageSection .menu-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; justify-items: center; }
#languageSection .menu-btn { min-width: 100px; padding: 10px 16px; border-radius: 16px; background: var(--pastel-blue); color: var(--text); font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; text-align: center; }
#languageSection .menu-btn.active { background: var(--pastel-yellow); border-color: var(--pastel-blue); transform: scale(1.05); }*
#languageSection .menu-btn:hover { transform: scale(1.05); background: #dce9ff; }

/* Tipo de juego: botones en línea tipo toggle */
#gameTypeSection .menu-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; justify-items: center; }
#gameTypeSection .menu-btn { padding: 10px 16px; min-width: 60px; font-size: 0.9rem; border-radius: 16px; background: var(--pastel-blue); color: var(--text); font-weight: 600; border: 2px solid transparent; transition: all 0.2s; }
#gameTypeSection .menu-btn.active { background:var(--pastel-yellow); border-color:var(--pastel-blue); transform:scale(1.05); }

/* Selección vocabulario */
#vocabSection select { width:100%; padding:8px 12px; border-radius:12px; border:1px solid #ccc; font-size:1rem; }

/* Nombres jugadores: inputs en línea */
#playerNamesSection { display:flex; gap:8px; justify-content:center; }
#playerNamesSection input { flex:1; padding:8px 12px; border-radius:12px; border:1px solid #ccc; font-size:1rem; text-align:center; }

/* Botón START */
#btnStartGame { margin-top:12px; padding:12px 24px; border-radius:16px; background:var(--pastel-blue); font-size:1.2rem; cursor:pointer; border:none; transition:transform .15s, background .2s; }
#btnStartGame:hover { background:var(--pastel-pink); transform:scale(1.03); }

/* ====================== SWITCH Y TIME INLINE ====================== */

#pinyinSection .flex-row { display:flex; align-items:center; gap:10px; justify-content: flex-start; }
#pinyinSection h3 { margin:0; font-size:1rem; white-space:nowrap; }

#timeSection .flex-row { display:flex; align-items:flex-start; gap:10px; justify-content: flex-start; }
#timeSection h3 { margin:0; font-size:1rem; white-space:nowrap; }
#timeSection .menu-options { display:flex; gap:5px; white-space: nowrap; justify-content: flex-start; }

/* ====================== TIME BUTTONS TOGGLE ====================== */ 
#timeSection .menu-btn { background: var(--pastel-yellow); border: 2px solid transparent; font-weight: 600; transition: all 0.2s ease; } /* 🔥 Botón de tiempo activo */ 
#timeSection .menu-btn.active { background: var(--pastel-orange); border-color: #f0b000; transform: scale(1.08); box-shadow: 0 0 0 2px rgba(240,176,0,0.35); }

/* ======================    WIN POPUP  ====================== */
.win-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.win-box { background: white; padding: 28px; border-radius: 24px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.3); animation: popup .3s ease-out; max-width: 320px; width: 90%; }
.win-box h2 { margin: 0 0 12px; font-size: 1.8rem; }
.win-box p { font-size: 1.2rem; margin: 8px 0; }
.win-box strong { font-size: 1.4rem; }
.win-box button { margin-top: 16px; padding: 10px 22px; border-radius: 16px; border: none; cursor: pointer; background: var(--pastel-blue); font-size: 1.1rem; transition: transform .15s, background .2s; }
.win-box button:hover { background: var(--pastel-pink); transform: scale(1.05); }
@keyframes popup { from { transform:scale(.9); opacity:0; } to { transform:scale(1); opacity:1; } }

/* ======================    PLAYER HIGHLIGHT STATES  ====================== */
.player { position: relative; transition: box-shadow .25s ease, transform .25s ease; } 
.player.active { box-shadow: 0 0 0 4px #77dd77, 0 0 18px rgba(119,221,119,.6); animation: activePulse .8s ease-out; } /* Jugador activo */
.player.fail { box-shadow: 0 0 0 4px #f4a6a6, 0 0 18px rgba(244,166,166,.7); animation: failShake .3s ease; } /* Fallo */
/* ======================   ANIMATIONS ====================== */
@keyframes activePulse { from { transform: scale(0.98); } to { transform: scale(1); } }
@keyframes failShake { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } 100% { transform: translateX(0); } }