@font-face { font-family: Lalezar; src: url(assets/fonts/Lalezar-Regular.ttf); }
@font-face { font-family: Almarai; font-weight: 800; src: url(assets/fonts/Almarai-ExtraBold.ttf); }
@font-face { font-family: Almarai; font-weight: 700; src: url(assets/fonts/Almarai-Bold.ttf); }
@font-face { font-family: Amiri; font-weight: 700; src: url(assets/fonts/Amiri-Bold.ttf); }
:root { --plum: #0E6B3A; /* Saudi green + gold (Asma: «يصير اخضر بما انه سعودي») */ --gold: #AF854C; --ink: #283450; --pink: #E95478; --cream: #fffaf2; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1d1430; }
body { font-family: Almarai, sans-serif; font-weight: 800; color: var(--ink); user-select: none; -webkit-user-select: none; }
#stage { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #cfeaf7; }
.screen { position: absolute; inset: 0; }
[hidden] { display: none !important; }
img { -webkit-user-drag: none; user-drag: none; }   /* no native image drag (it cancelled the pano drag) */
.btn { font: 50px/1.1 Lalezar; color: #fff; border: 0; border-radius: 999px; padding: 18px 54px 26px; cursor: pointer;
  background: linear-gradient(180deg, #23a05c, var(--plum)); box-shadow: 0 8px 0 #07432a, 0 16px 30px rgba(0,0,0,.25); }
.btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #07432a; }
.btn.big { font-size: 66px; padding: 22px 80px 32px; }
.btn.sm { font-size: 36px; padding: 10px 34px 16px; }
.chip { position: absolute; font: 800 32px/1 Almarai; padding: 16px 30px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--plum);
  border: 4px solid var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,.18); cursor: pointer; z-index: 6; }
.chip b { color: var(--pink); margin-inline-start: 8px; }
.logo { position: absolute; left: 26px; bottom: 22px; width: 118px; height: 118px; border-radius: 50%; z-index: 5; filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
.tools { position: absolute; top: 26px; left: 26px; display: flex; gap: 14px; z-index: 40; }
.tool { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--gold); background: rgba(255,255,255,.95); font: 38px/1 Almarai; cursor: pointer; }
/* hoopoe guide + speech bubble */
.guide { position: absolute; right: 30px; bottom: 20px; width: 300px; z-index: 7; pointer-events: none; }
.guide img { width: 300px; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(0,0,0,.25)); }
.guide .bubble { position: absolute; bottom: 300px; right: 120px; width: max-content; max-width: 760px; padding: 18px 30px 22px; border-radius: 30px; background: #fff;
  border: 4px solid var(--gold); font: 800 34px/1.45 Almarai; color: var(--plum); box-shadow: 0 10px 24px rgba(0,0,0,.2); opacity: 0; transform: scale(.7); transition: .25s; }
.guide .bubble.on { opacity: 1; transform: scale(1); }
#guideCity .bubble { bottom: 150px; right: 300px; }
#guideGame .bubble { display: none; }   /* the title card already says it; the bubble covered the basket */   /* beside the hoopoe, so it never hides a hotspot */
.guide.talk img { animation: bob 2.4s ease-in-out infinite, talk .32s ease-in-out infinite alternate; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes talk { from { rotate: -2deg; } to { rotate: 3deg; } }
/* home */
.home-bg { position: absolute; inset: -20px; background: url(assets/img/taif_pano_nocab.webp) center/cover; filter: blur(4px) brightness(.85); }
.home-card { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1300px; padding: 40px 60px 50px; border-radius: 60px; background: rgba(255,250,242,.94);
  border: 8px solid var(--gold); text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.home-card h1 { font: 150px/1 Lalezar; color: var(--plum); }
.home-sub { font-size: 38px; color: var(--pink); margin: 10px 0 24px; }
.greet-frame { position: relative; width: 800px; height: 450px; margin: 0 auto 30px; border-radius: 36px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 14px 30px rgba(0,0,0,.25); background: #9fd3ef; }
.greet-frame video { width: 100%; height: 100%; object-fit: cover; }
.greet-poster { position: absolute; inset: 0; display: grid; place-items: center; background: url(assets/img/taif_pano_nocab.webp) center/cover; }
.greet-poster img { width: 330px; animation: bob 2.4s ease-in-out infinite; }
/* map */
.map-base { position: absolute; inset: 0; width: 1920px; height: 1080px; }
#route { position: absolute; inset: 0; width: 1920px; height: 1080px; pointer-events: none; }
.map-title { position: absolute; top: 24px; left: 50%; translate: -50% 0; font: 90px/1.1 Lalezar; color: var(--plum); padding: 6px 60px 16px; border-radius: 50px;
  background: rgba(255,255,255,.9); border: 6px solid var(--gold); z-index: 5; }
.chip.pass { top: 34px; right: 36px; }
.portal { position: absolute; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; border: 10px solid var(--c); background: #fff center/cover; cursor: pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.28); z-index: 4; transition: transform .2s; }
.portal:hover { transform: scale(1.06); }
.portal.ready { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 0 0 rgba(255,220,120,.0); } 50% { box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 0 18px rgba(255,220,120,.55); } }
.portal .name { position: absolute; left: 50%; bottom: -46px; translate: -50% 0; font: 40px/1 Lalezar; color: #fff; background: var(--c); padding: 4px 26px 12px; border-radius: 999px; white-space: nowrap; }
.portal.locked::after { content: "قريبًا"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(40,30,60,.45); color: #fff; font: 800 30px/1 Almarai; }
.portal .done { position: absolute; top: -18px; left: -18px; width: 74px; height: 74px; border-radius: 50%; background: #2fb36a; color: #fff; font: 44px/74px Almarai; text-align: center; border: 5px solid #fff; }
.pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--c); border: 5px solid #fff; z-index: 3; }
#plane { position: absolute; left: 0; top: 0; width: 170px; margin: -50px 0 0 -85px; z-index: 6; pointer-events: none; filter: drop-shadow(0 12px 12px rgba(0,0,0,.25)); }
/* city */
#pano { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; touch-action: none; cursor: grab; }
#panoImg { position: absolute; inset: 0; width: 1920px; height: 1080px; object-fit: cover; }
#fog { position: absolute; inset: 0; pointer-events: none; background: url(assets/img/fog.webp) 0 0 / 2048px 1080px repeat-x; opacity: .55; animation: fogDrift 90s linear infinite; }   /* Abha: drifting fog */
@keyframes fogDrift { to { background-position: -2048px 0; } }
#cabin { position: absolute; left: 0; top: 0; width: 150px; margin: -18px 0 0 -75px; z-index: 2; pointer-events: none; transform-origin: 50% 0; filter: drop-shadow(0 10px 10px rgba(0,0,0,.25)); }
.city-title { position: absolute; top: 26px; left: 50%; translate: -50% 0; font: 64px/1.2 Lalezar; color: var(--plum); padding: 6px 54px 14px; border-radius: 50px; background: rgba(255,255,255,.94); border: 5px solid var(--gold); z-index: 6; white-space: nowrap; }
.chip.back { top: 140px; left: 36px; }
.chip.found { top: 36px; right: 36px; cursor: default; }
.chip.tilt { top: 140px; right: 36px; }
.btn.next { position: absolute; bottom: 40px; left: 50%; translate: -50% 0; z-index: 8; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
.spot { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(255,255,255,.95); border: 7px solid #ffc83c; cursor: pointer; z-index: 3;
  display: grid; place-items: center; font: 54px/1 Lalezar; color: var(--pink); animation: spotGlow 1.5s ease-in-out infinite; }
.spot.seen { border-color: #2fb36a; color: #2fb36a; animation: none; }
@keyframes spotGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,220,100,.0), 0 8px 18px rgba(0,0,0,.25); } 50% { box-shadow: 0 0 0 22px rgba(255,220,100,.5), 0 8px 18px rgba(0,0,0,.25); } }
.spot .lbl { position: absolute; bottom: 96px; left: 50%; translate: -50% 0; white-space: nowrap; font: 800 30px/1 Almarai; color: var(--ink); background: rgba(255,255,255,.95); padding: 12px 22px; border-radius: 999px; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.word { position: absolute; translate: -50% -50%; white-space: nowrap; font: 700 44px/1.75 Amiri; color: var(--pink); padding: 0 26px 6px; border-radius: 24px; background: rgba(255,248,220,.92); border: 3px dashed #ffc83c; cursor: pointer; z-index: 3; opacity: .92; animation: twinkle 2.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,80,0); } 50% { box-shadow: 0 0 22px 6px rgba(255,210,80,.55); } }   /* one line: wrapped Amiri lines made the vowel marks collide (Asma msg 1904) */
.word.got { opacity: 1; background: #2fb36a; color: #fff; border: 3px solid #fff; transition: .4s; scale: 1.15; animation: none; }
/* market */
.game-bg { position: absolute; inset: -20px; background: url(assets/img/taif_pano_nocab.webp) center/cover; filter: blur(6px) brightness(.9) saturate(1.1); }
.game-head { position: absolute; top: 30px; left: 50%; translate: -50% 0; text-align: center; padding: 14px 60px 22px; border-radius: 44px; background: rgba(255,255,255,.94); border: 6px solid var(--gold); z-index: 3; }
.game-head h2 { font: 76px/1.1 Lalezar; color: var(--plum); }
.game-head p { font-size: 34px; color: var(--ink); margin-top: 6px; }
.fruit { position: absolute; width: 210px; height: 230px; margin: -115px 0 0 -105px; border-radius: 34px; background: rgba(255,255,255,.95); border: 5px solid #e8dcc6; text-align: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.18); cursor: grab; touch-action: none; z-index: 4; transition: box-shadow .2s; }
.fruit img { width: 150px; height: 150px; object-fit: contain; margin-top: 12px; pointer-events: none; }
.fruit span { display: block; font: 800 30px/1.2 Almarai; color: var(--ink); margin-top: 4px; pointer-events: none; }
.fruit.drag { cursor: grabbing; z-index: 9; box-shadow: 0 20px 40px rgba(0,0,0,.3); transition: none; }
.fruit.bad { animation: shake .5s; border-color: #e2463f; }
.fruit.in { opacity: 0; transition: .35s; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -18px 0; } 40% { translate: 16px 0; } 60% { translate: -10px 0; } 80% { translate: 6px 0; } }
#basketWrap { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; width: 420px; text-align: center; z-index: 3; }
#basket { width: 400px; filter: drop-shadow(0 16px 20px rgba(0,0,0,.3)); }
#basket.happy { animation: pulse .5s; }
#basketCount { position: absolute; top: -40px; left: 50%; translate: -50% 0; font: 44px/1 Lalezar; color: #fff; background: #2fb36a; padding: 6px 28px 12px; border-radius: 999px; border: 4px solid #fff; }
/* overlays */
#portalFx { position: absolute; inset: 0; z-index: 30; background: center/cover; pointer-events: none; }
.overlay { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(30,20,50,.45); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.card { position: relative; width: 1240px; padding: 46px 70px 50px; border-radius: 50px; background: var(--cream); border: 8px solid var(--gold); text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.35); animation: pop .35s cubic-bezier(.2,1.5,.4,1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.card h3 { font: 66px/1.2 Lalezar; color: var(--pink); margin-bottom: 18px; }
.card p { font: 700 62px/1.7 Amiri; color: var(--ink); margin-bottom: 26px; }
.card p mark { background: #fff1b8; color: var(--plum); border-radius: 12px; padding: 0 8px; }
.x { position: absolute; top: 18px; left: 22px; width: 70px; height: 70px; border-radius: 50%; border: 0; background: #eee; font: 38px/1 Almarai; cursor: pointer; }
/* real photo of the place inside the hotspot card (Asma, msgs 1916–1920: «اذا ضغط يطلع المعلم الحقيقي») */
.card-body { display: flex; align-items: center; gap: 46px; }
.card-text { flex: 1; min-width: 0; }
.card.with-photo { width: 1680px; padding: 70px 54px 44px; }
.card.with-photo p { font-size: 54px; }
.card.with-photo .x { top: 12px; left: 12px; width: 60px; height: 60px; font-size: 32px; }   /* inside the corner: outside it covered «رجوع للخريطة» */
.photo-big .x, .credits .x { top: -34px; left: -34px; background: #fff; border: 6px solid var(--gold); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.real { flex: 0 0 640px; text-align: center; }
.real-frame { position: relative; width: 640px; height: 480px; border-radius: 30px; overflow: hidden; border: 8px solid #fff; background: #d9d4c7; box-shadow: 0 14px 30px rgba(0,0,0,.28); rotate: -1.5deg; cursor: zoom-in; }
.real-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.real-badge { position: absolute; top: 16px; right: 16px; font: 800 28px/1 Almarai; color: #fff; background: rgba(14,107,58,.93); padding: 10px 18px 13px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.real-zoom { position: absolute; bottom: 14px; left: 14px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.93); font-size: 30px; }
.real figcaption { font: 800 32px/1.3 Almarai; color: var(--plum); margin-top: 20px; }
.real small, .photo-big small { display: block; font: 700 20px/1.4 Almarai; color: #8a8f9c; margin-top: 6px; }
.overlay.dark { z-index: 28; background: rgba(12,10,24,.9); }
.photo-big { position: relative; text-align: center; }
.photo-big img { display: block; max-width: 1700px; max-height: 840px; margin: 0 auto; border-radius: 24px; border: 8px solid #fff; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.photo-big figcaption { font: 800 42px/1.3 Almarai; color: #fff; margin-top: 20px; }
.photo-big small { color: #c9cbd6; font-size: 24px; }
.credits-btn { left: auto; right: 34px; bottom: 34px; font-size: 26px; padding: 12px 24px; }
.credits { position: relative; width: 1560px; padding: 40px 60px 36px; border-radius: 40px; background: var(--cream); border: 8px solid var(--gold); }
.credits h3 { font: 60px/1.2 Lalezar; color: var(--plum); text-align: center; margin-bottom: 24px; }
#creditsList { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 34px; max-height: 700px; overflow: auto; }
#creditsList li { display: flex; gap: 18px; align-items: center; font: 700 21px/1.45 Almarai; color: var(--ink); }
#creditsList img { width: 128px; height: 96px; flex: none; object-fit: cover; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
#creditsList b { display: block; font: 800 26px/1.3 Almarai; color: var(--plum); }
#creditsList a { display: block; color: #2a6db0; font-size: 19px; margin-top: 2px; }
.credits-note { font: 700 22px/1.5 Almarai; color: #6b7080; margin-top: 22px; text-align: center; }
.stamp-box { text-align: center; }
.stamp { width: 460px; height: 460px; margin: 0 auto 26px; border-radius: 50%; border: 16px double var(--c); background: #fff center/62% no-repeat; position: relative; animation: stampIn .7s cubic-bezier(.3,1.6,.5,1);
  box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.stamp::after { content: attr(data-name); position: absolute; left: 50%; bottom: -46px; translate: -50% 0; font: 56px/1 Lalezar; color: #fff; background: var(--c); padding: 4px 34px 14px; border-radius: 999px; border: 5px solid #fff; }
@keyframes stampIn { from { transform: scale(2.4) rotate(-25deg); opacity: 0; } 70% { transform: scale(.95) rotate(4deg); opacity: 1; } to { transform: scale(1) rotate(-6deg); } }
.stamp-text { font: 60px/1.2 Lalezar; color: #fff; margin: 70px 0 30px; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.pass-book { position: relative; width: 1400px; padding: 40px 60px 60px; border-radius: 40px; background: #fffdf7; border: 14px solid var(--plum); outline: 4px solid var(--gold); outline-offset: -22px; text-align: center; }
.pass-book h3 { font: 70px/1.2 Lalezar; color: var(--plum); margin-bottom: 30px; }
#passSlots { display: flex; justify-content: center; gap: 30px; }
.slot { width: 220px; height: 220px; border-radius: 50%; border: 6px dashed #d8c9a8; display: grid; place-items: center; font: 34px/1 Lalezar; color: #b9a98a; background: #fff center/70% no-repeat; position: relative; }
.slot.got { border: 10px double var(--c); color: var(--c); rotate: -8deg; }
.slot.got span { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; background: #fff; padding: 2px 12px 8px; border-radius: 12px; }
#puzzle { position: absolute; left: 50%; top: 560px; translate: -50% -50%; width: 744px; height: 744px; display: grid; direction: ltr;   /* LTR: slot 0 = the picture's top-left (RTL flipped the solved picture, msg 1922) */ grid-template-columns: repeat(3, 240px); gap: 12px; padding: 0; z-index: 4; }
.tile { width: 240px; height: 240px; border-radius: 18px; background-size: 720px 720px; border: 5px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25); cursor: pointer; transition: transform .15s, outline .15s; }
.tile.sel { outline: 8px solid #ffc83c; transform: scale(1.04); }
.tile.ok { border-color: #2fb36a; }
#puzzle.solved .tile { border-color: #2fb36a; }
#puzzleRef { position: absolute; left: 70px; top: 360px; width: 300px; height: 300px; border-radius: 24px; background: center/cover; border: 8px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.25); z-index: 4; }
#puzzleRef::after { content: "الصورة كاملة"; position: absolute; left: 50%; bottom: -54px; translate: -50% 0; font: 800 28px/1 Almarai; color: var(--plum); background: #fff; padding: 10px 22px; border-radius: 999px; white-space: nowrap; }
#confetti { position: absolute; inset: 0; pointer-events: none; z-index: 35; }