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

body {
    background: #0a0a1a;
    color: #f0f0f0;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

.container {
    width: 100%;
    max-width: 650px;
}

/* --- Mission select screen --- */
.mission-select {
    background: #1e1a2f;
    border: 2px solid #5D3587;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

.mission-select h2 {
    color: #FFD1E3;
    margin-bottom: 1rem;
}

.mission-list {
    list-style: none;
    padding: 0;
}

.mission-list li {
    background: #392467;
    margin: 0.75rem 0;
    padding: 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.mission-list li:hover {
    background: #5D3587;
}

.mission-list li strong {
    display: block;
    font-size: 1.2rem;
}

.mission-list li p {
    font-size: 0.9rem;
    color: #b0b0b0;
    margin-top: 0.25rem;
}

.loading-msg {
    color: #b0b0b0;
    font-style: italic;
}

/* --- Game screen --- */
.ct-game {
    background: #1e1a2f;
    border: 2px solid #5D3587;
    border-radius: 8px;
    padding: 1.5rem;
}

.ct-top-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ct-back-btn {
    background: none;
    border: 1px solid #A367B1;
    color: #A367B1;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}

.ct-back-btn:hover {
    background: #A367B1;
    color: #0a0a1a;
}

.ct-mission-title {
    color: #FFD1E3;
    font-size: 1.3rem;
}

.ct-grid {
    border-collapse: collapse;
    margin: 0 auto 1.5rem auto;
    background: #1e1a2f;
}

.ct-grid td {
    width: 55px;
    height: 55px;
    border: 1px solid #5D3587;
    text-align: center;
    vertical-align: middle;
    font-size: 2rem;
    color: #f0f0f0;
}

.ct-grid td.wall {
    background: #392467;
}

.ct-grid td.goal {
    background: #A367B1;
    color: #0a0a1a;
    font-weight: bold;
    font-size: 1.2rem;
}

.ct-grid td.goal-locked {
    background: #5D3587;
    color: #aaa;
    font-size: 1.5rem;
}

.player-arrow {
    color: #FFD1E3;
    text-shadow: 0 0 6px rgba(255,209,227,0.8);
}

/* --- Block editor --- */
.block-toolbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    align-items: center;
}

.block-toolbox button {
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.2s;
    color: #f0f0f0;
}

.block-toolbox button.primitive {
    background: #E67E22;   /* Orange */
}

.block-toolbox button.primitive:hover {
    background: #F39C12;
}

.block-toolbox button.logic {
    background: #2980B9;   /* Blue */
}

.block-toolbox button.logic:hover {
    background: #3498DB;
}

.block-toolbox button:disabled {
    opacity: 0.4;
    cursor: default;
}

.block-script {
    background: #0a0a1a;
    border: 2px solid #5D3587;
    border-radius: 6px;
    padding: 0.75rem;
    min-height: 120px;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.block-script .block {
    position: relative;
}

/* REMOVED the rule that added extra margin to nested .block elements.
   Indentation is now handled solely by the inline margin-left set in JavaScript. */

.block-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px;
    border-radius: 4px;
    background: #E67E22;
    border: 1px solid #392467;
    margin-bottom: 2px;
    transition: 0.2s;
}

.block-row.selected {
    border-color: #FFD1E3;
    box-shadow: 0 0 0 1px #FFD1E3;
}

.block-text {
    flex: 1;
    font-family: monospace;
    color: #0a0a1a;
    font-weight: bold;
}

.block-delete {
    background: none;
    border: none;
    color: #0a0a1a;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: bold;
}

.block-delete:hover {
    color: #FFD1E3;
}

.if-header, .elseif-header, .else-header, .while-header {
    background: #2980B9;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: #f0f0f0;
    cursor: pointer;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.condition-select {
    background: #1e1a2f;
    color: #f0f0f0;
    border: 1px solid #A367B1;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.85rem;
    cursor: pointer;
}

.if-container, .while-container {
    border: 1px solid #5D3587;
    border-radius: 4px;
    margin-bottom: 4px;
    background: #1e1a2f;
}

.block-body {
    /* NO margin-left here – indentation comes from the nested .block elements */
    padding: 2px 0;
}

.ct-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.ct-btn {
    background: #A367B1;
    color: #0a0a1a;
    border: none;
    padding: 0.4rem 1.2rem;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.ct-btn:hover {
    background: #FFD1E3;
}

.ct-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.ct-error {
    color: #FFD1E3;
    font-weight: bold;
    margin-top: 0.5rem;
}

.ct-status {
    color: #f0f0f0;
    margin-top: 0.25rem;
}

.ct-results {
    color: #FFD1E3;
    font-weight: bold;
    margin-top: 0.5rem;
    font-size: 1.1rem;
}

/* ============================================================
   MOBILE‑FRIENDLY ADDITIONS (append to the end of your CSS)
   ============================================================ */

/* 1. Allow everything to fit in the viewport */
body {
  padding: 0.5rem;                 /* less padding on tiny screens */
}

.container {
  max-width: 100%;                 /* never wider than screen */
}

/* 2. Grid cells shrink on narrow devices */
@media (max-width: 480px) {
  .ct-grid td {
    width: 40px;                   /* slightly smaller cells */
    height: 40px;
    font-size: 1.5rem;             /* keep arrows readable */
  }
}

/* For even smaller screens (320px) you could reduce further */
@media (max-width: 360px) {
  .ct-grid td {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
}

/* 3. Touch‑friendly buttons everywhere */
button, .block-toolbox button, .ct-btn {
  min-height: 44px;                /* iOS/Android minimum touch size */
  min-width: 44px;
  padding: 0.6rem 1rem;            /* slightly larger */
}

/* 4. Block toolbox wraps nicely and buttons are bigger */
.block-toolbox {
  gap: 0.6rem;
}

.block-toolbox button {
  font-size: 1rem;
  flex: 1 1 auto;                  /* each button can grow */
  text-align: center;
}

/* 5. Top bar: stack back button and title on narrow screens */
@media (max-width: 480px) {
  .ct-top-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .ct-back-btn {
    width: 100%;
    text-align: center;
  }
  .ct-mission-title {
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
  }
}

/* 6. Block rows (like move/rotate) – prevent overflowing */
.block-row {
  flex-wrap: wrap;                 /* allows delete button to drop if needed */
}

.block-text {
  word-break: break-word;          /* long text won't cause horizontal scroll */
}

/* 7. Mission select screen – full‑width list items */
.mission-list li {
  margin: 0.5rem 0;
  padding: 0.8rem;
}

.mission-select {
  padding: 1.25rem;                /* less padding on small screens */
}

/* 8. Make if/while containers fit better */
.if-container, .while-container {
  max-width: 100%;
  overflow-x: auto;                /* scroll if a deeply nested block is too wide */
}

/* 9. Script area – keep it from being too tall */
.block-script {
  max-height: 50vh;                /* limit height, scroll inside if needed */
  overflow-y: auto;
}

/* 10. General responsive font tweaks */
@media (max-width: 480px) {
  .mission-select h2 {
    font-size: 1.3rem;
  }
  .ct-btn {
    font-size: 0.9rem;
  }
  .block-text {
    font-size: 0.85rem;
  }
}

#clearBlocksBtn {
  background: #e74c3c;        /* bright red */
  color: #fff;
  font-weight: bold;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
#clearBlocksBtn:hover {
  background: #c0392b;        /* darker on hover */
}