/* Cropwhirl 0.4 — illustrated worlds, warm glass and a luminous garden board.
   This layer deliberately leaves game geometry and animation classes intact. */
:root{
  --cw-ink:#244b43;
  --cw-quiet:#647d6b;
  --cw-cream:#fff9e9;
  --cw-sage:#568675;
  --cw-deep:#2e6658;
  --cw-gold:#e1bb73;
  --cw-line:rgba(255,255,246,.82);
  --cw-soft-shadow:0 7px 22px #234e3c19;
}
html{background:#d1ddc9;overflow-x:clip}
body{
  color:var(--cw-ink);
  background:radial-gradient(ellipse at 12% 0,#eee4c6 0,transparent 48%),
    radial-gradient(ellipse at 88% 100%,#95b8a5 0,transparent 55%),#d1ddc9;
  font-family:"Avenir Next","Nunito Sans","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
button,select,input{font-family:inherit}
button:focus-visible,select:focus-visible{outline:3px solid #b88636;outline-offset:3px}
button{transition:background .18s,box-shadow .18s,filter .18s}
button:disabled{cursor:default}
#app{background:#f4f3e7;box-shadow:0 28px 100px #234b3a2c}
.view{position:relative}
.eyebrow{font-size:9px;letter-spacing:1.8px;color:#617d63;font-weight:850}
.icon{overflow:visible}
p{color:#617768}
.primary{
  background:linear-gradient(155deg,#75a18b 0%,#578873 55%,#437862 100%);
  border:1px solid #94b6a0;border-bottom-color:#38624f;
  border-radius:17px;padding:14px 20px;
  font-size:13px;letter-spacing:.15px;color:#fffbed;
  box-shadow:inset 0 1px 0 #d4e4c58a,0 4px 0 #34644f,0 8px 17px #2c60412b;
  min-height:49px;
}
.primary:active{box-shadow:inset 0 1px 0 #d4e4c58a,0 2px 0 #34644f,0 3px 8px #2c60411a}
.primary:disabled{background:#9aaf9a;color:#f9f7e9;border-color:#b1c1a7;box-shadow:0 3px 0 #859783;opacity:.76}
.secondary{
  border:1px solid #d3ddc8;border-radius:15px;background:linear-gradient(#fffdf3,#edf2e5);
  color:#466c54;box-shadow:inset 0 1px 0 #fff,0 2px 0 #cfdbc5;
  font-size:12px;min-height:46px;
}
.secondary:disabled{color:#85937b;background:#f0f1e6;opacity:.75}
.text-button{color:#647e68;font-weight:700;font-size:12px;min-height:42px}
.nav-circle{
  width:42px;height:42px;min-width:42px;min-height:42px;
  background:linear-gradient(#fffdf2,#e9f1e3);border:1px solid #ffffffcf;
  border-radius:14px;box-shadow:inset 0 1px 0 white,0 3px 0 #79957d26;
  color:#51725d;
}
.nav-circle .icon{width:21px;height:21px}
.language-picker{
  background:#fffcf2c9;border:1px solid #dbe1cf;border-radius:12px;
  color:#456a55;font-size:10px;padding:9px 4px;min-height:40px;max-width:45px;
}
.lives-button{
  background:linear-gradient(145deg,#fffcf2,#f8efe0);border:1px solid #fffef3;
  min-height:42px;padding:9px 10px;border-radius:15px;color:#43634f;
  box-shadow:inset 0 1px 0 white,0 3px 0 #baa18121;font-size:14px;
}
.lives-button .icon{color:#c97f78;filter:drop-shadow(0 2px 0 #a9554c22);width:21px;height:21px}
.lives-button .plus{background:#5a8b74;box-shadow:inset 0 1px 0 #acc8a7;line-height:1}

/* The world paintings stay fully saturated; only the controls receive glass. */
.map-view{padding:0 14px 110px;background:linear-gradient(180deg,#f8f5e7,#e9efdE)}
.map-view .topbar{
  top:0;min-height:70px;margin:0 -14px;padding:13px 16px;
  background:linear-gradient(180deg,#fff9e9f5,#faf6e9eb);
  border-bottom:1px solid #fff9e5;box-shadow:0 4px 22px #29472b0c;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);gap:8px;
}
.map-view .brand{gap:10px}
.map-view .brand-mark{
  background:linear-gradient(145deg,#648f74,#386e5b);color:#f5e2ae;
  width:39px;height:39px;border-radius:14px;rotate:-5deg;
  border:1px solid #88ab8a;box-shadow:inset 0 1px 0 #d2dbac80,0 3px 0 #2e5b4322;
}
.map-view .brand-mark .icon{width:24px;height:24px;rotate:5deg}
.map-view .wordmark{font-size:15px;letter-spacing:1.7px;font-weight:850;color:#315c4d}
.map-view .brand small{font-size:7px;letter-spacing:2.5px;color:#7d9778;margin-top:5px}
.map-view .lives-button{padding:8px 9px;gap:5px;font-size:13px;min-height:40px}
.map-view .lives-button .plus{width:19px;height:19px;font-size:15px;margin-left:2px}
.world-controls{
  top:70px;min-height:79px;padding:12px 7px;margin:0 -2px;
  background:linear-gradient(#faf6e9ef,#f4f3e9de);
  border-bottom:1px solid #dce6d0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  gap:10px;
}
.world-controls .nav-circle{width:42px;height:42px;min-width:42px;border-radius:14px}
.world-controls .nav-circle:disabled{opacity:.3}
.world-heading .eyebrow{font-size:8px;letter-spacing:2.2px;color:#7f916f;margin-bottom:3px}
.world-heading select{
  font-size:18px;font-weight:850;color:#315b47;letter-spacing:-.55px;
  padding:4px 3px;max-width:100%;outline-offset:0;
}
.world-tier,.world-tier-label{
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 9px;border:1px solid #e2d4ad;border-radius:20px;background:#fffae9c9;
  color:#9b7c43;font-size:8px;letter-spacing:1.2px;font-weight:850;text-transform:uppercase;
}
.world-tagline{font-size:10px;line-height:1.5;color:#6f876b;text-align:center;margin:5px auto 0;max-width:290px}
.map-hero{position:relative;text-align:center;padding:13px 14px 8px}
.map-hero h1{font-size:26px;line-height:1.1;margin:5px 0;color:#315b47;letter-spacing:-.9px}
.map-hero p{font-size:11px;max-width:310px;margin:0 auto;line-height:1.6}
.journey-progress{font-size:10px;padding:12px 4px;color:#78916c;letter-spacing:.25px;align-items:center}
.journey-progress strong{
  color:#456e50;font-size:11px;letter-spacing:.5px;background:#fffbeed4;
  border:1px solid #dce3ca;padding:5px 10px;border-radius:16px;
}
.world-map{
  border-radius:27px;background:#b5d1aa;box-shadow:0 1px 0 #ffffffd9,0 5px 0 #93a48642,0 16px 32px #3e62321c;
  border:1px solid #fff7db99;isolation:isolate;
}
.world-art{isolation:isolate;background-image:var(--world-art,none);background-size:cover;background-position:center}
.world-art>.illustrated-map{
  display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;
}
.world-art>svg{position:absolute;inset:0;width:100%;height:100%}
.world-art>.map-route,.world-art>.journey-route{position:absolute;inset:0;z-index:1}
.path-node{
  width:59px;height:59px;font-size:24px;font-weight:850;
  border:4px solid #fff7dc;border-radius:50%;color:#526e4b;
  background:radial-gradient(circle at 33% 20%,#fffceb,#d5e6c7 72%);
  box-shadow:inset 0 2px 0 #ffffffd9,0 4px 0 #7d996544,0 8px 11px #2c4f3730;
  text-shadow:0 1px 0 #ffffff6e;
}
.path-node[data-status=current]{
  border-color:#fff7d7;color:#fffce8;
  background:radial-gradient(circle at 34% 18%,#8ab897,#508573 65%,#346d5b);
  box-shadow:inset 0 2px 0 #bad4ad,0 5px 0 #2f6049,0 0 0 6px #f5dc9d80,0 12px 19px #315a3f45;
  text-shadow:0 2px 0 #2b5a4355;
}
.path-node[data-status=current]:before{
  content:"";position:absolute;inset:-10px;border:1px solid #fff3c6d9;border-radius:50%;
  pointer-events:none;box-shadow:0 0 22px #ffe6ac70;animation:routebeacon 2.8s ease-in-out infinite;
}
.path-node[data-status=won]{
  background:radial-gradient(circle at 32% 20%,#ffeeba,#e6c276 68%,#caa154);
  border-color:#fff7d6;color:#78582a;
  box-shadow:inset 0 2px 0 #fff7cd,0 4px 0 #a9874b,0 8px 11px #2c4f372b;
}
.path-node[data-status=locked]{
  background:radial-gradient(circle at 30% 20%,#e5ecda,#b3c4ac);
  border-color:#e8eddd;color:#6e856b;opacity:.92;
  box-shadow:inset 0 2px 0 #ffffffa6,0 4px 0 #8eaa8555,0 5px 9px #2c4f3726;
}
.path-node .level-stars{
  background:linear-gradient(#fff9df,#efdfb1);border:1px solid #fbefc5;
  box-shadow:0 2px 0 #9c85444d;bottom:-10px;height:18px;padding:3px 6px;border-radius:9px;
}
.path-node .level-stars .icon{width:11px;height:11px;color:#a78231}
.path-node .level-stars .empty{opacity:.22}
.current-marker{
  top:-35px;min-width:28px;min-height:28px;display:grid;place-items:center;
  background:#fff6d9;border:1px solid #faeabc;border-radius:12px;padding:5px;
  box-shadow:0 3px 0 #ba9d5b,0 5px 9px #355d3133;color:#5c8767;
}
.current-marker .icon{width:19px;height:19px}
.challenge-node{width:62px;height:62px;border-radius:21px}
.journey-dock{
  width:min(calc(100% - 20px),570px);bottom:max(10px,env(safe-area-inset-bottom));
  padding:10px;gap:10px;border:1px solid #fffef0;border-radius:24px;
  background:#fffae9e8;box-shadow:inset 0 1px 0 white,0 5px 0 #c1ceb457,0 13px 40px #234d3b3b;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.journey-dock .primary{max-width:none;border-radius:16px;font-size:13px;min-height:49px;padding:13px 10px}
.journey-dock .utility{
  flex:none;width:44px;height:44px;min-height:44px;background:#eff2e3;
  border:1px solid #dce6ce;border-radius:15px;color:#648061;
  box-shadow:inset 0 1px 0 #fff;gap:0;
}
.journey-dock .icon{width:22px;height:22px}
.map-view>.micro-note{font-size:10px;color:#617e63;letter-spacing:.2px;margin:20px 0 0;padding-bottom:3px}

/* A richly illustrated backdrop, a clear game foreground. */
.game-view{
  padding:14px 14px 24px;background:#b6cba4;min-height:100dvh;
  overflow:hidden;isolation:isolate;
}
.level-landscape{inset:0;height:100%;width:100%;opacity:1;z-index:-1;overflow:hidden;background-image:var(--world-art,none);background-size:cover;background-position:center}
.level-landscape>.illustrated-landscape{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  opacity:1;
}
.level-landscape>svg{position:absolute;inset:0;width:100%;height:100%;opacity:1}
.level-landscape:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#edf4df22,transparent 32%,transparent 67%,#1e4d3b20);
  pointer-events:none;
}
.game-view .topbar{
  min-height:67px;margin-bottom:12px;padding:8px;gap:6px;
  border-radius:21px;background:linear-gradient(145deg,#fffcefE8,#f7f5e3d9);
  border:1px solid #fffbea;box-shadow:inset 0 1px 0 #fff,0 5px 0 #4b765a13,0 10px 24px #335a3815;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.game-view .nav-circle{width:39px;height:42px;min-width:39px;min-height:42px;border-radius:13px}
.game-view .game-title{padding:0 2px}
.game-view .game-title .eyebrow{
  color:#779061;letter-spacing:1px;font-size:7px;line-height:1.5;max-height:23px;
}
.game-view .game-title h2{color:#2c5545;font-size:16px;font-weight:850;letter-spacing:-.5px;margin-top:4px}
.game-view .language-picker{max-width:39px;min-height:39px;padding:6px 2px;font-size:9px;border-radius:11px}
.game-view .lives-button{min-height:39px;padding:7px;gap:4px;font-size:13px;border-radius:13px}
.game-view .lives-button .icon{width:18px;height:18px}
.hud{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 77px;gap:8px;margin-bottom:13px}
.metric{
  min-width:0;min-height:85px;padding:12px 10px 10px;
  border-radius:19px;border:1px solid #fff9dd;
  background:linear-gradient(145deg,#fffceeF3,#f8f6e7e6);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 #6b825d19,0 7px 17px #254d3919;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.metric-label{font-size:8px;letter-spacing:1.35px;font-weight:850;color:#7a8f65;line-height:1.3}
.metric-value{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;font-size:20px;font-weight:850;margin-top:7px;line-height:1.15;color:#355c45;letter-spacing:-.6px}
.metric-value small{font-size:9px;color:#879670;letter-spacing:0;white-space:nowrap}
.progress-track{height:5px;background:#dfe5cc;box-shadow:inset 0 1px 2px #58784e15;margin-top:9px;border-radius:8px}
.progress-fill{background:linear-gradient(90deg,#86b18a,#c4d887);box-shadow:0 0 7px #b4cb8170}
.metric.collect{padding-left:44px}
.metric.collect>.crop{width:40px;height:45px;left:2px;top:22px;filter:drop-shadow(0 3px 1px #416b4b26)}
.metric.collect .metric-value{font-size:21px;gap:3px}
.metric.collect .progress-track{margin-left:-33px}
.metric.moves{
  background:radial-gradient(ellipse at 33% 0,#7fac8a,#467d69 67%,#336957);
  border:1px solid #8fb79a;box-shadow:inset 0 1px 0 #b6d2adcc,0 4px 0 #2b5b4770,0 9px 18px #214d3933;
  padding:12px 4px 8px;text-align:center;
}
.metric.moves .metric-label{color:#e9edcf;font-size:8px;letter-spacing:1.6px}
.metric.moves .metric-value{
  display:block;color:#fff9e1;font-size:34px;line-height:1;margin-top:9px;
  text-shadow:0 2px 0 #244f3e66;letter-spacing:-1.5px;
}
.metric.moves[data-low=true]{background:radial-gradient(ellipse at 33% 0,#d9b281,#a27c54 67%,#886b48)}
.ice-goal{
  background:#f3fcf3e8;border:1px solid #eaffefcc;color:#507d7a;border-radius:13px;
  padding:8px 10px;margin:0 0 11px;font-size:10px;box-shadow:0 3px 0 #526f5a16;line-height:1.5;
}
.ice-goal .icon{width:16px;height:16px;color:#74a9b3}
.ice-goal strong{color:#3d7477}
.selection-note{background:#fff0cbdE;border:1px solid #f5dfa9;border-radius:14px;color:#876537;font-size:11px;box-shadow:0 4px 10px #254d3910}
.board-wrap{max-width:540px;isolation:isolate}
.board-aura{
  inset:10% -3% -4%;border-radius:35%;background:#1e5b40;
  opacity:.25;filter:blur(18px);
}
.board{
  border:9px solid #fff9e9eD;border-radius:26px;
  background:linear-gradient(145deg,#bad0aadF,#8fb28ceF);
  box-shadow:inset 0 0 0 1px #eff5d5cc,0 1px 0 #fffde3,0 6px 0 #4b755577,0 10px 0 #efefd143,0 19px 35px #254d3940;
}
.board:after{
  content:"";position:absolute;inset:0;border:1px solid #fffde870;border-radius:17px;
  box-shadow:inset 0 1px 0 #ffffe48c;pointer-events:none;z-index:9;
}
.slot{padding:2px}
.slot:before{
  border-radius:10px;background:linear-gradient(150deg,#ecf4dcd9,#e1eccc94);
  border:1px solid #fffce642;box-shadow:inset 0 1px 0 #ffffe685,0 1px 1px #4b74411c;
}
.slot:nth-child(even):before{background:linear-gradient(150deg,#e4edcfda,#d3e5bea8)}
.slot.empty:before{display:none}
.slot.ice:before{border:0;background:#b3d9de4a;box-shadow:none}
.piece{padding:2px}
.piece>span{filter:drop-shadow(0 4px 2px #2e5c3c40)}
.piece .crop{scale:1.06}
.piece .special-crop{scale:1.08;filter:drop-shadow(0 3px 1px #4764404d)}
.piece.special-piece>span{background:radial-gradient(ellipse,#fff1bece,transparent 74%);border-radius:16px}
.piece.selected>span{
  border-radius:11px;background:#fff5bdcc;box-shadow:0 0 0 2px #fff3be,0 0 14px #f3d385cc;
  transform:scale(1.05);
}
.piece .bonus{
  right:0;top:0;min-width:17px;line-height:16px;font-size:10px;
  color:#806029;background:linear-gradient(#fffbe0,#f3db9d);border:1px solid #fff0c2;
  border-radius:7px;padding:0 3px;box-shadow:0 2px 0 #a6814255;text-shadow:0 1px 0 #fff5d1;
}
.ice-block{filter:drop-shadow(0 3px 2px #477b8e44)}
.board-caption{
  border:1px solid #fff3d9b8;background:#fff8e8e3;color:#698064;
  padding:9px 6px;margin:16px 0 11px;border-radius:14px;font-size:9px;
  box-shadow:inset 0 1px 0 #fffdf7,0 3px 0 #456d4f1a;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.board-caption strong{color:#416b51;font-weight:850}
.boosters{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.booster{
  position:relative;border:1px solid #fff9e4;border-radius:18px;min-height:74px;
  padding:10px 6px;gap:7px;justify-content:center;
  background:linear-gradient(150deg,#fffdf1f5,#f5f0dfe6);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 #476c5038,0 9px 18px #254d3918;
  color:#476c50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.booster>.icon{
  width:29px;height:29px;color:#977641;filter:drop-shadow(0 2px 0 #ffffff8a);
}
.booster strong{font-size:11px;font-weight:850;letter-spacing:-.15px}
.booster small{color:#839174;font-size:9px;line-height:1.4;margin-top:5px}
.booster.active{
  background:linear-gradient(145deg,#fff8dd,#edd093);border-color:#fff0bc;
  box-shadow:inset 0 1px 0 #fff,0 4px 0 #a18149,0 0 0 3px #f6df9d50;
  color:#806333;
}
.booster:disabled{opacity:.55;filter:saturate(.6)}
.game-footer{
  gap:0;justify-content:space-around;background:#f9f7e5d9;
  border:1px solid #fff4dadb;border-radius:17px;margin-top:15px;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #456d4f1a;padding:3px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.game-footer .utility{min-height:42px;padding:6px 5px;gap:5px;font-size:9px;color:#526f50}
.game-footer .icon{width:17px;height:17px;color:#759368}
.combo-bubble{
  background:linear-gradient(#fff9df,#fae5b2);border:1px solid #fff4c9;border-radius:20px;
  box-shadow:0 4px 0 #a786494f,0 10px 30px #264d3436;font-size:20px;color:#82683e;
  padding:13px 21px;text-shadow:0 1px 0 #fff6dd;letter-spacing:-.4px;
}
.effect-line{box-shadow:0 0 20px 7px #ffefb87d;background:linear-gradient(90deg,#eeca78,#fff8d8,#b8d9b4)}
.effect-blast{border-color:#fff0b7;background:radial-gradient(circle,#fff9dfcc,#e5bb7377 48%,transparent 70%)}
.harvest-spark{color:#f8d783;filter:drop-shadow(0 0 4px #ffeab3)}

/* Dialogs follow the same illustration-friendly visual language. */
.modal-backdrop{
  padding:16px;background:#183c30a1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.modal{
  width:100%;max-width:410px;max-height:calc(100dvh - 32px);
  padding:31px 23px 24px;border:1px solid #fff2d0;border-radius:29px;
  background:radial-gradient(ellipse at 50% 0,#fffde8,#faf6e6 55%,#f2f0df);
  box-shadow:inset 0 1px 0 #fffdf6,0 5px 0 #97a58a66,0 22px 80px #173b3466;
  scrollbar-width:thin;scrollbar-color:#c4d0b2 transparent;
}
.modal-close{
  right:9px;top:9px;width:39px;height:39px;min-height:39px;
  border:1px solid #e1e5cf;border-radius:13px;background:#f0f2e0;color:#7d9271;
  box-shadow:inset 0 1px 0 #fff9ed;
}
.modal h2{color:#315b46;font-weight:850;font-size:27px;line-height:1.12;letter-spacing:-.9px;margin:8px 0 12px}
.modal .eyebrow{font-size:8px;letter-spacing:1.8px;color:#93a076;line-height:1.6}
.modal p{font-size:12px;color:#70816a;line-height:1.65;margin-bottom:15px}
.modal .primary,.modal .secondary{margin-top:11px}
.modal-emblem{
  width:88px;height:88px;padding:11px;border:1px solid #f1e6bd;border-radius:28px;
  background:radial-gradient(circle at 30% 20%,#fff1c6,#e0e6ba);
  box-shadow:inset 0 2px 0 #fff6df,0 5px 0 #b5c0953d;margin-bottom:15px;
}
.modal-emblem .crop{filter:drop-shadow(0 5px 2px #57734029)}
.modal-emblem.heart{background:radial-gradient(circle at 30% 20%,#ffecc9,#efd3bc);border-color:#fae4c3}
.modal-emblem.heart .icon{color:#cc8178;filter:drop-shadow(0 3px 0 #96595221)}
.goal-summary{gap:12px;margin:18px 0 20px}
.goal-chip{
  width:110px;min-height:112px;padding:12px 7px;border:1px solid #fff4d5;
  border-radius:20px;background:linear-gradient(145deg,#eef1d9,#e2e9cD);
  box-shadow:inset 0 1px 0 #fffff1,0 3px 0 #a7b79030;
  font-size:20px;font-weight:850;color:#50714c;letter-spacing:-.45px;
}
.goal-chip .icon{color:#c7a65e;width:30px;height:30px;margin:2px auto 9px}
.goal-chip .crop{width:39px;height:39px;margin:0 auto 6px}
.goal-chip small{font-size:9px;color:#7b906a;margin-top:6px;letter-spacing:0}
.target-text{background:#fff7dd;border:1px solid #eee0b6;border-radius:13px;padding:9px;font-weight:750;color:#9a8152!important}
.result-stars{gap:10px;margin:19px 0 17px}
.result-stars .icon{width:47px;height:47px;color:#e2bc68;filter:drop-shadow(0 3px 0 #ae884d66)}
.result-stars .empty{color:#dfe3cc;filter:none}
.result-score{font-size:40px;line-height:1.1;font-weight:850;color:#5b8763;letter-spacing:-1.7px;margin:17px 0 6px}
.result-sub{font-size:10px;letter-spacing:.3px;color:#829070;margin-bottom:24px}
.shop-product{
  border:1px solid #f3e3bf;border-radius:21px;padding:17px;
  background:linear-gradient(135deg,#fff1d3,#f2e6cc);box-shadow:inset 0 1px 0 #fff8e2;
  margin:17px 0 13px;gap:14px;
}
.shop-product>.icon{width:40px;height:40px;color:#c8837a;filter:drop-shadow(0 3px 0 #b7685d21)}
.shop-product strong{font-size:16px;color:#7b6745;letter-spacing:-.4px}
.shop-product small{font-size:10px;color:#a19069;line-height:1.5}
.shop-boosters{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:18px 0}
.shop-booster{
  min-width:0;border:1px solid #e0e6cb;border-radius:20px;padding:14px 8px 10px;gap:9px;
  background:linear-gradient(145deg,#f2f5df,#e7eed6);box-shadow:inset 0 1px 0 #ffffee,0 3px 0 #bac8a634;
}
.shop-booster>.icon{width:44px;height:44px;color:#937444;filter:drop-shadow(0 3px 0 #fff7dc99)}
.shop-booster strong{font-size:12px;color:#597451;letter-spacing:-.1px}
.shop-booster .secondary{width:100%;font-size:9px;min-height:41px;margin:0;padding:8px 5px;line-height:1.35;overflow-wrap:anywhere;border-radius:12px}
.shop-booster .text-button{font-size:9px;line-height:1.4;min-height:32px;padding:5px}
.shop-note{font-size:10px!important;color:#8a9579!important;line-height:1.55!important;margin:11px 0 10px!important}
.rules-list{gap:13px;margin:22px 0}
.rule-row{font-size:11px;color:#667e5e;gap:12px;line-height:1.6}
.rule-row .rule-number{
  width:37px;height:37px;border-radius:13px;background:linear-gradient(#edf2d7,#dfe8c6);
  color:#789468;box-shadow:inset 0 1px 0 #fff9e4;font-size:17px;
}
.audio-settings{gap:0;margin:21px 0 14px;border:1px solid #e1e6cf;border-radius:18px;overflow:hidden;background:#eef3e0}
.audio-settings label{padding:14px 12px;color:#5c7752;font-size:11px;line-height:1.4;min-height:54px}
.audio-settings label+label{border-top:1px solid #dce5cb}
.audio-settings input[type=checkbox]{accent-color:#648e70;width:22px;height:22px;flex:none}
.audio-settings input[type=range]{accent-color:#648e70;width:105px;max-width:40%;flex:none}
.danger-text{color:#b17864}
#toast{
  background:#305f4deb;border:1px solid #73977ccc;color:#fff7dc;
  border-radius:17px;font-size:12px;padding:13px 18px;line-height:1.5;
  box-shadow:0 4px 0 #21473244,0 11px 32px #173e314d;
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);bottom:30px;
}
@keyframes routebeacon{0%,100%{opacity:.6;scale:1}50%{opacity:1;scale:1.04}}

@media(max-width:350px){
  .map-view{padding-left:10px;padding-right:10px}
  .map-view .topbar{margin-left:-10px;margin-right:-10px;padding-left:12px;padding-right:12px;gap:6px}
  .map-view .brand{gap:7px}
  .map-view .brand-mark{width:33px;height:36px;border-radius:12px}
  .map-view .wordmark{font-size:12px;letter-spacing:1.1px}
  .map-view .brand small{font-size:6px;letter-spacing:1.7px}
  .map-view .lives-button{padding:8px 7px;font-size:12px}
  .world-heading select{font-size:16px;letter-spacing:-.4px}
  .world-controls{gap:6px;padding-left:2px;padding-right:2px}
  .world-controls .nav-circle{width:39px;min-width:39px}
  .path-node{width:53px;height:53px;font-size:22px;border-width:3px}
  .challenge-node{width:57px;height:57px}
  .current-marker{top:-31px;min-width:25px;min-height:25px;padding:4px}
  .journey-dock{width:calc(100% - 16px);padding:8px;gap:8px;border-radius:21px}
  .journey-dock .utility{width:40px;height:44px}
  .journey-dock .primary{font-size:12px;padding:12px 8px}
  .game-view{padding:10px 10px 20px}
  .game-view .topbar{padding:7px 6px;gap:4px;border-radius:18px;min-height:62px;margin-bottom:10px}
  .game-view .nav-circle{width:35px;min-width:35px}
  .game-view .game-title h2{font-size:13px;letter-spacing:-.3px}
  .game-view .game-title .eyebrow{font-size:6px;letter-spacing:.45px}
  .game-view .language-picker{max-width:35px;font-size:8px}
  .game-view .lives-button{font-size:12px;padding:6px 5px}
  .game-view .lives-button .icon{width:16px;height:16px}
  .hud{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) 64px;gap:6px;margin-bottom:11px}
  .metric{min-height:81px;padding:11px 8px 9px;border-radius:17px}
  .metric-label{font-size:7px;letter-spacing:1px}
  .metric-value{font-size:18px;gap:3px;margin-top:6px}
  .metric-value small{font-size:8px}
  .metric.collect{padding-left:35px}
  .metric.collect>.crop{width:33px;height:37px;left:0;top:22px}
  .metric.collect .metric-value{font-size:19px;gap:2px}
  .metric.collect .progress-track{margin-left:-25px}
  .metric.moves{padding:11px 3px 8px}
  .metric.moves .metric-value{font-size:31px;margin-top:9px}
  .board{border-width:7px;border-radius:23px}
  .board-caption{font-size:8px;padding:8px 4px;margin-top:14px}
  .boosters{gap:6px}
  .booster{padding:10px 5px;gap:4px;min-height:67px;border-radius:16px}
  .booster>.icon{width:25px;height:25px}
  .booster strong{font-size:10px}
  .booster small{font-size:8px;line-height:1.4}
  .game-footer .utility{font-size:8px;gap:4px}
  .game-footer .icon{width:15px;height:15px}
  .modal-backdrop{padding:12px}
  .modal{padding:28px 19px 20px;border-radius:25px;max-height:calc(100dvh - 24px)}
  .modal h2{font-size:25px}
  .modal .eyebrow{font-size:7px;letter-spacing:1.4px}
  .goal-chip{width:104px}
  .shop-booster .secondary{font-size:8px}
}
@media(min-width:640px){
  #app{margin:24px auto;border:1px solid #f8f7e6;border-radius:31px;overflow:hidden;min-height:calc(100dvh - 48px)}
  .view{min-height:calc(100dvh - 48px)}
  .map-view{padding:0 29px 120px}
  .map-view .topbar{margin:0 -29px;padding:15px 31px;min-height:76px}
  .world-controls{top:76px;padding:15px 20px}
  .world-map{max-width:460px}
  .journey-progress{max-width:460px;margin:0 auto}
  .game-view{padding:23px 27px 29px}
  .game-view .topbar{min-height:75px;padding:11px 12px;margin-bottom:16px}
  .game-view .game-title h2{font-size:19px}
  .game-view .game-title .eyebrow{font-size:8px}
  .hud{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 96px;gap:11px;margin-bottom:17px}
  .metric{min-height:93px;padding:14px 13px}
  .metric-label{font-size:9px}
  .metric-value{font-size:25px}
  .metric-value small{font-size:11px}
  .metric.collect{padding-left:55px}
  .metric.collect>.crop{width:49px;height:53px;left:3px;top:21px}
  .metric.collect .metric-value{font-size:25px}
  .metric.collect .progress-track{margin-left:-40px}
  .metric.moves .metric-value{font-size:39px}
  .board{border-width:11px;border-radius:30px}
  .board-caption{font-size:10px;margin-top:20px}
  .booster{min-height:82px;gap:10px}
  .booster>.icon{width:34px;height:34px}
  .booster strong{font-size:13px}
  .booster small{font-size:10px}
  .game-footer .utility{font-size:11px;min-height:45px;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .path-node[data-status=current]:before{animation:none}
}

.world-heading select{min-height:32px}
/* Small tonal variations preserve the same original world painting. */
[data-world-theme="3"] .illustrated-map,[data-world-theme="3"] .illustrated-landscape{filter:sepia(.16) saturate(1.06);object-position:58% center}
[data-world-theme="6"] .illustrated-map,[data-world-theme="6"] .illustrated-landscape{filter:brightness(1.04) saturate(.85);object-position:70% center}
[data-world-theme="7"] .illustrated-map,[data-world-theme="7"] .illustrated-landscape{filter:sepia(.08) saturate(1.08);object-position:35% center}
[data-world-theme="1"] .illustrated-map,[data-world-theme="1"] .illustrated-landscape{object-position:70% center}