/* shared game animations (2026-10-29) */
@keyframes g-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes g-hop{0%{transform:translateY(0) rotate(0)}20%{transform:translateY(-34px) rotate(-6deg)}40%{transform:translateY(0) rotate(0)}60%{transform:translateY(-22px) rotate(6deg)}80%{transform:translateY(0) rotate(0)}100%{transform:translateY(0)}}
@keyframes g-oops{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes g-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes g-bubble{0%{transform:scale(.85);opacity:.3}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes g-pulse{0%{box-shadow:0 5px 0 #9b3b11,0 0 0 0 #c8501b66}100%{box-shadow:0 5px 0 #9b3b11,0 0 0 22px #c8501b00}}
@keyframes g-snap{0%{transform:scale(1.25)}55%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes g-glow{0%,100%{box-shadow:0 0 0 0 #7cc47c00}50%{box-shadow:0 0 0 12px #7cc47c88}}
@keyframes g-star{0%{transform:scale(0) rotate(-90deg);opacity:0}70%{transform:scale(1.4) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes g-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.lp-bubble.pop,.dm-bubble.pop{animation:g-bubble .35s ease}
.lp-tile.in,.dm-card.in{animation:g-pop .45s cubic-bezier(.2,1.4,.4,1) both}
.lp-slot .lp-tile.snap{animation:g-snap .35s ease}
.lp-board.win .lp-slot{animation:g-glow .9s ease 2}
.lp-board.win .lp-slot:nth-child(2){animation-delay:.12s}.lp-board.win .lp-slot:nth-child(3){animation-delay:.24s}.lp-board.win .lp-slot:nth-child(4){animation-delay:.36s}
.lp-board.win{animation:g-wiggle .5s ease 2}
.lp-btn.in,.dm-btn.in{animation:g-pop .4s ease both}
.lp-chip.done.new{animation:g-star .6s ease}
.dm-play.talking{animation:g-pulse 1s ease-out infinite}
.dm-card.ok{animation:g-snap .4s ease}
.dm-stars.pop{animation:g-star .6s ease}
.lp-tile:not(.drag):hover,.dm-card:not([disabled]):hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.fa-food.in,.ad-card.in{animation:g-pop .45s cubic-bezier(.2,1.4,.4,1) backwards}

.g-restart{width:44px;height:44px;border-radius:50%;border:3px solid #4a9bc9;background:#fff;color:#1d5b7e;font:800 22px Baloo,sans-serif;cursor:pointer;padding:0;line-height:1}.g-restart[hidden]{display:none}

/* ---- Laptop fit (owner 2026-10-29): on desktop widths with a short window, the playing area must fit without scrolling ---- */
@media(min-width:951px) and (max-height:900px){
 .dm-grid,.wd-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:780px!important;gap:12px!important}
 .dm-side,.wd-side{width:230px!important}.dm-main,.wd-main{gap:28px!important;align-items:center!important}
 .dm-arnoob,.wd-arnoob{height:clamp(110px,18svh,170px)!important}
 .dm-card span,.wd-card span{min-height:36px!important;font-size:15px!important}
 .cl-arena{height:clamp(300px,calc(100svh - 360px),500px)!important}.cl-stage{min-height:0!important}.cl-arnoob{margin-top:0!important}.cl-arnoob{height:clamp(110px,18svh,170px)!important}
 .ad-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}.ad-side{width:220px!important}.ad-arnoob{height:clamp(100px,16svh,150px)!important}.ad-card span{font-size:14px!important;min-height:34px!important}.ad-main{gap:24px!important}
 .cf-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:640px!important}.cf-hero{height:clamp(110px,22svh,190px)!important;margin-top:10px!important}.cf-arn{height:clamp(100px,20svh,170px)!important}
 .cf h1,.dm h1,.wd h1,.ad h1,.cl h1{font-size:30px!important}
 .dm>p,.wd>p,.ad>p#sub,.cf>p#sub{margin-bottom:2px!important}
 /* compact header + title area */
 body.no-cta .site-header{padding-block:8px!important}
 .lp>p:not(.g-back):not(.lp-prog),.dm>p:not(.g-back),.wd>p:not(.g-back),.ad>#sub,.cf>#sub{display:none!important}
 .lp h1,.dm h1,.wd h1,.ad h1,.cf h1,.cl h1{font-size:26px!important;margin:0!important;line-height:1.1}
 .g-back{margin:0!important;font-size:14px}
 .wd-prog,.dm-prog,.ad-prog,.cf-prog,.lp-prog{height:20px!important;min-height:0!important;margin:0!important;font-size:14px}
 .cf-tabs{margin:4px 0!important}.cf-tab{padding:6px 16px!important;font-size:15px!important}
 .cf-bubble{height:42px!important;margin:4px auto!important;font-size:17px!important}
 .lp-strip{grid-row:4!important}
 .kt>p:not(.g-back){display:none!important}.kt h1{font-size:26px!important;margin:0!important}
 .kt-arn{height:clamp(110px,22svh,190px)!important}.kt-area{height:clamp(220px,calc(100svh - 400px),420px)!important}
 .kt #sub{display:none!important}.kt-bubble{min-height:0!important;height:44px!important;font-size:17px!important}.kt-ph{padding:4px 10px!important;font-size:13px!important}.kt-prog{height:20px!important;margin:0!important}
 .mj-sub{display:none!important}.mj-img{aspect-ratio:auto!important;height:clamp(180px,calc(100svh - 470px),365px)!important}.mj-arnoob{height:clamp(70px,12svh,100px)!important}
 .cf.paint .cf-hero{display:none!important}.cf-art{width:clamp(240px,calc(100svh - 330px),400px)!important}.cf-dot{width:34px!important;height:34px!important;border-width:3px!important}.cf-pal{margin:4px 0!important;gap:6px!important}
}

/* ---- Mobile pass (owner: no wasted space, mobile first) ---- */
@media(max-width:600px){
 .lp>p:not(.g-back):not(.lp-prog),.dm>p:not(.g-back),.wd>p:not(.g-back),.ad>#sub,.cf>#sub,.kt #sub,.mj-sub,.tw>p#sub{display:none!important}
 .lp h1,.dm h1,.wd h1,.ad h1,.cf h1,.cl h1,.kt h1,.mn h1,.tw h1,.mj h1{font-size:24px!important;margin:0!important;line-height:1.15}
 .g-back{margin:0!important;font-size:14px}
 body.no-cta .site-header{padding-block:8px!important}
 .wd-prog,.dm-prog,.ad-prog,.cf-prog,.lp-prog,.kt-prog,.mn-prog{height:18px!important;min-height:0!important;margin:0!important;font-size:13px}
 /* Dua Match + Whose Dua: Arnoob small beside the bubble, listen button under, cards right after */
 .dm-side,.wd-side{display:grid!important;grid-template-columns:64px auto 1fr;grid-template-areas:"a b b" "a p n";align-items:center;gap:6px 10px;width:100%}
 .dm-arnoob,.wd-arnoob{grid-area:a;height:76px!important;width:auto}.dm-bubble,.wd-bubble{grid-area:b;height:auto!important;min-height:40px;font-size:15px!important;width:auto!important}
 .dm-side>span,.wd-side>span{grid-area:p;justify-self:start}.dm-side #next,.wd-side #next{grid-area:n;justify-self:start}.wd-stars,.dm-stars{display:none!important}.wd-prog,.dm-prog{margin-bottom:4px!important}
 .dm-main,.wd-main{gap:8px!important}
 .wd-fact:not(.on){display:none!important}.wd-fact{min-height:0!important}
 .dm-card span,.wd-card span{min-height:30px!important;font-size:13px!important}
 /* Color Fun */
 .cf-hero{height:84px!important;margin-top:4px!important}.cf-arn{height:80px!important}.cf-bubble{height:40px!important;margin:4px auto!important;font-size:15px!important}.cf-tabs{margin:4px 0!important}.cf-tab{padding:6px 14px!important;font-size:14px!important}
 .cf.paint .cf-hero{display:none!important}.cf-art{width:min(92vw,360px)!important}
 .cf-grid{gap:10px!important;margin:6px auto!important}.cf-pot{padding:6px 4px 2px!important}.cf-pot svg,.cf-pot img{width:62%!important}
 /* Arnoob's Day: pill tabs, smaller Arnoob */
 .ad-tabs button,.ad-tab{border-radius:99px!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;padding:6px 14px!important;font-size:14px!important;flex-direction:row!important}
 .ad-side{flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;width:100%;max-width:100%}.ad-arnoob{height:70px!important}.ad-bubble{width:auto!important;flex:1 1 150px;min-width:0;max-width:100%}.ad-stars{height:auto!important;font-size:22px!important}.ad-btn{padding:10px 18px!important;font-size:16px!important}.ad-tabs{flex-wrap:wrap}.ad-main,.ad{max-width:100%;overflow-x:clip}
 /* Kitchen */
 .kt-arn{height:96px!important}.kt-left{gap:4px!important}.kt-bubble{min-height:0!important;padding:6px 12px!important;font-size:15px!important}
 .kt-tabs .kt-tab{padding:5px 12px!important;font-size:14px!important}.kt-ph,.kt-chip{padding:3px 9px!important;font-size:12px!important}
 /* Letter Puzzle: Arnoob small, tiles right under the board */
 .lp-side .lp-arnoob{height:64px!important}.lp-side{gap:4px!important}.lp-bubble{font-size:15px!important;padding:4px 14px!important}
 /* Musa */
 .mj-arnoob{height:70px!important}.mj-chaps{margin-top:6px}
 /* Manners: shorter picture so the choices are in reach, no Arnoob under the choices */
 .mn-scene{aspect-ratio:4/3!important;width:100%!important}.mn-scene>img{object-position:center 35%}.mn-arn{display:none!important}.mn-q{min-height:48px!important;font-size:16px!important}.mn-c{padding:9px 14px!important;font-size:15px!important}.mn-ear{padding:6px 14px!important;font-size:14px!important}.mn-main{gap:8px!important}.mn-right{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
 /* Town */
 .tw-card{min-height:0!important;margin-top:6px!important;padding:10px 12px!important}.tw-card h2{font-size:18px!important;margin:0 0 6px!important}
 .kt-main{display:flex!important;flex-direction:column!important}.kt-area{order:-1!important;min-height:200px!important}.kt-left{order:2!important}
 .mj>p:not(.g-back):not(.mj-prog){display:none!important}
 .kw-row{gap:8px!important}.kw-it{width:74px!important;height:74px!important}.kw-it .kw-f{font-size:38px!important}.kw-sink{height:70px!important}.kw-sponge{display:none}
 .kt-tabs{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none;padding-bottom:4px;margin-inline:-6px;padding-inline:6px}.kt-tabs::-webkit-scrollbar{display:none}.kt-tab{flex:none;white-space:nowrap}
}
@media(min-width:951px) and (max-height:900px){
 .mn-arn{display:none!important}.mn-scene{width:clamp(260px,calc(100svh - 330px),420px)!important}.mn-tip{min-height:0!important;padding:6px 12px!important}.mn-q{min-height:52px!important;font-size:17px!important}.mn-c{padding:8px 14px!important}
}
@media(min-width:951px) and (max-height:900px){.cf-grid.cf-lab{grid-template-columns:repeat(6,minmax(0,1fr))!important;max-width:780px!important}.cf-found{min-height:0!important}}

/* ---- Pill spacing (owner): at least 10px between pills/tabs/chips and before the counter row, so they never touch ---- */
.cf-tabs,.ad-tabs,.kt-tabs,.mj-tabs{gap:10px!important;row-gap:10px!important}
#phases,.kt-phases{gap:8px!important;row-gap:8px!important}
.lp-strip,#strip{gap:8px!important}
.cf-tabs{margin:8px 0 12px!important}
#prog.cf-prog,.cf #prog{margin-top:6px!important;margin-bottom:8px!important}
@media(max-width:600px){.cf-tabs{gap:8px!important;padding:0 4px!important}.cf-tab{padding:6px 8px!important;font-size:13px!important}}

/* ---- iPhone 15 Pro (393x852) fit ---- */
@media(max-width:600px){
 .ad-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
 .ad-card span{font-size:13px!important;min-height:34px!important;padding:2px 4px!important}
 .wd-c{width:46px!important;height:46px!important}.wd-coll{margin-top:8px!important;gap:6px!important}.wd-coll h2{font-size:16px!important}
 .wd-grid{gap:10px!important}.wd-card span{min-height:28px!important}
}

/* All-games link sits at the START side (left in English, right in Arabic), not centred; air below it (owner 2026-10-31) */
.g-back{text-align:start!important;margin-bottom:6px!important}
@media(max-width:600px){.wd-grid{gap:8px!important}.wd-card span{min-height:24px!important}.wd-coll{margin-top:4px!important}.wd-c{width:42px!important;height:42px!important}}
/* shortest laptops (1366x650): trim Color Fun vertical room so EN + AR fit without scrolling */
@media(min-width:951px) and (max-height:700px){.cf h1{font-size:26px!important;margin:0!important}.cf .cf-arn{height:104px!important}.cf .cf-hero{height:110px!important;margin-top:0!important}.cf-top{margin-top:0!important}.cf-grid{gap:8px!important}.cf-tabs{margin:2px 0!important}.cf-prog{height:16px!important}}
/* phones: title higher (owner 2026-10-31): less air above the All-games link and between link and title */
@media(max-width:600px){.workbook-page main .container>div:first-child{padding-top:2px!important}.workbook-page .g-back{line-height:1.15!important;margin:0 0 -2px!important}.g-back a{display:inline-block;padding:2px 0}}
/* Musa journey phones: controls never overlap; bigger Arnoob (owner 2026-10-31) */
@media(max-width:600px){.mj-arnoob{height:112px!important}.mj-img{height:clamp(150px,calc(100svh - 520px),340px)!important}.mj-cap{padding:8px 14px 10px!important}}

/* Letter Puzzle phones, design A (owner 2026-11-01): the board alone on top; bubble; pieces + Arnoob at the bottom (Arnoob on the right); the 28 letters last */
@media(max-width:600px){
 .lp{display:grid!important;grid-template-columns:1fr auto;gap:8px 10px!important;align-content:start;min-height:0!important;padding-bottom:12px!important;touch-action:none}
 html[dir="rtl"] .lp{grid-template-columns:auto 1fr}
 .lp>.g-back,.lp>h1,.lp>p.lp-prog{grid-column:1/-1}.lp>p#lp-hint{display:none!important}
 .lp-board{grid-row:4;grid-column:1/-1;justify-self:center;width:min(60vw,240px)!important;margin:0 auto!important;border-radius:20px}
 .lp-side{display:contents!important}
 .lp-bubble{grid-row:5;grid-column:1/-1;justify-self:center;width:auto!important;font-size:15px!important;padding:6px 14px!important;line-height:1.2}
 .lp-tray{grid-row:6;grid-column:1;display:grid!important;grid-template-columns:repeat(2,70px);grid-template-rows:repeat(var(--rows,2),70px);gap:8px!important;justify-content:center;justify-self:center;align-self:end;min-height:0!important;margin:0!important}
 .lp-tray .lp-tile:not(.drag){width:70px!important;height:70px!important}.lp-tile.drag{width:auto}
 .lp-side .lp-arnoob{grid-row:6;grid-column:2;justify-self:end;align-self:end;height:150px!important;width:auto!important;max-width:none!important}
 html[dir="rtl"] .lp-tray{grid-column:2}html[dir="rtl"] .lp-side .lp-arnoob{grid-column:1;justify-self:start}
 .lp-btn{grid-row:6;grid-column:1;justify-self:center;align-self:center;padding:10px 16px;font-size:16px}html[dir="rtl"] .lp-btn{grid-column:2}
 .lp-strip{grid-row:7;grid-column:1/-1;gap:6px!important;margin:4px 0 0!important}.lp-chip{width:38px!important;height:38px!important;font-size:20px!important;border-radius:11px}
}
@media(max-width:600px) and (max-height:700px){.lp-board{width:min(48vw,190px)!important}.lp-side .lp-arnoob{height:110px!important}.lp-tray{grid-template-columns:repeat(2,58px);grid-template-rows:repeat(var(--rows,2),58px)}.lp-tray .lp-tile:not(.drag){width:58px!important;height:58px!important}.lp-chip{width:32px!important;height:32px!important;font-size:17px!important}.lp-strip{gap:4px!important}}
/* laptops: the pieces also keep their cell */
@media(min-width:601px){.lp-tray{display:grid!important;grid-template-columns:repeat(2,100px);grid-template-rows:repeat(var(--rows,2),100px);gap:12px!important;justify-content:center;min-height:0!important}.lp-tray .lp-tile:not(.drag){width:100px!important;height:100px!important}}
/* Letter Puzzle: the letter is cut into left/right pieces, so the board must NEVER mirror in Arabic (the assembled letter came out reversed). Tested in tests/games.test.js */
.lp-board{direction:ltr!important}

.g-titlerow{display:flex;align-items:center;justify-content:center;gap:10px}.g-titlerow h1{margin-block:0}
.g-rst{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border:0;border-radius:50%;background:#fff;color:#1d5b7e;box-shadow:0 2px 0 #6b422633;cursor:pointer;padding:0;touch-action:manipulation}.g-rst:active{transform:translateY(1px)}
.g-rm{position:fixed;inset:0;z-index:90;background:#0006;display:grid;place-items:center;padding:20px}.g-rmb{background:#fff8ee;border-radius:24px;padding:22px 20px;max-width:340px;width:100%;text-align:center;box-shadow:0 10px 30px #0004;font-family:Baloo,sans-serif}
.g-rmt{font:800 22px Baloo,sans-serif;color:#6b4226;margin:4px 0}.g-rmp{font-size:15px;color:#6b4226aa;margin-bottom:14px}
.g-rmy,.g-rmn{display:block;width:100%;padding:12px;border-radius:99px;font:800 17px Baloo,sans-serif;cursor:pointer;margin-top:8px;border:3px solid #c8501b}.g-rmy{background:#c8501b;color:#fff;box-shadow:0 4px 0 #9b3b11}.g-rmn{background:#fff;color:#c8501b}
.g-titlerow.g-hid{position:relative;height:0;min-height:0;margin:0}.g-titlerow.g-hid .g-rst{position:absolute;inset-inline-end:8px;top:-34px;width:30px;height:30px}

/* owner view: games not yet fully approved are greyed out on the hub (still clickable) */
.game-card.is-wip{filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}.game-card.is-wip:hover,.game-card.is-wip:focus-visible{filter:none;opacity:1}