/* Names of Allah — Luminous Garden. Respectful, non-punitive, bright SalamGames identity. */
:root{--na-violet:#7c3aed;--na-purple:#9333ea;--na-indigo:#4f46e5;--na-sky:#0ea5e9;--na-teal:#14b8a6;--na-gold:#fbbf24;--na-ink:#312e81;--na-muted:#64748b;--na-panel:#fff;--na-shadow:0 9px 0 rgba(91,33,182,.12);--na-press:0 5px 0 rgba(76,29,149,.18)}
*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0}html{background:#eef2ff}body.names-garden{min-height:100dvh;overflow:hidden;font-family:'Nunito',system-ui,sans-serif;color:#1e293b;background:radial-gradient(circle at 13% 12%,rgba(251,191,36,.26),transparent 20%),radial-gradient(circle at 90% 24%,rgba(34,211,238,.26),transparent 24%),linear-gradient(145deg,#ede9fe,#f0f9ff 50%,#fdf2f8);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.names-garden button,.names-garden input,.names-garden select{font:inherit}.names-garden button,.names-garden a{touch-action:manipulation}.names-garden button{cursor:pointer}.names-garden button:disabled{cursor:default}.names-garden :focus-visible{outline:4px solid #facc15;outline-offset:3px}.skip-link{position:fixed;left:10px;top:-80px;z-index:500;padding:10px 14px;border-radius:12px;background:#111827;color:#fff;font-weight:900}.skip-link:focus{top:10px}
.names-backdrop{position:fixed;inset:0;pointer-events:none;overflow:hidden}.names-backdrop::before,.names-backdrop::after{content:"";position:absolute;inset:-18%;opacity:.16;background-image:linear-gradient(30deg,transparent 48%,#7c3aed 49% 51%,transparent 52%),linear-gradient(150deg,transparent 48%,#0ea5e9 49% 51%,transparent 52%);background-size:92px 54px;animation:na-drift 28s linear infinite}.names-backdrop::after{inset:-25%;opacity:.09;background-size:130px 76px;animation-direction:reverse;animation-duration:42s}.sparkle-layer{position:fixed;inset:0;z-index:220;pointer-events:none;overflow:hidden}.na-sparkle{position:absolute;top:-36px;animation:na-fall var(--fall-time,3s) linear forwards}
.names-app{position:relative;z-index:1;width:min(1180px,100%);height:100dvh;margin:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}.names-topbar{min-height:54px;padding:5px 8px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border:2px solid rgba(255,255,255,.9);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 8px 28px rgba(76,29,149,.1);backdrop-filter:blur(12px)}.home-link,.top-action{min-height:44px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:14px;padding:0 12px;color:#5b21b6;background:#ede9fe;font-weight:1000;text-decoration:none}.top-action{justify-self:end}.brand-mini{display:flex;align-items:center;gap:7px;color:#6d28d9;font-weight:1000}.brand-mini span{font-size:1.35rem}
.names-stage{position:relative;min-height:0;overflow:hidden;border:4px solid rgba(255,255,255,.9);border-radius:30px;background:rgba(255,255,255,.7);box-shadow:0 18px 55px rgba(76,29,149,.16)}.names-state{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}.names-state[hidden]{display:none!important}
.start-screen{padding:clamp(16px,3vw,34px);display:grid;grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);gap:clamp(15px,3vw,34px);align-items:center}.garden-hero{text-align:center}.garden-emblem{width:clamp(124px,19vw,190px);aspect-ratio:1;margin:0 auto 16px;display:grid;place-items:center;border-radius:38% 62% 50% 50%;background:conic-gradient(from 25deg,#fbbf24,#f472b6,#8b5cf6,#38bdf8,#34d399,#fbbf24);box-shadow:0 13px 0 rgba(109,40,217,.14),0 0 0 11px rgba(255,255,255,.65);animation:na-breathe 4s ease-in-out infinite}.garden-emblem span{width:72%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#fff;color:#7c3aed;font-size:clamp(2.5rem,7vw,4.8rem);font-weight:1000}.eyebrow{margin:0 0 4px;color:#7c3aed;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:1000}.garden-hero h1{margin:0;color:#4338ca;font-size:clamp(2.3rem,6vw,4.4rem);line-height:.98;font-weight:1000;text-wrap:balance}.garden-hero h1 span{display:block;color:#9333ea}.hero-copy{max-width:560px;margin:14px auto 0;color:#475569;font-weight:800;line-height:1.55}.respect-note{margin:14px auto 0;padding:10px 12px;border:2px solid #fde68a;border-radius:16px;background:#fffbeb;color:#92400e;font-size:.82rem;font-weight:900}
.setup-panel{padding:clamp(17px,3vw,28px);border:3px solid #ddd6fe;border-radius:28px;background:linear-gradient(155deg,#fff,#faf5ff);box-shadow:var(--na-shadow)}.setup-panel h2{margin:0 0 4px;color:#5b21b6;font-size:1.3rem}.setup-intro{margin:0 0 14px;color:#64748b;font-size:.88rem;font-weight:800}.setup-label{display:block;margin:14px 0 7px;color:#475569;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:1000}.choice-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.choice-row.two{grid-template-columns:1fr 1fr}.setup-choice{min-height:56px;padding:8px;border:2px solid #ddd6fe;border-radius:18px;background:#fff;color:#4c1d95;font-weight:1000;box-shadow:0 4px 0 rgba(109,40,217,.12);transition:.15s ease}.setup-choice small{display:block;font-size:.66rem;color:#64748b;font-weight:800}.setup-choice[aria-pressed=true]{color:#fff;border-color:#7c3aed;background:linear-gradient(135deg,#8b5cf6,#6366f1);box-shadow:0 5px 0 #5b21b6}.setup-choice[aria-pressed=true] small{color:#ede9fe}.setup-choice:hover{transform:translateY(-1px)}.primary-button,.secondary-button{width:100%;min-height:54px;padding:11px 16px;border-radius:18px;font-weight:1000;transition:.15s ease}.primary-button{border:0;color:#fff;background:linear-gradient(135deg,#14b8a6,#0ea5e9);box-shadow:0 6px 0 #0f766e}.secondary-button{border:2px solid #c4b5fd;color:#5b21b6;background:#f5f3ff;box-shadow:0 4px 0 #ddd6fe}.start-button{margin-top:18px;font-size:1.08rem}.primary-button:hover,.secondary-button:hover{transform:translateY(-2px)}.primary-button:active,.secondary-button:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(30,41,59,.18)}.progress-note{min-height:21px;margin:10px 0 0;text-align:center;color:#64748b;font-size:.8rem;font-weight:900}
.play-screen{display:grid;grid-template-rows:auto minmax(0,1fr);background:linear-gradient(180deg,#f5f3ff,#f0fdfa)}.names-hud{padding:10px 13px;color:#fff;background:linear-gradient(120deg,#6d28d9,#8b5cf6 54%,#0ea5e9);box-shadow:0 7px 20px rgba(109,40,217,.24);z-index:2}.hud-row{display:grid;grid-template-columns:44px repeat(3,1fr);gap:7px;align-items:center}.exit-button{min-width:44px;min-height:44px;border:0;border-radius:13px;background:rgba(255,255,255,.19);color:#fff;font-size:1.3rem;font-weight:1000}.hud-stat{text-align:center}.hud-stat strong{display:block;line-height:1.05;font-size:1.08rem}.hud-stat>span{display:block;margin-top:3px;color:#ede9fe;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;font-weight:1000}.round-track{height:7px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.24);overflow:hidden}.round-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#fde047,#fb923c);transition:width .3s ease}
.play-scroll{min-height:0;overflow-y:auto;padding:clamp(12px,2.5vw,24px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(330px,1.08fr);gap:clamp(12px,2.4vw,22px);align-items:stretch}.clue-card{height:100%;min-height:300px;padding:clamp(18px,3vw,30px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:3px solid #ddd6fe;border-radius:28px;background:linear-gradient(145deg,#fff,#faf5ff);box-shadow:var(--na-shadow);position:relative;overflow:hidden}.clue-card::before{content:"";position:absolute;width:180px;height:180px;right:-85px;top:-85px;border-radius:50%;background:rgba(251,191,36,.2)}.category-pill{padding:6px 11px;border-radius:999px;color:#5b21b6;background:#ede9fe;font-size:.72rem;font-weight:1000}.clue-symbol{margin:15px 0 8px;font-size:clamp(3rem,8vw,5.4rem);line-height:1;filter:drop-shadow(0 6px 7px rgba(76,29,149,.14))}.clue-label{margin:0;color:#64748b;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:1000}.clue-meaning{margin:4px 0 8px;color:#4c1d95;font-size:clamp(1.35rem,3.4vw,2.2rem);line-height:1.16;font-weight:1000;text-wrap:balance}.clue-help{margin:0;color:#64748b;font-size:.86rem;font-weight:800;line-height:1.45}.answer-column{min-width:0;display:flex;flex-direction:column;justify-content:center}.name-entry{padding:clamp(15px,2.7vw,23px);border:3px solid #bfdbfe;border-radius:26px;background:linear-gradient(145deg,#fff,#eff6ff);box-shadow:0 8px 0 rgba(14,165,233,.11)}.name-entry label{display:block;margin-bottom:8px;color:#4338ca;text-align:center;font-weight:1000}.entry-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.name-input{width:100%;min-width:0;min-height:52px;padding:10px 12px;border:3px solid #c4b5fd;border-radius:15px;background:#fff;color:#312e81;font-size:1rem;font-weight:1000}.name-input::placeholder{color:#94a3b8}.check-button{min-width:92px;min-height:52px;border:0;border-radius:15px;color:#fff;background:linear-gradient(135deg,#22c55e,#14b8a6);box-shadow:0 5px 0 #047857;font-weight:1000}.entry-feedback{min-height:24px;margin:8px 0 0;text-align:center;color:#5b21b6;font-size:.86rem;font-weight:900}.hint-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.hint-button{min-height:46px;padding:8px;border:2px solid #fde68a;border-radius:15px;background:#fffbeb;color:#92400e;font-weight:1000}.hint-button.reveal{border-color:#ddd6fe;background:#faf5ff;color:#6d28d9}.hint-button:disabled{opacity:.5}.letter-hint{min-height:36px;margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.letter-tile{min-width:31px;height:36px;padding:0 6px;display:grid;place-items:center;border:2px solid #ddd6fe;border-radius:10px;background:#fff;color:#6d28d9;font-weight:1000}.letter-tile.blank{color:#c4b5fd}.letter-tile.space{min-width:10px;border:0;background:transparent}
.reveal-card{margin-top:11px;padding:14px;border:3px solid #a7f3d0;border-radius:22px;background:linear-gradient(145deg,#ecfdf5,#fff);text-align:center}.reveal-arabic{margin:0;color:#065f46;font-family:serif;font-size:clamp(2.3rem,7vw,4rem);line-height:1.25}.reveal-name{margin:5px 0 0;color:#5b21b6;font-size:1.35rem;font-weight:1000}.reveal-meaning{margin:2px 0;color:#0f766e;font-weight:1000}.reveal-explanation{margin:8px 0 0;color:#475569;font-size:.86rem;font-weight:800;line-height:1.45}.reveal-note{margin:7px 0 0;padding-top:7px;border-top:1px solid #d1fae5;color:#64748b;font-size:.77rem;font-weight:800}.next-button{margin-top:10px}.gentle-note{margin:9px 0 0;text-align:center;color:#64748b;font-size:.74rem;font-weight:800}
.result-screen,.gallery-screen{padding:clamp(16px,4vw,38px);background:linear-gradient(155deg,#f5f3ff,#ecfeff 55%,#fff7ed)}.result-screen{display:grid;place-items:center}.result-card{width:min(100%,650px);padding:clamp(20px,5vw,42px);text-align:center;border:4px solid #ddd6fe;border-radius:32px;background:#fff;box-shadow:0 13px 0 rgba(109,40,217,.12)}.result-emblem{font-size:clamp(4rem,10vw,7rem);line-height:1;animation:na-breathe 3.2s ease-in-out infinite}.result-card h2{margin:12px 0 4px;color:#5b21b6;font-size:clamp(2rem,5vw,3rem)}.result-message{margin:0;color:#64748b;font-weight:800}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.result-stat{padding:13px 7px;border:2px solid #e2e8f0;border-radius:18px;background:#f8fafc}.result-stat strong{display:block;color:#6d28d9;font-size:1.3rem}.result-stat span{color:#64748b;font-size:.7rem;font-weight:900}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-actions .primary-button{grid-column:1/-1}
.gallery-screen{overflow-y:auto}.gallery-head{max-width:900px;margin:0 auto 15px;text-align:center}.gallery-head h2{margin:0;color:#5b21b6;font-size:clamp(1.8rem,4vw,2.8rem)}.gallery-head p{margin:5px 0;color:#64748b;font-weight:800}.gallery-controls{max-width:900px;margin:0 auto 12px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.gallery-back{width:auto;min-width:118px}.gallery-filter{display:flex;justify-content:flex-end;gap:7px}.filter-button{min-height:44px;padding:7px 12px;border:2px solid #ddd6fe;border-radius:14px;background:#fff;color:#5b21b6;font-weight:1000}.filter-button[aria-pressed=true]{color:#fff;background:#7c3aed}.names-grid{max-width:900px;margin:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.name-tile{min-height:112px;padding:8px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #e2e8f0;border-radius:18px;background:rgba(255,255,255,.86);text-align:center;overflow:hidden}.name-tile.locked{color:#64748b;background:rgba(248,250,252,.82)}.name-tile.discovered{border-color:#60a5fa;background:#eff6ff}.name-tile.remembered{border-color:#34d399;background:#ecfdf5;box-shadow:inset 0 0 0 2px rgba(16,185,129,.09)}.tile-number{display:block;font-size:.66rem;font-weight:1000}.tile-arabic{display:block;margin:4px 0;font-family:serif;font-size:1.28rem;line-height:1.15}.tile-name{display:block;font-size:.68rem;line-height:1.1;font-weight:1000}.tile-status{display:block;margin-top:5px;font-size:.54rem;line-height:1;text-transform:uppercase;letter-spacing:.03em;font-weight:1000}.name-tile.locked .tile-status{color:#64748b}.name-tile.discovered .tile-status{color:#1d4ed8}.name-tile.remembered .tile-status{color:#047857}.empty-gallery{grid-column:1/-1;padding:30px;text-align:center;color:#64748b;font-weight:900}
.error-card{border-color:#fecdd3}.error-card h2{color:#be123c}
@keyframes na-drift{to{transform:translate3d(92px,54px,0)}}@keyframes na-breathe{50%{transform:translateY(-7px) rotate(2deg)}}@keyframes na-pop{0%{transform:scale(.96);opacity:.45}100%{transform:scale(1);opacity:1}}@keyframes na-fall{to{transform:translateY(110vh) rotate(360deg);opacity:0}}.clue-card.is-entering{animation:na-pop .28s ease-out}
@media(max-width:800px){.names-app{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:6px}.names-topbar{min-height:48px;border-radius:16px}.home-link .home-word{display:none}.brand-mini{font-size:.85rem}.names-stage{border-width:3px;border-radius:24px}.start-screen{grid-template-columns:1fr;align-content:start;gap:14px;padding:18px}.garden-emblem{width:112px;margin-bottom:10px}.garden-emblem span{font-size:3.2rem}.garden-hero h1{font-size:2.55rem}.hero-copy{font-size:.88rem;margin-top:8px}.respect-note{margin-top:9px}.setup-panel{padding:14px;border-radius:23px}.play-scroll{grid-template-columns:1fr;align-content:start;gap:10px;padding:10px}.clue-card{min-height:auto;padding:13px 14px;border-radius:21px}.clue-symbol{font-size:2.7rem;margin:8px 0 4px}.clue-meaning{font-size:1.2rem}.name-entry{padding:12px;border-radius:20px}.reveal-arabic{font-size:2.5rem}.names-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.result-screen,.gallery-screen{padding:14px}.result-card{padding:18px;border-radius:24px}.result-actions{margin-top:6px}}
@media(max-width:430px){.choice-row{gap:6px}.setup-choice{min-height:50px;padding:6px 3px;font-size:.8rem}.setup-choice small{font-size:.59rem}.entry-row{grid-template-columns:1fr}.check-button{width:100%}.hint-actions{grid-template-columns:1fr 1fr}.names-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.name-tile{min-height:105px}.gallery-controls{grid-template-columns:1fr}.gallery-back{width:100%}.gallery-filter{justify-content:center;flex-wrap:wrap}.result-actions{grid-template-columns:1fr}.result-actions .primary-button{grid-column:auto}.result-stats{gap:6px}.result-stat{padding:9px 3px}}
@media(max-height:650px) and (orientation:portrait){.names-topbar{display:none}.names-app{grid-template-rows:minmax(0,1fr)}.start-screen{padding:9px 13px;gap:7px}.garden-emblem{display:none}.garden-hero h1{font-size:2rem}.hero-copy,.respect-note{display:none}.setup-panel{padding:9px 11px}.setup-panel h2{margin-bottom:0}.setup-intro{margin-bottom:6px;font-size:.76rem}.setup-label{margin:7px 0 4px}.setup-choice{min-height:44px}.start-button{margin-top:8px;min-height:48px}.progress-note{margin-top:5px}.clue-card{padding:8px 11px}.clue-symbol{font-size:2rem;margin:3px}.clue-meaning{font-size:1rem}.name-entry{padding:8px}.name-entry label{margin-bottom:4px}.name-input,.check-button{min-height:44px}.hint-button{min-height:44px}.letter-hint{margin-top:5px}.reveal-card{padding:8px;margin-top:6px}.reveal-arabic{font-size:2rem}.reveal-explanation,.reveal-note{display:none}.result-emblem{font-size:3.2rem}.result-card h2{margin-top:5px}.result-stats{margin:8px 0}.name-tile{min-height:96px}}
@media(orientation:landscape) and (max-height:520px){.names-app{grid-template-rows:minmax(0,1fr);padding:5px}.names-topbar{display:none}.start-screen{grid-template-columns:.78fr 1.22fr;padding:9px 15px}.garden-emblem{width:84px;margin-bottom:5px}.garden-emblem span{font-size:2.4rem}.garden-hero h1{font-size:2.05rem}.hero-copy,.respect-note{display:none}.setup-panel{padding:8px 13px}.setup-intro{margin-bottom:4px}.setup-label{margin:5px 0 3px}.setup-choice{min-height:42px}.start-button{min-height:44px;margin-top:7px}.progress-note{display:none}.play-scroll{grid-template-columns:.86fr 1.14fr;padding:7px}.clue-card{min-height:0}.clue-symbol{font-size:1.8rem;margin:2px}.clue-help{display:none}.name-entry{padding:7px 9px}.name-entry label{margin-bottom:3px}.name-input,.check-button{min-height:42px}.hint-actions{margin-top:5px}.hint-button{min-height:42px}.letter-hint{margin-top:4px;min-height:30px}.reveal-card{margin-top:5px;padding:6px}.reveal-arabic{font-size:1.8rem}.reveal-explanation,.reveal-note{display:none}.next-button{margin-top:5px;min-height:44px}.gentle-note{display:none}.result-screen{padding:7px}.result-card{padding:9px 18px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;text-align:left;align-items:center}.result-emblem{grid-row:1/4;font-size:3.5rem}.result-card h2{font-size:1.75rem;margin:0}.result-stats,.result-actions{grid-column:1/-1;width:100%;margin:4px 0}.result-actions{grid-template-columns:repeat(3,1fr)}.result-actions .primary-button{grid-column:auto}.gallery-screen{padding:8px}.gallery-head p{display:none}.gallery-head h2{font-size:1.5rem}.names-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.name-tile{min-height:90px}.tile-arabic{font-size:1rem;margin:2px 0}.tile-name{font-size:.56rem}}
@media(min-width:1200px){.names-stage{max-height:900px}.name-input{font-size:1.08rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.names-backdrop{display:none}}