:root {
    --primary: #f59e0b; --secondary: #10b981; --accent: #3b82f6; --danger: #ef4444; --purple: #8b5cf6;
    --bg-gradient: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    --glass: rgba(255, 255, 255, 0.95);
    --text-main: #102a43; --text-sub: #627d98; --card-bg: #ffffff; --btn-bg: #ffffff;
    --cell-bg: #f0f4f8; --cell-text: #334e68;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
    --radius: 16px; --cell-size: 36px; --font-kur: 'Noto Naskh Arabic', serif; --font-lat: 'Nunito', sans-serif;
}
body.dark-mode {
    --bg-gradient: linear-gradient(135deg, #102a43 0%, #243b53 100%);
    --glass: rgba(16, 42, 67, 0.95); --text-main: #f0f4f8; --text-sub: #9fb3c8;
    --card-bg: #243b53; --btn-bg: #334e68; --cell-bg: #102a43; --cell-text: #d9e2ec;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
* { box-sizing: border-box; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: var(--font-kur); overscroll-behavior: none; }
body { background: var(--bg-gradient); color: var(--text-main); display: flex; justify-content: center; }
body.ltr { direction: ltr; font-family: var(--font-lat); }
body.rtl { direction: rtl; }
.app-wrapper { width: 100%; max-width: 480px; height: 100%; background: var(--glass); position: relative; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0,0,0,0.2); }

/* VIEWS */
.view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 70px 20px 20px 20px; display: flex; flex-direction: column; align-items: center; overflow-y: auto; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.3s; }
.view.active { opacity: 1; pointer-events: auto; z-index: 10; }
#view-game { overflow: hidden; justify-content: flex-start; }

/* HEADER CORRIGÉ */
.top-bar { position: absolute; top: 0; left: 0; width: 100%; height: 60px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; z-index: 50; backdrop-filter: blur(5px); }
.top-left-controls { display: flex; gap: 8px; align-items: center; }
.icon-btn.small-btn { width: auto; height: 36px; padding: 0 12px; font-size: 0.85rem; font-weight: 700; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background: var(--card-bg); color: var(--text-main); border: none; display: flex; align-items: center; cursor: pointer; }
.icon-btn.theme-btn { width: 38px; padding: 0; justify-content: center; }

/* LOGO */
.logo-section { margin-top: 15px; margin-bottom: 25px; text-align: center; flex-shrink: 0; }
.app-logo { width: 90px; height: 90px; border-radius: 20px; margin-bottom: 5px; box-shadow: var(--shadow); }
.app-title { font-size: 2rem; margin: 0; font-weight: 900; line-height: 1.2; }
.app-subtitle { font-size: 0.9rem; color: var(--text-sub); font-weight: 600; }

/* BUTTONS */
.btn { width: 100%; max-width: 300px; padding: 14px; margin: 6px 0; border: none; border-radius: 14px; font-size: 1rem; font-weight: 800; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: transform 0.1s; font-family: inherit; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--secondary); }
.btn-accent { background: var(--accent); }
.btn-purple { background: var(--purple); }
.btn-outline { background: transparent; border: 2px solid var(--text-main); color: var(--text-main); box-shadow: none; }

.segmented-control { display: flex; background: rgba(0,0,0,0.05); padding: 4px; border-radius: 12px; margin-bottom: 20px; width: 100%; max-width: 300px; }
.segment-btn { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 8px; font-weight: bold; color: var(--text-sub); cursor: pointer; transition: 0.2s; font-family: inherit; font-size: 0.9rem; }
.segment-btn.active { background: var(--card-bg); color: var(--text-main); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* GAME UI */
.game-header { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.icon-btn { background: var(--btn-bg); color: var(--text-main); border: none; width: 40px; height: 40px; border-radius: 10px; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); cursor: pointer; transition: 0.1s; position: relative; }
.timer-pill { background: var(--card-bg); padding: 6px 14px; border-radius: 15px; font-weight: 800; font-size: 1.1rem; color: var(--text-main); box-shadow: var(--shadow); direction: ltr; }
.hint-badge { position: absolute; top: -5px; right: -5px; background: var(--primary); color: #fff; font-size: 0.65rem; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card-bg); }

.grid-container { background: var(--card-bg); padding: 10px; border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 10px; display: grid; gap: 2px; justify-content: center; grid-template-columns: repeat(var(--cols), 1fr); touch-action: none; }
.cell { width: var(--cell-size); height: var(--cell-size); display: flex; align-items: center; justify-content: center; background: var(--cell-bg); border-radius: 6px; font-weight: 700; font-size: 1.2rem; color: var(--cell-text); cursor: pointer; transition: background 0.1s; touch-action: none; pointer-events: auto; }
body.rtl .cell { padding-top: 3px; }
.cell.selected { background: var(--primary); color: white; transform: scale(1.1); z-index: 5; border-radius: 50%; }
.cell.found { color: white; animation: popIn 0.4s; }
.cell.hinted { background: #fcd34d; color: #333; }

.word-panel { width: 100%; flex: 1; overflow-y: auto; background: var(--card-bg); border-radius: 16px; padding: 10px; box-shadow: 0 -5px 15px rgba(0,0,0,0.05); }
.word-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0; list-style: none; margin: 0; }
.chip { background: var(--bg-gradient); padding: 5px 10px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; color: var(--text-main); border: 1px solid rgba(0,0,0,0.05); transition: 0.3s; }
.chip.found { text-decoration: line-through; opacity: 0.5; color: white; border-color: transparent; }

/* EXTRAS */
.app-footer { text-align: center; padding: 20px 20px 40px 20px; font-size: 0.75rem; color: var(--text-sub); opacity: 0.7; margin-top: auto; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; padding-bottom: 20px; }
.cat-card { background: var(--card-bg); padding: 15px; border-radius: 16px; text-align: center; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.1s; display: flex; flex-direction: column; align-items: center; }
.cat-card:active { transform: scale(0.96); }
.cat-icon { font-size: 2.2rem; margin-bottom: 5px; }
.cat-name { font-weight: 700; color: var(--text-main); font-size: 0.85rem; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-bottom: 15px; }
.stat-box { background: var(--cell-bg); padding: 15px; border-radius: 15px; text-align: center; }
.stat-val { display: block; font-size: 1.4rem; font-weight: 900; color: var(--secondary); }
.stat-lbl { font-size: 0.8rem; opacity: 0.7; }
.rec-tab { background: transparent; border: 1px solid var(--text-sub); color: var(--text-sub); padding: 5px 10px; border-radius: 8px; font-size: 0.8rem; cursor: pointer; }
.rec-tab.active { background: var(--accent); color: white; border-color: var(--accent); font-weight: bold; }
.record-list { list-style: none; padding: 0; margin: 0; }
.record-item { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 0.9rem; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 100; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: 0.3s; }
.modal-overlay.visible { visibility: visible; opacity: 1; }
.modal-card { background: var(--card-bg); width: 90%; max-width: 320px; padding: 25px; border-radius: 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); transform: scale(0.9); transition: 0.3s; }
.modal-overlay.visible .modal-card { transform: scale(1); }
.rank-badge { background: linear-gradient(45deg, var(--primary), #e67e22); color: white; padding: 20px; border-radius: 20px; width: 100%; text-align: center; margin-bottom: 20px; box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3); }
#edu-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text-main); color: var(--card-bg); padding: 10px 20px; border-radius: 30px; font-weight: bold; box-shadow: 0 10px 25px rgba(0,0,0,0.2); opacity: 0; transition: 0.4s; pointer-events: none; white-space: nowrap; z-index: 200; }
#edu-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast-notif { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 10px 20px; border-radius: 20px; opacity: 0; transition: 0.3s; pointer-events: none; z-index: 200; }
@keyframes popIn { 0%{transform:scale(0)} 80%{transform:scale(1.1)} 100%{transform:scale(1)} }
@media(max-height: 700px) { :root { --cell-size: 32px; } .app-title { font-size: 1.6rem; } .cat-grid { max-height: 45vh; } }
/* HIDE SCROLLBARS */
.view, .word-panel, .cat-grid, .record-list { -ms-overflow-style: none; scrollbar-width: none; }
.view::-webkit-scrollbar, .word-panel::-webkit-scrollbar, .cat-grid::-webkit-scrollbar, .record-list::-webkit-scrollbar { display: none; }