/* scene2-lesson.css — Scene 2 (Cusco).
 *
 * Scene 2 deliberately owns almost no styling. Its activities render on the
 * real scene using the drop's own components — .scene1-inline-task for the
 * panel, .scene1-inline-card for cards, .scene1-practice for the speaking
 * step — so Scene 1 and Scene 2 look like one game. What follows is only what
 * the drop has no equivalent for.
 */

/* ---- the task panel --------------------------------------------------------
   It sits directly under the scene inside .scene-stage-wrap, NOT inside
   #canvas: the canvas clips to a fixed 1672x941 box, so a panel placed in it
   loses everything past its bottom edge - that was the cut-off text and the
   missing buttons. Out here it can be exactly as tall as its content. */
.scene2-task{
  position:relative;z-index:10000;width:100%;
  box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:-14px auto 0;padding:14px 20px 16px;   /* the negative margin keeps it docked to the scene */
  overflow:visible;                              /* never clip the lesson's own controls */
  border:4px solid #70421f;border-radius:0 0 16px 16px;border-top:0;background:#fffdf5;
  box-shadow:0 10px 22px rgba(20,30,70,.18);
}
/* Only the title has to keep clear of the close button, so only the title
   pays for it - the old 56px of panel padding cost every activity 112px of
   working width and squeezed the cards and the mic into slivers. */
.scene2-task-title{
  flex:0 0 auto;font-size:23px;font-weight:900;color:#70421f;text-align:center;line-height:1.2;
  padding:0 44px;
}
.scene2-task-body{
  display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-height:0;
}
.scene2-task-text{font-size:20px;font-weight:800;color:#24356f;text-align:center;line-height:1.35}
.scene2-task-status{min-height:20px;font-size:15px;font-weight:700;color:#52668e;text-align:center}
.scene2-task-status.is-retry{color:#b32626}
.scene2-task-status.is-correct{color:#23743b}
.scene2-task-status:empty{display:none}

/* The close button: a circle with the × optically centred. Drawn as a mask so
   the glyph's own uneven metrics can't push it off-centre. */
/* The close button is shared furniture. It used to be rebuilt here - 38px
   instead of scene 1's 40px, with its own hand-drawn X mask at 16px instead of
   the icon registry's 22px - so the two scenes had close buttons that were
   almost, but not quite, the same. Changing one never changed the other.

   It is now stamped data-tt-role="close-button" by the bank in teemo-mobile.js
   and styled there, once, for every scene. Only position is scene 2's business. */
.scene2-task-close{position:absolute;top:10px;right:12px}

.scene2-task-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.scene2-task-actions button{border:2px solid #416fae;border-radius:9px;background:#fff;color:#24356f;
  padding:8px 14px;font-size:15px;font-weight:800;cursor:pointer}
.scene2-task-actions button:hover:not(:disabled){background:#e4f0ff}
.scene2-task-actions button:disabled{opacity:.5;cursor:default}
.scene2-task-actions .scene1-finish{border-color:#70421f;background:#ffd34f}

/* The story scrolls inside the panel rather than stretching it. */
.scene2-story-text{max-height:30vh;overflow-y:auto;text-align:center;line-height:1.45}
.scene2-story-text .scene1-feedback-word.is-active{background:#ffd34f;border-radius:4px}
.scene2-final-story{max-height:26vh;overflow-y:auto;text-align:center;font-size:18px;line-height:1.5;
  color:#24356f;font-weight:700}
.scene2-final-story .scene1-feedback-word.is-active{background:#ffd34f;border-radius:4px}

/* Keep the speaking block from stretching edge to edge inside the panel. */
.scene2-task .scene1-practice{width:min(760px,100%);margin:0 auto}

/* ---- Activity 2: cards are .scene1-inline-card; only the icon and the ✕ are new --- */
 /* A fixed six-column grid, not a wrapping flex row: twelve cards then make
    two even rows whichever width the panel happens to be, instead of the
    ragged 7+5 the flex row produced and re-ragged on every resize. */
.scene2-vocab-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%}
.scene2-vocab-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;width:auto;min-height:76px;padding:6px 4px;border:3px solid #8ea8d7;border-radius:10px;
  background:#fff;color:#24356f;font-size:14px;font-weight:800;line-height:1.15;cursor:pointer}
.scene2-vocab-card:hover:not(:disabled){background:#e4f0ff}
.scene2-vocab-card.is-selected{border-color:#1877d2;background:#e4f0ff;box-shadow:0 0 0 3px #bcd9f7}
.scene2-vocab-card.is-done{border-color:#2f9d57;background:#dff4e4;color:#23743b;cursor:default}
.scene2-vocab-card>span{min-width:0;max-width:100%;overflow-wrap:anywhere}
.scene2-vocab-icon{width:38px;height:32px;color:#70421f}
.scene2-vocab-card.is-done .scene2-vocab-icon{color:#23743b}
.scene2-vocab-tick{position:absolute;top:2px;right:5px;color:#2f9d57;font-size:19px;font-weight:900;pointer-events:none}
.scene2-counter strong{color:#70421f}

/* ---- Activity 3: hotspots sit on the real scene --- */
/* cursor:default on purpose - a pointer cursor announced where the answer was
   as soon as the mouse crossed it, which is the same giveaway as a hover glow. */
.scene2-hit{position:absolute;z-index:9000;border:0;background:transparent;padding:0;cursor:default;border-radius:8px}
/* No hover highlight: it turned the activity into "sweep the mouse until a box
   lights up" instead of looking at the picture. Only a real click gives feedback. */
.scene2-hit.is-found{background:rgba(47,157,87,.30);box-shadow:inset 0 0 0 3px #2f9d57}

/* ---- Activities 4, 5, 9: pieces dragged onto the real scene --- */
.scene2-stage{position:absolute;inset:0;z-index:9000;pointer-events:none}
.scene2-piece{position:absolute;pointer-events:auto;cursor:grab;user-select:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.scene2-piece.is-dragging{cursor:grabbing;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.scene2-tray{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.scene2-tray-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 9px;
  border:2px solid #416fae;border-radius:10px;background:#fff;color:#24356f;font-size:12px;font-weight:800;cursor:pointer}
.scene2-tray-item img{width:42px;height:42px;object-fit:contain}
.scene2-tray-item.is-missing{border-color:#c4463a;background:#fdecea;color:#a5342a}
.scene2-tools{display:flex;justify-content:center}
.scene2-flip{border:2px solid #70421f;border-radius:9px;background:#ffd34f;color:#24356f;
  padding:7px 14px;font-size:14px;font-weight:800;cursor:pointer}
.scene2-missing-note{margin:2px 0 0;color:#a5342a;font-size:12px;font-weight:700}
.scene1-inline-status.is-retry{color:#b32626}
.scene1-inline-status.is-correct{color:#23743b}

/* ---- Activities 6 and 11: word tiles --- */
.scene2-tiles{width:min(760px,96%)}
.scene2-tile-line{min-height:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  padding:6px;border:2px dashed #9bb7df;border-radius:10px;background:#f1f7ff}
.scene2-tiles.is-correct .scene2-tile-line{border-style:solid;border-color:#2f9d57;background:#e8f8ec}
.scene2-tile-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:7px}
.scene2-tile{border:2px solid #416fae;border-radius:9px;background:#fff;color:#24356f;
  padding:6px 12px;font-size:15px;font-weight:800;cursor:pointer}
.scene2-tile:disabled{opacity:.4;cursor:default}
.scene2-tile.is-placed{border-color:#70421f;background:#ffd34f}
.scene2-listen{margin-top:6px}

/* ---- Activity 7: sorting --- */
.scene2-word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:34px}
.scene2-word{border:2px solid #416fae;border-radius:9px;background:#fff;color:#24356f;
  padding:5px 11px;font-size:14px;font-weight:800;cursor:pointer}
.scene2-word.is-selected{border-color:#1877d2;background:#e4f0ff;box-shadow:0 0 0 3px #bcd9f7}
.scene2-word.is-done{border-color:#2f9d57;background:#e8f8ec;color:#23743b;cursor:default}
.scene2-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(860px,98%)}
.scene2-group{border:2px solid #9bb7df;border-radius:10px;background:#f1f7ff;padding:6px;cursor:pointer}
.scene2-group:hover{background:#e4f0ff}
.scene2-group h4{margin:0 0 5px;color:#24356f;font-size:13px}
.scene2-group-drop{display:flex;flex-direction:column;gap:4px;min-height:48px}

/* ---- Activity 8: the compared pictures float over the scene --- */
.scene2-compare{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);z-index:9000;
  max-width:34%;max-height:44%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.scene2-compare-row{display:flex;justify-content:center;align-items:flex-end;gap:24px}
.scene2-compare-pick{border:2px solid #416fae;border-radius:12px;background:#fff;padding:7px;cursor:pointer}
.scene2-compare-pick.is-big img{width:104px;height:104px;object-fit:contain}
.scene2-compare-pick.is-small img{width:56px;height:56px;object-fit:contain}
.scene2-compare-pick.is-right{border-color:#2f9d57;background:#e8f8ec}
.scene2-compare-pick.is-wrong{border-color:#c4463a;background:#fdecea}

/* ---- activity picker --- */
.scene2-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:min(860px,98%)}
.scene2-picker button{border:2px solid #416fae;border-radius:9px;background:#fff;color:#24356f;
  padding:7px 11px;font-size:14px;font-weight:800;cursor:pointer}
.scene2-picker button:hover{background:#e4f0ff}
.scene2-picker button b{color:#70421f}

/* Shown while ?act= / ?scene= walks the game's opening animations. */
.scene2-jump-notice{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:2147483000;
  background:#24356f;color:#fff;border-radius:999px;padding:9px 18px;
  font:800 14px/1 system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* ---- phones and short windows ------------------------------------------
   The mobile layer lays the stage out its own way, so the panel is floated
   over the bottom of the scene rather than trying to sit under it - and it
   scrolls inside itself, because there is no room below to grow into. */
@media (max-width:1000px), (max-height:600px){
  /* ---- lesson mode: the builder's own controls step aside ------------------
     A landscape phone is HEIGHT-limited: the picture is already as tall as the
     window allows, so the category rail and the item tray do not cost the
     picture its size - they cost the room beside it, which is exactly where
     the activity card wants to be (.scene2-task.is-side below). During an
     activity neither is usable anyway, so both go.

     The mobile layer (mobile/teemo-mobile.css) is injected after this file and
     every one of its rules carries id-level specificity (`:not(#tt)`), so
     these have to carry it too or they lose. */
  html body.scene2-lesson-mode:not(#tt) .panel.left,
  html body.scene2-lesson-mode:not(#tt) .workspace>.assets{display:none!important}
  html body.scene2-lesson-mode:not(#tt) .app>.body,
  html body.scene2-lesson-mode:not(#tt) .workspace{grid-template-columns:minmax(0,1fr)!important}
  /* With the card beside the picture the picture stops sitting in the middle
     of the workspace and hands the whole gutter to the card. The drop centres
     it with `justify-content:center!important` on a full-width flex wrapper
     (scene-stage-ratio script), so only a more specific !important moves it. */
  html body.scene2-side-panel:not(#tt) .scene-stage-wrap{justify-content:flex-start!important}

  /* fit-content so the wrapper hugs the scene: the panel is anchored to the
     wrapper, and a wider wrapper made it overhang the picture on both sides. */
  .scene-stage-wrap{position:relative!important;width:fit-content!important;margin-inline:auto!important}
  .scene2-task{
    position:absolute!important;left:6px;right:6px;bottom:6px;width:auto;
    margin:0;padding:8px 12px 10px;max-height:78%;
    /* The PANEL never scrolls - its body does. Scrolling the whole panel put
       the title, the x and the buttons on the far side of a scroll a child
       never made: that is what left "Pause Story" sliced in half and the
       "Next" button out of sight entirely. */
    display:flex;flex-direction:column;overflow:hidden;
    border-width:3px;border-radius:14px;border-top:3px solid #70421f;
    background:#fffdf5f5;
  }
  .scene2-task-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  /* The buttons ride along the bottom of the scrolling body, so however long
     the story is they are always on screen and always in the same place. */
  .scene2-task-actions{position:sticky;bottom:0;z-index:2;width:100%;
    margin-top:auto;padding:6px 0 2px;background:#fffdf5}
  /* Once the answer is right the options are spent, and on a phone they pushed
     the microphone - the actual step - below the fold. Scene 1 drops them at
     the same moment (mobile/teemo-mobile.css). */
  .scene2-task-body:has(.scene1-practice) .scene1-options{display:none}
  /* In the side column the answered question has to go as well, or the "Listen,
     then say the sentence" line lands under the bottom edge. The panel title
     still says which question this is, and the sentence to say is right there
     in the speaking card. */
  .scene2-task.is-side .scene2-task-body:has(.scene1-practice):has(.scene1-options)>.scene2-task-text{display:none}
  /* A line of story cut in half by the button row reads as a glitch; fade it
     out instead. */
  .scene2-task-actions::before{content:"";position:absolute;left:0;right:0;bottom:100%;
    height:14px;pointer-events:none;
    background:linear-gradient(to top,#fffdf5,rgba(255,253,245,0))}
  .scene2-task-title{font-size:15px;padding:0 34px}
  .scene2-task-text{font-size:15px}
  .scene2-task-status{font-size:12px;min-height:0}
  .scene2-task-close{width:30px;height:30px;top:6px;right:8px}
  .scene2-task-close::before{width:13px;height:13px}
  .scene2-task-actions{gap:6px}
  .scene2-task-actions button,
  .scene2-task .scene1-answer,
  .scene2-task .scene2-tile,
  .scene2-task .scene2-word{min-height:32px;padding:6px 10px;font-size:13px}
  /* auto-fit rather than a fixed four: a landscape phone's panel is ~700px
     wide, and four columns made each card 180px across and the grid three
     rows deep for no reason. */
  .scene2-vocab-grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}
  .scene2-vocab-card{width:auto;min-height:54px;font-size:11px;gap:2px;padding:4px 2px}
  .scene2-vocab-icon{width:24px;height:20px}
  .scene2-groups{grid-template-columns:repeat(3,1fr);gap:5px}
  .scene2-group h4{font-size:11px}
  /* The body is the scroll box now, so the story no longer needs a cap of its
     own - a 26vh cap on a landscape phone was four lines with the rest of the
     panel left empty. */
  .scene2-final-story,.scene2-story-text{max-height:none;overflow:visible;font-size:15px}

  /* ---- the card beside the picture ---------------------------------------
     Placed by alignPanel() in scene2-lesson.js whenever the room beside the
     picture adds up to a readable column (260px). The plaza is then never
     covered - hotspots stay clickable, pieces can be dropped anywhere on it -
     and the card gets the picture's whole height instead of a slice of it.
     Below 260px there is no column worth having and the panel goes back under
     the picture; the rules above still apply to it there. */
  /* No `inset:auto!important` here: alignPanel writes left/top/width/height as
     inline styles, and an !important shorthand in a stylesheet outranks them -
     which parked the card back on top of the picture. */
  .scene2-task.is-side{
    position:fixed!important;max-height:none;
    padding:10px 14px 12px;border-width:3px;border-radius:16px;
    background:#fffdf5fa;box-shadow:0 10px 26px rgba(20,30,70,.3);
  }
  .scene2-task.is-side .scene2-task-title{font-size:15px;padding:0 30px;line-height:1.15}
  /* Counter and its Reset on one line: stacked they cost the column 40px that
     the cards under them need. */
  .scene2-task.is-side .scene2-counter{display:flex;align-items:center;justify-content:center;
    flex-wrap:nowrap;gap:8px;font-size:14px}
  .scene2-task.is-side .scene2-reset{flex:0 0 auto;white-space:nowrap}
  .scene2-task.is-side .scene2-task-text{font-size:15px;line-height:1.42}
  /* Smaller buttons in the column so two of them still share a row: stacked
     full-width they ate half the card's height, which is the story's. */
  .scene2-task.is-side .scene2-task-actions button{padding:6px 10px;font-size:13px}
  /* The speaking block is Scene 1's, and scene1-lesson-overrides.css lays it
     out for a card two-thirds of the window wide: two columns, the right one
     230px at its narrowest and only hidden by `visibility`. In a 300px column
     that is a second column that cannot fit. One column here, and the "What I
     heard" panel goes under the microphone instead of beside it. */
  .scene2-task.is-side .scene1-practice{--tt-mic-size:44px;padding:6px 8px!important;max-height:none!important;margin-top:4px!important}
  .scene2-task.is-side .scene1-practice-grid{grid-template-columns:minmax(0,1fr)!important}
  .scene2-task.is-side .scene1-practice-grid .scene1-speech-review{
    min-height:0!important;max-height:none!important;padding:6px 0 0!important;
    border-left:0!important;border-top:1px dashed #9bb7df!important;text-align:center!important}
  .scene2-task.is-side .scene1-practice-grid .scene1-speech-review[hidden]{display:none!important}
  /* Word chips and tiles come down a size in the column so a bank of twelve
     words does not fill the card on its own (Activities 6, 7 and 11). */
  .scene2-task.is-side .scene2-word,
  .scene2-task.is-side .scene2-tile{padding:5px 9px;font-size:12px}
  .scene2-task.is-side .scene2-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .scene2-task.is-side .scene2-group-drop{min-height:34px}
  .scene2-task.is-side .scene2-tiles,
  .scene2-task.is-side .scene2-groups{width:100%}
  /* Twelve vocabulary cards in a 300px column: three across, and small enough
     that a child sees most of them without scrolling. */
  .scene2-task.is-side .scene2-vocab-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .scene2-task.is-side .scene2-vocab-card{min-height:46px;padding:3px 2px;font-size:11px}
  .scene2-task.is-side .scene2-vocab-icon{width:20px;height:17px}
  .scene2-task.is-side .scene1-practice-prompt{font-size:13px}
  .scene2-task.is-side .scene1-target-sentence{font-size:18px}
  .scene2-task.is-side .scene1-hear{padding:6px 10px!important;font-size:13px!important}
  /* Three buttons across do not fit a 300px column - the mobile layer's row
     (mobile/teemo-mobile.css) then hangs "Hear sentence" and "Next" over both
     edges of the card. The microphone keeps the middle of its own row and the
     other two share the row beneath it. */
  html body:not(#tt) .scene2-task.is-side .scene1-practice-actions{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    justify-items:center!important;align-items:center!important;
    column-gap:8px!important;row-gap:4px!important;margin-top:4px!important}
  html body:not(#tt) .scene2-task.is-side .scene1-practice-actions>.scene1-say{grid-column:1/-1!important;grid-row:1!important;justify-self:center!important}
  html body:not(#tt) .scene2-task.is-side .scene1-practice-actions>.scene1-hear{grid-column:1!important;grid-row:2!important;justify-self:end!important}
  html body:not(#tt) .scene2-task.is-side .scene1-practice-actions>.scene1-next-question{grid-column:2!important;grid-row:2!important;justify-self:start!important}
  .scene2-task.is-side .scene1-practice-status{font-size:13px;margin-top:4px}
}

@media (max-width:900px){
  /* A small phone on its side has ~240px of picture: at 70% the story was down
     to a single line once the buttons had taken their two rows. */
  .scene2-task{max-height:78%;padding:10px 16px 12px}
  .scene2-task-title{font-size:18px;padding:0 40px}
  .scene2-task-text{font-size:17px}
  .scene2-vocab-grid{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
  .scene2-vocab-card{width:auto;min-height:64px;font-size:12px}
  .scene2-vocab-icon{width:28px;height:24px}
  .scene2-groups{grid-template-columns:repeat(2,1fr)}
}

/* Activity 2's speaking block is the shared one, just narrower in the panel. */
.scene2-vocab-practice{width:min(720px,100%)}
.scene2-vocab-word{font-size:22px}

/* ---- lesson mode: give the scene the room --------------------------------
   DESKTOP ONLY. Below 1001x601 the mobile layer (mobile/teemo-mobile.css) runs
   its own fixed layout - task bar in the header, controls repositioned with CSS
   variables. Overriding the page there fought it and left the scene squeezed
   into a corner with half the screen blank, so on phones the panel simply
   docks under the scene and the mobile layer keeps control. */
@media (min-width:1001px) and (min-height:601px){
  body.scene2-lesson-mode #sceneItemBrowser{
    width:0!important;min-width:0!important;padding:0!important;margin:0!important;
    border:0!important;opacity:0;overflow:hidden!important;pointer-events:none;
  }
  body.scene2-lesson-mode .panel.assets{
    max-height:0!important;min-height:0!important;padding:0!important;margin:0!important;
    border:0!important;opacity:0;overflow:hidden!important;pointer-events:none;
  }
  /* The category rail and the Selected Item panel are builder controls too:
     during a lesson they are two 246px columns of dead weight on either side
     of the picture the lesson is about. Folding them away is what lets
     growScene() hand those pixels to the plaza. */
  body.scene2-lesson-mode .panel.left,
  body.scene2-lesson-mode .panel.right{
    width:0!important;min-width:0!important;padding:0!important;margin:0!important;
    border:0!important;opacity:0;overflow:hidden!important;pointer-events:none;
  }
  body.scene2-lesson-mode main.body{grid-template-columns:minmax(0,1fr)!important}

  body.scene2-lesson-mode .panel.left,
  body.scene2-lesson-mode .panel.right,
  body.scene2-lesson-mode #sceneItemBrowser,
  body.scene2-lesson-mode .panel.assets{transition:all .22s ease}

  /* The canvas is resized from JS (growScene in scene2-lesson.js): the game
     writes width/height inline with !important, which no stylesheet can beat. */
  body.scene2-lesson-mode .scene-stage-wrap{
    max-width:none!important;display:block!important;overflow:visible!important;
    /* The wrapper is a grid item, and a grid item's automatic minimum size is
       its content - so the height growScene pins it to (the picture's own
       height, keeping the panel out of the drop's canvas arithmetic) was
       being ignored in favour of picture + panel. */
    min-height:0!important;
  }
  /* No white void under a shortened page: the app keeps the full window height. */
  body.scene2-lesson-mode main.body{min-height:100vh!important}
  /* If an activity is genuinely taller than the window, the page scrolls to it
     rather than hiding the buttons below the fold. */
  body.scene2-lesson-mode{overflow-y:auto!important}
  body.scene2-lesson-mode .workspace{overflow:visible!important}
  body.scene2-lesson-mode .workspace{grid-template-columns:1fr!important;align-content:start!important}
  body.scene2-lesson-mode #canvas{margin:0 auto!important}

}

/* ---- the piece being dragged out of the panel ---- */
.scene2-tray-ghost{
  position:fixed;z-index:2147483001;transform:translate(-50%,-50%);pointer-events:none;
  opacity:.9;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));margin:0
}

/* ---- polish: one button shape, one type scale, nothing off-centre --------- */
.scene2-task *{box-sizing:border-box}
.scene2-task button{font-family:inherit;line-height:1.15}
/* every in-panel button is the same height and weight, whichever activity it is */
.scene2-task-actions button,
.scene2-task .scene1-answer,
.scene2-task .scene2-tile,
.scene2-task .scene2-word,
.scene2-task .scene1-finish,
.scene2-task .scene2-flip{min-height:38px;padding:8px 14px;font-size:15px;font-weight:800;border-radius:9px}
.scene2-task .scene1-options{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.scene2-task .scene1-answer{margin:0}
/* the practice block centres in the panel instead of hugging the left edge */
.scene2-task .scene1-practice{margin-left:auto;margin-right:auto}
.scene2-task .scene1-practice-grid{justify-content:center}
.scene2-task .scene1-practice-main{align-items:center;text-align:center}
.scene2-task .scene1-practice-actions{justify-content:center}
/* nothing may spill out of the panel */
.scene2-task>*{max-width:100%}
.scene2-task img{max-width:100%}

/* A card being graded cannot be swapped out from under the answer. */
.scene2-vocab-card.is-waiting{opacity:.55;cursor:default}

/* ---- the speaking block inside the panel ---------------------------------
   Scene 1 caps .scene1-practice at 190px because its lesson card is a fixed
   box. Scene 2's panel grows to fit instead, so that cap did nothing but cut
   the status line loose - "Listen, then say the sentence." rendered outside
   the blue box and straight through the panel's bottom border. */
.scene2-task .scene1-practice{
  max-height:none!important;overflow:visible!important;
  box-sizing:border-box!important;
  width:min(620px,100%)!important;max-width:100%!important;
  margin:8px auto 0!important;padding:12px 16px!important;
}
/* One centred column. The two-column grid reserved 230px on the right for the
   "What I heard" pane even while it was hidden, which pushed the prompt, the
   microphone and the buttons off to the left of the box they sit in. */
.scene2-task .scene1-practice-grid{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;gap:6px!important;
}
.scene2-task .scene1-practice-main{
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;text-align:center!important;
}
.scene2-task .scene1-practice-grid .scene1-speech-review{
  min-height:0!important;max-height:none!important;
  margin:2px 0 0!important;padding:7px 0 0!important;
  border-left:0!important;border-top:1px dashed #9bb7df!important;
  text-align:center!important;
}
/* Hidden means gone: kept as an invisible block it left a dashed rule and a
   blank strip under every activity that had not been spoken to yet. */
.scene2-task .scene1-practice-grid .scene1-speech-review[hidden]{display:none!important}
/* 20px/900 is Scene 1's countdown size; in the panel it dwarfed the sentence
   it was commenting on and forced the box taller than its own cap. */
.scene2-task .scene1-practice-status{
  min-height:20px!important;margin-top:8px!important;
  font-size:15px!important;font-weight:800!important;
  line-height:1.3!important;white-space:normal!important;
}
.scene2-task .scene1-practice-prompt{font-size:17px!important;line-height:1.35!important}

/* Reset sits with the counter it resets, as a quiet secondary pill. */
.scene2-counter{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px}
.scene2-task .scene2-reset{
  min-height:30px;padding:5px 12px;border:0;border-radius:999px;
  background:#f0f2f7;color:#4a5878;box-shadow:0 2px 0 #dde2ec;
  font:800 13px/1.1 inherit;cursor:pointer
}
.scene2-task .scene2-reset:hover{background:#e6eaf2}

/* ---- the panel is part of the picture ------------------------------------
   Its width and its height cap are written from JS (fitPanel in
   scene2-lesson.js): the panel is exactly as wide as #canvas so it reads as a
   drawer pulled out of the scene, and when an activity is taller than the
   space below the picture the BODY scrolls - the title and the close button
   stay put. What follows is that arrangement's side of the bargain. */

/* Nothing in the panel may be squeezed to nothing. The small-screen rules set
   min-height:0 on the status line, which for a flex item replaces the
   automatic content minimum - so as soon as the panel ran out of room the hint
   collapsed to zero height and its text printed straight through the cards
   underneath it. Overflow scrolls; it never crushes. */
.scene2-task-body>*{flex:0 0 auto}

@media (min-width:1001px) and (min-height:601px){
  /* The shadows are painted with background-attachment:local/scroll, so they
     appear only on the edge that actually has more content behind it - a
     scrolling activity reads as scrollable instead of as chopped off.
     Desktop only: on phones the panel itself is the scroller (the mobile
     layer floats it over the scene), and two nested scrollers is one too many. */
  .scene2-task-body{
    overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
    background:
      linear-gradient(#fffdf5 40%,rgba(255,253,245,0)) top/100% 16px no-repeat local,
      linear-gradient(rgba(255,253,245,0),#fffdf5 60%) bottom/100% 20px no-repeat local,
      radial-gradient(farthest-side at 50% 0,rgba(112,66,31,.20),transparent) top/100% 7px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%,rgba(112,66,31,.20),transparent) bottom/100% 7px no-repeat scroll;
  }
}

/* ---- Activity 2: cards beside the microphone, not above it ---------------
   Stacked, the twelve cards plus the speaking block wanted about 460px of
   panel - more than the panel may take without shrinking the plaza - so the
   microphone sat below the fold. The panel is wide and short, so the two
   halves go side by side and both stay on screen. */
/* Only when the panel is actually wide enough for two columns - the class is
   set by fitPanel from the measured width, because the panel is as wide as the
   picture and that is a question about the window's height, not its width. */
.scene2-task.is-wide .scene2-task-body.is-vocab{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,260px);
  grid-template-areas:"count count" "hint hint" "cards say";
  align-items:start;gap:6px 16px;width:100%;
}
.scene2-task.is-wide .scene2-task-body.is-vocab>.scene2-counter{grid-area:count}
.scene2-task.is-wide .scene2-task-body.is-vocab>.scene2-task-status{grid-area:hint}
/* auto-fit, not a fixed four: a wide panel then fits the twelve cards into
   two rows instead of three and leaves the microphone room to breathe. */
.scene2-task.is-wide .scene2-task-body.is-vocab>.scene2-vocab-grid{
  grid-area:cards;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));align-content:start;
}
.scene2-task.is-wide .scene2-task-body.is-vocab>.scene2-vocab-practice{
  grid-area:say;margin:0!important;width:100%!important;padding:10px 12px!important;
  --tt-mic-size:58px;              /* the mobile layer's big mic, one size down */
}
/* 2px of side padding, not 4: 'Restaurant' is the longest label and it lands
   within a couple of pixels of the card's inner width. */
.scene2-task.is-wide .scene2-task-body.is-vocab .scene2-vocab-card{min-height:68px;padding:6px 2px;font-size:12px}
/* Narrow panel (a short window: the panel is as wide as the picture, and a
   short window makes for a small picture). Three roomy columns rather than
   four squeezed ones, which broke every label into single letters - and the
   CARDS take the scrolling, not the whole panel, so the microphone stays on
   screen instead of sitting 300px below the fold.
   Desktop only: below 1001x601 the mobile layer owns this panel, and these
   rules outrank its own grid because they are more specific. */
@media (min-width:1001px) and (min-height:601px){
  .scene2-task:not(.is-wide) .scene2-task-body.is-vocab{overflow:hidden}
  .scene2-task:not(.is-wide) .scene2-task-body.is-vocab>.scene2-vocab-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    flex:1 1 auto;min-height:84px;align-content:start;
    overflow-y:auto;scrollbar-width:thin;
  }
  .scene2-task:not(.is-wide) .scene2-task-body.is-vocab>.scene2-vocab-practice{flex:0 0 auto}
}

/* The mobile layer pins the speaking row to one unwrappable line, which is
   right for a full-width block and wrong for a 300px column - it pushed Reset
   out through the side of the box. Inside Scene 2's panel it may wrap.
   (Matching html body:not(#tt) so this outranks the mobile rule.) */
html body:not(#tt) .scene2-task .scene1-practice-actions{
  flex-wrap:wrap!important;gap:10px 12px!important;
}

/* Wider than the picture above it (a short window keeps the scene small), so
   it stops being a drawer pulled out of the scene and becomes its own card -
   the drawer's missing top border and square top corners only look right when
   the two edges actually line up. */
.scene2-task.is-detached{
  margin-top:10px;
  border-top:4px solid #70421f;
  border-radius:16px;
}

/* The speaking column of Activity 2 is a 260px sidebar, not a full-width
   block: at the mobile layer's default sizes "Hear word" and the microphone
   were 6px too wide to share a line, and the wrap cost 55px of height the
   panel did not have. Specificity matches html body:not(#tt) so these win. */
html body:not(#tt) .scene2-task-body.is-vocab .scene1-practice-actions{gap:8px!important}
html body:not(#tt) .scene2-task-body.is-vocab .scene1-say{min-width:88px!important}
html body:not(#tt) .scene2-task-body.is-vocab .scene1-hear{padding:7px 11px!important;font-size:13px!important}
html body:not(#tt) .scene2-task-body.is-vocab .scene1-practice-prompt{font-size:16px!important;line-height:1.25!important}
/* Last few pixels of the short-window case, so the hint under the microphone
   is not half cut off by the panel's own floor. */
.scene2-task-body.is-vocab>.scene2-counter{font-size:17px}
html body:not(#tt) .scene2-task-body.is-vocab .scene1-practice-status{
  min-height:18px!important;margin-top:6px!important;font-size:14px!important;
}
.scene2-task.is-wide .scene2-task-body.is-vocab>.scene2-vocab-practice{padding:8px 12px!important}