@font-face { font-family: 'Lalezar'; src: url('fonts/Lalezar-Regular.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Almarai'; src: url('fonts/Almarai-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: block; }
:root {
  --sky1: #DFF3FF; --sky2: #FFF5E6; --ink: #4A3B33; --ok: #4CC27A; --okD: #2E9E5B; --no: #FFA94D; --noD: #F08C2E;
  --star: #FFC93C; --card: #FFFFFF; --shadow: 0 1.2vmin 3vmin rgba(74,59,51,.16); --pink: #FF8FB1; --blue: #3D7FB5; --coral: #E07A4F;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 100%); color: var(--ink);
  font-family: 'Almarai', 'Geeza Pro', sans-serif; font-weight: 800; touch-action: manipulation; }
.screen { position: fixed; top:0;right:0;bottom:0;left:0; display: none; flex-direction: column; align-items: center; }
.screen.on { display: flex; }
.cloud { position: fixed; background: #fff; border-radius: 50%; opacity: .75; z-index: 0; animation: drift 40s linear infinite alternate; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud.c1 { width: 16vmin; height: 7vmin; top: 7vmin; left: 6vmin; } .cloud.c1::before { width: 9vmin; height: 9vmin; top: -4.5vmin; left: 2.5vmin; } .cloud.c1::after { width: 7vmin; height: 7vmin; top: -3vmin; left: 7.5vmin; }
.cloud.c2 { width: 13vmin; height: 6vmin; top: 12vmin; right: 9vmin; animation-duration: 55s; } .cloud.c2::before { width: 7vmin; height: 7vmin; top: -3.5vmin; left: 2vmin; } .cloud.c2::after { width: 6vmin; height: 6vmin; top: -2.5vmin; left: 6vmin; }
@keyframes drift { from { transform: translateX(-4vmin); } to { transform: translateX(6vmin); } }
h1 { font-family: 'Lalezar', sans-serif; font-weight: 400; font-size: 8vmin; margin: 4vmin 0 .6vmin; color: var(--blue); text-shadow: 0 .5vmin 0 #fff; z-index: 1; }
.sub { font-size: 3.2vmin; color: #7A6A60; margin-bottom: 3vmin; z-index: 1; }

/* ---- «مَن ستلعب الآن؟» */
.names { display: grid; grid-template-columns: repeat(var(--cols, 3), 26vmin); gap: 3vmin; z-index: 1; }
.name { height: 20vmin; border-radius: 4vmin; background: var(--card); box-shadow: var(--shadow); border: .7vmin solid #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8vmin; cursor: pointer; transition: transform .15s; }
.name:active { transform: scale(.94); }
.name .badge { width: 9vmin; height: 9vmin; border-radius: 50%; display: grid; place-items: center; font-size: 5.4vmin; }
.name .nm { font-family: 'Lalezar', sans-serif; font-weight: 400; font-size: 5.4vmin; }
.name .ear { font-size: 2.3vmin; color: #9A8B80; }

/* ---- top bar */
.bar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 2.4vmin 3vmin 0; z-index: 2; }
.btn { width: 10vmin; height: 10vmin; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; font-size: 5vmin; cursor: pointer; border: none; }
.btn:active { transform: scale(.92); }
.speak.talking { animation: pulse 0.9s ease-in-out infinite; background: #FFF3C4; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.title { font-family: 'Lalezar', sans-serif; font-weight: 400; font-size: 5.2vmin; color: var(--blue); text-align: center; line-height: 1.2; }
.title small { display: block; font-family: 'Almarai'; font-size: 2.6vmin; color: var(--coral); }

/* ---- side stars («نجوم تطلع على جنب») */
.stars { position: fixed; right: 2vmin; top: 52%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.1vmin; z-index: 3;
  background: rgba(255,255,255,.75); padding: 1.4vmin 1vmin; border-radius: 6vmin; box-shadow: var(--shadow); }
.star { width: var(--sz, 9vmin); height: var(--sz, 9vmin); display: block; }
.star path { fill: #EFE6D8; stroke: #D9CDBB; stroke-width: 3; transition: fill .3s; }
.star.got path { fill: var(--star); stroke: #E9A800; }
.star.got { animation: pop .6s ease-out; }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---- the cat mascot cheers on every right answer */
.mascot { position: fixed; left: 2vmin; bottom: 1vmin; width: 16vmin; z-index: 4; pointer-events: none; transform-origin: 50% 100%; }
.mascot.cheer { animation: jump 1.1s ease-out; }
@keyframes jump { 0% { transform: translateY(0) scale(1); } 20% { transform: translateY(-7vmin) scale(1.08) rotate(-6deg); } 40% { transform: translateY(0) scale(.96, 1.04); }
  55% { transform: translateY(-4vmin) rotate(6deg); } 75% { transform: translateY(0) scale(1.02, .98); } 100% { transform: translateY(0) scale(1); } }
.burst { position: fixed; z-index: 5; pointer-events: none; font-size: 4vmin; animation: burst 1s ease-out forwards; }
@keyframes burst { from { transform: translate(0, 0) scale(.6); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }

/* ---- game 1: scene cards */
.cards { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5vmin; z-index: 1; padding-left: 8vmin; padding-right: 15vmin; padding-bottom: 3vmin; }
.scene { position: relative; width:var(--cpk1, min(38vw, 64vmin)); aspect-ratio: 1.16 / 1; background: linear-gradient(180deg, #F2FAFF 0%, #F2FAFF 68%, #FFE9C9 68%, #FFDDAE 100%);
  border-radius: 4vmin; box-shadow: var(--shadow); border: .8vmin solid #fff; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.scene:active { transform: scale(.97); }
.scene.right { box-shadow: 0 0 0 1.2vmin var(--ok), var(--shadow); animation: yay .6s ease-out; }
.scene.wrong { animation: shake .5s; }
@keyframes yay { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-1.6vmin); } 40% { transform: translateX(1.6vmin); } 60% { transform: translateX(-1vmin); } 80% { transform: translateX(1vmin); } }
.scene img { position: absolute; pointer-events: none; }
.clip { position: absolute; overflow: hidden; pointer-events: none; }

/* ---- game 2 */
.story { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 1; padding: 1vmin 15vmin 0 8vmin; width: 100%; }
.pic { height: 53vh; max-width: 72vw; aspect-ratio: 16/9; border-radius: 4vmin; box-shadow: var(--shadow); border: .8vmin solid #fff; background: #fff center/cover no-repeat; }
.story.q .pic { height: 45vh; }
.line { margin-top: 2.2vmin; font-size: 4.6vmin; line-height: 1.6; text-align: center; max-width: 80vw; min-height: 7vmin; }
.line .w { transition: color .2s, background .2s; border-radius: 1vmin; padding: 0 .3vmin; }
.line .w.lit { color: #fff; background: var(--coral); }
.next { margin-top: 1.4vmin; padding: 1.6vmin 6vmin; border-radius: 6vmin; border: none; background: #5AA9E6; color: #fff; font-family: 'Lalezar', sans-serif; font-size: 5vmin;
  box-shadow: 0 1vmin 0 #3D82BD; cursor: pointer; visibility: hidden; }
.next.show { visibility: visible; animation: pop .5s; }
.yn { display: flex; gap: 6vmin; margin-top: 2vmin; }
.ynb { width: 28vmin; height: 14vmin; border-radius: 4vmin; border: none; font-family: 'Lalezar', sans-serif; font-size: 7vmin; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 1.6vmin; }
.ynb.yes { background: var(--ok); box-shadow: 0 1.2vmin 0 var(--okD); }
.ynb.no { background: var(--no); box-shadow: 0 1.2vmin 0 var(--noD); }
.ynb:active { transform: translateY(.8vmin); }
.ynb.right { animation: yay .6s; outline: 1vmin solid #fff; }
.ynb.wrong { animation: shake .5s; }

/* ---- visual mode (hearing impairment): everything is also written and shown */
.cap { display: none; z-index: 2; margin-top: 1vmin; font-family: 'Lalezar', sans-serif; font-weight: 400; font-size: 6vmin; color: var(--ink); background: #fff;
  padding: .6vmin 4vmin; border-radius: 4vmin; box-shadow: var(--shadow); align-items: center; gap: 2vmin; }
body.visual .cap { display: flex; }
.cap .kw { color: var(--coral); }
.cap .pg { font-size: 6vmin; }
body.visual .line { font-size: 5.4vmin; }
.praise { position: fixed; top:0;right:0;bottom:0;left:0; display: grid; place-items: center; pointer-events: none; z-index: 7; }
.praise span { font-family: 'Lalezar', sans-serif; font-size: 16vmin; color: #fff; -webkit-text-stroke: .6vmin var(--coral); text-shadow: 0 1.2vmin 0 rgba(224,122,79,.35);
  animation: praise 1.3s ease-out forwards; }
@keyframes praise { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }

/* ---- flying star + celebration */
.fly { position: fixed; width: 10vmin; height: 10vmin; z-index: 9; pointer-events: none; transition: all .8s cubic-bezier(.5,-0.3,.5,1.2); }
.endbox { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.medal { position: relative; width: 44vmin; height: 44vmin; display: grid; place-items: center; animation: sway 2.6s ease-in-out infinite; }
.medal svg { position: absolute; top:0;right:0;bottom:0;left:0; width: 100%; height: 100%; }
.medal .who { position: relative; font-family: 'Lalezar', sans-serif; font-size: 7.5vmin; color: #8A4B00; margin-top: 3vmin; }
@keyframes sway { 0%,100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.05); } }
.endtxt { font-family: 'Lalezar', sans-serif; font-size: 7.4vmin; color: var(--coral); margin: 1.4vmin 0 .4vmin; }
.date { font-size: 2.8vmin; color: #8E7F75; margin-bottom: 3vmin; }
.row { display: flex; gap: 4vmin; }
.pill { padding: 2vmin 5vmin; border-radius: 6vmin; border: none; font-family: 'Lalezar', sans-serif; font-size: 4.6vmin; color: #fff; background: #5AA9E6; box-shadow: 0 1vmin 0 #3D82BD; cursor: pointer; }
.pill.home { background: #B48CD9; box-shadow: 0 1vmin 0 #8E66B8; }
.confetti { position: fixed; top: -4vmin; width: 1.8vmin; height: 2.8vmin; border-radius: .4vmin; z-index: 8; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.start-hint { position: fixed; bottom: 2.4vmin; font-size: 2.4vmin; color: #9A8B80; z-index: 1; }

/* =====================================================================================
   v2 «إبداع» (2026-10-07, Asma: «خلي ألوانه حلوة تناسب البنات… يفرحون فيه… خصوصاً جوزاء»)
   pastel pink/lilac theme · heart-gem crown instead of stars · the kitten with a pink bow · balloons to pop at the end
   ===================================================================================== */
:root { --sky1: #FFE3F1; --sky2: #EFE6FF; --ink: #4B2E4F; --blue: #C2418C; --coral: #E0559A; --star: #FFC93C;
  --shadow: 0 1.2vmin 3vmin rgba(150,60,120,.16); --pinkB: #FF7EB6; --pinkD: #E0559A; --lilac: #B48CD9; --lilacD: #8E66B8; }
html, body { background: linear-gradient(180deg, #FFE3F1 0%, #FBEAFF 55%, #ECE3FF 100%); }
h1 { color: var(--blue); text-shadow: 0 .5vmin 0 #fff, 0 1vmin 2vmin rgba(194,65,140,.18); }
.sub { color: #8E6A8A; }
.spark { position: fixed; z-index: 0; pointer-events: none; opacity: .55; animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { transform: translateY(0) scale(.9); opacity: .25; } 50% { transform: translateY(-1.4vmin) scale(1.1); opacity: .7; } }
.btn { box-shadow: 0 1vmin 2.4vmin rgba(194,65,140,.18); }
.speak.talking { background: #FFE0F0; }
.title { color: var(--blue); } .title small { color: #9B59B6; }
.name { border-color: #FFD6EA; }
.name .nm { color: #8E3A7A; }
.name .ear { color: #B07AA6; }
.next, .pill { background: var(--pinkB); box-shadow: 0 1vmin 0 var(--pinkD); }
.pill.home { background: var(--lilac); box-shadow: 0 1vmin 0 var(--lilacD); }
.line .w.lit { background: var(--coral); }
.scene { background: linear-gradient(180deg, #FBF6FF 0%, #FBF6FF 68%, #FFE4EF 68%, #FFD6E7 100%); }
.pic { border-color: #fff; box-shadow: 0 0 0 .5vmin #FFD6EA, var(--shadow); }

/* the side column = the crown + 8 heart gems */
.stars { background: rgba(255,255,255,.82); border: .5vmin solid #FFD6EA; padding: 1.2vmin 1vmin 1.4vmin; gap: .9vmin; align-items: center; }
.stars .crownTop { width: calc(var(--sz, 9vmin) * 1.25); height: auto; margin-bottom: .3vmin; filter: drop-shadow(0 .4vmin .6vmin rgba(194,140,0,.35)); }
.gem { width: var(--sz, 9vmin); height: var(--sz, 9vmin); display: block; }
.gem .g { fill: #F6E9F2; stroke: #E8CFE0; stroke-width: 3; transition: fill .3s; }
.gem .hi { fill: #fff; opacity: 0; }
.gem.got .g { fill: var(--c); stroke: var(--cd); }
.gem.got .hi { opacity: .75; }
.gem.got { animation: pop .6s ease-out; }

/* the kitten */
.mascot { width: 17vmin; }
.mascot.clap { width: 19vmin; }

/* «أهلاً يا …» welcome after a name is chosen */
.welcome { position: fixed; top:0;right:0;bottom:0;left:0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.96) 0%, rgba(255,232,245,.95) 55%, rgba(239,230,255,.95) 100%);
  animation: fadeIn .35s ease-out; }
.welcome .wbox { display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.welcome img { height: 46vmin; animation: wave 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
.welcome .hi { font-family: 'Lalezar', sans-serif; font-size: 12vmin; color: var(--blue); text-shadow: 0 .7vmin 0 #fff; line-height: 1.1; }
.welcome .hi b { color: var(--coral); font-weight: 400; }
@keyframes wave { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-1vmin); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.welcome.out { animation: fadeOut .4s ease-in forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.heart { position: fixed; z-index: 21; pointer-events: none; font-size: 6vmin; animation: rise 2.6s ease-out forwards; }
@keyframes rise { from { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-60vh) scale(1.2) rotate(var(--r, 10deg)); opacity: 0; } }

/* praise: pink outline; in visual mode the clapping kitten pops up big in the middle (Jawza sees the praise) */
.praise span { -webkit-text-stroke: .6vmin var(--coral); text-shadow: 0 1.2vmin 0 rgba(224,85,154,.3); }
.bigcat { position: fixed; left: 50%; top: 62%; z-index: 8; pointer-events: none; width: 25vmin; transform: translate(-50%, -50%); animation: bigcat 1.5s ease-out forwards; }
@keyframes bigcat { 0% { transform: translate(-50%, -40%) scale(.3); opacity: 0; } 20% { transform: translate(-50%, -55%) scale(1.08); opacity: 1; }
  45% { transform: translate(-50%, -50%) scale(.98); } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.02); opacity: 0; } }
body.visual .praise span { font-size: 16vmin; }
body.visual .praise { align-items: start; padding-top: 12vh; }   /* text up top, the big kitten below it, the answer buttons stay clear */

/* a gentle written «try again» (it was voice only; Jawza needs to see it) */
.retry { position: fixed; left: 50%; top: 34vh; transform: translateX(-50%); z-index: 8; pointer-events: none; font-family: 'Lalezar', sans-serif; font-size: 6vmin;
  color: #fff; background: var(--lilac); padding: 1vmin 5vmin 1.6vmin; border-radius: 6vmin; box-shadow: 0 1vmin 0 var(--lilacD); animation: retry 1.8s ease-out forwards; }
@keyframes retry { 0% { transform: translate(-50%, 4vmin); opacity: 0; } 15% { transform: translate(-50%, 0); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* idle nudge: the choices breathe and a little hand points (for everyone, and it speaks without sound) */
.nudge .scene, .nudge .ynb { animation: breathe 1.4s ease-in-out 3; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.hand { position: fixed; z-index: 9; font-size: 9vmin; pointer-events: none; animation: tap 1s ease-in-out 3; }
@keyframes tap { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.4vmin); } }

/* end: the crown with her gems, her name on a ribbon, balloons to pop */
.crownBig { position: relative; width: 44vmin; animation: sway 2.6s ease-in-out infinite; }
.crownBig svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.2vmin 1.6vmin rgba(194,140,0,.35)); }
.ribbon { position: relative; margin-top: -1vmin; font-family: 'Lalezar', sans-serif; font-size: 8vmin; color: #fff; background: var(--coral); padding: .4vmin 7vmin 1.4vmin;
  border-radius: 2vmin; box-shadow: 0 1vmin 0 #B83C7B; z-index: 2; }
.endtxt { color: var(--blue); }
.confetti { z-index: -1; }   /* behind the end card (fixed screens make their own layer), not over the crown */
.balloon { position: fixed; z-index: 6; width: 11vmin; height: 13.5vmin; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; cursor: pointer;
  box-shadow: inset -1.2vmin -1.6vmin 0 rgba(0,0,0,.08), inset 1vmin 1vmin 0 rgba(255,255,255,.35); animation: float linear forwards; }
.balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: .3vmin; height: 7vmin; background: rgba(120,90,120,.45); }
.balloon::before { content: ''; position: absolute; left: calc(50% - 1vmin); top: calc(100% - .4vmin); border: 1vmin solid transparent; border-bottom-color: inherit; transform: rotate(180deg); }
@keyframes float { from { transform: translate(0, 0); } 50% { transform: translate(var(--sw, 3vmin), -60vh); } to { transform: translate(0, -125vh); } }
.balloon.popped { animation: popb .25s ease-out forwards; }
@keyframes popb { to { transform: scale(1.6); opacity: 0; } }
.popHint { font-size: 3.2vmin; color: #9B59B6; margin-top: 1.2vmin; }

/* story: flows by itself or waits for «التالي» — the teacher chooses on the intro screen (Asma, 2026-10-07) */
.mode { display: flex; align-items: center; gap: 1.4vmin; margin-top: 2.6vmin; font-size: 3vmin; color: #8E6A8A; z-index: 1; }
.mode button { font-family: 'Almarai', sans-serif; font-weight: 800; font-size: 3vmin; padding: 1vmin 2.6vmin; border-radius: 4vmin; border: .4vmin solid #FFD6EA;
  background: #fff; color: #8E3A7A; cursor: pointer; }
.mode button.on { background: var(--pinkB); color: #fff; border-color: var(--pinkB); box-shadow: 0 .6vmin 0 var(--pinkD); }

/* praise with her name */
.praise .pw { display: flex; flex-direction: column; align-items: center; animation: praise 1.3s ease-out forwards; }
.praise .pw span { animation: none; }
.praise .pw em { font-style: normal; font-family: 'Lalezar', sans-serif; font-size: 8vmin; color: #fff; -webkit-text-stroke: .4vmin var(--lilacD); margin-top: -2vmin; }
body.visual .praise .pw em { font-size: 9vmin; }
/* crown shelf on the name cards */
.name { height: 23vmin; }
.name .badge { width: 8.5vmin; height: 8.5vmin; font-size: 5vmin; }
.name .crowns { font-size: 2.6vmin; line-height: 1; color: #B07AA6; }
/* teacher button (long press) */
.teacher { position: fixed; left: 2vmin; bottom: 2vmin; z-index: 3; font-family: 'Almarai', sans-serif; font-weight: 800; font-size: 2.4vmin; color: #9B7A98;
  background: rgba(255,255,255,.7); border: .3vmin dashed #E8CFE0; border-radius: 3vmin; padding: 1vmin 2vmin; cursor: pointer; }
.teacher small { font-size: 1.9vmin; opacity: .8; }
.teacher.holding { background: #FFE0F0; transition: background 1.2s; }
/* certificate + report overlays */
.pill.cert { margin-top: 2vmin; background: #FFC93C; box-shadow: 0 1vmin 0 #E0A800; color: #6B4A00; }
.pill.gray { background: #C9B8C8; box-shadow: 0 1vmin 0 #A493A3; }
.overlay { position: fixed; top:0;right:0;bottom:0;left:0; z-index: 30; background: rgba(75,46,79,.45); display: grid; place-items: center; }
.overlay .obox { background: #fff; border-radius: 4vmin; padding: 3vmin; max-width: 94vw; max-height: 92vh; overflow: auto; box-shadow: 0 2vmin 6vmin rgba(75,46,79,.35); }
.certImg { display: block; width:var(--cpk2, min(86vw, 104vh)); border-radius: 2vmin; }
.cbtns { display: flex; gap: 2.4vmin; justify-content: center; margin-top: 2.4vmin; flex-wrap: wrap; }
.cbtns .pill { font-size: 3.6vmin; padding: 1.4vmin 4vmin; }
.report .obox { width:var(--cpk3, min(92vw, 1100px)); font-family: 'Almarai', sans-serif; color: var(--ink); }
.report h2 { font-family: 'Lalezar', sans-serif; font-weight: 400; color: var(--blue); font-size: 5vmin; margin: 0 0 2vmin; }
.report h3 { color: var(--coral); font-size: 3vmin; margin: 3vmin 0 1vmin; }
.report table { width: 100%; border-collapse: collapse; font-size: 2.6vmin; }
.report th, .report td { padding: 1.2vmin; border-bottom: .2vmin solid #F3DDEB; text-align: center; }
.report th { background: #FFF0F7; color: #8E3A7A; }
.report td.nm { font-family: 'Lalezar', sans-serif; font-size: 3.4vmin; color: #8E3A7A; }
.report ul { font-size: 2.4vmin; line-height: 1.9; padding-right:3vmin;padding-inline-start: 3vmin; margin: 0; }
.report .note { font-size: 2vmin; color: #9B7A98; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body.print-cert > *:not(.certWrap), body.print-report > *:not(.report) { display: none !important; }
  body.print-cert, body.print-report { background: #fff !important; }
  .overlay { position: static; background: none; display: block; }
  .overlay .obox { box-shadow: none; max-height: none; overflow: visible; padding: 0; }
  .certImg { width: 100%; }
  .cbtns { display: none !important; }
}

/* story progress dots */
.dots { display: flex; gap: 1.4vmin; margin-top: 1.4vmin; }
.dots i { width: 2.2vmin; height: 2.2vmin; border-radius: 50%; background: #F3DDEB; transition: all .3s; }
.dots i.done { background: #F7A8CF; }
.dots i.on { background: var(--coral); transform: scale(1.35); box-shadow: 0 0 0 .5vmin #FFE0F0; }
/* «لبّسي القطوة» on the end screen */
.dress { position: fixed; left: 2.5vmin; bottom: 3vmin; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.dress .dt { font-family: 'Lalezar', sans-serif; font-size: 3.6vmin; color: var(--blue); }
.dress img { height: 28vmin; }
.dress img.pop { animation: pop .5s ease-out; }
.dbtns { display: grid; grid-template-columns: repeat(2, 8vmin); gap: 1.2vmin; }
.dbtns button { width: 8vmin; height: 8vmin; border-radius: 50%; border: .5vmin solid #FFD6EA; background: #fff; font-size: 4.2vmin; box-shadow: var(--shadow); cursor: pointer; padding: 0; }
.dbtns button.on { border-color: var(--pinkB); background: #FFF0F7; transform: scale(1.1); }

/* =====================================================================================
   v3 «قلعة الأميرات» (2026-10-07: Asma found the v2 pink «مو حلو» and picked direction 2 of 3)
   AI art for everything decorative (castle background, gold crest, crown, prize icons, balloons); no emoji filler; calm centre
   ===================================================================================== */
html, body { background: #EADCF5 url('img/bg_castle.webp') center bottom / cover no-repeat; }
body::before { content: ''; position: fixed; top:0;right:0;bottom:0;left:0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 56% at 50% 44%, rgba(255,250,253,.62) 0%, rgba(255,250,253,.30) 55%, rgba(255,250,253,0) 82%); }
.cloud, .spark { display: none !important; }
h1 { color: #9C3D8F; text-shadow: 0 .5vmin 0 #fff, 0 0 2.6vmin rgba(255,255,255,.95), 0 0 1vmin #fff; }
.sub { color: #6B4778; text-shadow: 0 0 1.4vmin #fff, 0 0 .6vmin #fff; }
.title { color: #9C3D8F; text-shadow: 0 0 1.6vmin #fff, 0 0 .6vmin #fff; } .title small { color: #7A4C8E; }
.btn { border: .5vmin solid #EBC97A; background: rgba(255,255,255,.95); }
.name { background: rgba(255,255,255,.95); border: .6vmin solid #EBC97A; box-shadow: 0 0 0 .35vmin #fff inset, 0 1.2vmin 2.8vmin rgba(110,50,110,.22); }
.name .nm { color: #8E3A7A; }
/* the picture card: white mat + gold rim + the gold crest on top */
.pic { position: relative; border: .8vmin solid #fff; box-shadow: 0 0 0 .7vmin #E2B95C, 0 0 0 1.1vmin #FFF6DD, 0 1.4vmin 3vmin rgba(90,40,90,.25); }
.pic::before { content: ''; position: absolute; left: 50%; top: -5vmin; transform: translateX(-50%); width: 24vmin; height: 9vmin;
  background: url('img/crest.webp') center / contain no-repeat; pointer-events: none; filter: drop-shadow(0 .5vmin .6vmin rgba(150,100,0,.3)); }
.scene { background: linear-gradient(180deg, #FFFCFE 0%, #FFF6FB 68%, #F8E7F2 68%, #F1DCEB 100%); border: .8vmin solid #fff;
  box-shadow: 0 0 0 .6vmin #E2B95C, 0 1.2vmin 2.8vmin rgba(90,40,90,.22); }
/* glossy jewel buttons with gold rims */
.ynb { border: .6vmin solid #F3D58C; box-shadow: inset 0 1.2vmin 1.4vmin rgba(255,255,255,.5), inset 0 -1vmin 1.2vmin rgba(0,0,0,.08), 0 .9vmin 0 rgba(0,0,0,.14), 0 1.6vmin 2.6vmin rgba(90,40,90,.2); }
.ynb.yes { background: linear-gradient(180deg, #9BE7AE 0%, #57C783 55%, #3FAE6C 100%); }
.ynb.no { background: linear-gradient(180deg, #FFB9C9 0%, #FF86A5 55%, #EF6189 100%); }
.next, .pill { background: linear-gradient(180deg, #FF9CC4 0%, #F06AA5 60%, #E0559A 100%); border: .5vmin solid #F3D58C; box-shadow: inset 0 1vmin 1.2vmin rgba(255,255,255,.45), 0 .9vmin 0 #B8417E; }
.pill.home { background: linear-gradient(180deg, #CDB3F0 0%, #A684DB 60%, #8E66B8 100%); box-shadow: inset 0 1vmin 1.2vmin rgba(255,255,255,.4), 0 .9vmin 0 #6E4C99; }
.pill.cert { background: linear-gradient(180deg, #FFE7A3 0%, #FFCF4A 60%, #EDB321 100%); color: #6B4A00; box-shadow: inset 0 1vmin 1.2vmin rgba(255,255,255,.5), 0 .9vmin 0 #C28F10; }
.pill.gray { background: linear-gradient(180deg, #E4D8E3, #C9B8C8); box-shadow: 0 .9vmin 0 #A493A3; color: #5E4A5C; }
/* side column: gold capsule, AI crown on top, AI prize icons */
.stars { background: linear-gradient(180deg, rgba(255,247,252,.96), rgba(255,232,243,.96)); border: .6vmin solid #E2B95C; box-shadow: 0 0 0 .3vmin #fff inset, 0 1.2vmin 2.4vmin rgba(90,40,90,.2); }
.stars .crownTop { width: calc(var(--sz, 9vmin) * 1.4); height: auto; margin-bottom: .2vmin; filter: drop-shadow(0 .4vmin .5vmin rgba(150,100,0,.35)); }
img.prize { width: var(--sz, 9vmin); height: var(--sz, 9vmin); object-fit: contain; display: block; filter: grayscale(1) brightness(1.3) opacity(.32); transition: filter .35s; }
img.prize.got { filter: drop-shadow(0 .3vmin .4vmin rgba(160,60,120,.3)); animation: pop .6s ease-out; }
.fly img { width: 100%; height: 100%; object-fit: contain; }
.burst img, .heart img { width: 100%; height: 100%; object-fit: contain; display: block; }
.burst { width: 4.6vmin; height: 4.6vmin; } .heart { width: 6vmin; height: 6vmin; }
/* welcome */
.welcome { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.93) 0%, rgba(255,242,249,.86) 58%, rgba(240,228,255,.78) 100%); }
.welcome .hi { color: #9C3D8F; } .welcome .hi b { color: #E0559A; }
/* praise + retry */
.praise span { -webkit-text-stroke: .6vmin #C2418C; text-shadow: 0 1.2vmin 0 rgba(194,65,140,.25), 0 0 3vmin rgba(255,255,255,.9); }
.praise .pw em { -webkit-text-stroke: .4vmin #8E66B8; }
.retry { background: linear-gradient(180deg, #CDB3F0, #A684DB); border: .5vmin solid #F3D58C; box-shadow: 0 .9vmin 0 #6E4C99; }
/* story dots */
.dots i { background: rgba(255,255,255,.85); border: .3vmin solid #E2B95C; }
.dots i.done { background: #F3D58C; } .dots i.on { background: #E0559A; border-color: #E0559A; }
.mode button { border-color: #EBC97A; } .mode button.on { background: linear-gradient(180deg, #FF9CC4, #E0559A); border-color: #F3D58C; }
/* end: AI crown + her prizes + name ribbon */
.crownBig { width: 30vmin; }
.crownBig img.crownImg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.2vmin 1.6vmin rgba(194,140,0,.35)); }
.prizeRow { display: flex; gap: .6vmin; justify-content: center; margin: .6vmin 0 1.4vmin; }
.prizeRow img { width: 5.2vmin; height: 5.2vmin; object-fit: contain; filter: drop-shadow(0 .3vmin .4vmin rgba(160,60,120,.3)); }
.ribbon { background: linear-gradient(180deg, #FF9CC4 0%, #E0559A 100%); border: .5vmin solid #F3D58C; box-shadow: 0 1vmin 0 #B8417E, 0 1.6vmin 2.4vmin rgba(90,40,90,.2); }
.endtxt { color: #9C3D8F; text-shadow: 0 0 1.6vmin #fff, 0 0 .6vmin #fff; }
.date, .popHint { text-shadow: 0 0 1vmin #fff; }
/* balloons are AI art now (tinted per balloon) */
img.balloon { position: fixed; z-index: 6; width: 11vmin; height: auto; cursor: pointer; animation: float linear forwards; border-radius: 0; box-shadow: none; background: none; }
img.balloon::before, img.balloon::after { display: none; }
/* dress-up buttons show the kitten herself with each accessory */
.dbtns button { overflow: hidden; border-color: #EBC97A; background: #fff; }
.dbtns button img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; display: block; }
.dress .dt { color: #9C3D8F; text-shadow: 0 0 1.4vmin #fff, 0 0 .6vmin #fff; }
.teacher { border-color: #EBC97A; background: rgba(255,255,255,.82); }
.overlay .obox { border: .6vmin solid #E2B95C; }
.report th { background: #FFF4D9; color: #8E3A7A; }

/* grade 5 picture questions: the story picture steps aside, two big picture cards answer — ✓ نعم / ✕ لا */
.story.q .pic { display: none; }
.story.q .line { margin-top: 3vmin; font-size: 5.6vmin; }
.yn { gap: 5vmin; margin-top: 2.6vmin; }
.ynb.pc { width: 36vmin; height: 40vmin; flex-direction: column; justify-content: flex-start; gap: .6vmin; padding: 1.6vmin 1.6vmin 1vmin; position: relative; color: inherit; }
.ynb.pc.yes { background: linear-gradient(180deg, #FFFFFF 0%, #EEFAF1 100%); box-shadow: 0 0 0 .5vmin #8FD9A6 inset, 0 .9vmin 0 #4CC27A, 0 1.6vmin 2.6vmin rgba(90,40,90,.18); }
.ynb.pc.no { background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F3 100%); box-shadow: 0 0 0 .5vmin #FFB3C3 inset, 0 .9vmin 0 #EF6189, 0 1.6vmin 2.6vmin rgba(90,40,90,.18); }
.ynb.pc img { width: 100%; height: 28vmin; object-fit: contain; border-radius: 2.4vmin; background: #FFFDF8; pointer-events: none; }
.ynb.pc b { font-family: 'Lalezar', sans-serif; font-weight: 400; font-size: 6.4vmin; line-height: 1; }
.ynb.pc.yes b { color: #2E9E5B; } .ynb.pc.no b { color: #D9466F; }
.ynb.pc .mk { position: absolute; top: -2vmin; left:-2vmin;inset-inline-end: -2vmin; width: 10vmin; height: 10vmin; border-radius: 50%; display: grid; place-items: center; color: #fff;
  font-family: 'Almarai', sans-serif; font-weight: 800; font-size: 6.4vmin; border: .6vmin solid #fff; box-shadow: 0 .6vmin 1.4vmin rgba(0,0,0,.18); pointer-events: none; }
.ynb.pc.yes .mk { background: #3FAE6C; } .ynb.pc.no .mk { background: #E5395B; }
/* the big red ✕ across the picture on the «لا» card */
.ynb.pc.no::after { content: ''; position: absolute; left: 12%; right: 12%; top: 6%; height: 66%; pointer-events: none;
  background: linear-gradient(45deg, transparent 46%, rgba(229,57,91,.92) 46%, rgba(229,57,91,.92) 54%, transparent 54%),
              linear-gradient(-45deg, transparent 46%, rgba(229,57,91,.92) 46%, rgba(229,57,91,.92) 54%, transparent 54%); }
.ynb.pc.no img { filter: saturate(.75) brightness(.97); }