/* Week 05 uses the same lesson shell as weeks 03 and 04. */

:is(.week-five-period1, .week-five-period2, .week-five-period3) mark {
  padding: .08em .2em;
  background: #ffff00;
  color: #000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:is(.week-five-period1, .week-five-period2, .week-five-period3) mark code {
  background: transparent;
  color: inherit;
}

.week-two-hero-visual { transform: none; }
body.teaching-document .week-two-hero-visual figcaption { color: #e4e9e4; font-size: 14px; }
.hero-summary { font-size: 12px; }
.week-five-period2 .title-phrase { white-space: nowrap; }
.lesson-section > header h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.35; }
.lesson-section h3 { margin-top: 36px; font-size: 21px; }

.week-five-period1 .session-track li {
  grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);
}

@media (max-width: 760px) {
  .week-five-period1 .session-track li { grid-template-columns: minmax(0, 1fr); }
  .week-five-period1 .session-track p { grid-column: auto; }
}

.board-note {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent-ink);
  background: var(--surface);
  color: var(--ink);
}

.board-note strong { color: var(--ink-strong); font-size: 20px; }
.board-note p { color: var(--ink); }
.board-note .cue-label { color: var(--accent-ink); }
.checkpoint { margin: 24px 0; padding: 18px 20px; }
.checkpoint > strong { color: var(--ink-strong); font-family: inherit; font-size: 14px; }
.checkpoint p { font-size: 15px; line-height: 1.75; }
.thinking-check { border: 1px dashed var(--line-strong); border-left: 4px solid var(--accent-ink); background: var(--surface); }
.completion-check { border: 0; border-top: 2px solid var(--line-strong); background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.lesson-section .demo-sequence { margin: 24px 0; padding: 0; }
.lesson-section .demo-sequence > li {
  grid-template-columns: 32px minmax(0, 1fr) minmax(160px, .34fr);
  gap: 20px;
  padding: 24px 0;
}
.lesson-section .demo-sequence > li::before {
  font-size: 12px;
  line-height: 29.4px;
}
.lesson-section .demo-sequence > li > div { min-width: 0; }
.lesson-section .demo-sequence > li > div > h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.4;
}
.lesson-section .demo-sequence > li > div:first-of-type > :is(p, ul, ol) {
  margin: 0;
  font-size: 13px;
  line-height: 1.68;
}
.lesson-section .demo-sequence > li > div:first-of-type > :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: 14px;
}
.lesson-section .demo-sequence > li > div:first-of-type > :is(ul, ol) {
  padding-left: 1.35em;
  color: var(--muted);
}
.lesson-section .demo-sequence > li > div:first-of-type > :is(ul, ol) > li {
  margin: 0;
  padding-left: .15em;
  font-size: inherit;
  line-height: inherit;
}
.lesson-section .demo-sequence > li > div:first-of-type > :is(ul, ol) > li + li {
  margin-top: 10px;
}
.lesson-section .demo-sequence .demo-observe > strong { line-height: 29.4px; }
.lesson-section .demo-sequence .demo-observe > span { margin-top: 12px; }

@media (max-width: 980px) {
  .lesson-section .demo-sequence > li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px 20px;
  }
  .lesson-section .demo-sequence .demo-observe { grid-column: 2; }
  .lesson-section .demo-sequence .demo-observe > strong { line-height: 1.5; }
  .lesson-section .demo-sequence .demo-observe > span { margin-top: 6px; }
}

@media (max-width: 600px) {
  .lesson-section .demo-sequence > li {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 14px 12px;
  }
  .lesson-section .demo-sequence > li::before { line-height: 26.6px; }
  .lesson-section .demo-sequence > li > div > h3 { font-size: 19px; }
}
.lesson-section .source-list { padding: 0; }

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 {
  flex-shrink: 0;
  white-space: nowrap;
  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 #proposal-memo code {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.table-scroll { overflow-x: auto; }
.calculation-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.calculation-table caption { padding-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 600; text-align: left; }
.calculation-table th,
.calculation-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; line-height: 1.5; }
.calculation-table th { color: var(--ink-strong); font-weight: 650; }

.rule-figure,
.contact-comparison {
  margin: 28px 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface);
}

.rule-figure .rule-flow {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.rule-flow li { margin: 0; padding: 22px 18px; min-width: 0; }
.rule-flow li + li { border-left: 1px solid var(--line); }
.rule-flow li > span { color: var(--accent-ink); font: 650 12px/1.5 var(--mono); }
.rule-flow strong { display: block; margin: 12px 0 8px; font-size: 17px; color: var(--ink-strong); }
.rule-flow li p { margin: 0; font-size: 14px; }
.rule-figure figcaption,
.contact-comparison figcaption { padding: 15px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.65; }

.contact-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-comparison > div { padding: 22px; min-width: 0; }
.contact-comparison > div + div { border-left: 1px solid var(--line); }
.contact-comparison figcaption { grid-column: 1 / -1; }
.contact-comparison .visual-label { font-size: 12px; }
.contact-scene { display: flex; gap: 14px; align-items: center; min-height: 118px; border-bottom: 8px solid var(--week-two-forest); margin: 18px 0; color: var(--ink-strong); }
.contact-player { padding: 12px; background: var(--week-two-accent-soft); border: 2px solid var(--accent-ink); font: 700 18px/1 var(--mono); }
.contact-arrow { font-size: 28px; }
.contact-target { color: var(--accent-ink); font-size: 45px; }
.trigger-scene .contact-target { border: 2px dashed var(--accent-ink); line-height: 1; }
.contact-result { font-size: 14px; font-weight: 700; }
.contact-comparison > div > p { margin: 0; font-size: 14px; }

.starter-download { display: inline-block; padding: 12px 16px; border: 1px solid currentColor; border-radius: 4px; font-weight: 700; }
.level-blueprint { margin: 28px 0; border: 1px solid var(--line-strong); border-radius: 5px; overflow: hidden; background: var(--surface); }
.level-blueprint > a { display: block; }
.level-blueprint :is(svg, img) { display: block; width: 100%; height: auto; }
.level-blueprint figcaption { padding: 16px 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.65; color: var(--muted); }

/* Periods 1 and 2: keep feature notes, code, and observations consistent. */
:is(.week-five-period1, .week-five-period2) .api-note {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--accent-ink);
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface));
}

:is(.week-five-period1, .week-five-period2) .api-note-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

:is(.week-five-period1, .week-five-period2) .api-note-heading .cue-label { flex-shrink: 0; }
:is(.week-five-period1, .week-five-period2) .api-note-title { min-width: 0; color: var(--ink-strong); font-size: 17px; line-height: 1.5; }
:is(.week-five-period1, .week-five-period2) .api-note-title code { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; white-space: normal; overflow-wrap: anywhere; }
:is(.week-five-period1, .week-five-period2) .api-note p { margin: 10px 0 0; color: var(--ink); font-size: 15px; line-height: 1.75; }
:is(.week-five-period1, .week-five-period2) .api-note .api-note-context { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

:is(.week-five-period1, .week-five-period2) .lesson-screen { margin: 28px 0; border: 1px solid var(--line-strong); border-radius: 5px; overflow: hidden; background: var(--surface); }
:is(.week-five-period1, .week-five-period2) .lesson-screen a { display: block; }
:is(.week-five-period1, .week-five-period2) .lesson-screen img { display: block; width: 100%; height: auto; }
:is(.week-five-period1, .week-five-period2) .lesson-screen figcaption { padding: 16px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.7; }
:is(.week-five-period1, .week-five-period2) .console-observation { margin: 24px 0; padding: 18px; border-left: 4px solid var(--accent-ink); background: var(--surface); }
:is(.week-five-period1, .week-five-period2) .console-observation > strong { display: block; margin-bottom: 12px; font-size: 14px; }
:is(.week-five-period1, .week-five-period2) .console-observation pre { margin: 0; overflow-x: auto; font: 13px/1.8 var(--mono); }
body.game-engine-week-two:is(.week-five-period1, .week-five-period2) .code-card .code-keyword { color: #efa083; }
body.game-engine-week-two:is(.week-five-period1, .week-five-period2) .code-card .code-type { color: #d7c48a; }
body.game-engine-week-two:is(.week-five-period1, .week-five-period2) .code-card .code-value { color: #c5d6b8; }
body.game-engine-week-two:is(.week-five-period1, .week-five-period2) .code-card .code-comment { color: #8d9791; }

/* Show the key changes without adding characters to copied code. */
body.game-engine-week-two.week-five-period2 .code-card .code-highlight {
  background: #fff19c;
  color: #161a16;
  border-radius: 2px;
  box-shadow: 3px 0 #fff19c, -3px 0 #fff19c;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

body.game-engine-week-two.week-five-period2 .code-card .code-highlight span {
  color: inherit;
}

/* Keep the editing instruction beside the exact code it describes. */
.week-five-period2 .code-placement {
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--accent-ink);
  background: var(--surface);
  break-inside: avoid;
}
.week-five-period2 .code-placement[data-code-action="read"] {
  border-inline-start-color: var(--muted);
}
.week-five-period2 .code-placement-label {
  display: block;
  margin-bottom: 12px;
  color: var(--ink-strong);
  font-size: 14px;
}
.week-five-period2 .code-placement dl { margin: 0; }
.week-five-period2 .code-placement dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.75;
}
.week-five-period2 .code-placement dt { color: var(--muted); font-weight: 700; }
.week-five-period2 .code-placement dd { min-width: 0; margin: 0; color: var(--ink); }
.week-five-period2 .code-placement code { white-space: normal; overflow-wrap: anywhere; }
.week-five-period2 .code-placement + .code-card { margin-top: 0; }
.week-five-period2 .code-disclosure {
  margin: 12px 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
}
body.teaching-document.week-five-period2 .code-disclosure > summary {
  min-height: 52px;
  padding: 16px 44px 16px 18px;
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}
.week-five-period2 .code-disclosure > .details-motion-content {
  padding-inline: 18px;
}

@media (max-width: 600px) {
  .week-five-period2 .code-placement { padding: 16px; }
  .week-five-period2 .code-placement dl > div { grid-template-columns: 1fr; gap: 2px; }
}

.test-panel { margin: 25px 0; }
.test-identity { display: flex; flex-wrap: wrap; gap: 16px; }
.test-identity label { display: grid; gap: 8px; color: var(--ink-strong); font-size: 14px; }
.test-identity input { width: 180px; max-width: 100%; }
.test-panel input,
.test-panel select { padding: 10px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); color: var(--ink-strong); font: inherit; font-size: 14px; }
.test-panel .test-identity-note { margin: 16px 0; font-size: 14px; color: var(--muted); }
.test-table-wrap { overflow-x: auto; }
.test-table { width: 100%; min-width: 700px; border-collapse: collapse; }
.test-table caption { text-align: left; padding: 16px 0; font-weight: 650; color: var(--ink-strong); }
.test-table th,
.test-table td { padding: 14px 10px; vertical-align: top; text-align: left; border-block: 1px solid var(--line); font-size: 14px; line-height: 1.65; }
.test-table thead { background: var(--surface); }
.test-table td:nth-of-type(1) { width: 24%; }
.test-table td:nth-of-type(2) { width: 32%; }
.test-table td input { width: 100%; min-width: 110px; }
.test-table tr[data-result="pass"] { background: color-mix(in srgb, var(--week-two-success) 9%, var(--paper)); }
.test-table tr[data-result="fail"] { background: color-mix(in srgb, var(--accent) 9%, var(--paper)); }
.test-actions,
.test-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.test-actions { margin-top: 20px; justify-content: space-between; }
.test-button { min-height: 44px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); color: var(--ink-strong); cursor: pointer; font: 650 14px/1.4 var(--sans); transition: background-color 150ms ease, transform 150ms cubic-bezier(.23, 1, .32, 1); }
.test-button:active { transform: scale(.97); }
.test-button:focus-visible,
.test-panel :is(input, select):focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.build-checklist ul { list-style: none; padding: 0; }
.build-checklist li { display: flex; align-items: flex-start; gap: 12px; }
.build-checklist input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 4px; accent-color: var(--accent-ink); }
.build-checklist li[data-checked="true"] label { color: var(--week-two-success); }
.lesson-section :is([data-test-status-message], [data-build-status-message]) { margin-top: 12px; font-size: 14px; }

@media (hover: hover) and (pointer: fine) {
  .test-button:hover { background: var(--surface); }
}

@media (max-width: 760px) {
  .rule-figure .rule-flow,
  .contact-comparison { grid-template-columns: 1fr; }
  .rule-flow li + li,
  .contact-comparison > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .contact-scene { max-width: 350px; }
  .test-table-wrap { overflow-x: visible; }
  .test-table { min-width: 0; }
  .test-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .test-table,
  .test-table tbody,
  .test-table tr,
  .test-table th,
  .test-table td { display: block; width: 100%; }
  .test-table tr { margin: 18px 0; padding: 14px; border: 1px solid var(--line-strong); border-radius: 5px; }
  .test-table th,
  .test-table td { border: 0; padding: 8px 0; }
  .test-table td:nth-of-type(1),
  .test-table td:nth-of-type(2) { width: 100%; }
  .test-table td::before { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .test-table td:nth-of-type(1)::before { content: "조작과 조건"; }
  .test-table td:nth-of-type(2)::before { content: "기대 결과"; }
  .test-table td:nth-of-type(3)::before { content: "판정"; }
  .test-table td:nth-of-type(4)::before { content: "관찰과 수정 기록"; }
}

@media (prefers-color-scheme: dark) {
  .contact-player { background: var(--surface); color: var(--ink-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .test-button { transition: none; }
}

@media print {
  .test-buttons,
  .build-checklist button { display: none; }
  .rule-figure,
  .api-note,
  .contact-comparison { break-inside: avoid; }
  .test-table-wrap { overflow: visible; }
  .test-table { min-width: 0; }
}