/* * 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 .scene1-inline-task img, html body .scene1-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} /* ================================================================== */ /* Task: minimise instead of losing it */ /* ================================================================== */ html body:not(#tt) .tt-task-pill{display:none} html.tt-task-min body:not(#tt) .scene1-inline-task{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) .scene1-say, html body:not(#tt) .scene1-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) .scene1-say::before, html body:not(#tt) .scene1-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) .scene1-say::after, html body:not(#tt) .scene1-speak-button::after{content:"Tap & talk";font:900 14px/1.1 "Nunito","Segoe UI",Arial,sans-serif;color:#1c2b5a;white-space:nowrap} html body:not(#tt) .scene1-say:disabled::before, html body:not(#tt) .scene1-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) .scene1-say:disabled::after, html body:not(#tt) .scene1-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:"Listening… talk now!";color:#c0392b} html body:not(#tt) .scene1-speak-button.correct::before, html body:not(#tt) .scene1-practice.is-correct .scene1-say::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) .scene1-speak-button.correct::after, html body:not(#tt) .scene1-practice.is-correct .scene1-say::after{content:"Great!";color:#157a43} html body:not(#tt) .scene1-practice.is-incorrect .scene1-say:not(:disabled)::after{content:"Tap & 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) .scene1-hear, html body:not(#tt) .scene1-hear-sentence{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) .scene1-next-question{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) .scene1-next-question:disabled{opacity:.35!important;box-shadow:none!important;cursor:default!important} html body:not(#tt) .scene1-practice{border:0!important;border-radius:18px!important;background:#f3f7ff!important;box-shadow:none!important} html body:not(#tt) .scene1-practice.is-correct{background:#e8f8ee!important;box-shadow:none!important} html body:not(#tt) .scene1-practice.is-incorrect{background:#fff4f4!important;box-shadow:none!important} html body:not(#tt) .scene1-practice-actions{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:18px!important} html body:not(#tt) .scene1-practice-status{white-space:normal!important} /* ================================================================== */ /* Meet Teemo lesson: softer, rounder */ /* ================================================================== */ html body:not(#tt) .scene1-lesson-modal{background:rgba(16,32,70,.55)!important} html body:not(#tt) .scene1-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) .scene1-teemo-wrap>img{border-radius:16px} html body:not(#tt) .scene1-close{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} html body:not(#tt) .scene1-story-controls button{border:0!important;border-radius:999px!important;background:#fff1c9!important;color:#5a3b17!important;box-shadow:0 2px 0 #e8d3a0!important;font-weight:800!important} html body:not(#tt) .scene1-story-controls .scene1-story-toggle{background:#e8f0ff!important;color:#1d55c2!important;box-shadow:0 2px 0 #c9d8f5!important} html body:not(#tt) .scene1-next, html body:not(#tt) .scene1-finish, html body:not(#tt) .scene1-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) .scene1-answer:disabled{opacity:.4!important;box-shadow:none!important} html body:not(#tt) .scene1-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) .scene1-options button.chosen{border-color:#2166e8!important;background:#eaf1ff!important;box-shadow:0 2px 0 #9dbcf3!important} html body:not(#tt) .scene1-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) .scene1-inline-task{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) .scene1-inline-replay, html body:not(#tt) .scene1-inline-skip, html body:not(#tt) .scene1-inline-close{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) .scene1-inline-replay{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) .scene1-inline-close{background:#eef1f6!important;color:#6a7898!important;font-size:0!important} html body:not(#tt) .scene1-inline-task [hidden]{display:none!important} html body:not(#tt) .scene1-inline-status:empty{display:none!important} html body:not(#tt) .scene1-inline-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} html body:not(#tt) .scene1-inline-task{height:auto!important;min-height:0!important;max-height:45%!important;padding:6px 12px!important;gap:6px 10px!important;flex-wrap:wrap!important} html body:not(#tt) .scene1-inline-text{flex:1 1 55%!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;font-size:20px!important} html body:not(#tt) .scene1-inline-target-icon{width:40px!important;height:34px!important} html body:not(#tt) .scene1-inline-status{flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:10em!important;font-size:15px!important;margin-left:0!important} html body:not(#tt) .scene1-inline-cards{order:10;flex:1 1 100%!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) .scene1-inline-cards:empty{display:none!important} html body:not(#tt) .scene1-inline-cards .scene1-say-sentence{width:auto!important;min-width:0!important;max-width:none!important;font-size:22px!important;color:#1c2b5a!important} html body:not(#tt) .scene1-inline-cards .scene1-speak-status{flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:14em!important;font-size:15px!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) .scene1-inline-task{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) .scene1-inline-replay, html body:not(#tt) .scene1-inline-skip, html body:not(#tt) .scene1-inline-close{flex:0 0 34px!important;width:34px!important;height:34px!important} html body:not(#tt) .scene1-inline-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) .scene1-inline-replay{order:2} html body:not(#tt) .scene1-inline-skip{order:4} html body:not(#tt) .scene1-inline-close{order:5} /* the "say it" card and short messages float at the bottom of the picture */ html body:not(#tt) .scene1-inline-cards{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) .scene1-inline-cards:empty{display:none!important} html body:not(#tt) .scene1-inline-cards .scene1-say-sentence{width:auto!important;min-width:0!important;max-width:9em!important;margin:0!important;font:900 20px/1.15 "Nunito",Arial,sans-serif!important;color:#1c2b5a!important;text-shadow:none!important;text-align:center!important} html body:not(#tt) .scene1-inline-cards .scene1-speak-status{flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:8.5em!important;min-height:0!important;font:800 14px/1.15 "Nunito",Arial,sans-serif!important;white-space:normal!important;color:#52668e!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) .scene1-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) .scene1-lesson-card{width:100%!important;height:100%!important;max-height:none!important;padding:8px 14px!important} html body:not(#tt) .scene1-lesson-card h2{margin:0 0 4px!important;font-size:21px!important} html body:not(#tt) .scene1-close{top:6px!important;right:8px!important} html body:not(#tt) .scene1-lesson-main{flex-direction:row!important;gap:14px!important} html body:not(#tt) .scene1-teemo-wrap{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) .scene1-story-controls{gap:8px!important;margin:0 auto 8px!important} html body:not(#tt) .scene1-story-controls button{padding:8px 14px!important;font-size:15px!important} html body:not(#tt) .scene1-next{padding:10px 18px!important;font-size:16px!important} html body:not(#tt) .scene1-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) .scene1-lesson-card.is-question>h2{grid-column:1/-1} html body:not(#tt) .scene1-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) .scene1-lesson-card.is-question .scene1-teemo-wrap{flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-story{display:none!important} html body:not(#tt) .scene1-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) .scene1-lesson-card.is-question .scene1-question h3{margin:2px 0 8px!important;font-size:20px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-options{gap:8px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-options button{min-width:84px!important;min-height:42px;padding:7px 16px!important;font-size:17px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-answer{margin:8px auto 0!important;padding:9px 26px!important;font-size:17px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-feedback{min-height:18px!important;margin-top:4px!important;font-size:15px!important} html body:not(#tt) .scene1-lesson-card.is-question>.scene1-question .scene1-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) .scene1-practice-grid{grid-template-columns:minmax(0,1fr)!important;gap:4px!important} html body:not(#tt) .scene1-practice-main{min-width:0!important} html body:not(#tt) .scene1-practice-grid .scene1-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) .scene1-practice-grid .scene1-speech-review[hidden]{display:none!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-actions{flex-wrap:nowrap!important;gap:10px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-actions .scene1-hear{padding:8px 11px!important;font-size:14px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-actions .scene1-next-question{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(.scene1-practice) .scene1-answer, html body:not(#tt) .scene1-question:has(.scene1-practice) .scene1-options, html body:not(#tt) .scene1-question:has(.scene1-practice) .scene1-feedback{display:none!important} html body:not(#tt) .scene1-practice.is-incorrect .scene1-practice-status{display:none!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice{--tt-mic-size:58px} html body:not(#tt) .scene1-inline-cards{--tt-mic-size:56px} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-grid .scene1-practice-prompt{font-size:15px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-grid .scene1-target-sentence{font-size:23px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-actions{gap:14px!important;margin-top:8px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-status{min-height:20px!important;margin-top:6px!important;font-size:15px!important} html body:not(#tt) .scene1-practice-grid .scene1-speech-review{min-height:0!important;max-height:none!important;padding:4px 0 4px 10px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-grid .scene1-speech-review, html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-grid .scene1-speech-heard, html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-grid .scene1-review-label, html body:not(#tt) .scene1-lesson-card.is-question .scene1-practice-grid .scene1-heard-word{font-size:14px!important} html body:not(#tt) .scene1-lesson-card.is-question .scene1-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) .scene1-finish{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) .scene1-inline-replay[data-tt-icon]{color:#1d55c2!important} html body:not(#tt) .scene1-inline-close[data-tt-icon]{color:#6a7898!important} html body:not(#tt) .scene1-close[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} }