/*
 * teemo-skin-glass.css — the "Clear glass, sky" look (Blake picked option 6
 * of ten, 2026-10-22: https://claude.ai/artifact/4vdVGJimmFHvMsCZ7QyaJx).
 *
 * A trial: it applies only where html[data-tt-skin="glass"] is set, which
 * lesson-player.js does for a lesson with `skin: 'glass'` (Lesson 2 Night 1,
 * ?lesson=2-1) or ?skin=glass on any doc-made lesson. Everything else keeps
 * its look until this is decided.
 *
 * The look: a frosted white card, navy text, and one sky blue for anything
 * you can press or pick. No brown. Four text sizes, from the scene (--su,
 * a hundredth of the scene's height), phone value as the floor:
 *   label 12   a card's kind ("Off to the Airport"), word types, small chips
 *   body 17    the story, answers, definitions
 *   heading 22 a question, the sentence to say
 *   word 44    only the word being taught
 * Right stays green and wrong stays red: blue is "picked", never "correct".
 *
 * Every rule starts html[data-tt-skin] body:not(#tt):not(#tt-skin): the
 * second :not(#id) outranks the large-screen rules in teemo-mobile.css and
 * teemo-story.css however many classes they chain, so the look is the same
 * on a laptop as on the phone (2026-10-22: on Blake's desktop the old card
 * and old sizes won, and the new colors sat on top of them).
 */
html[data-tt-skin="glass"]{
  --g-ink:#12233f; --g-muted:#5b6b88; --g-sky:#0a84ff; --g-sky-deep:#0a6fe0; --g-sky-soft:#e3f0ff; --g-fill:#eef3fa;
  /* the same share of the scene's height at every size, so a big screen
     looks like the phone made bigger (Blake's 2000px window: capped sizes
     left small text in a big card) */
  --g-label:clamp(11px,calc(var(--su,3.6px) * 3.3),24px);
  --g-body:clamp(16px,calc(var(--su,3.6px) * 4.7),34px);
  --g-head:clamp(19px,calc(var(--su,3.6px) * 6.1),44px);
  --g-word:clamp(36px,calc(var(--su,3.6px) * 12),88px);
  --g-font:"Nunito",Arial,sans-serif;
}
/* the sizes again where --su exists (it is set on the lesson card's frame,
   teemo-mobile.css): a custom property is worked out where it is declared,
   so on html alone they froze at their phone values on every screen */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-modal"].is-on-scene{
  --g-label:clamp(11px,calc(var(--su) * 3.3),24px);
  --g-body:clamp(16px,calc(var(--su) * 4.7),34px);
  --g-head:clamp(19px,calc(var(--su) * 6.1),44px);
  --g-word:clamp(36px,calc(var(--su) * 12),88px);
}

/* ---- the card ------------------------------------------------------------ */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-card"]{background:rgba(255,255,255,.9)!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:24px!important;box-shadow:0 12px 32px rgba(10,40,90,.18)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--g-ink)!important;font-family:var(--g-font)!important}
/* the lesson's name becomes the small blue chip */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-card"]>h2:not(:empty){align-self:flex-start!important;margin:0 0 6px!important;padding:3px 10px!important;border-radius:999px!important;background:var(--g-sky-soft)!important;color:var(--g-sky)!important;font:800 var(--g-label)/1.4 var(--g-font)!important;letter-spacing:.06em!important;text-transform:uppercase!important;text-shadow:none!important}

/* ---- the story ----------------------------------------------------------- */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-story-text{color:var(--g-ink)!important;font:600 var(--g-body)/1.45 var(--g-font)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-story-text span.active{background:var(--g-sky-soft)!important;box-shadow:0 0 0 3px var(--g-sky-soft)!important;border-radius:4px!important;color:var(--g-ink)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-story-text span.activity-word{color:var(--g-sky)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) :is(.scene1-story-toggle,.scene1-replay){background-color:#fff!important;border:2px solid var(--g-sky-soft)!important;box-shadow:none!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-next,
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-answer,
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-finish,
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-start,
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-next-question{border:0!important;border-radius:999px!important;background:linear-gradient(180deg,#2b97ff,var(--g-sky-deep))!important;color:#fff!important;font:800 var(--g-body)/1.2 var(--g-font)!important;text-shadow:none!important;box-shadow:0 4px 12px rgba(10,132,255,.32)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) :is(.scene1-answer,.scene1-next-question):disabled{background:var(--g-fill)!important;color:#9aa7bf!important;box-shadow:none!important}

/* ---- read left to right, as option 6 does: words from the left edge, the
   button to press at the right, choices the card's full width ------------- */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story :is(.scene1-story-text,.scene1-question h3){text-align:left!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .scene1-story-controls{justify-content:flex-start!important;width:100%!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .scene1-story-controls .scene1-next{margin-left:auto!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .scene1-question{align-items:stretch!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .scene1-options{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;gap:8px!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .scene1-options button{width:100%!important;min-width:0!important;margin:0!important;text-align:left!important;padding-left:16px!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .scene1-answer-row{justify-content:space-between!important;width:100%!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .scene1-answer-row .scene1-answer{margin:0 0 0 auto!important}

/* ---- a question ---------------------------------------------------------- */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-question h3{color:var(--g-ink)!important;font:800 var(--g-head)/1.25 var(--g-font)!important;text-shadow:none!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-options button{border:2px solid transparent!important;border-radius:14px!important;background:var(--g-fill)!important;color:var(--g-ink)!important;font:800 var(--g-body)/1.2 var(--g-font)!important;box-shadow:none!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-options button:is(.chosen,.reading){background:var(--g-sky)!important;color:#fff!important;box-shadow:0 4px 12px rgba(10,132,255,.32)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-options button.hinted{border-color:var(--g-sky)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-options button.correct{background:#e3f6ea!important;border-color:#2f9d57!important;color:#1d6b38!important;box-shadow:none!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-options button.wrong{background:#f6f7fa!important;color:#a8b0c0!important;text-decoration:line-through!important;box-shadow:none!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-hint{background-color:#fff!important;border:2px solid var(--g-sky-soft)!important;box-shadow:none!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-hint-dots i{background:#c9d8ee!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-rung="1"] .scene1-hint-dots i:nth-child(-n+1),
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-rung="2"] .scene1-hint-dots i:nth-child(-n+2),
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-rung="3"] .scene1-hint-dots i{background:var(--g-sky)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-option-help{color:var(--g-muted)!important}
/* what a question can earn: in the card's top corner, beside the lesson's name, not a row of its own */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .tt-worth{position:absolute!important;top:clamp(12px,calc(var(--su,3.6px) * 4),20px)!important;right:clamp(14px,calc(var(--su,3.6px) * 4.4),22px)!important;margin:0!important;background:transparent!important;box-shadow:none!important;color:var(--g-sky)!important;font:800 var(--g-label)/1 var(--g-font)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .tt-challenge{margin-left:0!important;background:#fff1d6!important;box-shadow:none!important;color:#b25e00!important;font:800 var(--g-label)/1.5 var(--g-font)!important}

/* ---- saying it ----------------------------------------------------------- */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-modal"].is-on-scene [data-tt-role="practice"] [data-tt-role="target-sentence"],
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-practice-prompt strong,
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-target-sentence{color:var(--g-ink)!important;font:800 var(--g-head)/1.25 var(--g-font)!important;text-shadow:none!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-say-sentence,
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-say .scene1-say-words{color:var(--g-ink)!important;text-shadow:none!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .scene1-hear{border:0!important;background-color:var(--g-fill)!important;box-shadow:none!important}

/* ---- a new word ---------------------------------------------------------- */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-word{color:var(--g-ink)!important;font:900 var(--g-word)/1.05 var(--g-font)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-part.on{color:var(--g-sky)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) :is(.tt-learn-means,.tt-learn-statement,.tt-learn-prompt,.tt-learn-example){color:var(--g-ink)!important;font:600 var(--g-body)/1.45 var(--g-font)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-q{color:var(--g-ink)!important;font:800 var(--g-head)/1.25 var(--g-font)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-q.tt-learn-ask-q{font-size:var(--g-head)!important;color:var(--g-ink)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-tag{font:800 var(--g-label)/1.4 var(--g-font)!important;letter-spacing:.06em!important;text-transform:uppercase!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-dots i{background:#d6e1f0!important;border:0!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-dots i.done{background:#9cc8ff!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-dots i.now{background:var(--g-sky)!important;width:20px!important;border-radius:4px!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-pick{border:2px solid transparent!important;border-radius:14px!important;background:var(--g-fill)!important;color:var(--g-ink)!important;box-shadow:none!important;font-family:var(--g-font)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-pick.is-said{border-color:var(--g-sky)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-pick.is-right{background:#e3f6ea!important;border-color:#2f9d57!important;color:#1d6b38!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-pick.is-wrong{background:#f6f7fa!important;color:#a8b0c0!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-tile{border:2px solid transparent!important;border-radius:14px!important;background:var(--g-fill)!important;color:var(--g-ink)!important;box-shadow:none!important;font-family:var(--g-font)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-tile.tt-learn-next{border:0!important;border-radius:999px!important;background:linear-gradient(180deg,#2b97ff,var(--g-sky-deep))!important;color:#fff!important;box-shadow:0 4px 12px rgba(10,132,255,.32)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) :is(.tt-learn-more b,.tt-learn-build){color:var(--g-ink)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-learn-gap{border-bottom-color:var(--g-sky)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-key.tt-new{background:var(--g-sky-soft)!important;box-shadow:0 0 0 3px #b9d8ff!important;color:var(--g-sky-deep)!important}

/* ---- around the card: the tapped word, the gems, the microphone help ------ */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-word-vi [lang="vi"],
html[data-tt-skin="glass"]>.tt-word-card .tt-word-full,
html[data-tt-skin="glass"] .tt-word-card .tt-word-full{color:var(--g-ink)!important}
html[data-tt-skin="glass"]>.tt-mic-help h3,
html[data-tt-skin="glass"]>.tt-wordbank-list h3{color:var(--g-ink)!important}
html[data-tt-skin="glass"]>.tt-game-jar{background:rgba(255,255,255,.9)!important;color:var(--g-ink)!important;box-shadow:0 4px 14px rgba(10,40,90,.16)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-tt-skin="glass"]>.tt-game-jar svg{color:var(--g-sky)!important;fill:var(--g-sky)!important}

/* the gem count sits on the card's top edge (the question is no longer its
   frame), so the question needs no room kept above it */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-story .scene1-question{position:static!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-modal"].is-on-scene.tt-story .scene1-question>h3{margin-top:clamp(12px,calc(var(--su,3.6px) * 3.6),18px)!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) .tt-key.tt-new::after{background:var(--g-sky)!important;color:#fff!important}

/* round icon buttons grow with the scene too, their icons with them */
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-modal"].is-on-scene{--g-icon:clamp(44px,calc(var(--su) * 12.5),80px)}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-modal"].is-on-scene :is(.scene1-story-toggle,.scene1-replay,.scene1-answer-row .scene1-hint){width:var(--g-icon)!important;height:var(--g-icon)!important;background-size:46%!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-modal"].is-on-scene :is(.scene1-story-toggle,.scene1-replay)[data-tt-icon-only]::before{width:46%!important;height:46%!important}
html[data-tt-skin="glass"] body:not(#tt):not(#tt-skin) [data-tt-role="lesson-modal"].is-on-scene :is(.scene1-next,.scene1-answer,.scene1-finish,.scene1-next-question){padding:.55em 1.4em!important}