/* Teemo Travels — learning a new word (mobile/teemo-newword.js).
   The card is the lesson card (teemo-mobile.css styles it by role); this file
   places it in the middle of the scene and draws the routine's own parts.
   Sizes are shares of the scene (--su = 1% of its height). */

/* the word in the story: gold and tagged NEW until tapped (still: nothing
   moves on its own, DESIGN.md). Its 3px ring has 3px of room either side, or
   it painted over the "!" after the word on a phone (review, #14). */
html body:not(#tt) .tt-key.tt-new{position:relative;margin:0 3px;background:#ffe36e!important;border-radius:6px;box-shadow:0 0 0 3px #ffd03a;color:#24356f!important;text-decoration:none!important;cursor:pointer}
html body:not(#tt) .tt-key.tt-new::after{content:"NEW";position:absolute;left:50%;top:-1.25em;transform:translateX(-50%);padding:1px 6px;border-radius:999px;background:#f5841f;color:#fff;font:900 .5em/1.4 "Nunito",Arial,sans-serif;letter-spacing:.06em;pointer-events:none}

/* while a word is being learned, the lesson or story card behind it steps
   aside: half-covered words and buttons behind the word's card confuse */
html.tt-learning body:not(#tt) [data-tt-role="lesson-modal"]:not(.tt-learn)>[data-tt-role="lesson-card"]{visibility:hidden!important}

/* the card, centred on the scene; "mini" is a banner at the top while they act in the picture */
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-learn{--su:calc(var(--scene-h,600px) / 100);z-index:100002!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-learn.is-leaving{opacity:0;transition:opacity .3s}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-learn>[data-tt-role="lesson-card"].tt-learn-card{left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(56%,620px)!important;min-height:0!important;max-height:94%!important;padding:clamp(10px,calc(var(--su) * 3),22px) clamp(14px,calc(var(--su) * 4),30px)!important;align-items:center!important;text-align:center;gap:clamp(6px,calc(var(--su) * 2),14px);animation:tt-learn-in .35s cubic-bezier(.3,1.4,.5,1) both;overflow-y:auto!important}
html body:not(#tt) [data-tt-role="lesson-modal"].is-on-scene.tt-learn>[data-tt-role="lesson-card"].tt-learn-card.is-mini{top:3%!important;transform:translateX(-50%)!important;width:auto!important;max-width:80%!important;padding:8px 18px!important}
html body:not(#tt) .tt-learn-card.is-mini .tt-learn-head{display:none}
@keyframes tt-learn-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
.tt-learn-head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}
.tt-learn-tag{padding:3px 10px;border-radius:999px;background:#f5841f;color:#fff;font:900 clamp(11px,calc(var(--su) * 2.6),14px)/1.3 "Nunito",Arial,sans-serif;letter-spacing:.08em}
.tt-learn-dots{display:flex;gap:6px}
.tt-learn-dots i{width:10px;height:10px;border-radius:50%;background:#e2dccd}
.tt-learn-dots i.done{background:#2e9e44}
.tt-learn-dots i.now{background:#f5b82e;box-shadow:0 0 0 3px rgba(245,184,46,.35)}
.tt-learn-body{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,calc(var(--su) * 2.2),16px);width:100%}

/* 1 say it: the word in its parts */
.tt-learn-word{display:flex;align-items:baseline;justify-content:center;gap:.12em;font:900 clamp(34px,calc(var(--su) * 11),68px)/1.05 "Nunito",Arial,sans-serif;color:#24356f}
.tt-learn-part{padding:0 .08em;border-radius:10px;cursor:pointer;transition:background .15s,transform .15s}
.tt-learn-part.on{background:#ffe36e;transform:translateY(-4px)}
.tt-learn-dot{color:#9bb7df;font-weight:700}
.tt-learn-word.is-done{color:#1c8a4c}
/* the speaking row sits in the card here, not in the phone task bar it is placed in elsewhere (teemo-mobile.css centres it there with a translate) */
html body:not(#tt) .tt-learn-body>.tt-learn-say[data-tt-role="inline-card"]{position:static!important;left:auto!important;top:auto!important;transform:none!important;margin:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;border:0!important;width:auto!important;max-width:100%!important}

/* 2 meaning */
.tt-learn-means,.tt-learn-statement,.tt-learn-prompt,.tt-learn-example{margin:0;font:800 clamp(17px,calc(var(--su) * 5),28px)/1.35 "Nunito",Arial,sans-serif;color:#24356f}
.tt-learn-q{margin:0;font:900 clamp(15px,calc(var(--su) * 4),22px)/1.2 "Nunito",Arial,sans-serif;color:#24356f}
.tt-learn-example{padding:4px 10px;border-radius:10px;transition:background .2s}
.tt-learn-example.is-said{background:#fff3c4}
.tt-learn-stage{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,calc(var(--su) * 2.5),18px);width:100%}
.tt-learn-stage:empty{display:none}
html body:not(#tt) .tt-learn-pick{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:clamp(64px,calc(var(--su) * 18),120px);min-height:48px;padding:10px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 2px #e2dccd,0 2px 6px rgba(20,30,70,.18);font:900 clamp(17px,calc(var(--su) * 5),26px)/1.1 "Nunito",Arial,sans-serif;color:#24356f;cursor:pointer;touch-action:manipulation;transition:transform .12s,box-shadow .2s,opacity .2s}
html body:not(#tt) .tt-learn-pick:active{transform:scale(.96);box-shadow:0 0 0 2px #e2dccd,0 2px 6px rgba(20,30,70,.18)}
html body:not(#tt) .tt-learn-pick:focus-visible{outline:3px solid #2166e8;outline-offset:3px}
html body:not(#tt) .tt-learn-pick.is-said{box-shadow:0 0 0 4px #ffd03a,0 2px 6px rgba(20,30,70,.18)}
html body:not(#tt) .tt-learn-pick.is-right{box-shadow:0 0 0 4px #2e9e44,0 2px 6px rgba(20,30,70,.18)!important;background:#e9f8ec}
html body:not(#tt) .tt-learn-pick.is-wrong{opacity:.4;animation:tt-shake .45s ease-in-out}
.tt-learn-pick img{display:block;width:clamp(110px,calc(var(--su) * 30),220px);aspect-ratio:16/10;object-fit:cover;border-radius:10px}
.tt-learn-pick span[hidden]{display:none}

/* object / verb: the place in the picture */
html body:not(#tt) :is(.tt-learn,.tt-story)>.tt-learn-target{all:unset;position:absolute;box-sizing:border-box;border-radius:18px;border:4px solid #ffd03a;box-shadow:0 0 0 4px rgba(255,208,58,.35),0 0 24px rgba(255,208,58,.6);pointer-events:auto;cursor:pointer}
html body:not(#tt) .tt-learn>.tt-learn-target.is-zone{border-style:dashed;cursor:default}
html body:not(#tt) :is(.tt-learn,.tt-story)>.tt-learn-target.is-right{border-color:#2e9e44;box-shadow:0 0 0 6px rgba(46,158,68,.4)}
.tt-learn>.tt-learn-item{position:absolute;width:clamp(56px,calc(var(--su) * 18),120px);height:auto;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;touch-action:none;user-select:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));z-index:2}

/* preposition: a box and the ball */
html body:not(#tt) .tt-learn-pick.tt-learn-place{position:relative;width:clamp(96px,calc(var(--su) * 26),160px);height:clamp(96px,calc(var(--su) * 26),160px);padding:0!important;overflow:hidden}
html body:not(#tt) .tt-learn-place>.tt-learn-box{position:absolute;left:28%;top:40%;width:44%;height:40%;border:4px solid #8a5a2b;border-top-color:#a8733d;border-radius:4px;background:rgba(200,150,90,.25)}
html body:not(#tt) .tt-learn-place .tt-learn-ball{position:absolute!important;left:50%;top:60%;width:22%!important;height:22%!important;transform:translate(-50%,-50%);opacity:1!important;z-index:1}
html body:not(#tt) .tt-learn-ball[data-place="on"]{top:29%}
html body:not(#tt) .tt-learn-ball[data-place="under"]{top:91%}
html body:not(#tt) .tt-learn-ball[data-place="next to"]{left:86%;top:69%}
html body:not(#tt) .tt-learn-ball[data-place="behind"]{left:62%;top:42%;z-index:-1;opacity:.85!important}

/* long word: build it */
.tt-learn-build{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font:900 clamp(20px,calc(var(--su) * 6),34px)/1 "Nunito",Arial,sans-serif;color:#24356f}
html body:not(#tt) .tt-learn-tile{all:unset;padding:10px 16px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;border-radius:14px;background:#fff3c4;box-shadow:0 0 0 2px #f5b82e,0 2px 6px rgba(20,30,70,.18);cursor:pointer;touch-action:manipulation}
/* the part to tap next: a wider gold ring, held still */
html body:not(#tt) .tt-learn-tile.tt-learn-next{box-shadow:0 0 0 3px #ffd03a,0 0 0 7px rgba(255,208,58,.45)}
html body:not(#tt) .tt-learn-tile.is-used{background:#e9f8ec;box-shadow:0 0 0 2px #2e9e44;cursor:default}
html body:not(#tt) .tt-learn-tile.is-wrong{animation:tt-shake .45s ease-in-out}
.tt-learn-plus{color:#52668e}
.tt-learn-result{min-width:2.5em;padding:8px 14px;border-radius:14px;border:3px dashed #d8b48a;text-align:center}
.tt-learn-result.is-right{border:3px solid #2e9e44;color:#1c8a4c;background:#e9f8ec}
.tt-learn-ending{margin:0;font:800 clamp(15px,calc(var(--su) * 4.2),22px)/1.2 "Nunito",Arial,sans-serif;color:#24356f}
.tt-learn-more{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font:700 clamp(14px,calc(var(--su) * 3.8),19px)/1.2 "Nunito",Arial,sans-serif;color:#5a6a8f}
.tt-learn-more b{color:#24356f}

/* 3 yes / no */
.tt-learn-yn{display:flex;gap:clamp(14px,calc(var(--su) * 5),36px)}
html body:not(#tt) .tt-learn-yn .tt-learn-pick{min-width:clamp(84px,calc(var(--su) * 22),132px);min-height:clamp(64px,calc(var(--su) * 17),96px);gap:2px}
.tt-learn-yn .tt-learn-pick>b{font-size:clamp(28px,calc(var(--su) * 8.5),42px);line-height:1}
.tt-learn-yn .tt-learn-pick>span{font:900 clamp(14px,calc(var(--su) * 3.8),19px)/1 "Nunito",Arial,sans-serif}
html body:not(#tt) .tt-learn-yn .tt-yes{color:#1f7a33}
html body:not(#tt) .tt-learn-yn .tt-no{color:#b32626}

/* 4 use it */
.tt-learn-gap{display:inline-block;min-width:3.5em;margin:0 .2em;border-bottom:3px solid #70421f;text-align:center}
.tt-learn-gap.is-right{border-bottom-color:#2e9e44;color:#1c8a4c}
.tt-learn-choices{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* feelings: a face each (placeholder emoji until Teemo's faces are drawn) */
.tt-learn-emoji{font-size:clamp(40px,calc(var(--su) * 13),72px);line-height:1}

/* spotlights (question words, pronouns): the word glows, a tag sits above it */
html body:not(#tt) .tt-key.tt-spot{background:#dbe8ff;box-shadow:0 0 0 3px #7fa8ff;border-radius:6px;text-decoration:none;transition:background .2s,box-shadow .2s}
html>body>.tt-spot-tag{position:fixed;z-index:2147483500;transform:translate(-50%,calc(-100% - 8px));padding:3px 10px;border-radius:999px;background:#1b4fc4;color:#fff;font:900 14px/1.3 "Nunito",Arial,sans-serif;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px rgba(20,40,110,.3);animation:tt-spot-in .25s cubic-bezier(.3,1.5,.5,1) both}
html>body>.tt-spot-tag.is-who{background:#2e9e44}
html>body>.tt-spot-tag::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg)}
html>body>.tt-spot-tag.is-leaving{opacity:0;transition:opacity .3s}
@keyframes tt-spot-in{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
html body:not(#tt) .tt-spot-answer{box-shadow:0 0 0 3px #7fa8ff!important;transition:box-shadow .2s}


/* the hold-to-talk waves fill the whole word card (teemo-lesson-core.js .tt-ripples) */
html body:not(#tt) .tt-learn-card:has(>.tt-ripples){isolation:isolate}

/* The word bank: Teemo with his backpack, top right, and how many words */
html>.tt-wordbank{all:unset;position:fixed;z-index:100003;right:max(10px,calc(env(safe-area-inset-right) + 6px));top:max(14px,calc(env(safe-area-inset-top) + 10px));width:clamp(52px,8vh,76px);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));animation:tt-learn-in .4s cubic-bezier(.3,1.5,.5,1) both}
html>.tt-wordbank[hidden]{display:none}
html>.tt-wordbank>img{display:block;width:100%;height:auto;pointer-events:none}
html>.tt-wordbank>img.tt-wordbank-open{position:absolute;left:0;top:0;opacity:0}
html>.tt-wordbank.is-open>img.tt-wordbank-open{opacity:1}
html>.tt-wordbank.is-open>img.tt-wordbank-closed{opacity:0}
html>.tt-wordbank>.tt-wordbank-count{position:absolute;right:-4px;top:-4px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:#f5841f;color:#fff;font:900 13px/22px "Nunito",Arial,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}
html>.tt-wordbank.is-got{animation:tt-wordbank-got .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes tt-wordbank-got{0%{scale:1}35%{scale:1.22 .9}70%{scale:.95 1.06}100%{scale:1}}
html>.tt-wordbank:focus-visible{outline:3px solid #2166e8;outline-offset:3px;border-radius:12px}
html>.tt-wordbank-fly{position:fixed;z-index:100004;padding:6px 14px;border-radius:999px;background:#fff3c4;box-shadow:0 0 0 3px #f5b82e,0 6px 16px rgba(0,0,0,.25);color:#24356f;font:900 26px/1.1 "Nunito",Arial,sans-serif;pointer-events:none;white-space:nowrap}
/* "My words" */
html>.tt-wordbank-list{position:fixed;inset:0;z-index:100005;display:flex;align-items:center;justify-content:center;background:rgba(10,20,40,.35)}
html>.tt-wordbank-list>.tt-wordbank-card{position:relative;width:min(560px,86vw);max-height:80vh;overflow:auto;box-sizing:border-box;padding:18px 22px 22px;border-radius:18px;background:#fffdf7;box-shadow:0 12px 34px rgba(10,20,50,.35);text-align:center}
html>.tt-wordbank-list h3{margin:0 0 12px;font:900 22px/1.2 "Nunito",Arial,sans-serif;color:#24356f}
html>.tt-wordbank-list .tt-wordbank-words{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font:900 22px/1.3 "Nunito",Arial,sans-serif;color:#24356f}
html>.tt-wordbank-list .tt-wordbank-word{padding:6px 12px;border-radius:12px;background:#fff3c4}
html>.tt-wordbank-list .tt-wordbank-close{all:unset;position:absolute;right:10px;top:8px;width:40px;height:40px;border-radius:50%;text-align:center;font:700 26px/40px Arial,sans-serif;color:#5a6a8f;cursor:pointer}
@media (prefers-reduced-motion:reduce){html>.tt-wordbank,html>.tt-wordbank.is-got{animation:none}}
/* only in a lesson (the story, the lesson's steps): not over the map or the title */
html:not(:has(.scene1-lesson-modal)):not([data-tt-phase="find"]):not([data-tt-phase="say"]):not([data-tt-phase="pack"]):not([data-tt-phase="done"])>.tt-wordbank,
html.tt-journey-open>.tt-wordbank{display:none}
/* phones: the task bar runs along the top (finding, speaking, packing) - sit just below it */
@media (max-height:600px), (max-width:1000px){
  html.tt-task-on>.tt-wordbank{top:calc(max(8px, env(safe-area-inset-top)) + 50px)}
}

/* -ing, shown before a verb's -ing question: pack + ing = packing, "doing it now" */
.tt-learn-ing{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 14px 8px;border-radius:14px;background:#fff8dc;animation:tt-learn-in .35s cubic-bezier(.3,1.4,.5,1) both}
.tt-learn-ing .tt-learn-build{font-size:clamp(18px,calc(var(--su) * 5),28px)}
.tt-learn-ing .tt-learn-tile{padding:6px 12px;min-height:0}
/* the question is what they judge by: it leads, the scene sentence follows */
.tt-learn-q.tt-learn-ask-q{font-size:clamp(19px,calc(var(--su) * 5.6),30px);color:#24356f}
.tt-learn-ask-q+.tt-learn-statement{font-size:clamp(16px,calc(var(--su) * 4.6),25px);font-weight:700}

/* A word's type (teemo-words.js `pos`), on the new-word card and the tapped
   word's card: the same colour for a type everywhere (Blake, 2026-10-14:
   "color-coding the different word types... so that they can understand when
   they should be used"). Not in sentences, so they don't become a rainbow. */
.tt-pos{display:inline-block;padding:4px 14px;border-radius:999px;font:900 clamp(15px,calc(var(--su,6px) * 4.4),20px)/1.3 "Nunito",Arial,sans-serif;letter-spacing:.03em;color:#fff;background:#52668e;white-space:nowrap}
.tt-pos[data-pos="noun"]{background:#1f6fc7}
.tt-pos[data-pos="verb"]{background:#23743b}
.tt-pos[data-pos="adjective"]{background:#c4601a}
.tt-pos[data-pos="adverb"]{background:#7a45b0}
.tt-pos[data-pos="preposition"]{background:#16797a}
.tt-pos[data-pos="pronoun"]{background:#b0306c}
.tt-pos[data-pos="question word"]{background:#8a5a00}
.tt-learn-head .tt-pos-btn{margin-left:8px;margin-right:auto}
.tt-word-card .tt-word-pos{margin-top:4px;text-align:center}
.tt-learn-next-row{display:flex;justify-content:center;margin-top:calc(var(--su) * 2)}
.tt-learn-sentences{display:flex;flex-direction:column;gap:calc(var(--su) * 1.6)}
html body:not(#tt) .tt-learn-pick.tt-learn-sentence{width:100%;justify-content:center;text-align:center;white-space:normal}
html body:not(#tt) .tt-learn-pick.tt-learn-sentence.is-said{box-shadow:0 0 0 3px #ffd03a}
.tt-word-card .tt-word-full{margin-top:4px;text-align:center;font:800 15px/1.3 "Nunito",Arial,sans-serif;color:#24356f}
html body:not(#tt) button.tt-pos-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;margin:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html body:not(#tt) button.tt-pos-btn>.tt-pos{box-shadow:0 2px 6px rgba(20,30,70,.18)}
html body:not(#tt) button.tt-pos-btn.tt-learn-next>.tt-pos{box-shadow:0 0 0 3px #ffd03a,0 0 0 7px rgba(255,208,58,.45)}
/* what the type is: a bubble under the tag */
html>.tt-pos-help{position:fixed;z-index:100004;box-sizing:border-box;padding:10px 14px;border-radius:14px;background:#fffdf7;box-shadow:0 10px 30px rgba(10,20,50,.3);border:3px solid #52668e;font:800 clamp(14px,2.2vh,18px)/1.35 "Nunito",Arial,sans-serif;color:#24356f;animation:tt-learn-in .25s ease-out both}
html>.tt-pos-help[data-pos="noun"]{border-color:#1f6fc7}
html>.tt-pos-help[data-pos="verb"]{border-color:#23743b}
html>.tt-pos-help[data-pos="adjective"]{border-color:#c4601a}
html>.tt-pos-help[data-pos="adverb"]{border-color:#7a45b0}
html>.tt-pos-help[data-pos="preposition"]{border-color:#16797a}
html>.tt-pos-help[data-pos="pronoun"]{border-color:#b0306c}
html>.tt-pos-help[data-pos="question word"]{border-color:#8a5a00}
html>.tt-pos-help p{margin:6px 0 0}
html>.tt-pos-help.is-leaving{opacity:0;transition:opacity .3s}
.tt-learn-head .tt-pos{font-size:clamp(16px,calc(var(--su) * 5),22px);padding:5px 16px}