/* ═══════════════════════════════════════════════════════════════
   I'm Not a Robot Game — Game Styles
   All styles for game-container, HUD, and every level type
   ═══════════════════════════════════════════════════════════════ */

#game-container { position: relative; max-width: 540px; margin: 0 auto 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; padding: 24px 24px 32px; }
.feedback-overlay { display: none; position: absolute; inset: 0; z-index: 50; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em; pointer-events: none; border-radius: 12px; }
.feedback-success { display: flex; background: rgba(0, 255, 136, 0.15); color: #00ff88; border: 2px solid #00ff88; }
.feedback-fail { display: flex; background: rgba(255, 60, 60, 0.15); color: #ff3c3c; border: 2px solid #ff3c3c; }

.game-hud { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.hud-item { display: flex; flex-direction: column; align-items: center; }
.hud-label { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
.hud-value { font-size: 1rem; font-weight: 700; color: var(--accent2); margin-top: 2px; }

.level-header { text-align: center; margin-bottom: 24px; }
.level-icon { font-size: 2.5rem; margin-bottom: 8px; }
.level-name { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.level-desc { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 10px; }
.diff-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.diff-easy { background: #0a3d1f; color: #00ff88; border: 1px solid #00ff88; }
.diff-medium { background: #3d2c00; color: #ffbb00; border: 1px solid #ffbb00; }
.diff-hard { background: #3d0a0a; color: #ff5555; border: 1px solid #ff5555; }
.diff-extreme { background: #1a003d; color: #bb55ff; border: 1px solid #bb55ff; }
.diff-insane { background: #3d0019; color: #ff55aa; border: 1px solid #ff55aa; }
.diff-final { background: #1a1a00; color: #ffd700; border: 1px solid #ffd700; }

.level-body { width: 100%; }
.select-prompt { text-align: center; font-size: 0.95rem; color: #ccc; margin-bottom: 14px; }
.inline-feedback { text-align: center; min-height: 22px; font-size: 0.85rem; color: #ff5555; margin-top: 10px; }
.input-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.input-row input { flex: 1; max-width: 220px; padding: 10px 14px; border-radius: 8px; border: 1px solid #333; background: #0d0d0d; color: #eee; font-size: 1rem; outline: none; transition: border-color 0.2s; }
.input-row input:focus { border-color: var(--accent2); }

.btn-submit { padding: 10px 22px; border-radius: 8px; background: var(--accent2); color: #000; font-weight: 700; font-size: 0.9rem; border: none; cursor: pointer; transition: opacity 0.2s, transform 0.1s; }
.btn-submit:hover { opacity: 0.85; }
.btn-submit:active { transform: scale(0.97); }

.captcha-box { background: #fff; color: #333; border-radius: 6px; padding: 18px 20px; max-width: 320px; margin: 0 auto; box-shadow: 0 2px 12px rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 10px; }
.checkbox-row { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.checkbox-row input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: #4caf50; }
.checkbox-label { font-size: 1rem; font-weight: 500; color: #333; }
.recaptcha-logo { font-size: 0.7rem; color: #aaa; text-align: right; }
.final-boss-box { border: 2px solid gold; }
@keyframes wiggle { 0%,100% { transform: rotate(0deg); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } }
.wiggle { animation: wiggle 0.6s ease-in-out; }

.math-problem { text-align: center; margin-bottom: 20px; }
.math-expr { font-size: 2.2rem; font-weight: 700; color: var(--accent2); font-family: monospace; }
.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; margin: 0 auto; }
.img-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: #1a1a1a; border: 2px solid #2a2a2a; border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; user-select: none; }
.img-cell:hover { border-color: #555; background: #222; }
.img-cell.selected { border-color: var(--accent2); background: rgba(0,255,136,0.1); }
.img-cell:active { transform: scale(0.95); }

.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 300px; margin: 0 auto; }
.color-cell { aspect-ratio: 1; border-radius: 6px; cursor: pointer; border: 3px solid transparent; transition: border-color 0.15s, transform 0.1s; }
.color-cell:hover { filter: brightness(1.15); }
.color-cell.selected { border-color: #fff; box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; transform: scale(1.05); }

.type-target { text-align: center; font-size: 1.8rem; font-weight: 700; font-family: monospace; color: var(--accent4); background: #111; padding: 14px 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 8px; letter-spacing: 0.12em; }
.scrambled-word { color: var(--accent3); }
.slider-track { margin: 10px auto; max-width: 380px; }
.slider-track input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--accent2); height: 8px; }
.slider-label { text-align: center; margin-top: 10px; font-size: 1.2rem; font-weight: 700; color: var(--accent2); }

.pattern-grid { display: grid; gap: 8px; max-width: 280px; margin: 0 auto 10px; }
.pattern-cell { aspect-ratio: 1; background: #1a1a1a; border: 2px solid #2a2a2a; border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.pattern-cell.lit { background: var(--accent2); border-color: var(--accent2); }
.pattern-cell:hover { border-color: #555; }
.honeypot-options { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 0 auto; }
.hp-option { padding: 13px 20px; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; color: #ddd; font-size: 0.95rem; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }
.hp-option:hover { background: #222; border-color: #555; }

.emoji-sequence { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; padding: 12px; background: #111; border: 1px solid #2a2a2a; border-radius: 8px; }
.seq-emoji { font-size: 1.6rem; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
.seq-emoji.matched { opacity: 1; transform: scale(1.2); }
.emoji-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0; }
.emoji-btn { font-size: 1.8rem; background: #1a1a1a; border: 2px solid #333; border-radius: 10px; padding: 8px 12px; cursor: pointer; transition: transform 0.1s, border-color 0.15s; line-height: 1; }
.emoji-btn:hover:not(:disabled) { border-color: #666; transform: scale(1.05); }
.emoji-btn:active:not(:disabled){ transform: scale(0.95); }
.emoji-btn.used { opacity: 0.3; cursor: not-allowed; }
.emoji-progress { text-align: center; color: #888; font-size: 0.85rem; margin-top: 6px; }

.trivia-question { font-size: 1.1rem; font-weight: 600; color: #eee; margin-bottom: 18px; line-height: 1.5; }
.trivia-options { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.trivia-btn { padding: 13px 18px; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; color: #ddd; font-size: 0.95rem; text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.trivia-btn:hover:not(:disabled) { background: #222; border-color: #666; }
.trivia-btn.correct { background: #0a3d1f; border-color: #00ff88; color: #00ff88; }
.trivia-btn.wrong { background: #3d0a0a; border-color: #ff5555; color: #ff5555; }
.trivia-btn:disabled { cursor: not-allowed; }

.big-emoji { margin-bottom: 10px; }
.win-title { font-weight: 700; letter-spacing: 0.05em; }

@media (max-width: 580px) {
    #game-container { margin: 0 12px 40px; padding: 18px 16px 24px; }
    .math-expr { font-size: 1.7rem; }
    .type-target { font-size: 1.4rem; }
    .image-grid, .color-grid { gap: 6px; }
    .emoji-btn { padding: 6px 10px; font-size: 1.4rem; }
}