:root{
  --ink:#3A2A4F; --ink2:#4E3F63; --purple:#5E4478; --lilac:#8C6FA5;
  --orange:#EA7D43; --yellow:#F5BA4D; --blue:#2AABD5; --green:#98AF56; --cream:#FBF6E6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--cream);overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#game{width:1280px;height:800px;flex:none;position:relative;overflow:hidden;background:var(--cream);
  font-family:'Tajawal','Segoe UI',sans-serif;color:var(--ink);padding:16px 24px;display:flex;flex-direction:column;gap:16px;
  transform-origin:center center}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.pattern{background-color:#F4EBC8;background-image:
  radial-gradient(circle at 20px 20px,#EA7D43 7px,transparent 8px),
  radial-gradient(circle at 70px 50px,#2AABD5 10px,transparent 11px),
  radial-gradient(circle at 40px 90px,#8C6FA5 8px,transparent 9px),
  radial-gradient(circle at 100px 100px,#98AF56 6px,transparent 7px),
  radial-gradient(circle at 105px 15px,#F5BA4D 9px,transparent 10px);
  background-size:120px 120px}

/* buttons */
.btn{cursor:pointer;border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn:focus-visible,.card:focus-visible,.charbtn:focus-visible{outline:4px solid var(--blue);outline-offset:4px}
.btn.icon{width:60px;height:60px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0;border-width:3px}
.btn.icon svg{width:30px;height:30px}
.btn.icon.lg{width:88px;height:88px;border-radius:28px;border-width:4px}
.btn.icon.lg svg{width:42px;height:42px}
.btn.blue{background:var(--blue)} .btn.white{background:#fff}
.btn.pill{height:88px;border-radius:999px;padding:0 40px;font-size:34px;font-weight:900;display:flex;align-items:center;gap:14px}
.btn.pill svg{width:34px;height:34px}
.btn.purple{background:var(--purple);color:#fff}
.btn.orange{background:var(--orange);color:#2A1E38}
.btn.xl{height:96px;font-size:44px;padding:0 56px}
.btn.xl svg{width:40px;height:40px}

/* top bar */
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{height:56px;width:auto}
.stars{display:flex;gap:6px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:8px 18px}
.stars svg{width:36px;height:36px}
.stars .on{animation:starpop .6s cubic-bezier(.3,1.6,.5,1) both}
.tools{display:flex;gap:12px}

/* stage */
.stage{height:440px;position:relative;border:4px solid var(--ink);border-radius:44px;box-shadow:0 10px 0 var(--ink);
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background:#fff;transition:box-shadow .2s}
.stage.over{box-shadow:0 0 0 8px var(--yellow),0 10px 0 var(--ink)}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.prompt{position:absolute;top:22px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none}
.bubble{background:#fff;border:4px solid var(--ink);border-radius:32px;padding:10px 28px;font-size:40px;font-weight:900;box-shadow:0 6px 0 var(--lilac)}
.feedback{border-radius:999px;padding:8px 24px;font-size:28px;font-weight:900}
.feedback.good{background:var(--green);color:#1F2A10}
.feedback.try{background:var(--yellow);color:var(--ink);font-size:26px;font-weight:800}
.action{position:absolute;left:150px;top:120px;width:160px;height:160px;background:#fff;border:4px solid var(--ink);border-radius:50%;
  padding:18px;box-shadow:0 6px 0 var(--ink);z-index:2;animation:pop .7s cubic-bezier(.3,1.5,.5,1) .5s both}
.charwrap{position:relative;margin-bottom:28px;transition:transform 1s cubic-bezier(.3,1.3,.5,1);z-index:1}
.charwrap.go{transform:translateX(-200px)}
.charbtn{background:none;border:0;padding:0;cursor:pointer;display:block}
.charbtn img{display:block;width:auto}
.hop{animation:hop .5s ease-in-out 1s 4}
.wiggle{animation:wiggle .5s ease}

/* cards */
.bottom{height:220px;display:flex;align-items:center;justify-content:center}
.cards{display:flex;gap:32px;justify-content:center}
.card{width:240px;height:204px;background:#fff;border:4px solid var(--ink);border-radius:36px;box-shadow:0 8px 0 var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px;cursor:grab;touch-action:none;
  transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 14px 0 var(--ink)}
.card img{width:132px;height:132px;pointer-events:none}
.card span{font-size:34px;font-weight:900;line-height:1.1}
.card.dragging{transition:none;cursor:grabbing;z-index:50;position:relative;box-shadow:0 18px 0 var(--ink)}
.card.shake{animation:shake .55s ease}
.sentence-row{display:flex;align-items:center;gap:32px}
.sentence{display:flex;flex-direction:column;gap:4px}
.sentence .say{font-size:22px;font-weight:800;color:var(--purple)}
.sentence .big{font-size:72px;font-weight:900;line-height:1.1}
.sentence .who{color:var(--purple)} .sentence .verb{color:#C2571F}

/* overlays */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:20}
.panel{position:relative;background:#fff;border:5px solid var(--ink);border-radius:56px;box-shadow:14px 14px 0 var(--ink);
  padding:44px 72px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.panel h1{margin:0;font-size:80px;line-height:1.1;font-weight:900}
.panel h2{margin:0;font-size:104px;line-height:1;font-weight:900;color:var(--purple)}
.panel p{margin:0;font-size:28px;font-weight:700;color:var(--ink2)}
.mascot{width:170px;height:auto}
.family{display:flex;gap:14px;align-items:flex-end;margin:4px 0 8px}
.family .adult{height:120px} .family .kid{height:96px}
.pop-star{width:150px;height:150px;animation:starpop .6s cubic-bezier(.3,1.6,.5,1) both}
#confetti span{position:absolute;top:-40px;width:18px;height:18px;border-radius:5px;animation:fall 3.2s linear infinite}

/* animations */
.rise{animation:rise .5s ease both}
.float{animation:float 2.4s ease-in-out infinite}
@keyframes rise{0%{transform:translateY(30px);opacity:0}100%{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(0) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px) rotate(-3deg)}40%{transform:translateX(12px) rotate(3deg)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}
@keyframes starpop{0%{transform:scale(.2) rotate(-90deg)}100%{transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(880px) rotate(620deg)}}
/* portrait (phones held upright) */
#game.portrait{width:720px;height:1280px;padding:20px 24px}
.portrait .topbar{gap:12px}
.portrait .logo{height:44px}
.portrait .stars{padding:6px 12px;gap:3px}
.portrait .stars svg{width:28px;height:28px}
.portrait .btn.icon{width:56px;height:56px}
.portrait .stage{height:640px}
.portrait .scene{object-position:12% 50%}
.portrait .charwrap.go{transform:translateX(-110px)}
.portrait .action{left:24px;top:150px;width:130px;height:130px;padding:14px}
.portrait .bubble{font-size:38px}
.portrait .bottom{height:auto;flex:1}
.portrait .cards{gap:18px}
.portrait .card{width:212px;height:250px}
.portrait .card img{width:150px;height:150px}
.portrait .card span{font-size:38px}
.portrait .sentence-row{flex-wrap:wrap;justify-content:center;gap:24px 28px}
.portrait .sentence{align-items:center;width:100%}
.portrait .sentence .big{font-size:84px}
.portrait .panel{margin:0 24px;padding:40px 36px}
.portrait .panel h1{font-size:76px}
.portrait .panel p{font-size:26px}
.portrait .mascot{width:190px}
.portrait .family .adult{height:150px} .portrait .family .kid{height:120px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}