@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; inset: 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: 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; inset: 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; inset: 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; }