:root{--bg:#f5f5ef;--paper:#fffefa;--ink:#243a35;--muted:#78837b;--green:#23745b;--lime:#dceca5;--line:#dedfd5;--orange:#c57d4c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:14px}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button,a,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d48b34;outline-offset:5px}[hidden]{display:none!important}.topbar{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-weight:750;letter-spacing:.03em}.brand-icon{display:grid;place-items:center;background:var(--green);color:#fff;width:32px;height:32px;border-radius:8px;font-size:24px}.tag{color:var(--muted);font-size:12px}main{max-width:1100px;margin:auto;padding:0 28px}.intro{padding:53px 0 37px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:.17em;color:var(--green)}h1{font-size:clamp(30px,4.6vw,48px);letter-spacing:.025em;line-height:1.4;margin:13px 0 17px}h1 span{color:var(--green)}.intro p{color:#737d76;line-height:1.9;margin:0}.mobile-break{display:none}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:24px}.tab{border:0;background:none;color:var(--muted);padding:17px 23px;position:relative;font-weight:650}.tab span{font-size:10px;margin-right:10px;opacity:.65}.tab.active{color:var(--green)}.tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--green)}.workspace{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}.settings{background:#eeefe7;padding:18px 26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.settings>div{display:flex;align-items:center;gap:12px}.settings label{font-size:12px;font-weight:650}.settings p{font-size:12px;color:var(--muted);margin:0}select{color:var(--ink);padding:8px 30px 8px 12px;background:var(--paper);border:1px solid #cdd3c5;border-radius:7px;min-height:40px}.stage-heading{text-align:center;padding:31px 20px 12px}h2{font-size:23px;letter-spacing:.015em;margin:10px 0}.stage-heading p{font-size:13px;color:var(--muted);margin:12px 0;line-height:1.7}.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:16px;max-width:820px;margin:8px auto 0;padding:0 30px}.doors.three{max-width:680px;grid-template-columns:repeat(3,1fr);gap:28px}.door{padding:0;border:0;background:none;min-width:0;color:var(--ink)}.door-marker{height:27px;display:block;font-size:11px;font-weight:700;color:var(--green)}.door-face{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:.66;border:1px solid #819689;border-radius:9px 9px 3px 3px;background:#dce3d5;box-shadow:inset 0 0 0 7px #eaf0e4,0 5px 0 #d8ded2;transition:background .3s,transform .2s,border .2s}.door-face:before{content:"";position:absolute;inset:15px 15px 40%;border:1px solid #b1bfac;border-radius:2px}.door:not(:disabled):hover .door-face{transform:translateY(-5px);background:#cedec1}.door-number{font-size:35px;font-weight:500;z-index:1;letter-spacing:.05em}.door-label{font-size:9px;letter-spacing:.13em;margin-top:8px}.knob{position:absolute;right:13%;top:59%;width:9px;height:9px;border-radius:50%;background:#7c906d;box-shadow:1px 2px 0 #b2bda8}.door-bottom{display:block;height:28px;padding-top:12px;font-size:11px;font-weight:700}.selected .door-face{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 6px #41856e,0 5px 0 #154e3c;color:white}.selected .door-face:before{border-color:#76a58c}.selected .knob{background:var(--lime);box-shadow:none}.remaining .door-face{background:#f1e7cc;border-color:#b49b6c;box-shadow:inset 0 0 0 6px #f9f1dd,0 5px 0 #daceb1}.remaining .door-marker{color:#997740}.opened .door-face,.door:disabled:not(.winner).final-choice .door-face{background:#edece6;box-shadow:inset 7px 0 0 #deded6;border:1px dashed #c5c8bf;color:#92998e}.opened .door-face:before,.winner .door-face:before{display:none}.opened .knob,.winner .knob,.final-choice .knob{display:none}.door-symbol{font-size:42px;line-height:1.2}.door-symbol:empty{display:none}.opened .door-number,.winner .door-number,.final-choice .door-number{position:absolute;top:10px;left:15px;font-size:13px}.opened .door-label,.winner .door-label,.final-choice .door-label{font-size:12px;letter-spacing:.03em}.winner .door-face{background:#eef3c7;color:#617629;border:2px solid #9dab5a;box-shadow:inset 0 0 0 6px #f7f9df,0 5px 0 #d5dca7}.final-choice .door-bottom{color:var(--green)}.many{grid-template-columns:repeat(5,1fr);gap:9px 16px;max-width:780px}.many .door-face{aspect-ratio:.95}.many .door-number{font-size:25px}.many .door-marker{font-size:10px;height:23px}.many .door-symbol{font-size:30px}.many .door-bottom{height:23px;font-size:10px}.legend{display:flex;justify-content:center;gap:20px;margin:27px 15px 0;color:var(--muted);font-size:10px}.legend span{display:flex;align-items:center;gap:6px}.dot{width:8px;height:8px;display:inline-block;border-radius:50%}.selected-dot{background:var(--green)}.remaining-dot{background:#cfb786}.open-dot{background:#cccec5}.actions{min-height:98px;display:flex;align-items:center;justify-content:center;gap:12px;padding:20px;flex-wrap:wrap}.action-hint,.actions:has(>.action-hint){font-size:12px;color:var(--muted)}.primary,.secondary{border:1px solid var(--green);padding:13px 27px;min-height:48px;border-radius:8px;font-weight:650}.primary{background:var(--green);color:white}.primary:hover{background:#195e48}.secondary{background:transparent;color:var(--green)}.secondary:hover{background:#eef2e8}.results{margin-top:32px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title h2{font-size:21px;margin:7px 0}.text-button{border:0;background:none;color:var(--muted);font-size:12px;padding:14px 0 14px 14px}.record-context{font-size:11px;color:var(--muted);margin:6px 0 17px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.result-card{background:var(--paper);padding:22px 24px;border:1px solid var(--line);border-radius:12px}.result-card.switch{background:#eef3e5;border-color:#d6dec9}.card-title{display:flex;align-items:center;justify-content:space-between}.card-title h3{font-size:15px;margin:0}.card-title>span{font-size:9px;letter-spacing:.12em;color:var(--muted)}.rate{display:flex;align-items:baseline;gap:12px;margin:18px 0}.rate strong{font-size:34px;font-weight:550;font-variant-numeric:tabular-nums}.rate span{font-size:11px;color:var(--muted)}.switch .rate strong{color:var(--green)}.comparison{height:11px;background:#e4e5dc;border-radius:3px;position:relative}.comparison>div{background:#a8b2a2;height:100%;border-radius:3px;transition:width .35s}.switch .comparison>div{background:var(--green)}.comparison i{position:absolute;width:2px;height:19px;background:#374b3c;top:-4px;transform:translateX(-1px)}.theory{display:flex;gap:8px;font-size:11px;color:var(--muted);margin:14px 0 18px}.theory strong{color:var(--ink)}.theory span{margin-left:auto}.counts{border-top:1px solid var(--line);padding-top:15px;display:flex;gap:18px;font-size:11px;color:var(--muted);flex-wrap:wrap}.counts b{font-size:14px;color:var(--ink)}.counts>span:last-child{margin-left:auto}.chart-caption{display:flex;gap:15px;font-size:10px;color:var(--muted);line-height:1.8;flex-wrap:wrap}.chart-caption>span:last-child{margin-left:auto}.explanation{margin:31px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.explanation summary{cursor:pointer;font-weight:650;list-style:none;display:flex;justify-content:space-between;line-height:1.7}.explanation summary::-webkit-details-marker{display:none}.explanation p{line-height:1.9;max-width:850px}.note{font-size:12px;color:var(--muted)}footer{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;padding:0 0 30px}#challenge-progress{max-width:600px;margin:10px auto;padding:0 25px}.progress-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:9px}.progress-track{height:5px;border-radius:5px;background:#e5e8de}.progress-track>div{height:100%;background:var(--green);transition:width .2s}.sim-visual{display:flex;justify-content:center;align-items:center;gap:35px;min-height:180px}.sim-visual span{font-family:Georgia,serif;font-size:38px}.sim-visual span:last-child{color:var(--green)}.sim-visual i{color:var(--muted);font-family:Georgia,serif}.simulation-status{text-align:center;font-size:12px;color:var(--muted);padding:0 20px 20px;line-height:1.8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){main{padding:0 16px}.topbar{height:65px;padding:0 16px}.brand{font-size:12px;gap:8px}.tag{display:none}.intro{padding:32px 0 23px}h1{font-size:30px}.intro p{font-size:12px}.mobile-break{display:block}.tabs{gap:0;margin-bottom:17px}.tab{flex:1;padding:15px 4px;font-size:11px;white-space:nowrap}.tab span{display:block;margin:0 0 7px;font-size:9px}.settings{padding:14px;gap:12px}.settings>div{gap:8px;flex-wrap:wrap}.settings p{font-size:10px}.settings label{font-size:11px}.stage-heading{padding:23px 12px 8px}.stage-heading h2{font-size:20px}.stage-heading p{font-size:11px}.doors,.doors.three{padding:0 16px;gap:12px}.door-face{box-shadow:inset 0 0 0 4px #eaf0e4,0 4px 0 #d8ded2}.door-face:before{inset:10px 10px 40%}.door-number{font-size:27px}.door-marker{font-size:9px}.door-bottom{font-size:9px}.knob{width:7px;height:7px}.doors:not(.three){grid-template-columns:repeat(4,1fr);gap:9px}.many .door-face{aspect-ratio:.72}.many .door-marker{font-size:8px}.many .door-number{font-size:20px}.many .door-label{font-size:9px}.many .door-symbol{font-size:25px}.opened .door-number,.winner .door-number,.final-choice .door-number{top:7px;left:8px;font-size:10px}.legend{gap:12px;font-size:9px;margin-top:18px}.actions{min-height:90px;padding:18px 12px}.primary,.secondary{padding:12px 20px;font-size:13px}.result-grid{grid-template-columns:1fr;gap:12px}.result-card{padding:20px}.chart-caption>span:last-child{width:100%;margin-left:0}.explanation summary{font-size:12px}.explanation p{font-size:12px}footer{gap:12px;font-size:9px}.sim-visual{gap:20px;min-height:145px}.sim-visual span{font-size:28px}.progress-label{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

/* Compact experience layout. Other modes retain their original presentation. */
body[data-mode="experience"] .topbar { height: 58px; }
body[data-mode="experience"] .intro { padding: 18px 0 14px; }
body[data-mode="experience"] h1 { font-size: 32px; margin: 6px 0; }
body[data-mode="experience"] .intro p { font-size: 12px; line-height: 1.6; }
body[data-mode="experience"] .tabs { margin-bottom: 12px; }
body[data-mode="experience"] .tab { padding-top: 12px; padding-bottom: 12px; }
body[data-mode="experience"] .settings { padding: 10px 22px; }
body[data-mode="experience"] #play-panel { display: flex; flex-direction: column; }
body[data-mode="experience"] .stage-heading { padding: 14px 16px 4px; }
body[data-mode="experience"] .stage-heading h2 { margin: 5px 0; font-size: 21px; }
body[data-mode="experience"] .stage-heading p { margin: 5px 0; font-size: 12px; }
body[data-mode="experience"] .doors {
  width: 100%; max-width: 630px; padding: 0 24px; margin-top: 2px;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px 14px;
}
body[data-mode="experience"] .doors.three {
  max-width: 528px; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
body[data-mode="experience"] .door-marker { height: 22px; font-size: 11px; }
body[data-mode="experience"] .door-bottom { height: 19px; padding-top: 5px; }
body[data-mode="experience"] .door-bottom:empty { display: none; }
body[data-mode="experience"] #play-panel:not([data-phase="result"]) .door-bottom { display: none; }
body[data-mode="experience"] .doors.many {
  max-width: 720px; grid-template-columns: repeat(5, 1fr); gap: 8px 14px;
}
body[data-mode="experience"] .many .door-face { aspect-ratio: 1.2; }
body[data-mode="experience"] .many .door-marker { height: 19px; font-size: 10px; }
body[data-mode="experience"] .many .door-number { font-size: 22px; }
body[data-mode="experience"] .actions { order: 1; min-height: 0; padding: 12px 14px 8px; gap: 12px; }
body[data-mode="experience"] .legend { order: 2; margin: 3px 12px 12px; color: #59665b; }
body[data-mode="experience"] .primary,
body[data-mode="experience"] .secondary { min-height: 44px; padding: 11px 25px; }
body[data-mode="experience"] .door.opened .door-face {
  background: #e7e7e0; color: #505b52; border-color: #a5aca0;
}
body[data-mode="experience"] .door.opened .door-label,
body[data-mode="experience"] [data-phase="result"] .door-label {
  font-size: 17px; font-weight: 800; letter-spacing: .02em; margin-top: 3px;
}
body[data-mode="experience"] .door.opened .door-symbol { font-size: 44px; font-weight: 700; }
body[data-mode="experience"] [data-phase="result"] .door-face:before,
body[data-mode="experience"] [data-phase="result"] .knob { display: none; }
body[data-mode="experience"] [data-phase="result"] .door-number {
  position: absolute; top: 9px; left: 12px; font-size: 12px;
}
body[data-mode="experience"] .door.winner .door-face {
  background: #ffe16a; color: #674600; border: 2px solid #c38a0b;
  box-shadow: inset 0 0 0 5px #fff0a3, 0 4px 0 #c99d27;
}
body[data-mode="experience"] .door.winner .door-symbol { font-size: 56px; line-height: 1.1; }
body[data-mode="experience"] .door.winner .door-label { font-size: 21px; }
body[data-mode="experience"] .door.final-choice:not(.winner) .door-face {
  background: #f4e0d5; color: #873d28; border: 2px solid #ae6249;
  box-shadow: inset 0 0 0 4px #fff0e7, 0 4px 0 #c5917e;
}
body[data-mode="experience"] .door.final-choice:not(.winner) .door-symbol { font-size: 52px; font-weight: 800; }
body[data-mode="experience"] .door.final-choice:not(.winner) .door-bottom { color: #873d28; }
body[data-mode="experience"] [data-outcome="win"] #instruction {
  font-size: 30px; font-weight: 850; color: #885b00;
}
body[data-mode="experience"] [data-outcome="win"] #instruction::before { content: '★ '; color: #ad7900; }
body[data-mode="experience"] [data-outcome="loss"] #instruction { color: #873d28; font-weight: 800; }
body[data-mode="experience"] .many .door.opened .door-label,
body[data-mode="experience"] [data-phase="result"] .many .door-label { font-size: 13px; }
body[data-mode="experience"] .many .door.opened .door-symbol,
body[data-mode="experience"] [data-phase="result"] .many .door-symbol { font-size: 30px; }
body[data-mode="experience"] .results { margin-top: 16px; }
body[data-mode="experience"] .section-title h2 { font-size: 18px; margin: 3px 0; }
body[data-mode="experience"] .record-context { margin: 3px 0 9px; }
body[data-mode="experience"] .result-card { padding: 14px 20px; }
body[data-mode="experience"] .rate { margin: 8px 0; }
body[data-mode="experience"] .rate strong { font-size: 28px; }
body[data-mode="experience"] .theory { margin: 10px 0; }
body[data-mode="experience"] .counts { padding-top: 9px; }
body[data-mode="experience"] .explanation { margin: 18px 0; padding: 14px 0; }
@media (max-width: 650px) {
  body[data-mode="experience"] .intro { padding: 15px 0 10px; }
  body[data-mode="experience"] h1 { font-size: 27px; }
  body[data-mode="experience"] .tab span { margin-bottom: 3px; }
  body[data-mode="experience"] .settings { padding: 9px 12px; gap: 7px; }
  body[data-mode="experience"] .settings p { font-size: 10px; }
  body[data-mode="experience"] .stage-heading { padding: 12px 10px 4px; }
  body[data-mode="experience"] .stage-heading h2 { font-size: 19px; }
  body[data-mode="experience"] .stage-heading p { font-size: 11px; }
  body[data-mode="experience"] .doors { padding: 0 12px; gap: 7px; grid-template-columns: repeat(4, 1fr); }
  body[data-mode="experience"] .doors.three { width: 82%; padding: 0 12px; gap: 10px; }
  body[data-mode="experience"] .door-marker { height: 20px; font-size: 9px; }
  body[data-mode="experience"] .door-number { font-size: 25px; }
  body[data-mode="experience"] .door.opened .door-label,
  body[data-mode="experience"] [data-phase="result"] .door-label { font-size: 13px; }
  body[data-mode="experience"] .door.winner .door-label { font-size: 15px; }
  body[data-mode="experience"] .door.winner .door-symbol,
  body[data-mode="experience"] .door.final-choice:not(.winner) .door-symbol { font-size: 36px; }
  body[data-mode="experience"] .door.opened .door-symbol { font-size: 32px; }
  body[data-mode="experience"] .doors.many { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  body[data-mode="experience"] .many .door-face { aspect-ratio: .95; }
  body[data-mode="experience"] .many .door-marker { font-size: 8px; height: 17px; }
  body[data-mode="experience"] .many .door.opened .door-label,
  body[data-mode="experience"] [data-phase="result"] .many .door-label { font-size: 11px; }
  body[data-mode="experience"] .many .door.opened .door-symbol,
  body[data-mode="experience"] [data-phase="result"] .many .door-symbol { font-size: 26px; }
  body[data-mode="experience"] [data-phase="result"] .door-number { top: 5px; left: 7px; font-size: 9px; }
  body[data-mode="experience"] [data-outcome="win"] #instruction { font-size: 25px; }
  body[data-mode="experience"] .actions { padding-top: 10px; }
}
/* Keep revealed door numbers clear of the outcome symbol at every grid size. */
body[data-mode="experience"] .door.opened .door-number {
  position: absolute; top: 7px; left: 9px; font-size: 11px;
}
@media (max-width: 650px) {
  body[data-mode="experience"] .door.opened .door-number { top: 5px; left: 7px; font-size: 9px; }
}

/* Challenge: compact doors and a persistent summary of the current run. */
body[data-mode="challenge"] .topbar { height: 58px; }
body[data-mode="challenge"] .intro { padding: 18px 0 14px; }
body[data-mode="challenge"] h1 { font-size: 32px; margin: 6px 0; }
body[data-mode="challenge"] .intro p { font-size: 12px; line-height: 1.6; }
body[data-mode="challenge"] .tabs { margin-bottom: 12px; }
body[data-mode="challenge"] .tab { padding-top: 12px; padding-bottom: 12px; }
body[data-mode="challenge"] .settings { padding: 10px 22px; gap: 20px; }
body[data-mode="challenge"] #play-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px;
  grid-template-areas: "heading summary" "doors summary" "legend summary" "actions summary";
  grid-template-rows: auto auto auto 1fr; column-gap: 24px; padding: 18px 24px;
  align-items: start;
}
body[data-mode="challenge"] .stage-heading { grid-area: heading; padding: 0 0 8px; min-height: 93px; }
body[data-mode="challenge"] .stage-heading h2 { font-size: 21px; margin: 5px 0; }
body[data-mode="challenge"] .stage-heading p { font-size: 12px; margin: 5px 0; }
body[data-mode="challenge"] .doors {
  grid-area: doors; width: 100%; max-width: 580px; padding: 0 8px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px 12px;
}
body[data-mode="challenge"] .doors.three {
  max-width: 496px; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
body[data-mode="challenge"] .doors.many { grid-template-columns: repeat(5, 1fr); }
body[data-mode="challenge"] .many .door-face { aspect-ratio: 1.2; }
body[data-mode="challenge"] .door-marker { height: 22px; font-size: 11px; }
body[data-mode="challenge"] .door-bottom { height: 20px; padding-top: 5px; font-size: 10px; }
body[data-mode="challenge"] .many .door-marker { height: 19px; font-size: 10px; }
body[data-mode="challenge"] .many .door-number { font-size: 22px; }
body[data-mode="challenge"] .many .door-symbol { font-size: 28px; }
body[data-mode="challenge"] .many .door-label { margin-top: 3px; }
body[data-mode="challenge"] .door.opened .door-number,
body[data-mode="challenge"] [data-phase="result"] .door-number {
  position: absolute; top: 6px; left: 8px; font-size: 10px;
}
body[data-mode="challenge"] [data-phase="result"] .door-face:before,
body[data-mode="challenge"] [data-phase="result"] .knob { display: none; }
body[data-mode="challenge"] .legend { grid-area: legend; margin: 8px 0 0; gap: 16px; }
body[data-mode="challenge"] .actions { grid-area: actions; min-height: 44px; padding: 10px 0 0; font-size: 12px; }
body[data-mode="challenge"] #challenge-progress {
  grid-area: summary; width: 100%; max-width: none; margin: 0; padding: 22px;
  background: #eef3e5; border: 1px solid #d6dec9; border-radius: 12px;
}
body[data-mode="challenge"] #challenge-results-title { font-size: 20px; margin: 7px 0; }
body[data-mode="challenge"] .challenge-note { color: var(--muted); font-size: 11px; margin: 0 0 18px; }
body[data-mode="challenge"] .challenge-metrics { margin: 0; }
body[data-mode="challenge"] .challenge-metrics > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 14px 0; border-top: 1px solid #d6dec9;
}
body[data-mode="challenge"] .challenge-metrics dt { font-size: 12px; color: #59665b; }
body[data-mode="challenge"] .challenge-metrics dd {
  margin: 0; font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;
}
body[data-mode="challenge"] .challenge-metrics small { margin-left: 5px; font-size: 11px; font-weight: 400; }
body[data-mode="challenge"] .challenge-trials { flex-direction: column; }
body[data-mode="challenge"] .challenge-rate dd { color: var(--green); font-size: 32px; }
body[data-mode="challenge"] #challenge-progress .progress-track { margin-top: 10px; }
body[data-mode="challenge"] .results { margin-top: 18px; }
@media (max-width: 899px) {
  body[data-mode="challenge"] #play-panel {
    grid-template-columns: minmax(0, 1fr); column-gap: 0; padding: 16px 18px;
    grid-template-areas: "heading" "doors" "legend" "actions" "summary";
  }
  body[data-mode="challenge"] #challenge-progress { max-width: 580px; margin: 14px auto 0; padding: 16px 20px; }
  body[data-mode="challenge"] .challenge-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  body[data-mode="challenge"] .challenge-metrics > div { flex-direction: column; padding: 10px 0; gap: 5px; }
  body[data-mode="challenge"] .challenge-note { margin-bottom: 12px; }
}
@media (max-width: 650px) {
  body[data-mode="challenge"] .intro { padding: 15px 0 10px; }
  body[data-mode="challenge"] h1 { font-size: 27px; }
  body[data-mode="challenge"] .tab span { margin-bottom: 3px; }
  body[data-mode="challenge"] .settings { padding: 10px 12px; gap: 10px; }
  body[data-mode="challenge"] #challenge-settings { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  body[data-mode="challenge"] .settings select { max-width: 100%; }
  body[data-mode="challenge"] #play-panel { padding: 14px 12px; }
  body[data-mode="challenge"] .stage-heading { min-height: 104px; }
  body[data-mode="challenge"] .stage-heading h2 { font-size: 19px; }
  body[data-mode="challenge"] .stage-heading p { font-size: 11px; }
  body[data-mode="challenge"] .doors { padding: 0; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; }
  body[data-mode="challenge"] .doors.three { width: 88%; gap: 10px; }
  body[data-mode="challenge"] .doors.many { grid-template-columns: repeat(4, 1fr); }
  body[data-mode="challenge"] .many .door-face { aspect-ratio: .95; }
  body[data-mode="challenge"] .door-marker { height: 20px; font-size: 9px; }
  body[data-mode="challenge"] .many .door-marker { height: 17px; font-size: 8px; }
  body[data-mode="challenge"] .door-bottom { font-size: 9px; }
  body[data-mode="challenge"] .door.opened .door-number,
  body[data-mode="challenge"] [data-phase="result"] .door-number { top: 5px; left: 6px; font-size: 9px; }
  body[data-mode="challenge"] .many .door-symbol { font-size: 25px; }
  body[data-mode="challenge"] .legend { gap: 10px; font-size: 9px; }
  body[data-mode="challenge"] #challenge-progress { padding: 16px; }
  body[data-mode="challenge"] .challenge-metrics dd { font-size: 23px; }
  body[data-mode="challenge"] .challenge-rate dd { font-size: 28px; }
}
@media (min-width: 900px) {
  body[data-mode="challenge"] .doors.many { max-width: 500px; }
  body[data-mode="challenge"] .many .door-face { aspect-ratio: 1.35; }
  body[data-mode="challenge"] .many .door-bottom { height: 16px; padding-top: 3px; }
}