.juego, .juego * { box-sizing: border-box; }
.juego { margin: 11px 4px 4px 4px; text-align: center; background-color: #eee; border-radius: 10px; border: 1px solid #ddd; padding-top: 8px; }
#game, .start-container { width: 100%; margin: 0 auto; padding-top: 12px; }
.parrafos { margin: 10px 0; text-align: center; line-height: 1.6em; font-size: 1.1em; color: #333; }
.rosco { position: relative; width: 290px; height: 290px; margin: 0px auto; background: white; border-radius: 50%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border: 10px solid #eee; }
.letter { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; position: absolute; transform-origin: center center; border-radius: 50%; background: linear-gradient(180deg, #3377ff 0%, #2255dd 100%); color: white; font-weight: bold; font-size: 13px; border: 2px solid #003399; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.2s, box-shadow 0.2s; z-index: 10; user-select: none; }
.active-letter { background: #ff9900 !important; border-color: #cc7a00 !important; transform: scale(1.3) !important; box-shadow: 0 0 15px rgba(255, 153, 0, 0.6) !important; z-index: 20 !important; animation: popIn 0.3s ease-out; }
@keyframes popIn { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1.3); } }
.letter.correct, .letter[style*="background-color: green"] { background: linear-gradient(180deg, #28a745 0%, #218838 100%) !important; border-color: #1e7e34 !important; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; color: white !important; }
.letter.incorrect, .letter[style*="background-color: red"] { background: linear-gradient(180deg, #dc3545 0%, #c82333 100%) !important; border-color: #bd2130 !important; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; color: white !important; }
.timer-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #333; border: 4px solid #555; border-radius: 50%; width: 175px; height: 175px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); color: white; z-index: 5; }
.counter-container { display: flex; justify-content: space-between; width: 80%; margin-bottom: 10px; font-family: 'Courier New', monospace; }
.correct-counter { color: #28a745; font-size: 1.2em; text-shadow: 0 0 5px #28a745; }
.incorrect-counter { color: #d9534f; font-size: 1.2em; text-shadow: 0 0 5px #d9534f; }
.timer { font-size: 3em; font-weight: bold; font-family: 'Courier New', monospace; color: #ffcc00; text-shadow: 0 0 10px rgba(255, 204, 0, 0.5); margin: 0; line-height: 1; }
.word-container { margin: 14px 0; background: white; padding: 10px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); border: 1px solid #eee; }
.definition-prefix { display: block; font-weight: bold; color: #1978a1; font-size: 1.2em; margin-bottom: 0.5em; text-transform: uppercase; }
.word-changing { animation: flashText 0.5s; }
@keyframes flashText { 0% { opacity: 0.2; } 100% { opacity: 1; } }
.options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 15px; }
.option { background: white; border: 1px solid #ccc; border-bottom: 3px solid #bbb; border-radius: 6px; padding: 8px 5px; cursor: pointer; font-size: 1em; font-weight: bold; color: #333; width: 45%; min-width: 100px; text-align: center; transition: all 0.1s; }
.option:hover { transform: translateY(-2px); border-bottom-width: 3px; box-shadow: 0 2px 0 #bbb; background: #fdfdfd; color: #1978a1; }
.option:active { transform: translateY(1px); border-bottom-width: 1px; }
.option.correct { background-color: #d4edda; border-color: #28a745; color: #155724; }
.option.incorrect { background-color: #f8d7da; border-color: #d9534f; color: #721c24; }
.boton, .start-button, .continue-button { background-color: #1978a1; color: white; border: none; padding: 12px 24px; font-size: 1.2em; font-weight: bold; border-radius: 6px; cursor: pointer; transition: all 0.1s; text-transform: uppercase; margin: 10px auto; display: inline-block; text-decoration: none; }
.boton:hover, .start-button:hover, .continue-button:hover { background-color: #146080; transform: scale(1.05); color: white !important; }
.boton:active, .start-button:active, .continue-button:active { transform: scale(0.98); }
.lifelines { border-top: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; gap: 15px; }
.lifelines-title { font-size: 0.9em; text-transform: uppercase; color: #777; font-weight: bold; margin: 0; }
.lifelines-buttons { display: flex; justify-content: center; gap: 15px; }
button.comodines { background-color: #f0ad4e; font-size: 0.9em; padding: 8px 16px; }
button.comodines:hover { background-color: #ec971f; }
button:disabled { background-color: #ccc !important; box-shadow: none !important; cursor: not-allowed !important; transform: none !important; color: #666 !important; }
.hidden { display: none !important; }
.common-description { max-width: 600px; background: #eaeaea; padding: 12px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); color: #444; line-height: 1.5; text-align: left; width: 96%; margin: 10px auto; }
.common-description p { margin: 5px 0; }