/* =========================================================
   O‘ZBEKCHA SO‘ZLASHAMIZ
   5–7 YOSHLI BOLALAR UCHUN A/a DARSI
   ========================================================= */


/* =========================
   ASOSIY SOZLAMALAR
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Trebuchet MS", Arial, sans-serif;
    background: #fffaf2;
    color: #3d3150;
    line-height: 1.6;
}


/* =========================
   HEADER
========================= */

.lesson-header {
    text-align: center;
    padding: 35px 20px 40px;
    background: linear-gradient(
        135deg,
        #fff0a8,
        #ffd6e7,
        #d8f5ff
    );
    border-bottom: 5px solid #ffffff;
}

.logo {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 20px;
    border-radius: 30px;
    background: #ffffff;
    color: #8a4f9f;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.lesson-header h1 {
    margin: 8px 0;
    color: #713f8f;
    font-size: 34px;
}

.lesson-header p {
    margin: 5px 0 0;
    color: #6b6175;
    font-size: 18px;
}


/* =========================
   ASOSIY KONTEYNER
========================= */

.lesson-container {
    width: min(1050px, 92%);
    margin: 35px auto 60px;
}


/* =========================
   HAR BIR DARS KARTASI
========================= */

.lesson-card {
    position: relative;
    margin-bottom: 30px;
    padding: 30px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 8px 25px rgba(91, 66, 105, 0.10);
    border: 3px solid #f4e8f7;
}


.lesson-card h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #713f8f;
    font-size: 25px;
}

.instruction {
    font-size: 18px;
    color: #51485a;
}

.small-text {
    color: #777;
    font-size: 16px;
}


/* =========================
   A HARFI
========================= */

.letter-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    margin: 25px auto;
    padding: 25px;
}

.big-letter,
.small-letter {
    width: 160px;
    height: 160px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 35px;

    font-weight: bold;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10);
}

.big-letter {
    background: #fff0a8;
    color: #e09b00;
    font-size: 110px;
}

.small-letter {
    background: #d9f4ff;
    color: #2585a8;
    font-size: 95px;
}


/* =========================
   AUDIO BUTTON
========================= */

.audio-button {
    display: block;
    margin: 20px auto 0;
    padding: 14px 25px;

    border: none;
    border-radius: 30px;

    background: #8f5bb3;
    color: white;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 5px 12px rgba(100, 60, 120, 0.20);

    transition: transform 0.2s, box-shadow 0.2s;
}

.audio-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(100, 60, 120, 0.25);
}

.audio-button:active {
    transform: scale(0.96);
}


/* =========================
   YOZISH MASHQI
========================= */

.writing-practice {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 25px 0;
}

.trace-letter {
    height: 150px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 4px dashed #d8c8df;
    border-radius: 22px;

    background: #fffdf8;

    color: #d6c9da;

    font-size: 100px;
    font-weight: bold;
}


/* =========================
   SO‘ZLAR
========================= */

.word-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 25px;
}

.word-card {
    text-align: center;
    padding: 25px 15px;

    border-radius: 25px;

    background: #fff8e8;

    border: 3px solid #f7e5b1;

    transition: transform 0.2s, box-shadow 0.2s;
}

.word-card:nth-child(2) {
    background: #eefaff;
    border-color: #c8eefa;
}

.word-card:nth-child(3) {
    background: #f9efff;
    border-color: #ead3f3;
}

.word-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10);
}

.word-picture {
    font-size: 75px;
    margin-bottom: 8px;
}

.word-card h3 {
    margin: 5px 0 15px;
    font-size: 27px;
    color: #684378;
}

.word-card button {
    padding: 10px 20px;

    border: none;
    border-radius: 25px;

    background: #f0a93b;
    color: white;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}

.word-card:nth-child(2) button {
    background: #3d9fc2;
}

.word-card:nth-child(3) button {
    background: #9b62b6;
}

.word-card button:hover {
    transform: scale(1.05);
}


/* =========================
   TUSHIB QOLGAN HARF
========================= */

.missing-letter-exercise {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;

    margin: 30px 0;
}

.word-question {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 15px 20px;

    background: #fff8dc;

    border-radius: 20px;

    font-size: 32px;
    font-weight: bold;
}

.word-question input {
    width: 65px;
    height: 65px;

    text-align: center;

    border: 4px solid #d6b44a;
    border-radius: 15px;

    background: white;

    font-size: 35px;
    font-weight: bold;

    color: #70458a;

    outline: none;
}

.word-question input:focus {
    border-color: #8f5bb3;
    box-shadow: 0 0 0 4px rgba(143, 91, 179, 0.15);
}


/* =========================
   TEKSHIRISH TUGMASI
========================= */

.check-button {
    display: block;
    margin: 15px auto;

    padding: 14px 30px;

    border: none;
    border-radius: 30px;

    background: #63b77c;
    color: white;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 5px 12px rgba(60, 130, 80, 0.20);
}

.check-button:hover {
    transform: translateY(-2px);
}


/* =========================
   NATIJA
========================= */

.result {
    min-height: 30px;
    margin-top: 15px;

    text-align: center;

    font-size: 18px;
    font-weight: bold;
}

.result.correct {
    color: #26964c;
}

.result.wrong {
    color: #d05b5b;
}

.result.warning {
    color: #d28a24;
}


/* =========================
   A HARFINI TOPISH
========================= */

.letter-search {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 25px;
}

.letter-search button {
    width: 55px;
    height: 55px;

    border: 3px solid #e3dce8;
    border-radius: 15px;

    background: #ffffff;

    color: #5b5063;

    font-size: 22px;
    font-weight: bold;

    cursor: pointer;

    transition: transform 0.15s, background 0.15s;
}

.letter-search button:hover {
    transform: scale(1.1);
    background: #f7edfb;
}

.letter-search button.selected-correct {
    background: #75c98d;
    border-color: #4cae68;
    color: white;
}

.letter-search button.selected-wrong {
    background: #f29b9b;
    border-color: #dc7272;
    color: white;
}


/* =========================
   TINGLA VA TAKRORLA
========================= */

.repeat-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 25px;
}

.repeat-box button {
    padding: 16px 24px;

    border: none;
    border-radius: 25px;

    background: #e6d4f1;
    color: #613b72;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    transition: transform 0.2s, box-shadow 0.2s;
}

.repeat-box button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.10);
}


/* =========================
   BARAKALLA
========================= */

.reward-card {
    text-align: center;

    background: linear-gradient(
        135deg,
        #fff5b8,
        #ffe2ef,
        #ddf7ff
    );

    border-color: #f1dfb0;
}

.reward-card h2 {
    font-size: 35px;
    color: #d18b00;
}

.reward-card p {
    font-size: 20px;
}

.stars {
    margin: 15px 0;
    font-size: 45px;
    letter-spacing: 10px;
}

.congratulation {
    color: #75458a;
    font-weight: bold;
}


/* =========================
   FOOTER
========================= */

footer {
    padding: 30px 20px;

    text-align: center;

    background: #704786;
    color: white;
}

footer p {
    margin: 5px;
}


/* =========================
   TELEFON UCHUN
========================= */

@media (max-width: 750px) {

    .lesson-header h1 {
        font-size: 27px;
    }

    .lesson-container {
        width: 94%;
    }

    .lesson-card {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .lesson-card h2 {
        font-size: 21px;
    }

    .letter-box {
        gap: 20px;
    }

    .big-letter,
    .small-letter {
        width: 120px;
        height: 120px;
    }

    .big-letter {
        font-size: 80px;
    }

    .small-letter {
        font-size: 70px;
    }

    .writing-practice {
        grid-template-columns: repeat(2, 1fr);
    }

    .word-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================
   JUDA KICHIK EKRAN
========================= */

@media (max-width: 430px) {

    .lesson-header {
        padding: 25px 15px 30px;
    }

    .lesson-header h1 {
        font-size: 23px;
    }

    .logo {
        font-size: 15px;
    }

    .letter-box {
        gap: 12px;
    }

    .big-letter,
    .small-letter {
        width: 105px;
        height: 105px;
    }

    .big-letter {
        font-size: 70px;
    }

    .small-letter {
        font-size: 60px;
    }

    .writing-practice {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .trace-letter {
        height: 120px;
        font-size: 75px;
    }

    .word-question {
        font-size: 27px;
    }

    .word-question input {
        width: 55px;
        height: 55px;
    }

}
/* ==========================================
   A HARFINI YOZISH MAYDONI
========================================== */

.writing-area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

#letterCanvas {
    width: 500px;
    height: 300px;
    max-width: 100%;

    background: white;
    border: 3px dashed #6b8e23;
    border-radius: 20px;

    cursor: crosshair;
    touch-action: none;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}


/* ==========================================
   YOZISH TUGMALARI
========================================== */

.writing-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.writing-buttons button {
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.writing-buttons button:hover {
    transform: scale(1.05);
}

.clear-button {
    background: #f3d36a;
    color: #4a3b00;
}


/* ==========================================
   YOZISH NATIJASI
========================================== */

#writing-result {
    text-align: center;
    min-height: 30px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}
/* ==========================================
   YOZISH MAYDONINI MARKAZGA JOYLASHTIRISH
========================================== */

.writing-area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

#letterCanvas {
    display: block;
    width: 500px;
    height: 300px;
    max-width: 100%;
}

.harflar-oyini {
  margin: 30px auto;
  padding: 25px 18px;
  max-width: 750px;
  text-align: center;
  background: linear-gradient(135deg, #fff0b8, #d9f8df, #dff4ff);
  border: 3px dashed #64b87b;
  border-radius: 25px;
}

.harflar-oyini h2 {
  color: #247348;
}

.oyinga-kirish {
  display: inline-block;
  margin-top: 12px;
  padding: 13px 24px;
  background: #26965c;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
  box-shadow: 0 4px 0 #176c40;
}

.oyinga-kirish:hover {
  background: #197847;
  transform: translateY(-2px);
}

/* HARFLAR OLAMI — ALOHIDA KIRISH BO‘LIMI */

.harflar-oyini {
  position: relative;
  margin: 35px auto;
  padding: 30px 20px;
  max-width: 750px;
  text-align: center;
  background: linear-gradient(135deg, #fff0b8, #d9f8df, #dff4ff);
  border: 3px dashed #64b87b;
  border-radius: 28px;
  box-shadow: 0 8px 20px rgba(47, 120, 75, 0.12);
}

.harflar-oyini h2 {
  margin-top: 0;
  color: #247348;
  font-size: 28px;
}

.oyinga-kirish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding: 15px 30px;
  background: linear-gradient(135deg, #32b76e, #19864e);
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 900;
  border: 3px solid #fff;
  border-radius: 35px;
  box-shadow: 0 6px 0 #176c40, 0 9px 18px rgba(25, 120, 70, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.oyinga-kirish:hover {
  background: linear-gradient(135deg, #40c97d, #147744);
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #176c40, 0 12px 22px rgba(25, 120, 70, 0.2);
}

.oyinga-kirish:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #176c40;
}

@media (max-width: 430px) {
  .harflar-oyini {
    padding: 24px 14px;
    margin: 25px auto;
  }

  .harflar-oyini h2 {
    font-size: 23px;
  }

  .oyinga-kirish {
    padding: 13px 22px;
    font-size: 16px;
  }
}


/* Harflar orasida harakatlanish */
.letter-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    margin: 20px auto;
}

.letter-navigation a {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 14px;
    background: #e7f7ed;
    color: #245b43;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s, background 0.2s;
}

.letter-navigation a:hover {
    background: #c9efd6;
    transform: translateY(-2px);
}

.letter-navigation a:focus-visible {
    outline: 3px solid #245b43;
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .letter-navigation a {
        padding: 10px 14px;
        font-size: 14px;
    }
}

.lesson-back {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 25px auto;
}

.lesson-back a {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 12px;
    background: #2f9e68;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.lesson-back a:hover {
    background: #245b43;
}

/* Keyingi harflar darslariga o'tish tugmalari */
.next-lessons {
    margin: 35px auto 25px;
    padding: 25px 15px;
    text-align: center;
    border-radius: 24px;
    background: #fff8fc;
}

.next-lessons h2 {
    margin-bottom: 22px;
    color: #75439a;
    font-size: 26px;
}

.next-lesson-btn {
    display: inline-block;
    margin: 7px;
    padding: 18px 30px;
    border-radius: 22px;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
}

.next-lesson-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 7px 15px #00000020;
}


.next-lessons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 35px auto 25px;
    padding: 20px 10px;
}

.next-lesson-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 75px;
    padding: 18px 28px;
    border-radius: 22px;
    text-decoration: none;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
}

.next-lesson-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 7px 15px #00000020;
}

.b-btn {
    background: #925bb5;
    color: white;
}

.d-btn {
    background: #2f9e68;
    color: white;
}

.e-btn {
    background: #ffb6d2;
    color: #245b43;
}

@media (max-width: 600px) {
    .next-lesson-btn {
        width: 100%;
        max-width: 320px;
        font-size: 18px;
    }
}

.elak-rasmi {
    width: 80px;
    height: 80px;
    object-fit: contain;
    vertical-align: middle;
}


/* =====================================
   E/e DARSI — TUSHIB QOLGAN HARF
===================================== */

.e-missing-game {
    background: linear-gradient(135deg, #fffdf3, #f0fbf4);
    border: 2px solid #d8eddf;
    border-radius: 24px;
    padding: 24px;
}

.e-missing-game h2 {
    text-align: center;
    color: #245b43;
    font-size: clamp(23px, 4vw, 30px);
    margin-bottom: 10px;
}

.e-missing-instruction {
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.e-missing-question {
    display: grid;
    grid-template-columns: 85px minmax(100px, 1fr) auto;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 2px solid #e4eee7;
    border-radius: 18px;
    padding: 16px;
    margin: 16px 0;
    box-shadow: 0 4px 10px rgba(36, 91, 67, 0.07);
}

.e-missing-picture {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: #f4f9e9;
    border-radius: 16px;
}

.e-missing-picture img {
    width: 100%;
    height: 100%;
    padding: 5px;
    object-fit: contain;
}

.e-missing-word {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #245b43;
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}

.e-missing-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 49px;
    margin-right: 2px;
    color: #e58b19;
    background: #fff3c8;
    border: 2px dashed #e8b64d;
    border-radius: 10px;
}

.e-missing-options {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.e-missing-options button {
    width: 48px;
    height: 48px;
    border: 2px solid #b9dfc7;
    border-radius: 13px;
    background: #e8f7ec;
    color: #245b43;
    font-size: 25px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.e-missing-options button:hover {
    background: #c9efd5;
    transform: translateY(-2px);
}

.e-missing-options button:focus-visible {
    outline: 3px solid #e8b64d;
    outline-offset: 3px;
}

.e-missing-feedback {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.e-missing-feedback:not(:empty) {
    padding: 8px;
    border-radius: 10px;
    background: #f1f9f2;
}

/* Telefon ekranlari */
@media (max-width: 600px) {
    .e-missing-game {
        padding: 14px;
    }

    .e-missing-question {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .e-missing-picture {
        width: 60px;
        height: 60px;
        font-size: 38px;
    }

    .e-missing-word {
        justify-content: flex-start;
        font-size: 36px;
    }

    .e-missing-blank {
        width: 37px;
        height: 43px;
    }

    .e-missing-options {
        grid-column: 1 / -1;
        gap: 12px;
    }

    .e-missing-options button {
        width: 58px;
        height: 52px;
        font-size: 27px;
    }
}


.repeat-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.audio-card {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.2s;
    box-sizing: border-box;
    text-align: left;
}

.audio-card:hover {
    transform: scale(1.02);
}

.audio-icon {
    width: 58px;
    height: 58px;
    object-fit: contain;
    font-size: 42px;
    flex-shrink: 0;
}

.audio-name {
    font-size: 20px;
    font-weight: bold;
    flex: 1;
}

.audio-play {
    background: white;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.flower-audio {
    background: #E5F5E8;
    color: #285C48;
}

.carpet-audio {
    background: #FFF0D8;
    color: #895B20;
}

.guitar-audio {
    background: #E8E8FF;
    color: #51458B;
}