/*
 * Teemo Travels — the journey map (mobile/teemo-journey.js).
 * One full-screen layer between scenes. Sizes are in container units of the
 * map itself (cqh/cqw), so the same numbers hold on a phone and a laptop.
 */
html>.tt-journey{position:fixed;inset:0;z-index:100500;container-type:size;overflow:hidden;font-family:"Nunito","Segoe UI",Arial,sans-serif;background:#cfe7f7;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
html>.tt-journey[hidden]{display:none}
html>.tt-journey.is-leaving .tt-journey-stops{opacity:.55;pointer-events:none;transition:opacity .3s}

/* ---- the ground: drawn until the painted map arrives ---- */
.tt-journey-ground{position:absolute;inset:0;background:
  radial-gradient(60cqw 60cqh at 15% 85%,#f3dcae 0 40%,transparent 70%),
  radial-gradient(50cqw 55cqh at 90% 15%,#b9d9a0 0 35%,transparent 70%),
  radial-gradient(45cqw 50cqh at 55% 45%,#d7e9b8 0 30%,transparent 72%),
  linear-gradient(160deg,#cfe7f7 0%,#e6efc9 45%,#e9d6a8 100%)}
.tt-journey.has-map-art .tt-journey-ground{background:var(--tt-map-art) center/cover no-repeat}
.tt-journey.has-map-art .tt-journey-land{display:none}
.tt-journey-land,.tt-journey-trail{position:absolute;inset:0;width:100%;height:100%}
.tt-journey-trail path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.tt-journey-trail .edge{stroke:#a9794a;stroke-width:14;opacity:.3}
.tt-journey-trail .dash{stroke:#fff;stroke-width:5;stroke-dasharray:3 16}

.tt-journey-logo{position:absolute;left:2.4cqw;top:3cqh;width:clamp(70px,13cqw,190px);filter:drop-shadow(0 .6cqh 1cqh rgba(20,30,70,.35));pointer-events:none}

/* ---- stops ---- */
.tt-stop{all:unset;position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tt-stop-pic{position:relative;display:block;width:clamp(56px,19cqh,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:clamp(3px,.9cqh,7px) solid #fff;box-shadow:0 1cqh 2.4cqh rgba(20,30,70,.3);background:#ccd6e6;transition:transform .15s}
.tt-stop-pic img{width:100%;height:100%;object-fit:cover;display:block}
.tt-stop:active .tt-stop-pic{transform:scale(.94)}
.tt-stop:focus-visible .tt-stop-pic{outline:4px solid #2166e8;outline-offset:4px}

.tt-stop.is-locked .tt-stop-pic img{filter:grayscale(1) brightness(.8)}
.tt-stop-lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(30,40,70,.3);color:#fff}
.tt-stop-lock svg{width:42%;height:42%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.tt-stop.is-soon .tt-stop-pic{opacity:.6}
.tt-stop.is-shake .tt-stop-pic{animation:tt-shake .4s}

.tt-stop.is-tonight .tt-stop-pic{width:clamp(96px,31cqh,240px);border-color:#ffd34f;animation:tt-glow 1.8s ease-in-out infinite}
.tt-stop-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(40px,13cqh,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ffd75b,#f5b82e);color:#3b2a00;box-shadow:0 .8cqh 0 #c98f12,0 1.6cqh 3cqh rgba(20,30,70,.35)}
.tt-stop-play svg{width:46%;height:46%}
.tt-stop-pin{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:clamp(34px,11cqh,80px);margin-bottom:-1cqh;animation:tt-hop 1.2s ease-in-out infinite;pointer-events:none}
.tt-stop-pin svg,.tt-stop-pin img{display:block;width:100%}

.tt-stop.is-open .tt-stop-pic{border-color:#ffd34f}

/* finished: the stamp, and a small "again" badge */
.tt-stamp{position:absolute;right:-18%;top:-16%;width:58%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#b0412e;background:rgba(255,248,232,.92);border:clamp(2px,.6cqh,5px) dashed #b0412e;box-shadow:0 .5cqh 1.2cqh rgba(20,30,70,.3);transform:rotate(-12deg)}
.tt-stamp svg{width:58%;height:58%}
.tt-stamp img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:contain}
.tt-stamp:has(img) {background:none;border:0;box-shadow:none}
.tt-stamp:has(img) svg{display:none}
.tt-stop-again{position:absolute;left:-10%;bottom:-6%;width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#e8f0ff;color:#1d55c2;box-shadow:0 .5cqh 1cqh rgba(20,30,70,.25)}
.tt-stop-again svg{width:55%;height:55%}
.tt-stop.is-stamping .tt-stamp{animation:tt-stamp .7s cubic-bezier(.3,1.6,.5,1) .35s both}
.tt-stop.is-opening .tt-stop-pic{animation:tt-pop .6s ease-out}

/* ---- "Unlock it" ---- */
.tt-journey-unlock{position:absolute;transform:translate(-50%,calc(-100% - clamp(40px,12cqh,90px)));z-index:5}
.tt-journey-unlock.below{transform:translate(-50%,clamp(40px,12cqh,90px))}
.tt-journey-unlock[hidden]{display:none}
.tt-journey-unlock button{all:unset;display:flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:linear-gradient(#ffd75b,#f5b82e);color:#3b2a00;font:900 clamp(16px,5cqh,24px)/1 "Nunito",Arial,sans-serif;box-shadow:0 4px 0 #c98f12,0 10px 24px rgba(20,30,70,.3);cursor:pointer;white-space:nowrap;animation:tt-pop .35s ease-out}
.tt-journey-unlock svg{width:1.2em;height:1.2em}
.tt-journey-unlock button:focus-visible{outline:4px solid #2166e8;outline-offset:3px}

/* ---- games ---- */
.tt-journey-games-btn{all:unset;position:absolute;right:2.4cqw;bottom:4cqh;width:clamp(56px,17cqh,110px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#7fd1ff,#2f8fe0);color:#fff;box-shadow:0 .9cqh 0 #1d63a8,0 1.6cqh 3cqh rgba(20,30,70,.35);cursor:pointer}
.tt-journey-games-btn svg{width:58%;height:58%}
.tt-journey-games-btn[hidden]{display:none}
.tt-journey-games-btn.is-new{animation:tt-bounce 1.3s ease-in-out 3}
/* no lesson to play right now: the games are what is left, so they call out */
.tt-journey-games-btn.is-invite:not(.is-new){animation:tt-invite 1.8s ease-in-out infinite}
@keyframes tt-invite{0%,100%{box-shadow:0 .9cqh 0 #1d63a8,0 0 0 0 rgba(47,143,224,.55)}50%{box-shadow:0 .9cqh 0 #1d63a8,0 0 0 3cqh rgba(47,143,224,0);transform:scale(1.06)}}

.tt-journey-sheet{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(16,32,70,.45)}
.tt-journey-sheet[hidden]{display:none}
.tt-journey-sheet-card{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,3cqw,30px);padding:clamp(18px,6cqh,40px) clamp(18px,4cqw,48px);border-radius:24px;background:#fffdf7;box-shadow:0 20px 50px rgba(10,20,50,.35);max-width:92cqw;animation:tt-pop .35s ease-out}
.tt-tile{all:unset;position:relative;width:clamp(150px,34cqw,340px);aspect-ratio:16/10;border-radius:18px;overflow:hidden;cursor:pointer;box-shadow:0 6px 0 #c9d4e8,0 10px 22px rgba(20,30,70,.2);background:#dfe8f6}
.tt-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tt-tile-game{background:var(--tt-game-sky) center/cover,#8fb3e0}
.tt-tile-game>img{object-fit:contain;object-position:12% 100%;width:60%;left:4%;top:auto;bottom:0;height:90%}
.tt-tile-icon{position:absolute;right:6%;bottom:8%;width:26%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ffd75b,#f5b82e);color:#3b2a00;box-shadow:0 4px 0 #c98f12}
.tt-tile-icon svg{width:50%;height:50%}
.tt-tile-label{position:absolute;left:0;right:0;top:0;padding:10px 12px 18px;font:900 clamp(15px,4.4cqh,22px)/1.15 "Nunito",Arial,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);background:linear-gradient(rgba(16,32,70,.55),transparent);text-align:left}
.tt-tile-again .tt-tile-icon{background:#e8f0ff;color:#1d55c2;box-shadow:0 4px 0 #c9d8f5}
.tt-tile:focus-visible{outline:4px solid #2166e8;outline-offset:4px}
.tt-journey-sheet-close,.tt-journey-back{all:unset;position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#24356f;box-shadow:0 4px 12px rgba(20,30,70,.3);cursor:pointer}
.tt-journey-sheet-close{right:-14px;top:-14px}
.tt-journey-sheet-close svg,.tt-journey-back svg{width:56%;height:56%}

.tt-journey-game{position:absolute;inset:0;z-index:9;background:#000}
.tt-journey-game[hidden]{display:none}
.tt-journey-game iframe{width:100%;height:100%;border:0;display:block}
.tt-journey-back{left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top))}

/* the scene's own floating bits stay under the map */
html.tt-journey-open>.tt-logo,html.tt-journey-open>.tt-itembar,html.tt-journey-open>.tt-hand{display:none!important}

@keyframes tt-glow{0%,100%{box-shadow:0 0 0 .6cqh #ffd34f,0 0 0 1.6cqh #ffd34f66,0 1.4cqh 3cqh rgba(20,30,70,.35)}50%{box-shadow:0 0 0 .6cqh #ffd34f,0 0 0 3.4cqh #ffd34f00,0 1.4cqh 3cqh rgba(20,30,70,.35)}}
@keyframes tt-hop{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-2.4cqh)}}
@keyframes tt-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes tt-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes tt-stamp{0%{transform:rotate(-40deg) scale(2.6);opacity:0}60%{opacity:1}100%{transform:rotate(-12deg) scale(1);opacity:1}}
@keyframes tt-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}60%{transform:translateY(0)}75%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){html>.tt-journey *{animation:none!important;transition:none!important}}