/* Awwab — the "night journey" surface of the Knowledge game (game.css), shared
   by /cards and /learn: deep emerald night sky, a faint gold khatam (8-point
   star) lattice, the lit mihrab arch, star medals and one accent per theme.
   Tokens match game.css exactly. Everything is scoped under .night. */

.night {
  --night: #06170f; --em-900: #0a2017; --em-800: #0f2c20; --em-700: #163a2a;
  --g-gold: #e2c477; --g-gold-2: #c8a046; --parch: #f3efe6; --mist: #b9c6bb; --mist-2: #93a597;
  --ok: #7fd39a; --no: #ef8f86; --amber: #f2a65a; --g-line: rgba(226,196,119,0.2); --g-card: rgba(255,255,255,0.045);
  --ac: var(--g-gold);
  --khatam: polygon(50% 0, 61.5% 22.3%, 85.4% 14.6%, 77.7% 38.5%, 100% 50%, 77.7% 61.5%, 85.4% 85.4%, 61.5% 77.7%, 50% 100%, 38.5% 77.7%, 14.6% 85.4%, 22.3% 61.5%, 0 50%, 22.3% 38.5%, 14.6% 14.6%, 38.5% 22.3%);
  color: var(--parch);
  background:
    radial-gradient(900px 480px at 85% -8%, rgba(226,196,119,0.13), transparent 62%),
    radial-gradient(700px 520px at -10% 30%, rgba(95,211,181,0.06), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23e2c477' stroke-opacity='0.055' stroke-width='1'><polygon points='48.0,18.0 56.8,26.8 69.2,26.8 69.2,39.2 78.0,48.0 69.2,56.8 69.2,69.2 56.8,69.2 48.0,78.0 39.2,69.2 26.8,69.2 26.8,56.8 18.0,48.0 26.8,39.2 26.8,26.8 39.2,26.8'/><path d='M48 0v18M48 78v18M0 48h18M78 48h18M69.2 26.8 96 0M26.8 26.8 0 0M69.2 69.2 96 96M26.8 69.2 0 96'/></g></svg>"),
    linear-gradient(170deg, var(--em-900), var(--night) 55%, #08200f);
}
.night :focus-visible { outline: 2px solid var(--g-gold); outline-offset: 3px; border-radius: 10px; }
.night [tabindex="-1"]:focus { outline: none; }
.night .btn { border: 0; cursor: pointer; gap: 8px; font-family: inherit; }
.night .btn-ghost { border: 1px solid rgba(243,239,230,0.28); color: var(--parch); }
.night .btn-ghost:hover { border-color: rgba(226,196,119,0.7); }
.night .btn-primary { box-shadow: 0 10px 30px -14px rgba(226,196,119,0.7); }
.night .btn svg { width: 17px; height: 17px; }

/* Khatam glyph: an accent star with an icon inside (theme tiles, deck covers) */
.khatam { width: 56px; height: 56px; flex: none; display: grid; place-items: center; color: var(--ac);
  background: color-mix(in srgb, var(--ac) 16%, transparent); clip-path: var(--khatam); }
.khatam svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Lit mihrab arch with hanging lamp (decorative SVG, see archSvg in card.js) */
.arch-art { pointer-events: none; }
.arch-art .lamp-glow { animation: lamp 4.5s ease-in-out infinite; transform-origin: 80px 84px; }
@keyframes lamp { 50% { opacity: .55; transform: scale(.92); } }

/* Star medal (khatam with ring), as on /play */
.medal .m-out { fill: color-mix(in srgb, var(--mc) 22%, #0b2419); stroke: var(--mc); stroke-width: 1.4; }
.medal .m-in { fill: none; stroke: color-mix(in srgb, var(--mc) 55%, transparent); stroke-width: 1; }
.medal .m-ic { color: var(--mc); }

/* God / الله in UI chrome: the site's shining gold, tuned for the dark sky */
.night .divine { background-image: linear-gradient(100deg, var(--g-gold-2) 0%, #fff1c4 28%, var(--g-gold) 50%, #fff1c4 72%, var(--g-gold-2) 100%); background-size: 220% 100%; }

@media (prefers-reduced-motion: reduce) {
  .arch-art .lamp-glow, .night .divine, .night .gild-anim { animation: none !important; }
}