/* Salam Playgrounds: shared presentation, distinct game mechanics. */
.arc-pocket-pause{display:none}
.arc-board-win .outlet:after{content:'🌷';position:absolute;inset:0;display:grid;place-items:center;font-size:38px;background:#e9fadccc;border-radius:8px;animation:arc-bloom .6s ease-out both}
.arc-board-win .mosaic-cell.occupied{animation:arc-tile-glow .8s ease-out both}
@keyframes arc-bloom{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes arc-tile-glow{50%{filter:brightness(1.16);transform:translateY(-3px)}}
.arcade,.arcade *{box-sizing:border-box}.arcade{width:min(1020px,100%);padding:20px 20px 40px;margin:auto;color:#173653}.arcade [hidden]{display:none!important}
.arcade button,.arcade select{font:inherit;font-weight:900;color:#173653;min-height:46px;border:2px solid #b8d6e1;background:#fff;border-radius:15px;padding:10px 16px;cursor:pointer;touch-action:manipulation}
.arcade button{box-shadow:0 4px 0 #b8d6e1;transition:background .12s,box-shadow .12s}.arcade button:hover:not(:disabled){background:#f0fdfa;border-color:#0f766e}.arcade button:active:not(:disabled){box-shadow:0 1px 0 #b8d6e1}.arcade button:disabled{cursor:default;opacity:.55}
.arcade :focus-visible{outline:4px solid #6d28d9;outline-offset:3px}.arcade h2[tabindex]:focus{outline:none}.arcade a{color:#5b21b6;font-weight:900}.arcade .arc-primary{color:#fff;background:#6d28d9;border-color:#5b21b6;box-shadow:0 5px 0 #4c1d95;font-size:18px;padding:14px 25px;border-radius:18px}.arcade .arc-primary:hover:not(:disabled){background:#5b21b6;border-color:#4c1d95}
.arc-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 2px 15px}.arc-heading h1{font-size:clamp(25px,4vw,36px);margin:2px 0 0;line-height:1.1;font-weight:1000}.arc-heading>span{font-size:12px;font-weight:900;max-width:210px;text-align:right;background:#ffffffb8;border-radius:18px;padding:10px 14px}.arc-eyebrow{font-size:11px!important;font-weight:1000;letter-spacing:.1em;text-decoration:none;color:#32627a!important}
.arc-stage{position:relative;isolation:isolate;border:4px solid #fff;border-radius:30px;overflow:hidden;box-shadow:0 7px 0 #91cad9,0 16px 40px #366b881a;background:#dcf7ff;background-image:var(--scene);background-size:cover;background-position:center}
.arc-stage[data-state=welcome]{min-height:600px}.arc-welcome{min-height:600px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px 18px;background:linear-gradient(#e7faff15,#edfbffdc 36%,#ffffffbd 75%,#e0f8fa11)}
.arc-title-icon{height:104px;font-size:70px;line-height:100px}.arcade .arc-title-icon img{width:100px;height:104px;object-fit:contain;filter:drop-shadow(0 6px 3px #174e571c)}
.arc-tag{font-size:clamp(25px,4vw,38px);font-weight:1000;line-height:1.12;letter-spacing:-.6px;color:#14556b;margin:12px 0}.arc-welcome h2{font-size:17px;line-height:1.4;max-width:530px;margin:0 0 12px;font-weight:800}.arc-welcome-goal{font-size:13px;line-height:1.4;max-width:450px;margin:0 0 18px;color:#335b6d}
.arc-settings{display:flex;gap:12px;margin-bottom:20px}.arc-settings label{font-size:11px;font-weight:1000;text-align:left;display:flex;flex-direction:column;gap:5px}.arc-settings select{font-size:13px;min-height:45px;padding:8px 13px;max-width:260px}.arc-ready,.arc-best{font-size:11px;margin:12px 0 0;min-height:16px;color:#335b6d}.arc-best{margin-top:5px;font-weight:900}
.arc-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:75px;padding:11px 18px;background:#ffffffef;border-bottom:2px solid #e1f3f9}
#arcObjective{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:1000;line-height:1.3}#arcObjective .target-glyph{display:grid;place-items:center;width:65px;height:74px;line-height:1.3;font-size:54px;color:#5b21b6;background:#f3eaff;border-radius:17px;padding-bottom:6px}#arcObjective small{display:block;font-size:11px;color:#527383;margin-bottom:3px;font-weight:800}
.arc-counts{text-align:right;display:grid;grid-template-columns:auto auto;gap:0 12px;align-items:center;white-space:nowrap}.arc-counts>span{font-size:12px;font-weight:1000;grid-row:span 2}.arc-counts strong{font-size:24px;line-height:1.1;color:#5b21b6}.arc-counts small{font-size:9px;color:#486572}
.arc-field{position:relative;height:440px;overflow:hidden}#arcCanvas{display:block;width:100%;height:100%;touch-action:pan-y;border:0}#arcCanvas:focus-visible{outline:3px dashed #6d28d9;outline-offset:-5px}
.arc-controls{display:flex;align-items:center;justify-content:center;gap:10px;min-height:65px;padding:8px 12px;background:#ffffffed;border-top:2px solid #e6f5f9}.arc-controls button{min-width:58px;min-height:46px;padding:8px 17px}.arc-controls button[data-hold]{touch-action:none;user-select:none;-webkit-user-select:none}.arc-controls .arc-jump{background:#ede9fe;color:#5b21b6;min-width:145px}.arc-controls .arc-arrow{font-size:22px;padding:5px 12px;min-width:52px}
.arc-message{margin:0;min-height:38px;display:flex;justify-content:center;align-items:center;text-align:center;padding:7px 14px;font-size:12px;line-height:1.35;font-weight:900;background:#ffffffed;color:#335b6d}
.arc-tools{display:flex;justify-content:center;gap:9px;margin:20px 0 10px}.arc-tools button{font-size:12px;min-width:100px;padding:8px 13px}.arc-tools button[aria-pressed=true]{background:#d8f7eb;border-color:#15836a}.arc-guidance,.arc-switch{font-size:13px;text-align:center;line-height:1.5;margin:12px 12px 20px;color:#426373}.arc-grownups{background:#ffffffdc;border:2px solid #fff;border-radius:22px;padding:20px;font-size:14px;line-height:1.7;margin-top:20px}.arc-grownups summary{min-height:32px;font-weight:1000;cursor:pointer}.arc-note{font-size:11px;line-height:1.5;color:#466779}
.arc-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;background:#e9faf3ed;overflow-y:auto}.arc-dialog{width:100%;max-width:490px;display:flex;flex-direction:column;align-items:center;gap:13px}.arc-dialog>span{font-size:56px;line-height:1}.arc-dialog h2{margin:0;font-size:clamp(25px,4vw,34px);line-height:1.12;font-weight:1000;color:#175b62}.arc-dialog p{margin:0;font-size:14px;line-height:1.5}.arc-dialog .arc-eyebrow{font-size:10px!important}.arc-dialog a{font-size:13px;min-height:44px;padding-top:12px}.arc-dialog .arc-note{font-size:10px}.arc-lesson{padding:12px 15px;background:#ffffffcc;border:2px solid #fff;border-radius:16px;font-size:12px!important}.arc-finish-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.arc-finish-actions button{font-size:14px!important}.arc-end-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.arc-end-letters span{display:grid;place-items:center;width:42px;height:48px;padding-bottom:5px;font-size:28px;background:#fff;border:2px solid #9fd8c5;border-radius:12px}.arc-end-letters .missed{border-style:dashed;border-color:#bfb1dd;background:#f4edff}
.arc-stage[data-state=paused] *{animation-play-state:paused!important}
.arc-board{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:5px;max-width:440px;margin:auto;width:100%}.arc-board button{position:relative;aspect-ratio:1;min-height:0;padding:0;border-radius:12px;box-shadow:0 3px 0 #90b5be;background:#fffdf2;border:2px solid #d4ddcf;font-size:12px;overflow:visible}.arc-board svg{display:block;width:100%;height:100%;pointer-events:none}.arc-board .arc-cell-label{position:absolute;bottom:2px;right:3px;font-size:8px;line-height:1;font-weight:900;background:#ffffffc9;border-radius:3px;padding:2px;color:#33515e}
[data-arcade=oasis] .arc-field,[data-arcade=courier] .arc-field,[data-arcade=mosaic] .arc-field{height:auto;min-height:250px;padding:22px 20px;background:#ffffff36}
[data-arcade=oasis] .arc-board{max-width:390px}.arc-board .source{outline:4px solid #0284c7;outline-offset:1px}.arc-board .outlet{outline:4px solid #16805b;outline-offset:1px}.arc-board .hint{outline:4px dashed #6d28d9;outline-offset:1px;z-index:2}.arc-board .leak{background:#fff4dd;border-color:#aa761e}.pipe-base{fill:none;stroke:#a9bec0;stroke-width:23;stroke-linejoin:round;stroke-linecap:butt}.pipe-rim{fill:none;stroke:#effcff;stroke-width:14;stroke-linejoin:round;stroke-linecap:butt}.pipe-water{fill:none;stroke:#0284c7;stroke-width:14;stroke-linejoin:round;stroke-linecap:butt}.pipe-drop{fill:#67e8f9;stroke:#0369a1;stroke-width:2}.arc-board .wet{background:#e0f7ff}.arc-board .source .arc-cell-label,.arc-board .outlet .arc-cell-label{font-size:9px;background:#fff;color:#164e63;padding:3px;border-radius:4px}
[data-arcade=courier] .arc-field{background:#ffffff70}.arc-board .wall{background:#9bcfa9;border-color:#7fb78f;box-shadow:0 3px 0 #619276}.arc-board .road{background:#fbefd9}.arc-board .goal{background:#e2f9eb;border-color:#198860}.arc-board .delivered{background:#ceefc7;box-shadow:inset 0 0 0 3px #66ad6e}.parcel{position:absolute;inset:8%;display:grid;place-items:center;background:var(--tile,#a78bfa);border:3px solid #fff6;box-shadow:0 3px 0 #33415533;border-radius:9px;font-size:clamp(20px,4vw,38px);font-weight:1000;color:#173653;text-shadow:0 1px #fff7}.parcel:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 2px #17365333;border-radius:6px}.goal-stamp{display:grid;place-items:center;position:absolute;inset:0;font-size:clamp(26px,4vw,43px);color:#174f42}.cart-piece{position:absolute;inset:2%;width:96%;height:96%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 2px #17365333)}
.arc-tray{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:13px;background:#ffffffde}.arc-tray button{position:relative;width:64px;height:61px;padding:7px;border-radius:12px}.arc-tray button[aria-pressed=true]{outline:3px solid #6d28d9;outline-offset:1px;background:#f3edff}.arc-tray svg{width:100%;height:100%}.arc-tray button:disabled{opacity:.3}.arc-tray small{position:absolute;right:2px;bottom:1px;font-size:9px;background:#fff9;padding:1px 3px;border-radius:4px}
[data-arcade=mosaic] .arc-board{gap:3px;max-width:375px}.arc-board .mosaic-cell{background:#e0f2f2;border-color:#a8cdd0;box-shadow:0 2px 0 #8bb8bb;border-radius:7px}.arc-board .mosaic-cell.occupied{background:var(--tile);border-color:#ffffff9c;background-image:url('/assets/arcade/motif.svg');background-size:cover;box-shadow:0 3px 0 #365a7040}.arc-board .mosaic-cell.ghost{outline:3px dashed #6d28d9;outline-offset:-4px;background:#ebe1fd}
.arc-bubbles{position:absolute;inset:0}.arc-bubble{position:absolute!important;top:var(--y,10px);left:var(--x);width:118px;height:118px;min-height:0!important;border:4px solid #fff!important;border-radius:50%!important;padding:0!important;box-shadow:inset -7px -7px #87bace29,0 6px 0 #6b99b52b!important;background:radial-gradient(circle at 28% 22%,#fff 0 3%,#fff9 12%,var(--bubble,#c7f7ef) 70%)!important;transform:translateX(-50%);transition:none!important;color:#163c54!important}
.arc-bubble [lang=ar]{display:grid;place-items:center;position:absolute;inset:0;font-size:76px;font-weight:700;line-height:1.4;padding-bottom:14px;pointer-events:none}.arc-bubble .descender{translate:0 -8px}.arc-bubble:before{content:'';position:absolute;top:12%;left:13%;width:22%;height:10%;border-radius:50%;background:#fff8;transform:rotate(-35deg)}.arc-bubble .bubble-key{position:absolute;bottom:-13px;left:calc(50% - 11px);display:grid;place-items:center;background:#fff;width:22px;height:22px;font-size:10px;border-radius:50%;color:#234f63}.arc-bubble.hint{outline:4px dashed #6d28d9;outline-offset:3px}.arc-bubble:disabled{opacity:.25}.arc-ground{position:absolute;bottom:0;left:0;right:0;height:35px;text-align:center;font-size:20px;letter-spacing:8px;background:#ccf1b9bd;border-top:3px solid #f6ffe8;color:#207d57;pointer-events:none}
.arc-effects{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.arc-spark{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;background:var(--c);border-radius:3px;animation:arc-burst .7s ease-out both}
.arc-hub-hero{padding:42px 20px;text-align:center;border:4px solid #fff;border-radius:30px;background:linear-gradient(#e4f8ff55,#e9fcffdd),url('/assets/arcade/leap-1280.webp') center/cover;box-shadow:0 6px 0 #8ec8d5;margin-bottom:25px}.arc-hub-hero h1{font-size:clamp(34px,6vw,60px);line-height:1.06;color:#175c71;font-weight:1000;letter-spacing:-1px;margin:12px 0 18px}.arc-hub-hero>p:last-child{font-weight:800;max-width:440px;margin:0 auto;line-height:1.5}.arc-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.arc-hub-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;border:3px solid #fff;border-radius:24px;background:#fff;box-shadow:0 5px 0 #9bcedb;color:#173653!important;transition:transform .2s}.arc-hub-card:hover{transform:translateY(-4px)}.arc-hub-card>.arc-hub-art{display:block;position:relative;aspect-ratio:3/2}.arcade .arc-hub-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.arc-hub-card>div{padding:17px;flex:1;display:flex;flex-direction:column}.arc-hub-card span{font-size:10px;color:#426a7c}.arc-hub-card h2{font-size:22px;line-height:1.1;margin:8px 0;font-weight:1000}.arc-hub-card p{font-size:13px;line-height:1.5;font-weight:700;margin:0 0 12px}.arc-hub-card small{font-size:10px;margin-top:auto;color:#426373}.arc-hub-card strong{display:block;margin-top:15px;padding:11px;background:#f0e9ff;color:#5b21b6;border-radius:14px;text-align:center;font-size:14px}
@keyframes arc-flow{to{stroke-dashoffset:-32}}@keyframes arc-burst{to{transform:translate(var(--dx),var(--dy)) rotate(130deg);opacity:0}}
@media(max-width:850px){.arc-hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
 .arcade{padding:12px 10px 28px}.arc-heading{margin-bottom:13px}.arc-heading>span{font-size:9px;max-width:118px;padding:7px 9px}.arc-heading h1{font-size:25px}.arc-eyebrow{font-size:9px!important}.arc-stage{border-width:3px;border-radius:25px}.arc-stage[data-state=welcome],.arc-welcome{min-height:530px}.arc-welcome{padding:23px 13px}.arc-title-icon{height:76px;font-size:54px;line-height:76px}.arcade .arc-title-icon img{width:77px;height:77px}.arc-tag{font-size:28px;margin:12px 0}.arc-welcome h2{font-size:14px;max-width:300px;line-height:1.4}.arc-welcome-goal{font-size:12px;margin:0 0 16px}.arc-settings{gap:7px;width:100%;justify-content:center;margin-bottom:18px}.arc-settings label:first-child{flex:1;min-width:0;max-width:220px}.arc-settings select{width:100%;font-size:11px;padding:8px 5px}.arc-settings label{font-size:10px}.arc-ready,.arc-best{font-size:10px}.arcade .arc-primary{font-size:16px}
 .arc-hud{padding:8px 10px;min-height:65px;gap:8px}#arcObjective{font-size:12px;gap:7px}#arcObjective small{font-size:9px}#arcObjective .target-glyph{width:51px;height:65px;font-size:46px;padding-bottom:6px}.arc-counts{gap:0 5px}.arc-counts strong{font-size:20px}.arc-counts>span{font-size:10px;max-width:72px;white-space:normal}.arc-counts small{font-size:8px}
 .arc-field{height:350px}.arc-bubble{width:82px;height:82px;border-width:3px!important}.arc-bubble [lang=ar]{font-size:54px;padding-bottom:12px}.arc-bubble .descender{translate:0 -6px}.arc-bubble .bubble-key{display:none}.arc-ground{font-size:15px;letter-spacing:3px;height:29px}.arc-controls{gap:7px;padding:8px;min-height:62px}.arc-controls button{font-size:12px;padding:8px 12px;min-width:47px}.arc-controls .arc-jump{min-width:120px}.arc-controls .arc-arrow{font-size:21px;min-width:45px;padding:6px 9px}.arc-message{font-size:10px;min-height:39px;padding:6px 10px}.arc-tools{gap:6px;margin-top:17px}.arc-tools button{min-width:0;flex:1;font-size:11px;padding:8px 4px}.arc-guidance,.arc-switch{font-size:11px;margin:10px 4px 17px}
 [data-arcade=oasis] .arc-field,[data-arcade=courier] .arc-field,[data-arcade=mosaic] .arc-field{padding:15px 8px;min-height:0}.arc-board{gap:4px}.arc-board button{border-radius:8px;border-width:2px}.arc-board .arc-cell-label{font-size:7px;padding:1px;bottom:1px;right:2px}.parcel{border-width:2px;border-radius:6px}.arc-tray{gap:7px;padding:11px 8px}.arc-tray button{width:51px;height:50px;min-height:44px;padding:5px}.arc-tray small{font-size:8px}
 .arc-overlay{padding:16px}.arc-dialog{gap:11px}.arc-dialog>span{font-size:43px}.arc-dialog h2{font-size:25px}.arc-dialog p{font-size:12px}.arc-dialog .arc-lesson{font-size:10px!important;padding:10px}.arc-finish-actions{gap:11px}.arc-finish-actions button{font-size:12px!important}.arc-dialog .arc-note{font-size:9px}.arc-grownups{font-size:12px;padding:16px}.arc-hub-grid{gap:16px;grid-template-columns:1fr}.arc-hub-hero{padding:30px 15px}.arc-hub-card{display:grid;grid-template-columns:115px 1fr}.arc-hub-card>.arc-hub-art{aspect-ratio:auto}.arc-hub-card>div{padding:14px}.arc-hub-card h2{font-size:19px}.arc-hub-card p{font-size:11px}.arc-hub-card span{font-size:9px}.arc-hub-card strong{font-size:12px;padding:9px;margin-top:10px}
}
@media(min-width:560px) and (max-height:500px){.arc-field{height:240px}.arc-hud{min-height:52px;padding:6px 12px}.arc-counts strong{font-size:20px}.arc-controls{min-height:56px;padding:5px}.arc-message{min-height:30px}.arc-dialog{gap:8px}.arc-dialog>span{font-size:35px}.arc-dialog h2{font-size:25px}.arc-dialog p{font-size:12px}.arc-bubble{width:80px;height:80px}.arc-bubble [lang=ar]{font-size:52px}#arcObjective .target-glyph{height:50px;width:45px;font-size:38px}.arc-stage[data-state=welcome],.arc-welcome{min-height:470px}}
@media(prefers-reduced-motion:reduce){.arcade *,.arcade *:before,.arcade *:after{animation:none!important;transition:none!important}.arc-effects{display:none}}
/* Landscape action games keep the playfield, touch controls, Pause and site identity together. */
@media(min-width:560px) and (max-height:500px){
 body.arc-motion-game:has(.arc-stage:not([data-state=welcome])){--sg-header:48px;--sg-bottom:0px}
 body.arc-motion-game:has(.arc-stage:not([data-state=welcome])) #sg-site-mobile{display:none!important}
 body.arc-motion-game:has(.arc-stage:not([data-state=welcome])) #sg-site-header .sg-site-row{padding:2px 12px}
 body.arc-motion-game:has(.arc-stage:not([data-state=welcome])) #sg-site-header .sg-site-mark{width:34px;height:34px;font-size:25px}
 body.arc-motion-game:has(.arc-stage:not([data-state=welcome])) #sg-site-header .sg-site-wordmark>span{font-size:16px}
 body.arc-motion-game:has(.arc-stage:not([data-state=welcome])) .arcade{width:100%;padding:6px 8px 20px}
 body.arc-motion-game:has(.arc-stage:not([data-state=welcome])) .arc-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .arc-motion-game .arc-stage:not([data-state=welcome]){border-radius:18px;border-width:3px}
 .arc-motion-game #arcPlay{display:grid;grid-template-columns:minmax(0,1fr) 130px}
 .arc-motion-game .arc-hud{grid-column:1/-1;min-height:44px;height:44px;padding:4px 12px}
 .arc-motion-game #arcObjective{font-size:12px}.arc-motion-game #arcObjective small{display:none}.arc-motion-game #arcObjective .target-glyph{width:34px;height:34px;font-size:30px;padding-bottom:3px;border-radius:9px}
 .arc-motion-game .arc-field{height:calc(100dvh - 110px)}
 .arc-motion-game .arc-controls{grid-column:2;grid-row:2;flex-direction:column;gap:6px;padding:8px;border-top:0;border-left:2px solid #e1f3f9}
 .arc-motion-game .arc-controls button{min-height:40px;min-width:0;width:100%;padding:5px;font-size:12px}.arc-motion-game .arc-controls .arc-arrow{font-size:19px}.arc-motion-game .arc-pocket-pause{display:block}
 .arc-motion-game .arc-message{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%)}
 .arc-motion-game .arc-overlay{align-items:flex-start;padding:12px}.arc-motion-game .arc-dialog{margin:auto}
}
html[data-sg-calm=true] .arcade *,html[data-sg-calm=true] .arcade *:before,html[data-sg-calm=true] .arcade *:after{animation:none!important;transition:none!important}html[data-sg-calm=true] .arc-effects{display:none}

/* The learning selector gets a full row so names remain legible on small phones. */
body[data-arcade="bubbles"] .arc-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:440px;margin-inline:auto}
body[data-arcade="bubbles"] .arc-settings label:first-child{grid-column:1/-1;max-width:none;width:100%}
body[data-arcade="bubbles"] .arc-settings label{min-width:0;display:grid;gap:5px;text-align:left}
body[data-arcade="bubbles"] .arc-settings select{min-width:0;width:100%;max-width:100%;font-size:13px}
body[data-arcade="bubbles"] .arc-settings label:first-child select{font-size:15px}