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

    body {
      font-family: 'Segoe UI', sans-serif;
      background: #58587c;
      color: #e0e0e0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 16px;
    }


  

    /* SETUP SCREEN */
    #setup-screen {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .section-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #312020;
      margin-bottom: 10px;
    }

    .options {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .option-btn {
      padding: 10px 24px;
      border-radius: 100px;
      border: 2px solid #2e2e4d5d;
      background: #1b1b1d;
      color: #ccc;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .option-btn:hover {
      border-color: #7c6af7;
      color: #fff;
    }

    .option-btn.active {
      border-color: #7c6af7;
      background: #7c6af7;
      color: #fff;
    }

    .start-btn {
      padding: 14px;
      background: #7c6af7;
      border: none;
      border-radius: 100px;
      color: #fff;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

    .start-btn:hover {
      background: #6a57e0;
    }

    /* GAME SCREEN */
    #game-screen {
      width: 100%;
      max-width: 700px;
      display: none;
      flex-direction: column;
      gap: 20px;
    }

    .stats-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #1a1a29;
      border-radius: 100px;
      padding: 14px 20px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .stat { text-align: center; }

    .stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: #7c6af7;
    }

    .stat-label{
      font-size: 0.72rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }



    #timer-bar-container {
      width: 100%;
      height: 6px;
      background: #2e2e4d;
      border-radius: 10px;
      overflow: hidden;
    }

    #timer-bar {
      height: 100%;
      background: #7c6af7;
      width: 100%;
      transition: width 1s linear;
    }
   
     #passage-display {
      background: #1a1a2e;
      border-radius: 12px;
      padding: 20px;
      font-size: 1.1rem;
      line-height: 1.5;
      letter-spacing: 0.5px;
      min-height: 120px;
      word-break: break-word;
      user-select: none;
    }


    #passage-display{
      transition: color 0.1s;
    }
    span.correct   { color: #4ade80; }
    span.incorrect { color: #f87171; background: #3b1a1a; border-radius: 2px; }
    span.current   { border-bottom: 2px solid #7c6af7; color: #fff; }

    #typing-input {
      width: 100%;
      padding: 14px 16px;
      background: #1a1a2e;
      border: 2px solid #2e2e4d;
      border-radius: 10px;
      color: #fff;
      font-size: 1rem;
      outline: none;
      resize: none;
      caret-color: #7c6af7;
    }

    #typing-input:focus {
      border-color: #7c6af7;
    }
   
    .game-action{
      display: flex;
      gap: 15px;
    }
    
    .restart-btn {
      flex: 1;
      padding: 12px;
      background: transparent;
      border: 2px solid #7c6af7;
      border-radius: 10px;
      color: #7c6af7;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    
    }

    .restart-btn:hover { background: #7c6af7; color: #fff; }

    /* RESULT SCREEN */

    #result-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: 100%;
      max-width: 500px;
      text-align: center;
      min-height: 100vh;
    }

    .result-card {
      background: #1a1a2e;
      border-radius: 16px;
      padding: 30px;
      width: 100%;
    }

    

    .result-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .result-stat {
      background: #0f0f1a;
      border-radius: 10px;
      padding: 16px;
    }

    .result-stat .val {
      font-size: 2rem;
      font-weight: 700;
      color: #7c6af7;
    }

    .result-stat .lbl {
      font-size: 0.75rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 4px;
    }

    .badge {
      font-size: 0.8rem;
      padding: 4px 12px;
      border-radius: 20px;
      background: #2e2e4d;
      color: #aaa;
      margin-bottom: 10px;
      display: inline-block;
    }

    .result-btns { display: flex; gap: 12px; width: 100%; }

    .result-btns button {
      flex: 1;
      padding: 13px;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    #retry-btn { background: #7c6af7; border: none; color: #fff; }
    #retry-btn:hover { background: #6a57e0; }
    #retry-btn img{
      width: 18px;
      height: 18px;
      object-fit: contain;
      margin-left: 6px;
    }

    #home-btn { background: transparent; border: 2px solid #7c6af7; color: #7c6af7; }
    #home-btn:hover { background: #7c6af7; color: #fff; }

    .difficulty-badge {
      font-size: 0.75rem;
      padding: 3px 10px;
      border-radius: 20px;
      font-weight: 600;
    }

    .easy-badge   { background: #14532d; color: #4ade80; }
    .medium-badge { background: #713f12; color: #fbbf24; }
    .hard-badge   { background: #7f1d1d; color: #f87171; }

    @media (max-width: 480px) {
      h1 { font-size: 1.5rem; }
      #passage-display { font-size: 0.95rem; }
    }