/* Base body style */
body { font-family: 'Nunito', sans-serif; background-color: var(--bg-main); margin: 0; overscroll-behavior: none; overflow: hidden; color: var(--text-primary); }
/* App container for home menu */
.app-container { background-color: var(--bg-container); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); width: 100%; max-width: 900px; min-height: 500px; display: flex; flex-direction: column; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Fullscreen mode */
.fullscreen-mode { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-container); z-index: 50; padding: 1rem; display: flex; flex-direction: column; overflow: hidden; }
.fullscreen-mode.has-bottom-keypad { padding-bottom: 6rem; /* Adjust based on keypad height */ }

/* Color Palette Variables */
:root {
    --bg-main: #2dd4bf; /* teal-400 */
    --bg-container: #5eead4; /* teal-300 */
    --bg-button-nav: #99f6e4; /* teal-200 */
    --bg-button-nav-hover: #5eead4; /* teal-300 */
    --bg-button-menu: white;
    --bg-button-action: #14b8a6; /* teal-600 */
    --bg-button-action-hover: #0f766e; /* teal-700 */
    --bg-button-secondary: #5eead4; /* teal-300 */
    --bg-button-secondary-hover: #2dd4bf; /* teal-400 */
    --bg-button-setting: #f0fdfa; /* teal-50 */
    --bg-button-setting-hover: #ccfbf1; /* teal-100 */
    --bg-button-setting-active: #14b8a6; /* teal-600 */
    --bg-button-disabled: #9ca3af; /* gray-400 */
    --bg-keypad-bottom: #99f6e4; /* teal-200 */
    --bg-keypad-button: white;
    --bg-keypad-button-hover: #ccfbf1;
    --bg-keypad-backspace: #fed7aa; /* orange-200 */
    --bg-keypad-backspace-hover: #fdba74; /* orange-300 */
    --bg-table-header: #f3f4f6; /* gray-100 */
    --bg-table-row-hover: #f0fdfa; /* teal-50 */
    --bg-modal-overlay: rgba(0,0,0,0.6);
    --bg-modal-content: white;
    --bg-white: white;

    --text-primary: #134e4a; /* teal-900 */
    --text-secondary: #0f766e; /* teal-700 */
    --text-button-nav: #134e4a; /* teal-900 */
    --text-button-menu: #0f766e; /* teal-700 */
    --text-button-action: white;
    --text-button-secondary: #134e4a; /* teal-900 */
    --text-button-setting: #14b8a6; /* teal-600 */
    --text-button-setting-active: white;
    --text-keypad-button: #14b8a6; /* teal-600 */
    --text-keypad-backspace: #c2410c; /* orange-700 */
    --text-table-header: #4b5563; /* gray-600 */
    --text-table-cell: #374151; /* gray-700 */
    --text-white: white;
    --text-red: #dc2626; /* red-600 */

    --border-nav: #2dd4bf; /* teal-400 */
    --border-container-top: #14b8a6; /* teal-600 */
    --border-setting: #5eead4; /* teal-300 */
    --border-setting-active: #0f766e; /* teal-700 */
    --border-input: #9ca3af; /* gray-400 */
    --border-input-active: #3b82f6; /* blue-500 */
    --border-table: #e5e7eb; /* gray-200 */
    --border-keypad-top: #5eead4; /* teal-300 */

    --accent-color: #14b8a6; /* teal-600 */
    --fraction-line: #0f766e; /* teal-700 */
    --fraction-fill: #14b8a6; /* teal-600 */
    --fraction-stroke: #0f766e; /* teal-700 */
    --fraction-empty: white;
    --grid-cell-stroke: #cbd5e1; /* gray-300 */

	--feedback-gray: #6b7280;
    --feedback-green: #10b981;
    --feedback-red: #ef4444;
    --feedback-yellow: #f59e0b;
    --feedback-info: #3b82f6;
}

body.theme-high-contrast {
    /* Backgrounds */
    --bg-main: #1a1a1a;           /* Dark gray instead of pure black */
    --bg-container: #2a2a2a;      /* Slightly lighter for panels */
    --bg-button-nav: #333333;
    --bg-button-nav-hover: #444444;

    /* Primary action buttons */
    --bg-button-menu: #FACC15;            /* Softer yellow */
    --bg-button-action: #FACC15;
    --bg-button-action-hover: #EAB308;    /* Yellow-600 */

    /* Secondary buttons */
    --bg-button-secondary: #444444;
    --bg-button-secondary-hover: #555555;

    /* Settings buttons */
    --bg-button-setting: #FACC15;
    --bg-button-setting-hover: #EAB308;
    --bg-button-setting-active: #1a1a1a;   /* Matches bg-main */

    /* Disabled buttons */
    --bg-button-disabled: #555555;

    /* Keypad */
    --bg-keypad-bottom: #222222;
    --bg-keypad-button: #FACC15;
    --bg-keypad-button-hover: #EAB308;
    --bg-keypad-backspace: #FF6347;        /* Tomato */
    --bg-keypad-backspace-hover: #FF4500;  /* OrangeRed */

    /* Table and modal */
    --bg-table-header: #333333;
    --bg-table-row-hover: #444444;
    --bg-modal-overlay: rgba(0,0,0,0.8);
    --bg-modal-content: #2a2a2a;           /* Match container */
    --bg-white: #2a2a2a;                   /* Dark substitute for white backgrounds */

    /* Text colors */
    --text-primary: #FFFFFF;
    --text-secondary: #FACC15;             /* Accent yellow */
    --text-button-nav: #FFFFFF;
    --text-button-menu: #1a1a1a;           /* Dark text on yellow */
    --text-button-action: #1a1a1a;
    --text-button-secondary: #FFFFFF;
    --text-button-setting: #1a1a1a;
    --text-button-setting-active: #FACC15;
    --text-keypad-button: #1a1a1a;
    --text-keypad-backspace: #1a1a1a;
    --text-table-header: #FACC15;
    --text-table-cell: #FFFFFF;
    --text-white: #FFFFFF;
    --text-red: #FF6347;

    /* Borders */
    --border-nav: #555555;
    --border-container-top: #FACC15;
    --border-setting: #FACC15;
    --border-setting-active: #FACC15;
    --border-input: #FFFFFF;
    --border-input-active: #FACC15;
    --border-table: #555555;
    --border-keypad-top: #555555;

    /* Fraction visuals */
    --accent-color: #FACC15;
    --fraction-line: #FFFFFF;
    --fraction-fill: #FACC15;
    --fraction-stroke: #FFFFFF;
    --fraction-empty: #333333;
    --grid-cell-stroke: #555555;

    /* Feedback colors */
    --feedback-gray: #9ca3af;
    --feedback-green: #34d399;
    --feedback-red: #f87171;
    --feedback-yellow: #fbbf24;
    --feedback-info: #60a5fa;
}

.bg-feedback-green { background-color: var(--feedback-green); }
.bg-feedback-red { background-color: var(--feedback-red); }
.bg-feedback-yellow { background-color: var(--feedback-yellow); }
.bg-feedback-info { background-color: var(--feedback-info); }
.bg-feedback-gray { background-color: var(--feedback-gray); }

/* Buttons */
.menu-button { background-color: var(--bg-button-menu); border-radius: 1rem; padding: 1rem 1.5rem; text-align: center; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--text-button-menu); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); height: 100%; border: 1px solid var(--border-setting); }
.menu-button:hover { transform: translateY(-3px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); }
.menu-button span { font-size: 2.5rem; }
.nav-button { background-color: var(--bg-button-nav); border-radius: 0.75rem; padding: 0.75rem 1.5rem; text-align: center; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--text-button-nav); cursor: pointer; transition: background-color 0.2s ease; flex-grow: 1; border: none; }
.nav-button:hover { background-color: var(--bg-button-nav-hover); }
.nav-button:not(:last-child) { border-right: 2px solid var(--border-nav); }
.action-button { padding: 0.75rem 1.5rem; border-radius: 0.75rem; background-color: var(--bg-button-action); color: var(--text-button-action); font-family: 'Poppins', sans-serif; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border: none; }
.action-button:disabled { background-color: var(--bg-button-disabled); cursor: not-allowed; box-shadow: none; color: var(--text-primary); opacity: 0.7;}
.action-button:hover:not(:disabled) { background-color: var(--bg-button-action-hover); }
.action-button-secondary { background-color: var(--bg-button-secondary); color: var(--text-button-secondary); border: 1px solid var(--accent-color); }
.action-button-secondary:hover:not(:disabled) { background-color: var(--bg-button-secondary-hover); }
.action-button-info { background-color: var(--feedback-info); color: white; }
.action-button-info:hover:not(:disabled) { background-color: #2563eb; } /* Lighter blue hover */
.action-button-danger { background-color: var(--feedback-red); color: white; }
.action-button-danger:hover:not(:disabled) { background-color: #dc2626; } /* Darker red hover */
.level-button, .setting-button { padding: 0.5rem 1rem; border-radius: 0.5rem; background-color: var(--bg-button-setting); color: var(--text-button-setting); border: 2px solid var(--border-setting); font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; margin: 0 0.25rem; }
.level-button:hover, .setting-button:hover { background-color: var(--bg-button-setting-hover); }
.level-button.active, .setting-button.active { background-color: var(--bg-button-setting-active); color: var(--text-button-setting-active); border-color: var(--border-setting-active); }
/* Inputs & Displays */
.fraction-display { display: flex; flex-direction: column; align-items: center; margin: 0 1rem; }
.fraction-display-field { width: 5rem; height: 2.5rem; text-align: center; border: 2px solid var(--border-input); background-color: var(--bg-white); border-radius: 0.5rem; padding: 0.25rem; font-size: 1.3rem; font-weight: bold; margin: 0.1rem 0; color: var(--text-primary); cursor: pointer; line-height: 1.75rem; min-height: 2.5rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, border-width 0.1s ease; }
.fraction-display-field.active-field { border-color: var(--border-input-active); border-width: 3px; box-shadow: 0 0 6px color-mix(in srgb, var(--border-input-active) 60%, transparent); } /* Adjusted shadow */
.fraction-line-display { width: 5.5rem; height: 3px; background-color: var(--fraction-line); margin: 0.2rem 0; border-radius: 2px; }
#cree-denominator-input { width: 5rem; text-align: center; border: 2px solid var(--accent-color); border-radius: 0.5rem; padding: 0.25rem; font-size: 1.1rem; font-weight: bold; margin: 0 auto; -moz-appearance: textfield; background-color: var(--bg-white); color: var(--text-primary); }
#cree-denominator-input::-webkit-outer-spin-button, #cree-denominator-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Utility */
.hidden { display: none !important; }
/* SVG */
.figure-container svg { width: 100%; height: 100%; cursor: default; }
.figure-container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; width: 100%; height: 100%; }
#entrainement-screen .figure-container, #chrono-screen .figure-container { width: auto; height: 220px; md:height: 300px; /* Increased height */ }


/* Styles pour le conteneur quand il affiche plusieurs figures en grille */
.figure-container.grid-layout-figures {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes de taille égale */
    grid-template-rows: repeat(2, 1fr);    /* 2 lignes de taille égale */
    justify-items: center; /* Centre horizontalement dans la cellule */
    align-items: center;   /* Centre verticalement dans la cellule */
    /* gap: 0.5rem; */ /* Le gap peut être ajusté ou supprimé si besoin */
}

/* S'assurer que les SVGs remplissent leur cellule de grille */
.figure-container.grid-layout-figures svg {
     max-width: 100%;
     max-height: 100%;
}

/*.figure-container svg:not(:only-child) { max-width: 48%; max-height: 48%; }*/
.fraction-part { stroke: var(--fraction-stroke); stroke-width: 1; transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.3s ease; }
.fraction-part.grid-cell { stroke: var(--grid-cell-stroke); stroke-width: 0.5; }
.fraction-part-filled { fill: var(--fraction-fill); }
.fraction-part-empty { fill: var(--fraction-empty); }
#cree-screen .fraction-part { cursor: pointer; } #cree-screen .fraction-part:hover { stroke: var(--feedback-yellow); stroke-width: 2; }
.highlight-numerator { stroke: var(--feedback-yellow) !important; stroke-width: 2.5 !important; }
.highlight-denominator { stroke: var(--feedback-red) !important; stroke-width: 2.5 !important; fill-opacity: 0.7 !important; }
.highlight-count { stroke: var(--feedback-yellow) !important; stroke-width: 3px !important; fill: color-mix(in srgb, var(--feedback-yellow) 30%, transparent) !important; transition: fill 0.1s ease-out, stroke 0.1s ease-out; }
/* Layout */
.fullscreen-mode > header { flex-shrink: 0; }
.fullscreen-mode > main { flex-grow: 1; overflow-y: auto; }
.fullscreen-mode > footer { margin-top: auto; flex-shrink: 0; }
.keypad-area { flex-shrink: 0; }

/* Chrono */
.timer-display { font-size: 1.5rem; font-weight: bold; color: var(--text-secondary); background-color: var(--bg-white); padding: 0.25rem 0.75rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.timer-display.warning { color: var(--feedback-yellow); } .timer-display.danger { color: var(--feedback-red); }
.medal { font-size: 4rem; margin-bottom: 1rem; }
#countdown-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: color-mix(in srgb, var(--bg-container) 85%, transparent); z-index: 60; display: flex; justify-content: center; align-items: center; }
#countdown-text { font-size: 10rem; font-weight: bold; color: var(--text-white); text-shadow: 2px 2px 8px rgba(0,0,0,0.3); }
/* Settings & Mode Settings Screens */
.settings-group { margin-bottom: 1rem; text-align: center; width: 100%; max-width: 450px; padding: 0.75rem 0; border-bottom: 1px solid var(--border-setting); } .settings-group:last-child { border-bottom: none; }
.settings-label { display: block; font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; }
.level-info { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.5rem; min-height: 2.5rem; /* Reserve space */ }
.toggle-switch { position: relative; display: inline-block; width: 60px; height: 34px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--accent-color); } input:focus + .toggle-slider { box-shadow: 0 0 1px var(--accent-color); } input:checked + .toggle-slider:before { transform: translateX(26px); }
/* Progression */
#progression-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background-color: var(--bg-white); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
#progression-table th, #progression-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-table); }
#progression-table th { background-color: var(--bg-table-header); font-weight: 600; color: var(--text-table-header); font-family: 'Poppins', sans-serif; }
#progression-table td { color: var(--text-secondary); }
#progression-table tbody tr:last-child td { border-bottom: none; }
#progression-table tbody tr:hover { background-color: var(--bg-table-row-hover); }

/* Duel Screen Specific Styles Removed */

/* Numeric Keypad - Shared Styles */
.keypad-area { display: flex; flex-direction: column; align-items: center; margin-top: 0.5rem; width: 100%; }
/* Keypad for Duel Removed */
/* Keypad for Single Player Modes (Bottom Full Width) */
.keypad-bottom-row { display: flex; justify-content: space-around; align-items: center; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.5rem; background-color: var(--bg-button-nav); z-index: 60; border-top: 2px solid var(--border-keypad-top); box-sizing: border-box; flex-shrink: 0; }
.keypad-bottom-row button { flex-grow: 1; padding: 0.75rem 0.5rem; font-size: 1.1rem; text-align: center; border-radius: 0.5rem; background-color: var(--bg-keypad-button); color: var(--text-keypad-button); margin: 0 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: none; cursor: pointer; transition: background-color 0.2s; font-weight: bold; }
.keypad-bottom-row button:hover { background-color: var(--bg-keypad-button-hover); }
.keypad-bottom-row button:active { background-color: color-mix(in srgb, var(--bg-keypad-button-hover) 80%, black); transform: scale(0.98); }
.keypad-bottom-row .keypad-backspace { background-color: var(--bg-keypad-backspace); color: var(--text-keypad-backspace); flex-grow: 0; width: 3.5rem; }
.keypad-bottom-row .keypad-backspace:hover { background-color: var(--bg-keypad-backspace-hover); }
.keypad-pos-button { display: none; }

/* Message Box adjustments */
.message-box { padding: 0.5rem; border-radius: 0.5rem; margin-top: 0.5rem; font-weight: 600; text-align: center; color: white; min-height: 2.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; font-size: 0.9rem; width: 100%; /* Ensure full width */ }
#message-area, #message-area-chrono, #message-area-cree { min-height: 4rem; }
/* Message area duel removed */

/* Duel Ready Screen Removed */

/* Summary Table */
.summary-table-container {
    margin-top: 1rem;
    /* max-height: 300px; */ /* Supprimer ou commenter l'ancienne hauteur fixe */
    flex-grow: 1; /* Permet au conteneur de grandir pour remplir l'espace */
    max-height: 50vh; /* Hauteur maximale (ex: 50% de la hauteur de la fenêtre) */
    width: 90%; /* Prendre une bonne largeur */
    max-width: 700px; /* Limiter la largeur maximale */
    overflow-y: auto; /* Garder le scroll si nécessaire */
    background-color: var(--bg-white);
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    margin-bottom: 1rem; /* Ajouter un espace avant les boutons */
}
.summary-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.summary-table th, .summary-table td { padding: 0.4rem 0.6rem; text-align: center; border-bottom: 1px solid var(--border-table); vertical-align: middle; }
.summary-table th { background-color: var(--bg-table-header); font-weight: 600; color: var(--text-table-header); }
.summary-table td { color: var(--text-table-cell); }
.summary-table .incorrect-answer { color: var(--text-red); font-weight: bold; }
.summary-table .status-emoji { font-size: 1.2rem; }
.summary-table .figure-cell svg { width: 30px; height: 30px; margin: auto; cursor: pointer; border: 1px solid var(--border-table); }

#end-level-screen, #end-chrono-screen {
    display: flex;
    flex-direction: column; /* Organise les éléments en colonne */
    height: 100%; /* Prend toute la hauteur disponible dans le conteneur fullscreen */
    justify-content: center; /* Centre le contenu globalement (peut être ajusté) */
    align-items: center; /* Centre horizontalement */
    padding-bottom: 1rem; /* Espace en bas */
}
/* Empêche les éléments autres que le tableau de rétrécir */
 #end-level-screen > h3, #end-level-screen > p, #end-level-screen > div:last-child,
 #end-chrono-screen > .medal, #end-chrono-screen > h3, #end-chrono-screen > p, #end-chrono-screen > div:last-child {
     flex-shrink: 0;
 }

/* Figure Modal */
#figure-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-modal-overlay); z-index: 100; display: flex; justify-content: center; align-items: center; padding: 1rem; }
#figure-modal-content {
    background-color: var(--bg-modal-content);
    padding: 1rem; /* Garder un padding global */
    border-radius: 1rem;
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid var(--border-color);
}
#modal-figure-container {
    width: 100%;
    height: auto;
    max-width: 500px;
    max-height: calc(85vh - 4rem); /* Ajuster pour padding + bouton */
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 1rem; /* Ajouter du padding interne */
    background-color: color-mix(in srgb, var(--bg-container) 50%, transparent); /* Optionnel: léger fond différent */
    border-radius: 0.5rem; /* Optionnel: coins arrondis */
}
#modal-figure-container svg {
    max-width: 48%;
    max-height: 48%;
	 flex-grow: 1;
    /* Optionnel: Ajouter une bordure si nécessaire */
    /* border: 1px solid var(--border-table); */
}
#modal-close-button { position: absolute; top: 0.5rem; right: 0.5rem; background-color: var(--feedback-red); color: white; border: none; border-radius: 50%; width: 2rem; height: 2rem; font-size: 1rem; font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; line-height: 1; }