/* 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. */
.scene2-task-close{
  position:absolute;top:10px;right:12px;width:38px;height:38px;padding:0;
  border:2px solid #70421f;border-radius:50%;background:#f1ece2;cursor:pointer;
  display:grid;place-items:center;
}
.scene2-task-close::before{
  content:"";width:16px;height:16px;background:#70421f;
  -webkit-mask:var(--x) center/contain no-repeat;mask:var(--x) center/contain no-repeat;
  --x:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="black" stroke-width="3" stroke-linecap="round" fill="none"/></svg>');
}
.scene2-task-close:hover{background:#e6ded0}

.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){
  /* 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:62%;overflow-y:auto;
    border-width:3px;border-radius:14px;border-top:3px solid #70421f;
    background:#fffdf5f5;
  }
  .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}
  .scene2-final-story,.scene2-story-text{max-height:26vh;font-size:14px}
}

@media (max-width:900px){
  .scene2-task{max-height:70%;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;
  }
  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}