/* Teemo Travels — story scenes before a lesson (mobile/teemo-story.js).
   The card and the ball are the lesson's own (teemo-mobile.css styles them by
   role); this file adds only what a story scene has and a lesson doesn't: the
   picture behind it, the logo that pops, the door handle and the light switch.
   Sizes are shares of the scene (--su = 1% of its height), like the lesson's. */

/* The picture: the whole screen where the lesson's room fills it (phones, touch
   tablets), else the scene's frame. Under the logo (z 40) and the card. */
html>.tt-story-stage{position:fixed;z-index:30;overflow:hidden;background:#0d1a2e;pointer-events:auto;transition:opacity .6s ease}
html>.tt-story-stage.is-full{inset:0}
html>.tt-story-stage.is-leaving{opacity:0;pointer-events:none}
html>.tt-story-stage>.tt-story-pic{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none}
html>.tt-story-stage>.tt-story-pic-over{opacity:0;transition-property:opacity;transition-timing-function:ease}
html>.tt-story-stage>.tt-story-pic-over.is-in{opacity:1}

/* The story card: the lesson card, sized to its line instead of the lesson's
   tall card, on the side the picture's subject is not on. */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story{--su:calc(var(--scene-h,600px) / 100)}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story>[data-tt-role="lesson-card"].tt-story-card:not(.is-start){top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:min(39%,540px)!important;min-height:0!important;max-height:80%!important;padding:clamp(10px,calc(var(--su) * 3),22px) clamp(14px,calc(var(--su) * 4),28px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story[data-side="left"]>[data-tt-role="lesson-card"].tt-story-card{left:2%!important;right:auto!important}
/* s.ask: Lesson 1's question card, on whichever side leaves the picture's subject in view */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story[data-side="left"]>[data-tt-role="lesson-card"].is-question{left:2%!important;right:auto!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story>[data-tt-role="lesson-card"].is-question.tt-narrow{width:min(39%,540px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story>[data-tt-role="lesson-card"].is-question.tt-slim{width:min(31%,430px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story>[data-tt-role="lesson-card"].tt-story-card:not(.is-start)>h2{display:none!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story>[data-tt-role="lesson-card"].tt-story-card[hidden]{display:none!important}
html body:not(#tt) [data-tt-role="lesson-modal"].tt-story .tt-story-card .scene1-story-text{text-align:center}
html body:not(#tt) [data-tt-role="lesson-modal"].tt-story>.tt-story-card.tt-story-in{animation:tt-story-card-in .3s ease-out both}
html body:not(#tt) [data-tt-role="lesson-modal"].tt-story>.tt-story-card.tt-story-out{animation:tt-story-card-out .3s ease-in both}
@keyframes tt-story-card-in{from{opacity:0;margin-top:10px}to{opacity:1;margin-top:0}}
@keyframes tt-story-card-out{from{opacity:1}to{opacity:0}}

/* A picture that pops in the middle of the scene and out again (the logo) */
.tt-story>.tt-story-pop{position:absolute;left:50%;top:50%;width:min(62%,calc(var(--su) * 100));height:auto;max-width:none;pointer-events:none;transform:translate(-50%,-50%) scale(.001);filter:drop-shadow(0 8px 20px rgba(0,0,0,.18));animation:tt-story-pop 7.6s ease-in-out both}
@keyframes tt-story-pop{
  0%{transform:translate(-50%,-50%) scale(.02);animation-timing-function:cubic-bezier(.25,.72,.35,1)}
  21%{transform:translate(-50%,-50%) scale(1.12)}
  35%{transform:translate(-50%,-50%) scale(1)}
  81%{transform:translate(-50%,-50%) scale(1)}
  86%{transform:translate(-50%,-50%) scale(1.12)}
  100%{transform:translate(-50%,-50%) scale(.001)}
}

/* The door handle: a close-up beside the door, in the lesson card's colours.
   Drag the handle down; the grip turns with it. */
.tt-story>.tt-story-door{position:absolute;right:5%;top:50%;height:74%;aspect-ratio:5/6;box-sizing:border-box;padding:calc(var(--su) * 1.6);border-radius:16px;background:rgba(255,253,247,.96);box-shadow:0 10px 30px rgba(10,20,50,.28);transform:translateY(-50%);pointer-events:auto;overflow:hidden}
.tt-story>.tt-story-door.is-in{animation:tt-story-panel-in .32s ease-out both}
.tt-story>.tt-story-door.is-closing{animation:tt-story-panel-out .4s cubic-bezier(.55,.05,.85,.35) forwards;pointer-events:none}
.tt-story-door-window{position:absolute;inset:calc(var(--su) * 1.6);overflow:hidden;border-radius:10px;background:#f4f1e9}
.tt-story-door-window>img{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.tt-story-door-plate{left:23%;top:0;width:80%;height:100%;object-fit:fill;z-index:1}
.tt-story-door-handle{left:0;top:-8%;width:75%;height:100%;object-fit:fill;z-index:2;transform-origin:84% 50%}
.tt-story-door-grip{position:absolute;z-index:3;left:0;top:35%;width:60%;height:15%;min-height:44px;transform-origin:105% 47%;touch-action:none;user-select:none;cursor:grab;border-radius:12px}
.tt-story-door-grip:active{cursor:grabbing}
.tt-story-door-grip:focus-visible{outline:3px solid #2166e8;outline-offset:2px}

/* The light switch: a close-up beside the bed; tap it. It arrives and pulses
   three times, like the lesson's other "this one" moments. */
.tt-story>.tt-story-switch{all:unset;position:absolute;right:6%;top:50%;height:56%;box-sizing:border-box;padding:calc(var(--su) * 1.6);border-radius:16px;background:rgba(255,253,247,.96);box-shadow:0 10px 30px rgba(10,20,50,.28);transform:translateY(-50%);pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;animation:tt-story-switch-in 2.7s ease-in-out both}
.tt-story>.tt-story-switch>img{display:block;height:100%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.tt-story>.tt-story-switch:active{transform:translateY(-50%) scale(.97)}
.tt-story>.tt-story-switch:focus-visible{outline:3px solid #2166e8;outline-offset:3px}
.tt-story>.tt-story-switch.is-closing{animation:tt-story-panel-out .4s ease-in forwards;pointer-events:none}
@keyframes tt-story-switch-in{
  0%{transform:translateY(-50%) scale(.03);opacity:0;animation-timing-function:cubic-bezier(.3,.35,.55,.65)}
  20%{transform:translateY(-50%) scale(1);opacity:1}
  33%{transform:translateY(-50%) scale(1.04);box-shadow:0 10px 30px rgba(10,20,50,.28),0 0 0 6px rgba(255,208,74,.45)}
  47%{transform:translateY(-50%) scale(1)}
  60%{transform:translateY(-50%) scale(1.04);box-shadow:0 10px 30px rgba(10,20,50,.28),0 0 0 6px rgba(255,208,74,.45)}
  73%{transform:translateY(-50%) scale(1)}
  87%{transform:translateY(-50%) scale(1.04);box-shadow:0 10px 30px rgba(10,20,50,.28),0 0 0 6px rgba(255,208,74,.45)}
  100%{transform:translateY(-50%) scale(1);opacity:1}
}
@keyframes tt-story-panel-in{from{opacity:0;transform:translateY(-50%) scale(.92)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes tt-story-panel-out{from{opacity:1;transform:translateY(-50%) scale(1)}to{opacity:0;transform:translateY(-50%) scale(.02)}}

@media (prefers-reduced-motion:reduce){
  html>.tt-story-stage>.tt-story-pic-over{transition:none}
  .tt-story>:is(.tt-story-pop,.tt-story-door,.tt-story-switch,.tt-story-card){animation-duration:.01s!important}
}
/* an instruction line ("Pull the handle down.") has no play/replay/next row */
html body:not(#tt) .tt-story .scene1-story-controls[hidden]{display:none!important}

/* Tap something in the picture (tapIn, Lesson 2 on): the new-word card's
   target (teemo-newword.css), but unlit until help lights it - three pulses,
   then gone (2026-10-01: "pulse like 3x instead of staying lit") */
html body:not(#tt) .tt-story>.tt-learn-target.tt-story-tap{border-color:transparent;box-shadow:none;animation:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html body:not(#tt) .tt-story>.tt-learn-target.tt-story-tap.is-lit{animation:tt-story-tap-lit .7s ease-in-out 3}
html body:not(#tt) .tt-story>.tt-learn-target.tt-story-tap.is-right{border-color:#2e9e44;box-shadow:0 0 0 6px rgba(46,158,68,.4);animation:none}
@keyframes tt-story-tap-lit{0%,100%{border-color:transparent;box-shadow:none}50%{border-color:#ffd03a;box-shadow:0 0 0 4px rgba(255,208,58,.35),0 0 24px rgba(255,208,58,.6)}}

/* Put things in order (lesson-player.js, order): Lesson 1's build tiles
   (teemo-newword.css), one per row, each taking its number as it is placed */
.tt-story .tt-order{display:flex;flex-direction:column;gap:calc(var(--su) * 1.6);margin-top:calc(var(--su) * 1.6)}
html body:not(#tt) .tt-story .tt-order-tile{display:flex;align-items:center;gap:10px;width:100%;font:800 clamp(14px,calc(var(--su) * 4.2),22px)/1.2 "Nunito",Arial,sans-serif;color:#24356f}
.tt-story .tt-order-n{flex:0 0 auto;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;border:2px dashed #d8b48a;font-weight:900}
.tt-story .tt-order-tile.is-used .tt-order-n{border:2px solid #2e9e44;background:#2e9e44;color:#fff}

/* Bones (teemo-parts.js, gems): the tally top right and a bone spinning, then
   flying into it, moved from the games' kit when the lessons began to score
   (2026-10-14; the gem became a dog bone 2026-10-29). In a lesson the word
   bank (Teemo with his backpack) has the corner: the tally sits beside it. */
html>.tt-game-jar{position:fixed;z-index:60;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));display:flex;align-items:center;gap:6px;height:clamp(40px,11vh,52px);padding:0 16px 0 10px;box-sizing:border-box;border-radius:999px;background:var(--tt-white);box-shadow:0 4px 12px rgba(20,30,70,.3);font:900 clamp(18px,6vh,26px)/1 "Nunito","Segoe UI",Arial,sans-serif;color:var(--tt-ink)}
html>.tt-game-jar[hidden]{display:none}
html>.tt-game-jar .tt-bone{width:clamp(30px,9vh,40px);height:auto}
html>.tt-game-jar.is-bump{animation:tt-game-bump .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes tt-game-bump{50%{transform:scale(1.18)}}
/* the spin is 10 frames of the 3D bone side by side (tools/render-bone), one
   turn while it rises, then the flight; after the turn it shows the first
   frame again (backwards fill: the last keyframe is past the strip's end) */
html>.tt-game-bone-fly{position:fixed;z-index:100001;width:48px;height:48px;margin:-24px 0 0 -24px;pointer-events:none;background:0 0/480px 48px no-repeat;animation:tt-bone-spin .5s steps(10) .1s backwards,tt-bone-fly 1.15s cubic-bezier(.5,-.3,.6,1) forwards}
@keyframes tt-bone-spin{to{background-position:-480px 0}}
@keyframes tt-bone-fly{0%{transform:scale(.4)}20%,50%{transform:translate(0,-30px) scale(1.3)}100%{transform:translate(var(--dx),var(--dy)) scale(.7)}}
@media (prefers-reduced-motion:reduce){html>.tt-game-bone-fly{animation-duration:.01s;animation-delay:0s}}
/* The render of the 3D bone came out dull against the white tally and cards
   (Blake, 2026-10-30: "really dark"), so every bone is shown a fifth brighter:
   the still and the spinning one alike. */
.tt-bone,html>.tt-game-bone-fly{filter:brightness(1.2)}

html:not(.tt-game)>.tt-game-jar{right:calc(max(10px,env(safe-area-inset-right)) + clamp(52px,8vh,76px) + 14px);top:max(14px,calc(env(safe-area-inset-top) + 10px))}
/* Lesson 1's card, centred top to bottom on the right of the scene, reaches
   the tally's corner when it is tall (a phone, a speaking card): while the
   tally shows, the card is centred in the room below it instead */
html:has(>.tt-game-jar:not([hidden])) body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene:not(.tt-story,.tt-learn)>[data-tt-role="lesson-card"]{top:calc(max(14px,calc(env(safe-area-inset-top) + 10px)) + clamp(40px,11vh,52px) + 6px - var(--scene-t,0px))!important;bottom:2.5%!important;transform:none!important;height:fit-content!important;max-height:none!important;margin-block:auto!important}
html body:not(#tt) .tt-story>.tt-learn-target.tt-story-light{pointer-events:none}

/* A Challenge question: a word to find, not read (Blake, 2026-10-14: "we
   should denote that this is a hard exercise") - a badge over the question */
.tt-story .tt-challenge{display:table;margin:0 auto calc(var(--su) * .8);padding:2px 12px;border-radius:999px;background:linear-gradient(180deg,#ff9f2e,#e8711a);box-shadow:0 2px 0 #b9520c;color:#fff;font:900 clamp(11px,calc(var(--su) * 3),15px)/1.5 "Nunito",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.tt-story .tt-challenge::before{content:"★ "}
/* Night 1 prototype (2026-10-22): what a question measures (?tags only), and
   the grown-ups' report on the end card (lesson-player.js) */
:is(.tt-story,.scene1-lesson-modal) .tt-target{display:table;margin:0 auto calc(var(--su) * .8) 0;padding:1px 10px;border-radius:999px;background:#e8f0ff;color:#2a4a8a;font:800 clamp(10px,calc(var(--su) * 2.6),13px)/1.5 "Nunito",Arial,sans-serif}
/* the Cusco plaza questions' panel has no --su: the label size, fixed */
.scene2-task .tt-target{display:table;margin:0 0 4px;padding:1px 10px;border-radius:999px;background:#e8f0ff;color:#2a4a8a;font:800 12px/1.5 "Nunito",Arial,sans-serif}
.tt-story .tt-report-open{display:block;margin:calc(var(--su) * 2) auto 0;padding:4px 10px;border:0;background:none;color:#52668e;font:800 clamp(11px,calc(var(--su) * 2.8),14px)/1.3 "Nunito",Arial,sans-serif;text-decoration:underline;cursor:pointer}
:is(.tt-story,.tt-report-sheet) .tt-report h3{margin:0 0 .3em;font-size:1.25em!important;line-height:1.2!important}
:is(.tt-story,.tt-report-sheet) .tt-report{text-align:left;font:600 clamp(11px,calc(var(--su) * 2.8),14px)/1.35 "Nunito",Arial,sans-serif;color:#24356f;max-height:calc(100dvh - 150px);overflow:auto}
:is(.tt-story,.tt-report-sheet) .tt-report h4{margin:.7em 0 .2em;font-size:1em;font-weight:900}
:is(.tt-story,.tt-report-sheet) .tt-report ul{margin:0;padding:0;list-style:none}
:is(.tt-story,.tt-report-sheet) .tt-report li{padding:.15em 0 .15em 1.2em;position:relative}
:is(.tt-story,.tt-report-sheet) .tt-report li::before{position:absolute;left:0;content:"●";color:#3aa655}
:is(.tt-story,.tt-report-sheet) .tt-report li.is-some::before{color:#e8a21a}
:is(.tt-story,.tt-report-sheet) .tt-report li.is-not::before{color:#d9483b}
:is(.tt-story,.tt-report-sheet) .tt-report li span{opacity:.7;margin-left:.3em}
:is(.tt-story,.tt-report-sheet) .tt-report li em{display:block;font-style:normal;color:#a3402f;font-size:.92em}
/* The end of Lesson 1 (scene1-lesson.js, TeemoParts.report): the same button
   at the end of the done bar, and the report on a card over the scene, as
   the microphone help sits (teemo-mobile.css .tt-mic-help), above the hand.
   No scene layer to take --su from: the scene is the screen, at 16:9 */
html body:not(#tt) [data-tt-role="task-panel"]>.tt-report-open{order:5;flex:0 0 auto;min-height:44px;margin:0 0 0 auto;padding:0 4px;border:0;background:none;color:#52668e;font:800 14px/1.2 "Nunito",Arial,sans-serif;text-decoration:underline;white-space:nowrap;cursor:pointer}
html>.tt-report-sheet{position:fixed;inset:0;z-index:2147483560;display:grid;place-items:center;padding:12px 16px;background:rgba(16,32,70,.45);--su:calc(min(100dvh,56.25vw) / 100)}
html>.tt-report-sheet .tt-report-card{box-sizing:border-box;width:min(480px,100%);max-height:100%;display:flex;flex-direction:column;padding:calc(var(--su) * 3) calc(var(--su) * 4);border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(20,30,70,.3)}
html>.tt-report-sheet .tt-report{flex:1 1 auto;min-height:0;max-height:none}
html>.tt-report-sheet .tt-report-open{display:block;flex:0 0 auto;min-height:44px;margin:calc(var(--su) * 1) auto 0;padding:0 16px;border:0;background:none;color:#52668e;font:800 14px/1.2 "Nunito",Arial,sans-serif;text-decoration:underline;cursor:pointer}

/* The end of a lesson: its stars (from the bones earned) and the bones */
.tt-story .tt-score{display:flex;flex-direction:column;align-items:center;gap:calc(var(--su) * 1);margin:calc(var(--su) * 1.2) 0}
.tt-story .tt-score .tt-game-end-bones{display:inline-flex;align-items:center;gap:8px;font:900 clamp(18px,calc(var(--su) * 6),28px)/1 "Nunito",Arial,sans-serif;color:#24356f}
.tt-story .tt-score .tt-bone{width:1.8em;height:auto}
.tt-story .tt-stars{display:flex;gap:6px}
.tt-story .tt-stars i{width:clamp(30px,calc(var(--su) * 10),48px);aspect-ratio:1;display:block}
.tt-story .tt-stars svg{width:100%;height:100%;fill:#d6dbe7;stroke:#aab3c8;stroke-width:1.2}
.tt-story .tt-stars i.is-on svg{fill:#ffd34f;stroke:#e0a21e}
@media (prefers-reduced-motion:no-preference){.tt-story .tt-stars i.is-on{animation:tt-star-in .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * .25s)}}
@keyframes tt-star-in{from{scale:0;rotate:-40deg}to{scale:1;rotate:0deg}}

/* Room for outlines at the question area's edges: it scrolls, so it clips,
   and a spotlit word's ring and the speaking box's sides were cut off
   (Blake, 2026-10-16: "still getting a cutoff issue", "the sides of this box
   don't light up... cut off slightly") */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story>.is-question>.scene1-question{padding:8px 10px 6px!important;margin:0 -10px!important}
/* room above the question for a question word's tag ("a place" over
   "Where"), which sat on the card's title (Blake, 2026-10-16: "still getting
   a cutoff issue on the wear label") */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story .scene1-question>h3{margin-top:clamp(14px,calc(var(--su) * 4.5),22px)!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-story .scene1-question>.tt-challenge+h3{margin-top:clamp(12px,calc(var(--su) * 4),20px)!important}

/* What a question can still earn (teemo-parts.js gems.worth), going down
   with each hint: top right of the question in the doc lessons; in Lesson 1
   top right of the card, on the "Meet Teemo" title's line; in Cusco's panel
   on its title's line, left of the close X */
.tt-story .tt-worth,.tt-worth{display:inline-flex;align-items:center;gap:4px;padding:2px 10px 2px 6px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px #9bb7df;font:900 clamp(14px,calc(var(--su,3.6px) * 4),19px)/1.3 "Nunito",Arial,sans-serif;color:#24356f;z-index:1}
.tt-story .tt-worth .tt-bone,.tt-worth .tt-bone{width:1.6em;height:auto}
.tt-story .tt-worth.is-zero,.tt-worth.is-zero{opacity:.55}
.tt-story .tt-worth.is-drop,.tt-worth.is-drop{animation:tt-worth-drop .5s ease}
.tt-story .scene1-question{position:relative}
.tt-story .tt-worth{position:absolute;top:0;right:4px}
html body:not(#tt) [data-tt-role="lesson-modal"]:not(.tt-story) .scene1-question>.tt-worth{position:absolute;top:10px;right:14px}
.scene2-task .tt-worth{position:absolute;top:14px;right:72px}
@keyframes tt-worth-drop{30%{transform:scale(1.25);box-shadow:0 0 0 3px #e8711a}}
/* a word and its punctuation never part (Blake, 2026-10-16: "The question mark
   is broken into another line, which should never happen") */
html body:not(#tt) span:has(>.tt-key){white-space:nowrap}