*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ══════════════════════════════════════════════════════════ THEME VARIABLES (overridden per data-theme on ) ══════════════════════════════════════════════════════════ */ :root { --bg: #1a1a2e; --surface: #16213e; --accent: #0f3460; --text: #e0e0e0; --text-dim: #888; --ocean: #2a4a6b; --country-fill: #c8d6c8; --hover-fill: #f0c040; --correct: #2ecc71; --wrong: #e74c3c; --selected-fill:#3ab5e6; --radius-btn: 6px; --h1-font: inherit; } /* ── Coloré ── */ body[data-theme="colore"] { --bg: #e8f4fd; --surface: #ffffff; --accent: #2980b9; --text: #1a1a2a; --text-dim: #5a6a7a; --ocean: #5bafd6; --country-fill: #a8d8a8; --hover-fill: #f39c12; --correct: #27ae60; --wrong: #c0392b; --selected-fill:#2980b9; } /* ── Carte au trésor ── */ body[data-theme="tresor"] { --bg: #1e1006; --surface: #2e1a08; --accent: #7a4a15; --text: #f0ddb0; --text-dim: #a08050; --ocean: #000000; --country-fill: #cd8e29; --hover-fill: #e8b030; --correct: #5a9040; --wrong: #b03020; --selected-fill:#d4801a; --h1-font: Georgia, 'Times New Roman', serif; } /* ══════════════════════════════════════════════════════════ BASE ══════════════════════════════════════════════════════════ */ body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; height: 100dvh; display: flex; flex-direction: column; } #app { display: flex; flex-direction: column; height: 100%; } /* ── Header ── */ header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--accent); flex-shrink: 0; position: relative; } h1 { font-size: 1.3rem; letter-spacing: 2px; text-transform: uppercase; color: var(--hover-fill); font-family: var(--h1-font); } #stats { display: flex; gap: 16px; align-items: center; font-size: 1.05rem; } #lives { color: var(--wrong); letter-spacing: 4px; font-size: 1.15rem; } #score { font-weight: bold; } body[data-mode="game"] #score { display: none; } body.game-running #score, body.game-over #score { display: block; position: absolute; left: 50%; transform: translateX(-50%); font-size: 3rem; color: var(--hover-fill); font-weight: bold; pointer-events: none; } /* ── Toolbar ── */ #toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--surface); border-bottom: 1px solid var(--accent); flex-shrink: 0; flex-wrap: wrap; } #mode-btns { display: flex; gap: 4px; } .mode-btn { padding: 5px 12px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--bg); color: var(--text); font-size: 0.88rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .mode-btn.active { background: var(--hover-fill); color: #111; border-color: var(--hover-fill); font-weight: bold; } select, #start-btn { padding: 5px 12px; border-radius: var(--radius-btn); border: 1px solid var(--accent); font-size: 0.88rem; cursor: pointer; } select { background: var(--bg); color: var(--text); } #start-btn { background: var(--hover-fill); color: #111; font-weight: bold; border-color: var(--hover-fill); transition: opacity 0.15s; } #start-btn:hover { opacity: 0.85; } #timer-btn { padding: 5px 9px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--bg); color: var(--text-dim); cursor: pointer; font-size: 0.95rem; transition: background 0.15s, color 0.15s; } #timer-btn.active { background: var(--accent); color: var(--text); } body[data-mode="learning"] #timer-btn { display: none; } body.game-running #timer-btn { display: none; } #fs-btn { padding: 5px 8px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--bg); color: var(--text); cursor: pointer; display: flex; align-items: center; transition: background 0.15s; } #fs-btn:hover { background: var(--accent); } body:not(.is-fullscreen) #fs-btn .icon-compress { display: none; } body.is-fullscreen #fs-btn .icon-expand { display: none; } #help-btn { padding: 5px 10px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--bg); color: var(--text); cursor: pointer; font-weight: bold; font-size: 0.95rem; transition: background 0.15s; } #help-btn:hover { background: var(--accent); } #right-btns { margin-left: auto; display: flex; gap: 6px; align-items: center; } #settings-btn { padding: 5px 8px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--bg); color: var(--text); cursor: pointer; display: flex; align-items: center; transition: background 0.15s; } #settings-btn:hover { background: var(--accent); } /* ── Info / Question panel ── */ #info-panel { padding: 8px 16px; background: var(--accent); text-align: center; flex-shrink: 0; min-height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 3px; } #question-area { display: flex; flex-direction: column; gap: 3px; } /* Dev panel — masqué par défaut */ #dev-panel { display: none; } body.dev-mode #info-panel { flex-direction: row; align-items: center; text-align: left; gap: 12px; } body.dev-mode #question-area { flex: 1; } body.dev-mode #dev-panel { display: flex; flex-direction: column; gap: 4px; min-width: 110px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.2); font-size: 0.78rem; font-family: monospace; } .dev-row { display: flex; justify-content: space-between; gap: 8px; } .dev-label { color: var(--text-dim); } #dev-zoom { color: var(--hover-fill); font-weight: bold; } #question { font-size: 1.1rem; font-weight: bold; line-height: 1.3; } body.game-over #question { font-size: 2.75rem; font-weight: bold; } #question .q-label { font-size: 0.8rem; color: var(--text-dim); font-weight: normal; display: block; } #question .q-name { font-size: 1.45rem; color: var(--hover-fill); display: block; } #question .q-details { font-size: 0.82rem; color: var(--text-dim); font-weight: normal; display: block; margin-top: 2px; } body[data-theme="colore"] #question .q-label, body[data-theme="colore"] #question .q-details, body[data-theme="tresor"] #question .q-label, body[data-theme="tresor"] #question .q-details, body[data-theme="multi"] #question .q-label, body[data-theme="multi"] #question .q-details { color: #cad4df; } #message { font-size: 0.95rem; min-height: 1.1em; } #message.correct { color: var(--correct); } #message.wrong { color: var(--wrong); } /* ── Main content ── */ #main-content { display: flex; flex: 1; overflow: hidden; } /* ── Country list panel ── */ #list-panel { width: 330px; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; background: var(--surface); border-right: 1px solid var(--accent); } #country-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } #country-table thead { position: sticky; top: 0; background: var(--accent); z-index: 1; } #country-table th { padding: 6px 8px; text-align: left; font-size: 0.8rem; white-space: nowrap; user-select: none; } #country-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); } .col-num { text-align: right; color: var(--text-dim); width: 28px; } #list-body tr { cursor: pointer; } #list-body tr:hover { background: rgba(255,255,255,0.07); } #list-body tr.selected { background: rgba(58,181,230,0.18); color: var(--selected-fill); font-weight: bold; } .sort-btns { display: inline-flex; flex-direction: column; margin-left: 3px; vertical-align: middle; } .sort-btn { font-size: 0.5rem; line-height: 1.1; padding: 0 2px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; } .sort-btn:hover { color: var(--hover-fill); } .sort-btn.active { color: var(--hover-fill); } /* ── Map ── */ #map-container { flex: 1; overflow: hidden; background: var(--ocean); display: flex; cursor: grab; position: relative; } #country-counter { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.45); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.88rem; font-weight: bold; pointer-events: none; z-index: 10; letter-spacing: 1px; } #country-counter.hidden { display: none; } #map-container svg { width: 100%; height: 100%; display: block; } /* ── Country paths ── */ .country { fill: var(--c-fill, var(--country-fill)); stroke: #fff; stroke-width: 0.3; cursor: pointer; transition: fill 0.1s; } .country:hover { fill: var(--c-hover, var(--hover-fill)); } /* Pas de hover sur touch (évite la couleur qui reste après un drag) */ @media (hover: none) { .country:hover { fill: var(--c-fill, var(--country-fill)); } } /* Neutralise la couleur pendant un drag (souris ou touch) */ body.dragging .country:hover, body.touch-dragging .country:hover { fill: var(--c-fill, var(--country-fill)) !important; } .country.correct { fill: var(--correct) !important; } .country.wrong { fill: var(--wrong) !important; } .country.selected{ fill: var(--c-selected, var(--selected-fill)) !important; } .country.inactive { fill: #777; cursor: default; } .country.inactive:hover { fill: #777; } body[data-theme="tresor"] .country.inactive, body[data-theme="tresor"] .country.inactive:hover { fill: #6c4924; } /* Wrong-reveal : assombrit tous les pays sauf correct (vert) et wrong (rouge) */ body.wrong-reveal .country:not(.correct):not(.wrong):not(.small-marker):not(.inactive) { fill: #4d4d4d !important; } /* ── Small-country marker circles ── */ circle.country { fill: none; stroke: none; pointer-events: none; } circle.country.visible { stroke: var(--selected-fill); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: stroke; } circle.country.visible:hover { stroke-width: 2.5; } circle.country.correct-outline { stroke: var(--correct); stroke-width: 2.5; pointer-events: stroke; } /* ── Zoom / Pan cursors ── */ body.dragging * { cursor: grabbing !important; } /* ── Mode-driven visibility ── */ body[data-mode="game"] #list-panel { display: none; } body[data-mode="game"] #start-btn { display: inline-block; } body[data-mode="game"] #stats { display: flex; } body[data-mode="learning"] #list-panel { display: block; } body[data-mode="learning"] #start-btn { display: none; } body[data-mode="learning"] #stats { display: none; } body[data-mode="learning"] #timer-gauge { display: none; } body[data-timer="off"] #timer-gauge { display: none; } /* ── Timer gauge ── */ #timer-gauge { width: 16px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--accent); position: relative; overflow: hidden; } #timer-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to top, #e74c3c 0%, #f39c12 45%, #2ecc71 100%); clip-path: inset(100% 0 0 0); } /* ── Header right group ── */ #header-right { display: flex; align-items: center; gap: 16px; } /* ── User area ── */ #user-area { position: relative; flex-shrink: 0; } #auth-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; border: none; border-radius: var(--radius-btn); background: transparent; color: var(--text-dim); cursor: pointer; transition: color 0.15s; } #auth-btn:hover { color: var(--text); } #auth-btn.logged-in { color: var(--text); } #auth-icon.hidden { display: none; } .user-avatar { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; } .user-avatar.hidden { display: none; } #user-display { font-size: 0.68rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── User dropdown ── */ #user-dropdown { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px; min-width: 170px; z-index: 300; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); } #user-dropdown.hidden { display: none; } #dropdown-name { font-size: 0.82rem; color: var(--text-dim); padding-bottom: 8px; border-bottom: 1px solid var(--accent); word-break: break-all; } #logout-btn { padding: 7px 10px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: transparent; color: var(--text); font-size: 0.85rem; cursor: pointer; text-align: left; transition: background 0.15s; } #logout-btn:hover { background: var(--accent); } /* ── Scores button ── */ #scores-btn { padding: 5px 8px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--bg); color: var(--text); cursor: pointer; display: flex; align-items: center; transition: background 0.15s; } #scores-btn:hover { background: var(--accent); } /* ══════════════════════════════════════════════════════════ SCORES MODAL ══════════════════════════════════════════════════════════ */ #scores-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; } #scores-overlay.hidden { display: none; } #scores-panel { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 20px 24px 24px; width: min(560px, 95vw); max-height: 80vh; display: flex; flex-direction: column; gap: 14px; } #scores-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } #scores-header h2 { font-size: 1.1rem; color: var(--hover-fill); text-transform: uppercase; letter-spacing: 2px; font-family: var(--h1-font); } #scores-close { background: transparent; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; } #scores-close:hover { color: var(--text); background: var(--accent); } #scores-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--accent); padding-bottom: 10px; flex-shrink: 0; } .scores-tab { flex: 1; padding: 6px; border-radius: var(--radius-btn); border: 1px solid transparent; background: transparent; color: var(--text-dim); font-size: 0.88rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .scores-tab.active { background: var(--accent); color: var(--text); border-color: var(--accent); } .scores-content { overflow-y: auto; flex: 1; min-height: 0; } .scores-content.hidden { display: none; } .scores-msg { font-size: 0.88rem; color: var(--text-dim); text-align: center; padding: 24px 0; } #scores-level-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.88rem; flex-shrink: 0; } #scores-level-row label { color: var(--text-dim); } #scores-level-select { padding: 4px 8px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--bg); color: var(--text); font-size: 0.88rem; cursor: pointer; } .scores-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .scores-table thead { position: sticky; top: 0; background: var(--accent); z-index: 1; } .scores-table th { padding: 6px 8px; text-align: left; font-size: 0.78rem; white-space: nowrap; } .scores-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); } .scores-table tbody tr:hover { background: rgba(255,255,255,0.04); } .scores-table tr.scores-me td { color: var(--correct); font-weight: bold; } /* ══════════════════════════════════════════════════════════ AUTH MODAL ══════════════════════════════════════════════════════════ */ #auth-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; } #auth-overlay.hidden { display: none; } #auth-panel { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 20px 24px 24px; width: min(380px, 92vw); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } #auth-header { display: flex; align-items: center; justify-content: space-between; } #auth-header h2 { font-size: 1.1rem; color: var(--hover-fill); text-transform: uppercase; letter-spacing: 2px; font-family: var(--h1-font); } #auth-close { background: transparent; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; } #auth-close:hover { color: var(--text); background: var(--accent); } #auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--accent); padding-bottom: 10px; } .auth-tab { flex: 1; padding: 6px; border-radius: var(--radius-btn); border: 1px solid transparent; background: transparent; color: var(--text-dim); font-size: 0.88rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .auth-tab.active { background: var(--accent); color: var(--text); border-color: var(--accent); } .auth-form { display: flex; flex-direction: column; gap: 10px; } .auth-form.hidden { display: none; } .auth-form input { padding: 8px 12px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--bg); color: var(--text); font-size: 0.9rem; width: 100%; } .auth-form input:focus { outline: none; border-color: var(--selected-fill); } .avatar-label { font-size: 0.8rem; color: var(--text-dim); margin: 0; } .avatar-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .avatar-option { border-radius: 50%; cursor: pointer; border: 2px solid transparent; overflow: hidden; transition: border-color 0.15s, transform 0.1s; aspect-ratio: 1; } .avatar-option img { width: 100%; height: 100%; display: block; object-fit: cover; } .avatar-option:hover { border-color: var(--text-dim); transform: scale(1.08); } .avatar-option.selected { border-color: var(--hover-fill); } .auth-forgot { background: none; border: none; color: var(--text-dim); font-size: 0.78rem; cursor: pointer; text-align: right; padding: 0; text-decoration: underline; align-self: flex-end; } .auth-forgot:hover { color: var(--text); } .auth-submit { padding: 9px; border-radius: var(--radius-btn); border: none; background: var(--hover-fill); color: #111; font-weight: bold; font-size: 0.9rem; cursor: pointer; transition: opacity 0.15s; } .auth-submit:hover { opacity: 0.85; } .auth-submit:disabled { opacity: 0.5; cursor: default; } .auth-error { font-size: 0.82rem; color: var(--wrong); min-height: 1em; } .auth-separator { text-align: center; font-size: 0.78rem; color: var(--text-dim); position: relative; } .auth-separator::before, .auth-separator::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--accent); } .auth-separator::before { left: 0; } .auth-separator::after { right: 0; } .auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px; border-radius: var(--radius-btn); border: 1px solid #ccc; background: #fff; color: #333; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } .auth-google:hover { background: #f0f0f0; } .auth-google:disabled { opacity: 0.5; cursor: default; } .auth-anon { padding: 7px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: transparent; color: var(--text-dim); font-size: 0.85rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .auth-anon:hover { background: var(--accent); color: var(--text); } /* ══════════════════════════════════════════════════════════ PROFILE MODAL ══════════════════════════════════════════════════════════ */ #profile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; } #profile-overlay.hidden { display: none; } #profile-panel { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 20px 24px 24px; width: min(380px, 92vw); display: flex; flex-direction: column; gap: 16px; } #profile-header { display: flex; align-items: center; justify-content: space-between; } #profile-header h2 { font-size: 1.1rem; color: var(--hover-fill); text-transform: uppercase; letter-spacing: 2px; font-family: var(--h1-font); } #profile-close { background: transparent; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; } #profile-close:hover { color: var(--text); background: var(--accent); } #profile-avatar-picker { grid-template-columns: repeat(4, 1fr); gap: 8px; } #profile-panel section h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin: 0 0 10px; } #user-dropdown #profile-btn { width: 100%; padding: 6px 8px; border: none; background: transparent; color: var(--text-dim); font-size: 0.85rem; cursor: pointer; text-align: left; border-radius: 4px; } #user-dropdown #profile-btn:hover { background: var(--accent); color: var(--text); } /* ══════════════════════════════════════════════════════════ SETTINGS MODAL ══════════════════════════════════════════════════════════ */ #settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; } #settings-overlay.hidden { display: none; } #settings-panel { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 20px 24px 24px; width: min(420px, 92vw); } #settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } #settings-header h2 { font-size: 1.1rem; color: var(--hover-fill); text-transform: uppercase; letter-spacing: 2px; font-family: var(--h1-font); } #settings-close { background: transparent; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; } #settings-close:hover { color: var(--text); background: var(--accent); } #settings-panel section h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 12px; } /* ── Theme grid ── */ .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .theme-card { border: 2px solid var(--accent); border-radius: 8px; padding: 8px; cursor: pointer; text-align: center; background: var(--bg); transition: border-color 0.15s, transform 0.1s; } .theme-card:hover { border-color: var(--text-dim); transform: scale(1.02); } .theme-card.active { border-color: var(--hover-fill); } .theme-card span { font-size: 0.8rem; color: var(--text); display: block; margin-top: 6px; } .theme-preview { height: 48px; border-radius: 4px; overflow: hidden; display: flex; } .preview-ocean, .preview-land { flex: 1; } /* Hardcoded preview colors (independent of current theme) */ .theme-card[data-theme="sombre"] .preview-ocean { background: #2a4a6b; } .theme-card[data-theme="sombre"] .preview-land { background: #c8d6c8; } .theme-card[data-theme="colore"] .preview-ocean { background: #5bafd6; } .theme-card[data-theme="colore"] .preview-land { background: #a8d8a8; } .theme-card[data-theme="candy"] .preview-ocean { background: #c2185b; } .theme-card[data-theme="candy"] .preview-land { background: #f8bbd9; } .theme-card[data-theme="tresor"] .preview-ocean { background: #3a5c3a; } .theme-card[data-theme="tresor"] .preview-land { background: #c8a060; } .theme-card[data-theme="multi"] .preview-ocean { background: #1a2a4a; } .theme-card[data-theme="multi"] .preview-land { background: linear-gradient(to right, #e06060, #e09030, #c8c040, #50b870, #4090d0, #9060c8); } /* ── Help overlay ── */ #help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; } #help-overlay.hidden { display: none; } #help-panel { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 20px 24px 24px; width: min(460px, 92vw); max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; } #help-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } #help-header h2 { font-size: 1.1rem; color: var(--hover-fill); text-transform: uppercase; letter-spacing: 2px; font-family: var(--h1-font); } #help-close { background: transparent; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; } #help-close:hover { color: var(--text); background: var(--accent); } #help-panel section { margin-bottom: 16px; } #help-panel section h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 8px; } #help-panel ul { list-style: none; display: flex; flex-direction: column; gap: 5px; } #help-panel ul li { font-size: 0.88rem; padding-left: 12px; position: relative; } #help-panel ul li::before { content: '–'; position: absolute; left: 0; color: var(--text-dim); } #help-version { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--accent); font-size: 0.5rem; color: var(--text-dim); font-family: monospace; } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ /* Labels courts : masqués par défaut */ .lbl-short { display: none; } .lbl-full { display: inline; } /* touch-action sur la carte */ #map-container { touch-action: none; } /* ── Tablette (500–900px) ── */ @media (max-width: 900px) { #list-panel { width: 220px; } h1 { font-size: 1.1rem; letter-spacing: 1px; } header { padding: 6px 12px; } #toolbar { padding: 5px 10px; gap: 6px; } #info-panel { padding: 6px 12px; min-height: 46px; } #question { font-size: 1rem; } #question .q-name { font-size: 1.2rem; } #message { font-size: 0.88rem; } } /* ── Mobile (<500px) ── */ @media (max-width: 500px) { /* Labels courts dans les boutons de mode */ .lbl-short { display: inline; } .lbl-full { display: none; } h1 { font-size: 0.95rem; letter-spacing: 0; } #lives { font-size: 0.95rem; letter-spacing: 2px; } #score { font-size: 0.88rem; min-width: 50px; } header { padding: 5px 10px; } #toolbar { padding: 4px 8px; gap: 5px; } #info-panel { padding: 5px 10px; min-height: 42px; } #question { font-size: 0.9rem; } #question .q-name { font-size: clamp(1rem, 5vw, 1.2rem); } #question .q-label, #question .q-details { font-size: 0.72rem; } #message { font-size: 0.82rem; } /* Mode jeu : carte plein écran (list-panel déjà masqué par data-mode) */ /* Mode apprentissage : liste au-dessus, carte en dessous */ body[data-mode="learning"] #main-content { flex-direction: column; } body[data-mode="learning"] #list-panel { width: 100%; height: 200px; flex-shrink: 0; border-right: none; border-bottom: 1px solid var(--accent); } /* Timer gauge en bas en mode mobile */ body[data-mode="learning"] #timer-gauge { display: none; } /* Modales plein écran sur mobile */ #settings-panel, #help-panel { width: 95vw; padding: 14px 16px 18px; max-height: 90vh; } }