/*! © 2026 Dr. Oluwaseun Ogunmola · Dr. Ogunmola GameLabs · All rights reserved. Free to play at https://gamelabs.ogunmola.com.ng · Not licensed for re-hosting, copying or reuse. Terms: https://gamelabs.ogunmola.com.ng/terms/ */
body { --accent: #7CC4FF; --accent-deep: #2583F5; --bg1: #E3EEFF; --bg2: #F8FBFF; }
.kk-mascot svg { border-radius: 50%; }

/* Number rows (series, picture patterns) */
.nd-seq { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px auto 4px; max-width: 560px; }
.nd-chip { min-width: 52px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 2px solid #CFE0F5; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 4.6vw, 1.5rem); text-align: center; box-shadow: 0 3px 0 #DCE7F5; }
.nd-chip.q { background: #FFF1F2; border-color: #F3B0B8; color: var(--bad); }
.nd-seq.big .nd-chip { font-size: clamp(1.8rem, 9vw, 2.6rem); padding: 6px 8px; min-width: 0; }

/* Number machine */
.nd-machine { margin: 4px auto; border-collapse: separate; border-spacing: 0 6px; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 4.4vw, 1.45rem); }
.nd-machine th { font-family: var(--body); font-size: .8125rem; color: var(--ink-soft); font-weight: 600; padding: 0 14px; }
.nd-machine td { background: #fff; padding: 8px 20px; text-align: center; border: 2px solid #CFE0F5; }
.nd-machine td:first-child { border-radius: 14px 0 0 14px; }
.nd-machine td:last-child { border-radius: 0 14px 14px 0; }
.nd-machine td:nth-child(2) { border-left: 0; border-right: 0; color: var(--blue); padding: 8px 4px; }
.nd-machine td:first-child { border-right: 0; }
.nd-machine td:last-child { border-left: 0; }
.nd-machine td.q { color: var(--bad); background: #FFF1F2; }

/* Number pairs */
.nd-pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px auto; }
.nd-pair { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid #CFE0F5; border-radius: 16px; padding: 8px 14px; font-family: var(--display); font-size: clamp(1.15rem, 4.4vw, 1.45rem); }
.nd-pair i { font-style: normal; color: var(--blue); }
.nd-pair b.q { color: var(--bad); }

/* Balance */
.nd-scale { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px auto; }
.nd-pan { background: #fff; border: 2px solid #CFE0F5; border-radius: 0 0 40px 40px; padding: 12px 20px; min-width: 110px; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 4.4vw, 1.45rem); box-shadow: 0 4px 0 #DCE7F5; }
.nd-pan b { color: var(--bad); }
.nd-pivot { font-size: 2rem; }

/* Triangles and charts */
.nd-tris, .nd-chart { display: block; width: min(100%, 420px); height: auto; margin: 4px auto; }

/* Little Counters */
.nd-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 150px; margin: 0 auto; font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.15; }
.nd-dice { display: block; width: clamp(110px, 32vw, 150px); height: auto; margin: 4px auto; }
.nd-digit { font-family: var(--display); font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1; }
.nd-emoji { font-size: clamp(2.2rem, 10vw, 3rem); }
.nd-tower { display: inline-flex; flex-direction: column-reverse; gap: 3px; min-height: 160px; justify-content: flex-start; align-items: center; }
.nd-tower i { display: block; width: 34px; height: 20px; border-radius: 5px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }

/* Exam letters */
.nd-letter { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .9rem; margin-right: 8px; flex: none; }
/* Exam Practice: letter beside the answer, so five options fit on a phone screen */
.kk-play-exam .kk-tile { grid-template-columns: auto 1fr; justify-items: start; text-align: left; min-height: 56px; padding: 10px 16px; }
.kk-play-exam .kk-tile-art { font-size: 1rem; line-height: 1; }
.kk-play-exam .kk-tile-label { font-size: 1.0625rem; }
.kk-play-exam .nd-letter { margin-right: 0; }
/* Number answers read better a little bigger */
.kk-play-series .kk-tile-label, .kk-play-machine .kk-tile-label, .kk-play-pairs .kk-tile-label, .kk-play-balance .kk-tile-label, .kk-play-shapes .kk-tile-label, .kk-play-odd .kk-tile-label { font-family: var(--display); font-size: 1.35rem; }
.kk-play-series .kk-tile, .kk-play-machine .kk-tile, .kk-play-pairs .kk-tile, .kk-play-balance .kk-tile, .kk-play-shapes .kk-tile, .kk-play-odd .kk-tile { min-height: 64px; }