/*
 * lesson2-phone.css — Teemo's phone (lesson2-phone.js). His screens, in the
 * lessons' font and colours (teemo-tokens.css). The screen is laid out at its
 * size in the 2900x1255 picture (524x1001) and scaled with the picture, so it
 * stays in the frame at every size; text is sized for a phone, where the
 * screen is ~150 px wide.
 */
html body:not(#tt) .tt-story>.l2-phone-wrap{position:absolute;inset:0;pointer-events:none;z-index:0}
html body:not(#tt) .l2-phone-wrap>.l2-frame{position:absolute;pointer-events:none;user-select:none;max-width:none}
html body:not(#tt) .l2-phone{position:absolute;overflow:hidden;pointer-events:auto;background:#eef5fb}
html body:not(#tt) .l2-screen{position:absolute;left:0;top:0;width:524px;height:1001px;transform-origin:0 0;font-family:"Nunito",Arial,sans-serif;color:var(--tt-ink,#24356f);background:linear-gradient(180deg,#f3f9ff 0%,#e7f1f8 100%)}
html body:not(#tt) .l2-screen>section{position:absolute;inset:0;display:none;flex-direction:column;gap:22px;padding:84px 34px 70px;box-sizing:border-box;animation:l2-in .3s ease-out}
html body:not(#tt) .l2-screen[data-screen="home"]>[data-screen="home"],html body:not(#tt) .l2-screen[data-screen="places"]>[data-screen="places"],html body:not(#tt) .l2-screen[data-screen="route"]>[data-screen="route"],
html body:not(#tt) .l2-screen[data-screen="weather"]>[data-screen="weather"],html body:not(#tt) .l2-screen[data-screen="calendar"]>[data-screen="calendar"],html body:not(#tt) .l2-screen[data-screen="camera"]>[data-screen="camera"],
html body:not(#tt) .l2-screen[data-screen="photo"]>[data-screen="photo"],html body:not(#tt) .l2-screen[data-screen="ring"]>[data-screen="ring"],html body:not(#tt) .l2-screen[data-screen="call"]>[data-screen="call"]{display:flex}
@keyframes l2-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
html body:not(#tt) .l2-screen h4{margin:0 0 6px;font-size:52px;line-height:1.1;font-weight:900;text-align:center;color:var(--tt-ink,#24356f)}
html body:not(#tt) .l2-screen .l2-sub{margin:-18px 0 0;font-size:36px;font-weight:700;text-align:center;color:var(--tt-ink-soft,#52668e)}

/* buttons: all of them his pieces, so they reset the page's button look */
html body:not(#tt) .l2-screen button{all:unset;box-sizing:border-box;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html body:not(#tt) .l2-screen button.is-wrong{animation:tt-shake .45s ease-in-out}
html body:not(#tt) .l2-screen button.is-right{box-shadow:0 0 0 8px var(--tt-green-mid,#2f9d57)!important}

/* home: his eight app icons, two by four */
html body:not(#tt) .l2-screen>.l2-home{display:none;flex-direction:row;flex-wrap:wrap;align-content:space-evenly;justify-content:space-around;gap:0;padding:70px 30px 80px}
html body:not(#tt) .l2-screen[data-screen="home"]>.l2-home{display:flex}
html body:not(#tt) .l2-home>button{display:flex;flex-direction:column;align-items:center;gap:8px;width:44%;border-radius:40px}
html body:not(#tt) .l2-home img{width:170px;height:170px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(20,43,59,.25))}
html body:not(#tt) .l2-home span{font-size:40px;font-weight:900;color:var(--tt-ink,#24356f)}

/* a row: places, weather, the schedule, the camera's faces */
html body:not(#tt) .l2-screen .l2-row{display:flex;align-items:center;gap:22px;flex:1 1 0;min-height:0;padding:18px 26px;border-radius:30px;background:#fff;box-shadow:0 0 0 3px var(--tt-blue-pale,#9bb7df),0 8px 0 var(--tt-blue-faint,#8ea8d7)}
html body:not(#tt) .l2-row img{width:150px;height:150px;flex:0 0 auto;object-fit:contain}
html body:not(#tt) .l2-row b{font-size:48px;font-weight:900;line-height:1.05;display:flex;flex-direction:column;gap:6px}
html body:not(#tt) .l2-row small{font-size:34px;font-weight:700;color:var(--tt-ink-soft,#52668e)}
html body:not(#tt) [data-screen="weather"] .l2-row{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
html body:not(#tt) [data-screen="weather"] .l2-row small{font-size:40px}
html body:not(#tt) [data-screen="calendar"] .l2-row{gap:18px;padding:14px 22px}
html body:not(#tt) [data-screen="calendar"] .l2-row img{width:100px;height:100px}
html body:not(#tt) [data-screen="calendar"] .l2-row b{flex:1;font-size:40px;gap:2px}
html body:not(#tt) [data-screen="calendar"] .l2-row small{font-size:30px}
html body:not(#tt) [data-screen="calendar"] .l2-row i{font-style:normal;font-size:38px;font-weight:900;color:var(--tt-blue-bright,#1877d2);white-space:nowrap}

/* the route and Start Ride */
html body:not(#tt) .l2-map{width:100%;flex:1 1 auto;min-height:0}
html body:not(#tt) .l2-card{display:flex;flex-direction:column;gap:20px;padding:26px;border-radius:30px;background:#fff;box-shadow:0 6px 18px rgba(36,53,111,.15)}
html body:not(#tt) .l2-card b{font-size:40px;font-weight:900;text-align:center}
html body:not(#tt) .l2-screen .l2-go{display:block;padding:26px;border-radius:30px;background:var(--tt-gold,#ffd34f);box-shadow:0 6px 18px rgba(36,53,111,.15);font-size:50px;font-weight:900;color:var(--tt-ink,#24356f);text-align:center}
html body:not(#tt) .l2-screen .l2-go:disabled{opacity:.45;cursor:default}

/* a selfie, its flash, and Send */
html body:not(#tt) [data-screen="photo"]{align-items:center;justify-content:center}
html body:not(#tt) .l2-selfie{flex:1 1 auto;min-height:0;max-width:100%;object-fit:contain;border-radius:30px;box-shadow:0 8px 20px rgba(0,0,0,.2)}
html body:not(#tt) [data-screen="photo"] .l2-go{width:100%}
html body:not(#tt) .l2-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
html body:not(#tt) .l2-flash.is-on{animation:l2-flash .7s ease-out}
@keyframes l2-flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

/* Mom calling, and on the call */
html body:not(#tt) .l2-screen>.l2-callscreen{align-items:center;justify-content:center;gap:16px;background:linear-gradient(180deg,#2c4a7a 0%,#18243f 100%);color:#fff}
html body:not(#tt) .l2-mom{width:300px;height:300px;border-radius:50%;object-fit:cover;background:#f0e4ff;border:8px solid #fff}
html body:not(#tt) .l2-callscreen b{font-size:64px;font-weight:900}
html body:not(#tt) .l2-callscreen p{margin:0 0 30px;font-size:40px;font-weight:700;opacity:.85}
html body:not(#tt) .l2-screen .l2-accept{padding:30px 60px;border-radius:60px;background:var(--tt-green-mid,#2f9d57);box-shadow:0 8px 0 var(--tt-green,#23743b);font-size:52px;font-weight:900;color:#fff}

@media (prefers-reduced-motion:reduce){.l2-screen>section,.l2-flash.is-on{animation:none}}