/* Savannah Dash — styles */
:root{
  --coral:#FF6F5E; --coral-d:#D6432F; --teal:#4FD1C5; --gold:#FFC24B; --violet:#9B7BD1;
  --ink:#22303A; --paper:rgba(255,255,255,.82);
  --font-display:'Baloo 2', ui-rounded, 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:#0e0a1c; overflow:hidden; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
/* Safe-area insets are applied once, on the header and screens (not on body). */
#game{ position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden;
  background:linear-gradient(180deg, #3B2A5C 0%, #8C4B7A 42%, #F2996B 72%, #FFDCA0 100%); }
#game.shake{ animation:shakeScreen .35s ease; }
@keyframes shakeScreen{
  0%,100%{transform:translate(0,0);} 20%{transform:translate(-3px,2px);}
  40%{transform:translate(3px,-2px);} 60%{transform:translate(-2px,-2px);} 80%{transform:translate(2px,2px);}
}

button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.icon{ display:inline-block; width:1em; height:1em; vertical-align:-0.15em; flex:none; }
.pill .icon{ width:15px; height:15px; }
.iconbtn .icon{ width:20px; height:20px; }
.iconbtn.big-icon{ width:44px; height:44px; }
.iconbtn.big-icon .icon{ width:22px; height:22px; }
.icon-lg{ display:inline-block; width:34px; height:34px; }
.icon-lg.lock{ opacity:.45; }
.hidden{ display:none !important; }

/* ---------- Sky ---------- */
.sky-layer{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; pointer-events:none; }
.sky-dusk{ background:linear-gradient(180deg,#2B1A46 0%,#6E2E52 45%,#C8613F 75%,#F2A24E 100%); }
.sky-night{ background:linear-gradient(180deg,#0A0B1E 0%,#141433 50%,#24244A 80%,#33305C 100%); }

.sun{ position:absolute; top:9%; right:12%; width:90px; height:90px; z-index:1;
  transition:opacity 1.2s ease; filter:drop-shadow(0 0 22px rgba(255,205,120,.6)); overflow:visible; }
.sun .sun-rays{ transform-box:fill-box; transform-origin:50% 50%; animation:sunSpin 110s linear infinite; }
@keyframes sunSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.moon{ position:absolute; top:9%; right:14%; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #F4F3FF, #C9C9E8 70%); opacity:0; transition:opacity 1.2s ease;
  box-shadow:0 0 30px 10px rgba(200,200,255,.25); z-index:1; }

.cloud{ position:absolute; z-index:1; filter:drop-shadow(0 6px 6px rgba(0,0,0,.06)); }
.cloud svg{ display:block; width:100%; height:100%; }
.cloud1{ width:190px; height:74px; top:12%; left:-24%; opacity:.92; animation:drift 46s linear infinite; }
.cloud2{ width:130px; height:52px; top:24%; left:-32%; opacity:.5; animation:drift 62s linear infinite; animation-delay:-20s; }
.cloud3{ width:155px; height:60px; top:7%; left:-28%; opacity:.7; animation:drift 54s linear infinite; animation-delay:-34s; }
@keyframes drift{ from{transform:translateX(0);} to{transform:translateX(140vw);} }

/* ---------- Scenery ---------- */
.hillband{ position:absolute; left:-10%; width:220%; background-repeat:repeat-x; animation-play-state:paused; z-index:1; }
.hillband.hb3{ bottom:16%; height:70px; opacity:.55; background-size:200px 70px;
  background-image:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2070'><path%20d='M0%2070L0%2045Q50%2015%20100%2045T200%2045L200%2070Z'%20fill='%231E4530'/></svg>");
  animation:scrollHB3 34s linear infinite; animation-play-state:paused; }
.hillband.hb2{ bottom:16%; height:100px; opacity:.7; background-size:240px 100px;
  background-image:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%20100'><path%20d='M0%20100L0%2060Q60%2015%20120%2060T240%2060L240%20100Z'%20fill='%232C5A3E'/></svg>");
  animation:scrollHB2 22s linear infinite; animation-play-state:paused; }
.hillband.hb1{ bottom:16%; height:130px; opacity:.85; background-size:280px 130px;
  background-image:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20280%20130'><path%20d='M0%20130L0%2075Q70%2010%20140%2075T280%2075L280%20130Z'%20fill='%233E7A4C'/></svg>");
  animation:scrollHB1 14s linear infinite; animation-play-state:paused; }
@keyframes scrollHB3{ from{background-position-x:0;} to{background-position-x:-200px;} }
@keyframes scrollHB2{ from{background-position-x:0;} to{background-position-x:-240px;} }
@keyframes scrollHB1{ from{background-position-x:0;} to{background-position-x:-280px;} }

.treeband{ position:absolute; left:-10%; width:220%; background-repeat:repeat-x; z-index:1; pointer-events:none; }
.treeband.tb-far{ bottom:19%; height:66px; opacity:.6; background-size:420px 66px;
  background-image:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20420%2066'><g%20fill='%231E4530'><g%20transform='translate(30%206.6)%20scale(.9)'><rect%20x='27'%20y='28'%20width='4'%20height='38'/><ellipse%20cx='29'%20cy='20'%20rx='28'%20ry='9'/><ellipse%20cx='14'%20cy='17'%20rx='13'%20ry='5'/><ellipse%20cx='46'%20cy='17'%20rx='13'%20ry='5'/></g><g%20transform='translate(250%2019.8)%20scale(.7)'><rect%20x='27'%20y='28'%20width='4'%20height='38'/><ellipse%20cx='29'%20cy='20'%20rx='28'%20ry='9'/><ellipse%20cx='14'%20cy='17'%20rx='13'%20ry='5'/><ellipse%20cx='46'%20cy='17'%20rx='13'%20ry='5'/></g></g></svg>");
  animation:scrollTBF 38s linear infinite; animation-play-state:paused; }
.treeband.tb-near{ bottom:15%; height:92px; opacity:.95; background-size:560px 92px;
  background-image:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20560%2092'><g%20fill='%23295A3A'><g%20transform='translate(60%209.5)%20scale(1.25)'><rect%20x='27'%20y='28'%20width='4'%20height='38'/><ellipse%20cx='29'%20cy='20'%20rx='28'%20ry='9'/><ellipse%20cx='14'%20cy='17'%20rx='13'%20ry='5'/><ellipse%20cx='46'%20cy='17'%20rx='13'%20ry='5'/></g><g%20transform='translate(340%2029.3)%20scale(.95)'><rect%20x='27'%20y='28'%20width='4'%20height='38'/><ellipse%20cx='29'%20cy='20'%20rx='28'%20ry='9'/><ellipse%20cx='14'%20cy='17'%20rx='13'%20ry='5'/><ellipse%20cx='46'%20cy='17'%20rx='13'%20ry='5'/></g><g%20transform='translate(470%2052.4)%20scale(.6)'><rect%20x='27'%20y='28'%20width='4'%20height='38'/><ellipse%20cx='29'%20cy='20'%20rx='28'%20ry='9'/><ellipse%20cx='14'%20cy='17'%20rx='13'%20ry='5'/><ellipse%20cx='46'%20cy='17'%20rx='13'%20ry='5'/></g></g></svg>");
  animation:scrollTBN 28s linear infinite; animation-play-state:paused; }
@keyframes scrollTBF{ from{background-position-x:0;} to{background-position-x:-420px;} }
@keyframes scrollTBN{ from{background-position-x:0;} to{background-position-x:-560px;} }

.ground{ position:absolute; bottom:0; left:0; right:0; height:16%; z-index:1;
  background:linear-gradient(180deg, #B97A3E, #7A5230); }
.ground::before{ content:''; position:absolute; top:-15px; left:0; right:0; height:20px;
  background-image:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2024'><path%20d='M2%2024C2%2014%206%208%204%200C8%2010%208%2016%208%2024Z'%20fill='%233E7A4C'/><path%20d='M10%2024C10%2012%2014%206%2012%200C17%2010%2016%2018%2016%2024Z'%20fill='%232C5A3E'/><path%20d='M20%2024C20%2015%2024%209%2022%202C27%2011%2026%2017%2026%2024Z'%20fill='%233E7A4C'/><path%20d='M30%2024C30%2013%2034%207%2032%201C37%209%2036%2017%2036%2024Z'%20fill='%232C5A3E'/></svg>");
  background-repeat:repeat-x; background-size:40px 24px; animation:grassScroll 2.4s linear infinite; animation-play-state:paused; }
@keyframes grassScroll{ from{background-position-x:0;} to{background-position-x:-40px;} }

#game.active .hillband, #game.active .treeband, #game.active .ground::before{ animation-play-state:running; }

/* ---------- HUD ---------- */
header{ position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:calc(14px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 0 calc(14px + env(safe-area-inset-left,0px)); }
.pillrow{ display:flex; gap:8px; min-width:0; }
.pill{ font-family:var(--font-display); font-weight:700; font-size:14px;
  background:var(--paper); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:18px; padding:8px 13px; box-shadow:0 4px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.4);
  display:flex; align-items:center; gap:5px; color:var(--ink); white-space:nowrap; }
.pill.score{ color:#B8760A; }
.pill.lives{ color:var(--coral-d); }
.pill.bank{ color:#B8760A; }
.pill.streak{ color:var(--coral-d); }
.pill.best{ color:var(--violet); }
.pill.level{ position:relative; padding-bottom:12px; color:var(--violet); }
.lvlbar{ position:absolute; left:10px; right:10px; bottom:4px; height:4px; border-radius:2px; background:rgba(0,0,0,.15); overflow:hidden; }
.lvlbar-fill{ height:100%; width:0%; background:var(--violet); transition:width .3s ease; }
.pill.combo{ color:var(--coral-d); background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,214,178,.9)); }
.pill.combo .icon{ animation:flameFlicker .5s ease-in-out infinite alternate; transition:transform .2s ease; }
@keyframes flameFlicker{ 0%{opacity:.85;} 100%{opacity:1;} }
.iconbtn{ position:relative; background:var(--paper); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:none; border-radius:14px;
  width:38px; height:38px; box-shadow:0 4px 14px rgba(0,0,0,.18); cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex:none; }

/* Very narrow phones: keep the HUD on one row even when the combo pill appears */
@media (max-width:380px){
  header{ gap:4px; padding-left:calc(8px + env(safe-area-inset-left,0px)); padding-right:calc(8px + env(safe-area-inset-right,0px)); }
  .pillrow{ gap:4px; }
  .pill{ font-size:12px; padding:6px 9px; gap:4px; }
  .pill .icon{ width:13px; height:13px; }
  .pill.level{ padding-bottom:11px; }
  .iconbtn{ width:34px; height:34px; }
  .iconbtn .icon{ width:18px; height:18px; }
}

/* ---------- Problem ---------- */
.problem-wrap{ position:absolute; top:calc(66px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:5; max-width:92vw; }
.problem, .picture-problem{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,7vw,44px);
  background:var(--paper); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:11px 28px; border-radius:22px; color:var(--ink);
  box-shadow:0 8px 20px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.5); text-align:center; }
.problem.long{ font-size:clamp(18px,4.6vw,28px); }
.problem.word{ font-size:clamp(15px,4.3vw,20px); font-weight:700; line-height:1.3; padding:10px 18px; border-radius:20px; max-width:min(92vw,520px); }
.picture-problem{ font-size:clamp(22px,5.5vw,32px); line-height:1; }
.picture-problem .plusop{ font-family:var(--font-body); font-weight:800; margin:0 4px; }

/* ---------- Bubbles ----------
   .bubble  = positioned wrapper, moved every frame with transform (cheap, no layout)
   .binner  = the visible bubble; pop animations live here so they never fight the transform */
.bubble{ position:absolute; top:0; left:0; z-index:3; font-family:var(--font-display); font-weight:700; color:#fff;
  cursor:pointer; user-select:none; -webkit-user-select:none; will-change:transform; }
.binner{ position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25), inset 0 -6px 10px rgba(0,0,0,.15), inset 0 6px 8px rgba(255,255,255,.35); }
.binner::after{ content:''; position:absolute; top:14%; left:20%; width:22%; height:14%; border-radius:50%;
  background:rgba(255,255,255,.55); filter:blur(1px); }
.bnum{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; text-shadow:0 2px 3px rgba(0,0,0,.4); }
.bubble.darktext{ color:#3d2800; }
.bubble.darktext .bnum{ text-shadow:0 1px 1px rgba(255,255,255,.55); }
.bubble.shaped .binner{ background:none !important; box-shadow:none; border-radius:0; filter:drop-shadow(0 6px 7px rgba(0,0,0,.3)); }
.bubble.shaped .binner::after{ display:none; }
.bubble.tri .bnum{ padding-top:24%; }
/* Reveal after a miss: the right bubble freezes, glows and gets a tick; the sum above turns green and shows the answer */
#game .bubble.reveal > .binner{ animation:revealPulse .7s ease-in-out infinite alternate;
  box-shadow:0 0 0 4px #7CE28B, 0 0 22px 8px rgba(124,226,139,.85), inset 0 -6px 10px rgba(0,0,0,.15), inset 0 6px 8px rgba(255,255,255,.35); }
#game .bubble.shaped.reveal > .binner{ box-shadow:none; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 14px #7CE28B); }
.bubble.reveal{ z-index:4; }
.bubble.reveal::after{ content:'\2713'; position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
  background:#2E9E4F; color:#fff; font-family:var(--font-body); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,.35); }
@keyframes revealPulse{ from{transform:scale(1);} to{transform:scale(1.1);} }
.problem.solved, .picture-problem.solved{ background:linear-gradient(135deg, rgba(236,255,240,.96), rgba(190,245,203,.96));
  box-shadow:0 8px 20px rgba(0,0,0,.2), 0 0 0 3px #4CB864; }
@keyframes popIn{ 0%{transform:scale(.3,1.4);} 55%{transform:scale(1.15,.8);} 100%{transform:scale(1,1);} }
@keyframes popGood{ 0%{transform:scale(1);opacity:1;} 40%{transform:scale(1.35,.7);opacity:1;} 100%{transform:scale(.2,.2);opacity:0;} }
@keyframes popBad{ 0%{transform:scale(1);opacity:1;} 30%{transform:scale(.6,1.3);opacity:1;} 100%{transform:scale(.9,.1);opacity:0;} }
.bubble.spawn > .binner{ animation:popIn .32s cubic-bezier(.3,1.6,.5,1); }
.bubble.good > .binner{ animation:popGood .28s ease forwards; }
.bubble.bad > .binner{ animation:popBad .28s ease forwards; }
.bubble.good, .bubble.bad{ pointer-events:none; }

/* ---------- Mascot ---------- */
#cubWrap{ position:absolute; bottom:15%; left:50%; transform:translateX(-50%); z-index:4; text-align:center; pointer-events:none; }
#cub{ font-size:58px; display:block; filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)); transition:transform .12s; }
#cubShadow{ width:56px; height:14px; margin:-4px auto 0; border-radius:50%; background:rgba(0,0,0,.25); filter:blur(2px); }
#cub.happy{ animation:hop .45s ease; } #cub.sad{ animation:shakeCub .4s ease; }
#cub.idle{ animation:idleBob 1s ease-in-out infinite; }
@keyframes idleBob{ 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-4px) rotate(-2deg);} }
@keyframes hop{ 0%{transform:translateY(0) scale(1);} 40%{transform:translateY(-30px) scale(1.06);} 100%{transform:translateY(0) scale(1);} }
@keyframes shakeCub{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-10px) rotate(-4deg);} 75%{transform:translateX(10px) rotate(4deg);} }

/* ---------- Effects ---------- */
.spark, .floatText{ position:absolute; pointer-events:none; z-index:6; }
.floatText{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--coral-d);
  text-shadow:0 2px 0 #fff; }
.toast{ position:absolute; left:50%; top:calc(150px + env(safe-area-inset-top,0px)); z-index:12; transform:translateX(-50%);
  font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--coral-d); background:var(--paper);
  padding:8px 16px; border-radius:16px; box-shadow:0 6px 16px rgba(0,0,0,.25); white-space:nowrap; pointer-events:none; }

/* ---------- Screens ---------- */
.screen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; justify-content:safe center; /* 'safe' keeps the top reachable on short screens */
  text-align:center; gap:14px; z-index:10; overflow-y:auto;
  padding:calc(24px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));
  background:radial-gradient(circle at 50% 30%, rgba(58,38,90,.55), rgba(20,14,36,.88)); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.screen h1{ font-family:var(--font-display); font-size:clamp(28px,7.5vw,46px); margin:0; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.25);
  display:flex; align-items:center; gap:10px; }
.screen h1 .icon{ width:.85em; height:.85em; }
.screen p{ font-size:16px; max-width:340px; margin:0; line-height:1.5; color:#F0EAFB; }
.screen p:empty{ display:none; }
.screen p.endcombo{ font-weight:800; color:var(--gold); }
.screen p.endbest{ font-weight:800; color:var(--teal); }
button.big{ font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff;
  background:linear-gradient(180deg, var(--coral), var(--coral-d)); border:none; border-radius:20px;
  padding:14px 34px; cursor:pointer; box-shadow:0 6px 0 #9E2F1F, 0 10px 20px rgba(0,0,0,.3); }
button.big:active{ transform:translateY(5px); box-shadow:0 1px 0 #9E2F1F; }
button.ghost{ position:relative; font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4); border-radius:16px; padding:9px 18px; cursor:pointer; }
.badge{ position:absolute; top:-9px; right:-9px; background:var(--coral-d); color:#fff; font-family:var(--font-body);
  font-weight:800; font-size:11px; min-width:19px; height:19px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; padding:0 4px; box-shadow:0 2px 5px rgba(0,0,0,.35); animation:badgePulse 1.3s ease-in-out infinite; }
@keyframes badgePulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.18);} }
.stars{ display:flex; justify-content:center; gap:6px; }
.star-rating{ width:30px; height:30px; }
.star-rating.on{ color:var(--gold); }
.star-rating.off{ color:rgba(255,255,255,.25); }

.statline{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.iconrow{ display:flex; gap:10px; }
.togglerow{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.togglebtn{ font-family:var(--font-body); font-weight:800; font-size:13px; color:#fff;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); border-radius:14px;
  padding:7px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.togglebtn.active{ background:var(--gold); color:#5a3b00; border-color:var(--gold); }
.settingrow{ width:100%; max-width:320px; text-align:center; }
.settinglabel{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#D8CBEF; margin-bottom:6px; }

.endach{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.endach:empty{ display:none; }
.achchip{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,194,75,.18); border:1px solid var(--gold);
  color:#FFE9B8; font-weight:800; font-size:14px; padding:5px 12px; border-radius:14px; }
.achchip .icon{ width:16px; height:16px; color:var(--gold); }

.shopgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:360px; width:100%; }
.mcard{ position:relative; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:16px; padding:14px 8px;
  display:flex; flex-direction:column; align-items:center; gap:6px; }
.mcard.unlockable{ animation:cardGlow 1.6s ease-in-out infinite; }
@keyframes cardGlow{ 0%,100%{box-shadow:0 0 0 2px var(--gold), 0 0 8px rgba(255,194,75,.35);} 50%{box-shadow:0 0 0 2px var(--gold), 0 0 20px rgba(255,194,75,.75);} }
.mcard .ribbon{ position:absolute; top:-8px; right:-8px; background:var(--coral-d); color:#fff; font-size:10px;
  font-family:var(--font-body); font-weight:800; padding:3px 7px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,.35); }
.mcard .micon{ font-size:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--gold); }
.mcard .mname{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:14px; }
.mcard .mcost{ font-size:13px; color:#E8DEFF; }
.mcard button{ font-family:var(--font-body); font-weight:800; font-size:13px; border:none; border-radius:10px;
  padding:6px 12px; cursor:pointer; margin-top:2px; }
.mcard button.own{ background:var(--teal); color:#0e3d38; }
.mcard button.buy{ background:var(--gold); color:#5a3b00; }
.mcard button.locked{ background:rgba(255,255,255,.2); color:#cfc7e6; cursor:not-allowed; }

/* ---------- Low-end device mode ----------
   Added automatically on low-core / low-memory phones (see app.js). Force with ?lowfx=1 or ?lowfx=0 */
#game.lowfx{ --paper:rgba(255,255,255,.92); }
#game.lowfx .pill, #game.lowfx .iconbtn, #game.lowfx .problem, #game.lowfx .picture-problem, #game.lowfx .screen{
  backdrop-filter:none; -webkit-backdrop-filter:none; }
#game.lowfx .cloud, #game.lowfx .sun{ filter:none; }
#game.lowfx .binner{ box-shadow:0 3px 6px rgba(0,0,0,.25), inset 0 6px 8px rgba(255,255,255,.3); }

@media (prefers-reduced-motion: reduce){
  #cub.happy,#cub.sad,#cub.idle,.cloud,.bubble > .binner,.hillband,.treeband,.ground::before,.sun .sun-rays,.badge,.mcard.unlockable{ animation:none !important; }
}