/* Claudette's original flat illustrations and the user's mobile UI references. */
:root{--ui-ink:#4b4b4b;--ui-muted:#929292;--ui-line:#e5e5e5;--ui-purple:#9270cb;--ui-blue:#1cb0ee}
.ui-icon{display:inline-block;vertical-align:middle;width:40px;height:40px;flex:none}
.ui-tabs{border-top:2px solid var(--ui-line);background:#fff}
.ui-tabs a .nav-icon,.ui-tabs a.on .nav-icon{width:46px;height:46px;padding:3px;border:2px solid transparent;border-radius:13px;background:transparent}
.ui-tabs a.on .nav-icon{border-color:#8ed9f5;background:#e0f5ff;box-shadow:inset 0 -2px 0 #c2eafa}
.ui-tabs .ui-icon{width:36px;height:36px}
.ui-tabs .ui-nav-label{font-size:10px;font-weight:800;color:#8b8b8b}
.ui-tabs a.on .ui-nav-label{color:#168dc3}
.ui-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px var(--page-gutter);min-height:205px;color:#fff;background:var(--ui-blue)}
.ui-hero.purple{background:var(--ui-purple)}
.ui-hero h1{font-size:clamp(27px,3vw,36px);line-height:1.2;letter-spacing:0;margin:0 0 14px;font-weight:900}
.ui-hero p{font-size:clamp(17px,2vw,21px);line-height:1.5;margin:0;max-width:330px;color:#fff}
.ui-hero>div{min-width:0;flex:1}
.ui-hero>img{width:clamp(90px,24vw,165px);height:155px;object-fit:contain;background:#fff;border-radius:48% 48% 42% 42%;flex:none}
body[data-ui-route=quetes] .game-page{padding:0;max-width:850px}
body[data-ui-route=quetes] .game-nav,body[data-ui-route=claudette] .game-nav,body[data-ui-route=profil] .game-nav{display:none}
.ui-quest-body{padding:28px var(--page-gutter) 36px}
.ui-section-label{display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:13px;letter-spacing:.7px;color:var(--ui-muted);font-weight:900;margin:0 0 23px;line-height:1.4}
.ui-section-label span{font-size:11px;text-align:right}
.ui-week-scene{height:180px;position:relative;border-radius:20px;overflow:hidden;margin-bottom:20px}
.ui-landscape{width:100%;height:100%;display:block}
.ui-week-scene>img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:160px;object-fit:contain;background:white;border-radius:50%}
.ui-weekly{border-bottom:2px solid #f0f0f0;padding-bottom:16px}
.ui-quest-body .quest-card{border:0;border-radius:0;box-shadow:none;flex-wrap:nowrap;padding:14px 0 24px;gap:20px;background:#fff}
.ui-quest-body .quest-medal{display:none}
.ui-quest-body .quest-content{min-width:0;position:relative}
.ui-quest-body .quest-content h3{font-size:20px;line-height:1.3;margin-bottom:8px;color:var(--ui-ink)}
.ui-quest-body .quest-content p{font-size:13px;line-height:1.5;margin-bottom:13px;color:#8d8d8d}
.ui-quest-body .quest-meter{height:23px;background:var(--ui-line);margin:0;border-radius:20px}
.ui-quest-body .quest-meter i{background:#58cc02;box-shadow:inset 0 5px 0 #7edb3b}
.ui-quest-body .quest-content>small{display:block;position:relative;text-align:center;margin-top:-23px;line-height:23px;font-size:12px;color:#616161;font-weight:900;min-height:23px}
.ui-quest-body .quest-reward{width:100px;flex:0 0 100px;margin:0;gap:3px;color:#be8b27;font-weight:900;font-size:12px}
.ui-quest-chest{display:flex;justify-content:center;width:100%}
.ui-quest-chest .ui-icon{width:58px;height:58px}
.ui-quest-chest.open{opacity:.65}
.ui-quest-body .quest-reward>.game-icon{width:17px;height:17px}
.ui-quest-body .quest-reward .btn,.ui-quest-body .quest-reward a,.ui-quest-body .claimed-label{font-size:10px;min-width:0;width:100%;margin:4px 0 0;padding:8px 3px;letter-spacing:0}
.ui-quest-body .quest-tabs{margin:22px 0 27px;border-bottom:2px solid #eee;gap:0}
.ui-quest-body .quest-tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;background:none;color:#999;font-size:13px;padding:14px 4px}
.ui-quest-body .quest-tabs button.selected{color:#9067c7;border-bottom-color:#9067c7}
.ui-quest-body .quest-list{gap:4px}
.ui-quest-links{border-block:2px solid #eee;padding:10px 0;margin:24px 0}
.ui-quest-links>a{display:flex;align-items:center;gap:16px;min-height:80px;color:#7d7d7d}
.ui-quest-links>a>span{flex:1;min-width:0}.ui-quest-links b,.ui-quest-links small{display:block}
.ui-quest-links b{font-size:16px;color:var(--ui-ink)}.ui-quest-links small{font-size:13px;margin-top:4px}
.ui-streak-summary{display:flex;align-items:center;gap:18px;margin:20px 0 30px}
.ui-streak-summary>img{width:100px;height:120px;object-fit:contain;mix-blend-mode:multiply}
.ui-streak-summary h2{font-size:20px;margin:0}.ui-streak-summary p{font-size:14px;line-height:1.5;color:#999}
.ui-streak-summary a{font-size:12px;font-weight:900;color:#1ba7da}
.ui-settings{border:2px solid #eee;border-radius:16px;padding:0 16px;color:#777}
.ui-settings summary{cursor:pointer;padding:17px 0;min-height:52px;font-size:14px;font-weight:800}
.ui-settings .game-settings{padding:0 0 18px}.ui-settings label{display:block;margin:14px 0;font-size:14px}
.ui-activity-page,.ui-league-page{max-width:850px;margin:auto;color:var(--ui-ink)}
.ui-section-tabs{display:flex;border-bottom:2px solid #eee;margin:0 var(--page-gutter)}
.ui-section-tabs a{padding:18px 4px;text-align:center;flex:1;font-size:13px;font-weight:900;color:#969696;border-bottom:3px solid transparent}
.ui-section-tabs a[aria-current]{border-color:#1cb0ee;color:#1cb0ee}
.ui-activity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px;padding:32px var(--page-gutter)}
.ui-activity{min-width:0;text-align:center;color:var(--ui-ink)}
.ui-activity>span{display:flex;align-items:center;justify-content:center;aspect-ratio:1.08;border:2px solid var(--ui-line);border-bottom-width:6px;border-radius:18px;background:#fff;transition:transform .12s}
.ui-activity:active>span{transform:translateY(3px);border-bottom-width:3px}
.ui-activity .ui-icon{width:55%;height:55%;max-width:130px;max-height:130px}
.ui-activity h2{font-size:clamp(15px,2vw,21px);margin:14px 0 0;line-height:1.35}
.ui-all-programs{display:flex;width:auto;margin:4px var(--page-gutter) 30px;justify-content:center}
.ui-league-head{padding:30px var(--page-gutter) 24px;border-bottom:2px solid #eee}
.ui-league-head h1{font-size:30px;margin:0 0 10px}.ui-league-head p{font-size:12px;letter-spacing:.5px;color:#aaa;font-weight:900;line-height:1.5}
.ui-trophy-road{display:flex;justify-content:space-between;gap:12px;margin-top:25px}
.ui-trophy-road>span{display:flex;align-items:center;justify-content:center;flex:1;min-width:0}
.ui-trophy-road .ui-icon{width:100%;height:auto;max-width:85px}.ui-trophy-road>span:not(.earned){opacity:.5}
.ui-trophy-road .tier-1.earned{filter:grayscale(1)}.ui-trophy-road .tier-2.earned{filter:sepia(.3) saturate(1.8)}.ui-trophy-road .tier-3.earned{filter:hue-rotate(170deg)}.ui-trophy-road .tier-4.earned{filter:hue-rotate(220deg)}
.ui-league-duo{display:flex;align-items:center;gap:14px;background:#d7ffb8;padding:20px var(--page-gutter);margin:28px 0;color:#5b9b16}
.ui-league-duo>img{width:65px;height:65px;object-fit:contain;border-radius:50%;background:#fff}
.ui-league-duo>div{flex:1;min-width:0}.ui-league-duo b{font-size:18px}.ui-league-duo small{display:block;font-size:11px;margin-top:4px}.ui-league-duo>strong{font-size:24px;text-align:right;flex:none}.ui-rank{font-weight:900}
.ui-league-page>.ui-section-label{padding:0 var(--page-gutter);margin-top:32px}
.ui-tier{display:flex;align-items:center;gap:18px;padding:20px var(--page-gutter);border-bottom:1px solid #f1f1f1}
.ui-tier>span{font-weight:900;width:15px;color:#999}.ui-tier>.ui-icon{width:48px;height:48px}
.ui-tier>div{flex:1;min-width:0}.ui-tier b{display:block;font-size:19px}.ui-tier small{display:block;color:#999;font-size:13px;margin-top:5px}.ui-tier>strong{color:#aaa;font-size:15px}.ui-tier.current{background:#f4fce9}
.ui-league-note{padding:20px var(--page-gutter) 30px}.ui-league-note p{color:#999;font-size:14px;line-height:1.6}.ui-league-note .btn{display:flex;margin:16px 0;justify-content:center}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .game-page{max-width:850px;padding-top:0}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .game-title{display:none}
.ui-profile-cover{background:#2b65af;color:#fff;border-radius:0 0 20px 20px;overflow:hidden;margin-inline:calc(-1 * var(--page-gutter))}
.ui-profile-top{display:flex;align-items:flex-start;gap:8px;padding:25px var(--page-gutter) 10px}
.ui-profile-top h1{font-size:clamp(25px,3vw,35px);flex:1;min-width:0;line-height:1.25;margin:5px 0;overflow-wrap:anywhere}
.ui-profile-top a,.ui-profile-top button{display:flex;justify-content:center;align-items:center;width:44px;height:44px;flex:none;background:transparent;border:0;color:#fff;padding:4px;cursor:pointer}
.ui-profile-top .ui-icon{width:34px;height:34px}
.ui-profile-cover .pet-backdrop{background:transparent;min-height:270px;padding:15px 20px 42px}
.ui-profile-cover .pet-backdrop .pet-stage{background:#fff6e6;border-radius:48% 48% 30% 30%;width:210px;height:250px;margin:auto}
.ui-profile-cover .pet-tag{bottom:15px;border:0;border-bottom:3px solid #e0d3bd}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .pet-profile{display:block;border:0;border-radius:0;overflow:visible}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .pet-bio{padding:20px 0}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .pet-bio>h2,body:is([data-ui-route=claudette],[data-ui-route=profil]) .pet-bio>.pill{display:none}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .pet-bio>p{text-align:left;color:#999;font-weight:800;font-size:13px}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .profile-metrics{margin:26px 0 20px}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .profile-metrics b{font-size:26px}.profile-metrics small{color:#999}
body:is([data-ui-route=claudette],[data-ui-route=profil]) .game-grid{margin-top:5px}
.ui-utility-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:850px;margin:26px auto 0;padding:0 var(--page-gutter);gap:12px}
.ui-utility-links a{display:flex;flex-direction:column;align-items:center;gap:8px;border:2px solid #eee;border-bottom-width:4px;border-radius:16px;padding:16px 8px;font-size:12px;text-align:center;color:#777}
body[data-ui-route=programmes] .program-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body[data-ui-route=programmes] .program-card{display:flex;flex-direction:column}
body[data-ui-route=programmes] .program-art{height:220px;width:100%;border-radius:0;background:#12b995;overflow:hidden;gap:15px;flex:none}
body[data-ui-route=programmes] .program-card.blue .program-art{background:#20b4ed}
body[data-ui-route=programmes] .program-card.purple .program-art{background:#ab80df}
body[data-ui-route=programmes] .program-card.orange .program-art{background:#ffb64b}
body[data-ui-route=programmes] .program-art>.ico{width:60px;height:60px;position:absolute;left:10%;bottom:20%;color:#fff;opacity:.6;transform:rotate(-12deg)}
.ui-program-dog{height:190px;width:160px;object-fit:contain;background:#fff;border-radius:48%;z-index:1}
body[data-ui-route=programmes] .program-body{padding:20px}.program-card .current-badge{z-index:2}
.ui-session-top{gap:14px;align-items:center;margin-bottom:20px}
.ui-session-top .back{font-size:28px;color:#aaa;display:flex;align-items:center;justify-content:center;min-width:40px}
.ui-session-top>.pill{font-size:10px}.ui-session-progress{flex:1;min-width:0;text-align:center}
.ui-session-progress small{color:#e8b300;font-size:11px;font-weight:900;display:block;margin-bottom:5px}
.ui-session-progress>[role=progressbar]{height:18px;border-radius:20px;overflow:hidden;background:#e5e5e5}
.ui-session-progress i{height:100%;display:block;background:#ffca00;border-radius:20px;box-shadow:inset 0 4px 0 #ffdf48}
.session-instructions .hero{background:#fff!important;color:var(--ui-ink);box-shadow:none;border:0;display:grid;grid-template-columns:85px minmax(0,1fr);text-align:left;gap:4px 16px;align-items:center}
.session-instructions .hero .ui-lesson-dog{width:85px;height:100px;object-fit:contain;grid-row:1/3}
.session-instructions .hero .small{background:#fff;border:2px solid #e5e5e5;border-radius:15px;padding:12px;color:#777;font-size:14px}
.session-instructions .card{box-shadow:none;border-color:#e5e5e5}.session .reps .ok{background:#58cc02}
body.ui-immersive{padding:0!important;background:#fff}
body.ui-immersive>.club-header,body.ui-immersive>.desktop-nav,body.ui-immersive>.club-rail,body.ui-immersive>#tabs{display:none!important}
body.ui-immersive #app{padding:0;min-height:100svh}
.ui-end-screen{min-height:100svh;display:flex;flex-direction:column;text-align:center;padding:calc(25px + var(--safe-t)) max(var(--page-gutter),var(--safe-r)) max(20px,var(--safe-b)) max(var(--page-gutter),var(--safe-l));color:var(--ui-ink)}
.ui-end-center{width:100%;max-width:580px;margin:auto;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:25px 0;gap:12px}
.ui-end-center .session-reward-sprite{width:208px;height:260px;max-width:65vw;margin:0;object-fit:contain}
.ui-end-center h1{font-size:clamp(28px,4vw,40px);line-height:1.2;color:#e9b700;margin:18px 0 8px}
.ui-end-center>p{color:#999;font-size:19px;line-height:1.6;margin:0}
.ui-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:12px;margin:28px 0 15px}
.ui-result-stats>span{border:2px solid #e5e5e5;border-radius:15px;overflow:hidden}
.ui-result-stats small{display:block;background:#f7f7f7;padding:9px 3px;font-size:10px;font-weight:900;color:#999}
.ui-result-stats b{display:block;font-size:21px;padding:15px 4px;color:#64b82a}
.ui-result-footer{width:100%;max-width:580px;margin:18px auto 0;display:flex;flex-direction:column;gap:8px}
.ui-result-footer .btn{width:100%;min-height:52px;display:flex;justify-content:center;align-items:center;font-size:15px}
.ui-result-footer>a:not(.btn),.ui-skip{display:flex;justify-content:center;align-items:center;min-height:44px;font-size:13px;font-weight:900;color:#1ba9d9;border:0;background:none;cursor:pointer}
.ui-ignite{background:#20323a;color:white}
.ui-ignite-center{width:100%;max-width:600px;margin:auto;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 0;touch-action:pan-x}
#ignite-flame{border:0;background:transparent;cursor:pointer;padding:0;width:200px;height:230px;filter:drop-shadow(0 0 26px #ffc30045)}
#ignite-flame .ui-icon{width:100%;height:100%}
.ui-ignite h1{font-size:clamp(24px,4vw,32px);line-height:1.3;margin:35px 0 10px}.ui-ignite p{color:#c0cdd0;font-size:16px;line-height:1.5}
.ui-ignite .ui-skip{color:#bfd0d6}
.ui-streak-screen .ui-speech{border:2px solid #e5e5e5;border-radius:18px;padding:18px 24px;font-size:17px;color:#777;max-width:450px}
.ui-streak-art{position:relative;width:240px;height:195px;margin-top:18px}
.ui-streak-art>.ui-icon{position:absolute;left:0;top:0;width:150px;height:175px}
.ui-streak-art>img{position:absolute;right:0;bottom:0;width:125px;height:150px;object-fit:contain;background:#fff;border-radius:50%}
.ui-streak-number{font-size:100px;color:#ff9c00;line-height:1.1;font-weight:900}
.ui-streak-screen h1{margin:0;color:#ff9c00;font-size:30px}
.ui-streak-week{display:flex;justify-content:space-between;gap:8px;width:100%;max-width:440px;margin-top:30px}
.ui-streak-week>span{flex:1;min-width:0}.ui-streak-week small{display:block;font-size:13px;color:#aaa;font-weight:900;margin-bottom:12px}
.ui-streak-week b{display:flex;align-items:center;justify-content:center;width:clamp(28px,9vw,44px);height:clamp(28px,9vw,44px);border-radius:50%;background:#e5e5e5;margin:auto;color:white;font-size:26px}
.ui-streak-week .active b{background:#ff9c00}.ui-streak-week .active small{color:#ff9c00}
.ui-activity:focus-visible,.ui-profile-top :focus-visible,.ui-result-footer :focus-visible,#ignite-flame:focus-visible,.ui-section-tabs a:focus-visible{outline:3px solid #189ccb;outline-offset:5px}
@media(max-width:599px){
 .ui-hero{min-height:185px;padding-block:24px;gap:12px}.ui-hero>img{width:100px;height:125px}.ui-hero h1{font-size:27px}.ui-hero p{font-size:17px}
 .ui-week-scene{height:145px}.ui-quest-body .quest-card{gap:14px}.ui-quest-body .quest-content h3{font-size:18px}.ui-quest-body .quest-content p{font-size:12px}
 .ui-quest-body .quest-reward{width:84px;flex-basis:84px}.ui-quest-body .quest-reward .btn{font-size:9px}.ui-section-label{font-size:11px}.ui-section-label span{font-size:9px}
 .ui-activity-grid{gap:30px 22px;padding-top:30px;padding-bottom:35px}.ui-activity h2{font-size:17px}
 .ui-league-duo{gap:10px}.ui-league-duo>img{width:48px;height:48px}.ui-league-duo b{font-size:16px}.ui-league-duo>strong{font-size:21px}
 .ui-tier{gap:13px}.ui-tier b{font-size:17px}.ui-tier>strong{font-size:12px}
 body[data-ui-route=programmes] .program-grid{grid-template-columns:1fr}.ui-profile-cover{border-radius:0}
 .ui-result-stats{gap:8px}.ui-result-stats b{font-size:18px}.ui-end-center>p{font-size:17px}
}
@media(max-width:999px){
 body:is([data-ui-route=quetes],[data-ui-route=jeux],[data-ui-route=claudette],[data-ui-route=profil]) .club-header{border:0;box-shadow:none;background:#9270cb;color:white}
 body[data-ui-route=jeux] .club-header{background:#1cb0ee}
 body:is([data-ui-route=claudette],[data-ui-route=profil]) .club-header{background:#2b65af}
 body:is([data-ui-route=quetes],[data-ui-route=jeux],[data-ui-route=claudette],[data-ui-route=profil]) .mobile-brand{color:white}
 body:is([data-ui-route=quetes],[data-ui-route=jeux],[data-ui-route=claudette],[data-ui-route=profil]) .club-stats a{color:#fff}
 body:is([data-ui-route=quetes],[data-ui-route=jeux],[data-ui-route=claudette],[data-ui-route=profil]) .mobile-brand img{display:none}
}
@media(min-width:1000px){.ui-hero{border-radius:20px;margin:24px var(--page-gutter) 0}.ui-profile-cover{border-radius:20px;margin:24px 0 0}.ui-profile-cover .pet-backdrop{padding-bottom:50px}.ui-profile-cover .pet-backdrop .pet-stage{width:230px;height:280px}}
@media(max-height:500px) and (orientation:landscape){.ui-end-center{padding:10px 0;gap:8px}.ui-end-center .session-reward-sprite{height:120px}.ui-end-center h1{margin:8px 0}.ui-ignite-center{padding:15px 0}#ignite-flame{width:100px;height:110px}.ui-result-stats{margin:10px 0}.ui-streak-art{height:140px}.ui-streak-art>.ui-icon{height:125px}.ui-streak-art>img{height:110px}.ui-streak-number{font-size:65px}}
@media(prefers-reduced-motion:reduce){.ui-activity>span{transition:none}}
/* Exercise chrome belongs to the exercise; the progress bar stays unobstructed. */
body.session-active{padding:0!important}
body.session-active>.club-header,body.session-active>.desktop-nav,body.session-active>.club-rail{display:none}
body.session-active #app{max-width:none;min-height:100svh}
body.session-active .session{padding-top:calc(18px + var(--safe-t));min-height:100svh}
@media(max-height:500px) and (orientation:landscape){.ui-end-center .session-reward-sprite{width:96px;height:120px}}