/* -------------------------------------------------------
   FONT IMPORTS
------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;600;700&family=JetBrains+Mono:wght@300;400;600&display=swap');


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

html, body {
  height: 100%;
  background: #05070d;
  color: #e8e8e8;
  font-family: 'Crimson Pro', serif;
  overflow: hidden;
}

/* -------------------------------------------------------
   SCREEN SYSTEM
------------------------------------------------------- */
.screen {
  display: none;
  height: 100%;
  width: 100%;
  padding: 20px;
  overflow-y: auto;
}

.screen.show {
  display: block;
}

/* -------------------------------------------------------
   PANELS / PARCHMENT
------------------------------------------------------- */
.panel {
  background: #1b2436;
  border: 2px solid #2a354d;
  border-radius: 10px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(255, 215, 128, 0.15);
}

/* Right-side parchment scroll */
.parchment-right {
  float: right;
  width: 220px;
  background: #2a354d;
  border-left: 3px solid #d4b98c;
  padding: 10px;
  margin-left: 20px;
  border-radius: 4px;
}

/* -------------------------------------------------------
   TYPOGRAPHY
------------------------------------------------------- */
h1, h2, h3 {
  color: #f4d47c;
  margin-bottom: 10px;
}

p {
  margin-bottom: 12px;
  line-height: 1.5;
}

pre, code {
  font-family: 'JetBrains Mono', monospace;
  background: #0a0f1a;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #2a354d;
  color: #c7d4ff;
  overflow-x: auto;
}

/* ASCII art blocks */
.ascii-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.2;
  background: #0a0f1a;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #2a354d;
  color: #c7d4ff;
  text-align: center;
}

/* -------------------------------------------------------
   BUTTONS
------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  transition: 0.2s;
  margin: 5px 0;
}

.btn-primary {
  background: #3a6ff7;
  color: #fff;
  border: none;
}

.btn-primary:hover {
  background: #5a8cff;
}

.btn-secondary {
  background: #2b3a55;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: #c7d4ff;
  border: 1px solid #2a354d;
}

.btn-hint {
  background: #444b63;
  color: #fff;
}

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

/* -------------------------------------------------------
   SPLASH SCREEN
------------------------------------------------------- */
.splash-panel {
  text-align: center;
  margin-top: 10vh;
}

.splash-input input {
  width: 60%;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  border: 1px solid #2a354d;
  background: #0a0f1a;
  color: #e8e8e8;
}

/* Sea animation layers */
.sea {
  position: fixed;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle, rgba(10,15,26,0.6), #05070d);
  animation: drift 20s infinite linear;
  z-index: -1;
}

.sea-2 { animation-duration: 30s; opacity: 0.5; }
.sea-3 { animation-duration: 45s; opacity: 0.3; }

@keyframes drift {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------
   STORY SCROLL
------------------------------------------------------- */
.story-scroll {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

.story-scroll::-webkit-scrollbar {
  width: 8px;
}

.story-scroll::-webkit-scrollbar-thumb {
  background: #2a354d;
  border-radius: 4px;
}

/* -------------------------------------------------------
   MINI TASKS / FEEDBACK
------------------------------------------------------- */
.mini-task {
  margin-top: 20px;
  padding: 15px;
  background: #0a0f1a;
  border: 1px solid #2a354d;
  border-radius: 6px;
}

.mini-task input {
  width: 100%;
  padding: 8px;
  background: #05070d;
  border: 1px solid #2a354d;
  color: #e8e8e8;
  border-radius: 4px;
}

.hint-text {
  margin-top: 8px;
  color: #f4d47c;
}

.mini-feedback {
  margin-top: 8px;
  font-weight: 600;
}

/* -------------------------------------------------------
   FREEPLAY MAP GRID
------------------------------------------------------- */
.island-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.island-tile {
  background: #1b2436;
  border: 2px solid #2a354d;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 0 10px rgba(255, 215, 128, 0.1);
}

.island-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255, 215, 128, 0.25);
}

/* -------------------------------------------------------
   MODAL
------------------------------------------------------- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 7, 13, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #1b2436;
  border: 2px solid #2a354d;
  border-radius: 10px;
  padding: 20px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 0 25px rgba(255, 215, 128, 0.25);
}

.modal-close {
  float: right;
  background: transparent;
  border: none;
  color: #c7d4ff;
  font-size: 22px;
  cursor: pointer;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* -------------------------------------------------------
   RESPONSIVE
------------------------------------------------------- */
@media (max-width: 600px) {
  .parchment-right {
    float: none;
    width: 100%;
    margin: 10px 0;
  }
}
/* =====================================================
   LESSON CONTENT — LAYOUT & READABILITY FIXES
===================================================== */

.lesson-content {
  line-height: 1.6;
}

/* Headings & text spacing */
.lesson-content h3 {
  margin: 22px 0 10px;
}

.lesson-content p {
  margin: 10px 0;
}

/* Bytebeard dialogue box */
.bytebeard-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.bytebeard-portrait {
  font-size: 32px;
  line-height: 1;
}

.bytebeard-speech {
  background: #0a0f1a;
  border: 1px solid #2a354d;
  border-radius: 6px;
  padding: 10px 14px;
}

/* Inputs inside lessons */
.lesson-input,
.practice-input,
.lesson-content textarea {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  background: #05070d;
  border: 1px solid #2a354d;
  color: #e8e8e8;
  border-radius: 4px;
}

/* Buttons inside lessons */
.lesson-content .btn {
  margin: 10px 0;
}

/* Cards (MCQs) */
.lesson-content .card {
  margin: 14px 0;
  padding: 12px;
  background: #0a0f1a;
  border: 1px solid #2a354d;
  border-radius: 6px;
}

/* Horizontal rules */
.lesson-content hr {
  margin: 24px 0;
  border: none;
  border-top: 1px solid #2a354d;
}

/* Typing practice layout */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pill {
  background: #2a354d;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
}

/* Safety: clear any floats */
.lesson-content::after {
  content: "";
  display: block;
  clear: both;
}
.lesson-content > * {
  display: block;
  position: relative;
}
.lesson-content pre,
.lesson-content code {
  display: block;
  margin: 16px 0;
}
.lesson-content textarea.practice-input {
  margin-top: 16px;
}

.lesson-content .row {
  margin-top: 12px;
}
/* =====================================================
   CHALLENGE CONTENT — DRAG & DROP LAYOUT FIXES
===================================================== */

.challenge-content > * {
  display: block;
  position: relative;
}

/* Space text blocks */
.challenge-content p {
  margin: 10px 0;
}

/* Drag container */
#ch1-drag-container {
  margin: 16px 0;
}

/* Individual draggable items */
.drag-item {
  margin: 8px 0;
  padding: 8px 12px;
  background: #0a0f1a;
  border: 1px solid #2a354d;
  border-radius: 6px;
  cursor: grab;
}

/* Result / feedback text */
.challenge-content .hint-text,
.challenge-content .muted {
  margin-top: 10px;
}

/* Safety clear */
.challenge-content::after {
  content: "";
  display: block;
  clear: both;
}
/* =====================================================
   LESSON UI (kids 10–13): keywords, MCQ, retype, example
===================================================== */

.lesson-top .greeting { font-size: 18px; }
.lesson-top .learn-line { margin-bottom: 12px; }

.keyword-box dl { margin-top: 8px; }
.keyword-box dt { font-weight: 700; color: #f4d47c; margin-top: 8px; }
.keyword-box dd { margin-left: 0; margin-bottom: 6px; color: #e8e8e8; opacity: 0.95; }

.code-window { max-height: 180px; overflow: auto; }

.mcq-block, .retype-block { margin-top: 18px; padding: 14px; background: #0a0f1a; border: 1px solid #2a354d; border-radius: 8px; }
.mcq-options { display: grid; gap: 10px; margin: 10px 0; }
.mcq-option { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.mcq-option input { transform: scale(1.1); }

.practice-input { width: 100%; padding: 10px; background: #05070d; border: 1px solid #2a354d; color: #e8e8e8; border-radius: 6px; font-family: 'JetBrains Mono', monospace; }

.muted { opacity: 0.9; color: #c7d4ff; }
.good { color: #5CFF9A; font-weight: 700; }
.bad { color: #FF6B6B; font-weight: 700; }

/* =====================================================
   CREATIVE VISUAL KIT — Island Heroes + Cards
===================================================== */

.island-hero{
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.island-badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  margin-bottom: 8px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
}

.island-hero.var { background: linear-gradient(120deg, rgba(58,111,247,.35), rgba(10,15,26,.85)); }
.island-hero.str { background: linear-gradient(120deg, rgba(255,117,214,.28), rgba(10,15,26,.85)); }
.island-hero.num { background: linear-gradient(120deg, rgba(110,242,255,.22), rgba(10,15,26,.85)); }
.island-hero.list{ background: linear-gradient(120deg, rgba(244,212,124,.18), rgba(10,15,26,.85)); }
.island-hero.dict{ background: linear-gradient(120deg, rgba(152,255,136,.16), rgba(10,15,26,.85)); }
.island-hero.fun { background: linear-gradient(120deg, rgba(255,122,24,.18), rgba(10,15,26,.85)); }
.island-hero.recap{ background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(10,15,26,.85)); }

.code-window{ max-height: 200px; overflow: auto; }
.mcq-block, .retype-block, .example-block{
  margin-top: 14px;
  padding: 14px;
  background: #0a0f1a;
  border: 1px solid #2a354d;
  border-radius: 10px;
}
.mcq-options{ display:grid; gap:10px; margin: 10px 0; }
.mcq-option{ display:flex; gap:10px; align-items:center; cursor:pointer; }
.practice-input{
  width:100%;
  padding:10px;
  background:#05070d;
  border:1px solid #2a354d;
  color:#e8e8e8;
  border-radius:6px;
  font-family: 'JetBrains Mono', monospace;
}
.good{ color:#5CFF9A; font-weight: 800; }
.bad{ color:#FF6B6B; font-weight: 800; }
/* =====================================================
   LAYOUT STABILIZER — Lessons, Examples, Retype Practice
   Fixes overlap for typewriter + retype sections
===================================================== */

/* Ensure lesson containers expand with content */
#lesson-variable-content,
#lesson-string-content,
#lesson-number-content,
#lesson-list-content,
#lesson-dict-content,
#lesson-function-content {
  display: flow-root; /* creates new block formatting context */
  width: 100%;
  clear: both;
}

/* Stop floated keyword box from collapsing parents */
.parchment-right {
  float: right;
  margin-bottom: 16px;
}

/* Force all lesson sub-blocks into normal flow */
.example-block,
.retype-block,
.mcq-block {
  display: block;
  position: relative;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 28px;
  clear: both;
}

/* Critical: code windows must remain in flow */
pre,
pre code,
.code-window {
  position: relative !important;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Retype textarea must never overlay */
.practice-input,
textarea.practice-input {
  display: block;
  width: 100%;
  min-height: 140px;
  margin-top: 10px;
  position: relative;
}

/* Panels must grow with content */
.panel {
  height: auto;
  overflow: visible;
}

/* Safety: ensure screens scroll correctly */
.screen {
  overflow-y: auto;
}
/* =====================================================
   Lesson Left-Fill Panel (fills space next to Keywords)
===================================================== */

.left-fill {
  margin-right: 260px;        /* leaves room for 220px keyword box + gap */
  padding: 14px;
  border-radius: 10px;
  background: #0a0f1a;
  border: 1px solid #2a354d;
  margin-top: 12px;
  margin-bottom: 18px;
}

.left-fill h4 {
  margin-bottom: 8px;
  color: #f4d47c;
}

.left-fill ul {
  margin: 8px 0 0 18px;
  line-height: 1.45;
}

.left-fill .tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  margin-right: 8px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 12px;
  opacity: .95;
}

/* On small screens, the keyword box stacks, so remove the right margin */
@media (max-width: 600px) {
  .left-fill { margin-right: 0; }
}