* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      background: #F5F2EB;
      color: #1F2421;
      font-family: "Cardo" ;
    }

    /* HEADER */
    header {
      background: rgba(255, 255, 255, 0.9);
      border-bottom: 1px solid #E7E2D5;
      padding: 18px 30px;
    }

    .header-content {
      max-width: 1100px;
      margin: auto;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .logo {
      width: 48px;
      height: 48px;
      background: #2D5A43;
      color: white;
      border-radius: 14px;

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

      font-size: 24px;
    }

    .header-title {
      font-family: "Cardo" ;
      color: #1E3F2F;
      font-size: 24px;
      font-weight: 700;
    }

    .header-subtitle {
      color: #6B716D;
      font-size: 13px;
      margin-top: 2px;
    }

    /* MAIN */
    main {
      max-width: 1100px;
      margin: auto;
      padding: 70px 25px;
    }

    .hero {
      text-align: center;
      margin-bottom: 50px;
    }

    .back-link {
      display: inline-block;
      margin-bottom: 25px;

      color: #2D5A43;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
    }

    .back-link:hover {
      text-decoration: underline;
    }

    .hero h1 {
      font-family: "Cardo" ;
      color: #1E3F2F;
      font-size: clamp(40px, 6vw, 60px);
      margin-bottom: 15px;
    }

    .hero p {
      max-width: 650px;
      margin: auto;
      color: #626862;
      font-size: 17px;
      line-height: 1.7;
    }

    /* QUIZ CARDS */
    .quiz-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 22px;
    }

    .quiz-card {
      display: block;
      text-decoration: none;

      background: white;
      border: 1px solid #E7E2D5;
      border-radius: 24px;

      padding: 30px;

      box-shadow:
        0 10px 30px rgba(45, 90, 67, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.04);

      transition: all 0.2s ease;
    }

    .quiz-card:hover {
      transform: translateY(-5px);
      border-color: #4A7C59;

      box-shadow:
        0 15px 35px rgba(45, 90, 67, 0.14);
    }

    .quiz-icon {
      width: 58px;
      height: 58px;

      background: #E6EFEA;
      color: #2D5A43;

      border-radius: 16px;

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

      font-size: 28px;

      margin-bottom: 20px;
    }

    .quiz-card h2 {
      font-family: "Cardo" ;
      color: #1E3F2F;
      font-size: 25px;
      margin-bottom: 10px;
    }

    .quiz-card p {
      color: #6B716D;
      font-size: 14px;
      line-height: 1.6;
    }

    .open-quiz {
      display: inline-block;
      margin-top: 20px;

      color: #2D5A43;
      font-weight: 700;
      font-size: 14px;
    }

    /* FOOTER */
    footer {
      text-align: center;
      padding: 25px;

      border-top: 1px solid #E7E2D5;

      color: #777;
      font-size: 13px;

      background: rgba(255, 255, 255, 0.5);
    }

    /* MOBILE */
    @media (max-width: 600px) {
      header {
        padding: 15px 18px;
      }

      main {
        padding: 50px 18px;
      }

      .quiz-card {
        padding: 25px;
      }
    }
 * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #f7f5ef;
      color: #171717;
      font-family: "Times New Roman", serif;
    }

    .game-wrapper {
      min-height: 100vh;
    }

    /* HEADER */

    .game-header {
      background: #ffffff;
      border-bottom: 1px solid #d9d4c8;
      padding: 18px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .brand-logo {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: #285b43;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Cardo", serif;
      font-size: 24px;
    }

    .brand h1 {
      margin: 0;
      font-family: "Cardo", serif;
      font-size: 26px;
      color: #183d2c;
    }

    .brand p {
      margin: 2px 0 0;
      color: #6b6b6b;
      font-size: 14px;
    }

    .score-box {
      background: #edf4ee;
      border: 1px solid #c9ddcf;
      padding: 9px 18px;
      border-radius: 12px;
      text-align: center;
      min-width: 110px;
    }

    .score-label {
      display: block;
      font-size: 12px;
      color: #526357;
    }

    .score {
      font-family: "Cardo", serif;
      font-size: 23px;
      font-weight: bold;
      color: #24553d;
    }

    /* START SCREEN */

    .screen {
      width: min(1100px, calc(100% - 30px));
      margin: 35px auto;
    }

    .start-card {
      background: #ffffff;
      border: 1px solid #ddd8cd;
      border-radius: 20px;
      padding: 50px 30px;
      text-align: center;
      box-shadow: 0 8px 30px rgba(30, 50, 40, 0.06);
      position: relative;
      overflow: hidden;
    }

    .start-card::before {
      content: "✦  ✧  ✦  ✧  ✦";
      position: absolute;
      top: 15px;
      left: 0;
      right: 0;
      color: #9bb9a5;
      letter-spacing: 12px;
      font-size: 13px;
    }

    .start-card h2 {
      margin-top: 20px;
      font-family: "Cardo", serif;
      color: #1d4c35;
      font-size: 36px;
    }

    .start-card p {
      max-width: 650px;
      margin: 0 auto 25px;
      line-height: 1.7;
      color: #555;
      font-size: 17px;
    }

    .name-input {
      width: min(400px, 100%);
      padding: 14px 16px;
      border: 1px solid #c8c8c8;
      border-radius: 10px;
      font-family: "Times New Roman", serif;
      font-size: 17px;
      margin-bottom: 15px;
    }

    .name-input:focus {
      outline: 2px solid #9fbea9;
      border-color: #376b50;
    }

    .primary-button {
      border: none;
      background: #285b43;
      color: white;
      padding: 14px 28px;
      border-radius: 10px;
      font-family: "Cardo", serif;
      font-size: 18px;
      cursor: pointer;
      transition: 0.2s;
    }

    .primary-button:hover {
      background: #1d4633;
      transform: translateY(-1px);
    }

    /* GAME SCREEN */

    /* #gameScreen {
      display: none;
    } */

    .game-top {
      margin-bottom: 18px;
    }

    .game-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      gap: 15px;
    }

    .game-title {
      font-family: "Cardo", serif;
      font-size: 22px;
      color: #214b36;
    }

    .progress-text {
      color: #666;
      font-size: 15px;
    }

    .progress-bar {
      width: 100%;
      height: 9px;
      background: #e2e4df;
      border-radius: 20px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      background: #367254;
      transition: width 0.4s ease;
    }

    /* SHOP */

    .shop {
      background: #ffffff;
      border: 1px solid #d9d5cb;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(30, 50, 40, 0.07);
    }

    .shop-scene {
      min-height: 350px;
      position: relative;
      background:
        linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)),
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 30px,
          rgba(42,91,67,0.035) 30px,
          rgba(42,91,67,0.035) 31px
        );
      padding: 30px;
    }

    .shop-sign {
      text-align: center;
      font-family: "Cardo", serif;
      font-size: 28px;
      color: #24543c;
      margin-bottom: 30px;
    }

    .shop-items {
      display: flex;
      justify-content: center;
      gap: 55px;
      margin-bottom: 35px;
      flex-wrap: wrap;
    }

    .shop-item {
      width: 100px;
      height: 100px;
      border: 1px solid #d4d8d3;
      background: #f9faf8;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #315740;
      font-family: "Cardo", serif;
    }

    .characters {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 90px;
      margin-top: 20px;
    }

    .character {
      text-align: center;
    }

    .character-figure {
      font-size: 65px;
      height: 75px;
    }

    .character-name {
      background: white;
      border: 1px solid #d6d6d6;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 14px;
    }

    .counter {
      height: 45px;
      width: 180px;
      background: #285b43;
      border-radius: 8px 8px 0 0;
      margin: 15px auto 0;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Cardo", serif;
    }

    /* DIALOG */

    .dialog-area {
      border-top: 1px solid #ddd8cd;
      padding: 25px;
      background: #fff;
    }

    .customer-message {
      background: #f0f5f1;
      border-left: 4px solid #356e50;
      border-radius: 10px;
      padding: 18px;
      margin-bottom: 20px;
    }

    .customer-name {
      font-family: "Cardo", serif;
      font-weight: bold;
      color: #285b43;
      margin-bottom: 7px;
    }

    .customer-text {
      font-size: 18px;
      line-height: 1.5;
    }

    .question-title {
      font-family: "Cardo", serif;
      font-size: 20px;
      color: #222;
      margin-bottom: 14px;
    }

    .answer-list {
      display: grid;
      gap: 11px;
    }

    .answer-button {
      width: 100%;
      text-align: left;
      padding: 14px 17px;
      background: white;
      border: 1px solid #cfd5d0;
      border-radius: 10px;
      font-family: "Times New Roman", serif;
      font-size: 17px;
      cursor: pointer;
      transition: 0.2s;
    }

    .answer-button:hover:not(:disabled) {
      background: #f0f6f1;
      border-color: #46785d;
      transform: translateX(2px);
    }

    .answer-button:disabled {
      cursor: default;
    }

    .answer-button.correct {
      background: #e4f2e7;
      border-color: #4e8a63;
      color: #204e31;
    }

    .answer-button.incorrect {
      background: #f6e9e7;
      border-color: #a75c52;
      color: #69362f;
    }

    /* FEEDBACK */

    .feedback {
      display: none;
      margin-top: 20px;
      padding: 18px;
      border-radius: 12px;
    }

    .feedback.correct {
      background: #e7f3e9;
      border: 1px solid #9bc4a4;
    }

    .feedback.incorrect {
      background: #f7e9e6;
      border: 1px solid #d3a19a;
    }

    .feedback-title {
      font-family: "Cardo", serif;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 7px;
    }

    .feedback-text {
      line-height: 1.6;
    }

    .next-button {
      display: none;
      margin-top: 15px;
      border: none;
      background: #285b43;
      color: white;
      padding: 12px 22px;
      border-radius: 9px;
      font-family: "Cardo", serif;
      font-size: 16px;
      cursor: pointer;
    }

    .next-button:hover {
      background: #1d4633;
    }

    /* RESULT */
/* 
    #resultScreen {
      display: none;
    } */

    .result-card {
      background: white;
      border: 1px solid #ddd8cd;
      border-radius: 20px;
      padding: 45px 30px;
      text-align: center;
      box-shadow: 0 8px 30px rgba(30, 50, 40, 0.07);
    }

    .result-card h2 {
      font-family: "Cardo", serif;
      color: #214d37;
      font-size: 34px;
    }

    .final-score {
      font-family: "Cardo", serif;
      font-size: 55px;
      color: #285b43;
      margin: 20px 0;
    }

    .result-info {
      font-size: 18px;
      line-height: 1.8;
      color: #555;
    }

    .result-message {
      margin: 25px auto;
      max-width: 600px;
      padding: 16px;
      background: #f0f5f1;
      border-radius: 10px;
    }

    /* RESPONSIVE */

    @media (max-width: 700px) {

      .game-header {
        padding: 14px;
      }

      .brand h1 {
        font-size: 21px;
      }

      .score-box {
        min-width: 80px;
        padding: 7px 10px;
      }

      .characters {
        gap: 35px;
      }

      .character-figure {
        font-size: 50px;
      }

      .shop-items {
        gap: 15px;
      }

      .shop-item {
        width: 75px;
        height: 75px;
      }

      .start-card {
        padding: 40px 20px;
      }

      .start-card h2 {
        font-size: 30px;
      }
    }