.motion-preview{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:17px auto 8px;position:relative;z-index:3}.motion-preview button{border:1px solid #dfc6e9;background:#fffaf4;border-radius:14px;padding:9px 13px;font-weight:800;font-size:11px;box-shadow:0 3px 0 #e2cce8;min-height:36px}.motion-preview button:hover,.motion-preview button[aria-pressed=true]{background:#a361d8;color:white;border-color:#8c4fb9;box-shadow:0 3px 0 #783ba8}.motion-toggle{display:block;margin:10px auto 2px;border:0;background:transparent;color:#8b5a9c;font-size:10px;min-height:32px;padding:6px 12px;text-decoration:underline;text-underline-offset:4px}.motion-toggle[aria-pressed=false]{color:#a34366;background:#fff0d4;border-radius:12px}.live-mascot-label{color:#a253b7!important}.result-mascot{width:140px;height:110px;position:relative;margin:-12px auto 7px}.result-mascot canvas{width:140px;height:110px;display:block;position:relative;z-index:1}.result-mascot .overlay-icon{position:absolute;right:-5px;bottom:5px;width:28px;height:28px;font-size:15px;border-radius:50%;margin:0;z-index:2}.character-dialog>.motion-toggle{margin:-15px auto 13px}#animation-caption{display:block;font-size:10px;color:#92749f;margin-top:5px}.welcome-art canvas{filter:drop-shadow(0 5px 1px #713b8512)}
@media(max-width:760px){.motion-preview{gap:4px}.motion-preview button{padding:8px;font-size:10px}.welcome-card{align-self:center}.result-mascot{width:120px;height:94px}.result-mascot canvas{width:120px;height:94px}}
@media(max-width:480px){.galaxy-hero{display:grid;grid-template-columns:1fr;gap:14px}.galaxy-hero>div:first-child{z-index:auto}.galaxy-hero h1{max-width:none}.hero-copy{max-width:320px}.welcome-card{position:relative;right:auto;top:auto;width:100%;min-height:0;z-index:1;border:1px solid #edd3eb;border-radius:28px;background:radial-gradient(ellipse at 50% 30%,#f9d7e5,transparent 60%),linear-gradient(135deg,#fff6d9,#f6e7ff);padding:5px 10px 12px;box-shadow:0 5px 0 #ead3ee}.welcome-art{height:235px}.welcome-art #dono-avatar{width:260px;height:238px}.welcome-caption{display:block}.welcome-caption strong{display:block}.welcome-caption strong #hero-character-name{font-size:19px}.welcome-caption .tiny-label{font-size:8px}.motion-preview{margin-top:12px;gap:8px}.motion-preview button{padding:10px 16px;font-size:11px}.hello-bubble{display:block;right:10px;top:13px;font-size:9px;max-width:140px}.star-a{left:15%;top:70px}.star-b{right:12%;top:170px}.candy-one{left:15%;top:63%}.candy-two{right:15%;top:30%}.result-mascot{height:86px;width:110px;margin-top:-16px}.result-mascot canvas{width:110px;height:86px}.overlay-card{padding-top:20px}.character-dialog>.motion-toggle{font-size:9px;margin-top:-10px}}

/* All-five motion studio. Controls wrap in both Arabic and English on a phone. */
.crew-studio{border:1px solid #e7d3ee;border-radius:20px;background:linear-gradient(120deg,#fff2e4,#f2e2fc);padding:12px 12px 9px;margin:0 0 14px}.crew-moves{margin:0;gap:7px}.crew-moves button{min-height:40px;padding:9px 13px}.crew-studio p{text-align:center;margin:10px 0 1px;color:#865398;font-size:11px;font-weight:700}.crew-studio+.motion-toggle{margin:0 auto 16px}.character-card:focus-visible,.motion-preview button:focus-visible{outline:3px solid #9155cb;outline-offset:4px}.character-card[aria-pressed=true] canvas{filter:drop-shadow(0 6px 5px #9a50c027)}
@media(max-width:480px){.crew-studio{padding:10px 8px;border-radius:16px}.crew-moves{gap:6px}.crew-moves button{padding:8px 10px;font-size:10px;min-height:40px}.crew-studio p{font-size:10px}.character-dialog .crew-heading{padding-bottom:12px}.motion-preview button{min-height:40px}.welcome-card .motion-preview{max-width:350px;margin-inline:auto}.character-card canvas{width:130px}.character-dialog .crew-choice{position:sticky;bottom:-18px;z-index:4;background:#fffaf4f5;padding:12px;border-radius:18px;border:1px solid #ead4ed;backdrop-filter:blur(10px)}.character-dialog .crew-choice .primary{margin-top:8px}.character-dialog #character-choice-description,.character-dialog #character-choice-flavor{display:none}}
html[data-view=play] .overlay[data-result=lost] .result-mascot{width:230px;height:150px;margin:-8px auto 0}html[data-view=play] .overlay[data-result=lost] #result-character{width:230px;height:164px;left:0;bottom:0}