/* Week 03 extras on top of week-02-lessons.css */

.week-three-period1 .week-two-hero-visual {
  transform: rotate(-0.35deg);
}

.week-three-period2 .week-two-hero-visual {
  transform: rotate(0.35deg);
}

.week-three-period3 .week-two-hero-visual {
  transform: none;
}

.mental-model,
.lifecycle {
  margin: 28px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.mental-model > div,
.lifecycle li {
  min-width: 0;
  min-height: 138px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--week-two-cream);
}

.lifecycle li + li,
.mental-model > div + div {
  margin-left: 9px;
}

.mental-model > div > span,
.lifecycle code,
.type-card > code,
.constraint-grid span,
.starter-kit span,
.rubric-card span,
.lab-label {
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.mental-model > div > strong,
.lifecycle strong,
.type-card h3,
.constraint-grid h3,
.starter-kit h3,
.rubric-card h3 {
  margin: 16px 0 0;
  display: block;
  color: var(--ink-strong);
  font-size: 15px;
  line-height: 1.4;
}

.mental-model p,
.lifecycle p,
.type-card p,
.constraint-grid p,
.starter-kit p,
.rubric-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.type-grid,
.constraint-grid,
.starter-kit,
.rubric-grid {
  margin: 28px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

.type-card,
.constraint-grid article,
.starter-kit article,
.rubric-card {
  min-width: 0;
  padding: 20px 0 22px;
  border-top: 1px solid var(--line);
}

.type-card-example {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 12px;
}

body.game-engine-week-two .code-card {
  margin: 25px 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: var(--week-two-charcoal);
  color: #eef1ec;
  box-shadow: 0 18px 42px rgba(18, 22, 19, 0.16);
}

body.game-engine-week-two .code-card-header {
  min-height: 48px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: color-mix(in srgb, #000 18%, var(--week-two-charcoal));
}

body.game-engine-week-two .code-filename {
  color: #efa083;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

body.game-engine-week-two .copy-code {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid rgba(239, 160, 131, 0.38);
  border-radius: 4px;
  background: transparent;
  color: #f2f3ef;
  font: 600 12px/1 var(--mono);
  cursor: pointer;
}

body.game-engine-week-two .copy-code[data-copied="true"] {
  border-color: #8bc29a;
  color: #bde5c8;
}

body.game-engine-week-two .copy-code:active {
  transform: scale(0.97);
}

body.game-engine-week-two .code-card pre,
body.game-engine-week-two .code-card code {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #eef1ec;
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.78;
  overflow-wrap: normal;
}

body.game-engine-week-two .code-card pre {
  padding: 20px 22px 22px;
  overflow-x: auto;
  tab-size: 4;
  display: block;
}

body.game-engine-week-two .code-card pre code {
  display: block;
  min-width: max-content;
  white-space: pre;
}

body.game-engine-week-two .code-card .code-comment { color: #8d9791; }
body.game-engine-week-two .code-card .code-keyword { color: #efa083; }
body.game-engine-week-two .code-card .code-type { color: #d7c48a; }
body.game-engine-week-two .code-card .code-value { color: #c5d6b8; }
body.game-engine-week-two .code-card .code-method { color: #f5f6f2; font-weight: 650; }

.lesson-section .code-reading {
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.code-reading li {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: start;
}

.code-reading li > code {
  justify-self: start;
}

.code-reading code {
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 650;
}

.code-reading li > span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Structured lesson lists share the text column's left edge. */
.week-three-period1 .lesson-section .demo-sequence {
  margin: 28px 0;
  padding: 0;
}

.week-three-period1 .lesson-section .source-list {
  padding: 0;
}

.week-three-period1 .mental-model {
  gap: 12px;
}

.week-three-period1 .mental-model > div + div {
  margin: 0;
}

body.game-engine-week-two.week-three-period1 .code-reading li > span .pretext-line {
  text-align: start;
  text-align-last: start;
}

.equation {
  margin: 22px 0 30px;
  padding: 18px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 620;
  line-height: 1.6;
}

.motion-lab {
  margin: 30px 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
}

.motion-lab-header {
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}

.motion-lab-header h3 {
  margin: 6px 0 0;
  font-size: 18px;
}

.motion-toggle {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-strong);
  font: 650 12px/1 var(--mono);
  cursor: pointer;
}

.motion-toggle:active {
  transform: scale(0.97);
}

.motion-stage {
  position: relative;
  height: 235px;
  overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--week-two-forest) 12%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--week-two-forest) 12%, transparent) 1px, transparent 1px),
    var(--week-two-blue);
  background-size: 32px 32px;
}

.motion-stage::after {
  content: "resetAtX";
  position: absolute;
  top: 16px;
  right: 14px;
  bottom: 16px;
  border-right: 1px dashed var(--accent);
  color: var(--accent-ink);
  font: 600 12px/1 var(--mono);
}

.motion-object {
  position: absolute;
  top: 92px;
  left: 0;
  width: 52px;
  height: 52px;
  border: 3px solid var(--paper);
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font: 700 12px/1 var(--mono);
  will-change: transform;
}

.motion-controls {
  padding: 20px 22px 23px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.motion-control label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-strong);
  font: 600 12px/1.4 var(--mono);
}

.motion-control output {
  color: var(--accent-ink);
}

.motion-control input[type="range"] {
  width: 100%;
  margin-top: 11px;
  accent-color: var(--accent);
}

.motion-check {
  align-self: center;
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 650;
}

.motion-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.constraint-grid article[data-state="forbidden"] h3 {
  color: var(--week-two-warning);
}

.debug-protocol {
  margin: 28px 0;
}

.debug-protocol > ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.debug-protocol li {
  min-width: 0;
  padding: 16px 18px 16px 0;
  border-top: 1px solid var(--line);
}

.debug-protocol li:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.debug-protocol strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.debug-protocol p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.table-scroll {
  overflow-x: auto;
}

.calculation-table,
.test-matrix {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.calculation-table caption,
.test-matrix caption {
  padding-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
}

.calculation-table th,
.calculation-table td,
.test-matrix th,
.test-matrix td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
}

.calculation-table th,
.test-matrix th {
  color: var(--ink-strong);
  font-weight: 650;
}

@media (hover: hover) and (pointer: fine) {
  .copy-code:hover {
    border-color: #efa083;
    color: #efa083;
  }

  .motion-toggle:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
  }
}

@media (max-width: 760px) {
  .week-three-period1 .project-create-steps li {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .mental-model,
  .lifecycle,
  .type-grid,
  .constraint-grid,
  .starter-kit,
  .rubric-grid,
  .motion-controls,
  .debug-protocol > ol {
    grid-template-columns: 1fr;
  }

  .lifecycle li + li,
  .mental-model > div + div {
    margin-left: 0;
    margin-top: 9px;
  }

  .code-reading li,
  .debug-protocol li:nth-child(even) {
    grid-template-columns: 1fr;
    padding-left: 0;
    border-left: 0;
  }
}

@media (prefers-color-scheme: dark) {
  .mental-model > div,
  .lifecycle li {
    background: var(--surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  .copy-code,
  .motion-toggle,
  .motion-object {
    transition: none;
  }

  .motion-object {
    will-change: auto;
  }
}

@media print {
  .copy-code,
  .motion-toggle,
  .week-two-toc,
  .mobile-section-nav {
    display: none;
  }
}