/* * Teemo Travels — mobile & tablet layer. * * Injected LAST by scripts/build-mobile-release.py. The game HTML is a stack of * !important patches, so every selector here is prefixed with `html body` (and * mirrors the patch selector it overrides) to win on specificity rather than on * load order. * * compact = phones in landscape, small tablets (height <= 600 or width <= 1000) * large = iPads, laptops, desktops (width > 1000 and height > 600) * fixes v88's scene sliding under the right panel at every width */ /* ------------------------------------------------------------------ */ /* 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} html body .workspace>.assets:not(.expanded)>.asset-grid{touch-action:pan-x} html body .workspace>.assets.expanded>.asset-grid{touch-action:pan-y} @media (pointer:coarse){ /* Swipe the item strip instead of relying on the tiny arrows. */ html body .workspace>.assets:not(.expanded)>.asset-grid{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} html body .workspace>.assets:not(.expanded)>.asset-grid::-webkit-scrollbar{display:none} html body .workspace>.assets:not(.expanded)>.asset-grid>.asset{scroll-snap-align:start} html body .panel.right input[type=range]{height:26px} } /* While a finger drag is active, stop the strip from scrolling under the finger. */ html.tt-dragging body #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 (compact only) */ html body .tt-menu-btn{display:none} html>.tt-menu{position:fixed;z-index:2147483500;min-width:200px;display:flex;flex-direction:column;gap:5px;padding:6px;box-sizing:border-box;background:#fffdf5;border:3px solid #70421f;border-radius:12px;box-shadow:0 10px 28px rgba(20,30,60,.35);font:800 14px/1.1 Arial,sans-serif;color:#24356f} html>.tt-menu[hidden]{display:none} html>.tt-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:8px;background:#fff3bf;color:#24356f;cursor:pointer} html>.tt-menu button[hidden]{display:none} html>.tt-menu button:active{filter:brightness(.93)} html>.tt-menu .tt-menu-volume{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px} html>.tt-menu .tt-menu-volume input{flex:1;min-width:0;height:28px;accent-color:#416fae} /* ================================================================== */ /* TABLET */ /* ================================================================== */ /* Applies to every non-compact screen: in v88 the scene slides under the right panel at 1440, 1536 and even 1920 wide (three fixed columns + a 520px minimum centre). */ @media (min-height:601px) and (min-width:1001px){ html body .app{height:100vh!important;height:100dvh!important;min-height:0!important} html body .top{height:58px!important;min-height:58px!important;padding:6px 14px!important} html body .top .owl,html body .top .owl img{max-height:46px!important} html body .header-title h1{font-size:20px!important} html body .actions .btn{height:36px!important} html body .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 .panel.left>.navitem{flex:0 0 76px!important;height:76px!important;min-height:76px!important;font-size:12.5px!important} html body .panel.right{overflow-x:hidden!important;overflow-y:auto!important;padding-bottom:10px!important} html body .workspace>.scene-head,html body .workspace>.assets{width:100%!important} html body .scene-scene-nav{position:static!important;transform:none!important;margin-left:auto!important} html body .scene-head .scene1-activity-launch{order:1} html body .scene-head .scene1-inline-open{order:2} html body .scene-scene-nav{order:8} /* in-scene activity bar: let it size to its content instead of fixed desktop slots */ html body .scene1-inline-task{height:auto!important;min-height:0!important;max-height:40%!important;padding:6px 12px!important;gap:6px 10px!important;flex-wrap:wrap!important} html body .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:19px!important} html body .scene1-inline-target-icon{width:40px!important;height:34px!important} html body .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 .scene1-inline-status:empty,html body .scene1-inline-cards:empty{display:none!important} html body .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} html body .scene1-inline-cards .scene1-say-sentence{width:auto!important;min-width:0!important;max-width:none!important;font-size:18px!important} html body .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 #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 #openingScreen .opening-music-toggle{top:max(8px,env(safe-area-inset-top))!important;left:max(10px,env(safe-area-inset-left))!important;padding:6px 10px!important;font:800 12px/1.1 Arial,sans-serif!important} /* ---- Adventure chooser ---- */ html body .adventure-chooser .create-character-step, html body .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 .adventure-chooser .create-character-step:active{width:24%!important;height:auto!important;transform:translateX(-50%) translateY(2px)!important} /* ---- App frame: drop the header, keep the scene as big as possible ---- */ html body .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} html body .app>.top{display:none!important} html body .app>.body{grid-template-columns:clamp(56px,8vw,74px) minmax(0,1fr) clamp(150px,21vw,210px)!important;grid-template-rows:minmax(0,1fr)!important;gap:4px!important;padding:4px!important;min-height:0!important} html body .app>.body>.panel{border-radius:8px!important;min-height:0!important} /* ---- Left: category icons only ---- */ html body .panel.left{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-content:stretch!important;gap:4px!important;padding:4px 3px!important;overflow-x:hidden!important;overflow-y:auto!important} html body .panel.left>.item-categories-heading, html body .panel.left>.tip, html body .panel.left>.scene-volume-control, html body .panel.left>.navitem.category-disabled{display:none!important} html body .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:5px 2px!important;gap:2px!important;border-radius:8px!important;font-size:9.5px!important;font-weight:700!important;line-height:1.05!important;text-align:center!important;white-space:normal!important} html body .panel.left .navitem .category-visual-thumb{width:42px!important;height:34px!important} html body .panel.left>.navitem.category-thumbnail-render-lock::before{width:42px!important;height:34px!important} html body .panel.left .navitem span{font-size:24px!important} /* ---- Centre column ---- */ html body .workspace{display:grid!important;grid-template-rows:32px minmax(0,1fr) 72px!important;gap:4px!important;min-height:0!important} html body .workspace>.scene-head, html body .workspace>.assets{width:100%!important;max-width:100%!important} html body .scene-footer{display:none!important} /* scene head: [Meet Teemo] [English Activity] ........ [◀][▶] [≡] */ html body .workspace>.scene-head{height:32px!important;min-height:32px!important;max-height:32px!important;padding:0 4px!important;gap:4px!important;font-size:0!important;overflow:hidden!important;border-radius:8px!important} html body .workspace>.scene-head>span:first-child{display:none!important} html body .scene-head .scene1-activity-launch, html body .scene-head .scene1-inline-open{order:1;flex:0 0 auto;height:26px!important;min-height:26px!important;max-height:26px!important;margin:0!important;padding:0 8px!important;border-radius:7px!important;font:800 11.5px/1 Arial,sans-serif!important} html body .scene-head .scene1-inline-open{order:2} html body .scene-head [hidden]{display:none!important} html body .scene-scene-nav{order:8;position:static!important;transform:none!important;margin-left:auto!important;gap:4px!important} html body .scene-scene-nav button{width:42px!important;height:26px!important;min-height:26px!important;padding:0!important;font-size:0!important;line-height:1!important} html body .scene-scene-nav button:first-child::before{content:"◀";font-size:13px} html body .scene-scene-nav button:last-child::before{content:"▶";font-size:13px} html body .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:3px;width:34px;height:26px;padding:0;box-sizing:border-box;border:2px solid #164e96;border-radius:7px;background:#fff;cursor:pointer} html body .workspace>.scene-head>.tt-menu-btn span{display:block;width:14px;height:2px;border-radius:2px;background:#164e96} /* scene art */ html body #canvas{border-radius:6px!important} html body #canvas>.story-build-lock button{width:min(496px,56%)!important;height:auto!important;aspect-ratio:496/124} html body .scene-text-item{font-size:14px!important;padding:4px 8px!important} html body .scene-text-item textarea{width:130px!important;min-height:40px!important} html body .scene1-wrong-drop{width:72px!important;height:72px!important;border-width:8px!important;font:900 72px/52px Arial,sans-serif!important} /* in-scene activity bar */ html body .scene1-inline-task{top:1.5%!important;left:1.5%!important;right:1.5%!important;inset-inline:1.5%!important;height:auto!important;min-height:0!important;max-height:52%!important;padding:4px 6px!important;gap:3px 6px!important;flex-wrap:wrap!important;align-content:center!important;border-width:2px!important;border-radius:9px!important;overflow:hidden!important} html body .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;gap:5px!important;font-size:13px!important;line-height:1.12!important} html body .scene1-inline-target-icon{width:28px!important;height:24px!important} html body .scene1-inline-replay{min-height:26px;padding:2px 6px!important;font-size:13px!important} html body .scene1-inline-skip{flex:0 0 28px!important;width:28px!important;height:28px!important;font-size:16px!important;border-radius:7px!important} html body .scene1-inline-close{min-height:26px;padding:0 7px!important;font-size:17px!important} html body .scene1-inline-status{flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:9em!important;min-height:0!important;margin-left:0!important;font-size:11px!important;white-space:normal!important} html body .scene1-inline-status:empty{display:none!important} html body .scene1-inline-cards{order:10;flex:1 1 100%!important;height:auto!important;min-height:0!important;max-height:none!important;gap:4px 6px!important;flex-wrap:wrap!important;justify-content:center!important} html body .scene1-inline-cards:empty{display:none!important} html body .scene1-inline-cards .scene1-say-sentence{width:auto!important;min-width:0!important;max-width:none!important;font-size:13px!important} html body .scene1-inline-cards .scene1-speak-button, html body .scene1-inline-cards .scene1-hear-sentence{min-height:30px!important;padding:3px 9px!important;font-size:12px!important} html body .scene1-inline-cards .scene1-speak-status{flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:12em!important;min-height:0!important;font-size:12px!important} html body .scene1-inline-complete{padding:2px!important;font-size:13px!important} /* ---- Item strip ---- */ html body .workspace>.assets:not(.expanded), html body .workspace>.assets.expanded{height:72px!important;min-height:72px!important;max-height:72px!important;grid-template-columns:58px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;padding:3px 4px!important;border-radius:8px!important} html body .workspace>.assets:not(.expanded)>.asset-head, html body .workspace>.assets.expanded>.asset-head{grid-column:1!important;grid-row:1!important;height:100%!important;grid-template-rows:minmax(0,1fr) 24px!important;gap:2px!important;padding:0 2px!important} /* the <=760px patches stack head over grid; put them side by side again */ html body .workspace>.assets:not(.expanded)>.asset-grid{grid-column:2!important;grid-row:1!important} html body .workspace>.assets:not(.expanded)>.asset-head>.asset-head-category, html body .workspace>.assets.expanded>.asset-head>.asset-head-category{grid-row:1!important;gap:0!important;font-size:0!important} html body .workspace>.assets:not(.expanded)>.asset-head>.asset-head-category>span, html body .workspace>.assets.expanded>.asset-head>.asset-head-category>span{font-size:22px!important} html body .workspace>.assets:not(.expanded)>.asset-head>.count, html body .workspace>.assets.expanded>.asset-head>.count{display:none!important} html body .workspace>.assets:not(.expanded)>.asset-head>.asset-expand-toggle, html body .workspace>.assets.expanded>.asset-head>.asset-expand-toggle{grid-row:2!important;width:100%!important;height:24px!important;margin:0!important;padding:0!important;font-size:0!important} html body .workspace>.assets>.asset-head>.asset-expand-toggle::after{content:"▲ All";font:800 10.5px/1 Arial,sans-serif} html body .workspace>.assets.expanded>.asset-head>.asset-expand-toggle::after{content:"▼ Close"} html body .workspace>.assets:not(.expanded)>.asset-grid{padding:0 26px!important;gap:5px!important} html body .workspace>.assets:not(.expanded)>.asset-grid>.asset{flex:0 0 66px!important;width:66px!important;min-width:66px!important;padding:3px!important;border-radius:7px!important} html body .workspace>.assets:not(.expanded)>.asset-grid.category-prompt::before{content:"◀ Pick a category";margin:auto;color:#6079a6;font:800 13px/1 Arial,sans-serif} html body .workspace>.assets:not(.expanded)>.carousel-arrow.left{left:62px!important} html body .workspace>.assets:not(.expanded)>.carousel-arrow.left, html body .workspace>.assets:not(.expanded)>.carousel-arrow-next{width:22px!important;min-width:22px!important;height:40px!important;line-height:36px!important;font-size:18px!important} /* "All" overlay */ html body .assets.expanded .asset-grid{left:4px!important;right:4px!important;padding:6px!important;gap:6px!important} html body .assets.expanded:not(.background-carousel) .asset-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))!important;max-height:calc(100dvh - 110px)!important} html body .assets.expanded:not(.background-carousel) .asset{height:84px!important;min-height:84px!important} html body .assets.expanded:not(.background-carousel) .asset .pic{height:74px!important;max-height:74px!important;font-size:46px!important} html body .assets.expanded:not(.background-carousel) .asset .pic img{max-height:74px!important} /* ---- Right: item controls, scrollable ---- */ html body .panel.right{display:flex!important;flex-direction:column!important;gap:4px!important;padding:5px!important;overflow-x:hidden!important;overflow-y:auto!important} html body .panel.right>h3, html body .panel.right #selectedName{display:none!important} html body .panel.right #selected{order:1;flex:0 0 46px!important;height:46px!important;margin:0!important;font-size:26px!important} html body .panel.right #selected img{max-height:42px!important} html body .panel.right>.control{order:2;flex:0 0 auto;margin:0!important;min-height:0!important} html body .panel.right>.control[data-rotation-wheel]{order:3} html body .panel.right>.control label{margin-bottom:2px!important;font-size:11px!important} html body .rotation-wheel{width:min(84px,62%)!important;margin:2px auto 0!important} html body .rotation-wheel-help{display:none!important} html body .panel.right>.flip-new{order:4;flex:0 0 30px;height:30px!important;margin:0!important;padding:0 4px!important;font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body .panel.right>.layer-controls-new{order:5;margin:0!important;gap:4px!important} html body .panel.right>.layer-controls-new button{height:30px!important;padding:0 2px!important;gap:3px!important;font-size:11px!important} html body .panel.right>.delete-new{order:6;flex:0 0 32px;height:32px!important;margin:2px 0 0!important;font-size:12px!important} html body .panel.right>#sceneItemBrowser{order:7;flex:0 0 auto;margin:4px 0 0!important;padding:5px!important} html body #sceneItemBrowser.scene-item-browser-grid-layout .scene-item-browser-title{margin:0 0 4px!important;font-size:10px!important} html body #sceneItemBrowser.scene-item-browser-grid-layout .scene-item-browser-grid{grid-template-rows:repeat(3,38px)!important;min-height:0!important;gap:4px!important} html body #sceneItemBrowser.scene-item-browser-grid-layout .scene-item-browser-thumb{height:38px!important;min-height:38px!important;padding:2px!important} html body #sceneItemBrowser.scene-item-browser-grid-layout .scene-item-browser-footer{margin-top:4px!important} /* ---- Meet Teemo lesson ---- */ html body .scene1-lesson-modal{padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important} html body .scene1-lesson-card{width:100%!important;height:100%!important;max-height:none!important;padding:6px 12px!important;border-width:3px!important;border-radius:12px!important} html body .scene1-lesson-card h2{margin:0 0 2px!important;font-size:17px!important} html body .scene1-close{top:0!important;right:4px!important;padding:2px 8px!important;font-size:28px!important} html body .scene1-lesson-main{flex-direction:row!important;gap:12px!important} html body .scene1-teemo-wrap{flex:0 0 28%!important;width:auto!important;height:100%!important} html body .scene1-story{width:auto!important;height:100%!important;flex:1 1 auto!important} html body .scene1-story-text{font-size:clamp(13px,4.3vh,19px)!important;line-height:1.35!important} html body .scene1-help{margin:4px 0 6px!important;font-size:11px!important} html body .scene1-story-controls{gap:6px!important;margin:0 auto 6px!important} html body .scene1-story-controls button{padding:6px 10px!important;font-size:12px!important} html body .scene1-next{padding:7px 14px!important;font-size:13px!important} /* question mode: Teemo on the left, the question scrolls on the right */ html body .scene1-lesson-card.is-question{display:grid!important;grid-template-columns:24% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:12px} html body .scene1-lesson-card.is-question>h2{grid-column:1/-1} html body .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 .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 .scene1-lesson-card.is-question .scene1-story{display:none!important} html body .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 6px 12px!important;border-top:0!important;border-left:2px solid #ead9b4!important;overflow-x:hidden!important;overflow-y:auto!important} html body .scene1-lesson-card.is-question .scene1-question h3{margin:2px 0 6px!important;font-size:16px!important} html body .scene1-lesson-card.is-question .scene1-options{gap:6px!important} html body .scene1-lesson-card.is-question .scene1-options button{min-width:72px!important;min-height:36px;padding:6px 12px!important;font-size:14px!important} html body .scene1-lesson-card.is-question .scene1-answer{margin:6px auto 0!important;padding:7px 22px!important;font-size:14px!important} html body .scene1-lesson-card.is-question .scene1-feedback{min-height:16px!important;margin-top:3px!important;font-size:13px!important} html body .scene1-lesson-card.is-question>.scene1-question .scene1-practice{width:100%!important;max-height:none!important;margin:6px 0 0!important;padding:6px 8px!important;flex:0 0 auto} html body .scene1-practice-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important;gap:4px 8px!important} html body .scene1-lesson-card.is-question .scene1-practice-grid .scene1-practice-prompt{font-size:14px!important} html body .scene1-lesson-card.is-question .scene1-practice-grid .scene1-target-sentence{font-size:17px!important} html body .scene1-lesson-card.is-question .scene1-practice-actions{gap:5px!important;margin-top:5px!important} html body .scene1-lesson-card.is-question .scene1-practice-actions button{min-height:34px;padding:5px 9px!important;font-size:12px!important} html body .scene1-lesson-card.is-question .scene1-practice-status{min-height:20px!important;margin-top:4px!important;font-size:13px!important;white-space:normal!important} html body .scene1-practice-grid .scene1-speech-review{min-height:0!important;max-height:none!important;padding:4px 0 4px 8px!important} html body .scene1-lesson-card.is-question .scene1-practice-grid .scene1-speech-review, html body .scene1-lesson-card.is-question .scene1-practice-grid .scene1-speech-heard, html body .scene1-lesson-card.is-question .scene1-practice-grid .scene1-review-label, html body .scene1-lesson-card.is-question .scene1-practice-grid .scene1-heard-word{font-size:12.5px!important} html body .scene1-lesson-card.is-question .scene1-practice-grid .scene1-speech-detail{font-size:11px!important} html body .scene1-complete{margin:8px 0!important;font-size:18px!important} html body .scene1-finish{padding:9px 16px!important;font-size:14px!important} /* ---- Story View player ---- */ html body .story-player{padding:4px!important;padding-bottom:max(4px,env(safe-area-inset-bottom))!important} html body .story-player-stage{width:min(96vw,calc((100dvh - 56px) * 1.7768))!important;border-width:3px!important} html body .story-player-controls{gap:6px!important;margin-top:6px!important} html body .story-player button{padding:7px 10px!important;font-size:12px!important} }