* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
overflow: hidden;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color:
#173f73;
background:
linear-gradient(
135deg,
#fff8e6 0%,
#f5f9ff 55%,
#edf7ff 100%
);
}
/* ==========================================================
MAIN FRAME
========================================================== */
.computer-quiz-shell {
position: relative;
width:
min(
1240px,
calc(100% - 36px)
);
height:
calc(100vh - 98px);
max-height:
calc(100vh - 98px);
margin:
8px auto 0;
padding-bottom:
52px;
display:
flex;
flex-direction:
column;
border:
4px solid #2452a5;
border-radius:
25px;
background:
rgba(
255,
255,
255,
.98
);
box-shadow:
0 14px 36px
rgba(
31,
66,
125,
.13
);
overflow:
hidden;
}
/* ==========================================================
HEADER
========================================================== */
.computer-header {
flex:
0 0 auto;
min-height:
68px;
padding:
7px 17px;
display:
grid;
grid-template-columns:
auto minmax(0, 1fr) auto auto;
align-items:
center;
gap:
12px;
border-bottom:
1px solid #dce7f5;
background:
linear-gradient(
135deg,
#fbfdff,
#ffffff
);
}
.computer-header-icon {
width:
48px;
height:
48px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
14px;
background:
linear-gradient(
145deg,
#f7be54,
#efa228
);
font-size:
23px;
box-shadow:
0 6px 14px
rgba(
198,
128,
18,
.18
);
}
.computer-header-copy h1 {
margin:
0;
color:
#173f73;
font-size:
23px;
line-height:
1.06;
font-weight:
700;
}
.computer-header-copy p {
margin:
3px 0 0;
color:
#d28c15;
font-size:
16px;
line-height:
1.08;
font-weight:
700;
}
/* ==========================================================
SOUND
========================================================== */
.sound-toggle {
min-width:
82px;
min-height:
40px;
padding:
5px 10px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
6px;
border:
1px solid #cadbec;
border-radius:
14px;
background:
#f7fbff;
color:
#173f73;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
cursor:
pointer;
}
.sound-copy {
display:
flex;
flex-direction:
column;
align-items:
flex-start;
line-height:
1.05;
}
.sound-copy strong {
font-size:
11px;
}
.sound-copy small {
color:
#687f9b;
font-size:
9px;
}
/* ==========================================================
BADGE
========================================================== */
.computer-topic-badge {
min-width:
144px;
padding:
7px 11px;
display:
flex;
flex-direction:
column;
align-items:
center;
border:
1px solid #dea83f;
border-radius:
14px;
background:
#fff9e7;
color:
#855b0b;
text-align:
center;
}
.computer-topic-badge strong {
font-size:
11px;
}
.computer-topic-badge span {
margin-top:
1px;
font-size:
9px;
}
/* ==========================================================
INTRO
========================================================== */
.computer-intro-card {
flex:
0 0 auto;
margin:
7px 14px 6px;
padding:
10px 14px;
display:
grid;
grid-template-columns:
minmax(0, 1.2fr)
minmax(390px, .8fr);
gap:
24px;
align-items:
center;
border:
1px solid #dce7f4;
border-radius:
18px;
background:
linear-gradient(
135deg,
#fbfdff,
#f5f9ff
);
}
.computer-intro-copy h2 {
margin:
0 0 6px;
font-size:
20px;
line-height:
1.1;
}
.intro-ky {
margin:
2px 0;
font-size:
13px;
line-height:
1.23;
font-weight:
700;
}
.intro-en {
margin:
2px 0;
color:
#587492;
font-size:
12px;
line-height:
1.23;
font-weight:
700;
}
.computer-tip {
margin-top:
7px;
padding:
7px 10px;
display:
flex;
align-items:
center;
gap:
8px;
border-left:
4px solid #e6a22e;
border-radius:
11px;
background:
#fff8e7;
}
.computer-tip strong,
.computer-tip span {
display:
block;
}
.computer-tip strong {
color:
#715313;
font-size:
11px;
}
.computer-tip span {
margin-top:
2px;
color:
#756d5c;
font-size:
10px;
}
/* ==========================================================
MINI MAP
========================================================== */
.computer-map {
padding:
8px 10px;
border:
1px solid #d7e4f3;
border-radius:
15px;
background:
#ffffff;
}
.map-title {
margin-bottom:
6px;
text-align:
center;
}
.map-title strong,
.map-title span {
display:
block;
}
.map-title strong {
font-size:
11px;
}
.map-title span {
margin-top:
1px;
color:
#70859e;
font-size:
9px;
}
.parts-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
6px;
}
.part-chip {
min-height:
52px;
padding:
5px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
border:
1px solid #ccddf0;
border-radius:
11px;
background:
#f7fbff;
text-align:
center;
}
.part-chip > span {
font-size:
15px;
}
.part-chip strong {
margin-top:
2px;
font-size:
9px;
}
.part-chip small {
color:
#74869d;
font-size:
7px;
}
/* ==========================================================
STATUS
========================================================== */
.computer-status-bar {
flex:
0 0 auto;
min-height:
39px;
margin:
0 14px 6px;
padding:
5px 10px;
display:
grid;
grid-template-columns:
auto 1fr auto;
align-items:
center;
gap:
13px;
border:
1px solid #dce6f1;
border-radius:
13px;
background:
#f7faff;
}
.status-block {
min-width:
75px;
display:
grid;
grid-template-columns:
auto auto;
column-gap:
6px;
align-items:
baseline;
}
.status-block span {
color:
#375b84;
font-size:
10px;
font-weight:
700;
}
.status-block strong {
font-size:
13px;
}
.status-block small {
grid-column:
1 / -1;
color:
#7c8da0;
font-size:
8px;
}
.progress-track {
width:
100%;
height:
8px;
overflow:
hidden;
border-radius:
999px;
background:
#dce6f2;
}
.progress-fill {
width:
0%;
height:
100%;
border-radius:
inherit;
background:
linear-gradient(
90deg,
#e3a02e,
#2452a5
);
transition:
width .3s ease;
}
/* ==========================================================
QUIZ
========================================================== */
.quiz-screen {
flex:
1 1 auto;
min-height:
0;
margin:
0 14px 7px;
padding:
9px 12px 10px;
border:
1px solid #dce6f2;
border-radius:
18px;
background:
#ffffff;
overflow:
hidden;
}
.question-topline {
margin-bottom:
6px;
display:
flex;
align-items:
center;
justify-content:
space-between;
}
.question-topline > div:first-child {
display:
flex;
align-items:
baseline;
flex-wrap:
wrap;
gap:
4px 6px;
}
.question-topline strong,
.question-topline span {
font-size:
13px;
line-height:
1.15;
font-weight:
700;
}
.inline-divider {
color:
#d49a23;
}
.question-mark {
width:
31px;
height:
31px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
50%;
background:
#2452a5;
color:
white;
font-size:
17px;
font-weight:
900;
}
.question-card {
height:
calc(100% - 37px);
min-height:
0;
padding:
4px 7px 2px;
display:
flex;
flex-direction:
column;
}
.question-text {
margin:
0 0 8px;
font-size:
17px;
line-height:
1.2;
font-weight:
700;
}
.q-ky,
.q-en {
display:
inline;
}
.q-en {
color:
#285581;
}
.q-divider {
margin:
0 5px;
color:
#d59722;
font-weight:
900;
}
/* ==========================================================
ANSWERS
========================================================== */
.answers-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
8px;
}
.answer-option {
min-height:
45px;
padding:
7px 11px;
display:
flex;
align-items:
center;
justify-content:
center;
border:
2px solid #bed3ec;
border-radius:
12px;
background:
#f8fbff;
color:
#173f73;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size:
13px;
line-height:
1.18;
font-weight:
700;
text-align:
center;
cursor:
pointer;
transition:
transform .14s ease,
background .14s ease,
border-color .14s ease;
}
.answer-option:hover:not(:disabled) {
transform:
translateY(-1px);
border-color:
#739fd5;
background:
#edf5ff;
}
.answer-option.correct {
border-color:
#38a766;
background:
#e7f8ed;
color:
#17683a;
}
.answer-option.wrong {
border-color:
#dc7777;
background:
#fff0f0;
color:
#9a2929;
}
/* ==========================================================
FEEDBACK
========================================================== */
.feedback-box {
min-height:
51px;
margin-top:
8px;
padding:
7px 10px;
display:
none;
grid-template-columns:
auto 1fr;
align-items:
center;
gap:
9px;
border-radius:
12px;
}
.feedback-box.visible {
display:
grid;
}
.feedback-box.correct {
border:
1px solid #83c99c;
background:
#edf9f1;
color:
#17683a;
}
.feedback-box.wrong {
border:
1px solid #e5a0a0;
background:
#fff2f2;
color:
#922b2b;
}
.feedback-icon {
font-size:
20px;
}
.feedback-copy strong {
display:
block;
font-size:
12px;
}
.feedback-copy p {
margin:
2px 0 0;
font-size:
11px;
line-height:
1.2;
}
/* ==========================================================
ACTIONS
========================================================== */
.question-actions {
flex:
1 1 auto;
min-height:
38px;
display:
flex;
align-items:
flex-end;
justify-content:
flex-end;
}
.primary-btn,
.secondary-btn {
min-width:
142px;
min-height:
38px;
padding:
6px 17px;
display:
inline-flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
border:
0;
border-radius:
999px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-decoration:
none;
cursor:
pointer;
}
.primary-btn {
background:
linear-gradient(
135deg,
#2a5cae,
#20498f
);
color:
white;
}
.primary-btn:disabled {
background:
#c6d1df;
color:
#76869a;
cursor:
default;
}
.secondary-btn {
background:
linear-gradient(
135deg,
#f6ba63,
#eea64d
);
color:
#063c78;
}
.primary-btn span,
.secondary-btn span {
font-size:
12px;
font-weight:
700;
}
.primary-btn small,
.secondary-btn small {
margin-top:
1px;
font-size:
9px;
}
/* ==========================================================
RESULTS
========================================================== */
.result-screen {
flex:
1 1 auto;
min-height:
0;
margin:
7px 14px;
overflow-y:
auto;
}
.result-card {
min-height:
100%;
padding:
16px 22px;
text-align:
center;
border:
1px solid #dce6f2;
border-radius:
18px;
background:
linear-gradient(
145deg,
#fbfdff,
#f5f9ff
);
}
.result-badge {
font-size:
34px;
}
.result-kicker {
display:
block;
color:
#d08a16;
font-size:
10px;
font-weight:
900;
}
.result-card h2 {
margin:
5px 0 2px;
font-size:
24px;
}
.result-subtitle {
margin:
0;
color:
#587391;
font-size:
14px;
font-weight:
700;
}
.result-score-circle {
width:
96px;
height:
96px;
margin:
10px auto;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
border:
5px solid #e6aa36;
border-radius:
50%;
background:
white;
}
.result-score-circle strong {
font-size:
17px;
}
.result-score-circle span {
color:
#d18b16;
font-size:
13px;
font-weight:
700;
}
.result-stats {
max-width:
530px;
margin:
10px auto;
display:
grid;
grid-template-columns:
repeat(3, 1fr);
gap:
8px;
}
.result-stats > div {
padding:
8px;
border:
1px solid #d9e5f2;
border-radius:
12px;
background:
white;
}
.result-stats span,
.result-stats strong,
.result-stats small {
display:
block;
}
.result-stats span {
font-size:
10px;
}
.result-stats strong {
margin:
2px 0;
font-size:
18px;
}
.result-stats small {
color:
#7a8ca1;
font-size:
8px;
}
.result-message {
max-width:
710px;
margin:
10px auto;
padding:
9px 13px;
border-left:
4px solid #e2a12f;
border-radius:
11px;
background:
#fff9e9;
color:
#526b86;
font-size:
12px;
line-height:
1.35;
}
.result-actions {
display:
flex;
justify-content:
center;
gap:
10px;
flex-wrap:
wrap;
}
/* ==========================================================
BACK BUTTON
========================================================== */
.activity-back-nav {
position:
absolute;
left:
18px;
bottom:
9px;
z-index:
50;
}
.activity-back-btn {
min-height:
37px;
padding:
7px 18px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
7px;
border-radius:
999px;
background:
linear-gradient(
135deg,
#f6ba63,
#eea64d
);
color:
#063c78;
font-size:
13px;
font-weight:
700;
text-decoration:
none;
box-shadow:
0 5px 12px
rgba(
126,
82,
22,
.16
);
}
.activity-back-arrow {
font-size:
15px;
font-weight:
900;
}
/* ==========================================================
LAPTOP 100% ZOOM
========================================================== */
@media (
min-width: 901px
) and (
max-height: 850px
) {
.computer-quiz-shell {
height:
calc(100vh - 88px);
max-height:
calc(100vh - 88px);
padding-bottom:
48px;
}
.computer-header {
min-height:
59px;
padding:
5px 15px;
}
.computer-header-icon {
width:
41px;
height:
41px;
font-size:
20px;
}
.computer-header-copy h1 {
font-size:
20px;
}
.computer-header-copy p {
font-size:
14px;
}
.computer-intro-card {
margin:
5px 12px;
padding:
7px 11px;
}
.computer-intro-copy h2 {
font-size:
17px;
}
.intro-ky {
font-size:
11px;
}
.intro-en {
font-size:
10px;
}
.computer-tip {
margin-top:
5px;
padding:
5px 8px;
}
.computer-tip strong {
font-size:
9px;
}
.computer-tip span {
font-size:
8px;
}
.part-chip {
min-height:
42px;
}
.computer-status-bar {
min-height:
32px;
margin:
0 12px 5px;
padding:
3px 9px;
}
.quiz-screen {
margin:
0 12px 6px;
padding:
7px 10px;
}
.question-topline {
margin-bottom:
4px;
}
.question-topline strong,
.question-topline span {
font-size:
11px;
}
.question-mark {
width:
27px;
height:
27px;
font-size:
14px;
}
.question-text {
margin-bottom:
5px;
font-size:
15px;
}
.answers-grid {
gap:
6px;
}
.answer-option {
min-height:
36px;
padding:
5px 8px;
font-size:
11px;
}
.feedback-box {
min-height:
42px;
margin-top:
5px;
padding:
5px 8px;
}
.feedback-copy strong {
font-size:
10px;
}
.feedback-copy p {
font-size:
9px;
}
.question-actions {
min-height:
32px;
}
.primary-btn,
.secondary-btn {
min-height:
32px;
padding:
5px 14px;
}
.activity-back-nav {
bottom:
7px;
}
.activity-back-btn {
min-height:
33px;
padding:
6px 16px;
font-size:
11px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 900px) {
html,
body {
height:
auto;
overflow-y:
auto;
}
.computer-quiz-shell {
width:
calc(100% - 20px);
height:
auto;
max-height:
none;
margin:
10px auto;
padding-bottom:
0;
overflow:
visible;
}
.computer-header {
grid-template-columns:
auto 1fr;
}
.computer-intro-card {
grid-template-columns:
1fr;
}
.answers-grid {
grid-template-columns:
1fr;
}
.q-ky,
.q-en {
display:
block;
}
.q-divider {
display:
none;
}
.activity-back-nav {
position:
static;
padding:
0 14px 14px;
}
}
/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_START */
/* ==========================================================
GLOBAL E-BOOK ACTIVITY TYPOGRAPHY
Unified Kyrgyz-friendly font rendering.
Supports Kyrgyz Cyrillic clearly:
Ө ө
Ү ү
Ң ң
Intentionally protects programming / keyboard typography.
========================================================== */
:root {
--ebook-kyrgyz-font:
"Segoe UI",
"Noto Sans",
"DejaVu Sans",
Arial,
sans-serif;
}
/* ----------------------------------------------------------
BASE TEXT
This becomes the normal inherited font for each activity.
---------------------------------------------------------- */
html,
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-webkit-font-smoothing:
antialiased;
-moz-osx-font-smoothing:
grayscale;
text-rendering:
optimizeLegibility;
}
/* ----------------------------------------------------------
MAIN EDUCATIONAL TEXT
Override old Georgia / Times / decorative serif styles
where they were being used for Kyrgyz text.
---------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
input,
textarea,
select,
label,
a,
li,
th,
td,
strong,
small,
em {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
/* ----------------------------------------------------------
COMMON ACTIVITY QUESTION / ANSWER ELEMENTS
These selectors cover the different activity generations
already used throughout the e-book.
---------------------------------------------------------- */
.question,
.question-text,
.question-title,
.question-heading,
.question-kicker,
.question-ky,
.question-kyrgyz,
.ky-question,
.challenge-question,
.challenge-title,
.prompt,
.prompt-text,
.instruction,
.instructions,
.instruction-text,
.scenario,
.feedback,
.explanation,
.answer,
.answer-text,
.answer-option,
.option,
.option-btn,
.choice,
.choice-btn,
.quiz-question,
.quiz-option,
.task-title,
.task-question,
.result-title,
.result-message,
.card-title,
.card-text,
.game-title,
.game-question {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
/* ----------------------------------------------------------
KYRGYZ TYPOGRAPHY DETAILS
Slightly softer weight and natural spacing improve
Cyrillic letters such as ө, ү and ң.
---------------------------------------------------------- */
h1,
h2,
h3,
.question,
.question-text,
.question-title,
.question-ky,
.question-kyrgyz,
.ky-question,
.challenge-question,
.quiz-question,
.task-question {
font-kerning:
normal;
font-variant-ligatures:
common-ligatures;
letter-spacing:
.002em;
word-spacing:
.02em;
text-rendering:
optimizeLegibility;
}
/* ----------------------------------------------------------
QUESTION HEADINGS
---------------------------------------------------------- */
.question-ky,
.question-kyrgyz,
.ky-question,
.question-text,
.challenge-question,
.quiz-question {
font-weight:
750;
}
/* ----------------------------------------------------------
ANSWERS
Keep Kyrgyz choices clean and readable rather than
excessively heavy.
---------------------------------------------------------- */
.option-btn,
.option,
.answer-option,
.choice,
.choice-btn {
font-weight:
650;
}
/* ----------------------------------------------------------
FEEDBACK / EXPLANATIONS
---------------------------------------------------------- */
.feedback,
.explanation {
line-height:
1.4;
}
/* ==========================================================
DO NOT CHANGE PROGRAMMING / KEYBOARD / TECHNICAL FONTS
========================================================== */
code,
pre,
kbd,
samp,
.code,
.code-block,
.code-output,
.console,
.terminal,
.keyboard-key,
.key,
.shortcut-key {
font-family:
ui-monospace,
"Cascadia Code",
"SFMono-Regular",
Consolas,
"Liberation Mono",
monospace !important;
}
/* ==========================================================
PROTECT COMMON ICON FONTS
========================================================== */
.material-icons,
.material-symbols-outlined,
.material-symbols-rounded,
.fa,
.fas,
.far,
.fal,
.fab,
[class^="fa-"],
[class*=" fa-"] {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
/* ==========================================================
EMOJI
Browser will naturally fall back to the operating
system emoji font where necessary.
========================================================== */
/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_END */
/* FINAL_UNIFORM_ACTIVITY_FONT_V2_START */
/*
FINAL UNIFORM E-BOOK ACTIVITY TYPOGRAPHY
Standard typography:
Arial, "Helvetica Neue", Helvetica, sans-serif
Applies to normal Kyrgyz and English interface text,
including Back to Chapter buttons.
Font sizes, weights, colors, spacing and layouts
are intentionally NOT changed.
*/
:root {
--ebook-kyrgyz-font:
Arial, "Helvetica Neue", Helvetica, sans-serif;
--ebook-activity-font:
Arial, "Helvetica Neue", Helvetica, sans-serif;
}
html,
body {
font-family:
Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
/* ----------------------------------------------------------
TITLES AND NORMAL TEXT
---------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
li,
a,
strong,
b,
em,
small,
th,
td {
font-family:
Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
/* ----------------------------------------------------------
BUTTONS AND FORM ELEMENTS
Includes every Back to Chapter button regardless of
whether it is an or