@font-face{font-family:Fredoka;src:url(../../assets/fonts/Fredoka.woff2)}
@font-face{font-family:Pacifico;src:url(../../assets/fonts/Pacifico.woff2)}
@font-face{font-family:Playfair;src:url(../../assets/fonts/PlayfairDisplay.woff2);font-weight:400 900}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#f3b8e6;font-family:Fredoka,sans-serif;color:#5a1a6e;user-select:none;-webkit-user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none}
.hidden{display:none!important}
.screen{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));pointer-events:auto}
.screen.dim{background:rgba(70,10,80,.45);backdrop-filter:blur(3px)}
#splash,#profile,#wardrobe{background:radial-gradient(circle at 50% 30%,#ffe1f3 0,#ffb3e0 45%,#c97ae8 100%)}
#home{background:linear-gradient(180deg,rgba(180,140,240,.35),rgba(255,200,235,.0) 40%,rgba(120,40,140,.35));justify-content:flex-start}
.sparkles{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#ffd36a 0 2px,transparent 3px);background-size:90px 110px,130px 150px;background-position:10px 20px,50px 70px;opacity:.7;animation:tw 3s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.25;background-position:14px 26px,46px 64px}}
.logo{text-align:center;z-index:1}
.logo .kicker{font-family:Pacifico;color:#fff;font-size:24px;text-shadow:0 3px 0 #b8237a,0 0 14px #ff8ad8}
.logo h1{margin:0;font-size:58px;line-height:1;color:#fff;letter-spacing:1px;text-shadow:0 5px 0 #7a2ab8,0 8px 18px rgba(90,20,120,.5);-webkit-text-stroke:2px #c13dbd}
.logo h1 em{font-style:normal;color:#ffd36a}
.logo.small{margin-top:30px}.logo.small h1{font-size:40px}.logo.small .kicker{font-size:19px}
.hearts-deco{color:#ff4fa3;font-size:26px;letter-spacing:6px;text-shadow:0 2px 0 #fff;margin-top:8px}
.foot{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));font-size:12px;color:#fff;opacity:.8}
.btn{position:relative;z-index:1;pointer-events:auto;border:3px solid #ffd36a;border-radius:28px;padding:12px 24px;font:700 18px Fredoka;color:#fff;cursor:pointer;
 background:linear-gradient(180deg,#ff8ad8,#e0409f);box-shadow:0 5px 0 #8a1a6a,0 8px 18px rgba(90,20,120,.35),inset 0 3px 0 rgba(255,255,255,.45);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8a1a6a}
.btn.gold{background:linear-gradient(180deg,#ffe28a,#f2a93b);color:#7a2a2a;border-color:#fff}
.btn.big{font-size:24px;padding:16px 38px;min-width:240px}
.btn.ghost{background:rgba(255,255,255,.35);color:#7a2ab8;border-color:#fff;box-shadow:0 4px 0 rgba(122,42,184,.4)}
.btn.pink{background:linear-gradient(180deg,#d77bff,#9b3fd8)}
.btn:disabled{filter:grayscale(.7);opacity:.6}
.row{display:flex;gap:12px;justify-content:center}
.card{width:100%;max-width:400px;background:rgba(255,250,253,.92);border:3px solid #ffd36a;border-radius:28px;padding:18px;box-shadow:0 10px 30px rgba(90,20,120,.3)}
.card.center{text-align:center}
.card h2,.title2{margin:0 0 6px;font-family:Pacifico;font-weight:400;color:#c13dbd;font-size:28px;text-align:center}
.title2{color:#fff;text-shadow:0 3px 0 #7a2ab8;font-size:34px}
.sub{margin:0 0 12px;text-align:center;color:#8a4a9a}
.steps{display:flex;gap:6px}.steps span{padding:4px 12px;border-radius:14px;background:rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:13px}
.steps span.on{background:#fff;color:#c13dbd}
#pname{width:100%;font:600 24px Fredoka;padding:12px 16px;border-radius:18px;border:3px solid #ff8ad8;outline:none;color:#7a2ab8;text-align:center;background:#fff}
#pname:focus{border-color:#c13dbd;box-shadow:0 0 0 4px rgba(255,138,216,.35)}
.hint{text-align:center;font-size:12px;color:#a070b0;margin-top:8px}
.picker{display:flex;align-items:center;justify-content:space-between}
.stage{flex:1;height:min(52vh,470px);display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(ellipse at 50% 92%,rgba(193,61,189,.25) 0 18%,transparent 19%),radial-gradient(circle at 50% 40%,#fff 0,#ffe3f3 60%,transparent 70%)}
.stage img{height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(90,20,120,.25))}
.arrow{pointer-events:auto;width:48px;height:48px;border-radius:50%;border:3px solid #ffd36a;background:#c13dbd;color:#fff;font:700 30px/1 Fredoka;cursor:pointer;box-shadow:0 4px 0 #6a1a7a}
.lookname{text-align:center;font:700 22px Fredoka;color:#c13dbd}
.dots{display:flex;justify-content:center;gap:6px;margin-top:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#f0c0e8}.dots i.on{background:#c13dbd}
.wardrobe{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:400px}
.outfit{position:relative;border-radius:18px;background:#fff;border:3px solid #f3c6ea;padding:6px 4px 8px;text-align:center;overflow:hidden}
.outfit .thumb{height:118px;display:flex;align-items:flex-end;justify-content:center}
.outfit img{height:112px}
.outfit.locked img{filter:brightness(0) opacity(.18)}
.outfit .on{position:absolute;top:6px;left:6px;font-size:10px;background:#3fcf8e;color:#fff;border-radius:10px;padding:2px 7px;font-weight:700}
.outfit .lock{position:absolute;top:36px;left:0;right:0;font-size:30px}
.outfit .nm{font-size:12px;font-weight:700;color:#7a2ab8;line-height:1.1;margin-top:4px;min-height:26px}
.outfit .cost{font-size:12px;color:#c13dbd;font-weight:700}
.outfit.owned{border-color:#ffd36a;box-shadow:0 0 0 3px rgba(255,211,106,.5)}
.outfit .swatch{position:absolute;top:8px;right:8px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #c9a}
.prodbadge{background:#fff;border:3px solid #ffd36a;border-radius:20px;padding:6px 14px;color:#c13dbd;display:flex;gap:6px;align-items:center}
.topbar{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.icon{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:3px solid #ffd36a;background:linear-gradient(180deg,#d77bff,#9b3fd8);color:#fff;font:700 18px Fredoka;cursor:pointer;box-shadow:0 4px 0 #5a1a86}
.icon.off{opacity:.55;text-decoration:line-through}
.pcard{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:12px;width:100%;max-width:410px;background:rgba(255,250,253,.93);border:3px solid #ffd36a;border-radius:26px;padding:12px;box-shadow:0 8px 24px rgba(90,20,120,.3);margin-top:8px}
.pcard .face{width:86px;height:86px;border-radius:50%;overflow:hidden;border:4px solid #ffd36a;box-shadow:0 0 0 3px #c13dbd;background:#ffb3e0}
.pcard .face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.35);transform-origin:50% 22%}
.pname{font:700 22px Fredoka;color:#7a2ab8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stars{color:#ffc94a;font-size:18px;letter-spacing:2px;text-shadow:0 1px 0 #b8862e}
.xp{height:8px;border-radius:5px;background:#f3d6f0;overflow:hidden;margin-top:4px}.xp div{height:100%;background:linear-gradient(90deg,#ff7ad1,#ffd36a)}
.lvl{font-size:12px;color:#a070b0;margin-top:2px}
.pstats{display:flex;flex-direction:column;gap:4px;text-align:right}.pstats small{font-size:10px;color:#a070b0;display:block}.pstats b{font-size:20px;color:#c13dbd}
.spacer{flex:1}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none}
.bar{position:absolute;top:calc(12px + env(safe-area-inset-top));left:8px;right:8px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.pill{height:42px;padding:0 11px;border-radius:24px;display:flex;align-items:center;gap:5px;color:#fff;background:linear-gradient(180deg,#d77bff 0%,#9b3fd8 55%,#7a2ab8 100%);border:3px solid #ffd36a;box-shadow:0 4px 0 #5a1a86,inset 0 3px 0 rgba(255,255,255,.45);font-weight:700}
.pill b{font-size:20px;text-shadow:0 2px 0 #5a1a86}.pill small{font-size:9px;letter-spacing:1px}
.score{flex-direction:column;justify-content:center;gap:0;height:48px;min-width:96px}
.h{width:22px;height:20px;background:radial-gradient(circle at 35% 30%,#fff 0 10%,transparent 12%),#ff4fa3;clip-path:path('M11 19 C2 13 0 8 0 5.5 C0 2.3 2.5 0 5.5 0 C7.9 0 9.7 1.4 11 3.3 C12.3 1.4 14.1 0 16.5 0 C19.5 0 22 2.3 22 5.5 C22 8 20 13 11 19Z')}
.h.off{background:#6b2a8f}
.lip{display:inline-block;width:12px;height:24px;border-radius:7px 7px 3px 3px;background:linear-gradient(#ff3d8b 0 40%,#ffd36a 40% 100%);transform:rotate(-15deg);box-shadow:0 0 0 2px #fff}
#hud .icon{pointer-events:auto;width:40px;height:40px;font-size:13px}
.combo{position:absolute;top:calc(84px + env(safe-area-inset-top));right:12px;transform:rotate(-6deg);font-family:Pacifico;font-size:26px;color:#fff;text-shadow:0 0 6px #ff4fb0,0 3px 0 #b8237a,0 0 18px #ff8ad8;transition:opacity .2s}
.warn{position:absolute;bottom:170px;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:#ff3d6e;border:4px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;box-shadow:0 0 0 4px #ff3d6e88,0 0 22px #ff3d6e}
.warn small{position:absolute;top:48px;font-size:12px;white-space:nowrap;background:#fff;color:#ff3d6e;border-radius:8px;padding:0 6px}
.portrait{position:absolute;left:10px;bottom:calc(22px + env(safe-area-inset-bottom));width:84px;height:84px}
.portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;background:#ffb3e0}
.ring{position:absolute;inset:0;border-radius:50%;border:5px solid #ffd36a;box-shadow:0 0 0 4px #c13dbd,0 6px 16px rgba(90,20,120,.45)}
.portrait .name{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);font-family:Pacifico;font-size:15px;color:#fff;background:#ff4fa3;border:2px solid #ffd36a;border-radius:14px;padding:0 9px;line-height:22px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.power{position:absolute;left:110px;right:14px;bottom:calc(40px + env(safe-area-inset-bottom));height:22px;border-radius:12px;background:#5a1a86;border:3px solid #ffd36a;overflow:hidden}
.power .fill{width:0;height:100%;background:linear-gradient(90deg,#ff7ad1,#ffd36a);box-shadow:inset 0 3px 0 rgba(255,255,255,.5);transition:width .2s}
.power small{position:absolute;inset:0;text-align:center;line-height:16px;font-size:11px;color:#fff;letter-spacing:2px;font-weight:700}
.bigscore{font:700 54px Fredoka;color:#c13dbd;text-shadow:0 3px 0 #ffd36a}
.newbest{font-family:Pacifico;color:#ff4fa3;font-size:20px}
.ostats{display:flex;justify-content:space-around;margin-top:10px}.ostats small{display:block;font-size:11px;color:#a070b0}.ostats b{font-size:24px;color:#7a2ab8}
.unlock{margin-top:12px;padding:8px;border-radius:14px;background:#fff4c8;color:#a0602a;font-weight:700}

/* home teaser (display only) */
.teaser{display:flex;align-items:center;gap:10px;margin:10px auto 0;max-width:340px;padding:9px 14px;border-radius:18px;background:linear-gradient(90deg,#fff3fb,#ffe3f3);border:2px solid #ffc94a;box-shadow:0 4px 12px rgba(160,40,120,.18);color:#7a2a6a;font:600 14px/1.25 Fredoka,sans-serif}
.teaser b{color:#e0207f}.teaser .gift{font-size:24px}

/* ---------- « Crée ton avatar » ---------- */
#avatarStep .av-pick,#avatarStep .av-busy,#avatarStep .av-soon{display:none;flex-direction:column;align-items:center;text-align:center}
#avatarStep[data-state=pick] .av-pick,#avatarStep[data-state=busy] .av-busy,#avatarStep[data-state=soon] .av-soon{display:flex}
.avframe{position:relative;display:block;width:min(178px,24vh);aspect-ratio:1;margin:4px auto 10px;border-radius:50%;cursor:pointer;pointer-events:auto}
.avring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,#fff6d8,#ffd36a,#e8a93a,#fff1b8,#ff9fd6,#ffd36a,#fff6d8);box-shadow:0 0 0 3px #fff,0 0 0 6px #ff8ad8,0 10px 26px rgba(193,61,189,.45),0 0 34px rgba(255,138,216,.55)}
.avinner{position:absolute;inset:9px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff 0,#ffe3f3 55%,#ffc4e8 100%);box-shadow:inset 0 0 0 3px rgba(193,61,189,.35),inset 0 6px 16px rgba(160,40,120,.25)}
.avinner img{width:100%;height:100%;object-fit:cover;display:none}
.avframe.has .avinner img{display:block}.avframe.has .avph{display:none}
.avph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c13dbd;font:700 16px/1.15 Fredoka}
.avph small{font-weight:600;font-size:12px;color:#a070b0;margin-top:2px}
.avicon{font-size:34px;color:#ffc94a;text-shadow:0 2px 0 #c13dbd;margin-bottom:4px;animation:avpulse 1.6s ease-in-out infinite}
.avshine{position:absolute;inset:9px;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 58%);mix-blend-mode:screen;background-size:250% 100%;animation:avsweep 3.2s ease-in-out infinite}
.avframe::before,.avframe::after{content:'✦';position:absolute;color:#ffd36a;font-size:22px;text-shadow:0 0 8px #fff,0 2px 0 #c13dbd;animation:avpulse 1.8s ease-in-out infinite}
.avframe::before{top:-6px;right:6px}.avframe::after{bottom:4px;left:-4px;font-size:16px;animation-delay:.9s}
.averr{min-height:0;color:#e0207f;font-weight:700;font-size:13px}
.avcheck{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;margin:5px 0;padding:8px 10px;border-radius:16px;background:#fff7fc;border:2px solid #f6cbe9;color:#6a2a7a;font-size:13.5px;line-height:1.3;cursor:pointer;pointer-events:auto}
.avcheck b{color:#c13dbd}
.avcheck input{position:absolute;opacity:0;width:0;height:0}
.avcheck .box{flex:none;width:24px;height:24px;border-radius:8px;border:3px solid #ff8ad8;background:#fff;display:flex;align-items:center;justify-content:center;transition:all .15s}
.avcheck input:checked+.box{background:linear-gradient(180deg,#ffe28a,#f2a93b);border-color:#c13dbd}
.avcheck input:checked+.box::after{content:'✓';color:#7a2a2a;font:700 16px Fredoka}
.avcheck input:focus-visible+.box{box-shadow:0 0 0 3px rgba(193,61,189,.4)}
.avcheck:has(input:checked){border-color:#ffd36a;background:#fffaf0}
.avnote{font-size:12px;color:#8a5a9a;margin:4px 0 10px}
.avgo{width:100%;font-size:19px}
.avframe.busy{cursor:default;width:min(170px,24vh)}
.avframe.busy .avring{animation:avspin 1.4s linear infinite;background:conic-gradient(#fff6d8,#ffd36a 25%,#ff8ad8 50%,#c13dbd 62%,transparent 70%,#fff6d8)}
.avmagic{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff 0,#ffd9ef 50%,#ffb3e0 100%);animation:avglow 1.6s ease-in-out infinite alternate}
.avmagic i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;color:#ffd36a}
.avmagic i::before{content:'✦';font-size:18px;text-shadow:0 0 6px #fff,0 1px 0 #c13dbd}
.avmagic i{animation:avorbit 2.4s linear infinite}
.avmagic i:nth-child(2){animation-delay:-.4s}.avmagic i:nth-child(3){animation-delay:-.8s}.avmagic i:nth-child(4){animation-delay:-1.2s}.avmagic i:nth-child(5){animation-delay:-1.6s}.avmagic i:nth-child(6){animation-delay:-2s}
.avmagic::after{content:'💄';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;animation:avpulse 1.2s ease-in-out infinite}
.avtitle{font-family:Pacifico;color:#c13dbd;font-size:26px;margin-top:6px;text-shadow:0 2px 0 #ffe3a0}
.avmsg{min-height:22px;color:#8a4a9a;font-weight:600;margin:2px 0 10px;animation:avfade .8s ease-in-out infinite alternate}
.avbar{width:86%;height:16px;border-radius:10px;background:#f3d6f0;border:2px solid #ffd36a;overflow:hidden;margin-bottom:8px}
.avbar div{height:100%;width:4%;border-radius:8px;background:linear-gradient(90deg,#ff7ad1,#ffd36a,#ff7ad1);background-size:200% 100%;animation:avflow 1s linear infinite;transition:width .6s ease}
.av-soon{padding:8px 4px}
.avsoonicon{font-size:56px;animation:avpop .6s cubic-bezier(.2,1.6,.4,1) both}
.avsoontxt{font:700 19px/1.35 Fredoka;color:#7a2ab8;margin:6px 6px 8px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,#fff7fc,#ffe8f5);border:2px solid #ffd36a;animation:avpop .6s .15s cubic-bezier(.2,1.6,.4,1) both}
.avgone{font-size:12px;color:#3a9a6a;font-weight:700;margin:0 0 10px}
.btn.avhome{background:linear-gradient(180deg,#fff6fb,#ffd0ec);color:#c13dbd;border-color:#ffd36a;box-shadow:0 5px 0 #c97ab0,0 8px 18px rgba(90,20,120,.25),inset 0 3px 0 #fff;margin-bottom:-2px}
@keyframes avspin{to{transform:rotate(360deg)}}
@keyframes avsweep{0%,40%{background-position:150% 0}100%{background-position:-60% 0}}
@keyframes avpulse{50%{transform:scale(1.18);opacity:.75}}
@keyframes avglow{to{filter:brightness(1.12) saturate(1.2)}}
@keyframes avorbit{from{transform:rotate(0) translateX(56px) rotate(0) scale(.7)}50%{transform:rotate(180deg) translateX(48px) rotate(-180deg) scale(1.15)}to{transform:rotate(360deg) translateX(56px) rotate(-360deg) scale(.7)}}
@keyframes avfade{from{opacity:.55}to{opacity:1}}
@keyframes avflow{to{background-position:-200% 0}}
@keyframes avpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-height:700px){#avatarStep .sub{margin-bottom:6px;font-size:14px}.avframe,.avframe.busy{width:min(132px,21vh);margin:2px auto 6px}.avcheck{padding:5px 8px;margin:3px 0;font-size:12.5px}.avnote{margin:2px 0 6px;font-size:11px}.avgo{font-size:17px;padding:10px 18px}#profile{gap:8px}}

/* ---- wallet / coins ---- */
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c0,#ffd36a 45%,#d99a2a);box-shadow:0 0 0 2px #fff,inset 0 -2px 0 #b87a1a;vertical-align:-3px}
.wallet{pointer-events:auto;display:flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border-radius:20px;background:rgba(255,250,253,.92);border:3px solid #ffd36a;box-shadow:0 4px 0 rgba(122,42,184,.35);font:700 17px Fredoka;color:#7a2ab8}
/* ---- home: missions du jour ---- */
.missions{width:100%;max-width:410px;background:rgba(255,250,253,.9);border:3px solid #ffd36a;border-radius:22px;padding:8px 12px 9px;box-shadow:0 6px 18px rgba(90,20,120,.25);margin-top:-4px}
.missions .mhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.missions .mhead b{font-family:Pacifico;font-weight:400;color:#c13dbd;font-size:17px}.missions .mhead small{font-size:11px;color:#a070b0;font-weight:600}
.mrow{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:7px;padding:3px 0;font:600 13px/1.15 Fredoka;color:#6a2a7a}
.mrow i{font-style:normal;font-size:17px;text-align:center}
.mrow .mbar{height:6px;border-radius:4px;background:#f3d6f0;overflow:hidden;margin-top:3px}.mrow .mbar div{height:100%;background:linear-gradient(90deg,#ff7ad1,#ffd36a)}
.mrow .mrw{font-size:11px;color:#a0602a;text-align:right;white-space:nowrap}.mrow .mrw b{display:block;font-size:12px;color:#7a2ab8}
.mrow.done{color:#2a9a6a}.mrow.done .mbar div{background:linear-gradient(90deg,#4fd69a,#b8f0a0)}.mrow.done .mrw b{color:#2a9a6a}
/* home tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:410px}
.tile{pointer-events:auto;border:3px solid #ffd36a;border-radius:18px;padding:6px 2px 7px;background:linear-gradient(180deg,#d77bff,#9b3fd8);color:#fff;font:700 12.5px Fredoka;cursor:pointer;box-shadow:0 4px 0 #5a1a86;display:flex;flex-direction:column;align-items:center;gap:1px}
.tile i{font-style:normal;font-size:21px;line-height:24px}.tile:active{transform:translateY(3px);box-shadow:0 1px 0 #5a1a86}
/* ---- in-run toast ---- */
.toast{position:absolute;left:50%;top:calc(66px + env(safe-area-inset-top));transform:translateX(-50%);width:min(88vw,360px);display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:20px;
  background:linear-gradient(180deg,#fffaf0,#ffe6f4);border:3px solid #ffd36a;box-shadow:0 8px 22px rgba(90,20,120,.35);font:600 13px/1.2 Fredoka;color:#7a2a6a;animation:toastIn 3.2s ease both;z-index:3}
.toast .ti{font-size:26px}.toast b{display:block;font-family:Pacifico;font-weight:400;color:#e0207f;font-size:16px;line-height:1.2}.toast em{font-style:normal;color:#a0602a;font-weight:700}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-30px) scale(.9)}10%{opacity:1;transform:translate(-50%,0) scale(1.04)}16%{transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-14px)}}
/* ---- game over additions ---- */
.newbest{animation:pulse 1s ease-in-out infinite alternate}@keyframes pulse{to{transform:scale(1.08)}}
.orank{margin-top:4px;font:700 22px Fredoka;color:#7a2ab8}.orank small{display:block;font-size:12px;color:#a070b0;font-weight:600}
.omiss{margin-top:10px;padding:7px 10px;border-radius:14px;background:#e9fbf1;color:#2a8a5a;font:600 13px/1.35 Fredoka;text-align:left}
/* ---- classement ---- */
.tabs{display:flex;gap:4px;padding:4px;border-radius:22px;background:rgba(255,250,253,.85);border:3px solid #ffd36a;box-shadow:0 4px 12px rgba(90,20,120,.2)}
.tabs button{border:0;border-radius:16px;padding:7px 13px;background:transparent;color:#9b3fd8;font:700 14px Fredoka;cursor:pointer}
.tabs button.on{background:linear-gradient(180deg,#d77bff,#9b3fd8);color:#fff;box-shadow:0 2px 0 #5a1a86}
.card.board{padding:8px 10px;max-height:56vh;overflow:auto}
.brow{display:grid;grid-template-columns:30px 40px 1fr auto;align-items:center;gap:9px;padding:5px 6px;border-radius:14px;font:600 15px Fredoka;color:#6a2a7a}
.brow+.brow{border-top:1px solid #f3dcef}
.brow .rk{font:700 16px Fredoka;color:#a070b0;text-align:center}.brow.r1 .rk,.brow.r2 .rk,.brow.r3 .rk{font-size:20px}
.brow .av{width:38px;height:38px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:700 17px Fredoka;color:#fff;border:2px solid #ffd36a}
.brow .av img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.35);transform-origin:50% 22%;background:#ffb3e0}
.brow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brow .nm small{display:block;font-size:10px;color:#b090c0;font-weight:600;letter-spacing:.5px}
.brow .sc{font:700 16px Fredoka;color:#7a2ab8}
.brow.me{background:linear-gradient(90deg,#ffe3f3,#fff3c8);border:2px solid #ff7ad1;box-shadow:0 3px 10px rgba(224,32,127,.2);color:#c0207a}
.brow.me+.brow,.brow+.brow.me{border-top-color:transparent}
.bsep{text-align:center;color:#c9a0d0;letter-spacing:4px;line-height:12px}
.bempty{padding:18px;text-align:center;color:#a070b0;font:600 14px Fredoka}
.bnote{font:600 11px Fredoka;color:#fff;text-shadow:0 1px 2px rgba(90,20,120,.7);text-align:center;max-width:330px}
/* ---- récompenses ---- */
.card.rlevel{padding:10px 16px}.rlevel .rl{display:flex;justify-content:space-between;align-items:center}.rlevel b{font:700 20px Fredoka;color:#7a2ab8}.rlevel small{display:block;margin-top:4px;color:#a070b0;font-weight:600;font-size:12px;text-align:right}
.card.rlist{padding:6px 10px;max-height:58vh;overflow:auto}
.rrow{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:6px 4px;font:600 14px/1.2 Fredoka;color:#6a2a7a}
.rrow+.rrow{border-top:1px solid #f3dcef}.rrow .ic{font-size:22px;text-align:center}.rrow small{display:block;color:#a070b0;font-size:11.5px}
.rrow .st{font:700 11px Fredoka;padding:3px 8px;border-radius:10px;background:#f3e6f8;color:#9b70b8;white-space:nowrap}
.rrow.got .st{background:#e2f8ec;color:#2a9a6a}.rrow.next .st{background:#fff0c0;color:#b8862e}
.rrow.locked .ic,.rrow.locked .tx{opacity:.6}
.rrow.salon{margin:6px -4px 2px;padding:10px 10px;border-radius:16px;border:2px dashed #ffc94a !important;background:linear-gradient(90deg,#fff3fb,#ffe3f3);color:#c0207a}
.rrow.salon .tx{opacity:1}.rrow.salon small{color:#e0207f;font-weight:700}.rrow.salon .ic{opacity:1;font-size:28px;filter:drop-shadow(0 2px 3px rgba(224,32,127,.3))}
@media (max-height:700px){.missions .mrow{padding:1px 0;font-size:12px}.tile{padding:4px 2px 5px;font-size:11.5px}.tile i{font-size:18px;line-height:20px}#home{gap:9px}.logo.small{margin-top:22px}}

/* ---- home: 3D glam Sofia as the star (left) + missions / play (right) ---- */
.hero{flex:1;min-height:0;width:100%;max-width:430px;display:flex;align-items:stretch;gap:4px;margin-top:-4px}
.hstar{position:relative;flex:0 0 36%;min-height:0;pointer-events:none}
.hstar img{position:absolute;bottom:2%;left:50%;height:97%;width:auto;max-width:none;transform:translateX(-50%);transform-origin:50% 100%;animation:hpose 4.5s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(90,20,120,.35))}
@keyframes hpose{0%,100%{transform:translateX(-50%) rotate(-.8deg) scale(1)}50%{transform:translateX(-50%) rotate(.8deg) scale(1.012)}}
.hglow{position:absolute;left:50%;bottom:0;width:120%;height:9%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,170,225,.55) 55%,rgba(255,170,225,0))}
.hsp{position:absolute;font-style:normal;color:#fff;text-shadow:0 0 8px #ff8ad8,0 0 2px #ffd36a;animation:hsp 2.4s ease-in-out infinite}
.hsp.s1{left:8%;top:18%;font-size:20px}.hsp.s2{right:4%;top:40%;font-size:15px;animation-delay:.8s}.hsp.s3{left:14%;top:62%;font-size:17px;animation-delay:1.5s}
@keyframes hsp{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
.hcol{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:12px}
.hcol .missions{margin-top:0;padding:7px 10px 8px}.hcol .mrow{grid-template-columns:20px 1fr auto;gap:5px;font-size:12.5px}.hcol .mrow .mrw{font-size:10.5px}
.hcol .btn.big{min-width:0;width:100%;padding:15px 10px}.hcol .btn.avhome{width:100%;padding:10px 8px;font-size:16px}
/* ---- game over: « Samira dit… » ---- */
.samira{display:flex;align-items:center;gap:10px;width:100%;max-width:410px;animation:samIn .45s cubic-bezier(.2,1.4,.4,1) both}
.samira .sface{flex:0 0 74px;height:74px;border-radius:50%;overflow:hidden;border:4px solid #ffd36a;box-shadow:0 0 0 3px #1a0a1e,0 6px 16px rgba(30,0,40,.45);background:#2a1020}
.samira .sface img{width:100%;height:100%;object-fit:cover}
.samira .sbub{position:relative;flex:1;background:#fff;border-radius:20px;padding:8px 13px 10px;box-shadow:0 6px 18px rgba(30,0,40,.35);font:600 15px/1.3 Fredoka;color:#4a1a4e}
.samira .sbub:before{content:'';position:absolute;left:-9px;top:50%;margin-top:-9px;border:9px solid transparent;border-left:0;border-right-color:#fff}
.samira .sbub b{display:block;font:400 15px Pacifico;color:#1a0a1e;margin-bottom:1px}
.samira.win .sbub b,.samira.levelup .sbub b{color:#c13dbd}.samira.levelup .sbub{background:linear-gradient(180deg,#fff,#fff3c8)}.samira.levelup .sbub:before{border-right-color:#fff9e6}
@keyframes samIn{from{opacity:0;transform:translateY(-14px) scale(.92)}to{opacity:1;transform:none}}
@media (max-height:700px){.samira .sface{flex-basis:58px;height:58px}.samira .sbub{font-size:13.5px;padding:6px 11px 8px}}
.hcol .mhead{gap:6px}.hcol .mhead b,.hcol .mhead small{white-space:nowrap}
@media (max-width:400px){.hstar{flex-basis:33%}.hcol .mhead b{font-size:14.5px}.hcol .mhead small{font-size:9.5px}.hcol .mrow{font-size:11.5px}.hcol .mrow .mrw{font-size:9.5px}.hcol .btn.avhome{font-size:14.5px}}
/* ---- Glam Run title ---- */
.logo .byline{font-family:Pacifico;color:#fff;font-size:17px;margin-top:-2px;text-shadow:0 2px 0 #b8237a,0 0 10px #ff8ad8}
.logo.small .byline{font-size:14px}
.topbar .tbr{display:flex;gap:8px}
#pause .icon{width:50px;height:50px;font-size:20px}
/* ---- game over: BIG Samira (half-body) sliding in with a bounce + speech bubble ---- */
#over{justify-content:flex-end;gap:10px}
.sambig{position:relative;width:100%;max-width:430px;flex:1 1 auto;min-height:210px;max-height:48vh;pointer-events:none}
.sambig img{position:absolute;left:-6px;bottom:0;height:100%;max-width:62%;object-fit:contain;object-position:left bottom;transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  filter:drop-shadow(0 10px 18px rgba(40,0,50,.45));animation:samSlide .75s cubic-bezier(.2,.9,.3,1) both,samBob 2.6s ease-in-out .9s infinite alternate}
.sambig .sglow{position:absolute;left:-10%;bottom:0;width:70%;height:90%;background:radial-gradient(closest-side,rgba(255,190,235,.55),rgba(255,150,220,0));animation:samFade .6s .1s both}
.sambig .sbub{position:absolute;right:0;top:6%;width:52%;background:#fff;border-radius:22px;padding:10px 14px 12px;box-shadow:0 8px 22px rgba(30,0,40,.4);
  font:600 16px/1.3 Fredoka;color:#4a1a4e;transform-origin:0% 70%;animation:bubPop .5s cubic-bezier(.2,1.6,.4,1) .45s both}
.sambig .sbub:before{content:'';position:absolute;left:-14px;bottom:22px;border:12px solid transparent;border-left:0;border-right:16px solid #fff;transform:skewY(18deg)}
.sambig .sbub b{display:block;font:400 16px Pacifico;color:#1a0a1e;margin-bottom:2px}
.sambig.win .sbub b,.sambig.levelup .sbub b{color:#c13dbd}.sambig.levelup .sbub{background:linear-gradient(180deg,#fff,#fff3c8)}
.sambig.levelup .sbub:before{border-right-color:#fff9ea}
.sambig.talk img{animation:samSlide .75s cubic-bezier(.2,.9,.3,1) both,samTalk .32s ease-in-out .9s 8 alternate,samBob 2.6s ease-in-out 3.5s infinite alternate}
@keyframes samSlide{0%{transform:translateX(-115%) rotate(-7deg)}55%{transform:translateX(5%) rotate(2deg)}75%{transform:translateX(-2%) rotate(-.6deg) scale(1.01,.99)}100%{transform:none}}
@keyframes samBob{from{transform:none}to{transform:translateY(-4px) rotate(.6deg)}}
@keyframes samTalk{from{transform:none}to{transform:translateY(-3px) scale(1.008)}}
@keyframes bubPop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes samFade{from{opacity:0}to{opacity:1}}
#over .card{padding:10px 16px 12px}#over .card h2{font-size:22px;margin:0}#over .bigscore{font-size:44px;line-height:1.1}
#over .ostats{margin-top:4px}#over .unlock{margin-top:8px;padding:6px}#over .omiss{margin-top:6px}
@media (max-height:700px){.sambig{min-height:170px}.sambig .sbub{font-size:14px;padding:7px 11px 9px}#over .bigscore{font-size:36px}#over .card h2{display:none}#over{gap:7px}}
/* side-hazard warnings */
.warn .arr{position:absolute;top:-30px;font-size:22px;color:#fff;text-shadow:0 0 8px #ff3d6e,0 2px 0 #b8237a}
/* products icon = the Fateli perfume (the gloss pickup is gone) */
.lip{width:22px;height:26px;border-radius:0;background:url(../../assets/items3d/perfume.png) center/contain no-repeat;transform:none;box-shadow:none;vertical-align:middle;filter:drop-shadow(0 1px 1px rgba(90,20,90,.4))}
/* ---- Série / Coffre du jour / Points Glam (small entry points; home layout unchanged) ---- */
.topbar .tbl{display:flex;gap:6px;align-items:center}
.chip{pointer-events:auto;position:relative;height:34px;padding:0 11px;border-radius:17px;border:2px solid #ffd36a;background:rgba(255,250,253,.92);color:#c13dbd;font:700 15px Fredoka;cursor:pointer;box-shadow:0 3px 0 rgba(122,42,184,.35)}
.chip.chest{padding:0 9px;font-size:17px}.chip .dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#ff3d6e;border:2px solid #fff;display:none}
.chip.ready .dot{display:block}.chip.ready{animation:chipPulse 1.2s ease-in-out infinite alternate}@keyframes chipPulse{to{transform:scale(1.08)}}
.gpts{font:700 11.5px Fredoka;color:#c13dbd;margin-top:2px}
.gwarn{z-index:1;margin:-6px 0 -4px;padding:4px 12px;border-radius:12px;background:rgba(255,244,200,.94);color:#a0602a;font:600 12.5px Fredoka;box-shadow:0 3px 10px rgba(90,20,120,.2)}
.league{width:100%;max-width:400px;padding:8px 14px;border-radius:18px;background:linear-gradient(90deg,#fff3c8,#ffe0f2);border:2px solid #ffd36a;color:#7a2ab8;font:700 15px Fredoka;display:flex;justify-content:space-between;align-items:center}
.league small{display:block;font:600 11px Fredoka;color:#a070b0}.league b{font-size:22px;color:#c13dbd}
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(60,8,70,.55);backdrop-filter:blur(3px);pointer-events:auto}
.modal.hidden{display:none}
.mcard{position:relative;width:min(400px,92vw);background:linear-gradient(180deg,#fffafd,#ffe9f6);border:3px solid #ffd36a;border-radius:28px;padding:16px 14px 18px;text-align:center;box-shadow:0 14px 40px rgba(40,0,50,.45);animation:bubPop .45s cubic-bezier(.2,1.5,.4,1) both}
.mtitle{font:400 30px Pacifico;color:#c13dbd}.msub{font:600 14px Fredoka;color:#7a2ab8;margin:2px 0 10px}
.mclose{position:absolute;top:8px;right:10px;width:32px;height:32px;border-radius:50%;border:0;background:#f3d6ec;color:#9b3fd8;font:700 15px Fredoka;cursor:pointer}
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.day{position:relative;border-radius:14px;padding:6px 2px 7px;background:#fff;border:2px solid #f2d2ea;font:600 11px Fredoka;color:#a070b0}
.day b{display:block;font:700 15px Fredoka;color:#7a2ab8;margin-top:2px}.day .ic{font-size:20px;line-height:24px}
.day.done{background:#f3fbf6;border-color:#9fe0bb}.day.done:after{content:'✓';position:absolute;top:2px;right:6px;color:#2a8a5a;font-weight:700}
.day.today{border-color:#ffb12e;background:linear-gradient(180deg,#fff7d6,#ffe3a0);box-shadow:0 0 0 3px #ffd36a66,0 4px 12px rgba(242,169,59,.45);animation:chipPulse .9s ease-in-out infinite alternate}
.day.big{grid-column:span 2;background:linear-gradient(180deg,#ffe6f4,#ffc6e6)}
.chestbox{position:relative;width:150px;height:130px;margin:30px auto 10px;cursor:pointer}
.chestbox .cbody{position:absolute;left:10px;right:10px;bottom:0;height:72px;border-radius:12px 12px 16px 16px;background:linear-gradient(180deg,#ff8fcb,#d6388a);border:4px solid #f2c25a;box-shadow:inset 0 -8px 0 rgba(120,20,80,.25),0 8px 18px rgba(90,20,90,.35)}
.chestbox .cbody:before{content:'';position:absolute;left:0;right:0;top:22px;height:9px;background:linear-gradient(180deg,#ffe9a0,#e2ad55)}
.chestbox .cbody i{position:absolute;left:50%;top:-6px;width:26px;height:30px;margin-left:-13px;border-radius:6px;background:linear-gradient(180deg,#fff1b8,#e2ad55);border:2px solid #a8701e}
.chestbox .clid{position:absolute;left:6px;right:6px;bottom:66px;height:46px;border-radius:40px 40px 8px 8px;background:linear-gradient(180deg,#ffb3da,#ff5fae);border:4px solid #f2c25a;transform-origin:4% 100%;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.chestbox .cglow{position:absolute;left:-30px;right:-30px;top:-20px;bottom:-10px;background:radial-gradient(closest-side,rgba(255,240,170,.95),rgba(255,200,240,0));opacity:0;transition:opacity .4s}
.chestbox.shake{animation:cShake .55s ease-in-out}
.chestbox.open .clid{transform:rotate(-24deg) translate(-4px,-4px)}.chestbox.open .cglow{opacity:1}
@keyframes cShake{0%,100%{transform:none}20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg) scale(1.04)}}
.cburst span{position:absolute;left:50%;top:45%;width:16px;height:16px;margin:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c8,#f2a93b);border:2px solid #fff;animation:cFly .9s cubic-bezier(.2,.8,.3,1) both}
@keyframes cFly{from{transform:translate(0,0) scale(.3);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}
.cprize{font:700 24px Fredoka;color:#c13dbd;margin-bottom:10px;animation:bubPop .45s cubic-bezier(.2,1.6,.4,1) both}.cprize small{display:block;font:600 13px Fredoka;color:#a070b0}
/* =====================================================================================================
   UI v2 (Sophia's mockups menu_v2/06 home · 05 missions · 04 game over): serif display titles (Playfair Display, bundled),
   glossy pink pill buttons with a gold rim, cream glass cards with gold borders. All text is live HTML.
   ===================================================================================================== */
.v2{justify-content:flex-start;gap:0;padding:calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))}
#home.v2{background:radial-gradient(ellipse 75% 16% at 50% 12%,rgba(255,236,246,.85),rgba(255,226,242,.45) 60%,transparent),linear-gradient(180deg,rgba(236,196,236,.55),rgba(255,220,240,.15) 30%,rgba(255,220,240,0) 60%,rgba(255,210,235,.35))}
#missions.v2{background:linear-gradient(180deg,rgba(255,236,246,.55),rgba(255,226,240,.82) 40%,rgba(255,222,238,.9));backdrop-filter:blur(2px)}
.v2top{position:relative;z-index:3;width:100%;display:flex;justify-content:space-between;align-items:center;min-height:48px}
.coinchip{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 3px;border-radius:22px;background:linear-gradient(180deg,#fffaf3,#ffeede);border:2px solid #efc477;box-shadow:0 3px 10px rgba(150,40,90,.22),inset 0 1px 0 #fff;font:700 19px Fredoka;color:#9b1f4a}
.coinchip img{width:34px;height:34px}
.avbtn{pointer-events:auto;width:56px;height:56px;border-radius:50%;padding:0;border:3px solid #efc477;background:#ffd9ec;overflow:hidden;cursor:pointer;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(150,40,90,.3)}
.avbtn img{width:100%;height:100%;object-fit:cover}
.backbtn{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:2px solid #efc477;background:linear-gradient(180deg,#fffaf3,#ffeede);color:#9b1f4a;font:700 30px/38px Playfair;cursor:pointer;box-shadow:0 3px 10px rgba(150,40,90,.22)}
/* logo (live text): gold serif with a burgundy edge */
.glogo{position:relative;z-index:2;text-align:center;margin-top:-4px;line-height:1}
.glogo .gl{position:relative;display:inline-block;font:800 62px/1 Playfair;letter-spacing:-1px;background:linear-gradient(180deg,#fffaf0 0%,#fbe3a6 30%,#e2a95a 55%,#b9762f 68%,#f6d38c 85%,#fff1c9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.9px #8e2340;filter:drop-shadow(0 1.5px 0 #fff) drop-shadow(0 0 1px #8e2340) drop-shadow(0 5px 8px rgba(130,30,60,.4))}
.glogo .gl i{position:absolute;right:-16px;top:-6px;font-style:normal;font-size:24px;-webkit-text-stroke:0;color:#f6d38c;background:none;-webkit-background-clip:initial}
.glogo .gby{display:flex;align-items:center;justify-content:center;gap:8px;font:600 17px Playfair;color:#8e2340;margin-top:2px;text-shadow:0 0 6px #fff,0 0 10px #fff}
.glogo .gby span{width:42px;height:1.5px;background:linear-gradient(90deg,transparent,#c98d4a)}.glogo .gby span:last-child{transform:scaleX(-1)}
.glogo.sm .gl{font-size:34px}.glogo.sm .gl i{font-size:14px;right:-10px;top:-4px}.glogo.sm .gby{font-size:11px;margin-top:0}.glogo.sm .gby span{width:20px}
/* home */
.clipbtn{position:absolute;z-index:3;right:16px;top:calc(150px + env(safe-area-inset-top));pointer-events:auto;width:60px;height:60px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 4px 8px rgba(150,40,90,.28))}
.clipbtn img{width:100%;height:100%}
.rdot{position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8fb8,#e8186a);border:2px solid #fff;animation:chipPulse 1s ease-in-out infinite alternate}
.clipbtn .fire{position:absolute;left:-10px;bottom:-8px;display:flex;align-items:center;gap:1px;padding:1px 7px 1px 4px;border-radius:12px;background:#fff;border:1.5px solid #efc477;font:700 12px Fredoka;color:#d0306a;box-shadow:0 2px 6px rgba(150,40,90,.25)}
.hstar2{position:relative;z-index:1;flex:1 1 0;min-height:0;width:100%;display:flex;justify-content:center;align-items:flex-end;margin:4px 0 10px}
.hstar2 img{height:100%;max-width:92%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 12px 14px rgba(120,30,80,.28));animation:heroSway 5s ease-in-out infinite alternate;transform-origin:50% 100%}
.hstar2 .hglow{position:absolute;bottom:-2%;width:60%;height:10%;left:20%;background:radial-gradient(closest-side,rgba(160,40,110,.28),transparent);}
@keyframes heroSway{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg) translateY(-2px)}}
.pbtn{position:relative;z-index:2;pointer-events:auto;cursor:pointer;border-radius:999px;padding:12px 34px;font:700 20px Fredoka;letter-spacing:1px;color:#fff;
  background:linear-gradient(180deg,#ffb3d6 0%,#ff67ab 34%,#f2338a 62%,#d81b72 100%);border:3px solid #f3cf86;
  box-shadow:0 0 0 2px rgba(255,255,255,.8),0 6px 0 #a6145a,0 10px 22px rgba(170,20,90,.38),inset 0 -6px 12px rgba(150,0,70,.25);text-shadow:0 2px 0 rgba(150,10,70,.45);transition:transform .08s}
.pbtn:before{content:'';position:absolute;left:8%;right:8%;top:4px;height:42%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.05));pointer-events:none}
.pbtn:active{transform:translateY(3px);box-shadow:0 0 0 2px rgba(255,255,255,.8),0 3px 0 #a6145a,0 6px 14px rgba(170,20,90,.35)}
.pbtn:disabled{filter:saturate(.35) brightness(1.05);opacity:.85}
.pbtn.big{width:min(86%,400px);font-size:42px;padding:12px 0 14px;letter-spacing:2px;-webkit-text-stroke:0}
.pbtn .tri{font-size:.75em;vertical-align:.08em}
.tiles2{position:relative;z-index:2;width:100%;max-width:460px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.tile2{pointer-events:auto;cursor:pointer;aspect-ratio:1/0.92;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:6px 2px 8px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,252,248,.96),rgba(255,238,236,.92));border:2px solid #efc477;box-shadow:0 4px 12px rgba(150,40,90,.2),inset 0 1px 0 #fff;font:600 12.5px Fredoka;color:#9b1f4a}
.tile2 img{flex:1 1 0;min-height:0;max-width:78%;object-fit:contain}
/* cards, titles */
.gcard{width:100%;max-width:440px;background:linear-gradient(180deg,rgba(255,252,250,.9),rgba(255,242,240,.86));border:2px solid #efc477;border-radius:24px;box-shadow:0 8px 24px rgba(150,40,90,.18),inset 0 1px 0 #fff;backdrop-filter:blur(6px)}
.stitle,.ctit{margin:14px 0 0;font:800 40px/1.05 Playfair;color:#8a1c3c;text-align:center;letter-spacing:-.5px;text-shadow:0 2px 0 #fff,0 4px 10px rgba(255,255,255,.6)}
.bowline{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 10px}.bowline span{width:80px;height:1.5px;background:linear-gradient(90deg,transparent,#c98d4a)}.bowline span:last-child{transform:scaleX(-1)}
.bowline img{width:24px}
.mlist2{padding:4px 14px}
.mrow2{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(201,141,74,.3)}.mrow2:last-child{border-bottom:0}
.mrow2 .mic{width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center;font-size:30px}.mrow2 .mic img{max-width:100%;max-height:100%}
.mrow2 .mtx{flex:1;min-width:0}.mtop{display:flex;justify-content:space-between;gap:6px;font:600 15px Fredoka;color:#5a1530}.mtop b{color:#c01d5c;font-weight:700}
.mbar2{position:relative;height:16px;margin-top:6px;border-radius:9px;background:#f6dfe3;box-shadow:inset 0 1px 2px rgba(120,30,60,.2)}
.mbar2 div{height:100%;border-radius:9px;background:linear-gradient(180deg,#ff8cc0,#e8247a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.mbar2 small{position:absolute;right:8px;top:0;font:600 11px/16px Fredoka;color:#8a1c3c}
.mrow2.done .mbar2 div{background:linear-gradient(180deg,#8fe0b0,#2fae6a)}.mrow2.done .mtop b{color:#2a8a5a}
.mreset{font:500 11.5px Fredoka;color:#a0607a;margin:5px 0 0}
.stitle2{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:12px 0 8px;font:800 30px Playfair;color:#8a1c3c}
.stitle2 .line{flex:1;max-width:60px;height:1.5px;background:linear-gradient(90deg,transparent,#c98d4a)}.stitle2 .line:last-child{transform:scaleX(-1)}.stitle2 .fl{font-size:32px}
.srow{width:100%;max-width:460px;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.sday{position:relative;display:flex;flex-direction:column;align-items:center;padding:6px 1px 7px;border-radius:14px;background:linear-gradient(180deg,rgba(255,252,250,.95),rgba(255,240,240,.9));border:1.5px solid #efc477;box-shadow:0 3px 8px rgba(150,40,90,.14)}
.sday small{font:600 12px Fredoka;color:#8a1c3c}.sday img{height:30px;margin:4px 0 2px;object-fit:contain;max-width:90%}.sday b{font:700 14px Fredoka;color:#5a1530}
.sday em{font:600 8.5px Fredoka;font-style:normal;color:#b0607a;min-height:10px}
.sday .ck{width:17px;height:17px;border-radius:50%;margin-top:2px;background:#fff;border:1.5px solid #e6c9cf}
.sday.done .ck{background:radial-gradient(circle at 35% 35%,#ff86b8,#e0196c);border-color:#fff}.sday.done .ck:after{content:'✓';display:block;color:#fff;font:700 11px/15px Fredoka;text-align:center}
.sday.today{background:linear-gradient(180deg,#ffb5d7,#ff6aab);border-color:#f3cf86;box-shadow:0 0 0 2px #fff,0 6px 14px rgba(220,30,110,.35);transform:translateY(-3px)}
.sday.today small,.sday.today b{color:#fff}.sday.today em{color:#fff2f8}
.sday.claim{cursor:pointer;animation:chipPulse .8s ease-in-out infinite alternate;pointer-events:auto}
.sday .tag{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:2px 7px;border-radius:8px;background:linear-gradient(180deg,#ff5f9f,#d8186c);border:1.5px solid #f3cf86;color:#fff;font:700 8.5px Fredoka;letter-spacing:.3px}
.gwarn2{margin:16px 0 0;padding:4px 12px;border-radius:12px;background:rgba(255,248,226,.9);border:1px solid #efc477;color:#9a5a2a;font:600 11.5px Fredoka;text-align:center}
.chestrow{flex:1 1 0;min-height:0;width:100%;max-width:460px;display:flex;align-items:center;gap:6px;margin-top:6px}
.chestwrap{position:relative;flex:0 0 46%;height:100%;max-height:220px;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}
.chestwrap img{position:relative;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(150,40,90,.3))}
.chestwrap .cglow{position:absolute;inset:-10% -15%;background:radial-gradient(closest-side,rgba(255,240,170,.95),rgba(255,200,240,0));opacity:0;transition:opacity .4s}
.chestwrap.ready img{animation:chestIdle 1.6s ease-in-out infinite alternate}@keyframes chestIdle{to{transform:translateY(-4px) rotate(-1.5deg)}}
.chestwrap.shake img{animation:cShake .55s ease-in-out}.chestwrap.pop img{animation:chestPop .5s cubic-bezier(.2,1.6,.4,1)}.chestwrap.pop .cglow,.chestwrap.opened .cglow{opacity:.9}
.chestwrap.opened img{filter:drop-shadow(0 8px 12px rgba(150,40,90,.3)) saturate(.85)}
@keyframes chestPop{0%{transform:scale(.9)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.chestside{flex:1;display:flex;flex-direction:column;align-items:center}
.chestside .ctitle{font:800 28px/1.05 Playfair;color:#8a1c3c;text-align:center}.chestside .bowline{margin:2px 0 0}.chestside .bowline span{width:40px}
.chestside .csub{font:500 14px Fredoka;color:#8a4a5a;margin-bottom:10px;text-align:center}.chestside .csub b{color:#c01d5c}
.chestside .pbtn{width:100%;font-size:26px;padding:10px 0}
.flytxt{position:absolute;left:50%;top:10%;transform:translateX(-50%);white-space:nowrap;z-index:5;font:700 18px Fredoka;color:#c01d5c;text-shadow:0 2px 0 #fff,0 0 10px #fff;animation:flyUp 1.4s ease-out both;pointer-events:none}
@keyframes flyUp{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50px) scale(1)}}
/* game over v2 */
#over.over2{background:linear-gradient(180deg,rgba(255,235,245,.28),rgba(255,220,240,0) 40%,rgba(255,210,235,.25))}
.over2 .ctit{margin-top:4px;font-size:46px}
.recpill{display:flex;align-items:center;gap:7px;padding:5px 22px 6px 14px;border-radius:999px;background:linear-gradient(180deg,#ff8cc0,#e0247a);border:2px solid #f3cf86;box-shadow:0 0 0 2px #fff,0 5px 12px rgba(200,30,100,.35);font:600 19px Playfair;color:#fff;animation:bubPop .5s cubic-bezier(.2,1.6,.4,1) .2s both}
.recpill img{width:26px}
.scard{margin-top:10px;min-width:62%;padding:6px 28px 4px;text-align:center;border-radius:26px;background:linear-gradient(180deg,rgba(255,252,250,.95),rgba(255,240,238,.92));border:2px solid #efc477;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 8px 22px rgba(150,40,90,.2)}
.scard small{font:600 14px Fredoka;letter-spacing:2px;color:#8a1c3c}.scard div{font:800 64px/1.05 Playfair;color:#b0174f;text-shadow:0 2px 0 #fff}
.ochips{display:flex;gap:12px;margin-top:10px}
.ochip{pointer-events:auto;display:flex;align-items:center;gap:7px;padding:5px 18px 5px 6px;border-radius:999px;background:linear-gradient(180deg,rgba(255,252,250,.95),rgba(255,240,238,.92));border:2px solid #efc477;box-shadow:0 4px 10px rgba(150,40,90,.18);font:600 17px Fredoka;color:#8a1c3c;cursor:pointer}
.ochip img{width:34px;height:34px;object-fit:contain}
.ounlock{margin-top:8px;font:600 12.5px Fredoka;color:#8a1c3c;background:rgba(255,250,240,.85);border-radius:12px;padding:3px 12px;text-align:center}
.over2 .sambig{flex:1 1 0;min-height:0;max-height:none;max-width:460px;margin-top:6px}
.over2 .sambig img{left:50%;margin-left:-44%;max-width:64%;height:100%;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.over2 .sambig .sglow{left:6%;width:64%}
.over2 .sambig .sbub{right:2%;top:10%;width:40%;border-radius:22px;border:1.5px solid #efc477;background:rgba(255,252,250,.97);text-align:center;font:500 15.5px/1.3 Playfair;color:#5a1530;padding:10px 12px}
.over2 .sambig .sbub b{display:none}.over2 .sambig .sbub:before{border-right-color:#fffcfa}
.over2 #againBtn{margin-top:4px;font-size:38px}
.cbtn{pointer-events:auto;cursor:pointer;margin-top:12px;min-width:44%;padding:8px 26px;border-radius:999px;background:linear-gradient(180deg,#fffaf3,#ffece6);border:2px solid #efc477;box-shadow:0 4px 10px rgba(150,40,90,.18),inset 0 1px 0 #fff;font:700 17px Fredoka;letter-spacing:1px;color:#9b1f4a}
/* profile & settings sheet */
.mcard.me{text-align:left;border-color:#efc477;background:linear-gradient(180deg,#fffaf7,#ffeef0)}
.mehead{display:flex;gap:12px;align-items:center}.meface{width:72px;height:72px;border-radius:50%;overflow:hidden;border:3px solid #efc477;flex:none}.meface img{width:100%;height:100%;object-fit:cover}
.meinfo{flex:1}.meinfo .pname{font:800 24px Playfair;color:#8a1c3c}.meinfo .lvl{font:500 12px Fredoka;color:#a0607a}
.mestats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.mestats div{text-align:center;padding:6px 2px;border-radius:14px;background:#fff;border:1.5px solid #f1d6b0}
.mestats small{display:block;font:600 10px Fredoka;color:#a0607a}.mestats b{font:700 20px Fredoka;color:#b0174f}
.mesw{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.swbtn{pointer-events:auto;cursor:pointer;padding:9px 4px;border-radius:14px;border:2px solid #efc477;background:linear-gradient(180deg,#ffb3d6,#f2338a);color:#fff;font:600 13px Fredoka}
.swbtn.off{background:#f3e3e8;color:#a0607a;text-decoration:none}
.mcard.me .pbtn{width:100%;font-size:18px}.mcard.me .cbtn{width:100%;margin-top:10px}
/* small phones */
@media (max-height:700px){
  .glogo .gl{font-size:48px}.clipbtn{top:calc(124px + env(safe-area-inset-top));width:52px;height:52px}.pbtn.big{font-size:34px;padding:9px 0 11px}.tiles2{margin-top:16px;gap:8px}.tile2{font-size:11px;border-radius:16px}
  .stitle{font-size:30px;margin-top:6px}.bowline{margin-bottom:6px}.mrow2{padding:6px 0}.mrow2 .mic{width:38px;height:38px}.mtop{font-size:13.5px}.mbar2{height:13px;margin-top:4px}.mbar2 small{line-height:13px;font-size:10px}
  .stitle2{font-size:24px;margin:8px 0 6px}.sday img{height:22px}.sday b{font-size:12px}.chestside .ctitle{font-size:22px}.chestside .pbtn{font-size:21px;padding:8px 0}.gwarn2{margin-top:13px;font-size:10.5px}
  .over2 .ctit{font-size:36px}.recpill{font-size:16px;padding:3px 18px 4px 12px}.scard div{font-size:48px}.ochip{font-size:15px;padding:3px 14px 3px 5px}.ochip img{width:28px;height:28px}.over2 #againBtn{font-size:30px}.cbtn{margin-top:8px;padding:6px 22px;font-size:15px}
  .over2 .sambig .sbub{font-size:13.5px;padding:7px 9px}
}
/* =====================================================================================================
   UI v2 — « soft pale-pink clouds » direction (Sophia's pick: menu_v2/03 home · 02 missions · 07 game over).
   Backdrops = the mockups with every baked element removed (tools/ui_bg.py); all text/UI on top is live HTML.
   ===================================================================================================== */
#home.v2{background:url(../../assets/ui/bg/clouds_03.jpg) center/cover no-repeat}
#missions.v2{background:url(../../assets/ui/bg/clouds_02.jpg) center/cover no-repeat;backdrop-filter:none}
#over.over2{background:url(../../assets/ui/bg/clouds_07.jpg) center/cover no-repeat}
.glogo .gstar{display:block;font-style:normal;color:#d9a85a;font-size:16px;line-height:1;margin-bottom:-2px;text-shadow:0 0 6px #fff}
.glogo .gl{font:700 60px/1 Playfair;letter-spacing:-1.5px;background:none;color:#b3124f;-webkit-text-stroke:0;filter:none;text-shadow:0 2px 0 rgba(255,255,255,.9),0 6px 16px rgba(255,255,255,.7)}
.glogo .gby{font:500 15px Playfair;color:#9b2350;margin-top:3px;text-shadow:0 0 6px #fff}
.glogo.sm .gl{font-size:34px}.glogo.sm .gstar{font-size:10px}.glogo.sm .gby{font-size:10.5px;margin-top:1px}
.coinchip{background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(200,110,150,.18),inset 0 1px 0 #fff;backdrop-filter:blur(8px);color:#7a3a50;font-weight:600}
.avbtn{border:3px solid #fff;box-shadow:0 0 0 1.5px #f1c9d8,0 6px 16px rgba(200,110,150,.3)}
.backbtn{background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.95);color:#9b2350;backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(200,110,150,.2)}
.clipbtn{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(200,110,150,.22);filter:none;display:flex;align-items:center;justify-content:center}
.clipbtn img{width:70%;height:70%;border-radius:10px}
.clipbtn .rdot{top:0;right:0;width:13px;height:13px}
/* pale glossy pink pill (glass) with a thin warm rim, play icon on the left */
.pbtn{background:linear-gradient(180deg,rgba(255,196,222,.96) 0%,rgba(255,140,186,.95) 45%,rgba(242,104,160,.95) 100%);border:2px solid rgba(255,236,214,.95);
  box-shadow:0 0 0 1.5px rgba(232,176,120,.55),0 0 22px rgba(255,150,200,.55),0 10px 24px rgba(220,80,140,.28),inset 0 -8px 16px rgba(220,60,130,.22),inset 0 2px 0 rgba(255,255,255,.7);text-shadow:0 1px 3px rgba(190,40,100,.35)}
.pbtn:before{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0));height:46%}
.pbtn:active{box-shadow:0 0 0 1.5px rgba(232,176,120,.55),0 4px 12px rgba(220,80,140,.3)}
.pbtn.big{font:600 44px Fredoka;letter-spacing:1.5px;display:flex;align-items:center;justify-content:center;gap:16px}
.pbtn .play{width:0;height:0;border-left:30px solid #fff;border-top:19px solid transparent;border-bottom:19px solid transparent;filter:drop-shadow(0 1px 3px rgba(190,40,100,.35));margin-left:-10px}
/* bottom bar: one cream glass bar with 4 icons */
.tiles2.bar{gap:0;padding:10px 6px 8px;border-radius:26px;background:rgba(255,250,250,.6);border:1.5px solid rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(200,110,150,.2),inset 0 1px 0 #fff;backdrop-filter:blur(10px)}
.tiles2.bar .tile2{background:none;border:0;box-shadow:none;aspect-ratio:auto;height:74px;border-radius:16px;font:500 12.5px Fredoka;color:#7a3a50;padding:2px 0 0}
.tiles2.bar .tile2 img{max-width:58%}
/* glass cards */
.gcard{background:rgba(255,255,255,.5);border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(232,190,150,.35),0 10px 28px rgba(200,110,150,.16),inset 0 1px 0 #fff;backdrop-filter:blur(10px)}
.mrow2{border-bottom:1px solid rgba(220,170,180,.35)}.mtop{color:#6a2a40;font-weight:500}.mtop b{color:#7a3a50;font-weight:500;font-size:13px}
.mbar2{background:rgba(240,215,225,.8)}.mbar2 div{background:linear-gradient(180deg,#ffa6cc,#ec5d9a)}
.stitle,.ctit{font-weight:700;color:#b3124f;text-shadow:0 2px 0 rgba(255,255,255,.9),0 6px 16px rgba(255,255,255,.8)}
.stitle2{color:#b3124f;font-weight:700}
.bowline span,.stitle2 .line{background:linear-gradient(90deg,transparent,#d9a85a)}
.sday{background:rgba(255,255,255,.5);border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(232,190,150,.3),0 4px 10px rgba(200,110,150,.12);backdrop-filter:blur(8px)}
.sday small{color:#7a3a50;font-weight:500}.sday b{color:#6a2a40;font-weight:600}
.sday.today{background:linear-gradient(180deg,rgba(255,200,224,.92),rgba(255,160,200,.9));border-color:#fff;box-shadow:0 0 0 1.5px #f4a9c9,0 6px 16px rgba(236,93,154,.3)}
.sday.today small,.sday.today b{color:#8a1c3c}.sday.today em{color:#9b2350}
.sday .tag{background:linear-gradient(180deg,#ff8fbd,#e6528f);border:1.5px solid #fff}
.gwarn2{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.95);color:#9b2350;backdrop-filter:blur(6px)}
.chestrow{flex-direction:column;justify-content:flex-end;gap:0;margin-top:4px}
.chestwrap{flex:1 1 0;min-height:0;width:60%;max-height:200px}
.chestside .ctitle{font-size:26px;color:#b3124f;font-weight:700}.chestside .csub{margin-bottom:8px;color:#9a5a70}.chestside .pbtn{width:min(78%,340px);font:600 30px Fredoka;padding:9px 0}
.chestside .bowline{display:none}
.chestside .ctitle:after{content:'';display:block;width:150px;height:1.5px;margin:4px auto 0;background:linear-gradient(90deg,transparent,#d9a85a,transparent)}
/* game over (07): no score card, big crimson score, chips with a divider, Samira centred */
.over2 .ctit{font-size:48px;margin-top:6px}
.recpill{background:linear-gradient(180deg,rgba(255,170,205,.96),rgba(240,98,156,.95));border:1.5px solid #fff;box-shadow:0 0 0 1.5px rgba(232,176,120,.5),0 0 18px rgba(255,150,200,.5);font:600 19px Playfair}
.scard{background:none;border:0;box-shadow:none;padding:2px 0 0;margin-top:8px}
.scard small{font:500 13px Fredoka;letter-spacing:2.5px;color:#9b2350}.scard div{font:700 70px/1 Playfair;color:#b3124f;text-shadow:0 2px 0 rgba(255,255,255,.9),0 8px 20px rgba(255,255,255,.8)}
.ochips{align-items:center;gap:16px;margin-top:6px}
.ochip{background:none;border:0;box-shadow:none;padding:2px 4px;font:500 18px Playfair;color:#7a2440}
.osep{width:1px;height:30px;background:linear-gradient(180deg,transparent,#d9a85a,transparent)}
.ounlock{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);color:#9b2350}
.over2 .sambig img{left:50%;margin-left:-32%;max-width:64%}
.over2 .sambig .sglow{left:18%;width:64%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,230,240,0))}
.over2 .sambig .sbub{right:1%;top:4%;width:36%;background:rgba(255,255,255,.88);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(232,190,150,.4),0 8px 20px rgba(200,110,150,.2)}
.over2 .sambig .sbub:before{border-right-color:rgba(255,255,255,.88)}
.over2 #againBtn{font-size:40px}
.cbtn{background:rgba(255,255,255,.6);border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(232,190,150,.45),0 6px 16px rgba(200,110,150,.18);backdrop-filter:blur(8px);color:#9b2350;font-weight:600}
@media (max-height:700px){
  .glogo .gl{font-size:46px}.pbtn.big{font-size:34px}.pbtn .play{border-left-width:24px;border-top-width:15px;border-bottom-width:15px}.tiles2.bar .tile2{height:62px;font-size:11px}
  .over2 .ctit{font-size:38px}.scard div{font-size:54px}.ochip{font-size:15px}.over2 #againBtn{font-size:32px}.chestside .ctitle{font-size:21px}.chestside .pbtn{font-size:24px;padding:7px 0}.chestwrap{max-height:150px}
}
.over2 .sambig img{left:14%;width:72%;max-width:none;margin-left:0;object-position:center bottom}
.over2 .sambig .sglow{left:14%;width:72%}
.chestside .pbtn:disabled{filter:none;opacity:1;background:rgba(255,255,255,.6);color:#b3124f;text-shadow:none;font-size:22px;white-space:nowrap;box-shadow:0 0 0 1px rgba(232,190,150,.45),0 6px 16px rgba(200,110,150,.18)}
.chestside .pbtn:disabled:before{display:none}
/* Home Sofia idle life: weight shift/sway on the wrapper, near-uniform breathing on the image (feet anchored, no face warp),
   occasional sparkles; gesture frames (#hGest, src/app/idle.js) swap in over the same box. */
.hstar2 .hidle{position:relative;height:100%;width:100%;display:flex;justify-content:center;align-items:flex-end;transform-origin:50% 100%;animation:heroShift 7.2s ease-in-out infinite}
.hstar2 .hidle img{animation:heroBreath 3.8s ease-in-out infinite}
.hstar2 .hidle #hGest{position:absolute;bottom:0;left:0;right:0;margin:auto;height:100%;max-width:92%;animation:heroBreath 3.8s ease-in-out infinite}
.hstar2 .hidle #hHero.gesturing{visibility:hidden}
@keyframes heroBreath{0%,100%{transform:scale(1,1)}45%{transform:scale(1.006,1.014)}}
@keyframes heroShift{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(2px) rotate(.55deg)}50%{transform:translateX(0) rotate(0)}75%{transform:translateX(-2px) rotate(-.55deg)}}
.hspark{position:absolute;inset:0;pointer-events:none;z-index:2}
.hspark i{position:absolute;width:18px;height:18px;margin:-9px;opacity:0;background:radial-gradient(closest-side,#fff 0,#fff 18%,rgba(255,220,240,.0) 70%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 6px #ffc2dc);animation:twinkle 6.4s ease-in-out infinite}
.hspark i:nth-child(2){animation-duration:7.9s;animation-delay:2.1s}.hspark i:nth-child(3){animation-duration:9.3s;animation-delay:4.4s;width:14px;height:14px;margin:-7px}.hspark i:nth-child(4){animation-duration:8.6s;animation-delay:1.2s;width:12px;height:12px;margin:-6px}
@keyframes twinkle{0%,80%,100%{opacity:0;transform:scale(.2) rotate(0)}86%{opacity:1;transform:scale(1) rotate(20deg)}92%{opacity:0;transform:scale(.4) rotate(45deg)}}
.hspark i:nth-child(1){animation-delay:-3.6s}.hspark i:nth-child(4){animation-delay:-4.6s}
/* official logo (assets/ui/logo_glamrun.png, cut by tools/logo_cut.py) */
.glogo.img{margin:0;font-size:0;line-height:0}
.glogo.img img{display:block;margin:0 auto;height:min(21vh,172px);width:auto;max-width:78vw;filter:drop-shadow(0 6px 12px rgba(190,60,120,.22))}
.glogo.img.sm img{height:62px;max-width:46vw}
#missions .glogo.img.sm img{height:58px}
@media (max-height:700px){.glogo.img img{height:min(20vh,128px)}.glogo.img.sm img{height:50px}#missions .glogo.img.sm img{height:46px}}
/* ---- Missions, decluttered (no header logo, no dividers, dot streak + one reward card, quiet Points Glam line) ---- */
#missions .mbody{flex:1 1 auto;min-height:0;width:100%;max-width:440px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;gap:14px;padding:4px 0 10px}
#missions .msec{width:100%;display:flex;flex-direction:column;align-items:center}
#missions .stitle{margin:0 0 14px;font-size:36px}
#missions .mlist2{padding:2px 16px}
#missions .mrow2{padding:12px 0}
#missions .mbar2 small{display:none}
#missions .stitle2{margin:0 0 12px;font-size:26px;gap:8px}#missions .stitle2 .fl{font-size:26px}
.sdots{display:flex;justify-content:center;gap:10px;margin-bottom:16px}
.sdots i{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 12px Fredoka;font-style:normal;color:#b07a8c;background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(232,190,150,.3)}
.sdots i.done{background:linear-gradient(180deg,#ffa6cc,#ec5d9a);color:#fff;border-color:#fff;font-weight:700}
.sdots i.today{background:#fff;color:#b3124f;font-weight:700;box-shadow:0 0 0 2.5px #f08bb8,0 4px 12px rgba(236,93,154,.35)}
.tcard{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;max-width:360px}
.tcard img{height:40px;flex:none}
.tcard .ttx{flex:1;display:flex;flex-direction:column;line-height:1.15}.tcard small{font:500 12px Fredoka;color:#9a5a70}.tcard b{font:600 19px Fredoka;color:#6a2a40}
.tcard .pbtn{width:auto;flex:none;font:600 17px Fredoka;padding:9px 16px;letter-spacing:.3px}
.tcard.claim{box-shadow:0 0 0 2px #f4a9c9,0 8px 22px rgba(236,93,154,.28),inset 0 1px 0 #fff}
.tcard .tok{font:600 14px Fredoka;color:#b3124f;text-align:right;display:flex;flex-direction:column}.tcard .tok small{font-size:11px;color:#a07084;font-weight:500}
#missions .gwarn2{margin:12px 0 0;padding:0;background:none;border:0;backdrop-filter:none;font:500 11.5px Fredoka;color:#a0607a;opacity:.9}
#missions .chestrow{flex:0 0 auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;max-width:360px;padding:8px 14px 8px 6px;margin:0}
#missions .chestwrap{flex:0 0 112px;width:112px;height:96px;max-height:none}
#missions .chestside{align-items:flex-start;flex:1}
#missions .chestside .ctitle{font-size:22px;text-align:left}#missions .chestside .ctitle:after{display:none}
#missions .chestside .csub{margin:2px 0 8px;text-align:left;font-size:13px}
#missions .chestside .pbtn{width:auto;font:600 17px Fredoka;padding:8px 22px}
#missions .chestside .pbtn:disabled{font-size:15px}
@media (max-height:700px){#missions .stitle{font-size:28px;margin-bottom:8px}#missions .mrow2{padding:7px 0}#missions .stitle2{font-size:21px;margin-bottom:8px}
  .sdots{gap:8px;margin-bottom:10px}.sdots i{width:24px;height:24px;font-size:11px}.tcard{padding:7px 10px 7px 12px}.tcard img{height:32px}.tcard b{font-size:16px}
  #missions .gwarn2{margin-top:8px;font-size:10.5px}#missions .chestwrap{flex-basis:88px;width:88px;height:72px}#missions .chestside .ctitle{font-size:19px}#missions .mbody{gap:8px}}
/* ---- Game over: no top logo (screen breathes), no white glow box behind Samira, only a short fade at her waist ---- */
.over2 .sambig img{filter:drop-shadow(0 3px 4px rgba(160,70,100,.16))}
.over2 .sambig .sglow{display:none}
.over2 .sambig img{-webkit-mask-image:linear-gradient(180deg,#000 91%,transparent);mask-image:linear-gradient(180deg,#000 91%,transparent)}
.over2 .ctit{margin-top:22px}
.over2 .sambig{margin-bottom:-26px}.over2 #againBtn{position:relative;z-index:2}   /* her waist cut tucks behind REJOUER */
.sdots i.done.today{background:linear-gradient(180deg,#ffa6cc,#ec5d9a);color:#fff}
/* logo without the baked « by Fateli » + premium « BY FATELI » signature (inline SVG: gold-foil serif caps, gold lines + diamonds, shine sweep) */
.glogo.img .lgw{position:relative;display:block;width:fit-content;margin:0 auto}
.glogo.img .sig{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(90,10,50,.5))}
.glogo.img .sig .sgl{transform-box:fill-box;transform-origin:100% 50%}.glogo.img .sig .sgr{transform-box:fill-box;transform-origin:0 50%}
.glogo.img .lshine{position:absolute;inset:0;pointer-events:none;opacity:var(--sho,0);mix-blend-mode:screen;
  -webkit-mask:url(../../assets/ui/logo_glamrun_nosig.png) center/100% 100% no-repeat;mask:url(../../assets/ui/logo_glamrun_nosig.png) center/100% 100% no-repeat;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,246,220,.9) 50%,rgba(255,255,255,0) 60%) no-repeat;background-size:300% 100%;background-position:var(--sh,100%) 0}

/* ---- discreet language switcher (empire.fatelibeauty.com style): small dark pill 'EN ▾' + short dropdown ---- */
.lgdd{position:relative;display:inline-block;direction:ltr;z-index:5}
.lgpill{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 11px;border-radius:999px;background:rgba(17,17,19,.65);border:1px solid rgba(255,255,255,.25);color:#e9e4da;font:500 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.12em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lgpill svg{flex:none;opacity:.8}.lgdd.open .lgpill{border-color:rgba(214,177,106,.7);color:#f0dca8}
.lgdd.open .lgpill svg:last-child{transform:rotate(180deg)}
.lglist{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-4px);min-width:150px;padding:5px;border-radius:14px;background:rgba(17,17,20,.96);border:1px solid rgba(214,177,106,.35);box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;display:flex;flex-direction:column}
.lgdd.open .lglist{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.lgopt{all:unset;box-sizing:border-box;display:block;width:100%;padding:10px 12px;border-radius:9px;color:#d9d4cb;font:400 14px/1.1 Arial,Helvetica,sans-serif;letter-spacing:.02em;cursor:pointer;text-align:start}
.lgopt:hover,.lgopt:focus-visible{background:rgba(255,255,255,.06)}
.lgopt.on{color:#e6c987}.lgopt.on::after{content:' ✓';font-size:11px}
#pLangs,#meLangs,#p2langs{display:flex;justify-content:center;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
#avatarStep .avmsg,#avatarStep .avbar{display:none!important}
#avatarStep .avtitle{font-weight:400;letter-spacing:.02em;line-height:1.45;max-width:30ch;margin-inline:auto}

/* ---- v3 onboarding (lux themes only; Rose Glam untouched): crisp, readable, black/platinum/gold ---- */
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* crispness: no backdrop blur / glow shadows / filters on the onboarding layers (iOS rasterises blurred layers softly) */
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile :is(.card,.steps span,.btn,.cbtn,.avcheck,.lgpill){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile .card{background:linear-gradient(180deg,#171413,#0e0d0d)!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile *{text-shadow:none!important}
/* name field: solid black text on white, grey placeholder, >=16px (no iOS focus zoom) */
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile input#pname{background:#fff!important;color:#111!important;-webkit-text-fill-color:#111!important;opacity:1!important;caret-color:#111;font:500 18px/1.2 Archivo,'Helvetica Neue',system-ui,sans-serif!important;border:1px solid rgba(215,181,109,.75)!important;border-radius:14px!important;box-shadow:none!important;padding:13px 16px!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile input#pname::placeholder{color:#8e8e93!important;-webkit-text-fill-color:#8e8e93!important;opacity:1}
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile input#pname:focus{border-color:#d7b56d!important;box-shadow:0 0 0 3px rgba(215,181,109,.22)!important}
/* language: discreet pill instead of the big row (label hidden) */
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile .optlbl{display:none}
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile #pLangs{margin-top:12px}
/* disabled buttons: dark pill with thin gold edge (not greyed-out) */
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile .btn:disabled{opacity:1!important;filter:none!important;background:rgba(17,16,16,.92)!important;color:rgba(240,217,162,.7)!important;border:1px solid rgba(215,181,109,.5)!important;box-shadow:none!important}
/* avatar step: platinum/gold ring, dark inner, gold checkboxes */
:root[data-theme]:not([data-theme="rose"]) body.g3d .avring{background:conic-gradient(from 200deg,#f4f3ef,#d7b56d,#8a6a32,#e8e8e6,#c9a15a,#f4f3ef)!important;box-shadow:0 0 0 1px rgba(215,181,109,.55),0 12px 28px rgba(0,0,0,.55)!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avframe.busy .avring{background:conic-gradient(#f4f3ef,#d7b56d 25%,#8a6a32 50%,transparent 68%,#f4f3ef)!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avinner{inset:5px!important;background:radial-gradient(circle at 50% 35%,#24211f 0,#141212 60%,#0c0b0b 100%)!important;box-shadow:inset 0 0 0 1px rgba(215,181,109,.35)!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avph{color:#e8e8e6!important;font:500 15px/1.2 Archivo,'Helvetica Neue',system-ui,sans-serif!important;letter-spacing:.03em}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avph small{color:#9b9da2!important;font-weight:400!important;font-size:12px!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avph .avicon{color:#d7b56d}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avframe::before,:root[data-theme]:not([data-theme="rose"]) body.g3d .avframe::after{color:#d7b56d!important;text-shadow:none!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avcheck{align-items:center!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(232,232,230,.16)!important;border-radius:12px!important;color:#e8e8e6!important;font:400 14px/1.3 Archivo,'Helvetica Neue',system-ui,sans-serif!important;padding:10px 12px!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avcheck b{color:inherit!important;font-weight:inherit!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avcheck .box{width:20px!important;height:20px!important;border-radius:6px!important;border:1px solid rgba(215,181,109,.85)!important;background:transparent!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avcheck input:checked+.box{background:#d7b56d!important;border-color:#d7b56d!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avcheck input:checked+.box::after{color:#111!important;font:700 13px Archivo,system-ui,sans-serif!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avcheck:has(input:checked){border-color:rgba(215,181,109,.55)!important;background:rgba(215,181,109,.06)!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avnote{color:#9b9da2!important;font-weight:400!important} :root[data-theme]:not([data-theme="rose"]) body.g3d .averr{color:#f0a8a0!important;font-weight:500!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avgo{font-size:15px!important;letter-spacing:2px!important;padding:14px 18px!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d #avatarStep .avtitle{color:#e8e8e6!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile .steps{gap:5px;max-width:100%;flex-wrap:nowrap}
:root[data-theme]:not([data-theme="rose"]) body.g3d #profile .steps span{padding:5px 9px!important;font-size:10px!important;letter-spacing:1.2px!important;white-space:nowrap}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avmagic{background:radial-gradient(circle at 50% 45%,#2a2522 0,#141212 65%,#0c0b0b 100%)!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avmagic i::before{text-shadow:none!important;color:#d7b56d}
:root[data-theme]:not([data-theme="rose"]) body.g3d .avmagic::after{content:'✦'!important;color:#f0d9a2;font-size:34px!important}
:root[data-theme]:not([data-theme="rose"]) body.g3d #avatarStep .avtitle{font-size:18px!important;line-height:1.5!important;margin-top:10px!important}

/* v6: avatar "being prepared" block - text as one tidy block, clear gap above the outfit button */
#avatarStep .av-soon .avtitle{margin-bottom:22px!important;max-width:28ch}
#avatarStep .av-soon #avSoonBtn{margin-top:0}
#prof2 .lhow{display:block;margin:18px auto 0;padding:12px 30px;border-radius:999px;border:0;font:700 14px Fredoka,system-ui;letter-spacing:.14em;text-transform:uppercase;color:#1a140b;background:linear-gradient(180deg,#fff,#e9e3d6);box-shadow:0 0 0 2px #e3c27e}
#over .onear{margin:10px auto 4px;font:italic 600 17px 'Playfair',Georgia,serif;color:#e3c27e;text-align:center}
#over .omiss{display:flex;gap:6px;align-items:center;justify-content:center;margin:6px auto 12px;padding:8px 16px;border-radius:999px;border:1px solid rgba(227,194,126,.55);background:rgba(0,0,0,.45);color:#f3ead7;font:500 13px Fredoka,system-ui}
#over .omiss.hidden,#over .onear.hidden{display:none}
#over .omiss b{color:#e3c27e;font-weight:600}#over .omiss i{font-style:normal;opacity:.8}
#hud .pop.gold{color:#ffe7a8}
