/* ============================================================
   CARMEX COOL-DOWN  —  styles
   Brand: PMS186 red #C91235 · Process Yellow #FFE100 · Black #2C2A29
   Cool accent (Pineapple Mint / Naturally teal) #00C48D · sky #39C6E6
   Type: Montserrat (Gotham substitute)
   ============================================================ */
:root{
  --red:#C91235; --red-dark:#8E0C25; --red-lt:#ED4258;
  --yellow:#FFE100; --yellow-deep:#F4C600; --yellow-lt:#FFF06B;
  --black:#2C2A29; --teal:#00C48D; --sky:#39C6E6;
  --cool:0;
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glass:rgba(255,255,255,.62);
  --glass-bd:rgba(255,255,255,.75);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--black);background:var(--yellow);
  overflow:hidden;position:fixed;inset:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-user-select:none;user-select:none;
}

/* ===== Background scene ===== */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg{position:absolute;inset:0;will-change:opacity}
/* Clean, iconic Carmex-yellow background (brand book: clean, simple, yellow as the
   primary pop of colour). Hot = warm yellow; cool shifts a fresh teal in at the base. */
.bg--hot{
  background:
    radial-gradient(125% 95% at 80% 6%, #FFB347 0%, rgba(255,179,71,0) 46%),
    radial-gradient(150% 120% at 50% 122%, #FFC83D 0%, rgba(255,200,61,0) 52%),
    linear-gradient(180deg,#FFE100 0%, #FFD400 55%, #FFC400 100%);
  opacity:calc(1 - var(--cool));
}
.bg--cool{
  background:
    radial-gradient(120% 90% at 80% 8%, #E6FBF5 0%, rgba(230,251,245,0) 46%),
    radial-gradient(150% 120% at 50% 122%, #5FD3C4 0%, rgba(95,211,196,0) 55%),
    linear-gradient(180deg,#FFE100 0%, #B7E9DC 60%, #7AD6E6 100%);
  opacity:var(--cool);
}

.bg-diagonals{position:absolute;inset:0}
.diag{position:absolute;display:block;background:var(--red)}
.diag--red{top:-30%;left:-24%;width:42%;height:170%;transform:rotate(14deg);opacity:.78}
.diag--red2{bottom:-46%;right:-28%;width:42%;height:150%;transform:rotate(14deg);opacity:.12}

.sun{position:absolute;top:6%;right:8%;width:clamp(80px,14vw,150px);aspect-ratio:1;pointer-events:none}
.sun__core{
  position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFF7C2,#FFE100 60%,#FFC400);
  box-shadow:0 0 50px rgba(255,225,0,.8),0 0 90px rgba(255,179,71,.5);
  filter:saturate(calc(1 - var(--cool)*.6)) hue-rotate(calc(var(--cool)*150deg));
  transition:filter .6s var(--ease);
}
.sun__ray-wrap{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,225,0,.55) 0 6%,transparent 6% 12.5%);
  -webkit-mask:radial-gradient(circle,transparent 36%,#000 38%);mask:radial-gradient(circle,transparent 36%,#000 38%);
  opacity:calc(.55 - var(--cool)*.5);animation:spin 26s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#wind{position:absolute;inset:0;width:100%;height:100%;display:block}
.props{position:absolute;inset:0;pointer-events:none}
.prop{position:absolute;top:110%;will-change:transform;animation:rise linear infinite;opacity:.96}
.prop svg,.prop span{display:block}
.prop--flake{font-size:clamp(16px,3vw,30px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.12))}
@keyframes rise{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(var(--drift,40px),-130vh,0) rotate(var(--spin,220deg))}}
.frost{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 min(20vw,180px) min(6vw,40px) rgba(255,255,255,.5),inset 0 0 min(40vw,360px) min(10vw,80px) rgba(57,198,230,.22);
  opacity:var(--cool);transition:opacity .5s var(--ease);
}

/* ===== Topbar ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:max(14px,env(safe-area-inset-top)) clamp(12px,4vw,30px) 0;
}
.topbar__logolink{display:inline-block;line-height:0;cursor:pointer;transition:transform .15s var(--ease)}
.topbar__logolink:hover{transform:scale(1.03)}
.topbar__logolink:active{transform:scale(.96)}
.topbar__logo{width:clamp(116px,21vw,188px);height:auto;filter:drop-shadow(0 3px 9px rgba(0,0,0,.28))}
.topbar__right{display:flex;align-items:center;gap:9px}
.sharebtn{
  appearance:none;border:none;cursor:pointer;font-family:var(--font);font-weight:900;font-size:14px;color:#fff;
  background:radial-gradient(circle at 40% 28%,var(--red-lt),var(--red) 68%,var(--red-dark));
  padding:12px 18px;border-radius:50px;display:inline-flex;align-items:center;line-height:1;
  box-shadow:0 8px 20px rgba(201,18,53,.42),inset 0 2px 5px rgba(255,255,255,.32);
  transition:transform .15s var(--ease),box-shadow .2s;
}
.sharebtn span{font-size:15px}
.sharebtn:hover{box-shadow:0 10px 26px rgba(201,18,53,.5),inset 0 2px 5px rgba(255,255,255,.32)}
.sharebtn:active{transform:scale(.94)}
.sharebtn--bar{flex:0 0 auto;animation:ctapulse 2.6s ease-in-out infinite}   /* always-on call-to-action */
.sharebtn.cta{animation:ctapulse 1.4s ease-in-out infinite}                  /* stronger when it's cold */
@keyframes ctapulse{0%,100%{box-shadow:0 8px 20px rgba(201,18,53,.42),inset 0 2px 5px rgba(255,255,255,.32),0 0 0 0 rgba(0,196,141,.6)}50%{box-shadow:0 8px 22px rgba(201,18,53,.42),inset 0 2px 5px rgba(255,255,255,.32),0 0 0 13px rgba(0,196,141,0)}}
.iconbtn{
  appearance:none;border:none;cursor:pointer;width:46px;height:46px;border-radius:50%;
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(0,0,0,.16);font-size:21px;line-height:1;display:grid;place-items:center;
  transition:transform .15s var(--ease);
}
.iconbtn:active{transform:scale(.92)}
.iconbtn__off{display:none}
.iconbtn[aria-pressed="true"] .iconbtn__on{display:none}
.iconbtn[aria-pressed="true"] .iconbtn__off{display:block}

/* language switcher */
.lang{position:relative}
.lang__btn{appearance:none;border:none;cursor:pointer;height:46px;padding:0 13px;border-radius:50px;
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(0,0,0,.16);font-family:var(--font);font-weight:800;font-size:13px;color:var(--black);
  display:inline-flex;align-items:center;line-height:1;transition:transform .15s var(--ease)}
.lang__btn:active{transform:scale(.94)}
.lang__menu{position:absolute;top:54px;right:0;z-index:40;display:flex;flex-direction:column;gap:2px;
  background:#fff;border-radius:14px;padding:6px;min-width:142px;
  box-shadow:0 16px 36px rgba(0,0,0,.24);border:2px solid var(--glass-bd)}
.lang__menu button{appearance:none;border:none;cursor:pointer;text-align:left;padding:9px 12px;border-radius:9px;
  background:transparent;font-family:var(--font);font-weight:700;font-size:14px;color:var(--black);transition:background .15s}
.lang__menu button:hover{background:rgba(44,42,41,.08)}

/* ===== HUD (temperature, top-centre) ===== */
.hud{
  position:fixed;z-index:25;top:calc(env(safe-area-inset-top) + 74px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:13px;padding:8px 16px;border-radius:50px;
  background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:2px solid var(--glass-bd);box-shadow:0 14px 32px rgba(0,0,0,.18);
  color:var(--black);white-space:nowrap;transition:transform .3s var(--ease);
}
.hud__emoji{font-size:30px;line-height:1}
.hud__main{display:flex;flex-direction:column;line-height:1.05}
.hud__main i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.13em;opacity:.62}
.hud__main b{font-size:30px;font-weight:900;font-style:italic}
.hud__deg{font-size:.46em;vertical-align:super;font-style:normal;font-weight:800;margin-left:1px}
.hud__best{font-size:12px;font-weight:800;color:var(--red);padding-left:13px;border-left:2px solid rgba(44,42,41,.15)}
.hud__best b{font-weight:900}

/* ===== Stage / fan (BIGGER) ===== */
.stage{
  position:fixed;inset:0;z-index:15;display:grid;place-items:center;
  padding:clamp(96px,15vh,140px) 0 clamp(168px,22vh,196px);
}
.fan-wrap{
  position:relative;width:min(96vw,760px);max-width:80vh;aspect-ratio:1;
  display:grid;place-items:center;touch-action:none;
}
.fan{width:100%;height:100%;overflow:visible;cursor:grab;filter:drop-shadow(0 26px 44px rgba(44,42,41,.24))}
.fan:active{cursor:grabbing}
.fan__blades{transform-box:fill-box;transform-origin:center}
.blade path{fill:url(#bladeGrad);stroke:var(--yellow-deep);stroke-width:2.5;stroke-linejoin:round}
.fan-base{position:absolute;bottom:-2%;left:50%;transform:translateX(-50%);z-index:-1;width:42%}
.fan-base__neck{width:14%;height:42px;margin:0 auto -6px;background:linear-gradient(90deg,#B9001F,var(--red),#B9001F);border-radius:0 0 6px 6px}
.fan-base__foot{height:18px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#E0102F,var(--red-dark));box-shadow:0 14px 22px rgba(0,0,0,.22)}
.grab-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 152px));
  font-weight:800;font-size:12px;letter-spacing:.04em;background:var(--black);color:#fff;
  padding:6px 12px;border-radius:30px;white-space:nowrap;pointer-events:none;
  box-shadow:0 8px 18px rgba(0,0,0,.25);animation:bob 2.2s var(--ease) infinite;transition:opacity .4s;
}
@keyframes bob{0%,100%{transform:translate(-50%,calc(-50% - 152px))}50%{transform:translate(-50%,calc(-50% - 162px))}}
.grab-hint.hide{opacity:0}

/* ===== Reactive status ===== */
.status{
  position:fixed;z-index:22;left:50%;bottom:calc(env(safe-area-inset-bottom) + clamp(150px,21vh,150px));
  transform:translateX(-50%);font-weight:900;font-style:italic;font-size:clamp(15px,3.6vw,21px);
  color:var(--black);text-align:center;white-space:nowrap;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  padding:7px 18px;border-radius:30px;pointer-events:none;
  box-shadow:0 6px 16px rgba(0,0,0,.1);transition:opacity .35s,transform .35s var(--ease);
}
.status.pop{animation:statuspop .5s var(--ease)}
@keyframes statuspop{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.12)}100%{transform:translateX(-50%) scale(1)}}

/* ===== Controls (cooler) ===== */
.controls{
  position:fixed;z-index:30;left:50%;bottom:calc(env(safe-area-inset-bottom) + clamp(28px,5vh,38px));
  transform:translateX(-50%);display:flex;align-items:center;gap:clamp(10px,2vw,16px);
  padding:13px 16px;border-radius:30px;max-width:calc(100vw - 20px);
  background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  border:2px solid var(--glass-bd);
  box-shadow:0 20px 46px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.6);
}
/* power */
.power{
  appearance:none;cursor:pointer;border:none;width:66px;height:66px;border-radius:50%;flex:0 0 auto;color:#fff;position:relative;
  background:radial-gradient(circle at 38% 30%,var(--red-lt),var(--red) 60%,var(--red-dark));
  box-shadow:0 10px 22px rgba(201,18,53,.45),inset 0 2px 7px rgba(255,255,255,.4),inset 0 -6px 12px rgba(0,0,0,.18);
  display:grid;place-items:center;transition:transform .15s var(--ease),box-shadow .3s var(--ease);
}
.power::after{content:"";position:absolute;inset:7px 7px 40% 7px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
.power:active{transform:scale(.93)}
.power[aria-pressed="true"]{
  background:radial-gradient(circle at 38% 30%,#23E0AE,var(--teal) 60%,#00936A);
  box-shadow:0 0 0 4px rgba(0,196,141,.35),0 10px 26px rgba(0,196,141,.5),inset 0 2px 7px rgba(255,255,255,.45);
  animation:pulse 1.7s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(0,196,141,.34),0 10px 26px rgba(0,196,141,.45),inset 0 2px 7px rgba(255,255,255,.45)}50%{box-shadow:0 0 0 11px rgba(0,196,141,0),0 10px 26px rgba(0,196,141,.55),inset 0 2px 7px rgba(255,255,255,.45)}}

/* speed buttons — premium glossy squircle app-icons */
.speeds{display:flex;gap:clamp(4px,1vw,9px);padding:4px;border-radius:20px;background:rgba(255,255,255,.26);box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.speed{
  appearance:none;cursor:pointer;border:none;position:relative;background:transparent;
  display:flex;flex-direction:column-reverse;align-items:center;gap:3px;
  padding:5px 6px 6px;border-radius:14px;
  font-family:var(--font);color:var(--black);transition:transform .14s var(--ease);
}
.speed b{font-size:11px;font-weight:800;letter-spacing:.01em;opacity:.6;transition:opacity .2s}
.speed i{font-style:normal;display:block;width:clamp(38px,7vw,48px);height:clamp(38px,7vw,48px);
  opacity:.72;filter:saturate(.82);transition:transform .22s var(--ease),opacity .22s,filter .22s}
.speed i img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;user-select:none}
.speed:hover i{opacity:.95}
.speed:active{transform:scale(.93)}
.speed.is-active i{opacity:1;transform:scale(1.16) translateY(-1px);filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}
.speed.is-active b{opacity:1;font-weight:900}

/* ===== Brand line ===== */
.brandline{position:fixed;z-index:18;left:0;right:0;bottom:6px;text-align:center;pointer-events:none;color:var(--black)}
.brandline span{display:block;font-weight:900;font-style:italic;font-size:13px;opacity:.82}
.brandline em{display:block;font-style:normal;font-weight:600;font-size:10px;opacity:.52;margin-top:1px}
.brandline__cc{display:block;font-style:normal;font-weight:600;font-size:9.5px;opacity:.5;margin-top:3px;letter-spacing:.01em}
.brandline__cc a{color:inherit;text-decoration:underline;text-underline-offset:2px;pointer-events:auto}
.brandline__cc a:hover{color:var(--red);opacity:1}
/* subtle shop link in the share modal */
.modal__shop{display:inline-block;margin-top:13px;font-weight:800;font-size:13px;color:var(--red);text-decoration:none;border-bottom:2px solid rgba(201,18,53,.28);padding-bottom:1px;transition:border-color .2s,transform .12s}
.modal__shop:hover{border-color:var(--red)}
.modal__shop:active{transform:scale(.96)}

/* SPF 30 sun tie-in — orange shield, glass card (matches HUD), shows when it's hot */
.spf-tip{
  position:fixed;z-index:24;left:clamp(12px,3vw,28px);bottom:calc(env(safe-area-inset-bottom) + clamp(120px,17vh,150px));
  display:flex;align-items:center;gap:11px;text-decoration:none;max-width:250px;
  background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:2px solid var(--glass-bd);border-radius:18px;padding:9px 15px 9px 10px;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)
}
.spf-tip.show{opacity:1;transform:none;pointer-events:auto}
.spf-tip.show:hover{transform:translateY(-2px)}
.spf-tip__shield{flex:0 0 auto;width:40px;height:45px;filter:drop-shadow(0 4px 8px rgba(239,124,0,.42))}
.spf-tip__shield svg{width:100%;height:100%;display:block}
.spf-tip__txt{display:flex;flex-direction:column;line-height:1.2}
.spf-tip__txt b{font-size:13px;font-weight:900;color:var(--black)}
.spf-tip__txt em{font-size:11px;font-weight:700;font-style:normal;color:var(--red);margin-top:2px}
@media (max-width:560px){
  .spf-tip{left:50%;right:auto;bottom:auto;top:calc(env(safe-area-inset-top) + 122px);
    transform:translate(-50%,10px) scale(.96);max-width:none;gap:9px;padding:7px 14px 7px 8px;
    -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.9)}
  .spf-tip.show{transform:translate(-50%,0)}
  .spf-tip.show:hover{transform:translate(-50%,0)}
  .spf-tip__shield{width:32px;height:36px}
  .spf-tip__txt b{display:none}                 /* mobile: slim one-line pill */
  .spf-tip__txt em{font-size:12px;white-space:nowrap}
}

/* ===== Boot ===== */
.boot{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 70% 0%,#FFB347,rgba(255,179,71,0) 50%),linear-gradient(180deg,#FFE100,#FFC400);
  transition:opacity .6s var(--ease),visibility .6s;
}
.boot.hide{opacity:0;visibility:hidden;pointer-events:none}
.boot__inner{max-width:520px}
.boot__logo{width:min(54vw,260px);height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));margin-bottom:14px}
.boot__title{font-size:clamp(28px,7vw,52px);line-height:1.02;margin:8px 0 6px;font-weight:900;font-style:italic;color:var(--black);letter-spacing:-.01em}
.boot__title em{color:var(--red)}
.boot__sub{font-size:clamp(14px,3.4vw,18px);font-weight:600;color:#5a4a00;margin:0 0 22px}
.boot__btn{
  appearance:none;border:none;cursor:pointer;font-family:var(--font);font-weight:900;font-size:clamp(17px,4.4vw,21px);color:#fff;
  background:radial-gradient(circle at 40% 30%,var(--red-lt),var(--red) 65%,var(--red-dark));
  padding:16px 34px;border-radius:50px;box-shadow:0 12px 30px rgba(201,18,53,.45),inset 0 2px 6px rgba(255,255,255,.35);
  transition:transform .15s var(--ease);animation:bob2 2.4s var(--ease) infinite;
}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.boot__btn:active{transform:scale(.95)}
.boot__hint{font-size:13px;font-weight:600;color:#7a6300;margin-top:18px}

/* ===== Share modal ===== */
.modal{position:fixed;inset:0;z-index:80;display:none}
.modal.open{display:grid;place-items:center;padding:18px}
.modal__backdrop{position:absolute;inset:0;background:rgba(44,42,41,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__card{
  position:relative;z-index:1;width:min(94vw,440px);background:#fff;border-radius:28px;padding:26px 24px 20px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.45);border:3px solid var(--yellow);animation:pop .28s var(--ease);
  max-height:92vh;overflow:auto;
}
@keyframes pop{from{transform:translateY(16px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal__x{position:absolute;top:12px;right:14px;border:none;background:rgba(44,42,41,.08);width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--black)}
.modal__flag{display:inline-block;background:var(--yellow);color:var(--black);font-weight:900;font-size:12px;letter-spacing:.04em;padding:5px 13px;border-radius:20px;margin-bottom:8px}
.modal__title{font-size:clamp(24px,6vw,32px);font-weight:900;font-style:italic;margin:2px 0 6px;color:var(--black)}
.modal__sub{font-size:14px;font-weight:600;color:#666;margin:0 0 18px;line-height:1.45}
.modal__sub b{color:var(--red)}
.cardbtn{
  width:100%;appearance:none;border:none;cursor:pointer;font-family:var(--font);font-weight:900;font-size:16px;color:#fff;margin-bottom:14px;
  background:radial-gradient(circle at 40% 30%,var(--red-lt),var(--red) 70%,var(--red-dark));
  padding:15px;border-radius:16px;box-shadow:0 10px 24px rgba(201,18,53,.4);transition:transform .12s var(--ease);
}
.cardbtn:active{transform:scale(.97)}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.sg{appearance:none;border:none;cursor:pointer;font-family:var(--font);font-weight:800;font-size:14px;color:#fff;padding:14px 8px;border-radius:13px;transition:transform .12s var(--ease),filter .2s}
.sg:hover{filter:brightness(1.08)}
.sg:active{transform:scale(.95)}
.sg--wa{background:#25D366}.sg--x{background:#111}.sg--fb{background:#1877F2}.sg--tg{background:#229ED9}.sg--copy{background:var(--black)}.sg--more{background:var(--teal)}
.modal__hint{font-size:12px;font-weight:600;color:#999;margin:2px 0 0}
.modal__hint b{color:var(--red)}

/* ===== Toast ===== */
.toast{position:fixed;z-index:90;left:50%;top:16%;transform:translateX(-50%) translateY(-10px);background:var(--black);color:#fff;padding:12px 20px;border-radius:40px;font-weight:800;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Responsive ===== */
@media (max-width:560px){
  .stage{padding:clamp(92px,14vh,120px) 0 clamp(150px,20vh,170px)}
  .fan-wrap{width:96vw}
  .fan{filter:drop-shadow(0 10px 16px rgba(44,42,41,.22))}
  /* perf: drop expensive backdrop-blur on mobile, use solid panels instead */
  .hud,.controls,.status,.iconbtn,.lang__btn{-webkit-backdrop-filter:none;backdrop-filter:none}
  .lang__btn{height:42px;padding:0 11px;font-size:12px;background:rgba(255,255,255,.9)}
  .hud{gap:9px;padding:7px 13px;top:calc(env(safe-area-inset-top) + 66px);background:rgba(255,255,255,.86)}
  .hud__emoji{font-size:25px}.hud__main b{font-size:25px}
  .iconbtn{background:rgba(255,255,255,.9)}
  .topbar__logo{width:108px}
  .controls{gap:5px;padding:9px 9px;background:rgba(255,255,255,.84)}
  .status{font-size:15px;background:rgba(255,255,255,.74)}
  .speeds{gap:2px;padding:3px}
  .sharebtn{padding:9px 11px;font-size:12px}
  .sharebtn__more{display:none}   /* "Share ↗" on mobile, "Share the chill ↗" on desktop */
  /* keep labels on mobile so the speeds stay clear; bigger glossy buttons */
  .speed{padding:3px 3px 4px;min-width:42px}
  .speed i{width:34px;height:34px}
  .speed b{display:block;font-size:8.5px;opacity:.72;letter-spacing:-.02em}
  .speed.is-active i{transform:scale(1.14) translateY(-1px)}
  .grab-hint{font-size:11px}
  .brandline span,.brandline em{display:none}   /* mobile footer = copyright only */
  .brandline__cc{font-size:9px}
}
@media (max-width:380px){
  .speeds{gap:1px;padding:3px}
  .speed{padding:2px 2px 3px;min-width:37px}
  .speed i{width:29px;height:29px}
  .speed b{font-size:8px}
  .power{width:50px;height:50px}
  .sharebtn{padding:8px 10px;font-size:11px}
  .topbar__logo{width:92px}
}
/* tiny phones (≤374px): icon-only speeds + icon-only share so any language always fits */
@media (max-width:374px){
  .speed b{display:none}
  .speed{min-width:0;padding:4px 4px 5px}
  .speed i{width:29px;height:29px}
  .speeds{gap:3px;padding:3px}
  .power{width:48px;height:48px}
  .controls{gap:5px;padding:8px 9px}
  .sharebtn [data-i18n="share_word"],.sharebtn__more{display:none}
  .sharebtn{padding:11px 13px}
  .sharebtn__arr{font-size:17px;font-weight:900}
}
@media (max-height:480px){
  .topbar__logo{width:108px}
  .stage{padding:78px 0 92px}
  .hud{top:calc(env(safe-area-inset-top) + 60px)}
  .boot__logo{width:160px;margin-bottom:6px}
  .status{bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  .sun__ray-wrap,.power[aria-pressed="true"],.boot__btn,.grab-hint,.rotate-phone__svg,.sharebtn--bar{animation:none}
}

/* ===== Rotate-your-phone hint (mobile landscape) ===== */
.rotate-hint{
  display:none;position:fixed;inset:0;z-index:200;text-align:center;
  background:radial-gradient(120% 130% at 70% 0%, #FFB347, rgba(255,179,71,0) 55%), linear-gradient(180deg,#FFE100,#FFC400);
}
.rotate-hint__inner{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px}
.rotate-hint__logo{width:128px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.2))}
.rotate-phone{position:relative;display:grid;place-items:center;margin:6px 0 2px}
.rotate-phone__svg{width:70px;height:70px;transform-origin:50% 50%;animation:rotatephone 2.8s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.22))}
@keyframes rotatephone{0%,16%{transform:rotate(-90deg)}46%,66%{transform:rotate(0)}100%{transform:rotate(-90deg)}}
.rotate-hint__title{font-size:clamp(18px,5.5vw,27px);font-weight:900;font-style:italic;color:var(--black);margin:4px 0 0}
.rotate-hint__sub{font-size:clamp(12px,3.2vw,15px);font-weight:700;color:#5a4a00;margin:2px 10px 0}
@media (orientation:landscape) and (max-height:500px){
  .rotate-hint{display:block}
}