:root{
  --night: #1B1035;
  --night-2: #241645;
  --cream: #FFF8EF;
  --cream-2: #FFF1DD;
  --ink: #241645;
  --ink-soft: #5B4E7A;
  /* اسم المتغيّر «ذهبي» لكن القيمة نيلية بعد إعادة العلامة — مقصود، ولا يطابق
     الذهبي #fbbf24 المكتوب صريحاً في navbar.php. لا تُوحّدهما إلا بقرار تصميم. */
  --gold: #818cf8;
  --gold-dark: #6366f1;
  --gold-glow: rgba(99,102,241,0.15);
  --coral: #FF7A50;
  --coral-soft: #FFC1AC;
  --mint: #2EC4B6;
  --pink: #FF6FA5;
  --violet: #6C63FF;
  --violet-soft: #B7B2FF;
  --theme-accent: var(--violet);
  --theme-glow: var(--violet-soft);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 12px 30px rgba(36,22,69,.14);
  --shadow-pop: 0 18px 40px rgba(108,99,255,.28);
  --font-display: 'Baloo Bhaijaan 2', 'Cairo', sans-serif;
  --font-body: 'Cairo', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; direction:rtl; text-align:right; font-family:var(--font-body); background:var(--night); color:var(--ink); -webkit-font-smoothing:antialiased; min-height:100vh; }
h1,h2,h3,h4,.display{ font-family:var(--font-display); }
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
a{color:inherit;text-decoration:none;}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:8px;}

/* ===================== خلفية متحركة عامة (تعمل بنفس الروح بكل صفحات المنصة) ===================== */
#animated-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bg-gradient{ position:absolute; inset:0; background:linear-gradient(-45deg,#1B1035,#241645,#3A2A75,#1B1035); background-size:400% 400%; animation:gradientMove 12s ease infinite; transition:background 1.2s ease; }
.bg-glow{ position:absolute; inset:-10%; opacity:.55; filter:blur(60px); background:radial-gradient(circle at 20% 25%, var(--theme-accent), transparent 45%), radial-gradient(circle at 80% 70%, var(--theme-glow), transparent 45%); transition:background 1.2s ease; animation:glowPulse 6s ease-in-out infinite; }
/* كان .45→.7 — كان التوهّج يرفع سطوع الخلفية تحت نص الهيرو مباشرة فيبتلعه.
   رفعه فوق ~.28 يُنزل تباين النص الصغير تحت 4.5:1 (مقيس). */
@keyframes glowPulse{ 0%,100%{ opacity:.16; } 50%{ opacity:.28; } }
/* طبقة تعتيم فوق كل طبقات الخلفية المتحركة. بدونها يرتفع سطوع الخلفية أثناء
   حركة التدرّج فيختفي النص الفاتح ثم يظهر — وهي الضمانة الأخيرة لتباين مقروء
   مهما كان لون الشخصية النشطة (بما فيها شخصيات يضيفها الأدمن بألوان فاتحة). */
#animated-bg::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:rgba(10,6,26,.42); }
@keyframes gradientMove{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.floating-icons-container{ position:absolute; inset:0; overflow:hidden; z-index:1; }
.floating-icon{ position:absolute; bottom:-60px; animation:floatUp linear infinite; pointer-events:none; text-shadow:0 0 20px rgba(255,255,255,.25); user-select:none; will-change:transform; }
@keyframes floatUp{ 0%{ transform:translateY(0) translateX(0) rotate(0) scale(.6); opacity:0; } 10%{opacity:.85;} 90%{opacity:.85;} 100%{ transform:translateY(-115vh) translateX(var(--drift,0px)) rotate(720deg) scale(1.25); opacity:0; } }
@keyframes floatBounce{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 10%{opacity:.85;} 50%{ transform:translateY(-55vh) scale(1.1) translateX(18px); } 90%{opacity:.85;} 100%{ transform:translateY(-115vh) scale(1.25) translateX(-18px); opacity:0; } }
@keyframes floatDash{ 0%{ transform:translateX(-30vw) translateY(0) rotate(-8deg) scale(.7); opacity:0; } 10%{opacity:.9;} 90%{opacity:.9;} 100%{ transform:translateX(30vw) translateY(-90vh) rotate(8deg) scale(1.2); opacity:0; } }
@keyframes floatDrift{ 0%{ transform:translateY(0) translateX(0) scale(.6) rotate(0); opacity:0; } 10%{opacity:.75;} 50%{ transform:translateY(-55vh) translateX(-30px) scale(1) rotate(10deg); } 90%{opacity:.75;} 100%{ transform:translateY(-115vh) translateX(30px) scale(1.15) rotate(-10deg); opacity:0; } }
@keyframes floatHop{ 0%,100%{opacity:0;} 5%{opacity:.85;} 20%{ transform:translateY(-20vh) scale(1); } 25%{ transform:translateY(-22vh) scale(1.15); } 40%{ transform:translateY(-45vh) scale(1); } 45%{ transform:translateY(-48vh) scale(1.15); } 60%{ transform:translateY(-70vh) scale(1); } 65%{ transform:translateY(-73vh) scale(1.15); } 90%{opacity:.85;} 100%{ transform:translateY(-115vh) scale(1.2); opacity:0; } }
@keyframes floatStomp{ 0%{ transform:translateY(0) scale(.7); opacity:0; } 10%{opacity:.9;} 30%{transform:translateY(-30vh) scale(1.3);} 32%{transform:translateY(-30vh) scale(1);} 60%{transform:translateY(-65vh) scale(1.3);} 62%{transform:translateY(-65vh) scale(1);} 90%{opacity:.9;} 100%{ transform:translateY(-115vh) scale(1.2); opacity:0; } }
/* زخرفة عالم الشخصية (theme.motif) — تحت طبقة ::after فلا تمسّ التباين */
.theme-motif-layer{ position:absolute; inset:0; overflow:hidden; z-index:2; pointer-events:none; }
.theme-motif-layer span{ position:absolute; bottom:-60px; user-select:none; will-change:transform; line-height:1; }
@keyframes motifRise{ 0%{ transform:translateY(0) translateX(0) scale(.7); } 50%{ transform:translateY(-58vh) translateX(var(--drift,0px)) scale(1); } 100%{ transform:translateY(-118vh) translateX(calc(var(--drift,0px) * -1)) scale(1.2); } }
@keyframes motifFall{ 0%{ transform:translateY(-118vh) translateX(0) rotate(0); } 100%{ transform:translateY(0) translateX(var(--drift,0px)) rotate(540deg); } }
@keyframes motifTwinkle{ 0%,100%{ transform:scale(.6) rotate(0); opacity:.15; } 50%{ transform:scale(1.15) rotate(20deg); opacity:.7; } }
@keyframes motifFly{ 0%{ transform:translate(-20vw,-30vh) scaleX(1); } 49%{ transform:translate(110vw,-70vh) scaleX(1); } 50%{ transform:translate(110vw,-40vh) scaleX(-1); } 100%{ transform:translate(-20vw,-90vh) scaleX(-1); } }
.theme-motif-layer span[style*="motifTwinkle"]{ bottom:auto; }
.wave{ position:absolute; bottom:0; left:0; width:100%; height:100px; background:repeating-linear-gradient(90deg, rgba(250,204,21,.05), rgba(52,211,153,.05), rgba(6,182,212,.05), rgba(250,204,21,.05)); background-size:200% 100%; animation:waveMove 20s linear infinite; z-index:0; }
.wave1{ bottom:0; height:130px; animation-duration:22s; opacity:.5; }
.wave2{ bottom:20px; height:90px; animation-duration:16s; opacity:.35; animation-delay:-5s; }
.wave3{ bottom:40px; height:70px; animation-duration:28s; opacity:.25; animation-delay:-10s; }
@keyframes waveMove{ 0%{background-position:0% 0%;} 100%{background-position:200% 0%;} }
.app-wrapper{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

.btn{ display:inline-flex;align-items:center;gap:8px;justify-content:center; padding:14px 26px;border-radius:999px;font-weight:800;font-size:16px; transition:transform .18s ease, box-shadow .18s ease; white-space:nowrap; }
.btn:active{ transform:scale(.96); }
.btn-primary{ background:linear-gradient(135deg,var(--coral),var(--pink)); color:#fff; box-shadow:0 10px 24px rgba(255,122,80,.35); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-gold{ background:linear-gradient(135deg,var(--gold),#FFAE3C); color:var(--ink); box-shadow:0 10px 24px rgba(255,201,60,.4);}
.btn-ghost{ background:#fff; color:var(--ink); border:2px solid #EDE4FF; }
.btn-mint{ background:linear-gradient(135deg,var(--mint),#1FA79A); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:14px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
/* زر «اسمع» — يقرأ data-say بصوت الرفيق (app.js). يُستخدم في التحليل والمهام كما في قسم الحماية */
.btn-listen{ background:#E3FBF8; color:#137F74; border:2px solid #BFF0EA; padding:8px 14px; font-size:14px; }
.btn-listen:hover{ background:#D2F6F1; }
.btn-listen.is-speaking{ animation:listenPulse .6s ease-in-out 2; }
@keyframes listenPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.pill{ display:inline-block; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700; background:var(--cream-2); color:var(--coral); }
.card{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.5); border-radius:var(--radius-md); box-shadow:0 18px 40px rgba(15,10,40,.35); }

/* ===================== NAV ===================== */
.app-nav{ position:sticky; top:0; z-index:60; background:linear-gradient(180deg,var(--night) 0%, var(--night-2) 100%); color:#fff; box-shadow:0 6px 24px rgba(27,16,53,.25); transition:background 1s ease; }
.app-nav .container{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:14px;}
.nav-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:22px; font-weight:800; color:#fff; }
.nav-brand .dot{ width:12px;height:12px;border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-links a{ color:#D9D0FF; font-weight:700; font-size:15px; padding:10px 14px; border-radius:12px; transition:.2s; display:block; }
.nav-links a:hover, .nav-links a.active{ color:#fff; background:rgba(255,255,255,.08); }
.nav-right{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; color:#fff; font-size:26px; }
.music-toggle{ width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; font-size:18px; color:#fff; transition:.2s;}
.music-toggle.on{ background:var(--mint); box-shadow:0 0 14px var(--mint); }
.story-ring-btn{ position:relative; width:46px; height:46px; display:flex;align-items:center;justify-content:center; }
.story-ring-btn svg{ width:46px; height:46px; transform:rotate(-90deg); }
.story-ring-btn .ring-bg{ fill:none; stroke:rgba(255,255,255,.15); stroke-width:4; }
.story-ring-btn .ring-fg{ fill:none; stroke:var(--gold); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 0 5px var(--gold)); transition:stroke-dashoffset .6s ease; }
.story-ring-btn .ring-label{ position:absolute; font-size:11px; font-weight:800; color:#fff; }
@media(max-width:900px){
  .nav-links{ position:fixed; inset:74px 0 0 0; background:var(--night); flex-direction:column; align-items:stretch; padding:16px; gap:6px; transform:translateX(110%); transition:transform .3s ease; overflow-y:auto; z-index:80;}
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ text-align:right; width:100%; padding:16px; font-size:17px; }
  .nav-toggle{ display:block; }
}

/* ===================== SECTIONS ===================== */
.section{ padding:40px 0; }
.section-head{ margin-bottom:26px; }
.eyebrow{ color:var(--gold); font-weight:800; font-size:13px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.section-title{ font-size:clamp(22px,4vw,32px); margin:6px 0 8px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.3); }
.section-sub{ color:#D9D0FF; font-size:16px; max-width:640px; line-height:1.8; }
.page-body{ flex:1; padding:30px 0 60px; }

/* ===================== AUTH ===================== */
.auth-wrap{ min-height:calc(100vh - 0px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card{ width:100%; max-width:480px; background:rgba(15,15,35,.55); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); padding:34px; box-shadow:0 30px 70px rgba(0,0,0,.4); color:#fff; }
.auth-logo{ display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-display); font-size:30px; font-weight:800; margin-bottom:6px;}
.auth-sub{ text-align:center; color:#B7ACDD; margin-bottom:22px; }
.auth-tabs{ display:flex; gap:10px; margin-bottom:22px; border-bottom:1px solid rgba(255,255,255,.08); }
.auth-tab{ flex:1; padding:12px; color:#94a3b8; font-weight:800; font-size:16px; border-bottom:3px solid transparent; }
.auth-tab.active{ color:var(--gold); border-bottom-color:var(--gold); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:700; font-size:14px; margin-bottom:6px; }
.field input, .field select{ width:100%; padding:13px 14px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.25); color:#fff; font-family:inherit; font-size:15px; }
.field input:focus, .field select:focus{ border-color:var(--gold); }
.auth-error{ background:rgba(239,68,68,.15); border:1px solid #ef4444; color:#fca5a5; padding:10px 14px; border-radius:10px; font-size:14px; margin-bottom:14px; }
.auth-toggle{ text-align:center; margin-top:14px; font-size:14px; color:#B7ACDD; }
.auth-toggle a{ color:var(--gold); font-weight:800; }

/* ===================== CHARACTER SELECT (Landing) ===================== */
.characters-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; margin:24px 0 50px; }
.character-card{ background:rgba(255,255,255,.04); backdrop-filter:blur(8px); border:3px solid rgba(255,255,255,.06); border-radius:24px; padding:16px 16px 20px; text-align:center; transition:.35s cubic-bezier(.34,1.56,.64,1); cursor:pointer; position:relative; overflow:hidden; }
.character-card:hover{ transform:translateY(-8px) scale(1.02); border-color:var(--card-color,var(--gold)); }
.character-card.selected{ border-color:var(--gold); box-shadow:0 0 40px rgba(250,204,21,.35); }
.character-media{ position:relative; width:100%; aspect-ratio:1/1; border-radius:18px; overflow:hidden; background:rgba(0,0,0,.2); margin-bottom:12px; }
.character-media img{ width:100%; height:100%; object-fit:cover; }
.character-media .fallback-emoji{ font-size:70px; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.character-info-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.78); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; opacity:0; transition:opacity .35s ease; text-align:center; }
.character-media:hover .character-info-overlay{ opacity:1; }
.character-info-overlay h3{ color:#fff; margin:0 0 4px; font-size:22px; }
.character-info-overlay p{ color:#cbd5e1; margin:0 0 6px; font-size:14px; }
.character-info-overlay .quote{ color:var(--gold); font-style:italic; font-size:14px; }
.character-select-btn{ width:100%; padding:10px; border-radius:999px; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.12); color:#e2e8f0; font-weight:800; }
.character-card .name{ color:#fff; font-weight:800; font-family:var(--font-display); font-size:17px; margin-top:4px; }
.two-char-note{ text-align:center; color:var(--gold); font-weight:700; margin:10px 0 20px; }
.mini-char-badge{ position:absolute; top:10px; left:10px; background:var(--gold); color:var(--ink); font-weight:800; font-size:12px; padding:4px 9px; border-radius:999px; z-index:2; }

/* ===================== WELCOME ===================== */
.welcome-banner{ background:linear-gradient(135deg,var(--theme-accent),var(--theme-glow) 60%,var(--pink)); border-radius:var(--radius-lg); color:#fff; padding:30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; transition:background 1.2s ease; }
.welcome-points{ background:rgba(255,255,255,.15); padding:12px 20px; border-radius:var(--radius-md); text-align:center; }
.welcome-points b{ font-family:var(--font-display); font-size:26px; display:block; }

/* ===================== TASKS ===================== */
.task-stage{ max-width:640px; margin:0 auto; }
.task-progress-dots{ display:flex; gap:8px; justify-content:center; margin-bottom:22px; }
.task-progress-dots span{ width:12px; height:12px; border-radius:50%; background:#EEE3FF; transition:.3s; }
.task-progress-dots span.done{ background:var(--mint); }
.task-progress-dots span.current{ background:var(--coral); transform:scale(1.3); }
.task-card{ padding:34px; border-radius:var(--radius-lg); text-align:center; }
.task-card h3{ font-size:26px; margin:10px 0; color:var(--ink); }
.task-card p{ color:var(--ink-soft); line-height:1.8; font-size:16px; }
.task-points-fly{ position:fixed; font-family:var(--font-display); font-weight:800; color:var(--gold); font-size:28px; pointer-events:none; z-index:200; animation:flyUp 1.1s ease forwards; }
@keyframes flyUp{ 0%{opacity:0; transform:translateY(0) scale(.6);} 15%{opacity:1; transform:translateY(-10px) scale(1.1);} 100%{opacity:0; transform:translateY(-90px) scale(1);} }
.story-line-toast{ background:linear-gradient(135deg,var(--violet),#8B7CFF); color:#fff; padding:22px 26px; border-radius:var(--radius-md); text-align:center; font-family:var(--font-display); font-size:18px; box-shadow:var(--shadow-pop); }
.mini-game-wrap{ text-align:center; padding:20px; }
.mini-game-area{ position:relative; height:268px; background:linear-gradient(180deg,#EAF7FF,#fff); border-radius:var(--radius-md); overflow:hidden; margin:16px 0; border:2px dashed var(--violet-soft); }
.mini-game-item{ position:absolute; font-size:34px; cursor:pointer; user-select:none; animation:fall linear forwards; }
@keyframes fall{ from{ top:-10%; } to{ top:100%; } }

/* ---------- GamesEngine (assets/js/games-engine.js) ---------- */
.ge-wrap{ position:relative; overflow:hidden; padding:20px; }
.ge-sub{ color:var(--ink-soft); line-height:1.8; font-size:1.15rem; }
body.kidora-game-open .ge-wrap{ margin-bottom:110px; }
.ge-target{ display:inline-block; font-size:1.5em; vertical-align:middle; animation:geBounce 1.2s ease-in-out infinite; }
@keyframes geBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
.ge-catch-area{ height:300px; }
.ge-target-badge{ position:absolute; top:8px; left:8px; z-index:2; background:#fff; border:2px solid var(--violet-soft); border-radius:999px; padding:4px 12px; font-weight:800; font-size:14px; box-shadow:0 6px 14px rgba(15,10,40,.12); }
.ge-target-badge span{ font-size:22px; vertical-align:middle; }
.ge-fall{ transition:transform .3s, opacity .3s; }
.ge-pop{ animation:gePop .35s ease-out forwards !important; }
@keyframes gePop{ 0%{ transform:scale(1);} 60%{ transform:scale(1.6); opacity:1;} 100%{ transform:scale(0); opacity:0;} }
.ge-sparkle{ animation:geSparkle .5s ease-out forwards !important; filter:saturate(.3); }
@keyframes geSparkle{ 0%{ transform:rotate(0) scale(1); opacity:1;} 100%{ transform:rotate(40deg) scale(.2); opacity:0;} }
.ge-progress{ display:flex; justify-content:center; gap:8px; margin:10px 0 4px; }
.ge-progress i{ width:14px; height:14px; border-radius:50%; background:#EDE4FF; border:2px solid #fff; box-shadow:0 0 0 1px #DCCFFF; transition:transform .25s, background .25s; }
.ge-progress i.on{ background:linear-gradient(135deg,var(--gold),#FFAE3C); transform:scale(1.25); }
.ge-msg{ min-height:28px; font-weight:800; color:var(--ink-soft); margin-top:6px; line-height:1.7; }
.ge-meta{ color:var(--ink-soft); font-weight:700; }
.ge-question{ margin:14px 0; line-height:1.9; font-size:1.15rem; }
.ge-choices{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ge-choices .btn, .ge-wrap .btn{ min-height:44px; }
.ge-choices-col{ flex-direction:column; align-items:center; }
.ge-choices-col .btn{ max-width:360px; width:100%; }
.ge-feedback{ padding:18px; border-radius:var(--radius-md); background:#F6F1FF; animation:geIn .3s ease-out; }
.ge-feedback.good{ background:linear-gradient(135deg,#FFF6D6,#FFE9A8); }
.ge-feedback.soft{ background:linear-gradient(135deg,#E9F4FF,#E4E0FF); }
.ge-feedback-icon{ font-size:44px; }
.ge-feedback p{ margin:8px 0 0; font-weight:800; line-height:1.9; }
@keyframes geIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.ge-end{ padding:14px; animation:geIn .35s ease-out; }
.ge-end-icon{ font-size:54px; animation:geBounce 1s ease-in-out infinite; }
.ge-end p{ font-weight:800; line-height:1.9; }
.ge-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
.ge-confetti i{ position:absolute; top:-12px; width:10px; height:14px; border-radius:2px; animation:geConfetti 1.8s ease-in forwards; }
@keyframes geConfetti{ 0%{ transform:translateY(0) rotate(0); opacity:1;} 100%{ transform:translateY(420px) rotate(540deg); opacity:0;} }

/* مطابقة الأزواج — بطاقات تنقلب */
.ge-match-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:380px; margin:14px auto; perspective:800px; }
.ge-card{ height:74px; min-height:44px; border:0; background:transparent; padding:0; cursor:pointer; font-family:inherit; }
@media (max-width:400px){
  .ge-match-grid{ grid-template-columns:repeat(2,1fr); max-width:100%; }
  .ge-card{ height:88px; }
}
.ge-card-inner{ position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.4,1.4,.6,1); }
.ge-card.open .ge-card-inner, .ge-card.done .ge-card-inner{ transform:rotateY(180deg); }
.ge-card-back, .ge-card-face{ position:absolute; inset:0; display:grid; place-items:center; border-radius:14px; font-size:28px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ge-card-back{ background:linear-gradient(135deg,var(--ge-color,#6C63FF),#FF6FA5); color:#fff; box-shadow:0 8px 18px rgba(15,10,40,.18); }
.ge-card-face{ background:#fff; border:2px solid var(--ge-color,#6C63FF); transform:rotateY(180deg); }
.ge-card.done .ge-card-face{ background:linear-gradient(135deg,#FFF6D6,#FFE9A8); border-color:var(--gold); animation:geMatched .5s ease-out; }
@keyframes geMatched{ 0%{ transform:rotateY(180deg) scale(1);} 50%{ transform:rotateY(180deg) scale(1.12);} 100%{ transform:rotateY(180deg) scale(1);} }

/* طريق البطل */
.ge-path{ position:relative; padding:56px 12px 10px; margin:10px 0 4px; }
.ge-stations{ display:flex; align-items:center; justify-content:center; }
.ge-station{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#EDE4FF; color:var(--ink); font-weight:900; font-size:14px; border:2px solid #fff; box-shadow:0 0 0 2px #DCCFFF; transition:background .3s; flex:0 0 auto; }
.ge-station.done{ background:linear-gradient(135deg,var(--gold),#FFAE3C); }
.ge-station.ge-goal{ background:#fff; font-size:18px; }
.ge-road{ height:6px; width:clamp(14px,6vw,40px); background:repeating-linear-gradient(90deg,var(--ge-color,#6C63FF) 0 8px,transparent 8px 14px); opacity:.6; }
.ge-walker{ position:absolute; top:4px; right:0; width:44px; height:44px; display:grid; place-items:center; transition:right .6s cubic-bezier(.4,1.3,.6,1); animation:geBounce 1.4s ease-in-out infinite; }
.ge-quiz-body{ min-height:150px; }

/* البازل */
.ge-puzzle-row{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin:14px 0; }
.ge-puzzle{ display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:4px; width:min(300px,80vw); aspect-ratio:1; padding:6px; border-radius:18px; background:var(--ge-color,#6C63FF); box-shadow:0 12px 28px rgba(15,10,40,.18); transition:transform .3s; }
.ge-puzzle.solved{ gap:0; transform:scale(1.03); }
.ge-piece{ border:0; border-radius:8px; background-color:#fff; background-repeat:no-repeat; cursor:pointer; font:900 22px/1 inherit; color:var(--ink); transition:transform .2s, box-shadow .2s, outline .1s; outline:3px solid transparent; }
.ge-piece.sel{ transform:scale(.92); outline-color:var(--gold); box-shadow:0 0 0 4px rgba(255,201,60,.35); }
.ge-piece.ok{ box-shadow:inset 0 0 0 2px rgba(76,175,109,.55); }
.ge-puzzle.solved .ge-piece{ border-radius:0; box-shadow:none; }
.ge-puzzle-preview{ text-align:center; font-size:12px; color:var(--ink-soft); font-weight:800; }
.ge-puzzle-preview div{ width:84px; height:84px; margin-top:4px; border-radius:12px; background-size:cover; border:2px solid #EDE4FF; display:grid; place-items:center; font-size:44px; }

/* أين اختبأ صاحبي؟ */
.ge-hide{ position:relative; height:190px; margin:18px auto 6px; width:min(100%,calc(var(--cups,4) * 96px)); }
.ge-cup{ position:absolute; bottom:10px; right:calc(var(--slot,0) * (100% / var(--cups,4))); width:calc(100% / var(--cups,4)); height:150px; border:0; background:transparent; cursor:pointer; transition:right .5s cubic-bezier(.5,0,.5,1); padding:0; }
.ge-cup-body{ position:absolute; inset:auto 0 0; font-size:70px; line-height:1; transition:transform .35s cubic-bezier(.4,1.4,.6,1); display:block; filter:drop-shadow(0 8px 10px rgba(15,10,40,.2)); }
.ge-cup-friend{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%) scale(0); width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#fff; box-shadow:0 6px 14px rgba(15,10,40,.18); transition:transform .3s; }
.ge-cup.lift .ge-cup-body{ transform:translateY(-70px) rotate(-8deg); }
.ge-cup.lift[data-has="1"] .ge-cup-friend{ transform:translateX(-50%) scale(1); }
.ge-cup.found .ge-cup-friend{ animation:geBounce .6s ease-in-out infinite; }
.ge-cup.empty .ge-cup-body{ transform:translateY(-40px); }

/* المغامرة */
.ge-adv{ min-height:220px; display:flex; flex-direction:column; justify-content:center; padding:20px; margin:14px 0; border-radius:var(--radius-md); border:2px dashed var(--ge-color,#6C63FF); background:linear-gradient(180deg,#F6F1FF,#fff); }
.ge-adv-scene{ font-size:46px; }
.task-video-wrap{ margin:18px 0; border-radius:16px; overflow:hidden; }

/* ===================== QUIZ ===================== */
.quiz-card{ max-width:560px; margin:0 auto; padding:32px; border-radius:var(--radius-lg); text-align:center; position:relative; overflow:hidden; }
.quiz-live{ background:linear-gradient(160deg,#fff,var(--cream-2)); }
.quiz-reaction-avatar{ font-size:54px; margin-bottom:6px; display:inline-block; animation:quizIdle 2.2s ease-in-out infinite; }
@keyframes quizIdle{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-8px) rotate(-6deg); } }
.quiz-reaction-avatar.bump{ animation:quizBump .5s ease; }
@keyframes quizBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35) rotate(8deg); } 100%{ transform:scale(1); } }
.quiz-flash-pop{ animation:cardPopIn .4s cubic-bezier(.34,1.56,.64,1); background:linear-gradient(160deg,var(--gold-soft),#fff); }
@keyframes cardPopIn{ 0%{ transform:scale(.7); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.quiz-confetti{ position:absolute; top:-10px; left:0; right:0; text-align:center; font-size:26px; letter-spacing:14px; animation:confettiFall 1.4s ease-out; opacity:.9; }
@keyframes confettiFall{ 0%{ transform:translateY(-30px); opacity:0; } 30%{opacity:1;} 100%{ transform:translateY(40px); opacity:0; } }
.quiz-axis{ color:var(--violet); font-weight:800; margin-bottom:8px; }
.quiz-options{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.quiz-opt{ padding:16px; border-radius:var(--radius-sm); border:2px solid #EEE3FF; font-weight:700; text-align:right; transition:.2s; background:#fff; width:100%;}
.quiz-opt:hover{ border-color:var(--coral); background:var(--cream-2); transform:translateX(-4px); }
.chart-wrap{ display:flex; flex-direction:column; gap:14px; }
.chart-row{ display:grid; grid-template-columns:130px 1fr 46px; align-items:center; gap:10px; }
.chart-bar-bg{ background:#F1EBFF; border-radius:999px; height:16px; overflow:hidden; }
.chart-bar-fg{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--violet),var(--pink)); transition:width 1s ease; }

.behavior-radar{ max-width:420px; margin:0 auto; color:#3B2E6B; }
.behavior-radar svg{ width:100%; height:auto; display:block; overflow:visible; }
.behavior-radar .br-ring{ fill:none; stroke:#D6CCFF; stroke-width:1.4; }
.behavior-radar .br-spoke{ stroke:#E4D9FF; stroke-width:1; }
.behavior-radar .br-tick{ fill:#8A7AAD; font-size:11px; font-weight:800; }
.behavior-radar .br-label{ fill:#3B2E6B; font-size:13px; font-weight:800; }
.behavior-radar .br-shape{ fill:rgba(108,99,255,.28); stroke:#6C63FF; stroke-width:2.4; stroke-linejoin:round; }
.behavior-radar-legend{ list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.behavior-radar-legend li{ display:flex; justify-content:space-between; gap:8px; font-size:13px; font-weight:800; color:#3B2E6B; border-bottom:1px dashed #E6DEFF; padding-bottom:4px; }
.behavior-radar-legend b{ color:#5B4DB8; white-space:nowrap; }
.behavior-radar-note{ margin:10px 0 0; text-align:center; font-size:13px; font-weight:800; color:#7B6EA8; }
@media(max-width:520px){
  .behavior-radar-legend{ grid-template-columns:1fr; }
  .behavior-radar .br-label{ font-size:12px; }
}

/* ===================== STORY PLAYER ===================== */
.story-ring-nav{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:18px 0; }
.story-ring-nav .seg{ width:26px; height:26px; border-radius:50%; background:#EEE3FF; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--ink-soft);}
.story-ring-nav .seg.done{ background:var(--gold); color:#fff; }
.story-player{ background:var(--night); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-pop); max-width:620px; margin:0 auto; }
.story-scene{ position:relative; aspect-ratio:16/9; display:flex; align-items:flex-end; justify-content:center; transition:background .9s ease; }
.story-scene-caption{ background:linear-gradient(0deg,rgba(0,0,0,.75),transparent); width:100%; color:#fff; padding:26px 22px 18px; font-family:var(--font-display); font-size:18px; text-align:center; transition:opacity .26s ease, transform .26s ease; }
/* is-out = المشهد يتلاشى قبل استبدال نصه (StoryPlayer مع animate) */
.story-scene-caption.is-out{ opacity:0; transform:translateY(12px); }
.story-photo-badge{ position:absolute; top:16px; left:16px; width:64px; height:64px; border-radius:50%; border:3px solid var(--gold); overflow:hidden; background:#fff;}
.story-photo-badge img{ width:100%;height:100%;object-fit:cover;}
.story-sprite{ position:absolute; font-size:64px; left:50%; top:36%; transform:translate(-50%,-50%); animation:spriteFloat 2.2s ease-in-out infinite; filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
@keyframes spriteFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(0) rotate(-4deg); } 50%{ transform:translate(-50%,-50%) translateY(-16px) rotate(4deg); } }
/* عنوان الفصل وأيقونته — تستخدمها المغامرة الكبرى، واختيارية لبقية القصص */
.story-chapter{ position:absolute; inset-inline:0; top:12%; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; text-align:center; padding:0 18px; transition:opacity .26s ease, transform .26s ease; }
.story-chapter.is-out{ opacity:0; transform:translateY(-10px); }
.story-chapter-icon{ font-size:52px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)); animation:chapterFloat 2.6s ease-in-out infinite; }
@keyframes chapterFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(3deg); } }
.story-chapter-title{ font-family:var(--font-display); font-size:19px; font-weight:800; color:#FFC93C; text-shadow:0 2px 10px rgba(0,0,0,.5); }
@media(max-width:600px){ .story-chapter-icon{ font-size:38px; } .story-chapter-title{ font-size:15px; } }
.story-controls{ display:flex; align-items:center; gap:10px; padding:14px; background:var(--night-2); flex-wrap:wrap;}
.story-controls .grow{ flex:1; min-width:80px; text-align:center;}
.story-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }

/* ---------- StoryPlayer — وضع الكتاب المصوّر (book:true) ---------- */
.story-book{ max-width:680px; margin:0 auto; perspective:1400px; }
.book-page{ position:relative; background:#FFF9EE; border-radius:22px 8px 8px 22px; box-shadow:0 24px 60px rgba(15,10,40,.45), inset 12px 0 22px -14px rgba(120,80,20,.35); overflow:hidden; transform-origin:right center; transition:transform .26s ease-in, opacity .26s; color:var(--ink); }
.book-page:before{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(120,80,20,.025) 0 2px,transparent 2px 6px); }
.book-page.turn-out{ transform:rotateY(-88deg); opacity:.4; }
.book-page.turn-back{ transform:rotateY(88deg); opacity:.4; transform-origin:left center; }
.book-page.turn-in{ animation:bookIn .26s ease-out; }
@keyframes bookIn{ from{ transform:rotateY(60deg); opacity:.4; } to{ transform:none; opacity:1; } }
.book-ribbon{ position:absolute; top:16px; right:0; z-index:3; background:linear-gradient(135deg,var(--gold),#FFAE3C); color:var(--ink); font-family:var(--font-display); font-weight:900; font-size:15px; padding:6px 16px 6px 20px; border-radius:999px 0 0 999px; box-shadow:0 6px 14px rgba(255,201,60,.4); }
.book-art{ position:relative; height:250px; margin:14px 14px 0; border-radius:16px; overflow:hidden; background:linear-gradient(160deg,var(--g1,#6C63FF),var(--g2,#FF6FA5)); transition:background .5s; }
.book-art-sky{ position:absolute; inset:0; background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.35),transparent 30%),radial-gradient(circle at 80% 30%,rgba(255,255,255,.2),transparent 25%); }
.book-art-hill{ position:absolute; bottom:-40px; left:-10%; width:70%; height:110px; border-radius:50%; background:rgba(255,255,255,.22); }
.book-art-hill.two{ left:auto; right:-15%; width:75%; height:130px; background:rgba(255,255,255,.3); }
.book-art-icon{ position:absolute; top:22px; left:50%; transform:translateX(-50%); font-size:82px; line-height:1; filter:drop-shadow(0 12px 16px rgba(0,0,0,.3)); animation:chapterFloat 3s ease-in-out infinite; }
.book-hero{ position:absolute; right:22px; bottom:16px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.book-hero-photo{ width:76px; height:76px; border-radius:50%; overflow:hidden; border:4px solid var(--gold); background:#fff; box-shadow:0 10px 20px rgba(0,0,0,.28); display:grid; place-items:center; font-size:40px; }
.book-hero-photo img{ width:100%; height:100%; object-fit:cover; }
.book-hero-name{ background:rgba(255,255,255,.9); color:var(--ink); font-weight:900; font-size:12px; padding:2px 10px; border-radius:999px; }
.book-companion{ position:absolute; left:22px; bottom:14px; width:70px; height:70px; display:grid; place-items:center; font-size:52px; animation:spriteFloat 2.4s ease-in-out infinite; filter:drop-shadow(0 10px 14px rgba(0,0,0,.3)); }
.book-companion img{ width:70px; height:70px; object-fit:cover; border-radius:50%; border:3px solid #fff; }
.book-bubble{ position:absolute; left:96px; bottom:24px; max-width:min(52%,260px); background:#fff; color:var(--ink); border-radius:16px 16px 16px 4px; padding:8px 12px; font-size:13px; font-weight:700; line-height:1.7; box-shadow:0 8px 20px rgba(0,0,0,.2); animation:geIn .4s ease-out; }
.book-bubble b{ display:block; color:var(--violet); font-size:11px; margin-bottom:2px; }
.book-bubble[hidden]{ display:none; }
.book-text{ padding:16px 22px 6px; text-align:center; min-height:120px; }
.book-title{ margin:0 0 6px; font-family:var(--font-display); font-size:22px; color:var(--ink); }
.book-caption{ margin:0; font-size:17px; line-height:2; color:var(--ink); font-weight:600; }
.book-page.is-reading .book-caption{ background:linear-gradient(transparent 70%,rgba(255,201,60,.35) 70%); display:inline; }
.book-foot{ display:flex; align-items:center; justify-content:space-between; padding:8px 18px 14px; color:var(--ink-soft); font-weight:800; font-size:13px; }
.book-dots{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.book-dots i{ width:9px; height:9px; border-radius:50%; background:#E8DFC8; cursor:pointer; transition:transform .2s, background .2s; }
.book-dots i.on{ background:var(--violet); transform:scale(1.35); }
.book-page.is-cover .book-art{ height:290px; }
.book-page.is-cover .book-title{ font-size:30px; }
.book-controls{ border-radius:0 0 18px 18px; justify-content:center; }
@media(max-width:600px){ .book-art{ height:210px; } .book-art-icon{ font-size:64px; } .book-bubble{ left:80px; font-size:12px; } .book-caption{ font-size:15px; } }

/* لوحة القصة اليومية ذات المشهد الواحد (StoryPlayer وضع single) */
.story-single{ max-width:720px; margin:0 auto; background:#FFF9EE; border-radius:26px; overflow:hidden; box-shadow:0 24px 60px rgba(15,10,40,.45); color:var(--ink); }
.single-art{ position:relative; height:280px; background:linear-gradient(160deg,var(--g1,#6C63FF),var(--g2,#FF6FA5)); overflow:hidden; }
.single-icon{ position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); font-size:110px; line-height:1; filter:drop-shadow(0 14px 22px rgba(0,0,0,.3)); animation:spriteFloat 3s ease-in-out infinite; }
.story-single .book-hero-photo{ width:96px; height:96px; font-size:50px; }
.story-single .book-companion{ width:90px; height:90px; font-size:66px; }
.story-single .book-companion img{ width:90px; height:90px; }
.single-text{ padding:20px 24px 8px; text-align:center; }
.single-title{ margin:0 0 10px; font-family:var(--font-display); font-size:26px; color:var(--ink); }
.single-caption{ margin:0; font-size:18px; line-height:2.1; font-weight:600; text-align:right; }
.story-single.is-reading .single-caption{ background:linear-gradient(transparent 72%,rgba(255,201,60,.4) 72%); display:inline; }
.single-quote{ margin:14px auto 0; max-width:520px; background:#fff; border-radius:16px 16px 16px 4px; padding:10px 14px; font-size:15px; font-weight:700; line-height:1.8; box-shadow:0 8px 20px rgba(0,0,0,.12); text-align:right; }
.single-quote b{ display:block; color:var(--violet); font-size:12px; margin-bottom:2px; }
.story-single .book-controls .btn{ min-height:56px; font-size:18px; padding:0 34px; }
@media(max-width:600px){ .single-art{ height:220px; } .single-icon{ font-size:80px; } .single-caption{ font-size:16px; } }

/* ===================== SAFETY ===================== */
.safety-hero{ background:linear-gradient(135deg,var(--mint),#1B9E92); color:#fff; border-radius:var(--radius-lg); padding:34px; }
.safety-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-top:20px; }
.safety-item{ padding:22px; border-radius:var(--radius-md); border:2px solid #E3FBF8; }
.safety-dots{ display:flex; justify-content:center; gap:7px; margin:10px 0 4px; }
.safety-dots i{ width:12px; height:12px; border-radius:50%; background:#E3FBF8; box-shadow:0 0 0 1px #BFEFE9; }
.safety-dots i.on{ background:linear-gradient(135deg,var(--gold),#FFAE3C); }
.safety-feedback{ padding:18px; border-radius:var(--radius-md); margin:8px 0 14px; animation:geIn .3s ease-out; }
.safety-feedback.good{ background:linear-gradient(135deg,#FFF6D6,#FFE9A8); }
.safety-feedback.soft{ background:linear-gradient(135deg,#E3FBF8,#E4E0FF); }
.safety-feedback p{ margin:8px 0 0; font-weight:800; line-height:1.9; }
.safety-rules{ list-style:none; padding:0; margin:10px 0 18px; text-align:right; }
.safety-rules li{ background:#E3FBF8; border-radius:14px; padding:10px 14px; margin-bottom:8px; font-weight:800; line-height:1.8; }
.tag-video{ background:#EAF3FF; color:#2D6CDF; }
.tag-game{ background:#FFF1DD; color:var(--coral); }
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); z-index:500; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{ display:flex; }
.modal-content{ background:#fff; border-radius:24px; max-width:480px; width:100%; padding:28px; text-align:center; position:relative; }
.modal-close{ position:absolute; top:12px; left:12px; font-size:22px; background:rgba(0,0,0,.06); border-radius:10px; padding:4px 10px; }

/* ===================== FRIEND / CULTURE ===================== */
.friend-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.friend-card{ padding:20px; border-radius:var(--radius-md); }
.friend-card .fchar{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.friend-card .fchar .fe{ width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff; overflow:hidden;}
.friend-card .fchar .fe img{ width:100%; height:100%; object-fit:cover;}
.reco-strip{ display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; }
.reco-card{ min-width:220px; border-radius:var(--radius-md); overflow:hidden; background:#fff; box-shadow:var(--shadow-soft); flex-shrink:0; }
.reco-cover{ height:110px; background:linear-gradient(135deg,var(--violet),var(--pink)); display:flex; align-items:center; justify-content:center; font-size:38px; color:#fff; }
.reco-body{ padding:14px; }

/* ===================== COMPANION (الرفيق المرشد) ===================== */
/* أكبر وأبطأ: يمشي ببطء على طول الشاشة (34 ثانية للجولة) ويتوقف عندما يتكلم */
#companionWidget{ position:fixed; bottom:0; left:0; z-index:250; display:flex; align-items:flex-end; gap:10px; animation:companionWalk 34s ease-in-out infinite; pointer-events:none; }
body.kidora-game-open #companionWidget{ z-index:100001; }
#companionWidget > *{ pointer-events:auto; }
#companionWidget.is-talking, #companionWidget.is-pinned{ animation-play-state:paused; }
@keyframes companionWalk{
  0%{ transform:translateX(8vw) translateY(0); }
  12%{ transform:translateX(30vw) translateY(-3px); }
  25%{ transform:translateX(52vw) translateY(0); }
  37%{ transform:translateX(70vw) translateY(-3px) scaleX(-1); }
  50%{ transform:translateX(52vw) translateY(0) scaleX(-1); }
  62%{ transform:translateX(30vw) translateY(-3px) scaleX(-1); }
  75%{ transform:translateX(8vw) translateY(0) scaleX(-1); }
  87%{ transform:translateX(8vw) translateY(-3px); }
  100%{ transform:translateX(8vw) translateY(0); }
}
#companionBubble{ display:none; position:relative; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-radius:20px; padding:14px 18px; max-width:320px; min-width:120px; box-shadow:var(--shadow-pop); font-size:16px; font-weight:800; margin-bottom:10px; line-height:1.75; animation:bubblePop .35s ease; transform:scaleX(1) !important; color:var(--ink); }
#companionBubble::after{ content:""; position:absolute; bottom:-10px; inset-inline-start:26px; border:10px solid transparent; border-top-color:rgba(255,255,255,.97); border-bottom:0; }
#companionBubble .bubble-sidekick{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(150deg,var(--theme-accent),var(--theme-glow)); font-size:22px; margin-inline-end:8px; vertical-align:middle; animation:companionHop 1.6s ease-in-out infinite; }
@keyframes bubblePop{ 0%{ transform:scale(.7); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.companion-col{ display:flex; flex-direction:column; align-items:center; gap:6px; transform:scaleX(1) !important; }
#companionSwapBtn{ font-size:14px; background:#fff; border-radius:999px; padding:7px 13px; box-shadow:var(--shadow-soft); animation:swapPulse 2.6s ease-in-out infinite; min-height:36px; }
@keyframes swapPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
#companionAvatar{ position:relative; width:150px; height:150px; border-radius:50%; overflow:visible; display:flex; align-items:center; justify-content:center; font-size:74px; box-shadow:0 18px 38px rgba(0,0,0,.38), 0 0 0 7px rgba(255,255,255,.28); background:linear-gradient(150deg,var(--theme-accent),var(--theme-glow)); border:4px solid rgba(255,255,255,.7); cursor:pointer; transform-origin:50% 100%; }
#companionAvatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* حركة المشي الأساسية (أبطأ من قبل بمرّة ونصف) */
#companionAvatar.move-wiggle{ animation:companionWiggle 2.8s ease-in-out infinite; }
#companionAvatar.move-bounce{ animation:companionBounce 1.7s ease-in-out infinite; }
#companionAvatar.move-dash{ animation:companionDash 2.2s ease-in-out infinite; }
#companionAvatar.move-float{ animation:companionFloat 3.8s ease-in-out infinite; }
#companionAvatar.move-hop{ animation:companionHop 2s ease-in-out infinite; }
#companionAvatar.move-stomp{ animation:companionStomp 2.4s ease-in-out infinite; }
/* المزاج (يتجاوز حركة المشي أثناء الحديث/الاحتفال/التفكير) */
#companionAvatar.mood-talk{ animation:companionTalk .55s ease-in-out infinite !important; }
#companionAvatar.mood-cheer{ animation:companionCheer .9s ease-in-out infinite !important; }
#companionAvatar.mood-think{ animation:companionThink 2.4s ease-in-out infinite !important; }
#companionAvatar.mood-wave{ animation:companionWave 1.1s ease-in-out infinite !important; }
#companionAvatar.mood-point{ animation:companionPoint 1.4s ease-in-out infinite !important; }
#companionAvatar .mood-badge{ position:absolute; top:-14px; inset-inline-end:-10px; font-size:34px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); animation:moodBadge 1.2s ease-in-out infinite; pointer-events:none; }
@keyframes moodBadge{ 0%,100%{ transform:translateY(0) rotate(-8deg) scale(1); } 50%{ transform:translateY(-8px) rotate(8deg) scale(1.12); } }
@keyframes companionWiggle{ 0%,100%{ transform:rotate(-7deg) translateY(0); } 50%{ transform:rotate(7deg) translateY(-8px); } }
@keyframes companionBounce{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-22px) scale(1.06); } }
@keyframes companionDash{ 0%,100%{ transform:translateX(0) rotate(0); } 50%{ transform:translateX(12px) rotate(-6deg); } }
@keyframes companionFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-18px) rotate(5deg); } }
@keyframes companionHop{ 0%,60%,100%{ transform:translateY(0) scale(1); } 30%{ transform:translateY(-26px) scale(1.05,.95); } }
@keyframes companionStomp{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }
@keyframes companionTalk{ 0%,100%{ transform:scale(1) rotate(0); } 25%{ transform:scale(1.04,.97) rotate(-2deg); } 75%{ transform:scale(.98,1.04) rotate(2deg); } }
@keyframes companionCheer{ 0%,100%{ transform:translateY(0) rotate(-10deg) scale(1); } 50%{ transform:translateY(-34px) rotate(10deg) scale(1.1); } }
@keyframes companionThink{ 0%,100%{ transform:rotate(-4deg) translateX(0); } 50%{ transform:rotate(6deg) translateX(6px) translateY(-4px); } }
@keyframes companionWave{ 0%,100%{ transform:rotate(-12deg); } 50%{ transform:rotate(12deg) translateY(-6px); } }
@keyframes companionPoint{ 0%,100%{ transform:translateX(0) scale(1); } 50%{ transform:translateX(18px) scale(1.06); } }
@media(max-width:700px){
  #companionAvatar{ width:104px; height:104px; font-size:52px; }
  #companionBubble{ max-width:min(78vw, 300px); font-size:15px; }
  @keyframes companionWalk{
    0%{ transform:translateX(3vw) translateY(0); }
    25%{ transform:translateX(40vw) translateY(-3px); }
    50%{ transform:translateX(64vw) translateY(0) scaleX(-1); }
    75%{ transform:translateX(18vw) translateY(-3px) scaleX(-1); }
    100%{ transform:translateX(3vw) translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce){ #companionWidget, #companionAvatar{ animation:none !important; } }

.toast-wrap{ position:fixed; bottom:20px; inset-inline:0; display:flex; justify-content:center; z-index:300; pointer-events:none;}
.toast{ background:var(--ink); color:#fff; padding:14px 22px; border-radius:999px; font-weight:700; box-shadow:0 10px 26px rgba(0,0,0,.25); }

.hidden{ display:none !important; }
footer.site-footer{ background:var(--night); color:#B7ACDD; padding:30px 0; text-align:center; font-size:14px; }

@media(max-width:600px){ .task-card{ padding:24px; } .auth-card{ padding:24px; } }