/* * Teemo Travels — mobile & tablet layer. * * Injected LAST by scripts/build-mobile-release.py. The scene is a stack of * !important patches, so rules here start with `html body:not(#tt)`: the * :not(#tt) adds id-level specificity, which beats every class-based patch * without having to mirror each selector. Only inline !important styles can * win against it (those are removed in teemo-mobile.js). * * compact = phones in landscape, small tablets (height <= 600 or width <= 1000) * large = iPads, laptops, desktops (width > 1000 and height > 600) */ /* ================================================================== */ /* Everywhere: touch hygiene */ /* ================================================================== */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior:none} html body #canvas{touch-action:none} html body #canvas>img:not(.canvas-image), html body #canvas>.scene-text-item{touch-action:none;-webkit-touch-callout:none;-webkit-user-drag:none} html body #assetGrid .asset, html body #assetGrid .asset img, html body [data-tt-role="task-panel"] img, html body [data-tt-role="lesson-modal"] img{-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none} /* Sideways-scrolling item strip: large screens only. On phones the list is a vertical column (see COMPACT), and these rules would stop it scrolling. */ @media (min-height:601px) and (min-width:1001px){ html body:not(#tt) .workspace>.assets:not(.expanded)>.asset-grid{touch-action:pan-x} html body:not(#tt) .workspace>.assets.expanded>.asset-grid{touch-action:pan-y} } @media (pointer:coarse) and (min-height:601px) and (min-width:1001px){ html body:not(#tt) .workspace>.assets:not(.expanded)>.asset-grid{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} html body:not(#tt) .workspace>.assets:not(.expanded)>.asset-grid::-webkit-scrollbar{display:none} html body:not(#tt) .workspace>.assets:not(.expanded)>.asset-grid>.asset{scroll-snap-align:start} } /* While a finger drag is active, stop the item list scrolling under the finger. */ html.tt-dragging body:not(#tt) #assetGrid{overflow:hidden!important;scroll-snap-type:none!important} /* Finger-drag ghost (lives on , outside the game's body observers). */ html>.tt-drag-ghost{position:fixed;left:0;top:0;z-index:2147483600;width:78px;height:78px;object-fit:contain;pointer-events:none;opacity:.94;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));will-change:transform} html>.tt-drag-ghost.tt-drag-ghost-text{display:grid;place-items:center;border:3px solid #4775e7;border-radius:12px;background:#fff;color:#4775e7;font:900 34px/1 Arial,sans-serif} /* ================================================================== */ /* Rotate-to-landscape prompt */ /* ================================================================== */ html>.tt-rotate{display:none} @media (orientation:portrait) and (pointer:coarse) and (max-width:1100px){ html>.tt-rotate{position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;background:#102b53;color:#fff;font:800 24px/1.25 Arial,sans-serif;text-align:center} html>.tt-rotate p{margin:0} html>.tt-rotate small{display:block;margin-top:8px;font-size:16px;font-weight:600;opacity:.85} html>.tt-rotate .tt-rotate-phone{width:58px;height:96px;box-sizing:border-box;border:5px solid #fff;border-radius:14px;box-shadow:inset 0 -10px 0 -6px #fff;animation:tt-turn 2.4s ease-in-out infinite} } @keyframes tt-turn{0%,22%{transform:rotate(0)}50%,78%{transform:rotate(-90deg)}100%{transform:rotate(0)}} /* ================================================================== */ /* Menu */ /* ================================================================== */ html body:not(#tt) .tt-menu-btn{display:none} html>.tt-menu{position:fixed;z-index:2147483500;min-width:230px;max-height:calc(100dvh - 20px);overflow:auto;display:flex;flex-direction:column;gap:4px;padding:8px;box-sizing:border-box;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(20,30,60,.3);font:800 16px/1.1 "Nunito","Segoe UI",Arial,sans-serif;color:#1c2b5a} html>.tt-menu[hidden]{display:none} html>.tt-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;color:#1c2b5a;cursor:pointer} html>.tt-menu button:active{background:#eef3fb} html>.tt-menu button[hidden]{display:none} html>.tt-menu button:disabled{opacity:.4} html>.tt-menu .tt-ic{width:21px;height:21px;flex:0 0 21px;color:#2166e8} html>.tt-menu hr{border:0;border-top:1px solid #e6ebf3;margin:2px 4px} html>.tt-menu .tt-menu-volume{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px} html>.tt-menu .tt-menu-volume input{flex:1;min-width:0;height:28px;accent-color:#2166e8} /* ================================================================== */ /* Full screen: what to do where the browser will not do it */ /* ================================================================== */ html>.tt-fs-tip{position:fixed;z-index:2147483520;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;max-width:min(360px,72vw);padding:9px 14px;border:0;border-radius:999px;background:rgba(16,43,83,.92);color:#fff;font:800 14px/1.2 "Nunito","Segoe UI",Arial,sans-serif;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer} html>.tt-fs-tip .tt-ic{width:18px;height:18px;flex:0 0 18px} html>.tt-howto{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:16px;background:rgba(12,24,48,.62)} html>.tt-howto[hidden]{display:none} html>.tt-howto .tt-howto-card{width:min(460px,92vw);max-height:92dvh;overflow:auto;box-sizing:border-box;padding:18px 20px;border-radius:18px;background:#fff;color:#1c2b5a;font:700 15px/1.4 "Nunito","Segoe UI",Arial,sans-serif;box-shadow:0 18px 44px rgba(10,20,50,.4)} html>.tt-howto h2{margin:0 0 8px;font-size:20px;color:#102b53} html>.tt-howto p{margin:0 0 10px} html>.tt-howto ol{margin:0 0 14px;padding-left:20px} html>.tt-howto li{margin-bottom:5px} html>.tt-howto .tt-howto-close{display:block;width:100%;min-height:44px;border:0;border-radius:12px;background:#2166e8;color:#fff;font:900 16px/1 "Nunito",Arial,sans-serif;cursor:pointer} /* ================================================================== */ /* Task: minimise instead of losing it */ /* ================================================================== */ html body:not(#tt) .tt-task-pill{display:none} html.tt-task-min body:not(#tt) [data-tt-role="task-panel"]{display:none!important} html.tt-task-min body:not(#tt) .scene-head .tt-task-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 6px;border:0;border-radius:999px;background:#ffe7a3;color:#3b2a00;font:900 14px/1 "Nunito",Arial,sans-serif;cursor:pointer;box-shadow:0 2px 0 #e0b84a;flex:0 0 auto;animation:tt-nudge 2.5s ease-in-out infinite} html body:not(#tt) .tt-task-pill img{width:26px;height:26px;object-fit:contain} @keyframes tt-nudge{0%,80%,100%{transform:none}88%{transform:translateY(-2px)}94%{transform:translateY(1px)}} /* ================================================================== */ /* Hints: pointing hand */ /* ================================================================== */ html>.tt-hand{position:fixed;left:0;top:0;z-index:2147483550;pointer-events:none;will-change:transform} html>.tt-hand[hidden]{display:none} html>.tt-hand .tt-hand-pointer{display:block;width:46px;height:46px;transform:translate(-34%,-6%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));transition:transform .14s ease-out;transform-origin:34% 6%} html>.tt-hand .tt-hand-svg{display:block;width:100%;height:100%} html>.tt-hand.tapping .tt-hand-pointer{transform:translate(-34%,-6%) scale(.82)} html>.tt-hand .tt-hand-tip{position:absolute;left:26px;top:-38px;white-space:nowrap;background:#1c2b5a;color:#fff;font:800 15px/1 "Nunito",Arial,sans-serif;padding:8px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.25)} html>.tt-hand.tip-left .tt-hand-tip{left:auto;right:10px} html>.tt-hand .tt-hand-tip:empty{display:none} html>.tt-hint-ghost{position:fixed;left:0;top:0;width:72px;height:72px;object-fit:contain;z-index:2147483540;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))} html body:not(#tt) .tt-hint-ring{outline:4px solid #ffc93c!important;outline-offset:-3px!important;animation:tt-glow 1s ease-in-out infinite!important} @keyframes tt-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,201,60,.0)}50%{box-shadow:0 0 0 8px rgba(255,201,60,.55)}} /* ================================================================== */ /* Selected-item toolbar (compact screens replace the right panel) */ /* ================================================================== */ html>.tt-itembar{position:fixed;z-index:2147483400;left:calc(var(--tt-stage-l,0px) + var(--tt-stage-w,0px) / 2);top:calc(var(--tt-stage-t,0px) + var(--tt-stage-h,0px) - 8px);transform:translate(-50%,-100%);display:flex;flex-direction:row;align-items:center;gap:5px;padding:5px 6px;background:rgba(255,255,255,.96);border-radius:18px;box-shadow:0 6px 22px rgba(20,30,70,.28)} html>.tt-itembar[hidden],html.tt-cards-on>.tt-itembar{display:none} html>.tt-itembar button{all:unset;box-sizing:border-box;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#1c2b5a;background:#eef3fb;cursor:pointer} html>.tt-itembar .tt-ic{width:21px;height:21px} html>.tt-itembar button:active{transform:scale(.92)} html>.tt-itembar button[data-a=delete]{background:#fde7e8;color:#b52a2f} html>.tt-itembar button[data-a=done]{background:#2166e8;color:#fff} html>.tt-itembar .tt-size{min-width:36px;text-align:center;font:900 12px/1 "Nunito",Arial,sans-serif;color:#6a7898} /* ================================================================== */ /* Speaking: one big microphone button */ /* ================================================================== */ html body:not(#tt) [data-tt-role="speak-button"], html body:not(#tt) [data-tt-role="speak-button"]{position:relative!important;display:inline-flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;flex:0 0 auto!important;width:auto!important;min-width:110px!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:2px 0 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#1c2b5a!important;font-size:0!important;line-height:0!important;opacity:1!important;filter:none!important;cursor:pointer!important;white-space:normal!important;overflow:visible!important} html body:not(#tt) [data-tt-role="speak-button"]::before, html body:not(#tt) [data-tt-role="speak-button"]::before{content:"";display:block;width:var(--tt-mic-size,66px);height:var(--tt-mic-size,66px);border-radius:50%;background:var(--tt-w-mic) center/46% no-repeat,linear-gradient(#4a8cf7,#2166e8);box-shadow:0 4px 0 #1447ad;animation:tt-breathe 2.2s ease-in-out infinite} html body:not(#tt) [data-tt-role="speak-button"]::after, html body:not(#tt) [data-tt-role="speak-button"]::after{content:"Hold & talk";font:900 14px/1.1 "Nunito","Segoe UI",Arial,sans-serif;color:#1c2b5a;white-space:nowrap} html body:not(#tt) [data-tt-role="speak-button"]:disabled::before, html body:not(#tt) [data-tt-role="speak-button"]:disabled::before{background:var(--tt-w-mic) center/46% no-repeat,#c3ccdb;box-shadow:0 4px 0 #9aa6ba;animation:none} html body:not(#tt) [data-tt-role="speak-button"]:disabled::after, html body:not(#tt) [data-tt-role="speak-button"]:disabled::after{content:"Listen first";color:#6a7898} html.tt-listening body:not(#tt) .tt-say-active::before{background:var(--tt-w-mic) center/46% no-repeat,linear-gradient(#f47575,#e0474c);box-shadow:0 4px 0 #a52a2e;animation:tt-ring 1.1s ease-out infinite} html.tt-listening body:not(#tt) .tt-say-active::after{content:"Talk, then let go";color:#c0392b} /* hold to talk (teemo-lesson-core.js): a long press must not scroll, select text or open the phone's callout menu */ html body:not(#tt) [data-tt-role="speak-button"]{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} html body:not(#tt) .tt-held::before{transform:scale(.94);animation:none!important} html body:not(#tt) [data-tt-role="speak-button"].correct::before, html body:not(#tt) [data-tt-role="practice"].is-correct [data-tt-role="speak-button"]::before{background:var(--tt-w-check) center/48% no-repeat,linear-gradient(#3cc97c,#22a45d);box-shadow:0 4px 0 #157a43;animation:none} html body:not(#tt) [data-tt-role="speak-button"].correct::after, html body:not(#tt) [data-tt-role="practice"].is-correct [data-tt-role="speak-button"]::after{content:"Great!";color:#157a43} html body:not(#tt) [data-tt-role="practice"].is-incorrect [data-tt-role="speak-button"]:not(:disabled)::after{content:"Hold & try again";color:#b52a2f} html body:not(#tt) .tt-voicebars{display:none;position:absolute;top:calc(var(--tt-mic-size,66px) / 2 - 15px);height:34px;align-items:center;gap:3px;pointer-events:none} html body:not(#tt) .tt-voicebars.right{left:calc(50% + var(--tt-mic-size,66px) / 2 + 7px)} html body:not(#tt) .tt-voicebars.left{right:calc(50% + var(--tt-mic-size,66px) / 2 + 7px);flex-direction:row-reverse} html.tt-listening body:not(#tt) .tt-say-active .tt-voicebars{display:flex} html body:not(#tt) .tt-voicebars i{display:block;width:5px;border-radius:3px;background:#e0474c;height:calc(6px + var(--tt-level,0) * 28px);transition:height .07s linear} html body:not(#tt) .tt-voicebars i:nth-child(2){height:calc(5px + var(--tt-level,0) * 20px)} html body:not(#tt) .tt-voicebars i:nth-child(3){height:calc(4px + var(--tt-level,0) * 12px)} @keyframes tt-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes tt-ring{0%{box-shadow:0 4px 0 #a52a2e,0 0 0 0 rgba(224,71,76,.55)}100%{box-shadow:0 4px 0 #a52a2e,0 0 0 20px rgba(224,71,76,0)}} html body:not(#tt) [data-tt-role="hear-button"], html body:not(#tt) [data-tt-role="hear-button"]{display:inline-flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important;min-height:40px!important;height:auto!important;margin:0!important;padding:8px 14px!important;border:0!important;border-radius:999px!important;background:#e8f0ff!important;color:#1d55c2!important;box-shadow:0 2px 0 #c9d8f5!important;font:800 15px/1.1 "Nunito",Arial,sans-serif!important;white-space:nowrap!important;cursor:pointer!important} html body:not(#tt) [data-tt-role="step-nav"]{display:inline-flex!important;align-items:center!important;min-height:40px!important;margin:0!important;padding:8px 16px!important;border:0!important;border-radius:999px!important;background:linear-gradient(#ffd75b,#f5b82e)!important;color:#3b2a00!important;box-shadow:0 3px 0 #c98f12!important;font:900 15px/1.1 "Nunito",Arial,sans-serif!important;cursor:pointer!important} html body:not(#tt) [data-tt-role="step-nav"]:disabled{opacity:.35!important;box-shadow:none!important;cursor:default!important} html body:not(#tt) [data-tt-role="practice"]{border:0!important;border-radius:18px!important;background:#f3f7ff!important;box-shadow:none!important} html body:not(#tt) [data-tt-role="practice"].is-correct{background:#e8f8ee!important;box-shadow:none!important} html body:not(#tt) [data-tt-role="practice"].is-incorrect{background:#fff4f4!important;box-shadow:none!important} /* The microphone is the one thing a child is meant to press, and the only round thing on the card, so it belongs on the card's centre line. A centred flex row does not put it there: "Hear sentence" is ~160px wide and "Next" ~65px, so the row balances around the gap between them and leaves the mic some 50px right of centre - which is what reads as "not quite centred". Three columns with the mic pinned to the middle one fixes it, and holds however many of the three buttons a step actually shows. */ html body:not(#tt) [data-tt-role="practice-actions"]{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;justify-items:center!important;column-gap:18px!important;width:100%!important} html body:not(#tt) [data-tt-role="practice-actions"]>[data-tt-role="hear-button"]{grid-column:1!important;justify-self:end!important} html body:not(#tt) [data-tt-role="practice-actions"]>[data-tt-role="speak-button"], html body:not(#tt) [data-tt-role="practice-actions"]>[data-tt-role="speak-button"]{grid-column:2!important;justify-self:center!important} html body:not(#tt) [data-tt-role="practice-actions"]>[data-tt-role="step-nav"]{grid-column:3!important;justify-self:start!important} html body:not(#tt) [data-tt-role="practice-status"]{white-space:normal!important} /* ================================================================== */ /* Meet Teemo lesson: softer, rounder */ /* ================================================================== */ html body:not(#tt) [data-tt-role="lesson-modal"]{background:rgba(16,32,70,.55)!important} html body:not(#tt) [data-tt-role="lesson-card"]{border:0!important;border-radius:22px!important;background:#fffdf7!important;box-shadow:0 24px 60px rgba(10,20,50,.35)!important} html body:not(#tt) [data-tt-role="teemo"]>img{border-radius:16px} html body:not(#tt) [data-tt-role="close-button"]{width:40px!important;height:40px!important;display:grid!important;place-items:center!important;padding:0!important;border-radius:50%!important;background:#f1ece2!important;color:#70421f!important;font-size:24px!important;line-height:1!important;z-index:5} /* Story player: play/pause, then replay - round icon buttons (the labels stay as accessible names) - then the next step. Scene 2's story reuses both buttons. */ html body:not(#tt) .scene1-story-controls{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:10px!important;margin:0!important} html body:not(#tt) :is(.scene1-story-toggle,.scene1-replay){display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:0!important;flex:0 0 auto!important;width:46px!important;height:46px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:#e8f0ff!important;color:#1d55c2!important;box-shadow:0 2px 0 #c9d8f5!important;cursor:pointer} html body:not(#tt) :is(.scene1-story-toggle,.scene1-replay)[data-tt-icon-only]::before{width:22px;height:22px} /* the label is still in there at font-size 0: as a grid it took a row of its own and pushed the icon up. A play triangle's weight sits left of its box, so it is nudged right to look centred. */ html body:not(#tt) .scene1-story-toggle[data-tt-icon="play"]::before{transform:translateX(2px)} html body:not(#tt) .scene1-story-controls>[data-tt-role="step-nav"]{margin:0 0 0 6px!important} html body:not(#tt) [data-tt-role="step-nav"], html body:not(#tt) [data-tt-role="step-nav"], html body:not(#tt) [data-tt-role="answer"]{border:0!important;border-radius:999px!important;background:linear-gradient(#ffd75b,#f5b82e)!important;color:#3b2a00!important;box-shadow:0 3px 0 #c98f12!important;font-weight:900!important} html body:not(#tt) [data-tt-role="answer"]:disabled{opacity:.4!important;box-shadow:none!important} html body:not(#tt) [data-tt-role="options"] button{border:2px solid #dfe7f3!important;border-radius:999px!important;background:#fff!important;color:#1c2b5a!important;box-shadow:0 2px 0 #dfe7f3!important;font-weight:800!important} html body:not(#tt) [data-tt-role="options"] button.chosen{border-color:#2166e8!important;background:#eaf1ff!important;box-shadow:0 2px 0 #9dbcf3!important} html body:not(#tt) [data-tt-role="options"] button.correct{border-color:#22a45d!important;background:#e3f6ea!important;color:#157a43!important;box-shadow:0 2px 0 #9ed8b6!important} /* ================================================================== */ /* In-scene task bar: softer, rounder */ /* ================================================================== */ html body:not(#tt) [data-tt-role="task-panel"]{border:0!important;border-radius:14px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 4px 16px rgba(20,30,70,.18)!important} html body:not(#tt) .scene1-inline-text{color:#1c2b5a!important;text-shadow:none!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"], html body:not(#tt) .scene1-inline-skip, html body:not(#tt) [data-tt-role="collapse-button"]{flex:0 0 38px!important;width:38px!important;height:38px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;box-shadow:none!important;line-height:1!important;cursor:pointer!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"]{background:#e8f0ff!important;font-size:17px!important} html body:not(#tt) .scene1-inline-skip{background:#ffe7a3!important;color:#3b2a00!important;font-size:20px!important} html body:not(#tt) [data-tt-role="collapse-button"]{background:#eef1f6!important;color:#6a7898!important;font-size:0!important} html body:not(#tt) [data-tt-role="task-panel"] [hidden]{display:none!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]:empty{display:none!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{color:#157a43!important} /* ================================================================== */ /* LARGE (iPad, laptop, desktop) */ /* ================================================================== */ @media (min-height:601px) and (min-width:1001px){ html body:not(#tt) .app{height:100vh!important;height:100dvh!important;min-height:0!important} html body:not(#tt) .top{height:58px!important;min-height:58px!important;padding:6px 14px!important} html body:not(#tt) .top .owl,html body:not(#tt) .top .owl img{max-height:46px!important} html body:not(#tt) .header-title h1{font-size:20px!important} html body:not(#tt) .actions .btn{height:36px!important} html body:not(#tt) .app>.body{grid-template-columns:clamp(150px,15vw,200px) minmax(0,1fr) clamp(190px,17vw,230px)!important;gap:8px!important;padding:8px!important} html body:not(#tt) .panel.left>.navitem{flex:0 0 76px!important;height:76px!important;min-height:76px!important;font-size:13px!important} html body:not(#tt) .panel.right{overflow-x:hidden!important;overflow-y:auto!important;padding-bottom:10px!important} html body:not(#tt) .workspace>.scene-head,html body:not(#tt) .workspace>.assets{width:100%!important} html body:not(#tt) .scene-scene-nav{position:static!important;transform:none!important;margin-left:auto!important;order:8} html body:not(#tt) .scene-head .scene1-activity-launch{order:1} html body:not(#tt) .scene-head .tt-task-pill{order:2} html body:not(#tt) .scene-head .scene1-inline-open{order:3} /* The task bar is ONE row: what to do on the left, the step's own content (the sentence to say) in the middle, praise and the speaker on the right. It used to push that content onto a second, full-width row. */ html body:not(#tt) [data-tt-role="task-panel"]{height:auto!important;min-height:64px!important;max-height:45%!important;padding:8px 16px!important;gap:10px 18px!important;flex-wrap:nowrap!important;align-items:center!important} html body:not(#tt) .scene1-inline-text{order:1;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;align-items:center!important;gap:12px!important;font:900 23px/1.2 "Nunito",Arial,sans-serif!important;white-space:normal!important} html body:not(#tt) .scene1-inline-target-icon{width:44px!important;height:40px!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{order:3;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:12em!important;font-size:16px!important;margin-left:auto!important;white-space:normal!important;text-align:right!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"]{order:4} html body:not(#tt) [data-tt-role="inline-card"]{order:2;flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:10px 16px!important;overflow:visible!important} html body:not(#tt) [data-tt-role="inline-card"]:empty{display:none!important} } /* ================================================================== */ /* COMPACT (phones in landscape) */ /* ================================================================== */ @media (max-height:600px), (max-width:1000px){ /* ---- Opening screen ---- */ html body:not(#tt) #openingScreen #startExploring{min-width:0!important;width:min(500px,31vw,70vh)!important;height:auto!important;aspect-ratio:500/183;bottom:max(10px,3vh)!important} html body:not(#tt) #openingScreen .opening-music-toggle{top:max(8px,env(safe-area-inset-top))!important;left:max(10px,env(safe-area-inset-left))!important;padding:7px 12px!important;font:800 14px/1.1 Arial,sans-serif!important} /* ---- Adventure chooser ---- */ html body:not(#tt) .adventure-chooser .create-character-step, html body:not(#tt) .adventure-chooser .create-character-step:hover{width:24%!important;height:auto!important;aspect-ratio:380/126;top:74.5%!important;transform:translateX(-50%)!important} html body:not(#tt) .adventure-chooser .create-character-step:active{transform:translateX(-50%) translateY(2px)!important} /* ---- Frame: no header, no right panel; the scene gets the space ---- */ html:has(body .app),html body:not(#tt):has(.app){height:100%;overflow:hidden!important;overscroll-behavior:none} html body:not(#tt) .app{height:100vh!important;height:100dvh!important;min-height:0!important;box-sizing:border-box!important;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;background:#eef3fa} html body:not(#tt) .app>.top{display:none!important} html body:not(#tt) .app>.body{grid-template-columns:clamp(60px,8vw,78px) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:6px!important;padding:6px!important;min-height:0!important} html body:not(#tt) .app>.body>.panel{border:0!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(30,50,100,.08)!important;min-height:0!important} html body:not(#tt) .app>.body>.panel.right{display:none!important} /* ---- Left rail: category icons ---- */ html body:not(#tt) .panel.left{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:4px!important;padding:5px 4px!important;overflow-x:hidden!important;overflow-y:auto!important} html body:not(#tt) .panel.left>.item-categories-heading, html body:not(#tt) .panel.left>.tip, html body:not(#tt) .panel.left>.scene-volume-control, html body:not(#tt) .panel.left>.navitem.category-disabled{display:none!important} html body:not(#tt) .panel.left>.navitem{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:6px 2px!important;gap:3px!important;border-radius:12px!important;font-size:11px!important;font-weight:800!important;line-height:1.05!important;text-align:center!important;white-space:normal!important} html body:not(#tt) .panel.left .navitem .category-visual-thumb{width:44px!important;height:36px!important} html body:not(#tt) .panel.left>.navitem.category-thumbnail-render-lock::before{width:44px!important;height:36px!important} html body:not(#tt) .panel.left .navitem span{font-size:24px!important} /* ---- Centre: [top bar] over [scene | item list] ---- */ html body:not(#tt) .workspace{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(86px,12.5vw,112px)!important;grid-template-rows:44px minmax(0,1fr)!important;gap:6px!important;min-height:0!important} html body:not(#tt) .workspace>.scene-head{grid-column:1 / -1!important;grid-row:1!important;width:100%!important;max-width:none!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0 5px!important;gap:6px!important;font-size:0!important;overflow:hidden!important;border:0!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(30,50,100,.08)!important} html body:not(#tt) .workspace>.scene-stage-wrap{grid-column:1!important;grid-row:2!important} html body:not(#tt) .workspace>.assets{grid-column:2!important;grid-row:2!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;padding:5px!important;overflow:hidden!important;border:0!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(30,50,100,.08)!important;flex:none!important} html body:not(#tt) .scene-footer{display:none!important} /* top bar contents (visible when no task is showing) */ html body:not(#tt) .workspace>.scene-head>span:first-child{display:none!important} html body:not(#tt) .scene-head .scene1-activity-launch, html body:not(#tt) .scene-head .scene1-inline-open{order:1;flex:0 0 auto;height:34px!important;min-height:34px!important;max-height:34px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:999px!important;box-shadow:0 2px 0 #12396d!important;font:800 14px/1 "Nunito",Arial,sans-serif!important} html body:not(#tt) .scene-head .tt-task-pill{order:2} html body:not(#tt) .scene-head .scene1-inline-open{order:3} html body:not(#tt) .scene-head [hidden]{display:none!important} html body:not(#tt) .scene-scene-nav{order:8;position:static!important;transform:none!important;margin-left:auto!important;gap:5px!important} html body:not(#tt) .scene-scene-nav button{width:44px!important;height:34px!important;min-height:34px!important;padding:0!important;border:0!important;border-radius:999px!important;background:#fff4bd!important;box-shadow:0 2px 0 #d7a63a!important;font-size:0!important;line-height:1!important} html body:not(#tt) .workspace>.scene-head>.tt-menu-btn{order:9;flex:0 0 auto;display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:38px;height:34px;padding:0;box-sizing:border-box;border:0;border-radius:10px;background:#eef3fb;cursor:pointer} html body:not(#tt) .workspace>.scene-head>.tt-menu-btn span{display:block;width:17px;height:2.5px;border-radius:2px;background:#1c2b5a} /* scene art */ html body:not(#tt) #canvas{border:0!important;border-radius:12px!important} html body:not(#tt) #canvas>.story-build-lock button{width:min(496px,56%)!important;height:auto!important;aspect-ratio:496/124} html body:not(#tt) .scene-text-item{font-size:16px!important;padding:4px 8px!important} html body:not(#tt) .scene-text-item textarea{width:140px!important;min-height:44px!important} html body:not(#tt) .scene1-wrong-drop{width:78px!important;height:78px!important;border-width:9px!important;font:900 78px/56px Arial,sans-serif!important} /* ---- Task bar: sits in the top bar, never over the picture ---- */ html body:not(#tt) [data-tt-role="task-panel"]{background:#fff!important;position:fixed!important;inset:auto!important;left:var(--tt-head-l,0px)!important;top:var(--tt-head-t,0px)!important;right:auto!important;bottom:auto!important;width:calc(var(--tt-head-w,300px) - 48px)!important;height:var(--tt-head-h,44px)!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0 5px 0 8px!important;box-sizing:border-box!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;align-content:center!important;justify-content:flex-start!important;gap:6px!important;z-index:60!important;overflow:visible!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(30,50,100,.12)!important;pointer-events:auto!important} html body:not(#tt) .scene1-inline-text{flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;gap:8px!important;justify-content:flex-start!important;text-align:left!important;font:900 16px/1.12 "Nunito","Segoe UI",Arial,sans-serif!important;overflow:hidden!important;max-height:40px!important} html body:not(#tt) .scene1-inline-target-icon{flex:0 0 auto!important;width:34px!important;height:32px!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"], html body:not(#tt) .scene1-inline-skip, html body:not(#tt) [data-tt-role="collapse-button"]{flex:0 0 34px!important;width:34px!important;height:34px!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{flex:0 0 auto!important;order:3;width:auto!important;min-width:0!important;max-width:9em!important;height:auto!important;min-height:0!important;margin:0!important;font:900 14px/1.1 "Nunito",Arial,sans-serif!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="hear-button"]{order:2} html body:not(#tt) .scene1-inline-skip{order:4} html body:not(#tt) [data-tt-role="collapse-button"]{order:5} /* the "say it" card and short messages float at the bottom of the picture */ html body:not(#tt) [data-tt-role="inline-card"]{position:fixed!important;order:9;left:calc(var(--tt-stage-l,0px) + var(--tt-stage-w,0px) / 2)!important;top:calc(var(--tt-stage-t,0px) + var(--tt-stage-h,0px) - 10px)!important;transform:translate(-50%,-100%)!important;width:max-content!important;max-width:calc(var(--tt-stage-w,300px) - 24px)!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:14px!important;padding:8px 16px!important;box-sizing:border-box!important;background:rgba(255,255,255,.97)!important;border-radius:20px!important;box-shadow:0 8px 24px rgba(20,30,70,.28)!important;overflow:visible!important;z-index:61!important} html body:not(#tt) [data-tt-role="inline-card"]:empty{display:none!important} html body:not(#tt) .scene1-inline-complete{padding:4px 6px!important;font:900 17px/1.2 "Nunito",Arial,sans-serif!important} /* ---- Item list: vertical, beside the scene ---- */ html body:not(#tt) .workspace>.assets>.asset-head, html body:not(#tt) .workspace>.assets>.carousel-arrow, html body:not(#tt) .workspace>.assets>.carousel-arrow-next{display:none!important} html body:not(#tt) .workspace>.assets>.asset-grid{position:static!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;gap:6px!important;overflow-x:hidden!important;overflow-y:auto!important;touch-action:pan-y!important;scroll-snap-type:y proximity;scrollbar-width:none;overscroll-behavior:contain;background:transparent!important;border:0!important;box-shadow:none!important} html body:not(#tt) .workspace>.assets>.asset-grid::-webkit-scrollbar{display:none} html body:not(#tt) .workspace>.assets>.asset-grid>.asset{flex:0 0 auto!important;width:100%!important;min-width:0!important;height:clamp(64px,18vh,86px)!important;min-height:0!important;margin:0!important;padding:4px!important;border-radius:12px!important;scroll-snap-align:start;display:flex!important;align-items:center!important;justify-content:center!important} html body:not(#tt) .workspace>.assets>.asset-grid>.asset>.pic{width:100%!important;height:100%!important;max-height:none!important;font-size:40px!important} html body:not(#tt) .workspace>.assets>.asset-grid>.asset>.pic img{max-width:100%!important;max-height:100%!important} html body:not(#tt) .workspace>.assets>.asset-grid.category-prompt::before{content:"Pick a category";margin:auto;padding:6px;text-align:center;color:#6079a6;font:800 14px/1.25 "Nunito",Arial,sans-serif} /* ---- Meet Teemo lesson ---- */ html body:not(#tt) [data-tt-role="lesson-modal"]{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important} html body:not(#tt) [data-tt-role="lesson-card"]{width:100%!important;height:100%!important;max-height:none!important;padding:8px 14px!important} html body:not(#tt) [data-tt-role="lesson-card"] h2{margin:0 0 4px!important;font-size:21px!important} html body:not(#tt) [data-tt-role="close-button"]{top:6px!important;right:8px!important} html body:not(#tt) .scene1-lesson-main{flex-direction:row!important;gap:14px!important} html body:not(#tt) [data-tt-role="teemo"]{flex:0 0 28%!important;width:auto!important;height:100%!important} html body:not(#tt) .scene1-story{width:auto!important;height:100%!important;flex:1 1 auto!important} html body:not(#tt) .scene1-story-text{font-size:clamp(16px,5.6vh,23px)!important;line-height:1.4!important} html body:not(#tt) .scene1-help{margin:4px 0 8px!important;font-size:14px!important} html body:not(#tt) [data-tt-role="step-nav"]{padding:10px 18px!important;font-size:16px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question{display:grid!important;grid-template-columns:24% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:14px} html body:not(#tt) [data-tt-role="lesson-card"].is-question>h2{grid-column:1/-1} html body:not(#tt) [data-tt-role="lesson-card"].is-question .scene1-lesson-main{grid-column:1;grid-row:2;flex:none!important;height:auto!important;min-height:0!important;flex-direction:column!important;gap:0!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="teemo"]{flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question .scene1-story{display:none!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question>.scene1-question{grid-column:2;grid-row:2;justify-content:flex-start!important;min-height:0!important;margin:0!important;padding:2px 0 8px 14px!important;border-top:0!important;border-left:2px solid #f0e6d2!important;overflow-x:hidden!important;overflow-y:auto!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question .scene1-question h3{margin:2px 0 8px!important;font-size:20px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="options"]{gap:8px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="options"] button{min-width:84px!important;min-height:42px;padding:7px 16px!important;font-size:17px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="answer"]{margin:8px auto 0!important;padding:9px 26px!important;font-size:17px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question .scene1-feedback{min-height:18px!important;margin-top:4px!important;font-size:15px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question>.scene1-question [data-tt-role="practice"]{width:100%!important;max-height:none!important;margin:8px 0 0!important;padding:10px 12px!important;flex:0 0 auto} html body:not(#tt) [data-tt-role="practice-grid"]{grid-template-columns:minmax(0,1fr)!important;gap:4px!important} html body:not(#tt) [data-tt-role="practice-main"]{min-width:0!important} html body:not(#tt) [data-tt-role="practice-grid"] [data-tt-role="speech-review"]{border-left:0!important;border-top:1px dashed #c9d8f5!important;text-align:center!important;padding:6px 0 0!important} html body:not(#tt) [data-tt-role="practice-grid"] [data-tt-role="speech-review"][hidden]{display:none!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-actions"]{flex-wrap:nowrap!important;gap:10px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-actions"] [data-tt-role="hear-button"]{padding:8px 11px!important;font-size:14px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-actions"] [data-tt-role="step-nav"]{padding:8px 12px!important;font-size:14px!important} /* once the answer is right, only the question and the speaking card are needed, so the result fits on screen */ html body:not(#tt) .scene1-question:has([data-tt-role="practice"]) [data-tt-role="answer"], html body:not(#tt) .scene1-question:has([data-tt-role="practice"]) [data-tt-role="options"], html body:not(#tt) .scene1-question:has([data-tt-role="practice"]) .scene1-feedback{display:none!important} html body:not(#tt) [data-tt-role="practice"].is-incorrect [data-tt-role="practice-status"]{display:none!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice"]{--tt-mic-size:58px} html body:not(#tt) [data-tt-role="inline-card"]{--tt-mic-size:56px} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] [data-tt-role="practice-prompt"]{font-size:15px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] [data-tt-role="target-sentence"]{font-size:23px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-actions"]{gap:14px!important;margin-top:8px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-status"]{min-height:20px!important;margin-top:6px!important;font-size:15px!important} html body:not(#tt) [data-tt-role="practice-grid"] [data-tt-role="speech-review"]{min-height:0!important;max-height:none!important;padding:4px 0 4px 10px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] [data-tt-role="speech-review"], html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] .scene1-speech-heard, html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] .scene1-review-label, html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] .scene1-heard-word{font-size:14px!important} html body:not(#tt) [data-tt-role="lesson-card"].is-question [data-tt-role="practice-grid"] .scene1-speech-detail{font-size:12.5px!important} html body:not(#tt) .scene1-complete{margin:10px 0!important;font-size:20px!important} html body:not(#tt) [data-tt-role="step-nav"]{padding:11px 20px!important;font-size:16px!important} /* ---- Story View player ---- */ html body:not(#tt) .story-player{padding:4px!important;padding-bottom:max(4px,env(safe-area-inset-bottom))!important} html body:not(#tt) .story-player-stage{width:min(96vw,calc((100dvh - 60px) * 1.7768))!important;border-width:3px!important} html body:not(#tt) .story-player-controls{gap:8px!important;margin-top:6px!important} html body:not(#tt) .story-player button{padding:8px 12px!important;font-size:14px!important} } /* ================================================================== */ /* Icons (teemo-mobile.js strips the emoji and sets data-tt-icon) */ /* ================================================================== */ html body:not(#tt) [data-tt-icon]::before{content:"";display:inline-block;flex:0 0 auto;width:1.15em;height:1.15em;margin-right:.45em;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--tt-icon) center/contain no-repeat;mask:var(--tt-icon) center/contain no-repeat} html body:not(#tt) [data-tt-icon-only]{font-size:0!important} html body:not(#tt) [data-tt-icon-only]::before{width:20px;height:20px;margin:0} html body:not(#tt) [data-tt-role="hear-button"][data-tt-icon]{color:#1d55c2!important} html body:not(#tt) [data-tt-role="collapse-button"][data-tt-icon]{color:#6a7898!important} html body:not(#tt) [data-tt-role="close-button"][data-tt-icon]::before{width:22px;height:22px} html body:not(#tt) .scene-scene-nav button[data-tt-icon]::before{color:#173b83} html body:not(#tt) #openingScreen .opening-music-toggle[data-tt-icon]::before{width:17px;height:17px;margin-right:6px;vertical-align:-3px} html body:not(#tt) .scene-head .scene1-activity-launch[data-tt-icon], html body:not(#tt) .scene-head .scene1-inline-open[data-tt-icon]{gap:0!important} @media (max-height:600px), (max-width:1000px){ html body:not(#tt) .scene-scene-nav button[data-tt-icon]::before{width:18px;height:18px;margin:0} } /* ================================================================== */ /* Meet Teemo, played ON the scene */ /* ================================================================== */ /* Not a pop-up over the app. scene1-lesson.js pins this layer to #canvas's box (--scene-*). Teemo is already standing in the picture, on the left, so the card takes the right and leaves him in view - for the questions and the speaking too, which are about him. */ html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene{position:fixed!important;inset:auto!important;left:var(--scene-l,0px)!important;top:var(--scene-t,0px)!important;width:var(--scene-w,100vw)!important;height:var(--scene-h,100vh)!important;padding:0!important;background:none!important;display:block!important;pointer-events:none} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]{position:absolute!important;top:3%!important;right:2%!important;bottom:3%!important;left:auto!important;width:min(60%,720px)!important;height:auto!important;max-height:none!important;margin:0!important;padding:14px 22px!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;pointer-events:auto;background:rgba(255,253,247,.93)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(10,20,50,.28)!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]>h2{margin:0 0 6px!important;font-size:24px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-lesson-main{flex:1 1 auto!important;min-height:0!important;height:auto!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story{width:100%!important;height:100%!important;justify-content:center!important;gap:0!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-help{margin:10px 0 14px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>.is-question .scene1-lesson-main{display:none!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>.is-question>.scene1-question{flex:1 1 auto!important;justify-content:safe center!important;min-height:0!important;margin:0!important;padding:0 0 4px!important;border:0!important;overflow-x:hidden!important;overflow-y:auto!important} /* The speaking step: once the answer is right, the options and Answer button have done their job and go. One centred column - the drop's two-column grid kept an empty "What I heard" column, which is what pushed everything left. Hear and Next are round icons the size of each other, so the microphone sits dead centre between them. */ html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-question:has([data-tt-role="practice"]) :is([data-tt-role="options"],[data-tt-role="answer"],.scene1-feedback){display:none!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-question>h3{margin:0 0 8px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"]{width:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:12px 14px!important;box-sizing:border-box!important;overflow:visible!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-grid"]{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-main"]{align-items:center!important;text-align:center!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-grid"] [data-tt-role="speech-review"]{display:block!important;visibility:visible!important;min-height:0!important;max-height:none!important;margin:0!important;padding:6px 0 0!important;border:0!important;border-top:1px dashed #c9d8f5!important;text-align:center!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-grid"] [data-tt-role="speech-review"][hidden]{display:none!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]{display:flex!important;justify-content:center!important;align-items:flex-start!important;gap:20px!important;margin:8px 0 0!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]>:is([data-tt-role="hear-button"],[data-tt-role="step-nav"]){flex:0 0 auto!important;width:48px!important;height:48px!important;min-height:0!important;margin-top:calc((var(--tt-mic-size,66px) - 48px) / 2)!important;padding:0!important;border-radius:50%!important;justify-content:center!important;font-size:0!important;gap:0!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]>:is([data-tt-role="hear-button"],[data-tt-role="step-nav"])[data-tt-icon]::before{width:24px;height:24px;margin:0} @media (max-height:600px), (max-width:1000px){ html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"]{padding:8px 10px!important;--tt-mic-size:54px} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-question>h3{margin:0 0 4px!important;font-size:17px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]{gap:14px!important;margin-top:4px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-actions"]>:is([data-tt-role="hear-button"],[data-tt-role="step-nav"]){width:42px!important;height:42px!important;margin-top:calc((var(--tt-mic-size,54px) - 42px) / 2)!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice-status"]{margin-top:4px!important;font-size:13px!important} } @media (max-height:600px), (max-width:1000px){ html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]{top:2.5%!important;bottom:2.5%!important;right:1.5%!important;width:63%!important;padding:6px 12px 8px!important;border-radius:16px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene>[data-tt-role="lesson-card"]>h2{margin:0 0 2px!important;font-size:17px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="close-button"]{width:32px!important;height:32px!important;top:4px!important;right:6px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story-text{font-size:clamp(14px,4.6vh,19px)!important;line-height:1.35!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-help{margin:4px 0 6px!important;font-size:12px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene :is(.scene1-story-toggle,.scene1-replay){width:40px!important;height:40px!important} html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene .scene1-story-controls>[data-tt-role="step-nav"]{padding:9px 14px!important;font-size:14px!important} } /* ================================================================== */ /* Show only what the current step uses */ /* ================================================================== */ /* The players are 7-11 and do not read English yet, so every button on screen is one more thing to puzzle over, and on a phone it costs room the scene needs. teemo-mobile.js sets html[data-tt-phase]: lesson a story/question card is up -> the scene and the card, nothing else find "find the X and drag it" -> + the item categories and tray say "What can you see?" - speaking -> the items are already in the scene pack dragging onto the backpack -> the items are already in the scene done the scene's work is finished -> + the way on: a big Next arrow (none) title card, a scene not started -> the scene, its start button, Next The drop's scene-builder tools (Selected Item, Story View, Reset, the title) are used by no lesson and are hidden at every step. The menu keeps Story View, Clear, music, scene navigation and full screen for when they are wanted. Add ?dev to the URL to get the whole builder back. */ html:not(.tt-dev) body:not(#tt) .app>.top, html:not(.tt-dev) body:not(#tt) .app>.body>.panel.right, html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>span:first-child, html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>.blank-slot, html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>.fullscreen, html:not(.tt-dev) body:not(#tt) .panel.left>.item-categories-heading, html:not(.tt-dev) body:not(#tt) .panel.left>.tip, html:not(.tt-dev) body:not(#tt) .panel.left>.scene-volume-control, html:not(.tt-dev) body:not(#tt) .panel.left>.navitem.category-disabled, html:not(.tt-dev) body:not(#tt) #canvas>.scene-footer, /* "Drop assets here to build your English story" */ html:not(.tt-dev) body:not(#tt) .scene-scene-nav button:first-child{display:none!important} html.tt-dev body:not(#tt) .workspace>.scene-head>.tt-menu-btn{order:9;flex:0 0 auto;display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;height:34px;margin-left:auto;padding:0;box-sizing:border-box;border:0;border-radius:10px;background:#eef3fb;cursor:pointer} html.tt-dev body:not(#tt) .workspace>.scene-head>.tt-menu-btn span{display:block;width:17px;height:2.5px;border-radius:2px;background:#1c2b5a} /* No menu for players, and no top bar unless something is in it. On a phone the task bar lives in that row while a task is running (or cheering its end); at every other step, and always on a big screen, the scene has the room. The task bar's own skip (a testing shortcut) and minimise buttons go too: the instruction is the step. */ html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>.tt-menu-btn, html:not(.tt-dev) body:not(#tt) .scene1-inline-skip, html:not(.tt-dev) body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="collapse-button"]{display:none!important} /* Collapsed, not display:none - Next and a scene's start button live in it and float out onto the scene (below), and a hidden parent would hide them too. */ html:not(.tt-dev) body:not(#tt) .workspace>.scene-head{height:0!important;min-height:0!important;max-height:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important} html:not(.tt-dev) body:not(#tt) .workspace>.scene-head>*:not(.scene-scene-nav):not(.scene1-activity-launch){display:none!important} @media (max-height:600px), (max-width:1000px){ html:is([data-tt-phase="find"],[data-tt-phase="say"],[data-tt-phase="pack"],[data-tt-phase="done"]):not(.tt-dev) body:not(#tt) .workspace>.scene-head{height:44px!important;min-height:44px!important;max-height:44px!important} html:not(.tt-dev) body:not(#tt) [data-tt-role="task-panel"]{width:var(--tt-head-w,300px)!important} html:not([data-tt-phase="find"]):not([data-tt-phase="say"]):not([data-tt-phase="pack"]):not([data-tt-phase="done"]):not(.tt-dev) body:not(#tt) .workspace{grid-template-rows:minmax(0,1fr)!important} html:not([data-tt-phase="find"]):not([data-tt-phase="say"]):not([data-tt-phase="pack"]):not([data-tt-phase="done"]):not(.tt-dev) body:not(#tt) .workspace>.scene-stage-wrap{grid-row:1 / -1!important} } /* The logo, on the scene's top-left corner (teemo-mobile.js places it). */ html>.tt-logo{position:fixed;z-index:40;left:calc(var(--tt-stage-l,0px) + 10px);top:calc(var(--tt-stage-t,0px) + 8px);width:clamp(64px,calc(var(--tt-stage-w,600px) * .11),150px);height:auto;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(20,30,70,.3))} html:not(.tt-show-logo)>.tt-logo,html.tt-dev>.tt-logo{display:none} /* the top bar's buttons hide themselves with [hidden]; only the phone layout honoured it */ html body:not(#tt) .scene-head [hidden]{display:none!important} /* once a lesson has started, its start button is not the step (the menu keeps it), and neither is changing scene until the scene is done */ html[data-tt-phase]:not([data-tt-phase=""]):not(.tt-dev) body:not(#tt) .scene1-activity-launch, html[data-tt-phase]:not([data-tt-phase=""]):not([data-tt-phase="done"]):not(.tt-dev) body:not(#tt) .scene-scene-nav{display:none!important} /* Next, whenever it is on offer (a finished scene), is a big arrow in the middle of the scene: the scene is over, and this is the only thing to do. Tucked in a corner, it went unnoticed. */ html:not(.tt-dev) body:not(#tt) .scene-scene-nav{position:fixed!important;inset:auto!important;left:calc(var(--tt-stage-l,0px) + var(--tt-stage-w,0px) / 2)!important;top:calc(var(--tt-stage-t,0px) + var(--tt-stage-h,0px) / 2)!important;translate:-50% -50%;z-index:60!important;margin:0!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important} html:not(.tt-dev) body:not(#tt) .scene-scene-nav button:last-child{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:clamp(84px,24vh,140px)!important;height:clamp(84px,24vh,140px)!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:linear-gradient(#ffd75b,#f5b82e)!important;box-shadow:0 4px 0 #c98f12,0 8px 20px rgba(20,30,70,.3)!important;color:#3b2a00!important;font-size:0!important;animation:tt-next-nudge 1.6s ease-in-out infinite} html:not(.tt-dev) body:not(#tt) .scene-scene-nav button:last-child::before{width:48%!important;height:48%!important;margin:0!important;color:#3b2a00} /* a scene's start button (scene 2's "Cusco Activities"), before it starts */ html:not(.tt-dev) body:not(#tt) .scene-head>.scene1-activity-launch{position:fixed!important;z-index:60!important;left:calc(var(--tt-stage-l,0px) + 14px)!important;top:calc(var(--tt-stage-t,0px) + var(--tt-stage-h,0px) - 62px)!important;height:48px!important;max-height:none!important;padding:0 20px!important;font-size:17px!important;box-shadow:0 4px 0 #1447ad,0 8px 20px rgba(20,30,70,.3)!important} @keyframes tt-next-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}} @media (prefers-reduced-motion:reduce){html[data-tt-phase="done"] body .scene-scene-nav button:last-child{animation:none!important}} /* The item categories and the item tray are only for finding an item; no other step - the title card, a lesson, packing, a finished scene, scene 2's own activities - uses them. */ html:not([data-tt-phase="find"]):not(.tt-dev) body:not(#tt) .app>.body>.panel.left, html:not([data-tt-phase="find"]):not(.tt-dev) body:not(#tt) .workspace>.assets, html:not(.tt-dev) body:not(#tt) .scene1-activity-launch:disabled{display:none!important} html:not([data-tt-phase="find"]):not(.tt-dev) body:not(#tt) .app>.body{grid-template-columns:minmax(0,1fr)!important} @media (min-height:601px) and (min-width:1001px){ html[data-tt-phase="find"]:not(.tt-dev) body:not(#tt) .app>.body{grid-template-columns:clamp(150px,15vw,200px) minmax(0,1fr)!important} html[data-tt-phase="find"]:not(.tt-dev) body:not(#tt) .workspace{grid-template-rows:auto minmax(0,1fr) auto!important} /* the task bar sits on the scene here, so it starts right of the logo */ html.tt-show-logo:not(.tt-dev) body:not(#tt) [data-tt-role="task-panel"]{left:calc(clamp(64px,11%,150px) + 22px)!important;right:24px!important;width:auto!important;margin:0!important;transform:none!important} html:not([data-tt-phase="find"]):not(.tt-dev) body:not(#tt) .workspace{grid-template-rows:auto minmax(0,1fr)!important} } @media (max-height:600px), (max-width:1000px){ html:not([data-tt-phase="find"]):not(.tt-dev) body:not(#tt) .workspace{grid-template-columns:minmax(0,1fr)!important} } /* No music (teemo-mobile.js keeps it off), so no music switch either. */ html body:not(#tt) #openingScreen .opening-music-toggle, html body:not(#tt) .scene-music-toggle{display:none!important} html>.tt-menu button[data-act="music"]{display:none!important} /* the item ribbon can be grabbed and swiped with a mouse */ html body:not(#tt) #assetGrid .asset{cursor:grab;-webkit-user-select:none;user-select:none} html body:not(#tt) #assetGrid img{-webkit-user-drag:none;user-drag:none} html.tt-ribbon-grab,html.tt-ribbon-grab *{cursor:grabbing!important} /* ================================================================== */ /* "What can you see?" - the task bar's speaking step */ /* ================================================================== */ /* One sentence to say, as the biggest thing in the bar, under "Now say:" - the same wording as the lesson's speaking step - then the same pair of controls: a speaker to hear it, and the hold-to-talk microphone. */ html body:not(#tt) [data-tt-role="inline-card"]:has(.scene1-say-sentence){display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:center!important;gap:4px 22px!important;height:auto!important;max-height:none!important;overflow:visible!important} html body:not(#tt) .scene1-inline-cards .scene1-say-sentence{order:1;flex:1 1 100%!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;white-space:normal!important;text-align:center!important;text-shadow:none!important} html body:not(#tt) .scene1-say-label{font:800 15px/1.2 "Nunito",Arial,sans-serif;color:#24356f} html body:not(#tt) .scene1-say-words{font:900 28px/1.15 "Nunito",Arial,sans-serif;color:#70421f} /* the words are spans so a wrong one can be marked - but they read as a plain sentence */ html body:not(#tt) .scene1-say-words .scene1-speech-word{display:inline!important;margin:0!important;padding:0 .08em!important;border:0!important;border-radius:6px!important;background:none!important;font:inherit!important;color:inherit!important} html body:not(#tt) .scene1-say-words .scene1-speech-word:is(.speech-missing,.speech-incorrect){color:#b32626!important;background:#ffe0e0!important;text-decoration:underline wavy #d84f4f!important} html body:not(#tt) .scene1-inline-cards .scene1-speak-status .scene1-heard-word{padding:0 .1em;border-radius:5px} html body:not(#tt) .scene1-say-verdict{color:#b32626;white-space:nowrap} html body:not(#tt) .scene1-say-verdict.is-good{color:#23743b} html body:not(#tt) .scene1-inline-cards [data-tt-role="hear-button"]{order:2;flex:0 0 auto!important;width:48px!important;height:48px!important;min-height:0!important;margin-top:calc((var(--tt-mic-size,66px) - 48px) / 2)!important;padding:0!important;border-radius:50%!important;justify-content:center!important;font-size:0!important;gap:0!important} html body:not(#tt) .scene1-inline-cards [data-tt-role="hear-button"][data-tt-icon]::before{width:24px;height:24px;margin:0} html body:not(#tt) .scene1-inline-cards [data-tt-role="speak-button"]{order:3} html body:not(#tt) .scene1-inline-cards .scene1-speak-status{order:4;flex:1 1 100%!important;width:auto!important;min-width:0!important;max-width:none!important;min-height:0!important;margin:0!important;font:800 15px/1.2 "Nunito",Arial,sans-serif!important;white-space:normal!important;text-align:center!important;color:#52668e!important;text-shadow:none!important} /* a big screen has the width for one row, so the bar stays short and Teemo stays in view */ @media (min-height:601px) and (min-width:1001px){ html body:not(#tt) [data-tt-role="inline-card"]:has(.scene1-say-sentence){flex-wrap:nowrap!important;align-items:center!important;gap:18px!important} html body:not(#tt) .scene1-inline-cards .scene1-say-sentence{flex:0 0 auto!important;align-items:flex-start!important;text-align:left!important;white-space:nowrap!important} html body:not(#tt) .scene1-inline-cards [data-tt-role="speak-button"]{flex-direction:row!important;gap:10px!important} html body:not(#tt) .scene1-inline-cards [data-tt-role="hear-button"]{margin-top:0!important} html body:not(#tt) .scene1-inline-cards .scene1-speak-status{flex:0 1 300px!important;text-align:left!important;display:block!important;line-height:1.3!important} html body:not(#tt) .scene1-inline-cards .scene1-speak-status .scene1-review-label{white-space:nowrap} html body:not(#tt) .scene1-inline-cards .scene1-speak-status .scene1-say-verdict{display:block} /* here the label sits beside the microphone, where the level bars were drawn over it: show the level as a ring around the microphone instead */ html body:not(#tt) .scene1-inline-cards .tt-voicebars{display:none!important} html.tt-listening body:not(#tt) .scene1-inline-cards .tt-say-active::before{animation:none!important;box-shadow:0 4px 0 #a52a2e,0 0 0 calc(3px + var(--tt-level,0) * 16px) rgba(224,71,76,.3)!important} } @media (max-height:600px), (max-width:1000px){ html body:not(#tt) .scene1-say-label{font-size:13px} html body:not(#tt) .scene1-say-words{font-size:22px} html body:not(#tt) .scene1-inline-cards [data-tt-role="hear-button"]{width:42px!important;height:42px!important;margin-top:calc((var(--tt-mic-size,56px) - 42px) / 2)!important} html body:not(#tt) .scene1-inline-cards .scene1-speak-status{font-size:13px!important} } /* ================================================================== */ /* Packing: make it smaller (scene1-lesson.js places it on the item) */ /* ================================================================== */ html body:not(#tt) .scene1-sizer{position:absolute;z-index:30;transform:translateX(-50%);display:flex;gap:10px;padding:5px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(20,30,70,.25)} html body:not(#tt) .scene1-sizer[hidden]{display:none} html body:not(#tt) .scene1-sizer button{all:unset;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent} html body:not(#tt) .scene1-sizer button::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:var(--tt-icon) center/contain no-repeat;mask:var(--tt-icon) center/contain no-repeat} html body:not(#tt) .scene1-sizer-smaller{--tt-icon:var(--tt-m-minus);background:linear-gradient(#ffd75b,#f5b82e);color:#3b2a00;box-shadow:0 3px 0 #c98f12} html body:not(#tt) .scene1-sizer-bigger{--tt-icon:var(--tt-m-plus);background:#e8f0ff;color:#1d55c2;box-shadow:0 3px 0 #c9d8f5} html body:not(#tt) .scene1-sizer button:active{transform:translateY(2px)} html body:not(#tt) .scene1-sizer button:focus-visible{outline:3px solid #2166e8;outline-offset:2px} /* small enough: the - has done its job */ html body:not(#tt) .scene1-sizer.fits .scene1-sizer-smaller{background:#e3f5e8;color:#23743b;box-shadow:0 3px 0 #b8e8c4} html body:not(#tt) .scene1-sizer.hint .scene1-sizer-smaller{animation:tt-sizer-hint .7s ease-in-out 3} @keyframes tt-sizer-hint{0%,100%{transform:scale(1);box-shadow:0 3px 0 #c98f12,0 0 0 0 rgba(255,211,79,.8)}50%{transform:scale(1.18);box-shadow:0 3px 0 #c98f12,0 0 0 10px rgba(255,211,79,0)}} @media (prefers-reduced-motion:reduce){html body .scene1-sizer.hint .scene1-sizer-smaller{animation:none}} /* The builder's item toolbar (rotate, flip, delete...) has no job in a lesson, and deleting a lesson item leaves the child stuck. */ html[data-tt-phase]:not([data-tt-phase=""]):not(.tt-dev)>.tt-itembar{display:none!important} /* "The Passport is too big! Make it smaller" must be readable in the phone's task bar: two short lines instead of one cut off. */ @media (max-height:600px), (max-width:1000px){ html body:not(#tt) [data-tt-role="task-panel"]>[data-tt-role="practice-status"]{white-space:normal!important;max-width:11em!important;font-size:13px!important;line-height:1.1!important;text-align:right!important} }