/**
 * Flashcard Pro - Frontend CSS
 * Version: 2.3.7 - Final completion state UI/UX update
 */

.fcp-wrapper { width:100%; max-width:1200px; margin:0 auto; padding:20px; font-family:'Noto Sans','Noto Sans JP',sans-serif; box-sizing:border-box; }
.fcp-wrapper *, .fcp-wrapper *::before, .fcp-wrapper *::after { box-sizing:border-box; }

/* Language Selection */
.fcp-language-screen { background:linear-gradient(135deg,var(--fcp-primary),var(--fcp-secondary)); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.fcp-lang-container { max-width:900px; width:100%; background:white; border-radius:30px; padding:50px 40px; box-shadow:0 30px 80px rgba(0,0,0,0.3); }
.fcp-lang-header { text-align:center; margin-bottom:40px; }
.fcp-title { font-size:2.5rem; font-weight:900; color:#1a1a2e; margin:0 0 10px 0; }
.fcp-japanese-title { font-family:'Noto Sans JP',sans-serif; font-size:2rem; font-weight:700; color:var(--fcp-primary); margin:0 0 20px 0; }
.fcp-subtitle { font-size:1.2rem; color:#666; font-weight:600; margin:0; }
.fcp-language-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.fcp-lang-button { background:white; border:3px solid #e0e0e0; border-radius:20px; padding:25px 15px; cursor:pointer; transition:all 0.3s; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:inherit; }
.fcp-lang-button:hover { border-color:var(--fcp-primary); background:linear-gradient(135deg,var(--fcp-primary),var(--fcp-secondary)); transform:translateY(-5px); }
.fcp-lang-button:hover .fcp-lang-flag, .fcp-lang-button:hover .fcp-lang-name { color:white; }
.fcp-lang-flag { font-size:3rem; }
.fcp-lang-name { font-size:0.9rem; font-weight:700; color:#333; text-align:center; }

/* Game Screen - v2.3.7 improved vertical centering */
.fcp-game-screen { background:linear-gradient(135deg,var(--fcp-primary),var(--fcp-secondary)); min-height:100vh; padding:20px; display:flex; align-items:center; justify-content:center; overflow-y:auto; }
.fcp-game-container { max-width:1000px; width:100%; margin:0 auto; }

/* Stats Bar */
.fcp-stats-bar { background:white; border-radius:50px; padding:10px 20px; margin-bottom:12px; display:flex; align-items:center; gap:12px; box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.fcp-progress { flex:1; height:8px; background:#e8e8e8; border-radius:10px; overflow:hidden; }
.fcp-progress-bar { height:100%; background:linear-gradient(90deg,#27ae60,#2ecc71); border-radius:10px; transition:width 0.5s; width:0%; }
.fcp-stat { display:flex; align-items:center; gap:5px; }
.fcp-stat-label { font-size:0.7rem; font-weight:700; color:#999; text-transform:uppercase; }
.fcp-stat-icon { font-size:1rem; }
.fcp-stat-text { font-size:1rem; font-weight:900; color:#1a1a2e; }
.fcp-fullscreen-btn { width:40px; height:40px; background:var(--fcp-primary); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s; margin-left:8px; flex-shrink:0; }
.fcp-fullscreen-btn:hover { transform:scale(1.1); }
.fcp-fullscreen-icon { font-size:18px; color:white; }

/* Complete Button - v2.3.7 Golden gradient with glow pulse animation */
.fcp-complete-bar { display:flex; justify-content:center; margin-bottom:12px; padding:0 20px; }
.fcp-btn-complete { background:linear-gradient(135deg,#f39c12,#e67e22); color:white; border:none; padding:18px 50px; border-radius:50px; font-size:1.1rem; font-weight:700; cursor:pointer; box-shadow:0 8px 25px rgba(243,156,18,0.4); transition:all 0.3s; animation:fcp-glow-pulse 2s ease-in-out infinite; text-shadow:0 1px 2px rgba(0,0,0,0.2); }
.fcp-btn-complete:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(243,156,18,0.5); }
@keyframes fcp-glow-pulse { 0%,100%{ box-shadow:0 8px 25px rgba(243,156,18,0.4); } 50%{ box-shadow:0 8px 40px rgba(243,156,18,0.7),0 0 25px rgba(243,156,18,0.4); } }

/* Mode Switch Container - CENTER with TTS in middle */
.fcp-mode-switch-container { display:flex; justify-content:center; margin-bottom:8px; }
.fcp-mode-switch { display:flex; gap:8px; background:rgba(255,255,255,0.2); padding:5px; border-radius:25px; align-items:center; }
.fcp-mode-btn { background:transparent; border:none; padding:10px 20px; border-radius:20px; cursor:pointer; font-size:0.9rem; color:white; transition:all 0.3s; }
.fcp-mode-btn.active { background:white; color:var(--fcp-primary); }

/* TTS Button - inside mode switch */
.fcp-mode-switch .fcp-tts-btn { background:white; color:var(--fcp-primary); border:none; width:40px; height:40px; border-radius:50%; font-size:1.2rem; cursor:pointer; transition:all 0.3s; box-shadow:0 3px 10px rgba(0,0,0,0.2); }
.fcp-mode-switch .fcp-tts-btn:hover { transform:scale(1.1); background:var(--fcp-primary); color:white; }

/* Card Counter */
.fcp-card-counter { text-align:center; color:rgba(255,255,255,0.9); font-size:0.9rem; margin-bottom:8px; }

/* Card Area */
.fcp-card-area { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:15px; }

/* Answer Buttons */
.fcp-answer-btn { width:60px; height:60px; border:none; border-radius:50%; font-size:1.8rem; cursor:pointer; transition:all 0.3s; box-shadow:0 8px 20px rgba(0,0,0,0.25); flex-shrink:0; }
.fcp-answer-wrong { background:#e74c3c; color:white; }
.fcp-answer-correct { background:#27ae60; color:white; }
.fcp-answer-btn:hover { transform:scale(1.15); }
.fcp-answer-btn.selected { transform:scale(1.2); box-shadow:0 10px 30px rgba(0,0,0,0.4); }

/* Flashcard */
.fcp-card-container { perspective:1500px; flex:1; max-width:800px; }
.fcp-flashcard { background:white; border-radius:25px; min-height:400px; position:relative; cursor:pointer; transition:transform 0.6s; transform-style:preserve-3d; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.fcp-flashcard.flipped { transform:rotateY(180deg); }
.fcp-card-front, .fcp-card-back { position:absolute; width:100%; height:100%; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; border-radius:25px; }
.fcp-card-back { transform:rotateY(180deg); background:white; border:3px solid var(--fcp-primary); }
.fcp-card-label { position:absolute; top:20px; font-size:0.85rem; font-weight:700; color:var(--fcp-primary); padding:8px 18px; background:rgba(0,0,0,0.05); border-radius:15px; border:2px solid var(--fcp-primary); }

/* Image */
.fcp-image-container { max-width:250px; max-height:180px; margin-bottom:15px; border-radius:12px; overflow:hidden; }
.fcp-image-container.fcp-image-full { max-width:90%; max-height:70%; width:auto; height:auto; }
.fcp-card-image { width:100%; height:100%; object-fit:contain; }

/* Text */
.fcp-front-text { text-align:center; }
.fcp-japanese { font-family:'Noto Sans JP',sans-serif; font-size:3.5rem; font-weight:900; color:#1a1a2e; margin-bottom:10px; }
.fcp-reading { font-family:'Noto Sans JP',sans-serif; font-size:1.4rem; color:#888; margin-bottom:10px; }
.fcp-translation, .fcp-front-translate { font-size:2.2rem; font-weight:800; color:#1a1a2e; text-align:center; }
.fcp-back-japanese { font-family:'Noto Sans JP',sans-serif; font-size:3rem; font-weight:900; color:#1a1a2e; margin-bottom:8px; }
.fcp-back-reading { font-family:'Noto Sans JP',sans-serif; font-size:1.3rem; color:#888; margin-bottom:15px; }
.fcp-hint { position:absolute; bottom:20px; font-size:0.9rem; color:#bbb; }

/* Font classes */
.fcp-translation.fcp-font-th { font-family:'Noto Sans Thai',sans-serif; }
.fcp-translation.fcp-font-my { font-family:'Noto Sans Myanmar',sans-serif; font-size:1.8rem; }
.fcp-translation.fcp-font-bn { font-family:'Noto Sans Bengali',sans-serif; }
.fcp-translation.fcp-font-km { font-family:'Noto Sans Khmer',sans-serif; }

/* Controls */
.fcp-controls { display:flex; justify-content:center; gap:12px; margin-bottom:15px; flex-wrap:wrap; }
.fcp-btn { padding:14px 28px; border:none; border-radius:50px; font-size:0.9rem; font-weight:700; cursor:pointer; transition:all 0.3s; font-family:inherit; box-shadow:0 5px 15px rgba(0,0,0,0.2); text-transform:uppercase; color:white; }
.fcp-btn:hover { transform:translateY(-3px); }
.fcp-btn-prev { background:linear-gradient(135deg,#9b59b6,#8e44ad); }
.fcp-btn-shuffle { background:linear-gradient(135deg,#f39c12,#e67e22); }
.fcp-btn-reset { background:linear-gradient(135deg,#27ae60,#2ecc71); }
.fcp-btn-next { background:linear-gradient(135deg,#e74c3c,#c0392b); }
.fcp-btn-results { background:linear-gradient(135deg,#3498db,#2980b9); }
.fcp-btn-close { background:linear-gradient(135deg,var(--fcp-primary),var(--fcp-secondary)); }
.fcp-keyboard-hint { text-align:center; color:rgba(255,255,255,0.8); font-size:0.85rem; }

/* Modals */
.fcp-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; z-index:99999; padding:20px; }
.fcp-modal-content { background:white; border-radius:25px; padding:40px; text-align:center; max-width:500px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,0.5); max-height:90vh; overflow-y:auto; }
.fcp-results-content { max-width:650px; }
.fcp-modal-icon { font-size:4rem; margin-bottom:15px; }
.fcp-modal-content h2 { font-size:2rem; color:var(--fcp-primary); margin:0 0 10px 0; }
.fcp-modal-content p { font-size:1.1rem; color:#333; margin:0 0 10px 0; }
.fcp-score-summary { display:flex; justify-content:center; gap:40px; margin:25px 0; }
.fcp-score-item { display:flex; align-items:center; gap:10px; font-size:1.8rem; font-weight:700; }
.fcp-score-correct .fcp-score-icon { color:#27ae60; }
.fcp-score-wrong .fcp-score-icon { color:#e74c3c; }
.fcp-modal-buttons { display:flex; gap:12px; justify-content:center; margin-top:25px; flex-wrap:wrap; }
.fcp-redirect-countdown { color:#666; margin:15px 0; }
.fcp-redirect-countdown span { color:var(--fcp-primary); font-weight:900; font-size:1.4rem; }

/* Results Table */
.fcp-results-table { width:100%; border-collapse:collapse; margin:15px 0; text-align:left; }
.fcp-results-table th, .fcp-results-table td { padding:12px; border-bottom:1px solid #eee; }
.fcp-results-table th { background:#f5f5f5; font-weight:700; }
.fcp-result-correct { color:#27ae60; font-size:1.5rem; }
.fcp-result-wrong { color:#e74c3c; font-size:1.5rem; }
.fcp-result-none { color:#999; }

/* ========== FULLSCREEN PC MODE - BIGGER CARDS ========== */
@media (min-width:1025px) {
    .fcp-game-screen.fcp-fullscreen-mode { padding:30px 50px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-game-container { max-width:1200px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-stats-bar { padding:15px 35px; margin-bottom:20px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-progress { height:12px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-stat-text { font-size:1.4rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-mode-btn { padding:12px 25px; font-size:1rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-card-counter { font-size:1.1rem; margin-bottom:10px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-tts-btn { width:60px; height:60px; font-size:1.8rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-card-area { gap:30px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-answer-btn { width:70px; height:70px; font-size:2.2rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-card-container { max-width:900px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-flashcard { min-height:500px; border-radius:30px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-card-front,
    .fcp-game-screen.fcp-fullscreen-mode .fcp-card-back { padding:50px; border-radius:30px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-japanese { font-size:4.5rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-reading { font-size:1.8rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-translation,
    .fcp-game-screen.fcp-fullscreen-mode .fcp-front-translate { font-size:2.8rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-back-japanese { font-size:3.8rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-back-reading { font-size:1.6rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-image-container { max-width:350px; max-height:250px; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-image-container.fcp-image-full { max-width:95%; max-height:80%; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-btn { padding:16px 32px; font-size:1rem; }
    .fcp-game-screen.fcp-fullscreen-mode .fcp-keyboard-hint { font-size:0.95rem; }
}

/* ========== TABLET PORTRAIT ========== */
@media (min-width:769px) and (max-width:1024px) and (orientation:portrait) {
    .fcp-language-grid { grid-template-columns:repeat(4,1fr); }
    .fcp-game-container { max-width:750px; }
    .fcp-card-container { max-width:600px; }
    .fcp-flashcard { min-height:380px; }
}

/* ========== TABLET LANDSCAPE - FIXED ========== */
@media (min-width:769px) and (max-width:1024px) and (orientation:landscape) {
    .fcp-game-screen { padding:10px 20px; min-height:100vh; align-items:flex-start; overflow-y:auto; }
    .fcp-game-container { max-width:100%; padding:5px 0; }
    .fcp-stats-bar { padding:8px 15px; margin-bottom:5px; }
    .fcp-progress { height:6px; }
    .fcp-stat-label { font-size:0.6rem; }
    .fcp-stat-text { font-size:0.9rem; }
    .fcp-fullscreen-btn { width:35px; height:35px; }
    .fcp-mode-switch-container { margin-bottom:3px; }
    .fcp-mode-btn { padding:5px 12px; font-size:0.7rem; }
    .fcp-card-counter { font-size:0.8rem; margin-bottom:3px; }
    .fcp-tts-container { margin-bottom:5px; }
    .fcp-tts-btn { width:35px; height:35px; font-size:1rem; }
    .fcp-card-area { gap:10px; margin-bottom:8px; }
    .fcp-answer-btn { width:40px; height:40px; font-size:1.2rem; }
    .fcp-card-container { max-width:450px; }
    .fcp-flashcard { min-height:220px; border-radius:15px; }
    .fcp-card-front, .fcp-card-back { padding:20px 15px; border-radius:15px; }
    .fcp-card-label { font-size:0.6rem; padding:4px 10px; top:8px; }
    .fcp-japanese { font-size:2rem; margin-bottom:5px; }
    .fcp-reading { font-size:0.9rem; margin-bottom:5px; }
    .fcp-translation, .fcp-front-translate { font-size:1.4rem; }
    .fcp-back-japanese { font-size:1.8rem; }
    .fcp-back-reading { font-size:0.8rem; }
    .fcp-hint { font-size:0.65rem; bottom:8px; }
    .fcp-image-container { max-width:100px; max-height:70px; margin-bottom:5px; }
    /* FIXED: Controls visible */
    .fcp-controls { gap:6px; margin-bottom:5px; flex-wrap:nowrap; }
    .fcp-btn { padding:8px 14px; font-size:0.7rem; }
    .fcp-keyboard-hint { font-size:0.65rem; }
}

/* ========== MOBILE PORTRAIT ========== */
@media (max-width:768px) and (orientation:portrait) {
    .fcp-lang-container { padding:30px 20px; }
    .fcp-title { font-size:1.8rem; }
    .fcp-japanese-title { font-size:1.5rem; }
    .fcp-language-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
    .fcp-lang-button { padding:18px 10px; }
    .fcp-lang-flag { font-size:2.2rem; }
    .fcp-lang-name { font-size:0.75rem; }
    
    /* Turunkan sedikit - beri ruang di atas */
    .fcp-game-screen { padding:12px 10px; padding-top:15px; align-items:flex-start; }
    .fcp-stats-bar { padding:10px 15px; border-radius:25px; margin-bottom:10px; }
    .fcp-complete-bar { margin-bottom:10px; padding:0 15px; }
    .fcp-btn-complete { padding:16px 30px; font-size:1rem; width:100%; max-width:320px; min-height:54px; }
    .fcp-mode-switch-container { margin-bottom:6px; }
    .fcp-mode-btn { padding:8px 14px; font-size:0.8rem; }
    .fcp-mode-switch .fcp-tts-btn { width:38px; height:38px; font-size:1.1rem; }
    .fcp-card-counter { font-size:0.85rem; margin-bottom:6px; }
    .fcp-card-area { gap:8px; flex-wrap:nowrap; margin-bottom:12px; }
    .fcp-answer-btn { width:45px; height:45px; font-size:1.3rem; }
    .fcp-card-container { max-width:100%; flex:1; min-width:0; }
    
    /* Flashcard lebih panjang */
    .fcp-flashcard { min-height:380px; border-radius:20px; }
    .fcp-card-front, .fcp-card-back { padding:30px 20px; border-radius:20px; }
    .fcp-card-label { font-size:0.7rem; padding:5px 12px; top:15px; }
    .fcp-japanese { font-size:2.5rem; }
    .fcp-reading { font-size:1.1rem; }
    .fcp-translation, .fcp-front-translate { font-size:1.6rem; }
    .fcp-back-japanese { font-size:2.2rem; }
    .fcp-back-reading { font-size:1rem; }
    .fcp-hint { font-size:0.8rem; bottom:15px; }
    .fcp-image-container { max-width:160px; max-height:130px; }
    .fcp-image-container.fcp-image-full { max-width:85%; max-height:65%; }
    
    /* TOMBOL 2 BARIS */
    .fcp-controls { 
        display:grid; 
        grid-template-columns:1fr 1fr; 
        gap:8px; 
        margin-bottom:10px; 
        max-width:320px; 
        margin-left:auto; 
        margin-right:auto; 
    }
    /* Baris 1: ACAK, ULANG */
    .fcp-btn-shuffle { order:1; }
    .fcp-btn-reset { order:2; }
    /* Baris 2: SEBELUMNYA, SELANJUTNYA */
    .fcp-btn-prev { order:3; }
    .fcp-btn-next { order:4; }
    .fcp-btn { padding:12px 10px; font-size:0.75rem; flex-shrink:0; width:100%; }
    
    .fcp-keyboard-hint { display:none; }
    .fcp-modal-content { padding:25px 20px; border-radius:20px; }
    .fcp-modal-content h2 { font-size:1.5rem; }
    .fcp-score-item { font-size:1.4rem; }
}

/* ========== SMALL MOBILE (width < 400px) ========== */
@media (max-width:400px) {
    .fcp-controls { max-width:280px; gap:6px; }
    .fcp-btn { padding:11px 8px; font-size:0.7rem; }
    .fcp-mode-btn { padding:7px 12px; font-size:0.75rem; }
    .fcp-mode-switch .fcp-tts-btn { width:34px; height:34px; font-size:1rem; }
    .fcp-btn-complete { padding:14px 25px; font-size:0.95rem; min-height:50px; }
    .fcp-flashcard { min-height:350px; }
}

/* ========== EXTRA SMALL MOBILE (width < 350px) ========== */
@media (max-width:350px) {
    .fcp-controls { max-width:250px; gap:5px; }
    .fcp-btn { padding:10px 6px; font-size:0.65rem; }
    .fcp-mode-btn { padding:6px 10px; font-size:0.7rem; }
    .fcp-mode-switch .fcp-tts-btn { width:30px; height:30px; font-size:0.9rem; }
    .fcp-flashcard { min-height:320px; }
}

/* ========== MOBILE LANDSCAPE - FIXED ========== */
@media (max-width:900px) and (orientation:landscape) {
    .fcp-language-screen { padding:15px; min-height:100vh; overflow-y:auto; }
    .fcp-lang-container { padding:20px; max-width:100%; }
    .fcp-lang-header { margin-bottom:15px; }
    .fcp-title { font-size:1.3rem; }
    .fcp-japanese-title { font-size:1.1rem; margin-bottom:10px; }
    .fcp-subtitle { font-size:0.9rem; }
    .fcp-language-grid { grid-template-columns:repeat(6,1fr); gap:8px; }
    .fcp-lang-button { padding:10px 5px; border-radius:10px; }
    .fcp-lang-flag { font-size:1.5rem; }
    .fcp-lang-name { font-size:0.6rem; }
    
    .fcp-game-screen { padding:8px 15px; min-height:100vh; align-items:flex-start; overflow-y:auto; }
    .fcp-game-container { max-width:100%; width:100%; }
    .fcp-stats-bar { padding:5px 12px; margin-bottom:4px; border-radius:15px; }
    .fcp-progress { height:5px; }
    .fcp-stat-label { font-size:0.55rem; }
    .fcp-stat-icon { font-size:0.8rem; }
    .fcp-stat-text { font-size:0.8rem; }
    .fcp-fullscreen-btn { width:30px; height:30px; margin-left:5px; }
    .fcp-fullscreen-icon { font-size:14px; }
    .fcp-mode-switch-container { margin-bottom:2px; }
    .fcp-mode-switch { padding:2px; gap:4px; }
    .fcp-mode-btn { padding:4px 8px; font-size:0.6rem; border-radius:12px; }
    .fcp-card-counter { font-size:0.7rem; margin-bottom:2px; }
    .fcp-tts-container { margin-bottom:4px; }
    .fcp-tts-btn { width:30px; height:30px; font-size:0.9rem; }
    .fcp-card-area { gap:8px; margin-bottom:6px; }
    .fcp-answer-btn { width:32px; height:32px; font-size:1rem; }
    .fcp-card-container { max-width:350px; flex:1; }
    .fcp-flashcard { min-height:160px; border-radius:12px; }
    .fcp-card-front, .fcp-card-back { padding:15px 12px; border-radius:12px; }
    .fcp-card-label { font-size:0.5rem; padding:3px 8px; top:6px; border-width:1px; }
    .fcp-japanese { font-size:1.6rem; margin-bottom:3px; }
    .fcp-reading { font-size:0.75rem; margin-bottom:3px; }
    .fcp-translation, .fcp-front-translate { font-size:1.1rem; }
    .fcp-back-japanese { font-size:1.4rem; margin-bottom:3px; }
    .fcp-back-reading { font-size:0.7rem; margin-bottom:5px; }
    .fcp-hint { font-size:0.55rem; bottom:5px; }
    .fcp-image-container { max-width:80px; max-height:60px; margin-bottom:5px; border-radius:6px; }
    .fcp-image-container.fcp-image-full { max-width:60%; max-height:50%; }
    
    /* FIXED: Controls MUST be visible */
    .fcp-controls { gap:4px; margin-bottom:4px; flex-wrap:nowrap; justify-content:center; overflow-x:auto; }
    .fcp-btn { padding:6px 10px; font-size:0.55rem; border-radius:20px; white-space:nowrap; flex-shrink:0; }
    .fcp-keyboard-hint { display:none; }
    
    /* Modal in landscape */
    .fcp-modal-content { padding:15px; border-radius:15px; max-height:95vh; }
    .fcp-modal-icon { font-size:2rem; margin-bottom:8px; }
    .fcp-modal-content h2 { font-size:1.2rem; }
    .fcp-modal-content p { font-size:0.9rem; }
    .fcp-score-summary { gap:20px; margin:10px 0; }
    .fcp-score-item { font-size:1.2rem; }
    .fcp-modal-buttons { gap:8px; margin-top:10px; }
    .fcp-modal-buttons .fcp-btn { padding:8px 14px; font-size:0.7rem; }
}

/* ========== VERY SMALL LANDSCAPE (iPhone SE etc) ========== */
@media (max-height:400px) and (orientation:landscape) {
    .fcp-game-screen { padding:5px 10px; }
    .fcp-stats-bar { padding:4px 10px; margin-bottom:3px; }
    .fcp-mode-switch-container { margin-bottom:2px; }
    .fcp-card-counter { margin-bottom:2px; }
    .fcp-tts-container { margin-bottom:3px; }
    .fcp-tts-btn { width:25px; height:25px; font-size:0.8rem; }
    .fcp-card-area { margin-bottom:4px; gap:6px; }
    .fcp-answer-btn { width:28px; height:28px; font-size:0.9rem; }
    .fcp-card-container { max-width:300px; }
    .fcp-flashcard { min-height:130px; }
    .fcp-card-front, .fcp-card-back { padding:12px 10px; }
    .fcp-japanese { font-size:1.4rem; }
    .fcp-reading { font-size:0.65rem; }
    .fcp-translation, .fcp-front-translate { font-size:1rem; }
    .fcp-controls { gap:3px; margin-bottom:3px; }
    .fcp-btn { padding:5px 8px; font-size:0.5rem; }
}

/* ========== iOS PSEUDO FULLSCREEN ========== */
/* These classes are added to html and body for iOS fullscreen simulation */
html.fcp-html-fullscreen,
body.fcp-body-fullscreen {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* iOS fullscreen mode styling */
.fcp-game-screen.fcp-fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    z-index: 999999 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* iOS safe area support */
@supports (padding-top: env(safe-area-inset-top)) {
    .fcp-game-screen.fcp-fullscreen-mode {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}