/* The lesson pages after Science (Geography, Coding, Health, History, Music) use the
   Science lesson engine and science.css; this file adds what only they need: maps, the
   compass walk, and later each subject's own activities. Loaded after science.css. */

body.science { --map-sea: #bfe3f7; }

/* ---- A map on the stage (an item { map }) ---- */

.item.mapitem .inner { width: calc(var(--w) * 1cqw); }
.item.mapitem svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.4cqw 1.2cqw rgb(29 36 51 / 0.18)); }
.map .ocean-name { font: 400 26px/1 var(--book); letter-spacing: 0.02em; }
.map .region, .map .mark, .map .equator, .map .ocean-name { transform-box: fill-box; transform-origin: center; }

/* ---- Map: tap the place the voice names ---- */

.map-act { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 10px; min-height: 0; }
.map-ask { margin: 0; min-height: 1.3em; font: 400 28px/1.25 var(--book); text-align: center; color: var(--subject-dark, var(--accent)); }
.map-box { container-type: size; touch-action: manipulation; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.map-act-australia .map { height: min(100cqh, 100cqw * 0.92); width: auto; max-width: 100cqw; }
.map-act-world .map { width: min(100cqw, 100cqh * 2.35); height: auto; }
.map-act .region, .map-act .mark, .map-act .ocean-spot { cursor: pointer; }
.map-act .mark { r: 22px; }
.map-found { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 40px; }
.map-found .chip { padding: 4px 14px; border-radius: 999px; background: var(--right-soft); color: #13643a; font: 400 20px/1.6 var(--book); }

/* ---- Compass: walk Kobi north, east, south or west ---- */

.compass-act { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 10px; min-height: 0; }
.compass-row { container-type: size; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; width: 100%; min-height: 0; }
.board-wrap { display: grid; justify-items: center; gap: 4px; min-height: 0; }
.north-mark { font: 600 22px/1 var(--ks-brand-font, var(--ui)); color: #c0392b; }
.grid-board {
  --cell: min(calc((100cqh - 30px) / var(--n)), calc((100cqw - 230px) / var(--n)), 120px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cell));
  grid-template-rows: repeat(var(--n), var(--cell));
  border-radius: 18px;
  overflow: hidden;
  background: #cfe9b8;
  box-shadow: var(--shadow);
}
.grid-board .cell { border: 1px solid rgb(255 255 255 / 0.7); }
.grid-thing, .grid-kobi {
  position: absolute;
  left: calc(var(--c) * var(--cell));
  top: calc(var(--r) * var(--cell));
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  align-content: center;
  pointer-events: none;
}
.grid-emoji { font: calc(var(--cell) * 0.5)/1 var(--emoji); }
.grid-label { max-width: 100%; overflow: hidden; font: 400 calc(var(--cell) * 0.15)/1.1 var(--book); text-overflow: ellipsis; white-space: nowrap; }
.grid-kobi img { width: calc(var(--cell) * 0.82); height: auto; filter: drop-shadow(0 3px 4px rgb(29 36 51 / 0.3)); }
.compass-pad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 72px);
  grid-template-rows: repeat(3, 72px);
  grid-template-areas: ". n ." "w r e" ". s .";
  gap: 6px;
}
.compass-pad .rose { grid-area: r; display: grid; place-items: center; font: 44px/1 var(--emoji); }
.dir {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  font: 26px/1 var(--emoji);
}
.dir:active { transform: scale(0.94); }
.dir-name { font: 600 13px/1.2 var(--ks-brand-font, var(--ui)); color: var(--ink); }
.dir-north { grid-area: n; }
.dir-east { grid-area: e; }
.dir-south { grid-area: s; }
.dir-west { grid-area: w; }

@media (max-width: 600px), (max-height: 500px) {
  .map-ask { font-size: 20px; }
  .map-found .chip { font-size: 15px; }
  .compass-row { gap: 10px; }
  .grid-board { --cell: min(calc((100cqh - 26px) / var(--n)), calc((100cqw - 180px) / var(--n)), 90px); }
  .compass-pad { grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(3, 54px); gap: 4px; }
  .compass-pad .rose { font-size: 32px; }
  .dir { font-size: 20px; border-radius: 14px; }
  .dir-name { font-size: 11px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .compass-row { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
  .grid-board { --cell: min(calc((100cqh - 200px) / var(--n)), calc((100cqw - 10px) / var(--n)), 80px); }
}

/* ---- Try it at home: a plain record table to fill in (no guess columns) ---- */

.record.plain thead th { background: #f3efe6; font: 700 15px/1.2 var(--ui); }
.record.plain td { height: 46px; }
.record.plain tbody th { width: 30%; }
@media print {
  .record.plain td { height: 24pt; }
}

/* ---- Code: arrow blocks, a program, and Kobi on the grid ---- */

.code-act { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 10px; min-height: 0; }
.code-row { container-type: size; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; width: 100%; min-height: 0; }
.code-board { --cell: min(calc((100cqh - 10px) / var(--n)), calc(55cqw / var(--n)), 110px); }
.grid-thing.goal .grid-emoji { animation: goal 1.6s ease-in-out infinite; }
@keyframes goal { 50% { transform: scale(1.12); } }
.grid-thing.wall { background: #e7d8c4; }
.code-side { display: grid; gap: 10px; align-content: center; min-width: 0; }
.code-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.code-arrow { width: 72px; height: 72px; border: 3px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); font: 36px/1 var(--emoji); }
.code-arrow.loop { border-color: color-mix(in srgb, var(--subject, var(--accent)) 50%, #fff); }
.code-arrow:active, .code-block:active { transform: scale(0.94); }
.code-label { display: flex; justify-content: space-between; gap: 10px; font: 600 16px/1.2 var(--ks-brand-font, var(--ui)); color: var(--muted); }
.code-count.full { color: var(--wrong); }
.code-program { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 70px; padding: 8px; border: 3px dashed var(--line); border-radius: 18px; background: #fff; }
.code-empty { align-self: center; color: var(--muted); font-size: 16px; }
.code-block { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid var(--line); border-radius: 14px; background: var(--subject-soft, var(--accent-soft)); font: 28px/1 var(--emoji); }
.code-block.fixable { border-style: dashed; border-color: var(--subject, var(--accent)); }
.code-block .times { position: absolute; right: -4px; bottom: -6px; padding: 0 5px; border-radius: 999px; background: var(--subject-dark, var(--accent)); color: #fff; font: 700 13px/1.5 var(--ui); }
.code-buttons { display: flex; gap: 10px; }
.code-buttons .big { flex: 1; }

/* ---- Pick: look, then tap the right one ---- */

.pick-act { display: grid; align-content: center; justify-items: center; gap: 16px; }
.pick-show { padding: 12px 22px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); font: 56px/1.2 var(--emoji); letter-spacing: 0.08em; text-align: center; }

@media (max-width: 600px), (max-height: 500px) {
  .code-row { gap: 10px; }
  .code-arrow { width: 54px; height: 54px; font-size: 26px; border-radius: 14px; }
  .code-block { width: 42px; height: 42px; font-size: 22px; }
  .pick-show { font-size: 36px; padding: 8px 14px; }
}
@media (orientation: portrait) {
  .code-row { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
  .code-board { --cell: min(calc((100cqh - 260px) / var(--n)), calc((100cqw - 10px) / var(--n)), 110px); }
  .code-side { width: min(100%, 560px); }
}
/* A phone has no room for the board, the arrows and the program in one screen: the
   board takes its size from the screen's width, and the step scrolls (sized by the
   height left over, the board shrank to nothing on a phone). */
@media (max-width: 600px), (max-height: 500px) {
  .code-act { grid-template-rows: auto auto; }
  .code-act, .code-row, .board-wrap { min-height: auto; } /* min-height 0 let the grid squeeze the board to nothing */
  .code-row { container-type: normal; grid-template-rows: auto auto; }
  .code-board { --cell: min(calc((100vw - 34px) / var(--n)), 64px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .code-row { grid-template-rows: auto; }
  .code-board { --cell: min(calc(40vw / var(--n)), 56px); }
}

/* ---- Body: tap the part on the drawn child ---- */

.body-act { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 8px; min-height: 0; }
.child-box { container-type: size; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.child { height: min(100cqh, 160cqw); width: auto; overflow: visible; }
.child .part, .child .hit { cursor: pointer; }
.child .part { transition: filter 0.2s; }
.child .part.found { filter: drop-shadow(0 0 6px #2e9b4f) drop-shadow(0 0 2px #2e9b4f); }

/* ---- Breathe: hold to breathe in ---- */

.breathe-sim { gap: 12px; }
.balloon-box { display: grid; place-items: center; width: min(46vh, 70vw); aspect-ratio: 1; }
.balloon { font: min(30vh, 46vw)/1 var(--emoji); transform-origin: 50% 85%; }
.breath-dots { display: flex; gap: 10px; }
.breath-dots .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--line); }
.breath-dots .dot.on { background: var(--subject, var(--accent)); }
.breathe-button { min-width: 260px; touch-action: none; -webkit-user-select: none; user-select: none; }

/* ---- Moves: an active break ---- */

.moves-act { display: grid; align-content: center; justify-items: center; gap: 14px; }
.move-row { display: flex; align-items: center; gap: 30px; }
.move-emoji { font: 140px/1 var(--emoji); }
.move-label { margin: 0; font: 600 30px/1.2 var(--ks-brand-font, var(--ui)); }
.move-ring {
  --left: 1;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--subject, var(--accent)) calc(var(--left) * 360deg), var(--line) 0);
}
.move-count { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; font: 600 40px/1 var(--ks-brand-font, var(--ui)); }

@media (max-width: 600px), (max-height: 500px) {
  .move-emoji { font-size: 90px; }
  .move-ring { width: 90px; height: 90px; }
  .move-count { width: 68px; height: 68px; font-size: 30px; }
  .move-label { font-size: 22px; }
}

/* ---- Colour: paint the flag ---- */

.colour-sim { gap: 14px; }
.picture-box { width: min(560px, 90%, 60vh * 1.5); }
.colour-picture { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow); cursor: pointer; }
.palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.paint { display: grid; place-items: end center; width: 76px; height: 76px; padding-bottom: 4px; border: 4px solid #fff; border-radius: 50%; background: var(--paint); box-shadow: var(--shadow); }
.paint span { padding: 0 6px; border-radius: 8px; background: rgb(255 255 255 / 0.85); font: 600 13px/1.4 var(--ui); color: var(--ink); }
.paint[aria-pressed="true"] { outline: 4px solid var(--subject, var(--accent)); outline-offset: 3px; }

/* ---- Music: listen, beat, rhythm and compose ---- */

.listen-act { display: grid; align-content: center; justify-items: center; gap: 16px; }
.listen-row { position: relative; }
.listen-notes { position: absolute; left: 100%; top: 0; width: 60px; height: 100%; }
.listen-notes .float-note { position: absolute; left: 10px; top: 10px; font: 30px/1 var(--emoji); }
.listen-options.waiting .card { opacity: 0.55; }
.beat-sim { gap: 14px; }
.beat-dot { font: 90px/1 var(--emoji); }
.beat-bar { display: flex; gap: 8px; }
.beat-bar .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--line); }
.beat-bar .dot.on { background: var(--subject, var(--accent)); }
.beat-drum { width: 170px; height: 170px; border: 0; border-radius: 50%; background: radial-gradient(#fff3e0, #f3d6a8); box-shadow: var(--shadow); font: 96px/1 var(--emoji); touch-action: manipulation; }
.beat-drum:disabled { opacity: 0.45; }
.rhythm-act { display: grid; align-content: center; justify-items: center; gap: 14px; }
.rhythm-slots { display: grid; grid-template-columns: repeat(4, 110px); gap: 10px; }
.rhythm-slot { height: 100px; border: 3px dashed var(--line); border-radius: 18px; background: #fff; }
.rhythm-slot.filled { border-style: solid; border-color: var(--subject, var(--accent)); }
.rhythm-slot > span { display: grid; justify-items: center; gap: 4px; }
.rhythm-look { font: 32px/1 var(--emoji); }
.rhythm-word { font: 600 18px/1 var(--ks-brand-font, var(--ui)); }
.rhythm-pieces { display: flex; gap: 14px; }
.compose-sim { gap: 14px; }
.tune { display: grid; grid-template-columns: repeat(8, 56px); gap: 6px; }
.tune-note { display: grid; place-items: center; height: 56px; border-radius: 14px; background: var(--c, #fff); border: 2px solid var(--line); color: #fff; font: 600 18px/1 var(--ks-brand-font, var(--ui)); text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
.tune-note.lit { transform: scale(1.15); box-shadow: 0 0 0 4px var(--gold); }
.xylophone { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 18px; background: #8a5a2b; }
.xbar { display: grid; place-items: end center; width: 84px; height: calc(var(--h) * 2.2px); padding-bottom: 10px; border: 0; border-radius: 12px; background: var(--c); box-shadow: inset 0 -6px rgb(0 0 0 / 0.15); color: #fff; font: 600 20px/1 var(--ks-brand-font, var(--ui)); text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
@media (max-width: 600px), (max-height: 500px) {
  .rhythm-slots { grid-template-columns: repeat(4, 74px); }
  .rhythm-slot { height: 72px; }
  .tune { grid-template-columns: repeat(8, minmax(0, 36px)); gap: 4px; max-width: 100%; }
  .tune-note { height: 36px; font-size: 13px; border-radius: 10px; }
  .xylophone { gap: 6px; padding: 10px; }
  .xbar { width: 48px; height: calc(var(--h) * 1.3px); font-size: 15px; }
  .beat-drum { width: 120px; height: 120px; font-size: 64px; }
  .beat-dot { font-size: 60px; }
}

/* On a phone the Try step scrolls instead of filling the screen (css/science.css), so
   the boxes that size what's in them from their own height get a height of their own.
   Last in the file, to come after each box's own rule. */
@media (max-width: 600px), (max-height: 500px) {
  .map-box, .child-box, .compass-row { min-height: 240px; }
}
/* A phone held upright: the compass board sits above the arrows and, like Kobi's
   board, takes its size from the screen's width (from the height, it shrank to a
   few pixels on an iPhone SE). */
@media (max-width: 600px) and (orientation: portrait) {
  .compass-row { container-type: normal; min-height: auto; grid-template-rows: auto auto; }
  .compass-row .board-wrap { min-height: auto; }
  .compass-row .grid-board { --cell: min(calc((100vw - 34px) / var(--n)), 64px); }
}