:root{
  --p:#2b7a78;         /* Primary */
  --p2:#57a6d6;        /* Sky */
  --s:#f7c84b;         /* Warm yellow */
  --bg1:#eef7f1;
  --bg2:#fff7e6;
  --card:rgba(255,255,255,.86);
  --shadow: 0 18px 40px rgba(0,0,0,.10);
  --radius: 18px;
}

*{ box-sizing:border-box; }

body.welcomeApp{
  margin:0;
  font-family:'Tajawal',sans-serif;
  height:100vh;
  overflow:hidden;
  background: radial-gradient(1200px 600px at 20% 20%, #ffffff 0%, var(--bg1) 35%, var(--bg2) 100%);
}

/* خلفية خفيفة متحركة */
.scene__bg{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(20px 20px at 15% 25%, rgba(87,166,214,.25) 0 60%, transparent 61%),
    radial-gradient(24px 24px at 80% 30%, rgba(247,200,75,.25) 0 60%, transparent 61%),
    radial-gradient(18px 18px at 60% 80%, rgba(43,122,120,.18) 0 60%, transparent 61%);
  filter: blur(0px);
  animation: bgMove 10s ease-in-out infinite;
  z-index:0;
}
@keyframes bgMove{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(10px,-10px,0) scale(1.02); }
}

/* Loader & Welcome */
.loader, .welcome{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.loader__card{
  width:min(520px, 92vw);
  text-align:center;
  padding:28px 22px;
  border-radius:var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.logo{
  font-size:52px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--p);
  margin-bottom:12px;
}

.loader__text{
  margin:14px 0 0;
  font-size:18px;
  color:#234;
}

/* كتاب بيتفتح */
.book{
  position:relative;
  width:120px;
  height:80px;
  margin:12px auto 6px;
  perspective: 700px;
}
.book .spine{
  position:absolute;
  inset:0;
  width:10px;
  margin:auto;
  height:78px;
  background: linear-gradient(180deg, var(--p), #1f5e5c);
  border-radius:8px;
  z-index:3;
}
.book .page{
  position:absolute;
  top:2px;
  width:55px;
  height:76px;
  background: linear-gradient(180deg,#fff,#f3f6ff);
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.book .left{ left:6px; transform-origin: right center; animation: openLeft 1.2s ease-in-out infinite; }
.book .right{ right:6px; transform-origin: left center; animation: openRight 1.2s ease-in-out infinite; }

@keyframes openLeft{
  0%{ transform: rotateY(0deg); }
  50%{ transform: rotateY(35deg); }
  100%{ transform: rotateY(0deg); }
}
@keyframes openRight{
  0%{ transform: rotateY(0deg); }
  50%{ transform: rotateY(-35deg); }
  100%{ transform: rotateY(0deg); }
}

.hidden{ display:none !important; }

/* Welcome Scene */
.scene{
  position:relative;
  width:min(980px, 96vw);
  min-height: 86vh;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.mascot{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.arabi{
  width:min(260px, 58vw);
  animation: float 3.2s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.12));
}
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* 👋 لوّح */
.wave{
  position:absolute;
  right:10px;
  top:22px;
  font-size:26px;
  transform-origin: bottom left;
  animation: wave 1.2s ease-in-out infinite;
}
@keyframes wave{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(18deg); }
}

.bubble{
  width:min(620px, 92vw);
  background: var(--card);
  border-radius: 22px;
  padding:16px 16px 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  z-index:2;
  border:1px solid rgba(43,122,120,.12);
}
.bubble__title{
  font-weight:800;
  color:var(--p);
  margin-bottom:6px;
}
.bubble__text{
  color:#203040;
  font-size:18px;
  line-height:1.8;
}
.bubble__controls{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.chip{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  z-index:2;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:#123;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
.btn:hover{ transform: translateY(-2px); }

.primary{
  background: linear-gradient(135deg, var(--p), #1f5e5c);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}
.info{
  background: linear-gradient(135deg, var(--p2), #3c8bb8);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}
.ghost{
  background: transparent;
  color: var(--p);
  border-color: rgba(43,122,120,.25);
}

/* موبايل */
@media (max-width:480px){
  .logo{ font-size:44px; }
  .bubble__text{ font-size:17px; }
  .btn{ width:100%; }
}


.hint{
  margin-top:10px;
  color:#2b3a40;
  font-size:14px;
  opacity:.9;
}

.warm{
  background: linear-gradient(135deg, #f7c84b, #f2a93b);
  color:#2a2208;
  border-color: rgba(255,255,255,.22);
}