/* «يلا نلعب مع KulliQ», the games section (the owner named it, 2026-10-31): the children's day sky of the games
   themselves, white clouds, candy colours; KulliQ's mark of squares turned into a sun-yellow key */
body.kplay {
  --sky1: #5EC4FF; --sky2: #D3F1FF; --ink: #1B2A4A; --soft: #4C5B7A; --sun: #FFD23F; --sunD: #D9A90F; --sunInk: #2A1B00;
  --coral: #FF6B6B; --blue: #3A86FF; --mint: #2EC4B6; --pink: #F472B6;
  --display: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", sans-serif;
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='32' cy='40' r='20'/%3E%3Ccircle cx='58' cy='28' r='26'/%3E%3Ccircle cx='88' cy='38' r='20'/%3E%3Crect x='30' y='38' width='60' height='22' rx='11'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--cloud) 4% 110px / 170px auto no-repeat, var(--cloud) 96% 60px / 210px auto no-repeat,
    linear-gradient(180deg, var(--sky1) 0, var(--sky2) 640px, var(--sky2) 100%);
  color: var(--ink);
}
.kBar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); box-shadow: 0 2px 14px rgba(27, 42, 74, .08); }
.kNav { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.kBrand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.kBrand .kStar { width: 50px; height: 50px; flex: none; }
.kBrand span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.kBrand .kWord { width: 118px; height: 49px; margin: -6px 0 -8px; overflow: visible; }
.kBrand small { font-size: .82rem; font-weight: 700; color: var(--soft); }
.kBrand i, .kWith i { font-style: normal; color: #FFB21A; }
.kSr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kHome { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45rem .9rem; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 #C9E6F7; white-space: nowrap; }
.kHome:hover, .kHome:focus-visible { background: #F3FAFF; outline: none; }

.kMain { padding-bottom: 8px; }
.kHero { padding: 40px 0 10px; text-align: center; }
/* the logo, big: the star and the lettering side by side */
.kLogo { margin: 0; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.5vw, 22px); }
.kStarBig { width: clamp(84px, 24vw, 172px); aspect-ratio: 1; flex: none; filter: drop-shadow(0 10px 14px rgba(46, 31, 134, .22)); }
.kWords { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kWordBig { width: clamp(210px, 54vw, 480px); aspect-ratio: 600 / 250; overflow: visible; }
.kWith { display: inline-block; padding: 4px 18px; border-radius: 999px; background: #6C4BFF; color: #fff; box-shadow: 0 4px 0 #3F2BB0; font: 800 clamp(1rem, 3.4vw, 1.5rem)/1.3 var(--display); }
.kHero p { margin: 14px auto 0; max-width: 560px; color: var(--soft); font-size: 1.15rem; font-weight: 600; }
/* the two sections side by side, at the top of each: «يلا نلعب» and «يلا نتعلم» (learn/) */
.kTabs { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.kTabs a { padding: 9px 22px; border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; font: 800 1.15rem/1.3 var(--display); box-shadow: 0 5px 0 #C9E6F7; }
.kTabs a[aria-current] { background: var(--sun); color: var(--sunInk); box-shadow: 0 5px 0 var(--sunD); }
.kTabs a:focus-visible { outline: 4px solid var(--pink); outline-offset: 3px; }

/* a card per game: its picture, then what it is and «العب» */
.kGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 28px; }
.kCard { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 8px 0 #C9E6F7, 0 16px 34px rgba(27, 42, 74, .12); transition: transform .15s; }
.kCard:hover { transform: translateY(-4px); }
.kCard:focus-visible { outline: 4px solid var(--pink); outline-offset: 4px; }
.kArt { position: relative; height: 230px; overflow: hidden; background: linear-gradient(180deg, #7FD3FF, #CFF0FF); }
.kBody { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; flex: 1; }
.kTags { display: flex; gap: 8px; flex-wrap: wrap; }
.kTags span { font-size: .82rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: #EAF6FF; color: var(--soft); }
.kTags .new { background: var(--sun); color: var(--sunInk); }
.kBody b { font: 800 1.9rem/1.25 var(--display); }
.kBody .d { color: var(--soft); line-height: 1.8; }
.kGo { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 26px; border-radius: 16px;
  background: var(--sun); color: var(--sunInk); box-shadow: 0 5px 0 var(--sunD); font: 800 1.3rem/1.2 var(--display); }
.kSoon { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 26px; border-radius: 28px; border: 3px dashed #9FD3F2; background: rgba(255, 255, 255, .55); }
.kSoon b { font: 800 1.4rem/1.3 var(--display); }
.kSoon span { color: var(--soft); }
.kSoon a { color: var(--blue); font-weight: 700; }

/* the pictures: Fluent 3D from each game's own sprite */
.pk, .pf { position: absolute; background-repeat: no-repeat; filter: drop-shadow(0 6px 6px rgba(27, 42, 74, .22)); }
.pk { background-image: url(keyboard/pics.webp?v=2); background-size: 800% 700%; }
.pf { background-image: url(farm/pics.webp?v=1); background-size: 800% 500%; }
/* «كيبورد الصغار»: three candy keys, each with its thing */
.key { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 22px; font: 800 64px/1 var(--display); color: var(--i);
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), var(--c); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), 0 8px 0 var(--d), 0 14px 20px rgba(27, 42, 74, .2); }
/* «ذاكرة الصور»: three cards fanned on its violet table: a camel, its word, and a card's back */
.kArt.mem { background: radial-gradient(70% 60% at 85% 0%, rgba(176, 150, 255, .55), transparent 70%), linear-gradient(165deg, #5B3FE6 0%, #4330BF 55%, #2B2496 100%); }
.mcard { position: absolute; width: 26%; aspect-ratio: 5 / 6; border-radius: 15% / 12.5%; display: flex; align-items: center; justify-content: center; container-type: inline-size; }
.mcard.mf { background: linear-gradient(180deg, #FFFFFF, #FFF6E6); box-shadow: 0 5px 0 #CDBFF7, 0 10px 14px rgba(12, 8, 60, .35); }
.mcard.mb { box-shadow: 0 5px 0 #22186B, 0 10px 12px rgba(10, 6, 50, .35); }
.mcard.mb svg { display: block; width: 100%; height: 100%; }
.mcard b { font: 800 27cqw/1.5 var(--display); color: #3B2AA0; }
.pm { display: block; width: 74%; aspect-ratio: 1; background: url(memory/pics.webp?v=1) 0 0 / 800% 800% no-repeat; filter: drop-shadow(0 4px 4px rgba(27, 42, 74, .2)); }
.msp { position: absolute; fill: #fff; }
/* «برمج الروبوت»: the robot on its tiles in a navy sky, on its way to the rocket, and two of its commands */
.kArt.bot { background: radial-gradient(60% 50% at 88% 0%, rgba(124, 92, 255, .5), transparent 70%), linear-gradient(180deg, #1F2468 0%, #15184C 60%, #0E1036 100%); }
.rtile { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 22%; background: linear-gradient(160deg, #5FE7B0, #2EC48A); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 6px 0 #178A5E, 0 12px 16px rgba(5, 6, 30, .5); }
.rtile.mid { background: linear-gradient(160deg, #6A7CF0, #4C5BD3); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .38), 0 6px 0 #2A3289, 0 12px 16px rgba(5, 6, 30, .5); }
.rtile.gold { background: radial-gradient(circle at 50% 45%, #FFF3B0 0 22%, #FFD23F 55%, #F5B700 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 6px 0 #B98500, 0 0 26px rgba(255, 210, 63, .55); }
.rbot { position: absolute; width: 21%; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .4)); }
.pr { position: absolute; width: 24%; aspect-ratio: 1; background: url(robot/pics.webp?v=1) 0 0 / 800% 100% no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.rblk { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 50px; height: 56px; border-radius: 14px; color: #fff;
  font: 700 11px/1.1 "IBM Plex Sans Arabic", sans-serif; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--c); box-shadow: 0 4px 0 var(--d), inset 0 2px 0 rgba(255, 255, 255, .35); }
.rblk svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rblk.f { --c: #22B573; --d: #13824F; }
.rblk.r { --c: #2F8FE8; --d: #1C62AB; }
/* «المحقق»: Firas, its boy detective, in a lamp's light over a night city, two case folders and the stamp of a solved case */
.kArt.det { background: radial-gradient(55% 60% at 50% 38%, rgba(255, 200, 69, .28), transparent 70%), linear-gradient(180deg, #1C3560 0%, #0F2040 60%, #0A1527 100%); }
.dsky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70px; }
.dkid { position: absolute; left: 50%; top: 20px; width: 40%; margin-left: -20%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45)); }
.dkid img { display: block; width: 100%; height: auto; }
.dfile { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 25%; padding: 14px 4px 10px; border-radius: 4px 12px 12px 12px;
  background: linear-gradient(170deg, #F2DFB2, #DEC283); color: #18202E; font: 700 12px/1.25 "IBM Plex Sans Arabic", sans-serif; text-align: center;
  box-shadow: 0 10px 16px -8px rgba(0, 0, 0, .55); }
.dfile::before { content: ""; position: absolute; top: -7px; right: 0; width: 40%; height: 11px; border-radius: 6px 6px 0 0; background: #F2DFB2; }
.pd { display: block; width: 58%; aspect-ratio: 1; background: url(detective/pics.webp?v=2) 0 0 / 800% 2700% no-repeat; }
.det { --pdCake: 42.8571% 7.6923%; --pdTrain: 28.5714% 26.9231%; }
.dstamp { position: absolute; right: 30%; bottom: 22px; padding: 3px 8px; border: 2.5px solid #E5534B; border-radius: 7px; transform: rotate(-12deg);
  color: #FF7A70; font: 800 15px/1.2 var(--display); background: rgba(10, 21, 39, .55); }
/* «المزرعة السحرية»: the hill, the barn, the tree, the sun and a cow */
.hill { position: absolute; inset: auto -10% -40% -10%; height: 75%; border-radius: 50%; background: #79D463; }
.hill.near { inset: auto -20% -55% -20%; height: 70%; background: #5BBE4B; }

/* «المحقق» opens a small choice first (the owner, 2026-11-02): the game itself, or the lab of detective games under trial */
.kChoose { position: fixed; inset: 0; z-index: 50; background: rgba(27, 42, 74, .55); display: grid; place-items: center; padding: 16px; overflow: auto; }
.kChooseCard { width: min(100%, 420px); background: #fff; border-radius: 26px; padding: 22px 20px; box-shadow: 0 20px 50px rgba(27, 42, 74, .35); display: grid; gap: 10px; }
.kChooseCard > b { font: 800 1.7rem/1.2 var(--display); }
.kChooseCard > p { margin: -4px 0 4px; color: var(--soft); }
.kOpt { display: grid; gap: 2px; padding: 12px 16px; border-radius: 18px; background: #EAF6FF; color: var(--ink); text-decoration: none; border: 2px solid transparent; }
.kOpt:hover, .kOpt:focus-visible { border-color: var(--blue); outline: none; }
.kOpt.lab { background: #FFF6D6; }
.kOptT { font: 800 1.2rem/1.3 var(--display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kTry { padding: 0 10px; border-radius: 999px; background: var(--coral); color: #fff; font-size: .78rem; line-height: 1.7; }
.kOptD { color: var(--soft); font-size: .92rem; line-height: 1.6; }
.kClose { justify-self: center; border: 0; background: transparent; color: var(--soft); font: 700 1rem/1.3 "IBM Plex Sans Arabic", sans-serif; padding: 6px 12px; cursor: pointer; }
.kClose:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .kCard { transition: none; } .kCard:hover { transform: none; } }