/* Encapsulamos todo para que no afecte al resto del blog */
.game-wrapper {
all: initial; /* Reseteamos estilos heredados del blog */
display: block;
font-family: ‘Poppins’, sans-serif;
background: #0f172a;
color: white;
padding: 20px;
border-radius: 15px;
max-width: 800px;
margin: 20px auto;
min-height: 500px;
}

@import url(‘https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Poppins:wght@400;600;800&display=swap’);

.hero-font { font-family: ‘Luckiest Guy’, cursive; letter-spacing: 2px; }
.card-gradient { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border: 2px solid #475569; }

.input-hero {
background: rgba(255, 255, 255, 0.1) !important;
border: 2px solid #64748b !important;
color: white !important;
text-align: center !important;
padding: 10px !important;
width: 100% !important;
border-radius: 10px !important;
font-size: 1.2rem !important;
margin-bottom: 10px !important;
}

.input-hero:disabled {
background: rgba(56, 189, 248, 0.2) !important;
border-color: #38bdf8 !important;
color: #38bdf8 !important;
}

.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); }
}

.btn-game {
background: #0284c7;
color: white;
border: none;
padding: 15px;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
width: 100%;
font-size: 1.1rem;
}
.btn-game:hover { background: #0ea5e9; }
.hidden { display: none !important; }

const verbs = {
easy: [
{ inf: ‘be’, past: [‘was’, ‘were’], part: ‘been’, mean: ‘ser/estar’ },
{ inf: ‘do’, past: ‘did’, part: ‘done’, mean: ‘hacer’ },
{ inf: ‘go’, past: ‘went’, part: ‘gone’, mean: ‘ir’ },
{ inf: ‘see’, past: ‘saw’, part: ‘seen’, mean: ‘ver’ },
{ inf: ‘have’, past: ‘had’, part: ‘had’, mean: ‘tener’ }
],
medium: [
{ inf: ‘break’, past: ‘broke’, part: ‘broken’, mean: ‘romper’ },
{ inf: ‘choose’, past: ‘chose’, part: ‘chosen’, mean: ‘elegir’ },
{ inf: ‘drive’, past: ‘drove’, part: ‘driven’, mean: ‘conducir’ },
{ inf: ‘know’, past: ‘knew’, part: ‘known’, mean: ‘saber’ },
{ inf: ‘speak’, past: ‘spoke’, part: ‘spoken’, mean: ‘hablar’ }
],
hard: [
{ inf: ‘arise’, past: ‘arose’, part: ‘arisen’, mean: ‘surgir’ },
{ inf: ‘shrink’, past: ‘shrank’, part: ‘shrunk’, mean: ‘encoger’ },
{ inf: ‘strive’, past: ‘strove’, part: ‘striven’, mean: ‘esforzarse’ },
{ inf: ‘weave’, past: ‘wove’, part: ‘woven’, mean: ‘tejer’ },
{ inf: ‘withdraw’, past: ‘withdrew’, part: ‘withdrawn’, mean: ‘retirar’ }
]
};

let currentVerbs = [];
let currentIndex = 0;
let score = 0;

function startGame(level) {
currentVerbs = […verbs[level]].sort(() => Math.random() – 0.5);
currentIndex = 0;
score = 0;
document.getElementById(‘start-screen’).classList.add(‘hidden’);
document.getElementById(‘game-screen’).classList.remove(‘hidden’);
loadVerb();
}

function loadVerb() {
const verb = currentVerbs[currentIndex];
const modes = [‘inf’, ‘past’, ‘part’, ‘mean’];
const mode = modes[Math.floor(Math.random() * modes.length)];

const inputs = {
inf: document.getElementById(‘input-inf’),
past: document.getElementById(‘input-past’),
part: document.getElementById(‘input-part’)
};

Object.values(inputs).forEach(i => { i.value = »; i.disabled = false; });
document.getElementById(‘sub-clue’).innerText = »;
document.getElementById(‘hint-box’).innerText = »;

if (mode === ‘mean’) {
document.getElementById(‘main-clue’).innerText = verb.mean;
document.getElementById(‘challenge-label’).innerText = ‘RETO: SIGNIFICADO’;
} else if (mode === ‘inf’) {
document.getElementById(‘main-clue’).innerText = verb.inf;
inputs.inf.value = verb.inf; inputs.inf.disabled = true;
document.getElementById(‘sub-clue’).innerText = verb.mean;
document.getElementById(‘challenge-label’).innerText = ‘RETO: INFINITIVO’;
} else if (mode === ‘past’) {
const p = Array.isArray(verb.past) ? verb.past[0] : verb.past;
document.getElementById(‘main-clue’).innerText = p;
inputs.past.value = p; inputs.past.disabled = true;
document.getElementById(‘sub-clue’).innerText = verb.mean;
document.getElementById(‘challenge-label’).innerText = ‘RETO: PASADO’;
} else if (mode === ‘part’) {
document.getElementById(‘main-clue’).innerText = verb.part;
inputs.part.value = verb.part; inputs.part.disabled = true;
document.getElementById(‘sub-clue’).innerText = verb.mean;
document.getElementById(‘challenge-label’).innerText = ‘RETO: PARTICIPIO’;
}

document.getElementById(‘score’).innerText = score;
}

function checkAnswer() {
const verb = currentVerbs[currentIndex];
const inf = document.getElementById(‘input-inf’).value.trim().toLowerCase();
const past = document.getElementById(‘input-past’).value.trim().toLowerCase();
const part = document.getElementById(‘input-part’).value.trim().toLowerCase();
const card = document.getElementById(‘game-card’);

const isPastOk = Array.isArray(verb.past) ? verb.past.includes(past) : past === verb.past;

if (inf === verb.inf && isPastOk && part === verb.part) {
score += 100;
currentIndex++;
if (currentIndex card.classList.remove(‘shake’), 500);
const pText = Array.isArray(verb.past) ? verb.past.join(‘/’) : verb.past;
document.getElementById(‘hint-box’).innerHTML = `Incorrecto: ${verb.inf} | ${pText} | ${verb.part}`;
}
}

function endGame() {
document.getElementById(‘game-screen’).classList.add(‘hidden’);
document.getElementById(‘end-screen’).classList.remove(‘hidden’);
document.getElementById(‘final-score’).innerText = score;
}