/* «يلا نتعلم» (the owner named it, 2026-11-02): open to everyone, in the games' day sky and candy colours, and with nothing about play on it
   (the owner: «شيل اي شي يتعلق باللعب عشان مايكون فيه تشتيت وقت الدراسة»): no link to the games, no word or picture of them.
   Loaded after games/games.css, whose bar, hero and cards it shares. One card per school stage, one page per stage. */
.lName { font: 800 1.35rem/1.2 var(--display); color: #0B6F73; }
.lWordBig { width: clamp(224px, 58vw, 512px); aspect-ratio: 640 / 250; overflow: visible; }
.kLogo.l .kWith { background: #0E9A97; box-shadow: 0 4px 0 #0A6B6E; }
.lIntro { text-wrap: balance; }

/* each stage's colours: its candy key (--c, --d, --i) and the sky behind it (--a, --b) */
.s0 { --c: #FF8FB1; --d: #DB5C86; --i: #4A0C24; --a: #FFE0EA; --b: #FFB9D0; }
.s1 { --c: #FFD23F; --d: #D9A90F; --i: #2A1B00; --a: #FFF3C4; --b: #FFDB76; }
.s2 { --c: #5CB2FF; --d: #2F7FD1; --i: #05264A; --a: #D4ECFF; --b: #93CDFF; }
.s3 { --c: #A98BFF; --d: #7355DB; --i: #1E0F5C; --a: #E6DEFF; --b: #BFAEFF; }

/* the four stages: side by side on a wide screen, two by two on a phone */
.lGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.lStage .kArt { height: 176px; background: linear-gradient(180deg, var(--a), var(--b)); }
.lStage .key { left: 6%; top: 56px; width: min(44%, 104px); aspect-ratio: 1; transform: rotate(-6deg); }
.lStage .lp { position: absolute; right: 3%; top: 12px; width: min(52%, 146px); }
.lStage .kBody { padding: 14px 18px 20px; gap: 6px; }
.lStage .kBody b { font-size: clamp(1.3rem, 5vw, 1.75rem); }
.lStage .kGo { margin-top: 10px; padding: 8px 22px; font-size: 1.15rem; }
.key.small { font-size: 34px; }
/* the pictures: Fluent 3D, in the order of LEARN in tools/games/kids_pics.py */
.lp { display: block; aspect-ratio: 1; background: url(pics.webp?v=2) 0 0 / 800% 100% no-repeat; filter: drop-shadow(0 6px 6px rgba(27, 42, 74, .22)); }
.p0 { background-position: 0% 0%; } .p1 { background-position: 14.2857% 0%; } .p2 { background-position: 28.5714% 0%; } .p3 { background-position: 42.8571% 0%; }

/* a stage's own page: its key and picture, then its lessons */
.lHead { padding: 34px 0 6px; text-align: center; }
.lBadge { position: relative; display: block; width: 200px; height: 150px; margin: 0 auto; }
.lBadge .key { left: 8px; top: 40px; width: 100px; aspect-ratio: 1; transform: rotate(-6deg); }
.lBadge .key.small { font-size: 30px; }
.lBadge .lp { position: absolute; right: 0; top: 0; width: 124px; }
.lHead h1 { margin: 10px 0 0; font: 800 clamp(2.2rem, 8vw, 3.2rem)/1.25 var(--display); }
.lFor { display: inline-block; margin-top: 8px; padding: 5px 18px; border-radius: 999px; background: #fff; color: var(--soft); font-weight: 700; box-shadow: 0 3px 0 #C9E6F7; }
.lCard { max-width: 640px; margin: 22px auto 0; padding: 24px; border-radius: 26px; background: #fff; text-align: center; box-shadow: 0 8px 0 #C9E6F7, 0 16px 34px rgba(27, 42, 74, .12); }
.lCard h2 { margin: 0; font: 800 1.6rem/1.3 var(--display); }
.lCard p { margin: 8px 0 0; color: var(--soft); line-height: 1.8; }
.lLinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.lLinks a { padding: 8px 18px; border-radius: 14px; background: var(--sun); color: var(--sunInk); text-decoration: none; font: 800 1.1rem/1.3 var(--display); box-shadow: 0 4px 0 var(--sunD); }
.lSubjects a { padding: 12px 34px; font-size: 1.5rem; border-radius: 18px; }
.lLinks a:hover, .lLinks a:focus-visible { transform: translateY(-2px); outline: none; }
/* KG3's two ways in, one button each */
.lTracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 640px; margin: 22px auto 0; }
.lTrack { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 20px; border-radius: 26px; background: #fff; color: inherit; text-align: center; text-decoration: none; box-shadow: 0 8px 0 #C9E6F7, 0 16px 34px rgba(27, 42, 74, .12); }
a.lTrack:hover, a.lTrack:focus-visible { transform: translateY(-2px); outline: none; }
.lTrack b { font: 800 clamp(1.25rem, 5.2vw, 1.7rem)/1.3 var(--display); }
.lTrack small { color: var(--soft); font-weight: 700; font-size: .95rem; }
.lTrackArt { display: block; width: min(100%, 190px); height: auto; filter: drop-shadow(0 6px 6px rgba(27, 42, 74, .22)); }
.lTrack.soon { opacity: .62; }

@media (max-width: 980px) { .lGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .lGrid { gap: 14px; margin-top: 22px; }
  .lStage .kArt { height: 148px; }
  .lStage .key { top: 54px; }
  .lStage .kBody { padding: 12px 14px 16px; }
  .key.small { font-size: 24px; }
  .lStage .key:not(.small) { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .lLinks a:hover { transform: none; } }