/* SalamGames Kid-First Game Layer — shared visual and interaction language */
:root{
  --sg-sky:#38bdf8;--sg-sky-deep:#0284c7;--sg-cloud:#fff;--sg-sun:#fbbf24;
  --sg-mint:#34d399;--sg-purple:#8b5cf6;--sg-coral:#fb7185;--sg-ink:#17324d;
  --sg-kid-shadow:0 7px 0 rgba(14,116,144,.20),0 14px 30px rgba(14,116,144,.14);
}
body.sg-kid-game{font-family:'Nunito',system-ui,sans-serif;color:var(--sg-ink);background-color:#e8f8ff;background-image:radial-gradient(circle at 15% 8%,rgba(255,255,255,.94) 0 4%,transparent 4.2%),radial-gradient(circle at 88% 12%,rgba(255,255,255,.82) 0 5%,transparent 5.2%),linear-gradient(180deg,#dff6ff 0%,#f4fbff 52%,#fff9e8 100%);background-attachment:fixed}
body.sg-kid-game.sg-immersive-game{background:linear-gradient(180deg,#075985 0%,#0c4a6e 35%,#172554 100%)}
.sg-kid-world{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sg-kid-world>*{position:absolute;user-select:none;filter:drop-shadow(0 3px 0 rgba(14,116,144,.08))}
.sg-cloud{font-size:clamp(2.2rem,7vw,5rem);opacity:.48;animation:sg-cloud-float 16s ease-in-out infinite}
.sg-cloud.c1{top:9%;left:3%}.sg-cloud.c2{top:23%;right:4%;animation-delay:-7s;transform:scale(.75)}
.sg-star{color:#fbbf24;font-size:clamp(1rem,2vw,1.65rem);animation:sg-twinkle 2.7s ease-in-out infinite}
.sg-star.s1{top:15%;left:17%}.sg-star.s2{top:8%;right:17%;animation-delay:-1s}.sg-star.s3{bottom:16%;right:9%;animation-delay:-2s}
.sg-crescent{top:5.5%;right:7%;font-size:clamp(2rem,4vw,3.4rem);animation:sg-float 5s ease-in-out infinite}
body.sg-kid-game>main,body.sg-kid-game>.wrap,body.sg-kid-game>.game-container,body.sg-kid-game>.app,body.sg-kid-game>.shell{position:relative;z-index:1}
.sg-game-stamp{display:inline-flex;align-items:center;gap:.42rem;margin:0 auto .6rem;padding:.42rem .8rem;border:2px solid #bae6fd;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 0 rgba(14,165,233,.14);color:#0369a1;font-size:.72rem;font-weight:1000;letter-spacing:.055em;text-transform:uppercase}
.sg-game-stamp b{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#8b5cf6);color:#fff;font-size:.86rem}
.sg-quick-card{width:min(100%,31rem);box-sizing:border-box;margin:.35rem auto 1rem;padding:1rem;border:3px solid #bae6fd;border-radius:1.65rem;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,249,255,.97));box-shadow:var(--sg-kid-shadow);text-align:center;position:relative;overflow:hidden}
.sg-quick-card::after{content:'✦';position:absolute;right:.8rem;top:.35rem;color:#fbbf24;font-size:1.4rem;animation:sg-twinkle 2s ease-in-out infinite}
.sg-quick-card strong{display:block;font-size:clamp(1.05rem,4vw,1.35rem);font-weight:1000;color:#17415f;margin-bottom:.18rem}
.sg-quick-card small{display:block;color:#64748b;font-size:.78rem;font-weight:800;margin-bottom:.7rem}
.sg-quick-play,.sg-start-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:.5rem;min-height:56px;padding:.82rem 1.35rem!important;border:0!important;border-radius:1.25rem!important;background:linear-gradient(135deg,#22c55e,#06b6d4)!important;color:#fff!important;font-family:'Nunito',system-ui,sans-serif!important;font-size:clamp(1.05rem,4vw,1.35rem)!important;font-weight:1000!important;line-height:1.1!important;text-decoration:none!important;box-shadow:0 7px 0 #0f9f78,0 12px 24px rgba(16,185,129,.24)!important;cursor:pointer;transform:translateY(0);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.sg-quick-play:hover,.sg-start-cta:hover{filter:saturate(1.08) brightness(1.04);transform:translateY(-2px)}
.sg-quick-play:active,.sg-start-cta:active{transform:translateY(5px)!important;box-shadow:0 2px 0 #0f9f78!important}
.sg-options{width:min(100%,31rem);box-sizing:border-box;margin:.65rem auto;border:2px solid #dbeafe;border-radius:1.25rem;background:rgba(255,255,255,.9);overflow:hidden;text-align:left}
.sg-options>summary{list-style:none;cursor:pointer;padding:.82rem 1rem;text-align:center;color:#475569;font-size:.88rem;font-weight:1000;user-select:none}
.sg-options>summary::-webkit-details-marker{display:none}.sg-options>summary::after{content:'  ▾';color:#0ea5e9}.sg-options[open]>summary::after{content:'  ▴'}
.sg-options-content{padding:.25rem .8rem 1rem}.sg-options-content>*{max-width:100%}
.sg-canvas-invite{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;padding:.72rem 1rem;border:3px solid #fff;border-radius:1.25rem;background:linear-gradient(135deg,#8b5cf6,#38bdf8);color:#fff;font-size:clamp(.95rem,4vw,1.2rem);font-weight:1000;box-shadow:0 7px 0 rgba(76,29,149,.28);pointer-events:none;animation:sg-invite 1.6s ease-in-out infinite;text-align:center;white-space:nowrap}
.sg-kid-game h1{letter-spacing:-.035em;text-wrap:balance}.sg-kid-game .card,.sg-kid-game .panel,.sg-kid-game .game-card{backdrop-filter:saturate(1.05)}
@keyframes sg-cloud-float{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-8px)}}
@keyframes sg-twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.18) rotate(18deg)}}
@keyframes sg-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-9px) rotate(4deg)}}
@keyframes sg-invite{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-55%) scale(1.045)}}
@media(max-width:480px){.sg-kid-world .c2,.sg-kid-world .s3{display:none}.sg-quick-card{padding:.82rem;border-radius:1.35rem}.sg-quick-play,.sg-start-cta{min-height:52px}.sg-game-stamp{font-size:.65rem;margin-bottom:.4rem}}
@media(prefers-reduced-motion:reduce){.sg-kid-world>*,.sg-quick-card::after,.sg-canvas-invite{animation:none!important}.sg-quick-play,.sg-start-cta{transition:none!important}}