/* Salam Games: one site identity, one navigation contract. Generated HTML uses no framework. */
@import url('/css/nunito-local.css?v=20260919-visual1');
@import url('/css/amiri-local.css?v=20260919-shell1');
:root{--sg-ink:#173653;--sg-blue:#0369a1;--sg-purple:#6d28d9;--sg-header:76px;--sg-bottom:0px;--sg-view:calc(100dvh - var(--sg-header) - var(--sg-bottom))}
html:has(#sg-site-header){scroll-padding-top:calc(var(--sg-header) + 12px);scroll-padding-bottom:calc(var(--sg-bottom) + 12px)}
body[data-sg-page]{font-family:'Nunito',system-ui,sans-serif!important;margin:0!important;padding-top:0!important;padding-bottom:var(--sg-bottom)!important;background:radial-gradient(circle,rgba(255,255,255,.55) 2px,transparent 2px) 0 0/28px 28px,linear-gradient(180deg,#dff6ff,#c6edff 65%,#e6eaff)!important;background-attachment:fixed!important;color:var(--sg-ink)}
body[data-sg-page] :is(h1,h2,h3,h4,p,a,button,input,select,label,summary,small,strong,span,div,li,td,th){font-family:'Nunito',system-ui,sans-serif}
body[data-sg-page] :is([lang="ar"],[lang="ar"] *,[dir="rtl"],.arabic,.arabic *,.arabic-text,.arabic-letter,.choice .glyph,.letter-pill,.tile-arabic,.reveal-arabic,.target-letter,.letter){font-family:'Amiri',serif!important}
/* Deliberately isolated from old global header, nav, button and SVG rules. */
#sg-site-header,#sg-site-header *,#sg-site-mobile,#sg-site-mobile *{box-sizing:border-box;font-family:'Nunito',system-ui,sans-serif;letter-spacing:normal;text-transform:none;text-shadow:none}
#sg-site-header{display:block;position:sticky;top:0;z-index:150;width:100%;max-width:none;height:var(--sg-header);margin:0;padding:0;border:0;border-bottom:2px solid #bae6fd;border-radius:0;background:#fff;box-shadow:0 3px 14px #0759850d;color:var(--sg-ink);isolation:isolate}
#sg-site-header .sg-site-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1240px,100%);height:100%;margin:auto;padding:8px 24px}
#sg-site-header a{text-decoration:none}
#sg-site-header .sg-site-brand{display:flex;align-items:center;flex-shrink:0;gap:9px;min-height:48px;margin:0;padding:0;background:transparent;border:0;border-radius:12px;color:var(--sg-blue);font-size:20px;line-height:1.02;font-weight:1000}
#sg-site-header .sg-site-mark{display:grid;place-items:center;width:44px;height:44px;background:#e0f2fe;border-radius:15px;font-size:29px;line-height:1}
#sg-site-header .sg-site-wordmark{display:flex;flex-direction:column;gap:1px}
#sg-site-header .sg-site-wordmark>span{display:block;font-size:20px;font-weight:1000;line-height:1.02;color:var(--sg-blue);margin:0;padding:0}
#sg-site-header .sg-site-wordmark>span:last-child{color:var(--sg-purple)}
#sg-site-header .sg-site-desktop{display:flex;align-items:center;gap:4px;margin:0;padding:0;border:0;background:none;box-shadow:none;position:static;max-width:none}
#sg-site-header .sg-site-desktop a{display:flex;align-items:center;gap:6px;min-height:44px;padding:10px 12px;border-radius:14px;color:#475569;font-size:14px;font-weight:900;background:transparent;border:0;white-space:nowrap}
#sg-site-header .sg-site-desktop a[aria-current]{background:#e0f2fe;color:#075985;box-shadow:inset 0 -3px #7dd3fc}
#sg-site-header .sg-site-desktop a:hover{background:#f0f9ff;color:#075985}
#sg-site-header .sg-site-desktop a>span,#sg-site-mobile a>span{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}
#sg-site-header .sg-site-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
#sg-site-header .sg-site-profile{display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 10px 5px 5px;border-radius:16px;background:#f3edff;color:#5b21b6;line-height:1.2;font-size:13px;font-weight:900;max-width:156px}
#sg-site-header .sg-site-avatar{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;font-size:25px;overflow:hidden;border-radius:12px}
#sg-site-header .sg-site-avatar img{width:34px!important;height:34px!important;object-fit:cover}
#sg-site-header .sg-site-player{min-width:0;display:flex;flex-direction:column;gap:2px}
#sg-site-header .sg-site-player>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}
#sg-site-header .sg-site-player small{color:#6d28d9;font-size:11px;font-weight:800}
#sg-site-header .sg-site-more{position:relative;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--sg-ink)}
#sg-site-header .sg-site-more summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:8px 10px;list-style:none;font-size:14px;font-weight:900;border:1px solid #dbeafe;border-radius:14px;background:#f8fbff;cursor:pointer}
#sg-site-header .sg-site-more summary::-webkit-details-marker{display:none}
#sg-site-header .sg-site-more summary>span:first-child{display:block;font-size:22px;line-height:1;color:var(--sg-ink)}
#sg-site-header .sg-site-more-label{display:inline;color:var(--sg-ink)}
#sg-site-header .sg-site-more[open] summary{background:#e0f2fe}
#sg-site-header .sg-site-more nav{position:absolute;top:52px;right:0;display:grid;width:236px;max-height:calc(100dvh - var(--sg-header) - var(--sg-bottom) - 20px);overflow-y:auto;padding:8px;margin:0;background:#fff;border:2px solid #dbeafe;border-radius:18px;box-shadow:0 16px 40px #17365326;text-align:left}
#sg-site-header .sg-site-more nav a{display:flex;align-items:center;min-height:44px;padding:9px 12px;border:0;border-radius:10px;background:none;color:#334155;font-size:14px;line-height:1.25;font-weight:800}
#sg-site-header .sg-site-more nav a:hover{background:#f0f9ff;color:#075985}
#sg-site-header .sg-calm-toggle,#sg-site-header .sg-audio-voice{display:block;text-align:left;min-height:44px;width:100%;padding:10px 12px;margin:5px 0 0;border:2px solid #ddd6fe;border-radius:12px;background:#f5f3ff;color:#5b21b6;font-size:14px;font-weight:900;line-height:1.25;cursor:pointer;box-shadow:none}
#sg-site-header .sg-calm-toggle[aria-pressed="true"],#sg-site-header .sg-audio-voice[aria-pressed="true"]{background:#ede9fe;border-color:#a78bfa}
#sg-site-header .sg-calm-toggle:disabled,#sg-site-header .sg-audio-voice:disabled{cursor:default;opacity:1}
html[data-sg-calm="true"] *,html[data-sg-calm="true"] *:before,html[data-sg-calm="true"] *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-sg-calm="true"] :is(.sg-delight-layer,.sparkle-particle,.bg-particle,.confetti,#confetti-container){display:none!important}
html[data-sg-calm="true"] :is(.animate-in,.hiw-card){opacity:1!important;transform:none!important}
#sg-site-header .sg-site-actions>button{position:static!important;inset:auto!important;display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid #dbeafe;border-radius:14px;background:#f0f9ff;color:#075985;font-size:20px;box-shadow:none;transform:none;z-index:auto}
#sg-site-header :focus-visible,#sg-site-mobile :focus-visible{outline:3px solid #7c3aed;outline-offset:3px}
#sg-site-mobile{display:none}
/* Full-height games reserve real space for the shared navigation. */
body.names-garden,body.trivia-arena{overflow-y:auto}
body.names-garden .names-app,body.trivia-arena .trivia-app{height:var(--sg-view);min-height:360px;grid-template-rows:minmax(0,1fr);gap:0}
body.names-garden[data-game-state="start"] .names-app{height:auto;min-height:var(--sg-view);grid-template-rows:minmax(0,1fr)}
body.trivia-arena[data-game-state="start"] .trivia-app{height:auto;min-height:var(--sg-view)}
body.trivia-arena[data-game-state="start"] .game-stage{max-height:none;overflow:visible}
body.trivia-arena[data-game-state="start"] .start-screen{height:auto;overflow:visible}
body[data-sg-page="quran-memorize"] .qp-shell{min-height:var(--sg-view);background:none}
body[data-sg-page="arabic-letter-blitz"]{touch-action:manipulation}
body[data-sg-page="arabic-letter-blitz"] .game-container{height:var(--sg-view);min-height:360px;border-radius:0 0 24px 24px;padding-bottom:0}
body[data-sg-page="arabic-letter-blitz"] #gameScreen{height:var(--sg-view)!important;min-height:360px}
body[data-sg-page="hajj-runner"] #main-content{top:var(--sg-header);bottom:var(--sg-bottom)}
body[data-sg-page="hajj-runner"] .screen-card{max-height:calc(var(--sg-view) - 20px)}
body[data-sg-page^="topics/"] .grid>*{min-width:0}
body[data-sg-page^="topics/"] main h1{font-size:clamp(28px,5vw,48px);font-weight:900;line-height:1.14;color:var(--sg-ink)}
body[data-sg-page^="topics/"] main h2{font-size:clamp(1.25rem,4vw,1.8rem);overflow-wrap:anywhere}
@media(max-width:1000px){#sg-site-header .sg-site-row{gap:8px;padding-inline:16px}#sg-site-header .sg-site-desktop a{padding-inline:8px;gap:4px}#sg-site-header .sg-site-player{display:none}#sg-site-header .sg-site-profile{padding:5px}}
@media(max-width:850px){
 :root{--sg-header:64px;--sg-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 #sg-site-header .sg-site-desktop{display:none}
 #sg-site-header .sg-site-row{padding:6px 12px}
 #sg-site-header .sg-site-brand{font-size:18px;gap:7px}
 #sg-site-header .sg-site-wordmark>span{font-size:18px}
 #sg-site-header .sg-site-mark{width:39px;height:39px;font-size:27px}
 #sg-site-header .sg-site-actions{gap:6px}
 #sg-site-header .sg-site-more-label{display:none}
 #sg-site-mobile{display:flex;justify-content:space-around;align-items:stretch;position:fixed;inset:auto 0 0;z-index:140;height:var(--sg-bottom);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));margin:0;border:0;border-top:2px solid #bae6fd;background:#fff;box-shadow:0 -3px 14px #0759850d}
 #sg-site-mobile a{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;max-width:110px;min-height:48px;margin:0;padding:4px 2px;border:0;border-radius:12px;background:transparent;color:#475569;text-decoration:none;font-size:11px;font-weight:900;line-height:1.2}
 #sg-site-mobile a>span:first-child{font-size:21px;line-height:1.2}
 #sg-site-mobile a[aria-current]{background:#e0f2fe;color:#075985}
 body.trivia-arena .arena-emblem{width:76px;margin-bottom:14px}
 body.trivia-arena .arena-emblem span{font-size:38px}
 body.trivia-arena .hero-zone h1{font-size:32px;line-height:1.1}
 body.trivia-arena .hero-copy{font-size:14px;line-height:1.5}
}
@media print{#sg-site-header,#sg-site-mobile{display:none!important}body[data-sg-page]{background:#fff!important;padding:0!important}}

#sg-site-header .sg-audio-toggle{width:44px;min-width:44px;height:44px;border:2px solid #bae6fd;border-radius:14px;background:#f0f9ff;font:inherit;font-size:22px;cursor:pointer;display:grid;place-items:center;padding:0}
#sg-site-header .sg-audio-toggle:focus-visible{outline:3px solid #7c3aed;outline-offset:2px}
#sg-site-header .sg-audio-volume{display:grid;gap:8px;padding:10px;font-size:14px;font-weight:800;color:#334155}
#sg-site-header .sg-audio-volume input{width:100%;min-height:30px;accent-color:#0d9488}