/* Games page ([kekri_games]). The game itself is styled in kekri-quest.css. */

.kekri-root .gm-top { position: relative; isolation: isolate; color: var(--kk-night-ink); background: var(--kk-night-0); overflow: hidden; }
.kekri-root .gm-top__scene, .kekri-root .gm-top__scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.kekri-root .gm-top__in { padding-block: 132px var(--kk-s-7); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--kk-s-6); align-items: end; }
.kekri-root .gm-top__in .kk-lede { max-width: 52ch; }
.kekri-root .gm-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kk-s-4); }
.kekri-root .gm-facts li { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(232, 237, 234, .2); font-size: var(--kk-t-14); color: var(--kk-night-ink-2); }
.kekri-root .gm-facts b { font-size: var(--kk-t-24); font-weight: 500; color: var(--kk-night-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .kekri-root .gm-top__in{ grid-template-columns: 1fr; padding-top: 112px; } }

.kekri-root .gm-top__text { display: grid; gap: var(--kk-s-5); }
.kekri-root .gm-more__head { display: grid; gap: var(--kk-s-4); }
.kekri-root .gm-play { background: var(--kk-night-0); color: var(--kk-night-ink); padding-block: 0 var(--kk-s-9); }

/* ---- Classroom activities (live on For schools) ---- */
.kekri-root .gm-more__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kk-line); }
.kekri-root .gm-more__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--kk-s-5); align-items: center; padding-block: var(--kk-s-5); border-bottom: 1px solid var(--kk-line); }
.kekri-root .gm-more__n { font: 400 var(--kk-t-12)/1 var(--kk-mono); color: var(--kk-ink-3); }
.kekri-root .gm-more__t { display: grid; gap: 4px; }
.kekri-root .gm-more__t { text-decoration: none; }
.kekri-root .gm-more__t:hover b { text-decoration: underline; text-underline-offset: 4px; }
.kekri-root .gm-more__t b { font-weight: 500; font-size: var(--kk-t-20); }
.kekri-root .gm-more__t span { color: var(--kk-ink-2); font-size: var(--kk-t-14); max-width: 70ch; }
@media (max-width: 640px) { .kekri-root .gm-more__list li{ grid-template-columns: 1fr; gap: 8px; } }


/* Keep the original arcade for compatibility without letting it dominate the new experience. */
.kekri-root .gm-legacy{margin-top:clamp(40px,7vw,96px);padding:20px 0;border-top:1px solid #759b8a66;border-bottom:1px solid #759b8a66}
.kekri-root .gm-legacy>summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;color:#dfe9df;padding:15px 4px;font:500 clamp(14px,1.5vw,18px)/1.4 var(--kk-sans)}
.kekri-root .gm-legacy>summary::-webkit-details-marker{display:none}.kekri-root .gm-legacy>summary span:last-child{font-size:13px;color:#ecc58e;text-align:right}.kekri-root .gm-legacy>p{max-width:70ch;margin:8px 0 22px;color:#b8d0c4;font:400 14px/1.6 var(--kk-sans)}
.kekri-root .gm-legacy .kq{margin-top:20px}