.cs-activity{max-width:1100px;margin:auto;min-width:0}.cs-activity h2{font-size:clamp(23px,3vw,34px);line-height:1.45}.cs-prose{font-size:20px;line-height:1.8;margin:16px 0;white-space:normal;overflow-wrap:anywhere}.cs-code{font:18px/1.65 Consolas,"Courier New",monospace;text-align:left;direction:ltr;unicode-bidi:isolate;background:#102941;color:#f0faff;border:3px solid var(--border);padding:18px;max-width:100%;overflow-x:auto;tab-size:4;white-space:pre}.large-code .cs-code,.large-code .code-option{font-size:24px}.cs-choices{margin:24px 0}.cs-choices .choice{height:auto;min-height:90px;align-items:flex-start;text-align:right}.code-option{font:18px/1.65 Consolas,"Courier New",monospace;unicode-bidi:isolate;text-align:left;overflow-wrap:anywhere}.cs-activity .choice:disabled{opacity:1;cursor:default}.cs-activity .choice:disabled:not(.selected):not(.winner){filter:none}.cs-activity .host-controls{border-top:2px solid var(--border);padding-top:20px;flex-wrap:wrap}.cs-feedback{border:3px solid var(--border);background:#fff4cc;padding:20px;margin-top:25px;font-size:20px;line-height:1.7}.cs-feedback h3{margin-top:0}.cs-submit p{font-size:16px;line-height:1.6}.reference-diagram{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin:25px 0;padding:20px;border:2px dashed var(--border)}.reference-sources{display:grid;gap:15px}.reference-sources code,.reference-target{padding:14px;background:#fff;border:2px solid var(--border);font:16px/1.5 Consolas,monospace}.reference-sources span{font-size:25px;padding-left:15px}.reference-target{display:grid;gap:8px;max-width:100%;overflow-wrap:anywhere}.reference-target code{white-space:normal}.cs-plan{line-height:1.7}.join-address{overflow-wrap:anywhere}.cs-activity .choice-meta{display:block;white-space:normal}.cs-activity .choice:nth-child(1){background:#ffd3c7}.cs-activity .choice:nth-child(2){background:#c9e9ff}.cs-activity .choice:nth-child(3){background:#ffedb2}.cs-activity .choice:nth-child(4){background:#d4edce}.cs-activity .choice.selected{outline:4px solid var(--border);outline-offset:2px}.cs-activity .choice.winner{border-color:#116e3a;box-shadow:inset 0 0 0 3px #116e3a}
.array-object{display:flex;align-items:center;gap:12px;margin-top:12px}.array-object>.reference-target{background:#d4edce}
.inline-code{direction:ltr;unicode-bidi:isolate;font-family:Consolas,"Courier New",monospace;font-size:.95em;white-space:pre-wrap;overflow-wrap:anywhere}.cs-results .hist-label{line-height:1.6}.cs-results .hist-label>.choice-marker{margin:0 auto 8px}.cs-results .hist-label .code-option{font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}.cs-results .hist-column:nth-child(1) .hist-bar{background:#ffd3c7}.cs-results .hist-column:nth-child(2) .hist-bar{background:#c9e9ff}.cs-results .hist-column:nth-child(3) .hist-bar{background:#ffedb2}.cs-results .hist-column:nth-child(4) .hist-bar{background:#d4edce}.cs-results .hist-bar.winner{border-color:#116e3a;box-shadow:3px 0 0 #116e3a}.cs-results .hist-winner{color:#145e31}.cs-results .hist-track{height:160px}
@media(max-width:600px){.cs-results .hist-label .code-option{font-size:12px}.cs-results .hist-label{font-size:13px}.cs-results .hist-track{height:130px}}
@media(max-width:600px){.cs-code{font-size:15px;padding:12px}.cs-prose{font-size:18px}.cs-choices{grid-template-columns:1fr}.cs-choices .choice{min-height:65px;font-size:17px}.code-option{font-size:16px}.cs-feedback{padding:15px;font-size:18px}.reference-diagram{padding:12px;margin-inline:0}.game-top h1{max-width:15ch}}

/* Wide teacher question screen: all question material and four answers share one slide. */
body.teacher-projector{padding:10px 14px;min-height:100svh}
.teacher-projector .site-header{display:none}
.teacher-projector .site-header:has(.connection.offline){display:block;position:fixed;top:8px;left:50%;transform:translateX(-50%);padding:0;z-index:70}
.teacher-projector .site-header .brand{display:none}
.teacher-projector main{max-width:none;width:100%;margin:0;height:calc(100svh - 20px)}
.teacher-projector #app{height:calc(100svh - 20px);display:grid;grid-template-rows:38px minmax(0,1fr);gap:8px}
.teacher-projector .game-top{margin:0;gap:16px;align-items:center}
.teacher-projector .game-top .small{display:none}
.teacher-projector .game-top h1{font-size:21px;line-height:1.2;margin:0;max-width:none}
.teacher-projector .room-chip{padding:0;max-width:none;gap:10px;flex-wrap:nowrap}
.teacher-projector .room-chip strong{font-size:22px}
.teacher-projector .room-chip button{font-size:14px}
.projector-question{--projection-font:24px;display:grid;grid-template-rows:34px minmax(0,1fr) auto 46px;gap:12px;margin:0;width:100%;max-width:none;padding:14px 18px 12px;min-height:0}
.projector-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.projector-heading h2{font-size:28px;line-height:1.2;margin:0;white-space:nowrap}
.projector-heading .round-line{font-size:18px;margin:0;gap:28px}
.projector-reading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px;min-height:0;align-items:center}
.projector-copy{font-size:var(--projection-font);line-height:1.35;min-width:0;max-height:100%;align-self:center}
.projector-ask{font-size:calc(var(--projection-font) + 2px);line-height:1.35;margin:0 0 18px;font-weight:900}
.projector-context p{margin:0 0 10px}
.projector-context p:last-child{margin-bottom:0}
.projector-code{min-width:0;min-height:0;max-height:100%;display:flex;flex-direction:column;gap:8px}
.projector-code figure{margin:0;min-width:0}
.projector-code figcaption{font-size:16px;line-height:1.2;margin-bottom:4px}
.projector-question .cs-code{font-size:var(--projection-font);line-height:1.2;padding:10px 12px;margin:0;overflow:visible;white-space:pre-wrap;overflow-wrap:normal;border-width:2px}
.projector-question .inline-code{font-size:1em}
.projector-question .cs-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.projector-question .choice{font-size:22px;line-height:1.25;min-height:94px;padding:12px 10px;gap:9px}
.projector-question .choice-copy{align-self:center}
.projector-question .code-option{font-size:22px;line-height:1.3}
.projector-question .choice-marker{font-size:17px;width:29px;height:29px}
.projector-question .host-controls{margin:0;padding:4px 0 0;border-top:1px solid var(--border);gap:18px}
.projector-question .host-controls .btn{font-size:18px;line-height:1.1;min-height:35px;padding:5px 22px}
.projector-reading.without-code{display:flex;justify-content:center}
.projector-reading.without-code .projector-copy{max-width:950px;font-size:30px}
.projector-reading.without-code .projector-ask{font-size:32px}
.projector-reading.multi-code{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px}
.projector-reading.multi-code .projector-copy{display:flex;gap:24px;align-items:center}
.projector-reading.multi-code .projector-ask{flex:0 0 24%;margin:0}
.projector-reading.multi-code .projector-context{flex:1}
.projector-reading.multi-code .projector-code{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:center;height:100%}
@media(max-height:680px){.teacher-projector .projector-question{gap:9px;padding:10px 16px;grid-template-rows:32px minmax(0,1fr) auto 42px}.teacher-projector .projector-code .cs-code{padding:6px 10px;line-height:1.15}.teacher-projector .projector-code figcaption{font-size:14px}.teacher-projector .projector-ask{margin-bottom:12px}.teacher-projector .projector-reading.multi-code .projector-ask{margin:0}.teacher-projector .projector-copy{line-height:1.25}.teacher-projector .projector-question .choice{padding:9px 10px;min-height:86px}}

/* Explanation and reveal layouts retain every example and answer. */
.projector-panel{--projection-font:26px;display:grid;grid-template-rows:36px minmax(0,1fr) 42px;gap:12px;margin:0;width:100%;max-width:none;padding:12px 16px;min-height:0}
.projector-panel .projector-content{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center;min-height:0;min-width:0}
.projector-panel .projector-examples{min-height:0;min-width:0;display:grid;gap:14px;align-content:center}
.projector-panel .cs-code{font-size:var(--projection-font);line-height:1.2;padding:8px 10px;border-width:2px;margin:0;white-space:pre-wrap;overflow:visible;overflow-wrap:normal}
.projector-panel .inline-code{font-size:1em}
.projector-panel .reference-diagram{margin:0;padding:10px;gap:12px;flex-wrap:nowrap;min-width:0}
.projector-panel .reference-sources{gap:8px;min-width:0}
.projector-panel .reference-sources code,.projector-panel .reference-target{font-size:var(--projection-font);line-height:1.2;padding:7px;gap:5px;min-width:0}
.projector-panel .reference-sources span{font-size:1em;padding-left:0}
.projector-panel .array-object{gap:8px;margin-top:4px}
.projector-panel .host-controls{margin:0;padding:4px 0 0;border-top:1px solid var(--border);gap:18px}
.projector-panel .host-controls .btn{font-size:18px;line-height:1.1;min-height:35px;padding:5px 22px}
.projector-results{grid-template-rows:32px auto auto auto 42px;gap:16px;height:auto;min-height:100%;align-self:start}
.projector-results>.projector-copy{font-size:var(--projection-font);line-height:1.2}
.projector-results .projector-ask{font-size:calc(var(--projection-font) + 2px);line-height:1.2;margin:0 0 5px}
.projector-results .projector-context p{margin:0}
.projector-results .projector-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
.projector-results .projector-content.multi-code{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.projector-results .multi-code .projector-code{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:center}
.projector-results .projector-content.without-code{grid-template-columns:1fr}
.projector-results .cs-code{line-height:1.15;padding:6px 8px;overflow-wrap:anywhere}
.projector-results .cs-feedback{font-size:var(--projection-font);line-height:1.25;padding:10px 12px;margin:0;min-width:0;border-width:2px}
.projector-results .cs-feedback h3{font-size:calc(var(--projection-font) + 2px);line-height:1.2;margin:0 0 8px}
.projector-results .cs-feedback p{margin:0 0 8px}
.projector-results .cs-feedback p:last-child{margin:0}
.projector-results .cs-feedback .reference-diagram{padding:6px;gap:8px}
.projector-results .cs-feedback .reference-sources code,.projector-results .cs-feedback .reference-target{font-size:var(--projection-font);padding:5px}
.projector-results .cs-results{margin:0;padding:26px 0 0}
.projector-results .histogram-bars{gap:16px;align-items:start}
.projector-results .hist-bar{max-width:110px}
.projector-results .hist-count{font-size:24px;top:-29px;line-height:1}
.projector-results .hist-label{font-size:22px;line-height:1.3;margin-top:5px;padding-bottom:3px}
.projector-results .hist-label>.choice-marker{font-size:17px;width:25px;height:25px;margin:0 auto 4px}
.projector-results .hist-label .code-option{font-size:22px;line-height:1.3}
.projector-results .hist-winner{font-size:18px;line-height:1.3;margin-top:3px}

/* Keep numbers/URLs independent of adjacent Hebrew punctuation and word wrapping. */
/* Arial's 800/900 face can fall back to a serif font for Hebrew on Windows. */
h1,.btn,.choice-marker,.hist-count,.hist-winner{font-weight:700}
.cs-activity .choice,.cs-activity .projector-ask{font-weight:700}
.question-progress{white-space:nowrap;unicode-bidi:isolate}
.join-address,.big-code,.hist-count{direction:ltr;unicode-bidi:isolate}

/* The student's device is an answer pad; teaching material stays on the projector. */
body.student-activity{padding:16px 14px 22px}
.student-activity .site-header{display:none}
.student-activity .site-header:has(.connection.offline){display:block;position:fixed;top:8px;left:50%;transform:translateX(-50%);padding:0;z-index:70}
.student-activity .site-header .brand{display:none}
.student-activity main{max-width:none;width:100%;margin:0}
.student-ballot{max-width:960px;padding:24px;display:grid;gap:24px}
.student-ballot .projector-heading h2{font-size:26px}
.student-ballot .question-progress{font-size:18px;color:var(--muted)}
.student-ballot .cs-choices{margin:0;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.student-ballot .choice{min-height:120px;padding:18px 16px;gap:14px;font-size:24px;line-height:1.45;align-items:center}
.student-ballot .code-option{font-size:24px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.student-ballot .inline-code{font-size:1em}
.student-ballot .choice-marker{width:32px;height:32px;font-size:19px}
.student-ballot .cs-submit{border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:center}
.student-ballot .cs-submit .btn{font-size:20px;min-height:50px;min-width:220px}
.student-waiting{max-width:640px;min-height:220px;margin:clamp(24px,12svh,100px) auto 0;padding:32px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.student-waiting h2{font-size:clamp(24px,5vw,32px);line-height:1.5;margin:0}
.student-round{font-size:18px;color:var(--muted)}
@media(max-width:600px){
 body.student-activity{padding:12px 10px 18px}
 .student-ballot{padding:16px 14px;gap:18px}
 .student-ballot .projector-heading{gap:10px}
 .student-ballot .projector-heading h2{font-size:23px}
 .student-ballot .question-progress{font-size:16px}
 .student-ballot .cs-choices{grid-template-columns:1fr;gap:14px}
 .student-ballot .choice{min-height:68px;padding:12px;gap:12px;font-size:20px;line-height:1.35}
 .student-ballot .code-option{font-size:20px;line-height:1.35}
 .student-ballot .choice-marker{width:29px;height:29px;font-size:17px}
 .student-ballot .cs-submit{padding-top:16px}
 .student-ballot .cs-submit .btn{width:100%;min-width:0}
}

/* Reveal pages use natural height, with room for the explanation and a tall chart. */
.teacher-projector:has(.projector-results) #app{height:auto;min-height:calc(100svh - 20px);grid-template-rows:38px auto}
.projector-results{grid-template-rows:repeat(5,auto);gap:24px;padding:18px 20px}
.projector-results>.projector-copy{line-height:1.45}
.projector-results .projector-ask{line-height:1.35;margin-bottom:10px}
.projector-results .projector-context p+p{margin-top:10px}
.projector-results .projector-content{gap:24px;align-items:start}
.projector-results .projector-content.multi-code{grid-template-columns:minmax(0,1fr)}
.projector-results .multi-code .projector-code{gap:24px;align-items:start}
.projector-results .cs-code{line-height:1.35;padding:12px 14px}
.projector-results .cs-feedback{padding:18px;font-size:var(--projection-font);line-height:1.5}
.projector-results .cs-feedback h3{line-height:1.35;margin-bottom:14px}
.projector-results .cs-feedback p{margin-bottom:14px}
.projector-results .cs-feedback .cs-code{margin-top:14px}
.projector-results .cs-feedback .reference-diagram{padding:14px;margin-top:16px;gap:16px}
.projector-results .cs-feedback .reference-target,.projector-results .cs-feedback .reference-sources code{line-height:1.35;padding:10px}
.projector-results .cs-results{padding-top:34px}
.projector-results .hist-label{margin-top:12px;line-height:1.45}
.projector-results .hist-label .code-option{line-height:1.45}
.projector-results .hist-label>.choice-marker{margin-bottom:10px}
.projector-results .hist-winner{margin-top:8px}
.projector-question .choice-copy{line-height:1.35}
.projector-question .choice-marker{align-self:flex-start}
@media(min-width:1000px){
 .cs-results .hist-track{height:clamp(220px,30svh,320px)}
}

/* Inherit the intended monospace face instead of the <code> browser default. */
.cs-code>code{font:inherit}
.code-comment{font-family:Arial,"Segoe UI",sans-serif}
.projector-question .cs-code,.projector-panel .cs-code{font-size:var(--code-font,var(--projection-font));white-space:pre;overflow-wrap:normal;overflow-x:auto}
.projector-question .code-option{white-space:pre;overflow-wrap:normal}
.projector-question.wide-answers .cs-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
.projector-question.wide-answers .choice{min-height:58px;padding:9px 12px}
.projector-explanation .projector-content{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.projector-results .projector-content:not(.without-code):not(.multi-code){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
