/* GameFlick Edu — shared game styles v3, mobile-first. Palette from CSS vars set by the engine. */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
html,body { height:100%; overflow:hidden; font-family:'Baloo 2','Comic Sans MS','Chalkboard SE',sans-serif; }
body { background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%); display:flex; align-items:center; justify-content:center; }
/* svh (smallest visible viewport) — the layout can never extend under browser
   chrome or system bars, so the bottom answer row is never clipped (Nafis: half button) */
@supports (height:100svh) { body { height:100svh; } }
#stage { width:100%; height:100%; position:relative; display:flex; flex-direction:column;
  padding:10px 10px calc(12px + env(safe-area-inset-bottom,0px)); }
#hud, #banner, #answers { flex-shrink:0; }
/* phone-frame on wide screens only — the game itself is designed for mobile */
@media (min-width:600px) and (min-height:700px) {
  #stage { max-width:440px; max-height:820px; border-radius:34px; box-shadow:0 18px 50px rgba(0,0,0,.30);
    background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%); overflow:hidden; }
  body { background:#1b2430; }
}

#hud { display:flex; align-items:center; justify-content:space-between; gap:6px; z-index:2; }
.badge { background:#ffffffcc; border-radius:999px; padding:6px 13px; font-size:16px; font-weight:700; color:var(--ink); box-shadow:0 3px 0 #00000018; white-space:nowrap; }
.badge.tap { border:none; font-family:inherit; cursor:pointer; }
.badge.tap:active { transform:scale(.92); }
#dots { display:flex; gap:6px; align-items:center; }
.dot { width:12px; height:12px; border-radius:50%; background:#00000022; display:inline-block; }
.dot.on { background:var(--acc); box-shadow:0 0 0 3px #ffffff88; }

#banner { text-align:center; margin:6px 0 2px; z-index:2; }
#banner h1 { font-size:clamp(19px,5.5vw,26px); color:var(--ink); text-shadow:0 2px 0 #ffffff88; }
#banner h1 b { color:#d62828; }
#banner h1 .sil { font-size:clamp(54px,15vw,90px); line-height:1.15; display:inline-block; filter:brightness(0) opacity(.85); vertical-align:middle; }
#banner h1 .sil.reveal { filter:none; animation:cheer .5s ease; }

#zone { flex:1; min-height:0; z-index:1; }
#zone.z-scatter { position:relative; }
#zone.z-center { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:6px; }
#zone.z-grid { display:grid; gap:8px; align-content:center; justify-content:center; padding:6px 0; }

.scat { position:absolute; cursor:pointer; animation:bob 3s ease-in-out infinite; }
.scat.still { cursor:default; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(4deg)} }
.scat:active { animation:none; transform:scale(.9); }
.scat.pop { animation:zpop .26s ease forwards; pointer-events:none; }
@keyframes zpop { 40%{transform:scale(1.35)} 100%{transform:scale(0);opacity:0} }
.scat.nope { animation:zshake .35s ease; }
@keyframes zshake { 25%,75%{transform:translateX(-7px)} 50%{transform:translateX(7px)} }

.emo { font-size:clamp(34px,10vw,52px); line-height:1; filter:drop-shadow(0 4px 3px rgba(0,0,0,.18)); }
.bub { width:clamp(56px,15vw,80px); height:clamp(56px,15vw,80px); display:flex; align-items:center; justify-content:center;
  font-size:clamp(24px,7vw,36px); font-weight:800; color:#fff; border-radius:50%;
  box-shadow:inset -6px -8px 0 rgba(0,0,0,.13), 0 4px 6px rgba(0,0,0,.15); }
.sqr { width:clamp(56px,15vw,80px); height:clamp(56px,15vw,80px); display:flex; align-items:center; justify-content:center;
  font-size:clamp(28px,8vw,42px); font-weight:800; color:#fff; border-radius:20px;
  box-shadow:0 5px 0 rgba(0,0,0,.18), inset 0 -5px 0 rgba(0,0,0,.1); }
.blob { width:clamp(60px,16vw,84px); height:clamp(60px,16vw,84px); border-radius:46% 54% 52% 48% / 52% 46% 54% 48%;
  box-shadow:inset -7px -9px 0 rgba(0,0,0,.14), 0 4px 6px rgba(0,0,0,.15); position:relative; }
.blob::after { content:""; position:absolute; top:16%; left:20%; width:22%; height:16%; background:#ffffff66; border-radius:50%; }
/* .blob sets position:relative (above) so its own ::after highlight positions correctly when
   used standalone (e.g. Color Mixing Lab). But .scat needs position:absolute for scatter()'s
   JS placement — same specificity + .blob comes later in the file, so .blob's position:relative
   was silently winning the cascade on every scattered blob (Color Splash, Balloon Pop), making
   scatter()'s x/y become flow-relative offsets instead of absolute coordinates: items stacked
   in document flow and drifted down/behind each other, exactly Nafis's "hidden"/"not clickable"
   reports. This compound selector is more specific than either alone, so it always wins. */
.scat.blob { position:absolute; }

.grp { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-width:40%; }
.grp span { font-size:clamp(24px,7vw,40px); filter:drop-shadow(0 3px 2px rgba(0,0,0,.15)); animation:bob 2.6s ease-in-out infinite; }
.grp span.gone { opacity:.22; }
.opsign { font-size:clamp(32px,9vw,52px); font-weight:800; color:var(--ink); }

.cell { display:flex; align-items:center; justify-content:center; background:#ffffffb8; border-radius:16px; cursor:pointer;
  font-size:clamp(24px,8vw,40px); box-shadow:0 4px 0 rgba(0,0,0,.10); transition:transform .08s; }
.cell:active { transform:scale(.94); }
.cell.right { animation:cheer .5s ease; background:#d9f7d9; outline:3px solid #4caf50; }
.cell.nope { animation:zshake .35s ease; }
.cell.padlit { filter:brightness(1.7); transform:scale(1.06); box-shadow:0 0 22px #ffffffaa; }

.cardc { perspective:600px; cursor:pointer; }
.inner { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .35s; }
.cardc.flip .inner { transform:rotateY(180deg); }
.face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:14px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.back { background:linear-gradient(135deg,var(--acc),var(--accD)); color:#fff; font-size:clamp(18px,5vw,26px); box-shadow:0 4px 0 rgba(0,0,0,.2); }
.front { background:#fffef5; transform:rotateY(180deg); font-size:clamp(22px,7vw,38px); box-shadow:0 4px 0 rgba(0,0,0,.12); }
.cardc.done .front { background:#d9f7d9; outline:3px solid #4caf50; }
.cardc.done { pointer-events:none; }

.cmp { background:#ffffffb8; border-radius:20px; cursor:pointer; padding:12px; display:flex; flex-wrap:wrap; gap:5px;
  align-items:center; justify-content:center; align-content:center; width:min(44%,220px); min-height:140px;
  box-shadow:0 5px 0 rgba(0,0,0,.12); transition:transform .08s; }
.cmp:active { transform:scale(.96); }
.cmp span { font-size:clamp(20px,6vw,34px); }
.cmp.right { animation:cheer .5s ease; outline:4px solid #4caf50; }
.cmp.nope { animation:zshake .35s ease; }

.seqrow { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.seqrow span { font-size:clamp(30px,9vw,48px); filter:drop-shadow(0 3px 2px rgba(0,0,0,.15)); }
.seqrow .qm { font-size:clamp(30px,9vw,48px); font-weight:800; color:var(--ink); background:#ffffffb8; border-radius:12px; padding:2px 12px; }

#answers { display:flex; gap:10px; justify-content:center; padding-bottom:4px; z-index:2; flex-wrap:wrap; }
.ans { min-width:clamp(64px,19vw,96px); height:clamp(64px,19vw,96px); padding:0 10px; font-family:inherit;
  font-size:clamp(26px,8vw,42px); font-weight:800; color:#fff; border:none; border-radius:22px; cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.22), inset 0 -6px 0 rgba(0,0,0,.12); transition:transform .08s; }
.ans:active { transform:translateY(4px); }
.ans.b0{background:#ff7043}.ans.b1{background:#42a5f5}.ans.b2{background:#ab47bc}
.ans.right { animation:cheer .5s ease; background:#4caf50 !important; }
.ans.wrong { animation:zshake .4s ease; background:#9e9e9e !important; }
@keyframes cheer { 30%{transform:scale(1.18)} }

.overlay { position:absolute; inset:0; background:#00000055; backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:10; padding:16px; }
.card { background:#fffef5; padding:24px 22px; border-radius:26px; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.25); width:min(92%,380px); }
.card h2 { font-size:clamp(22px,6vw,32px); color:var(--ink); margin-bottom:4px; }
.card p { font-size:clamp(14px,3.5vw,17px); color:#666; margin-bottom:14px; }
.card p.sub { margin-bottom:16px; }
.card p.tiny { font-size:13px; color:#8a8a8a; margin:12px 0 4px; }
.bigbtn { font-family:inherit; font-size:clamp(18px,5vw,24px); font-weight:800; color:#fff; background:var(--acc); border:none; border-radius:999px; padding:12px 32px; cursor:pointer; box-shadow:0 6px 0 var(--accD); }
.bigbtn:active { transform:translateY(4px); box-shadow:0 2px 0 var(--accD); }
.bigbtn.ghost { background:#ffffff; color:var(--ink); box-shadow:0 6px 0 #00000022; padding:12px 20px; }
.btnrow { display:flex; gap:12px; justify-content:center; align-items:center; }
.linkbtn { display:inline-block; margin-top:10px; font-size:14px; font-weight:700; color:#0b6e99; text-decoration:none; }
.linkbtn.asbtn { background:none; border:none; font-family:inherit; cursor:pointer; }

#mapGrid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:6px 0 2px; }
.lvlbtn { font-family:inherit; border:none; border-radius:16px; padding:8px 0 6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:1px; box-shadow:0 4px 0 rgba(0,0,0,.15); }
.lvlbtn b { font-size:clamp(17px,5vw,22px); }
.lvlbtn span { font-size:10px; letter-spacing:-1px; min-height:13px; }
.lvlbtn.done { background:#d9f7d9; color:#1d7a2c; }
.lvlbtn.open { background:var(--acc); color:#fff; animation:pulse 1.6s ease-in-out infinite; }
.lvlbtn.lock { background:#eceff1; color:#9e9e9e; cursor:default; box-shadow:none; }
.lvlbtn:not(.lock):active { transform:translateY(3px); box-shadow:none; }
@keyframes pulse { 50%{ transform:scale(1.07); } }

#endStars { font-size:clamp(38px,12vw,54px); margin-bottom:6px; min-height:1.2em; }
.coinline { color:#b8860b; font-size:1.1em; }
.bigstar { display:inline-block; opacity:.35; }
.bigstar.lit { opacity:1; animation:starIn .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes starIn { from{ transform:scale(0) rotate(-40deg); } to{ transform:scale(1) rotate(0); } }

.confetti { position:absolute; width:12px; height:12px; z-index:9; pointer-events:none; }
.hidden { display:none !important; }

/* RTL (Arabic) — sequences of numbers/letters always read left-to-right */
[dir="rtl"] .seqrow, [dir="rtl"] .grp, [dir="rtl"] #mapGrid { direction:ltr; }
[dir="rtl"] #banner h1 { unicode-bidi:plaintext; }