:root{
  --green:#00732f; --red:#ff0000; --black:#000; --white:#fff;
  --ink:#16324f; --gold:#f2b632;
  --fh:clamp(58px, min(25vw, 15dvh), 118px);   /* flag height; width = 2x */
  --p:0;                                         /* rise progress 0..1, set by script */
  --font:"Tajawal","Geeza Pro","SF Arabic","Segoe UI",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{overflow-x:clip}
body{font-family:var(--font);color:var(--ink);background:linear-gradient(180deg,#4fb3ea 0%,#9bd8f5 55%,#d6f0fb 100%) fixed;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}

.card{
  min-height:100dvh; width:100%; max-width:760px; margin:0 auto;
  padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  display:grid; grid-template-rows:auto 1fr auto auto; gap:8px;
  position:relative; overflow-x:visible; overflow-y:clip;
}

/* ---- text ---- */
.head{text-align:center}
.title{margin:4px 0 2px;font-weight:800;font-size:clamp(25px,7.6vw,40px);line-height:1.35;
  color:#fff;text-shadow:0 2px 0 var(--green),0 4px 0 rgba(0,0,0,.18);transform:rotate(-1.2deg)}
.date{margin:0;font-weight:800;font-size:clamp(16px,4.6vw,22px);color:var(--ink)}
.from{margin:6px 0 0;font-weight:500;font-size:14px;color:var(--ink);opacity:.85}
.foot{text-align:center;font:500 11px/1 system-ui,sans-serif;letter-spacing:.12em;color:var(--ink);opacity:.55;padding:2px 0}

/* ---- stage ---- */
.stage{position:relative;min-height:230px;direction:ltr}
.pole{position:absolute;z-index:2;left:calc(50% - var(--fh));bottom:30px;top:14px;width:7px;border-radius:4px;
  background:linear-gradient(90deg,#9aa4ad,#f4f6f8 45%,#7d8791);box-shadow:1px 0 0 rgba(0,0,0,.15)}
.ball{position:absolute;top:-10px;left:50%;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3b8,var(--gold) 55%,#b9851a)}
.flag{position:absolute;left:100%;width:calc(var(--fh)*2);height:var(--fh);
  bottom:calc(var(--p)*(100% - var(--fh) - 12px) + 4px);
  will-change:bottom}
.cloth{position:relative;width:100%;height:100%;display:grid;
  grid-template-columns:25% 1fr;grid-template-rows:1fr 1fr 1fr;transform-origin:0 50%;
  box-shadow:0 2px 6px rgba(0,0,0,.25)}
.cloth i{display:block}
.red  {grid-column:1;grid-row:1/4;background:var(--red)}
.green{grid-column:2;grid-row:1;background:var(--green)}
.white{grid-column:2;grid-row:2;background:var(--white)}
.black{grid-column:2;grid-row:3;background:var(--black)}
.shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.14),rgba(255,255,255,.12) 22%,rgba(0,0,0,.10) 48%,rgba(255,255,255,.12) 74%,rgba(0,0,0,.12));
  background-size:200% 100%}
.flag.waving .cloth{animation:wave 3.2s ease-in-out infinite}
.flag.waving .shade{animation:shade 3.2s linear infinite}
@keyframes wave{
  0%,100%{transform:perspective(500px) rotateY(0) skewY(0)}
  25%{transform:perspective(500px) rotateY(-9deg) skewY(1.6deg)}
  75%{transform:perspective(500px) rotateY(7deg) skewY(-1.6deg)}}
@keyframes shade{from{background-position:0 0}to{background-position:-200% 0}}

.hill{position:absolute;left:50%;width:170vw;margin-left:-85vw;bottom:-62px;height:92px;z-index:1;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0,#4bb36a,#2e9a52)}
.cloud{position:absolute;height:26px;border-radius:30px;background:rgba(255,255,255,.9);animation:drift 40s linear infinite alternate}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:34px;height:34px;left:14px;top:-16px}
.cloud::after{width:24px;height:24px;left:44px;top:-10px}
.c1{width:82px;top:12%;left:52%}
.c2{width:64px;top:38%;left:68%;animation-duration:55s;opacity:.85}
.c3{width:70px;top:60%;left:8%;animation-duration:48s;opacity:.8}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(26px)}}

/* ---- buttons ---- */
.action{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
button{font-family:var(--font);cursor:pointer;border:0;color:#fff;touch-action:manipulation}
.go,.again{width:min(100%,360px);min-height:68px;padding:10px 18px;border-radius:22px;
  background:var(--green);box-shadow:0 5px 0 #00501f,0 8px 14px rgba(0,0,0,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.go:active,.again:active{transform:translateY(3px);box-shadow:0 2px 0 #00501f}
.go .ar,.again .ar{font-size:clamp(21px,6.2vw,28px);font-weight:800}
.go .en,.again .en{font:500 13px/1.2 system-ui,sans-serif;opacity:.92}
.go:focus-visible,.again:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.go[disabled]{opacity:.55;pointer-events:none}
[hidden]{display:none!important}
.note{margin:8px 0 0;font-weight:800;font-size:15px;color:#7a1c1c;background:rgba(255,255,255,.75);padding:4px 12px;border-radius:12px}

/* ---- landscape / short screens: two columns ---- */
@media (orientation:landscape) and (max-height:520px){
  .card{max-width:none;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;column-gap:18px}
  .stage{grid-column:1;grid-row:1/3;min-height:0}
  .head{grid-column:2;grid-row:1;align-self:end}
  .action{grid-column:2;grid-row:2;align-self:start}
  .foot{display:none}
  .title{font-size:clamp(22px,4.6vw,34px)}
  .go,.again{min-height:56px}
  :root{--fh:clamp(48px,min(15vw,24dvh),96px)}
  .card::after{content:"iGoo Lab";position:absolute;bottom:4px;inset-inline-start:12px;font:500 10px system-ui;letter-spacing:.12em;opacity:.5}
}
@media (min-width:700px) and (orientation:portrait){ :root{--fh:clamp(80px,14dvh,130px)} }

@media (prefers-reduced-motion:reduce){
  .cloud{animation:none}
  .flag.waving .cloth,.flag.waving .shade{animation:none}
  .go:active,.again:active{transform:none}
}

.foot a{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px}