/* /assets/css/games.css */
/* Version: GLOBAL BUTTON STANDARD 🌍 */

body {
    background: url('/assets/img/bg.png') no-repeat center center fixed; 
    background-size: cover;
    background-color: #eef2f5; 
    margin: 0;
    display: flex; justify-content: center; align-items: flex-start;
    padding-top: 40px; min-height: 100vh; box-sizing: border-box;
}

.container-box {
    width: 90%; max-width: 1200px; margin: 0 auto 40px auto; padding: 30px;
    background-color: rgba(255, 255, 255, 0.65); 
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    text-align: center; border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); 
    box-sizing: border-box; border: 1px solid rgba(255,255,255,0.4);
    position: relative; min-height: 300px;
}

#game-area {
    width: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    position: relative; margin-top: 20px;
}

.app-content-full {
    width: 100%; max-width: 100%; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
}

.screen-section { width: 100%; display: none; flex-direction: column; align-items: center; }

h1 { margin-top: 0; margin-bottom: 15px; color: #1e293b; font-size: 2.5rem; line-height: 1.2; }
.instruction { display: block; margin-bottom: 25px; color: #64748b; font-size: 1.1rem; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.5; }

.hs-notice { 
    display: inline-block; background-color: #f0f9ff; color: #0369a1; 
    padding: 10px 24px; border-radius: 12px; font-size: 1rem; font-weight: 500;
    border: 1px solid #bae6fd; margin-bottom: 30px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* --- STANDARD BUTTONS --- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: 1.1rem; text-decoration: none !important; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }

/* Farb-Varianten */
.btn-play, .btn-primary { background-color: #3b82f6; color: white; } /* Blau */
.btn-play:hover, .btn-primary:hover { background-color: #2563eb; }

.btn-success { background-color: #22c55e; color: white; } /* Grün */
.btn-success:hover { background-color: #16a34a; }

.btn-warning { background-color: #f59e0b; color: white; border-color: #f59e0b; } /* Orange */
.btn-warning:hover { background-color: #d97706; }

.btn-danger { background-color: #dc3545; color: white; } /* Rot */
.btn-danger:hover { background-color: #c82333; }

.btn-full { width: 100%; margin-bottom: 10px; padding: 16px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; border: none; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
#startBtn { font-size: 1.5rem; padding: 15px 50px; border-radius: 50px; box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); margin-top: 30px; }

/* --- NEU: RESULT ACTIONS (GLOBAL) --- */
/* Damit Buttons am Ende immer gleich angeordnet sind */
.result-actions { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin-top: 20px; 
    margin-bottom: 10px; 
    flex-wrap: wrap; /* Falls es auf Handy eng wird */
}

/* Der Standard-Button am Ende (Größe & Form) */
/* Farben kommen über .btn-primary, .btn-warning etc. hinzu */
.btn-result-action {
    font-size: 1.2rem;
    padding: 12px 30px;
    min-width: 200px;
    border-radius: 12px; /* Runde Ecken global */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-result-action:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.highscore-wrapper { margin-top: 50px; width: 100%; }

@media (max-width: 600px) {
    .container-box { width: 95%; padding: 20px 15px; margin-top: 20px; }
    h1 { font-size: 2rem; }
    .btn { width: 100%; box-sizing: border-box; }
}

/* === GLOBAL SYLLABLE ENGINE === */
.gs-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6em; /* The gap handles the space between words */
}

.gs-word {
    display: inline-flex;
    white-space: nowrap;
}

.gs-syl-1 { color: #007bff !important; } /* Blue */
.gs-syl-2 { color: #dc3545 !important; } /* Red */
.gs-dash  { color: #333; }

/* === GLOBAL RESULT TABLE (Standardized) === */
.gr-table {
    width: 100%;
    border-collapse: separate; /* Allows border-radius on rows/cells */
    border-spacing: 0;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 12px; /* Matches buttons */
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    font-size: 1.1rem; /* Standardized size */
}

.gr-row {
    transition: background-color 0.2s;
}

.gr-row:not(:last-child) td {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.gr-cell {
    padding: 15px 20px; /* Generous spacing */
    vertical-align: middle;
    color: #334155;
}

/* Variant: Correct (Green) */
.gr-row.correct {
    background-color: #dcfce7; /* Light Green */
}
.gr-row.correct .gr-cell {
    color: #14532d; /* Dark Green Text */
}

/* Variant: Wrong (Red) */
.gr-row.wrong {
    background-color: #fee2e2; /* Light Red */
}
.gr-row.wrong .gr-cell {
    color: #7f1d1d; /* Dark Red Text */
}

/* Utility: Strikethrough for wrong inputs */
.gr-strike {
    text-decoration: line-through;
    opacity: 0.6;
    margin-right: 8px;
}

/* Utility: Status Icons */
.gr-icon {
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}