/* ----- ANKI KÁRTYA JÁTÉK ----- */
.mechanical-score { display: flex; gap: 4px; margin-bottom: 20px; }
.mech-digit { background-color: #f0f0f0; color: #111; font-family: 'Impact', sans-serif; font-size: 32px; padding: 5px 12px; border-radius: 4px; box-shadow: inset 0 5px 10px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.8); border: 1px solid #000; position: relative; }
.mech-digit::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: rgba(0,0,0,0.8); box-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.scene { width: 80vw; max-width: 300px; height: 120vw; max-height: 450px; perspective: 1000px; margin-bottom: 20px; }
.card { width: 100%; height: 100%; position: relative; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; cursor: pointer; }
.card.is-flipped { transform: rotateY(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Georgia', serif; font-size: 26px; font-weight: bold; color: #111; background-color: #fdfbf7; border-radius: 12px; border: 1px solid #ccc; padding: 20px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0,0,0,0.5); text-align: center; transition: all 0.5s; }
.card-back { transform: rotateY(180deg); color: #7c2626; }
.card-hint { font-size: 14px; color: #666; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }

.wear-10 { box-shadow: inset 0 0 15px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.5); }
.wear-50 { box-shadow: inset 0 0 30px rgba(50,30,10,0.15), 0 10px 20px rgba(0,0,0,0.5); border-radius: 15px; background-image: linear-gradient(45deg, transparent 40%, rgba(0,0,0,0.03) 45%, transparent 50%); }
.wear-100 { box-shadow: inset 0 0 50px rgba(80,50,20,0.3), 0 10px 20px rgba(0,0,0,0.5); border-radius: 20px 10px 15px 25px; background-image: linear-gradient(45deg, transparent 30%, rgba(0,0,0,0.05) 35%, transparent 40%), linear-gradient(-45deg, transparent 70%, rgba(0,0,0,0.05) 75%, transparent 80%); }
.wear-200 { box-shadow: inset 0 0 80px rgba(80,40,10,0.5), inset 0 0 10px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.6); border-radius: 25px 5px 20px 8px; filter: sepia(0.3) contrast(1.1); background-image: linear-gradient(15deg, transparent 20%, rgba(0,0,0,0.1) 22%, transparent 24%), linear-gradient(-25deg, transparent 60%, rgba(0,0,0,0.1) 62%, transparent 64%); }
.wear-500 { box-shadow: inset 0 0 100px rgba(60,20,0,0.7), inset 0 0 20px rgba(0,0,0,0.8); border-radius: 30px 2px 25px 2px; filter: sepia(0.6) contrast(1.2) brightness(0.9); border: 2px solid rgba(0,0,0,0.3); background-image: radial-gradient(circle at 20% 80%, rgba(100,50,0,0.2) 0%, transparent 40%), linear-gradient(15deg, transparent 20%, rgba(0,0,0,0.15) 21%, transparent 22%), linear-gradient(-25deg, transparent 60%, rgba(0,0,0,0.15) 61%, transparent 62%); }

.controls-wrapper { display: flex; align-items: center; justify-content: center; gap: 20px; height: 100px; visibility: hidden; }
.controls-wrapper.show { visibility: visible; }
.score-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.led-screen { background-color: #111; border: 3px solid #333; border-radius: 5px; padding: 5px 10px; font-family: 'Share Tech Mono', monospace; font-size: 24px; min-width: 40px; text-align: center; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
.led-green { color: var(--led-green); text-shadow: 0 0 8px var(--led-green); }
.led-red { color: var(--led-red); text-shadow: 0 0 8px var(--led-red); }
.arcade-btn { width: 70px; height: 70px; border-radius: 50%; border: 4px solid #111; cursor: pointer; font-size: 35px; font-weight: bold; color: white; display: flex; justify-content: center; align-items: center; outline: none; transition: transform 0.1s, filter 0.1s; }
.btn-yes { background: radial-gradient(circle at 30% 30%, #4CAF50, #1b5e20); box-shadow: 0 8px 0 #111, 0 15px 15px rgba(0,0,0,0.5); }
.btn-no { background: radial-gradient(circle at 30% 30%, #f44336, #b71c1c); box-shadow: 0 8px 0 #111, 0 15px 15px rgba(0,0,0,0.5); }
.arcade-btn:active { transform: translateY(8px); box-shadow: 0 0 0 #111, 0 5px 5px rgba(0,0,0,0.5); }

/* ----- NYELVTAN ----- */
.grammar-box { background: #fdfbf7; color: #111; padding: 20px; border-radius: 10px; width: 90%; max-width: 400px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); font-family: 'Georgia', serif; font-weight: bold; }
.grammar-sentence { font-size: 20px; line-height: 1.6; margin-bottom: 20px; }
.grammar-input { width: 100px; font-size: 18px; font-family: 'Courier New', Courier, monospace; font-weight: bold; border: none; border-bottom: 2px solid #000; background: transparent; text-align: center; outline: none; color: #000; }
.grammar-btn { background: var(--dark-red); color: white; border: 2px solid #000; padding: 10px 20px; font-size: 16px; cursor: pointer; width: 100%; margin-bottom: 10px; font-family: 'Press Start 2P', cursive; font-size: 10px; }
.grammar-btn:active { background: #330e0e; }
.hint-btn { background: #444; color: #ccc; border: none; padding: 5px; font-size: 12px; cursor: pointer; width: 100%; text-align: left; }
.hint-text { display: none; background: #333; color: #fff; padding: 10px; font-size: 14px; font-family: 'Courier New', Courier, monospace; margin-bottom: 10px; }
.grammar-feedback { text-align: center; font-size: 18px; height: 25px; margin-bottom: 10px; }

/* ----- RAGOZÓ TERMINÁTOR ----- */
.terminator-box { background-color: #000; border: 6px solid #444; border-radius: 10px; width: 90%; max-width: 400px; padding: 20px; box-shadow: inset 0 0 20px #000, 0 10px 20px rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; }
.health-bar-container { width: 100%; height: 30px; background-color: #222; border: 4px solid #555; margin-bottom: 30px; position: relative; }
.health-bar-inner { height: 100%; width: 100%; background-color: #00ff00; transition: width 0.1s linear, background-color 0.3s; box-shadow: inset 0 5px 5px rgba(255,255,255,0.4), inset 0 -5px 5px rgba(0,0,0,0.4); }
.term-score-display { font-family: 'Share Tech Mono', monospace; font-size: 30px; color: #ffcc00; margin-bottom: 20px; text-shadow: 0 0 10px #ffcc00; }
.terminal-display { font-family: 'Courier New', Courier, monospace; font-size: 24px; color: #00ff00; text-shadow: 0 0 5px #00ff00; margin-bottom: 20px; text-align: center; }
.terminal-input-wrapper { display: flex; align-items: center; width: 100%; background-color: #111; border: 2px solid #00ff00; padding: 10px; box-sizing: border-box; }
.terminator-input { background: transparent; border: none; color: #00ff00; font-family: 'Courier New', Courier, monospace; font-size: 20px; font-weight: bold; outline: none; width: 100%; text-shadow: 0 0 5px #00ff00; text-transform: lowercase; }
.term-feedback { margin-top: 15px; height: 20px; font-family: 'Courier New', Courier, monospace; font-size: 16px; font-weight: bold; text-align: center; }

/* ----- PUZZLE ----- */
.puzzle-box { background-color: #111; border: 6px solid #444; border-radius: 10px; width: 90%; max-width: 500px; padding: 20px; box-shadow: inset 0 0 20px #000, 0 10px 20px rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; }
.puzzle-hu-sentence { font-family: 'Courier New', Courier, monospace; font-size: 18px; color: #ffcc00; text-align: center; margin-bottom: 20px; font-weight: bold; }
.puzzle-dropzone { display: flex; flex-wrap: wrap; gap: 10px; min-height: 60px; width: 100%; background-color: #222; border: 2px dashed #555; padding: 10px; box-sizing: border-box; margin-bottom: 15px; justify-content: center; align-items: center; }
.puzzle-wordpool { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; justify-content: center; margin-bottom: 20px; min-height: 80px; }
.puzzle-word { background-color: #fdfbf7; color: #111; border: 2px solid #999; padding: 8px 12px; font-family: 'Georgia', serif; font-weight: bold; font-size: 18px; cursor: pointer; border-radius: 5px; box-shadow: 0 4px 0 #999; transition: transform 0.1s; user-select: none; }
.puzzle-word:active { transform: translateY(4px); box-shadow: 0 0 0 #999; }
.puzzle-word.used { visibility: hidden; }
.puzzle-controls { display: flex; gap: 10px; margin-bottom: 20px; width: 100%; justify-content: center; }
.puzzle-action-btn { background-color: #555; color: white; border: 2px solid #222; padding: 10px 15px; font-family: 'Press Start 2P', cursive; font-size: 10px; cursor: pointer; box-shadow: 0 4px 0 #222; }
.puzzle-action-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #222; }

/* ----- MEMÓRIA KÁRTYA ----- */
.memory-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 90%; max-width: 500px; margin-bottom: 20px; }
@media (min-width: 400px) { .memory-board { grid-template-columns: repeat(4, 1fr); } }
.mem-card { background-color: #fdfbf7; border: 2px solid #4a1515; border-radius: 8px; height: 80px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-family: 'Georgia', serif; font-weight: bold; font-size: 14px; color: #111; text-align: center; padding: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: all 0.3s; position: relative; transform-style: preserve-3d; }
.mem-card.hidden { background-image: linear-gradient(45deg, #4a1515 25%, #7c2626 25%, #7c2626 50%, #4a1515 50%, #4a1515 75%, #7c2626 75%, #7c2626 100%); background-size: 20px 20px; color: transparent; border-color: #222; }
.mem-card.matched { visibility: hidden; opacity: 0; transition: visibility 0s 0.5s, opacity 0.5s linear; }
.mem-card.selected { border-color: #ffcc00; box-shadow: 0 0 10px #ffcc00; }

/* ----- AKASZTÓFA ----- */
.hangman-box { background-color: #111; border: 6px solid #444; border-radius: 10px; width: 95%; max-width: 600px; padding: 20px; box-shadow: inset 0 0 20px #000, 0 10px 20px rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; }
.lives-container { font-size: 24px; margin-bottom: 20px; display: flex; gap: 10px; }
.heart { transition: transform 0.3s, opacity 0.3s; display: inline-block; }
.heart.lost { transform: scale(0); opacity: 0; }
.hangman-word { font-family: 'Courier New', Courier, monospace; font-size: 30px; color: #00ff00; letter-spacing: 8px; margin-bottom: 30px; text-shadow: 0 0 5px #00ff00; text-align: center; min-height: 40px; }
.keyboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; margin-bottom: 10px; }
.key-btn { background: #333; color: #fff; border: 2px solid #555; border-radius: 4px; padding: 10px 0; font-size: 14px; font-family: 'Press Start 2P', cursive; cursor: pointer; width: 35px; text-align: center; box-shadow: 0 4px 0 #111; user-select: none; transition: transform 0.1s, box-shadow 0.1s; }
.key-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #111; }
.key-btn.correct { background: var(--led-green); color: #000; pointer-events: none; box-shadow: 0 0 10px var(--led-green); }
.key-btn.wrong { background: var(--led-red); color: #000; pointer-events: none; opacity: 0.3; }
.falling-bull { position: absolute; font-size: 40px; top: -50px; animation: fallDown 1.5s linear forwards; z-index: 10; }
@keyframes fallDown { 0% { top: -50px; transform: rotate(0deg); } 100% { top: 120%; transform: rotate(360deg); } }

/* ----- IGAZ VAGY HAMIS ----- */
.vf-box { background-color: #1a1a1a; border: 6px solid #555; border-radius: 10px; width: 90%; max-width: 500px; padding: 20px; box-shadow: inset 0 0 20px #000, 0 10px 20px rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; }
.vf-text { font-family: 'Georgia', serif; font-size: 18px; color: #ddd; line-height: 1.5; text-align: justify; margin-bottom: 15px; background: #222; padding: 15px; border-radius: 5px; border: 1px solid #444; }
.vf-divider { width: 80%; height: 2px; background-color: #ffcc00; margin: 10px 0 20px 0; box-shadow: 0 0 5px #ffcc00; }
.vf-statement { font-family: 'Courier New', Courier, monospace; font-size: 20px; font-weight: bold; color: #ffcc00; text-align: center; margin-bottom: 20px; text-shadow: 0 0 5px rgba(255, 204, 0, 0.5); }

/* ----- EL INTRUSO ----- */
.intruso-hud { display: flex; justify-content: space-between; width: 90%; max-width: 400px; font-family: 'Share Tech Mono', monospace; font-size: 20px; margin-bottom: 10px; font-weight: bold; }
.space-area { width: 90%; max-width: 400px; height: 400px; background-color: #050505; border: 4px solid #444; border-radius: 8px; position: relative; overflow: hidden; box-shadow: inset 0 0 30px #000, 0 10px 20px rgba(0,0,0,0.8); cursor: crosshair; }
.space-area::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(white 1px, transparent 1px); background-size: 30px 30px; opacity: 0.2; pointer-events: none; }
.invader-word { position: absolute; background-color: #111; color: #00ff00; border: 2px solid #00ff00; padding: 8px 12px; font-family: 'Press Start 2P', cursive; font-size: 10px; text-align: center; user-select: none; box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); transition: transform 0.1s; z-index: 10; }
.invader-word:active { transform: scale(0.9); }
.invader-word.explode { background-color: #ffcc00; color: #f44336; border-color: #f44336; box-shadow: 0 0 30px #ff0000; transform: scale(1.2) rotate(10deg); pointer-events: none; opacity: 0; transition: all 0.4s ease-out; }

/* ----- LA BOMBA NUMÉRICA ----- */
.bomba-container { width: 100%; height: 220px; display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 20px; }
.bomba-bomb { position: relative; display: flex; flex-direction: column; align-items: center; transition: transform 0.1s; }
.bomba-fuse { width: 8px; height: 30px; background: repeating-linear-gradient(45deg, #777, #777 4px, #444 4px, #444 8px); border-radius: 5px 5px 0 0; position: relative; }
.bomba-fuse::before { content: '🔥'; position: absolute; top: -20px; left: -8px; font-size: 20px; animation: flicker 0.1s infinite alternate; }
.bomba-body { width: 170px; height: 170px; background: radial-gradient(circle at 30% 30%, #555, #111); border-radius: 50%; border: 4px solid #000; box-shadow: inset -10px -10px 20px rgba(0,0,0,0.8), 0 10px 20px rgba(0,0,0,0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; padding: 10px; box-sizing: border-box; text-align: center; }
.bomba-text { font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 14px; color: #ffcc00; margin-bottom: 10px; text-transform: uppercase; }
.bomba-timer-text { font-family: 'Share Tech Mono', monospace; font-size: 26px; color: #ff0000; background: #222; padding: 2px 10px; border-radius: 4px; border: 2px solid #111; }
.bomba-input-display { font-family: 'Share Tech Mono', monospace; font-size: 30px; color: #00ff00; background: #111; padding: 5px 20px; border: 4px solid #333; border-radius: 8px; margin-bottom: 15px; min-height: 35px; min-width: 80px; text-align: center; letter-spacing: 5px; }
.bomba-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 90%; max-width: 320px; }
.bomba-key { background: #333; color: white; font-family: 'Press Start 2P', cursive; font-size: 20px; padding: 15px 0; border: 4px solid #111; border-radius: 8px; cursor: pointer; box-shadow: inset 0 0 10px rgba(255,255,255,0.1), 0 5px 0 #000; transition: transform 0.1s, box-shadow 0.1s; }
.bomba-key:active { transform: translateY(5px); box-shadow: inset 0 0 10px rgba(255,255,255,0.1), 0 0 0 #000; }
@keyframes flicker { 0% { transform: scale(1) rotate(-5deg); filter: brightness(1); } 100% { transform: scale(1.3) rotate(5deg); filter: brightness(1.5); } }
@keyframes pulseBomb { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.5) drop-shadow(0 0 20px red); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes pixelExplosion { 0% { transform: scale(1); opacity: 1; filter: sepia(1) saturate(5) hue-rotate(-50deg); } 50% { transform: scale(3) rotate(10deg); opacity: 1; filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(2); } 100% { transform: scale(8) rotate(-10deg); opacity: 0; display: none; } }
.exploded { animation: pixelExplosion 0.6s forwards; pointer-events: none; }

/* ----- EL DIÁLOGO ----- */
.dialogo-box { background-color: #111; border: 6px solid #444; border-radius: 10px; width: 95%; max-width: 550px; padding: 20px; box-shadow: inset 0 0 20px #000, 0 10px 20px rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; }
.dialogo-dropzone, .dialogo-wordpool { display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 100px; background-color: #222; border: 2px dashed #555; padding: 10px; box-sizing: border-box; margin-bottom: 15px; }
.dialogo-line { background-color: #fdfbf7; color: #111; border: 2px solid #999; padding: 12px; font-family: 'Georgia', serif; font-weight: bold; font-size: 14px; cursor: pointer; border-radius: 5px; box-shadow: 0 4px 0 #999; transition: transform 0.1s; user-select: none; text-align: left; width: 100%; box-sizing: border-box; }
.dialogo-line:active { transform: translateY(4px); box-shadow: 0 0 0 #999; }
.dialogo-line.used { display: none; }