/* CodeVerse_Adventure/styles/styles.css */
  body {
      font-family: 'Source Sans Pro', sans-serif;
      background: radial-gradient(ellipse at center, #0a0a0a, #000);
      color: #f0f0f0;
      padding: 2rem;
      font-size: 18px;
    }
    .story {
      background: #222;
      padding: 1.5rem;
      margin-bottom: 2rem;
      border-radius: 10px;
      box-shadow: 0 0 12px rgba(0,0,0,0.6);
    }

.story-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.story-text {
  flex: 1 1 60%;
  min-width: 280px;
  font-size: 20px;
}

.story-image-wrapper {
  flex: 1 1 35%;
  min-width: 240px;
}

.story-image {
  width: 70%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 15px #000;
}


    textarea {
      width: 100%;
      height: 140px;
      font-family: monospace;
      font-size: 16px;
      background: #111;
      color: #0f0;
      border: 1px solid #555;
      border-radius: 6px;
      padding: 1rem;
    }
    pre {
      background: #000;
      color: #0f0;
      padding: 1rem;
      border-radius: 6px;
    }
    button {
      font-size: 16px;
      margin-top: 0.5rem;
      margin-right: 1rem;
      padding: 0.6rem 1.2rem;
      background: #007acc;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .locked {
      display: none;
    }
    .hint {
      font-style: italic;
      color: #aaa;
      margin-top: 0.5rem;
    }
    h1, h2 {
      font-family: 'Cinzel', serif;
      color: #ffd700;
      margin-bottom: 1rem;
    
    }
.story-text p, .story p {
  font-size: 1.15rem;
  font-weight: 400;
  color: #e2e2e2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
    /* Base styles (desktop-first) are assumed to already be there */
/* Add mobile-friendly overrides below */
@media (max-width: 768px) {
  body {
    font-size: 20px;
    padding: 1rem;
  }

  .story-content {
    flex-direction: column;
    align-items: center;
  }

  .story-text {
    order:1;
    width: 100%;
    font-size: 20px;
  }

  .story-image {
    width: 100%;
    max-width: none;
    margin-top: 1rem;
  }
.story-image-wrapper {
    order: 2;
    margin-top: 1rem;
  }
  textarea,
  pre {
    font-size: 18px;
  }

  button,
  input {
    font-size: 18px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.5rem;
  }

  h1, h2 {
    font-size: 1.8em;
  }

  .chapter-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .chapter-list a {
    font-size: 20px;
  }

  .badge {
    margin-top: 0.5rem;
  }
}