/* =====================================================================
   تطبيق الطالب والمعلّم — منصة الحضارات: بوابة عشتار، بابل، وخريطة الرحلة
   ===================================================================== */
:root {
  --font: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'Montserrat', 'Tajawal', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --r: 20px;
  --danger: #E5484D;
  --ok: #16A34A;
  /* في أندرويد يحقن Capacitor المتغيرات --safe-area-inset-* ، وفي المتصفح نستخدم env() */
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  /* ألوان الخريطة (ثابتة لكل الثيمات) */
  --paper: #F3E2BC;
  --paper-2: #E8D09C;
  --ink: #5B3A1A;
  --ink-2: #8A5A2B;
  --sea: #7FB8C9;
}
html[data-theme="afaq"] {
  --p: #0B1F44; --a: #6A4EBF; --a2: #00B3A4; --g: #D4AF7C;
  --p-rgb: 11, 31, 68; --a-rgb: 106, 78, 191;
  --bg: #F4F6FB; --sf: #FFFFFF; --sf2: #EEF1F8; --tx: #0B1F44; --tx2: #3B4767; --mu: #7A84A0; --bd: #E3E7F2;
  --hero: radial-gradient(90% 120% at 0% 100%, rgba(0,179,164,.35), transparent 55%), radial-gradient(80% 90% at 15% 0%, rgba(106,78,191,.65), transparent 60%), linear-gradient(135deg, #0B1F44, #1d2563 60%, #3b2f8c);
  --grad: linear-gradient(135deg, #6A4EBF, #00B3A4);
  --sky: linear-gradient(180deg, #3b2f8c 0%, #6A4EBF 35%, #e9a6c4 70%, #ffd8a8 100%);
}
html[data-theme="zunara"] {
  --p: #581C35; --a: #873653; --a2: #D9A6B5; --g: #E3B98F;
  --p-rgb: 88, 28, 53; --a-rgb: 135, 54, 83;
  --bg: #FBF4F6; --sf: #FFFFFF; --sf2: #F7EDEF; --tx: #30252B; --tx2: #5A4750; --mu: #977F89; --bd: #EFDDE3;
  --hero: radial-gradient(90% 120% at 0% 100%, rgba(217,166,181,.45), transparent 55%), radial-gradient(80% 90% at 15% 0%, rgba(135,54,83,.8), transparent 60%), linear-gradient(135deg, #3d1124, #581C35 55%, #873653);
  --grad: linear-gradient(135deg, #873653, #D9A6B5);
  --sky: linear-gradient(180deg, #581C35 0%, #873653 35%, #e7a9bb 70%, #ffe0c7 100%);
}

html[data-theme="lagoon"] {
  --p: #0E2A3B; --a: #FF6B4A; --a2: #14B8A6; --g: #FFC447;
  --p-rgb: 14, 42, 59; --a-rgb: 255, 107, 74; --a2-rgb: 20, 184, 166;
  --bg: #F3F7F6; --sf: #FFFFFF; --sf2: #EDF3F2; --tx: #0E2A3B; --tx2: #3E5868; --mu: #7B8F99; --bd: #DFE9E7;
  --hero: radial-gradient(90% 110% at 100% 0%, rgba(20,184,166,.55), transparent 55%), radial-gradient(80% 90% at 0% 100%, rgba(255,107,74,.45), transparent 60%), linear-gradient(160deg, #0E2A3B 0%, #12405A 55%, #0F5A63 100%);
  --grad: linear-gradient(135deg, #FF6B4A 0%, #FF9248 100%);
  --grad2: linear-gradient(135deg, #14B8A6, #0EA5E9);
  --sky: linear-gradient(180deg, #0F4C68 0%, #2A86A3 34%, #8FD0D0 60%, #FFC9A3 82%, #FFE3B8 100%);
  --sea1: #4CC9C0; --sea2: #1F9EAF; --sea3: #0E6F83;
  --logo-1: #FFB199; --logo-2: #FF6B4A; --logo-3: #FFF1C9; --logo-4: #FFC447;
}
html[data-theme="afaq"] { --a2-rgb: 0, 179, 164; --grad2: linear-gradient(135deg, #00B3A4, #6A4EBF); --sea1: #7f8fe0; --sea2: #5a69c9; --sea3: #33408f; }
html[data-theme="zunara"] { --a2-rgb: 217, 166, 181; --grad2: linear-gradient(135deg, #D9A6B5, #873653); --sea1: #e3a3b6; --sea2: #b86a85; --sea3: #7a2f4c; }

/* بوابة عشتار — هوية منصة الحضارات: لازوردي بابلي، ذهب الرافدين، فيروزي مزجّج، رقّ عتيق */
html[data-theme="ishtar"] {
  --p: #0B1E4A; --a: #C9A04E; --a2: #2F7E8C; --g: #E9CF8E;
  --p-rgb: 11, 30, 74; --a-rgb: 201, 160, 78; --a2-rgb: 47, 126, 140;
  --bg: #F6EFE0; --sf: #FFFDF8; --sf2: #F1E8D5; --tx: #16203F; --tx2: #4A4F63; --mu: #8C8574; --bd: #E6DAC1;
  --hero: radial-gradient(90% 110% at 100% 0%, rgba(201,160,78,.42), transparent 55%), radial-gradient(80% 90% at 0% 100%, rgba(47,126,140,.45), transparent 60%), linear-gradient(160deg, #0B1E4A 0%, #15317A 60%, #1B3A8C 100%);
  --grad: linear-gradient(135deg, #EED38F 0%, #C9A04E 55%, #A97E2C 100%);
  --grad2: linear-gradient(135deg, #2F7E8C, #2456B8);
  --sky: linear-gradient(180deg, #081638 0%, #12296A 30%, #33488F 50%, #8C7AA6 66%, #E2A770 84%, #F4CF8C 100%);
  --sea1: #4C93A8; --sea2: #2B6F86; --sea3: #173F66;
  --logo-1: #E9CF8E; --logo-2: #C9A04E; --logo-3: #FFF6DE; --logo-4: #E9CF8E;
  --ink-on-gold: #2A1E06;
  --font-display: 'Reem Kufi', 'Tajawal', system-ui, sans-serif;
}
/* الأزرار الذهبية: نص داكن ليبقى مقروءاً */
html[data-theme="ishtar"] .btn.grad,
html[data-theme="ishtar"] .tabbar a.active,
html[data-theme="ishtar"] .steps2 span.on i { color: var(--ink-on-gold); }
html[data-theme="ishtar"] .btn.grad.loading::after { border-color: var(--ink-on-gold); border-right-color: transparent; }
html[data-theme="ishtar"] .avatar { color: var(--ink-on-gold); }
html[data-theme="ishtar"] .splash-brand h1,
html[data-theme="ishtar"] .auth-hello h1,
html[data-theme="ishtar"] .page-hero h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
/* شريط الطابوق المزجّج (بوابة عشتار): وردات ذهبية على لازوردي */
html[data-theme="ishtar"] .tabbar-inner { border: 1px solid rgba(233,207,142,.25); }

.glaze-band { height: 14px; background:
  radial-gradient(circle at 50% 50%, #F3DFA6 0 2.2px, #C9A04E 2.3px 3.6px, transparent 3.7px) 0 0 / 22px 14px,
  linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px) 0 0 / 22px 14px,
  linear-gradient(180deg, #1B3A8C, #0E2558); border-block: 2px solid #C9A04E; }

/* ---- البداية ---- */
.splash-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(233,207,142,.09) 0 6deg, transparent 6deg 18deg); animation: spin 60s linear infinite; mask: radial-gradient(circle, #000 0 30%, transparent 62%); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); }
html[data-theme="ishtar"] .splash .logo { width: 150px; height: 150px; }
html[data-theme="ishtar"] .splash .logo img { filter: drop-shadow(0 10px 28px rgba(233,207,142,.35)); animation: logoGlow 3.2s ease-in-out infinite; }
@keyframes logoGlow { 50% { filter: drop-shadow(0 10px 40px rgba(233,207,142,.65)); transform: translateY(-4px); } }
html[data-theme="ishtar"] .loader-dots i { background: var(--g); }

/* ---- مشهد بابل في شاشة الدخول ---- */
.auth-scene.babylon .star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #FFF6DE; box-shadow: 0 0 6px #FFE7A8; animation: twinkle var(--t) ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.6); } }
.auth-scene.babylon .moon { position: absolute; top: 9%; left: 12%; width: 54px; height: 54px; border-radius: 50%; box-shadow: inset -12px 4px 0 0 #F6E3AE; filter: drop-shadow(0 0 14px rgba(246,227,174,.7)); transform: rotate(-20deg); }
.auth-scene.babylon .cune-ring { position: absolute; left: 50%; bottom: 3%; width: 330px; height: 330px; margin-left: -165px; color: rgba(233,207,142,.35); animation: spin 90s linear infinite; z-index: 1; }
.auth-scene.babylon .cune-ring svg { width: 100%; height: 100%; }
.auth-scene.babylon .zig { position: absolute; left: 50%; bottom: 66px; width: 270px; margin-left: -135px; z-index: 2; filter: drop-shadow(0 18px 22px rgba(5,12,35,.45)); animation: zigIn 1.2s var(--ease) both; }
.auth-scene.babylon .zig .zg-glow { animation: glowPulse 4s ease-in-out infinite; transform-origin: 130px 30px; }
@keyframes glowPulse { 50% { opacity: .55; transform: scale(1.15); } }
@keyframes zigIn { from { opacity: 0; transform: translateY(40px) scale(.94); } }
.auth-scene.babylon .palm { position: absolute; bottom: 58px; z-index: 3; width: 74px; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
.auth-scene.babylon .palm.p1 { right: 2%; width: 92px; }
.auth-scene.babylon .palm.p2 { left: 3%; width: 80px; animation-delay: -2s; }
.auth-scene.babylon .palm.p3 { left: 19%; width: 54px; bottom: 62px; animation-delay: -4s; opacity: .85; }
@keyframes sway { 50% { transform: rotate(2.5deg); } }
.auth-scene.babylon .dust { position: absolute; bottom: 70px; width: 4px; height: 4px; border-radius: 50%; background: #FFE7A8; box-shadow: 0 0 8px #FFD98A; opacity: 0; animation: dustUp var(--d) linear infinite; z-index: 3; }
@keyframes dustUp { 10% { opacity: .9; } 100% { transform: translate(14px, -260px); opacity: 0; } }
.auth-scene.babylon .sea { height: 84px; z-index: 4; }
html[data-theme="ishtar"] .auth { background: var(--sea3); }
html[data-theme="ishtar"] .auth-sheet { border-top: 0; padding-top: 0; overflow: hidden; }
html[data-theme="ishtar"] .auth-sheet::before { width: auto; height: 12px; border-radius: 0; margin: 0 -20px 18px; background:
  radial-gradient(circle at 50% 50%, #F3DFA6 0 2px, #C9A04E 2.1px 3.4px, transparent 3.5px) 0 0 / 22px 12px,
  linear-gradient(180deg, #1B3A8C, #0E2558); border-bottom: 2px solid #C9A04E; }
html[data-theme="ishtar"] .auth-top .brand .logo.sm { width: 46px; height: 46px; }
html[data-theme="ishtar"] .auth-hello h1 { color: #FFF6DE; text-shadow: 0 4px 22px rgba(5,12,35,.55); }

/* جواز المستكشف ← رُقيم بابلي */
html[data-theme="ishtar"] .passport { background: radial-gradient(120% 90% at 0% 0%, rgba(201,160,78,.35), transparent 55%), radial-gradient(90% 90% at 100% 100%, rgba(47,126,140,.4), transparent 60%), linear-gradient(140deg, #0B1E4A, #1B3A8C); border: 1px solid rgba(233,207,142,.35); }
html[data-theme="ishtar"] .passport::before { background: radial-gradient(circle at 50% 50%, rgba(233,207,142,.12) 0 2px, transparent 2.5px) 0 0 / 18px 18px; }
html[data-theme="ishtar"] .pp-photo { border-color: rgba(233,207,142,.55); color: var(--g); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--tx); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.num { font-family: var(--font-en); font-variant-numeric: tabular-nums; }
svg.i { width: 1.3em; height: 1.3em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#app { position: relative; max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--bg); overflow-x: hidden; box-shadow: 0 0 60px rgba(0,0,0,.08); }
.screen { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(96px + var(--sab)); animation: screenIn .45s var(--ease); }
.screen.full { padding-bottom: 0; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------ عناصر عامة ------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 18px; border: 0; font-weight: 800; font-size: 16px; background: var(--sf2); color: var(--tx); transition: transform .2s var(--spring), box-shadow .2s, opacity .2s; position: relative; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; }
.btn.primary { background: var(--p); color: #fff; box-shadow: 0 14px 26px -12px rgba(var(--p-rgb), .7); }
.btn.grad { background: var(--grad); color: #fff; box-shadow: 0 14px 26px -12px rgba(var(--a-rgb), .8); }
.btn.gold { background: linear-gradient(135deg, #f7d488, #d99a3b); color: #4a2a05; box-shadow: 0 14px 26px -12px #b97a1c; }
.btn.ghost { background: transparent; border: 2px solid var(--bd); }
.btn.light { background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); }
.btn.block { width: 100%; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 14px; }
.btn.loading { color: transparent !important; }
.btn.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #fff; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn:not(.primary):not(.grad).loading::after { border-color: var(--a); border-right-color: transparent; }
.icon-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; display: grid; place-items: center; background: var(--sf); color: var(--tx); box-shadow: 0 4px 14px -6px rgba(0,0,0,.2); flex: none; }
.icon-btn.glass { background: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(10px); box-shadow: none; border: 1px solid rgba(255,255,255,.25); }
.card { background: var(--sf); border-radius: 24px; padding: 18px; box-shadow: 0 12px 30px -18px rgba(var(--p-rgb), .35); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--tx2); }
.field input, .field select { height: 54px; border-radius: 16px; border: 2px solid transparent; background: var(--sf2); padding: 0 16px; outline: none; font-size: 16px; transition: border-color .2s, box-shadow .2s; width: 100%; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A84A0' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 16px center; }
.field input:focus, .field select:focus { border-color: var(--a); background: var(--sf); box-shadow: 0 0 0 4px rgba(var(--a-rgb), .12); }
.inp { position: relative; }
.inp > svg.i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--mu); pointer-events: none; transition: color .2s; z-index: 1; }
.inp input, .inp select { padding-right: 48px; }
.inp:focus-within > svg.i { color: var(--a); }
.field.bad .inp > svg.i { color: var(--danger); }
.pw button.on { color: var(--a); }
.btn.lg { height: 56px; font-size: 17px; border-radius: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field.bad input, .field.bad select { border-color: var(--danger); }
.field .msg { font-size: 12px; min-height: 0; }
.field .msg.ok { color: var(--ok); } .field .msg.err { color: var(--danger); }
.pw { position: relative; }
.pw input { padding-left: 52px; }
.field input[dir="ltr"]::placeholder { direction: rtl; text-align: right; }
.pw button { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--mu); width: 40px; height: 40px; display: grid; place-items: center; }
.alert { padding: 12px 16px; border-radius: 16px; font-size: 14px; font-weight: 600; background: rgba(229,72,77,.1); color: var(--danger); }
.alert.info { background: rgba(var(--a-rgb), .1); color: var(--a); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--sf); font-weight: 800; font-size: 14px; box-shadow: 0 4px 14px -6px rgba(0,0,0,.2); }
.pill.glass { background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(8px); box-shadow: none; }
.star-ico { color: #F5B700; filter: drop-shadow(0 1px 0 #b98400); }
.muted { color: var(--mu); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }
.skeleton { background: linear-gradient(90deg, var(--sf2) 25%, var(--bd) 50%, var(--sf2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 20px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* شريط سفلي */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(520px, 100%); padding: 8px 16px calc(12px + var(--sab)); z-index: 40; pointer-events: none; }
.tabbar-inner { pointer-events: auto; display: flex; gap: 6px; background: var(--p); background: color-mix(in srgb, var(--p) 94%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 28px; padding: 7px; box-shadow: 0 18px 40px -14px rgba(var(--p-rgb), .7); border: 1px solid rgba(255,255,255,.08); }
.tabbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 22px; color: rgba(255,255,255,.55); font-size: 13px; font-weight: 800; transition: .35s var(--ease); }
.tabbar a span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--ease); }
.tabbar a.active { flex: 1.6; color: #fff; background: var(--grad); box-shadow: 0 10px 20px -8px rgba(var(--a-rgb), .9); }
.tabbar a.active span { max-width: 90px; }
.tabbar svg { transition: .3s var(--spring); }
.tabbar a.active svg { transform: scale(1.08); }

/* توست وورقة سفلية */
.toast-wrap { position: fixed; top: calc(14px + var(--sat)); left: 50%; transform: translateX(-50%); width: min(480px, calc(100% - 28px)); z-index: 400; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--p); color: #fff; border-radius: 18px; padding: 13px 16px; font-weight: 700; font-size: 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 18px 30px -12px rgba(0,0,0,.45); animation: toastIn .45s var(--spring); }
.toast.err { background: #b4232a; }
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-20px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-14px); } }
.sheet-layer { position: fixed; inset: 0; z-index: 300; background: rgba(var(--p-rgb), .45); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; animation: fade .25s; }
.sheet-layer.closing { animation: fade .25s reverse forwards; }
.sheet { width: min(520px, 100%); background: var(--sf); border-radius: 30px 30px 0 0; padding: 12px 20px calc(24px + var(--sab)); animation: sheetIn .45s var(--ease); max-height: 88vh; overflow-y: auto; }
.sheet-layer.closing .sheet { animation: sheetOut .25s ease forwards; }
.sheet .grab { width: 44px; height: 5px; border-radius: 9px; background: var(--bd); margin: 0 auto 14px; }
@keyframes fade { from { opacity: 0; } }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(100%); } }

/* ------------------------------ السحب (مشترك) ------------------------------ */
.cloud { position: absolute; width: var(--w, 140px); height: calc(var(--w, 140px) * .32); background: #fff; border-radius: 999px; opacity: var(--o, .95); filter: drop-shadow(0 8px 14px rgba(0,0,0,.08)); }
.cloud::before, .cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 46%; height: 140%; top: -70%; left: 14%; }
.cloud::after { width: 36%; height: 110%; top: -48%; left: 50%; }
.drift { animation: drift var(--d, 40s) linear infinite; }
@keyframes drift { from { transform: translateX(-120%); } to { transform: translateX(calc(100vw + 120%)); } }

/* ------------------------------ البداية والدخول ------------------------------ */
.splash { position: fixed; inset: 0; z-index: 500; background: var(--hero); color: #fff; display: grid; place-items: center; overflow: hidden; }
.splash.hide { animation: splashOut .6s var(--ease) forwards; }
@keyframes splashOut { to { opacity: 0; transform: scale(1.08); visibility: hidden; } }
.splash-brand { text-align: center; z-index: 2; animation: rise .8s var(--spring); }
.splash-brand h1 { font-size: 34px; margin-top: 12px; }
.splash-brand p { opacity: .8; }
.logo { width: 110px; height: 92px; margin: 0 auto; display: grid; place-items: center; }
.logo svg, .logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.3)); }
.logo.sm { width: 52px; height: 44px; }
.loader-dots { display: flex; gap: 6px; justify-content: center; margin-top: 26px; }
.loader-dots i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: dot 1s infinite; }
.loader-dots i:nth-child(2) { animation-delay: .15s; } .loader-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-8px); opacity: .5; } }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.9); } }

/* ---- مشهد الدخول ---- */
.auth { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--sea3); overflow: hidden; }
.auth-scene { position: absolute; inset: 0 0 auto 0; height: 62vh; min-height: 380px; background: var(--sky); overflow: hidden; }
.auth-scene .sun { position: absolute; width: 170px; height: 170px; border-radius: 50%; left: 8%; bottom: 20%; background: radial-gradient(circle, #fff8de 0%, #ffd889 34%, rgba(255,190,110,0) 70%); animation: sunPulse 6s ease-in-out infinite; }
@keyframes sunPulse { 50% { transform: scale(1.08); } }
@keyframes floatY { 50% { transform: translateY(-10px); } }
.auth-scene .birds { position: absolute; top: 24%; width: 64px; color: rgba(14,42,59,.5); animation: birds 26s linear infinite; }
@keyframes birds { from { right: -80px; transform: translateY(0); } 50% { transform: translateY(-14px); } to { right: 110%; transform: translateY(6px); } }
.auth-scene .isle-big { position: absolute; left: 50%; bottom: 14%; width: 210px; margin-left: -40px; z-index: 2; animation: floatY 6s ease-in-out infinite; filter: drop-shadow(0 18px 16px rgba(0,0,0,.18)); }
.auth-scene .boat-mini { position: absolute; bottom: 12%; width: 54px; z-index: 3; animation: sail 30s linear infinite; }
@keyframes sail { from { right: -70px; } to { right: 110%; } }
.auth-scene .sea { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 2; }
.auth-scene .wave, .page-hero .wave { position: absolute; left: -100%; width: 200%; height: 60px; animation: waveMove var(--s, 7s) linear infinite; }
.auth-scene .wave path { fill: var(--c); }
.auth-top { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: calc(14px + var(--sat)) 18px 0; color: #fff; }
.auth-top .brand { display: flex; align-items: center; gap: 10px; font-size: 16px; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.auth-top .brand .logo.sm { width: 42px; height: 36px; margin: 0; }
.auth-hello { position: relative; z-index: 5; padding: 14px 22px 0; color: #fff; animation: rise .7s var(--ease) both; }
.auth-hello h1 { font-size: 25px; line-height: 1.35; text-shadow: 0 4px 18px rgba(0,0,0,.25); max-width: 92%; }
.auth-hello p { margin-top: 6px; font-size: 14.5px; opacity: .92; text-shadow: 0 2px 10px rgba(0,0,0,.25); max-width: 85%; }
.auth-gap { flex: 1; min-height: 190px; }
.auth-sheet { position: relative; z-index: 6; background: var(--sf); border-radius: 34px 34px 0 0; padding: 18px 20px calc(26px + var(--sab)); box-shadow: 0 -24px 60px -24px rgba(0,0,0,.45); animation: sheetUp .7s var(--ease) both; }
.auth-sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 9px; background: var(--bd); margin: -6px auto 14px; }
@keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } }
.seg2 { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--sf2); border-radius: 18px; padding: 5px; margin-bottom: 18px; }
.seg2 a { position: relative; z-index: 1; text-align: center; padding: 11px 0; font-weight: 800; font-size: 14.5px; color: var(--mu); transition: color .3s; }
.seg2 a.on { color: var(--p); }
.seg2 .ind { position: absolute; top: 5px; bottom: 5px; right: 5px; width: calc(50% - 5px); background: var(--sf); border-radius: 14px; box-shadow: 0 6px 16px -6px rgba(var(--p-rgb), .35); transition: transform .5s var(--spring); }
.seg2.second .ind { transform: translateX(-100%); }
.steps2 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.steps2 span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--mu); }
.steps2 span i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--sf2); transition: .3s; }
.steps2 span.on { color: var(--p); }
.steps2 span.on i { background: var(--grad); color: #fff; box-shadow: 0 6px 12px -4px rgba(var(--a-rgb), .7); }
.steps2 span.done i { background: var(--a2); color: #fff; }
.steps2 b { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--bd), var(--a2)); }

/* جواز المستكشف */
.passport { position: relative; border-radius: 22px; padding: 14px 16px 12px; color: #fff; overflow: hidden; margin-bottom: 16px;
  background: var(--p);
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--a2-rgb), .45), transparent 55%), radial-gradient(90% 90% at 100% 100%, rgba(var(--a-rgb), .35), transparent 60%), linear-gradient(140deg, var(--p), color-mix(in srgb, var(--p) 75%, #000));
  box-shadow: 0 18px 32px -18px rgba(var(--p-rgb), .85); animation: rise .6s var(--ease) both; }
.passport::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px); pointer-events: none; }
.passport::after { content: ''; position: absolute; left: -40px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; border: 18px solid rgba(255,255,255,.05); }
.pp-head { display: flex; justify-content: space-between; font-family: var(--font-en); font-size: 9.5px; letter-spacing: .22em; color: var(--g); font-weight: 700; position: relative; }
.pp-head span:last-child { font-family: var(--font); letter-spacing: 0; font-size: 11px; }
.pp-row { display: flex; gap: 14px; align-items: center; margin-top: 10px; position: relative; z-index: 1; }
.pp-photo { width: 58px; height: 70px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 22px; font-weight: 800; background: rgba(255,255,255,.12); border: 2px dashed rgba(255,255,255,.35); }
.pp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-body strong { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-meta { font-size: 12.5px; opacity: .85; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-meta svg.i { width: 1.05em; height: 1.05em; }
.pp-mrz { font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 2px; opacity: .4; direction: ltr; text-align: left; margin-top: 8px; white-space: nowrap; overflow: hidden; position: relative; }
.pp-stamp { position: absolute; left: 16px; top: 30px; border: 3px solid #4ade80; color: #4ade80; font-weight: 800; border-radius: 10px; padding: 2px 10px; transform: rotate(-14deg) scale(2); opacity: 0; animation: stamp .35s ease-in .5s forwards; z-index: 2; }
.passport.big { padding: 18px; margin-bottom: 0; }
.passport.big .pp-photo { width: 72px; height: 88px; font-size: 28px; }
.passport.big .pp-body strong { font-size: 19px; }
.welcome .passport { text-align: start; }

/* ---- الرئيسية ---- */
.home-head { position: relative; background: var(--hero); color: #fff; padding: calc(16px + var(--sat)) 20px 92px; overflow: hidden; }
.wave-div { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 48px; z-index: 1; }
.wave-div path { fill: var(--bg); }
.bubble { position: absolute; bottom: -20px; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); animation: bubble var(--d) ease-in infinite; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-260px) translateX(12px); opacity: 0; } }
.avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 19px; background: var(--grad); color: #fff; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 0 0 5px rgba(255,255,255,.12), 0 10px 20px -8px rgba(0,0,0,.4); flex: none; }
.hello small { display: block; opacity: .8; font-size: 13px; }
.hello strong { font-size: 21px; display: block; line-height: 1.2; }
.grade-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: rgba(255,255,255,.14); }
.grade-chip svg.i { width: 1.1em; height: 1.1em; }
.level { position: relative; z-index: 2; margin-top: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 10px 14px 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lv-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; }
.lv-top .num { color: var(--g); }
.lv-bar { height: 9px; border-radius: 9px; background: rgba(255,255,255,.14); margin-top: 8px; overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--g), var(--a)); box-shadow: 0 0 12px rgba(255,196,71,.7); animation: grow 1.2s var(--ease) both; transform-origin: right; }
@keyframes grow { from { transform: scaleX(0); } }
.home-body { padding: 0 18px; margin-top: -60px; position: relative; z-index: 3; display: flex; flex-direction: column; gap: 18px; }

/* تذكرة الاشتراك */
.pass { position: relative; background: var(--sf); border-radius: 26px; box-shadow: 0 22px 40px -22px rgba(var(--p-rgb), .55); overflow: hidden; }
.pass::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 7px; background: var(--grad); }
.pass.off::before { background: linear-gradient(180deg, #f87171, #b91c1c); }
.pass-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; }
.pass-top small { display: block; color: var(--mu); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.pass-top strong { font-size: 16px; }
.pass-plane { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--grad2, var(--grad)); box-shadow: 0 8px 16px -8px rgba(var(--a2-rgb, var(--a-rgb)), .9); transform: rotate(-8deg); flex: none; }
.pass-tear { position: relative; height: 0; border-top: 2px dashed var(--bd); margin: 0 20px; }
.pass-bottom { padding: 12px 20px 16px; display: flex; align-items: center; gap: 12px; min-height: 92px; }
.pass-msg { font-weight: 700; font-size: 14px; padding-left: 76px; }
.countdown { display: flex; gap: 6px; }
.countdown div { display: flex; flex-direction: column; align-items: center; }
.countdown b { min-width: 46px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-en); font-size: 20px; color: #fff; background: var(--p); background: linear-gradient(170deg, color-mix(in srgb, var(--p) 70%, var(--a2)), var(--p)); box-shadow: inset 0 -6px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15), 0 8px 14px -8px rgba(var(--p-rgb), .6); position: relative; }
.countdown b::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.2); }
.countdown small { font-size: 10px; color: var(--mu); font-weight: 700; margin-top: 3px; }
.countdown.dead b { background: linear-gradient(160deg, #b9bfcf, #8a91a5); }
.stamp { position: absolute; left: 16px; bottom: 22px; border: 3px solid currentColor; border-radius: 10px; padding: 2px 10px; font-weight: 800; font-size: 13px; transform: rotate(-12deg); opacity: .85; }
.stamp.trial { color: var(--a); } .stamp.active { color: var(--ok); } .stamp.expired, .stamp.suspended, .stamp.none { color: var(--danger); }

/* بطاقة "تابع رحلتك" */
.continue { display: flex; align-items: center; gap: 14px; padding: 10px; padding-left: 14px; border-radius: 24px; background: var(--sf); box-shadow: 0 16px 30px -20px rgba(var(--p-rgb), .55); }
.continue .c-art { width: 74px; height: 74px; border-radius: 20px; overflow: hidden; flex: none; display: grid; place-items: center; background: linear-gradient(180deg, #c9f0ff 0%, #9bdcf2 50%, var(--sea1) 51%, var(--sea2) 100%); }
.continue .c-art svg { width: 96px; margin-top: 14px; }
.continue .c-txt { flex: 1; min-width: 0; }
.continue small { display: block; color: var(--mu); font-size: 12px; font-weight: 700; }
.continue strong { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue .go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 10px 18px -8px rgba(var(--a-rgb), .9); flex: none; animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(-4px); } }

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px -4px; }
.section-title h3 { font-size: 18px; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--sf); border-radius: 22px; padding: 12px 6px; text-align: center; box-shadow: 0 10px 22px -18px rgba(var(--p-rgb), .5); display: flex; flex-direction: column; align-items: center; }
.stat .s-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 4px; color: var(--c); background: var(--sf2); background: color-mix(in srgb, var(--c) 14%, transparent); }
.stat b { display: block; font-size: 21px; font-family: var(--font-en); line-height: 1.2; }
.stat small { font-size: 12px; color: var(--mu); font-weight: 700; }

/* جزر المواد: نافذة سفينة دائرية */
.islands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.island-card { position: relative; border-radius: 26px; padding: 16px 10px 14px; background: var(--sf); box-shadow: 0 16px 30px -22px rgba(var(--p-rgb), .55); text-align: center; transition: transform .25s var(--spring); overflow: hidden; }
.island-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 64px; background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 16%, transparent), transparent); }
.island-card:active { transform: scale(.96); }
.porthole { position: relative; width: 108px; height: 108px; margin: 0 auto 10px; border-radius: 50%; padding: 6px; background: conic-gradient(var(--sc) calc(var(--pct) * 1%), var(--sf2) 0); }
.ph-in { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 4px solid var(--sf); background: linear-gradient(180deg, #d4f3ff 0%, #a7e0f4 52%, var(--sea1) 53%, var(--sea2) 100%); box-shadow: inset 0 4px 10px rgba(0,0,0,.12); }
.ph-in svg { width: 112px; margin-top: 20px; animation: floatY 4.5s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.ph-badge { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: var(--sc); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 99px; border: 2px solid var(--sf); }
.island-card strong { display: block; font-size: 15px; position: relative; }
.island-card .meta { display: flex; justify-content: center; gap: 10px; align-items: center; font-size: 12px; color: var(--mu); font-weight: 700; margin-top: 4px; }
.island-card.soon .porthole { filter: grayscale(.7); opacity: .7; }
.empty { text-align: center; padding: 30px 16px; color: var(--mu); }
.empty .e-ico { font-size: 54px; margin-bottom: 6px; }

/* ------------------------------ خريطة الكنز ------------------------------ */
.map-screen { background: #c9a86a; min-height: 100dvh; }
.map-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--sat)) 14px 12px; background: linear-gradient(180deg, rgba(91,58,26,.92), rgba(91,58,26,.75)); backdrop-filter: blur(8px); color: #fff3d6; }
.map-bar h2 { font-size: 18px; flex: 1; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.map-bar .icon-btn { background: rgba(255,243,214,.15); color: #fff3d6; box-shadow: none; }
.map-bar .pill { background: rgba(255,243,214,.15); color: #fff3d6; box-shadow: none; }
.map-wrap { position: relative; overflow: hidden; margin: 0; background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120,72,24,.35) 100%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(91,58,26,.06) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(91,58,26,.06) 46px 47px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(160,110,50,.18), transparent 45%),
    linear-gradient(180deg, var(--paper), var(--paper-2)); }
.map-wrap::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(91,58,26,.45), inset 0 0 0 10px rgba(255,248,230,.25); pointer-events: none; z-index: 1; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.map-svg .seg { fill: none; stroke: var(--ink); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; opacity: .35; }
.map-svg .seg.done { opacity: .9; stroke: #a5321e; stroke-dasharray: 1 10; stroke-width: 5; }
.map-title { position: relative; z-index: 2; text-align: center; padding-top: 26px; color: var(--ink); }
.map-title .scroll { display: inline-block; background: #fff6df; padding: 10px 30px; border-radius: 6px; box-shadow: 0 6px 0 #d8bb83, 0 12px 20px -8px rgba(91,58,26,.6); position: relative; }
.map-title .scroll::before, .map-title .scroll::after { content: ''; position: absolute; top: 4px; bottom: -6px; width: 16px; background: linear-gradient(90deg, #c69c56, #f3dba8, #c69c56); border-radius: 8px; }
.map-title .scroll::before { right: -12px; } .map-title .scroll::after { left: -12px; }
.map-title h3 { font-size: 20px; }
.map-title small { font-size: 12px; color: var(--ink-2); font-weight: 700; }
.compass { position: absolute; z-index: 1; width: 74px; height: 74px; top: 118px; right: 12px; opacity: .75; animation: compassSpin 30s linear infinite; }
@keyframes compassSpin { to { transform: rotate(360deg); } }
.decor { position: absolute; z-index: 1; pointer-events: none; color: var(--ink); opacity: .45; }
.decor.wave { width: 70px; }
.decor.monster { width: 90px; opacity: .35; }
.region { position: absolute; z-index: 2; transform: translate(-50%, -50%) rotate(-4deg); background: #a5321e; color: #fff4dc; font-weight: 800; font-size: 13px; padding: 6px 16px; border-radius: 4px; box-shadow: 0 4px 0 #6e1f11; white-space: nowrap; }
.region::before, .region::after { content: ''; position: absolute; top: 6px; border: 12px solid #8a2816; z-index: -1; }
.region::before { right: -16px; border-left-color: transparent; } .region::after { left: -16px; border-right-color: transparent; }

.node { position: absolute; z-index: 3; width: 128px; margin-left: -64px; transform: translateY(-50%); border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.node .isle { position: relative; width: 120px; height: 82px; transition: transform .3s var(--spring); }
.node:active .isle { transform: scale(.94); }
.node .isle svg { width: 100%; height: 100%; overflow: visible; }
.node .seal { z-index: 2; position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #d1453a, #8f1d14); box-shadow: 0 4px 0 #5e120c, 0 10px 16px -6px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.3); border: 3px solid #f6d9a3; }
.node.is-exam .seal { background: radial-gradient(circle at 35% 30%, #f6c453, #b7791f); box-shadow: 0 4px 0 #7c4f10, 0 10px 16px -6px rgba(0,0,0,.5); }
.node.done .seal { background: radial-gradient(circle at 35% 30%, #34d399, #047857); box-shadow: 0 4px 0 #064e3b, 0 10px 16px -6px rgba(0,0,0,.5); }
.node .label { margin-top: 2px; max-width: 132px; font-weight: 800; font-size: 13px; line-height: 1.35; color: var(--ink); background: rgba(255,246,223,.92); padding: 3px 10px; border-radius: 10px; box-shadow: 0 3px 0 rgba(160,110,50,.4); }
.node .label small { display: block; font-size: 10.5px; color: var(--ink-2); font-weight: 700; }
.node .stars { display: flex; justify-content: center; gap: 1px; font-size: 14px; line-height: 1; margin-top: 2px; }
.node .stars span { color: #e2cfa6; text-shadow: 0 1px 0 #b99a63; }
.node .stars span.on { color: #ffc51a; text-shadow: 0 1px 0 #a87800, 0 0 8px rgba(255,197,26,.6); animation: starPop .5s var(--spring) backwards; }
.node .stars span.on:nth-child(2) { animation-delay: .1s; } .node .stars span.on:nth-child(3) { animation-delay: .2s; }
@keyframes starPop { from { transform: scale(0) rotate(-90deg); } }
.node.open .isle { animation: pulseIsle 2.2s ease-in-out infinite; }
.node.open .isle::before { content: ''; position: absolute; left: 50%; top: 36%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 3px solid #fff3c4; animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes pulseIsle { 50% { transform: translateY(-5px); } }
.node.locked .isle svg { filter: grayscale(.85) brightness(.95) opacity(.75); }
.node.locked .seal { background: radial-gradient(circle at 35% 30%, #9ca3af, #4b5563); box-shadow: 0 4px 0 #374151, 0 8px 12px -6px rgba(0,0,0,.4); }
.node.locked .label { opacity: .7; }
.node .fog { z-index: 1; opacity: .8; position: absolute; inset: -6px -14px auto; height: 70px; pointer-events: none; }
.node .fog .cloud { --w: 70px; --o: .85; }
.node .flag { position: absolute; top: -24px; right: 26px; width: 30px; animation: flagWave 2s ease-in-out infinite; transform-origin: bottom left; }
@keyframes flagWave { 50% { transform: skewY(-6deg); } }
.ship { position: absolute; z-index: 4; width: 64px; height: 64px; margin: -56px 0 0 -32px; pointer-events: none; transition: none; }
.ship svg { width: 100%; height: 100%; animation: shipBob 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 6px rgba(91,58,26,.35)); }
@keyframes shipBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.treasure { position: absolute; z-index: 3; width: 150px; margin-left: -75px; text-align: center; transform: translateY(-40%); }
.treasure .x { font-family: var(--font-en); font-weight: 800; font-size: 70px; line-height: 1; color: #a5321e; text-shadow: 0 3px 0 #6e1f11; }
.treasure .chest-mini { width: 90px; margin: -16px auto 0; }
.treasure.open .chest-mini { filter: drop-shadow(0 0 22px #ffd34d); animation: floatY 2s ease-in-out infinite; }
.treasure p { font-weight: 800; color: var(--ink); font-size: 13px; }

/* ورقة تفاصيل المحطة */
.station { text-align: center; }
.station .st-ico { width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 28px; display: grid; place-items: center; color: #fff; font-size: 36px; background: var(--grad); box-shadow: 0 16px 30px -14px rgba(var(--a-rgb), .9); transform: rotate(-6deg); }
.station .st-ico .i { width: 40px; height: 40px; }
.station h3 { font-size: 20px; }
.station .tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 10px 0 14px; }
.station .tags span { background: var(--sf2); padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--tx2); }
.station p.desc { color: var(--tx2); margin: 4px 0 16px; }
.station .tags span.stars-tag { color: #d99a00; background: #fff6d6; letter-spacing: 1px; }

/* ------------------------------ مقدمة الرحلة (درس) ------------------------------ */
.journey { position: fixed; inset: 0; z-index: 150; overflow: hidden; background: var(--sky); color: #fff; }
.journey .sun { position: absolute; width: 180px; height: 180px; border-radius: 50%; left: 50%; bottom: 18%; margin-left: -90px; background: radial-gradient(circle, #fff6d6 0%, #ffd27a 40%, rgba(255,190,90,0) 70%); animation: sunRise 3s var(--ease) both; }
@keyframes sunRise { from { transform: translateY(80px) scale(.8); opacity: .3; } }
.journey .layer { position: absolute; inset: 0; }
.journey .l1 .cloud { animation: cloudPass 3.4s linear both; }
.journey .l2 .cloud { animation: cloudPass 2.4s linear both; }
@keyframes cloudPass { from { transform: translateX(-60vw); } to { transform: translateX(60vw); } }
.journey .plane { position: absolute; top: 24%; width: 120px; right: -140px; animation: planeFly 2.6s cubic-bezier(.45,.05,.4,1) .15s both; z-index: 3; filter: drop-shadow(0 12px 10px rgba(0,0,0,.25)); }
@keyframes planeFly { 0% { transform: translate(0, 40px) rotate(8deg); } 60% { transform: translate(calc(-50vw - 60px), -10px) rotate(-4deg); } 100% { transform: translate(calc(-100vw - 300px), -60px) rotate(-10deg); } }
.journey .trail { position: absolute; top: calc(24% + 34px); right: 0; height: 3px; width: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8)); border-radius: 3px; animation: trail 2.2s ease-out .3s both; }
@keyframes trail { to { width: 120vw; opacity: 0; } }
.ticket { position: absolute; left: 50%; bottom: 12%; width: min(360px, 88vw); transform: translateX(-50%); background: #fff; color: #1f2937; border-radius: 22px; display: flex; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); animation: ticketUp .8s var(--spring) .45s both; z-index: 4; }
@keyframes ticketUp { from { transform: translate(-50%, 140%) rotate(6deg); } }
.ticket-main { flex: 1; min-width: 0; padding: 14px 14px; }
.ticket-main .t-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--a); }
.ticket-main .route { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ticket-main .route div { flex: 1; min-width: 0; }
.ticket-main .route small { display: block; font-size: 10px; color: #9ca3af; font-weight: 700; }
.ticket-main .route b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-main .route svg { color: var(--a); flex: none; }
.ticket-main .t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 12px; }
.ticket-main .t-grid small { display: block; font-size: 9.5px; color: #9ca3af; font-weight: 700; }
.ticket-stub { flex: none; width: 64px; border-right: 2px dashed #e5e7eb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(180deg, #f9fafb, #f3f4f6); position: relative; }
.barcode { width: 40px; height: 64px; background: repeating-linear-gradient(0deg, #1f2937 0 2px, transparent 2px 4px, #1f2937 4px 5px, transparent 5px 8px); opacity: .85; }
.ticket .stampx { position: absolute; left: 76px; bottom: 14px; border: 3px solid #16a34a; color: #16a34a; border-radius: 12px; padding: 2px 12px; font-weight: 800; font-size: 16px; transform: rotate(-16deg) scale(2.5); opacity: 0; animation: stamp .35s ease-in 1.5s forwards; background: rgba(255,255,255,.85); }
@keyframes stamp { to { transform: rotate(-16deg) scale(1); opacity: .95; } }
.journey .rush { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.journey .rush .cloud { --w: 260px; left: 50%; top: 50%; margin: -40px 0 0 -130px; opacity: 0; animation: rush .9s ease-in 2.6s forwards; }
.journey .rush .cloud:nth-child(2) { margin-left: -330px; margin-top: -120px; animation-delay: 2.65s; }
.journey .rush .cloud:nth-child(3) { margin-left: 40px; margin-top: 60px; animation-delay: 2.7s; }
.journey .rush .cloud:nth-child(4) { margin-left: -180px; margin-top: 140px; animation-delay: 2.75s; }
@keyframes rush { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; } 100% { opacity: 1; transform: scale(9); } }
.journey .whiteout { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 7; animation: whiteout .5s ease 3.15s forwards; }
@keyframes whiteout { to { opacity: 1; } }
.journey .skip { position: absolute; top: calc(14px + var(--sat)); left: 14px; z-index: 8; }
.journey .dest { position: absolute; top: calc(70px + var(--sat)); width: 100%; text-align: center; z-index: 3; animation: rise .7s var(--ease) .2s both; }
.journey .dest small { display: block; letter-spacing: .3em; font-family: var(--font-en); font-size: 11px; opacity: .85; }
.journey .dest h2 { display: inline-block; font-size: 22px; margin: 6px 20px 0; padding: 6px 16px; border-radius: 16px; background: rgba(20, 16, 60, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.journey .dest small { text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* ------------------------------ مشغّل الدرس ------------------------------ */
.player { position: fixed; inset: 0; z-index: 140; background: #000; display: flex; flex-direction: column; animation: fade .4s; }
.player-bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--sat)) 12px 10px; background: var(--p); color: #fff; }
.player-bar h3 { flex: 1; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-body { flex: 1; position: relative; background: #fff; }
.player-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-body video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.player-body.video { background: #000; }
.player-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--mu); }
.done-fab { position: absolute; bottom: calc(18px + var(--sab)); left: 50%; transform: translateX(-50%) translateY(140%); z-index: 3; transition: transform .5s var(--spring); }
.done-fab.show { transform: translateX(-50%); }

/* احتفال الإكمال */
.celebrate { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(255,214,120,.35), rgba(var(--p-rgb), .85) 70%); padding: 20px; animation: fade .3s; }
.celebrate-card { width: min(380px, 100%); background: var(--sf); border-radius: 32px; padding: 26px 22px; text-align: center; animation: rise .6s var(--spring); position: relative; }
.celebrate-card .big-stars { display: flex; justify-content: center; gap: 4px; margin: -70px 0 10px; }
.celebrate-card .big-stars span { font-size: 58px; color: #e5e7eb; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); }
.celebrate-card .big-stars span.on { color: #ffc51a; animation: starBig .6s var(--spring) both; }
.celebrate-card .big-stars span:nth-child(2) { font-size: 74px; transform: translateY(-14px); }
.celebrate-card .big-stars span.on:nth-child(1) { animation-delay: .25s; } .celebrate-card .big-stars span.on:nth-child(2) { animation-delay: .45s; } .celebrate-card .big-stars span.on:nth-child(3) { animation-delay: .65s; }
@keyframes starBig { from { transform: scale(0) rotate(-180deg); opacity: 0; } }
.celebrate-card h2 { font-size: 23px; margin-bottom: 6px; }
.celebrate-card p { color: var(--tx2); margin-bottom: 18px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 180; overflow: hidden; }
.celebrate .confetti, .result .confetti { position: absolute; z-index: 0; }
.celebrate-card, .result > :not(.confetti) { position: relative; z-index: 1; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall var(--t, 2.6s) linear var(--d, 0s) forwards; }
@keyframes fall { to { transform: translate(var(--x, 0), 110vh) rotate(var(--r, 720deg)); } }

/* ------------------------------ الاختبار ------------------------------ */
.voyage { position: fixed; inset: 0; z-index: 150; overflow: hidden; color: #fff; background: linear-gradient(180deg, #0a1433 0%, #13285a 45%, #1e4a7a 70%, #0e4a5c 100%); display: flex; flex-direction: column; }
.voyage .stars-bg { position: absolute; inset: 0 0 40% 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60% 20%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 80% 45%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 35% 55%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 10% 70%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 10%, #fff 50%, transparent 51%); animation: twinkle 3s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .55; } }
.voyage .moon { position: absolute; top: calc(16px + var(--sat)); left: 24px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #f5e2a8); box-shadow: 0 0 60px rgba(255,240,190,.6); }
.voyage .sea { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; }
.voyage .wave { position: absolute; left: -100%; width: 200%; height: 120px; animation: waveMove var(--s, 7s) linear infinite; }
.voyage .sea:first-of-type { background: linear-gradient(180deg, transparent 0, transparent 30%, #1d5582 52%, #123f66 100%); }
.voyage .sea + .boat + .sea { background: linear-gradient(180deg, transparent 0, transparent 52%, #123f66 53%); }
.voyage .wave path { fill: var(--c); }
@keyframes waveMove { to { transform: translateX(50%); } }
.voyage .boat { position: absolute; left: 50%; bottom: 236px; width: 150px; margin-left: -75px; animation: shipBob 3s ease-in-out infinite; z-index: 2; filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)); }
.voyage .v-head { position: relative; z-index: 3; padding: calc(16px + var(--sat)) 16px 0; display: flex; justify-content: space-between; }
.voyage .v-title { position: relative; z-index: 3; text-align: center; margin-top: 18px; animation: rise .8s var(--ease) both; }
.voyage .v-title small { letter-spacing: .3em; font-family: var(--font-en); font-size: 11px; color: var(--g); }
.voyage .v-title h2 { font-size: 26px; padding: 0 20px; }
.voyage .rules { position: relative; z-index: 4; margin: auto 16px calc(18px + var(--sab)); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 28px; padding: 18px; animation: rise .8s var(--spring) .3s both; }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; text-align: center; }
.rules-grid div { background: rgba(255,255,255,.1); border-radius: 18px; padding: 10px 4px; }
.rules-grid b { display: block; font-size: 20px; font-family: var(--font-en); }
.rules-grid small { font-size: 11px; opacity: .8; font-weight: 700; }
.compass-mini { width: 54px; height: 54px; animation: compassSpin 6s linear infinite; }

.exam { position: fixed; inset: 0; z-index: 145; background: var(--bg); display: flex; flex-direction: column; }
.exam-top { padding: calc(12px + var(--sat)) 14px 14px; background: var(--hero); color: #fff; border-radius: 0 0 28px 28px; }
.exam-top .row { gap: 8px; }
.timer-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; background: rgba(255,255,255,.18); font-family: var(--font-en); font-weight: 700; font-size: 16px; direction: ltr; }
.timer-pill.warn { background: #f59e0b; color: #3b2400; animation: pulseWarn 1s infinite; }
@keyframes pulseWarn { 50% { transform: scale(1.06); } }
.q-dots { display: flex; gap: 5px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.q-dots button { width: 30px; height: 30px; border-radius: 10px; border: 0; background: rgba(255,255,255,.16); color: #fff; font-family: var(--font-en); font-size: 12px; font-weight: 700; }
.q-dots button.answered { background: rgba(255,255,255,.4); }
.q-dots button.cur { background: #fff; color: var(--p); transform: scale(1.12); }
.exam-body { flex: 1; overflow-y: auto; padding: 18px 16px; }
.q-card { background: var(--sf); border-radius: 26px; padding: 20px 18px; box-shadow: 0 16px 34px -22px rgba(var(--p-rgb), .5); animation: qIn .45s var(--ease); }
@keyframes qIn { from { opacity: 0; transform: translateX(-30px); } }
.q-card.back { animation-name: qInBack; }
@keyframes qInBack { from { opacity: 0; transform: translateX(30px); } }
.q-card .q-meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: var(--a); margin-bottom: 10px; }
.q-card h3 { font-size: 19px; line-height: 1.6; margin-bottom: 16px; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 2px solid var(--bd); background: var(--sf); text-align: start; font-size: 16px; font-weight: 700; transition: .2s var(--ease); width: 100%; }
.opt .letter { width: 34px; height: 34px; border-radius: 12px; background: var(--sf2); display: grid; place-items: center; font-weight: 800; flex: none; transition: .2s; }
.opt.multi .letter { border-radius: 8px; }
.opt.sel { border-color: var(--a); background: rgba(var(--a-rgb), .08); box-shadow: 0 10px 20px -14px rgba(var(--a-rgb), .9); }
.opt.sel .letter { background: var(--a); color: #fff; }
.opt:active { transform: scale(.98); }
.opts.tf { flex-direction: row; }
.opts.tf .opt { flex-direction: column; justify-content: center; padding: 22px 10px; font-size: 18px; }
.opts.tf .opt .letter { width: 52px; height: 52px; font-size: 26px; border-radius: 18px; }
.exam-nav { display: flex; gap: 10px; padding: 12px 16px calc(14px + var(--sab)); background: var(--sf); box-shadow: 0 -10px 30px -20px rgba(0,0,0,.3); }
.exam-nav .btn { flex: 1; }

/* نتيجة الاختبار والصندوق */
.result { position: fixed; inset: 0; z-index: 160; overflow-y: auto; background: radial-gradient(circle at 50% 30%, #2b3f7a, #0a1433 75%); color: #fff; padding: calc(30px + var(--sat)) 18px calc(24px + var(--sab)); text-align: center; animation: fade .4s; }
.result.fail { background: radial-gradient(circle at 50% 30%, #3b4566, #151a2b 75%); }
.chest { position: relative; width: 170px; height: 150px; margin: 26px auto 8px; perspective: 600px; }
.chest .body { position: absolute; bottom: 0; left: 10px; right: 10px; height: 82px; border-radius: 10px 10px 16px 16px; background: linear-gradient(180deg, #a0622a, #6b3a12); box-shadow: inset 0 0 0 5px #4a250a, 0 18px 24px -10px rgba(0,0,0,.6); }
.chest .body::before { content: ''; position: absolute; left: 0; right: 0; top: 22px; height: 12px; background: linear-gradient(180deg, #f2c14e, #b57d17); }
.chest .lock { position: absolute; left: 50%; top: 14px; width: 28px; height: 34px; margin-left: -14px; border-radius: 6px; background: linear-gradient(180deg, #ffe08a, #c68a12); z-index: 2; box-shadow: 0 3px 0 #7a520c; }
.chest .lid { position: absolute; left: 10px; right: 10px; bottom: 74px; height: 56px; border-radius: 60px 60px 8px 8px; background: linear-gradient(180deg, #b8763a, #7c4517); box-shadow: inset 0 0 0 5px #4a250a; transform-origin: bottom center; transition: transform .8s var(--spring) .6s; z-index: 3; }
.chest .lid::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 12px; background: linear-gradient(180deg, #f2c14e, #b57d17); }
.chest .glow { position: absolute; left: 50%; bottom: 60px; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,90,.9), rgba(255,180,40,0) 65%); opacity: 0; transition: opacity .6s .9s; z-index: 1; }
.chest.open .lid { transform: rotateX(115deg); }
.chest.open .glow { opacity: 1; }
.coin { position: absolute; left: 50%; bottom: 70px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #e2a51b); box-shadow: inset 0 0 0 2px #b77d0c; z-index: 2; opacity: 0; animation: coin 1.4s var(--ease) var(--d) forwards; }
@keyframes coin { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 60% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--x) * 1.3), calc(var(--y) + 160px)) scale(.8) rotate(360deg); } }
.score-ring { width: 150px; height: 150px; margin: 6px auto 12px; position: relative; }
.score-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.score-ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.score-ring .val { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; }
.score-ring .val b { font-size: 38px; font-family: var(--font-en); line-height: 1; }
.score-ring .val small { opacity: .75; font-size: 12px; }
.result h2 { font-size: 24px; margin-bottom: 4px; }
.result p { opacity: .85; margin-bottom: 18px; }
.result .r-stars { font-size: 40px; letter-spacing: 4px; margin: 8px 0; }
.result .r-stars span { color: rgba(255,255,255,.2); }
.result .r-stars span.on { color: #ffc51a; animation: starBig .6s var(--spring) both; }
.result .r-stars span.on:nth-child(2) { animation-delay: .2s; } .result .r-stars span.on:nth-child(3) { animation-delay: .4s; }
.result .actions { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto; }
.storm { font-size: 80px; margin: 30px 0 6px; animation: shake 2s ease-in-out infinite; }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* مراجعة الإجابات */
.review-item { background: var(--sf); border-radius: 22px; padding: 16px; border-right: 6px solid var(--ok); }
.review-item.bad { border-right-color: var(--danger); }
.review-item h4 { font-size: 15px; margin-bottom: 10px; line-height: 1.6; }
.review-item .ro { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--sf2); margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.review-item .ro.right { background: rgba(22,163,74,.12); color: var(--ok); font-weight: 800; }
.review-item .ro.wrong { background: rgba(229,72,77,.12); color: var(--danger); }
.review-item .ro small { margin-inline-start: auto; font-size: 11px; }
.review-item .exp { font-size: 13px; color: var(--tx2); background: rgba(var(--a-rgb), .08); border-radius: 12px; padding: 8px 12px; margin-top: 8px; }

/* شاشات بسيطة (النتائج / الحساب) */
.page-hero { position: relative; background: var(--hero); color: #fff; padding: calc(18px + var(--sat)) 20px 82px; overflow: hidden; }
.page-hero h2 { font-size: 24px; position: relative; z-index: 2; }
.page-hero p { opacity: .85; position: relative; z-index: 2; margin-top: 2px; }
.page-head { padding: calc(18px + var(--sat)) 18px 18px; display: flex; align-items: center; gap: 12px; }
.page-head h2 { font-size: 22px; flex: 1; }
.page-body { padding: 0 18px; display: flex; flex-direction: column; gap: 12px; }
.page-body.lift { margin-top: -54px; position: relative; z-index: 3; }
.sum-row { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--sf); border-radius: 24px; padding: 14px 6px; box-shadow: 0 16px 30px -20px rgba(var(--p-rgb), .55); text-align: center; }
.sum-row div + div { border-right: 1px solid var(--bd); }
.sum-row b { display: block; font-size: 21px; }
.sum-row small { font-size: 12px; color: var(--mu); font-weight: 700; }
.result-row { display: flex; align-items: center; gap: 12px; background: var(--sf); border-radius: 22px; padding: 12px 14px; box-shadow: 0 10px 22px -18px rgba(var(--p-rgb), .5); width: 100%; border: 0; text-align: start; transition: transform .2s var(--spring); }
.result-row:active { transform: scale(.98); }
.result-row .ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-en); font-weight: 700; font-size: 13.5px; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--sf2) 0); position: relative; flex: none; }
.result-row .ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--sf); }
.result-row .ring span { position: relative; }
.result-row .grow { flex: 1; min-width: 0; }
.result-row strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-row small { color: var(--mu); font-size: 12px; }
.result-row .medal { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: rgba(229,72,77,.1); flex: none; }
.result-row .medal.ok { background: rgba(255,196,71,.22); }
.stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.island-stamp { aspect-ratio: 1; border-radius: 50%; border: 2.5px dashed var(--sc); color: var(--sc); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; transform: rotate(var(--rot)); opacity: .38; filter: grayscale(.6); background: var(--sf); }
.island-stamp.got { opacity: 1; filter: none; background: var(--sf); background: color-mix(in srgb, var(--sc) 9%, var(--sf)); box-shadow: 0 10px 18px -12px var(--sc); }
.island-stamp.full { border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 20%, transparent), 0 10px 18px -12px var(--sc); }
.island-stamp .is-ico svg { width: 22px; height: 22px; }
.island-stamp b { font-size: 11.5px; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.island-stamp small { font-size: 10.5px; font-weight: 700; opacity: .8; }
.menu { background: var(--sf); border-radius: 24px; overflow: hidden; box-shadow: 0 10px 22px -18px rgba(var(--p-rgb), .5); }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--bd); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: start; font-weight: 700; }
.menu-item:last-child { border-bottom: 0; }
.menu-item .mi-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--a-rgb), .1); color: var(--a); }
.menu-item .grow { flex: 1; }
.menu-item small { display: block; color: var(--mu); font-weight: 500; font-size: 12px; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .mi-ico { background: rgba(229,72,77,.1); color: var(--danger); }
.switch { appearance: none; width: 48px; height: 28px; border-radius: 99px; background: var(--bd); position: relative; transition: .25s; flex: none; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: .25s var(--spring); }
.switch:checked { background: var(--a); }
.switch:checked::after { right: 23px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (min-width: 560px) { body { background: #e8e9f0; } }

/* الشاشات الكاملة بعرض الهاتف على الأجهزة الكبيرة */
.journey, .voyage, .exam, .result, .celebrate { left: 0; right: 0; max-width: 520px; margin: 0 auto; }

/* الشاشات القصيرة */
@media (max-height: 700px) {
  .storm { font-size: 60px; margin: 6px 0 0; }
  .chest { margin-top: 6px; transform: scale(.85); }
  .score-ring { width: 124px; height: 124px; margin: 4px auto 6px; }
  .score-ring .val b { font-size: 30px; }
  .result { padding-top: calc(14px + var(--sat)); }
  .result p { margin-bottom: 10px; }
  .result .r-stars { font-size: 32px; margin: 2px 0 10px; }
  .auth-gap { min-height: 120px; }
  .auth-hello h1 { font-size: 23px; }
  .opt { padding: 11px 12px; }
  .q-card h3 { font-size: 17px; margin-bottom: 12px; }
}
@media (max-width: 350px) {
  .grid2 { grid-template-columns: 1fr; }
  .porthole { width: 96px; height: 96px; }
  .auth-hello h1 { font-size: 22px; }
  .countdown b { min-width: 40px; height: 42px; font-size: 18px; }
  .pass-msg { padding-left: 70px; font-size: 13px; }
  .stat b { font-size: 19px; }
  .stat small { font-size: 11px; }
}

/* =====================================================================
   الساحة المباشرة — شاشة اللاعب
   ===================================================================== */
.lv { position: relative; min-height: 100vh; min-height: 100dvh; color: #fff; overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(80% 60% at 100% 0%, rgba(20,184,166,.45), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(255,107,74,.4), transparent 60%), linear-gradient(165deg, #0B2333, #0E2A3B 50%, #12405A); }
.lv-bg { position: absolute; inset: 0; pointer-events: none; }
.lv-float { position: absolute; width: 54px; height: 54px; border-radius: 16px; background: var(--c); display: grid; place-items: center; opacity: .16; animation: lvFloat 9s ease-in-out infinite; }
.lv-float.f0 { top: 12%; right: 8%; } .lv-float.f1 { top: 30%; left: 6%; animation-delay: -2s; } .lv-float.f2 { bottom: 22%; right: 12%; animation-delay: -4s; } .lv-float.f3 { bottom: 8%; left: 14%; animation-delay: -6s; }
@keyframes lvFloat { 50% { transform: translateY(-22px) rotate(12deg); } }
.lv-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(12px + var(--sat)) 14px 8px; }
.lv-brand { font-weight: 800; display: flex; align-items: center; gap: 6px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); padding: 6px 12px; border-radius: 99px; font-size: 14px; max-width: 46%; white-space: nowrap; overflow: hidden; }
.lv-chip b { overflow: hidden; text-overflow: ellipsis; }
.lv-chip.score { background: var(--sun, #FFC447); color: #0E2A3B; border: 0; }
.lv-chip.score b { font-size: 16px; }
.lv-center { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; gap: 12px; animation: rise .5s var(--ease); }
.lv-center h1 { font-size: 26px; line-height: 1.35; }
.lv-center p { opacity: .82; }
.lv-logo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; transform: rotate(-8deg); margin-bottom: 6px; }
.lv-logo i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0,0,0,.25); animation: tileIn .6s var(--spring) both; }
.lv-logo i:nth-child(2) { animation-delay: .08s; } .lv-logo i:nth-child(3) { animation-delay: .16s; } .lv-logo i:nth-child(4) { animation-delay: .24s; }
@keyframes tileIn { from { transform: scale(0) rotate(-90deg); } }
.lv-card { width: min(380px, 100%); background: #fff; color: var(--tx); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 50px -20px rgba(0,0,0,.6); margin-top: 8px; }
.pin-input, .nick-input { width: 100%; height: 66px; border-radius: 18px; border: 3px solid #e2e8f0; text-align: center; font-family: var(--font-en); font-size: 32px; font-weight: 700; letter-spacing: 6px; outline: none; color: #0E2A3B; background: #f8fafc; }
.nick-input { font-family: var(--font); font-size: 20px; letter-spacing: 0; height: 58px; }
.pin-input:focus, .nick-input:focus { border-color: #FF6B4A; background: #fff; }
.pin-input::placeholder { font-family: var(--font); font-size: 18px; letter-spacing: 0; color: #94a3b8; }
.nick-row { display: flex; gap: 8px; }
.dice { width: 58px; flex: none; border-radius: 18px; border: 0; background: #f1f5f9; font-size: 26px; }
.lv-err { background: #fee2e2; color: #b91c1c; border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 700; }
.lv-note { font-size: 13px; opacity: .8; }
.lv-note a { color: var(--sun, #FFC447); font-weight: 800; }
.lv-me { background: #f1f5f9; border-radius: 16px; padding: 14px; font-size: 15px; display: flex; gap: 6px; align-items: center; justify-content: center; }
.lv-big { font-size: 74px; animation: lvFloat 4s ease-in-out infinite; }
.lv-boat { font-size: 84px; animation: shipBob 2.4s ease-in-out infinite; }
.lv-name { font-size: 24px; font-weight: 800; background: #fff; color: #0E2A3B; padding: 10px 26px; border-radius: 99px; box-shadow: 0 8px 0 #FF6B4A; animation: pop .5s var(--spring); }
@keyframes pop { from { transform: scale(0); } }
.lv-pill { display: inline-block; background: rgba(255,255,255,.14); border-radius: 99px; padding: 6px 16px; font-weight: 800; font-size: 14px; }
.lv-stage { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lv-count { font-family: var(--font-en); font-size: 120px; font-weight: 700; line-height: 1; text-shadow: 0 10px 30px rgba(0,0,0,.35); }
.lv-count.pop { animation: countPop .6s var(--spring); }
@keyframes countPop { from { transform: scale(1.8); opacity: 0; } }
.ready-q { font-size: 22px; max-width: 420px; line-height: 1.5; }
.lv-answer { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 4px 14px calc(16px + var(--sab)); min-height: 0; }
.lv-timer { position: relative; margin-top: 26px; height: 14px; border-radius: 9px; background: rgba(255,255,255,.14); }
.lv-timer i { position: absolute; inset: 0 0 0 auto; border-radius: 9px; background: linear-gradient(90deg, #14B8A6, #4ade80); width: 100%; transition: background .3s; }
.lv-timer i.hurry { background: linear-gradient(90deg, #FF6B4A, #f59e0b); }
.lv-timer b { position: absolute; top: -26px; left: 0; font-size: 18px; }
.lv-q { background: #fff; color: var(--tx); border-radius: 22px; padding: 14px 16px; text-align: center; box-shadow: 0 14px 26px -14px rgba(0,0,0,.6); }
.lv-q img { max-height: 150px; margin: 0 auto 10px; border-radius: 14px; object-fit: contain; }
.lv-q h2 { font-size: 19px; line-height: 1.5; }
.lv-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; min-height: 260px; }
.lv-tiles.two { grid-template-columns: 1fr; }
.lv-tile { border: 0; border-radius: 22px; background: var(--c); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 17px; font-weight: 800; box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 66%, #000); transition: transform .12s, opacity .25s; text-align: center; line-height: 1.4; }
.lv-tile:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 66%, #000); }
.lv-tile .tg { display: grid; place-items: center; }
.lv-tile.chosen { transform: scale(1.04); box-shadow: 0 0 0 5px #fff, 0 7px 0 color-mix(in srgb, var(--c) 66%, #000); }
.lv-tile.faded { opacity: .3; }
.lv-type { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.lv-type input { height: 64px; border-radius: 20px; border: 0; padding: 0 18px; font-size: 22px; font-weight: 700; text-align: center; color: #0E2A3B; outline: none; box-shadow: 0 8px 0 rgba(0,0,0,.2); }
.lv-hint { text-align: center; opacity: .85; font-weight: 700; }
.lv-order { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ord-btn { position: relative; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 18px; background: var(--c); color: #fff; padding: 12px 14px; font-size: 17px; font-weight: 800; text-align: start; box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 66%, #000); transition: transform .15s, opacity .2s; }
.ord-btn b { flex: 1; }
.ord-btn .og { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: none; }
.ord-btn .on { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #0E2A3B; display: grid; place-items: center; font-family: var(--font-en); font-weight: 700; font-size: 18px; flex: none; animation: pop .3s var(--spring); }
.ord-btn.picked { opacity: .75; transform: scale(.97); }
.lv-spin { width: 70px; height: 70px; border-radius: 50%; border: 6px solid rgba(255,255,255,.2); border-top-color: #FFC447; animation: spin 1s linear infinite; }
.lv-result { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 20px 20px calc(24px + var(--sab)); animation: rise .5s var(--spring); position: relative; z-index: 2; margin: 0 -0px; }
.lv-result.good { background: radial-gradient(circle at 50% 30%, rgba(74,222,128,.55), transparent 70%); }
.lv-result.bad { background: radial-gradient(circle at 50% 30%, rgba(239,68,68,.5), transparent 70%); }
.lv-result.neutral { background: radial-gradient(circle at 50% 30%, rgba(124,92,255,.5), transparent 70%); }
.lv-res-ico { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 60px; font-weight: 800; background: #fff; box-shadow: 0 12px 0 rgba(0,0,0,.2); animation: resPop .7s var(--spring); }
.good .lv-res-ico { color: #16a34a; } .bad .lv-res-ico { color: #dc2626; }
@keyframes resPop { from { transform: scale(0) rotate(-120deg); } }
.lv-result h1 { font-size: 30px; }
.lv-points { font-size: 44px; font-weight: 700; color: #FFC447; text-shadow: 0 4px 0 rgba(0,0,0,.25); animation: countPop .6s var(--spring) .2s both; }
.lv-streak { background: rgba(255,255,255,.16); padding: 6px 16px; border-radius: 99px; font-weight: 800; }
.lv-correct { background: rgba(0,0,0,.22); padding: 10px 16px; border-radius: 16px; font-size: 15px; max-width: 420px; }
.lv-rank { display: flex; flex-direction: column; align-items: center; background: #fff; color: #0E2A3B; border-radius: 22px; padding: 10px 28px; margin-top: 8px; box-shadow: 0 10px 0 rgba(0,0,0,.18); }
.lv-rank span { font-size: 13px; font-weight: 700; color: #64748b; }
.lv-rank > b { font-size: 40px; line-height: 1.1; }
.lv-rank small b { font-size: inherit; color: #0E2A3B; }
.lv-rank small { font-size: 13px; color: #475569; }
.lv-wait { opacity: .75; font-weight: 700; margin-top: 8px; animation: pulseOp 2s ease-in-out infinite; }
@keyframes pulseOp { 50% { opacity: .35; } }
.final .lv-medal { font-size: 96px; animation: resPop .8s var(--spring); }
.lv-final-card { display: grid; grid-template-columns: repeat(3, 1fr); width: min(400px, 100%); background: #fff; color: #0E2A3B; border-radius: 24px; padding: 14px 6px; }
.lv-final-card div { display: flex; flex-direction: column; align-items: center; }
.lv-final-card div + div { border-right: 1px solid #e2e8f0; }
.lv-final-card small { font-size: 12px; color: #64748b; font-weight: 700; }
.lv-final-card b { font-size: 26px; }
.lv-top3 { display: flex; flex-direction: column; gap: 6px; width: min(400px, 100%); }
.lv-top3 div { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border-radius: 14px; padding: 8px 14px; }
.lv-top3 b { flex: 1; text-align: start; }
.lv .btn.light { background: #fff; color: #0E2A3B; }
/* بطاقة الدخول للتحدي في الرئيسية */
.live-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 24px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(70% 120% at 0% 100%, rgba(255,107,74,.65), transparent 60%), linear-gradient(135deg, #0E2A3B, #12405A 60%, #0F5A63); box-shadow: 0 18px 30px -18px rgba(14,42,59,.9); }
.live-card .lc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; transform: rotate(-10deg); flex: none; }
.live-card .lc-tiles i { width: 22px; height: 22px; border-radius: 7px; }
.live-card .lc-txt { flex: 1; min-width: 0; }
.live-card small { opacity: .8; font-size: 12px; display: block; }
.live-card strong { font-size: 16px; }
.live-card .go { width: 42px; height: 42px; border-radius: 50%; background: #FFC447; color: #0E2A3B; display: grid; place-items: center; flex: none; }
.auth-live { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--sf2); font-weight: 800; font-size: 14px; color: var(--p); }
.lv-chip.score b, .lv-chip.score { color: #0E2A3B !important; } .lv-chip.score b { display: inline; }

/* تلميح التثبيت على آيفون */
.ios-tip { position: fixed; z-index: 350; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--sab)); width: min(480px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 8px; border-radius: 20px; background: #0B1E4A; color: #fff; border: 1px solid rgba(233,207,142,.45); box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); animation: toastIn .5s var(--spring); }
.ios-tip img { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.ios-tip div { flex: 1; display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; }
.ios-tip b { font-size: 14.5px; color: #E9CF8E; }
.ios-tip svg { vertical-align: -5px; color: #E9CF8E; }
.ios-tip button { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.ios-tip::after { content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #0B1E4A; }
.tabbar:not([hidden]) ~ .ios-tip { bottom: calc(96px + var(--sab)); }

/* زر واتساب للتجديد */
.btn.wa { background: #25D366; color: #fff; box-shadow: 0 12px 24px -12px rgba(37,211,102,.9); height: 50px; font-size: 15.5px; }
.btn.wa .wa-ico { width: 22px; height: 22px; stroke: none; }
.pass-wa { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.pass-wa.soon small { display: flex; align-items: center; gap: 6px; color: #B4532A; font-weight: 800; font-size: 12.5px; }

/* الإشعارات */
.bell-btn { position: relative; }
.bell-dot { position: absolute; top: -4px; left: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--p); font-style: normal; }
.n-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--sat)) 14px 10px; background: var(--bg); border-bottom: 1px solid var(--bd); }
.n-bar h2 { font-size: 18px; }
.n-wrap { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.n-list { display: flex; flex-direction: column; gap: 10px; }
.n-card { display: flex; gap: 12px; padding: 14px; border-radius: 20px; background: var(--sf); box-shadow: 0 10px 22px -18px rgba(var(--p-rgb), .6); border: 1.5px solid transparent; animation: screenIn .35s var(--ease) both; }
.n-card.new { border-color: rgba(var(--a-rgb), .55); background: var(--sf); }
.n-card.new .n-h strong::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; margin-inline-end: 6px; vertical-align: middle; }
.n-i { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--a-rgb), .16); color: #8E6A26; }
.n-i.auto { background: rgba(var(--a2-rgb), .14); color: var(--a2); }
.n-c { flex: 1; min-width: 0; }
.n-h { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.n-h strong { font-size: 15px; }
.n-h small { flex: none; font-size: 11.5px; color: var(--mu); }
.n-c p { font-size: 14px; color: var(--tx2); margin-top: 4px; white-space: pre-line; }
.n-go { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--sf2); color: var(--a2); font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 10px; }
.push-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--sf); border: 1.5px dashed var(--bd); margin-bottom: 4px; }
.push-card > svg.i { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 13px; background: rgba(var(--a-rgb), .16); color: #8E6A26; }
.push-card div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.push-card b { font-size: 14.5px; }
.push-card span { font-size: 12.5px; color: var(--mu); line-height: 1.5; }
.push-card.cta { border: 1.5px solid rgba(var(--a-rgb), .6); background: linear-gradient(135deg, var(--sf), rgba(var(--a-rgb), .08)); }
.push-card.on { border-style: solid; border-color: rgba(46,138,106,.4); }
.push-card.on > svg.i { background: rgba(46,138,106,.14); color: #2E8A6A; }
.push-card.muted > svg.i { background: var(--sf2); color: var(--mu); }
.push-x { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--sf2); color: var(--mu); display: grid; place-items: center; }
.push-x svg.i { width: 14px; height: 14px; }
.home-body #pushHome:empty, .t-body #pushHome:empty { display: none; }