.five-letters-board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 4px; width: 100%; max-width: 300px; aspect-ratio: 5 / 6; margin: 5px auto; }
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tile-5 { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: bold; text-transform: uppercase; box-sizing: border-box; user-select: none; background: #fff; border: 2px solid #ccc; border-radius: 6px; color: #333; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); transition: transform 0.25s, background-color 0.2s, border-color 0.2s; }
.tile-5[data-state='active'] { background: linear-gradient(180deg, #3377ff 0%, #2255dd 100%); color: white; border: 2px solid #003399; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.tile-5[data-state='correct'] { background: #28a745; border-color: #1e7e34; color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.tile-5[data-state='present'] { background: #ffc107; border-color: #d39e00; color: #333; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.tile-5[data-state='absent'] { background: #777; border-color: #555; color: white; box-shadow: none; }
.cifras-board { margin: 0 auto; background: #eee; padding: 15px; border-radius: 10px; border: 1px solid #ddd; position: relative; }
@keyframes popIn { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
.tile-5.flip { transform: rotateX(90deg); }
.shake { animation: shake 0.5s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
.keyboard { width: 100%; max-width: 100%; margin: 2px auto; padding: 5px; background: #eaeaea; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-sizing: border-box; }
.key-row { display: flex; justify-content: center; margin-bottom: 4px; gap: 3px; }
.key { font-weight: bold; border-radius: 5px; cursor: pointer; display: flex; justify-content: center; align-items: center; height: 40px; flex: 1; min-width: 0; font-size: 0.9rem; border: 1px solid #ccc; user-select: none; background: #fff; color: #333; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); transition: all 0.1s; }
.key:active { transform: translateY(2px); box-shadow: none; }
.key.large { flex: 1.5; font-size: 0.9rem; background: #ddd; }
.key[data-state='correct'] { background: #28a745; color: white; border-color: #1e7e34; }
.key[data-state='present'] { background: #ffc107; color: #333; border-color: #d39e00; }
.key[data-state='absent'] { background: #777; color: white; border-color: #555; opacity: 0.7; }
@keyframes bombPulse { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(220, 53, 69, 0); } 50% { transform: scale(1.2); box-shadow: 0 0 20px rgba(220, 53, 69, 0.8); background-color: #dc3545; color: white; border-color: #dc3545; } 100% { transform: scale(1); box-shadow: 0 0 0 rgba(220, 53, 69, 0); } }
.bomb-effect { animation: bombPulse 0.6s ease-out; }
@media (max-width: 500px) { .cifras-board { padding: 8px; } .five-letters-board { gap: 4px; margin: 10px auto; max-width: 280px; } .tile-5 { font-size: 1.5rem; border-width: 2px; } .key-row { gap: 3px; margin-bottom: 5px; } .key { height: 45px; font-size: 0.9rem; border-radius: 4px; } .key.large { font-size: 0.7rem; flex: 1.2; } .screen-area { padding: 10px; margin-bottom: 10px; } #targetDisplay { font-size: 1.2rem !important; } }
@media (max-width: 350px) { .five-letters-board { max-width: 240px; } .tile-5 { font-size: 1.2rem; } }
.juego { text-align: center; padding: 4px; }
.lifelines { margin-top: 15px; border-top: 1px dashed #ccc; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; padding-top: 10px; flex-wrap: wrap; }
.lifelines-title { font-size: 0.9em; text-transform: uppercase; color: #777; font-weight: bold; margin: 0; }
.lifelines-buttons { display: flex; justify-content: center; gap: 10px; }
button.comodines { background-color: #f0ad4e; color: white; border: none; padding: 8px 16px; font-size: 0.9em; font-weight: bold; border-radius: 6px; cursor: pointer; transition: all 0.1s; text-transform: uppercase; }
button.comodines:hover { background-color: #ec971f; transform: scale(1.05); }
button.comodines:active { transform: scale(0.98); }
button.comodines:disabled { background-color: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
.overlay-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; max-width: 360px; text-align: center; background: #fff; padding: 25px; border-radius: 12px; color: #333; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); border: 1px solid #ccc; z-index: 100; }
.start-button { font-size: 1.5em; padding: 12px 25px; margin-bottom: 12px; border-radius: 30px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: transform 0.1s; background: #007bff; color: white; border: none; cursor: pointer; }
.start-button:hover { transform: scale(1.05); }
.common-description { text-align: left; background: #f8f9fa; padding: 15px; border-radius: 12px; color: #444; border: 1px solid #e9ecef; margin-top: 10px; }
.common-description h3 { margin-top: 0; margin-bottom: 15px; color: #2c3e50; font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px; text-align: center; border-bottom: 2px solid #ddd; padding-bottom: 10px; }
.instructions-list { padding-left: 10px; margin-bottom: 0; line-height: 1.5; font-size: 0.9em; }
.instructions-list li { margin-bottom: 8px; }
.hidden { display: none !important; }
.screen-area { background: #222; padding: 15px; border-radius: 8px; margin-bottom: 12px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); display: flex; justify-content: space-between; align-items: center; }
.target-number { font-size: 2.5rem; font-family: 'Courier New', Courier, monospace; font-weight: bold; text-shadow: 0 0 5px rgba(255, 255, 0, 0.5); }
.timer-display { font-size: 2rem; color: #dc3545; font-family: 'Courier New', Courier, monospace; font-weight: bold; background: #000; padding: 5px 15px; border-radius: 4px; border: 1px solid #444; }