/* KulliQ — الترفيه: the section's own look («ليلة اللعب», chosen 2026-10-30): the games' night sky, sun yellow, and the
   KulliQ mark with coloured squares. Loaded after styles.css, which still draws the shared footer. */
:root {
  --night: #15173D; --night-2: #1F2250; --night-3: #262A5C; --night-line: #2E3373; --soft: #C3C6EC;
  --sun: #FFD23F; --sun-d: #D9A90F; --sun-ink: #2A1B00;
  --display: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
body.fun { background: var(--night); color: #fff; }

.funBar { position: sticky; top: 0; z-index: 20; background: rgba(21, 23, 61, .94); border-bottom: 1px solid var(--night-3); }
.funNav { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.funBrand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.funBrand svg { width: 42px; height: 42px; flex: none; }
.funName { font-weight: 700; font-size: 1.3rem; }
.funName b { color: var(--sun); }
.funPill { font: 800 1.1rem/1.6 var(--display); padding: 0 .75rem; border-radius: 999px; background: var(--sun); color: var(--sun-ink); }
.funHome { color: var(--soft); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45rem .9rem; border-radius: 12px; border: 1px solid var(--night-line); white-space: nowrap; }
.funHome:hover, .funHome:focus-visible { color: #fff; border-color: var(--soft); outline: none; }

.funMain { position: relative; overflow: hidden; padding-bottom: 12px; }
.sky { position: absolute; inset: 0; pointer-events: none; }
.sky i { position: absolute; border-radius: 50%; background: var(--soft); }
.sky svg { position: absolute; }
.funHero { position: relative; padding: 40px 0 6px; }
.funHero h1 { margin: 0; font: 800 clamp(2.6rem, 8vw, 4.2rem)/1.2 var(--display); }
.funHero p { margin: 6px 0 0; color: var(--soft); font-size: 1.1rem; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: .9rem; color: var(--soft); margin-bottom: 6px; }
.crumbs a { color: var(--soft); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs b { color: #fff; font-weight: 600; }

.funGrid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 28px; }
.funCard { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: var(--night-2); border: 2px solid transparent; color: #fff; text-decoration: none; transition: transform .15s, border-color .15s; }
.funCard:hover, .funCard:focus-visible { transform: translateY(-3px); border-color: var(--night-line); outline: none; }
.funCard.new { border-color: var(--sun); }
.funCard .ic { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.funCard b { font: 800 1.6rem/1.3 var(--display); }
.funCard .d { color: var(--soft); }
.funCard .go { margin-top: auto; padding-top: 6px; color: var(--sun); font-weight: 700; }
.keycap { background: var(--sun); box-shadow: 0 5px 0 var(--sun-d); color: var(--sun-ink); font: 800 2rem/1 var(--display); }

@media (max-width: 560px) {
  .funPill { font-size: 1rem; }
  .funHome { font-size: .85rem; padding: .4rem .7rem; }
}
@media (prefers-reduced-motion: reduce) { .funCard { transition: none; } .funCard:hover { transform: none; } }