/* Cropwhirl 0.5 — the illustrated garden continues into every control.
   Real material artwork is packaged locally; layout and game timing are retained. */
:root{
  --cw-paper:url("assets/interface/parchment.webp");
  --cw-wood:url("assets/interface/wood.webp");
  --cw-ink:#304b36;
  --cw-cream:#fff6df;
  --cw-sage:#5f8061;
  --cw-deep:#315743;
  --cw-gold:#cca260;
  --cw-quiet:#67745b;
  --cw-natural-edge:#d5bb82;
  --cw-stone-shadow:inset 0 2px 1px #fffbe8e6,inset 0 -2px 2px #aa8d5140,0 4px 0 #7c785b55,0 8px 14px #2b4c3426;
}
html{background:#c6d0b6}
body{
  background-image:radial-gradient(ellipse at 18% 0,#fff3d680,transparent 65%),
    linear-gradient(120deg,#bed0b185,#a1b49b96),var(--cw-paper);
  background-color:#c0cdb1;background-size:auto,auto,600px;
  color:var(--cw-ink);
}
#app{background:#e9e0c9;box-shadow:0 24px 80px #1f3d3452}
p{color:#626c52}
.eyebrow{color:#727e57;letter-spacing:1.55px}
button,select{touch-action:manipulation}
button:focus-visible,select:focus-visible{outline-color:#b58837}
button:disabled{cursor:default}

/* Stone plaques and porcelain panels share a quiet, natural grain. */
.map-view .topbar,.world-controls,.game-view .topbar,.metric,
.journey-dock,.board-caption,.booster,.game-footer,.modal,
.goal-chip,.shop-product,.shop-booster,.audio-settings,.continue-card{
  background-color:#f4ead1;
  background-image:linear-gradient(145deg,#fff8eac2,#eadcbe65),var(--cw-paper);
  background-size:auto,420px;
  border-color:var(--cw-natural-edge);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.map-view{
  background-color:#eee4cc;
  background-image:linear-gradient(180deg,#fff2de87,#e3e1c35e),var(--cw-paper);
  background-size:auto,480px;
}
.map-view .topbar{
  border-bottom-color:#bea979;
  box-shadow:inset 0 1px 0 #fff7e8,0 2px 0 #fff9dc82,0 5px 12px #4b543422;
}
.world-controls{
  border-bottom-color:#ceba8d;
  box-shadow:inset 0 1px 0 #fff7e887,0 3px 9px #53604415;
}
.map-view .wordmark{color:#38533b;text-shadow:0 1px 0 #fff9df;font-weight:900;letter-spacing:1.6px}
.map-view .brand small{color:#737754}
.map-view .brand-mark{
  border-color:#cead6f;
  background:radial-gradient(ellipse at 30% 9%,#98b593,#587d59 62%,#34543e);
  color:#fff0bd;
  box-shadow:inset 0 2px 0 #c6d6a2,0 3px 0 #665c39,0 5px 7px #40512d30;
}
.world-heading select{color:#3c563b;text-shadow:0 1px 0 #fff9e1}
.world-heading .eyebrow{color:#817f54}
.world-tier,.world-tier-label,.journey-progress strong{
  background-image:linear-gradient(#fff7e8bb,#e2d0a680),var(--cw-paper);
  background-size:auto,320px;
  border-color:#c9b07b;color:#706037;
  box-shadow:inset 0 1px 0 #fff9e6,0 2px 0 #b3a17442;
}
.journey-progress{color:#677656}
.journey-progress strong{color:#4c6240}
.world-tagline,.map-view>.micro-note{color:#697454}
.world-map{
  border:1px solid #d7c387;
  box-shadow:inset 0 0 0 2px #ffffff46,0 3px 0 #988658,0 7px 0 #e7d5a669,0 17px 24px #2e483535;
}
.journey-dock{
  border:1px solid #d4b779;
  box-shadow:inset 0 2px 0 #fffbe9,0 4px 0 #89774e,0 14px 24px #1f3e3540;
}

/* Sage enamel, warm brass lips, and rounded ceramic secondary controls. */
.primary{
  border:1px solid #b8a06b;border-bottom-color:#5b5738;
  background-color:#527955;
  background-image:linear-gradient(160deg,#95b58dd9 0%,#5e895adb 40%,#3e644bfa 100%),var(--cw-paper);
  background-size:auto,260px;
  color:#fff7da;text-shadow:0 1px 1px #234633;
  box-shadow:inset 0 2px 0 #d0dba3c2,inset 0 -2px 2px #233f2d50,0 4px 0 #504a2f,0 8px 12px #284d333b;
}
.primary:active{box-shadow:inset 0 1px 0 #c9d49b,0 2px 0 #504a2f,0 4px 8px #284d3326}
.primary:disabled{
  color:#f9f2da;
  background-image:linear-gradient(150deg,#9baa84e3,#829473ed),var(--cw-paper);
  border-color:#c7b88f;box-shadow:inset 0 1px 0 #d5d9b4,0 3px 0 #7f795b;
  text-shadow:none;opacity:.84;
}
.secondary,.nav-circle,.language-picker,.lives-button,.modal-close,
.journey-dock .utility{
  background-color:#ede2c9;
  background-image:linear-gradient(150deg,#fff9e4b3,#e1d6b480),var(--cw-paper);
  background-size:auto,300px;
  border-color:#c6b27c;color:#4f694c;
  box-shadow:inset 0 2px 1px #fffbee,inset 0 -1px 1px #bda2766e,0 3px 0 #98886065,0 4px 6px #4a573314;
}
.secondary:disabled{
  color:#777d67;
  background-image:linear-gradient(#f6ecd7a6,#e4dabea6),var(--cw-paper);
  opacity:.8;
}
.secondary:active,.nav-circle:active,.lives-button:active,.journey-dock .utility:active{
  box-shadow:inset 0 2px 3px #826a3345,0 1px 0 #99896165;
}
.nav-circle .icon,.journey-dock .utility .icon{filter:drop-shadow(0 1px 0 #fff8de)}
.language-picker{border-width:1px;font-weight:850;color:#5a6549}
.lives-button{color:#4d6347}
.lives-button .icon{color:#b57465;filter:drop-shadow(0 2px 1px #8d4e4426)}
.lives-button .plus{
  background:linear-gradient(#7da47a,#477050);
  border:1px solid #b7c39a;box-shadow:inset 0 1px 0 #c7d7a4,0 1px 0 #3d563c;color:#fff5d8;
}
.text-button{color:#5d7154}

/* Level milestones are painted garden stones, with an enamel current level. */
.path-node{
  border-color:#e9d9ac;background-color:#ddd8be;
  background-image:radial-gradient(ellipse at 30% 12%,#fff8e1bb,#d5d5b47a 72%),var(--cw-paper);
  background-size:auto,180px;
  color:#657252;text-shadow:0 1px 0 #fffae1;
  box-shadow:inset 0 2px 2px #fffae6,inset 0 -3px 2px #9c997055,0 5px 0 #8b8761,0 8px 12px #254b383d;
}
.path-node[data-status=current]{
  background-image:radial-gradient(ellipse at 28% 14%,#a1c195ee,#4f825eeb 65%,#365f49fc),var(--cw-paper);
  background-size:auto,180px;border-color:#e9cc83;color:#fff5d2;
  box-shadow:inset 0 2px 1px #d9e3aed4,inset 0 -3px 3px #1e3d2c4d,0 5px 0 #5d5834,0 0 0 5px #eedbad60,0 11px 16px #284a3747;
  text-shadow:0 2px 1px #2c553c;
}
.path-node[data-status=won]{
  background-image:radial-gradient(ellipse at 28% 14%,#fff1c2c9,#e1bd79a6 68%,#bb925cbb),var(--cw-paper);
  background-size:auto,180px;border-color:#fff0bb;color:#775d33;
  box-shadow:inset 0 2px 1px #fff4ce,inset 0 -2px 2px #9b784d50,0 5px 0 #9b7d4e,0 8px 13px #254b3838;
}
.path-node[data-status=locked]{
  background-image:radial-gradient(ellipse at 30% 12%,#efead6b9,#bcbea07a),var(--cw-paper);
  background-size:auto,180px;border-color:#d5d2b6;color:#6f7860;opacity:.94;
  box-shadow:inset 0 2px 1px #f7f4dfb0,inset 0 -2px 2px #878c635e,0 4px 0 #8b937266,0 7px 10px #254b3830;
}
.path-node .level-stars{
  background-image:linear-gradient(#fff4d3c9,#d0b780a9),var(--cw-paper);
  background-size:auto,180px;border-color:#f4d99f;
  box-shadow:inset 0 1px 0 #fff8e0,0 2px 0 #8a784c70;
}
.path-node .level-stars .icon{color:#9c752e}
.current-marker{
  background-image:linear-gradient(#fff6d6cb,#e8d1a19c),var(--cw-paper);
  background-size:auto,180px;border-color:#d7b774;color:#61804f;
  box-shadow:inset 0 1px 0 #fff7e1,0 3px 0 #9b824d,0 6px 8px #2b473b30;
}

/* A carved wooden board cradles pale mossy stone cells. No geometry changes. */
.game-view .topbar{
  border-color:#d4b87b;
  box-shadow:inset 0 2px 1px #fff8e8,inset 0 -1px 1px #c5ad743a,0 4px 0 #7e795a5c,0 10px 17px #2948362b;
}
.game-view .game-title h2{color:#415939;text-shadow:0 1px 0 #fff8e4}
.game-view .game-title .eyebrow{color:#79805a}
.game-view .nav-circle{box-shadow:inset 0 1px 0 #fffbea,0 2px 0 #9c8c656e}
.metric{
  border-color:#ceaf73;
  box-shadow:var(--cw-stone-shadow);
}
.metric-label{color:#757953}
.metric-value{color:#3f5b3c;text-shadow:0 1px 0 #fff8dd}
.metric-value small{color:#788061;text-shadow:none}
.metric.collect>.crop{filter:drop-shadow(0 4px 2px #4b5b3538)}
.metric.moves{
  background-color:#456d50;
  background-image:radial-gradient(ellipse at 27% 0,#91b489eb,#4f7e57ed 61%,#345842fb),var(--cw-paper);
  background-size:auto,260px;
  border:1px solid #c8ae70;
  box-shadow:inset 0 2px 1px #c4d7a1,inset 0 -2px 2px #24473450,0 4px 0 #655b37,0 9px 14px #213e3440;
}
.metric.moves .metric-label{color:#f1edc9}
.metric.moves .metric-value{color:#fff5d1;text-shadow:0 2px 1px #284731}
.metric.moves[data-low=true]{
  background-image:radial-gradient(ellipse at 27% 0,#e1ba88e8,#a97c4deb 61%,#7c5a37fb),var(--cw-paper);
  background-size:auto,260px;border-color:#dfbb7a;
}
.progress-track{background:#c4c4a4;box-shadow:inset 0 1px 2px #666b3845,0 1px 0 #fff9dc}
.progress-fill{background:linear-gradient(#b4c68b,#668d59);box-shadow:inset 0 1px 0 #d0dea6}
.ice-goal{
  background-image:linear-gradient(145deg,#f2fae8cf,#d9e5cfbd),var(--cw-paper);
  background-size:auto,360px;border-color:#b7cbb0;color:#547c78;
  box-shadow:inset 0 1px 0 #fdfff0,0 3px 0 #66796342;
}
.selection-note{
  background-image:linear-gradient(#fff1cbb7,#ead199bd),var(--cw-paper);
  background-size:auto,360px;border-color:#d4b578;color:#82623b;
}
.board-aura{opacity:.35;background:#254a32;filter:blur(15px)}
.board{
  border-color:transparent;
  background:linear-gradient(150deg,#8f9e7480,#5a7050b9) padding-box,var(--cw-wood) border-box;
  background-color:#856844;background-size:auto,320px;
  box-shadow:inset 0 0 0 1px #354f3799,inset 0 3px 5px #29452d38,0 1px 0 #efcf87,0 5px 0 #695233,0 8px 0 #bea57280,0 17px 27px #233e354d;
}
.board:after{
  border-color:#ccbb7c8c;
  box-shadow:inset 0 1px 0 #e9e1ac8f,inset 0 -2px 1px #273e2a44;
}
.slot:before{
  background-image:linear-gradient(145deg,#f5efd8d4,#d4d3afb2),var(--cw-paper);
  background-size:auto,170px;border-color:#c0c29b;
  box-shadow:inset 0 2px 1px #fff8ddbd,inset 0 -2px 2px #9899753a,0 2px 1px #3b57366e;
}
.slot:nth-child(even):before{
  background-image:linear-gradient(145deg,#e9e9c9c9,#c2cea3b9),var(--cw-paper);
  background-size:auto,170px;border-color:#bac697;
}
.slot.ice:before,.slot.ice:nth-child(even):before{
  background:#91bec650;border:0;box-shadow:inset 0 2px 5px #314b4e35;
}
.piece>span{filter:drop-shadow(0 4px 2px #27453152)}
.piece .crop{scale:1.04}
.piece .special-crop{scale:1.05}
.piece.selected>span{
  background:radial-gradient(ellipse,#fff4c7e8,#f1d89d88);
  box-shadow:0 0 0 2px #efcf8b,0 0 12px #e4c76ba6;
}
.piece .bonus{
  background-image:linear-gradient(#fff5d9d9,#e8cc94ca),var(--cw-paper);
  background-size:auto,140px;border-color:#d4b57d;color:#795a2c;
  box-shadow:inset 0 1px 0 #fffadd,0 2px 0 #9a784a8f;text-shadow:0 1px 0 #fff3cc;
}
.piece.special-piece>span{background:radial-gradient(ellipse,#ffedb978,transparent 76%)}
.board-caption{
  color:#647454;border-color:#cbb47c;
  box-shadow:inset 0 1px 0 #fff7de,0 3px 0 #7a79524d;
}
.board-caption strong{color:#526441}
.booster{
  border-color:#cfb278;
  box-shadow:inset 0 2px 1px #fff9e6,inset 0 -2px 2px #ac915045,0 4px 0 #867851,0 8px 13px #284d3429;
  color:#556a45;
}
.booster>.icon{filter:drop-shadow(0 3px 2px #5b532a33);color:#967444}
.booster strong{color:#556a45}
.booster small{color:#707d59}
.booster.active{
  background-image:radial-gradient(ellipse at 35% 0,#fff5d8c9,#e6c78ca6 70%),var(--cw-paper);
  background-size:auto,420px;border-color:#d4b474;
  box-shadow:inset 0 2px 1px #fff6db,0 4px 0 #a1844d,0 0 0 3px #e5c6815c,0 8px 12px #284d3429;
}
.booster:disabled{opacity:.68}
.game-footer{
  border-color:#cbb47c;
  box-shadow:inset 0 1px 0 #fff7de,0 3px 0 #7a79524d;
}
.game-footer .utility{color:#526849}
.game-footer .icon{color:#7a895d;filter:drop-shadow(0 1px 0 #fff7de)}
.combo-bubble{
  background-image:linear-gradient(#fff6dbc4,#e9cb93a6),var(--cw-paper);
  background-size:auto,360px;border-color:#ddb97a;
  box-shadow:inset 0 1px 0 #fffadd,0 4px 0 #a1844d,0 10px 24px #2343334d;color:#7b6038;
}

/* Shop, rules, settings and results live in the same handcrafted world. */
.modal-backdrop{
  background:#1c352cb8;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.modal{
  border-color:#d8b97c;
  box-shadow:inset 0 2px 1px #fff9e9,inset 0 -3px 2px #a28b525e,0 6px 0 #706c4b,0 23px 64px #132f2c70;
  scrollbar-color:#baa173 transparent;
}
.modal h2{color:#435c3a;text-shadow:0 1px 0 #fff8df;letter-spacing:-.75px}
.modal .eyebrow{color:#82825a}
.modal p{color:#687254}
.modal-close{color:#74805a;border-color:#c4af7c}
.modal-emblem{
  border-color:#d5b97f;
  background-image:radial-gradient(ellipse at 27% 12%,#ffefc8cc,#d8ddafa8),var(--cw-paper);
  background-size:auto,260px;
  box-shadow:inset 0 2px 0 #fff9dc,inset 0 -2px 2px #9c925342,0 5px 0 #9b976756,0 8px 14px #3e5c3822;
}
.modal-emblem.heart{
  background-image:radial-gradient(ellipse at 27% 12%,#ffefd4cb,#e6cab19e),var(--cw-paper);
  background-size:auto,260px;border-color:#d7bb92;
}
.goal-chip{border-color:#c2ba80;color:#556e42;box-shadow:var(--cw-stone-shadow)}
.goal-chip small{color:#727b58}
.target-text{
  background-image:linear-gradient(#fff4d3cc,#e7d5a4ac),var(--cw-paper);
  background-size:auto,360px;border-color:#d4b87f;color:#8a724a!important;
  box-shadow:inset 0 1px 0 #fff8e1;
}
.result-score{color:#577742;text-shadow:0 2px 0 #fff4d6}
.result-sub{color:#76805c}
.result-stars .icon{color:#d0a458;filter:drop-shadow(0 3px 1px #8b6b39a3)}
.result-stars .empty{color:#c6c6a6;filter:drop-shadow(0 1px 0 #fff9de)}
.shop-product{
  background-image:linear-gradient(145deg,#fff0d0c9,#e6caa18a),var(--cw-paper);
  background-size:auto,380px;border-color:#d0ac73;box-shadow:var(--cw-stone-shadow);
}
.shop-product strong{color:#7e6740}
.shop-product small{color:#8b7c58}
.shop-booster{
  background-image:linear-gradient(145deg,#f1f1d4ba,#d9dfb9ad),var(--cw-paper);
  background-size:auto,280px;border-color:#c2bc81;
  box-shadow:inset 0 2px 1px #fff8dc,inset 0 -2px 1px #9a995747,0 3px 0 #9394625e;
}
.shop-booster strong{color:#587143}
.shop-booster>.icon{color:#967444;filter:drop-shadow(0 3px 2px #6d643438)}
.shop-note{color:#797d5b!important}
.rule-row{color:#667650}
.rule-row .rule-number{
  background-image:linear-gradient(#eaf0d0d9,#cfdbb1ac),var(--cw-paper);
  background-size:auto,220px;border:1px solid #c0c799;color:#65834c;
  box-shadow:inset 0 1px 0 #fbffdf,0 2px 0 #9ea47b55;
}
.audio-settings{
  background-image:linear-gradient(145deg,#eef0d8d9,#dfe6c4a9),var(--cw-paper);
  background-size:auto,360px;border-color:#bec393;
  box-shadow:inset 0 1px 2px #6076461c,0 1px 0 #fff9dd;
}
.audio-settings label{color:#596b49}
.audio-settings label+label{border-color:#c8ce9e}
.audio-settings input[type=checkbox],.audio-settings input[type=range]{accent-color:#6d8b51}
.danger-text{color:#a66d55}
#toast{
  background-image:linear-gradient(#5b7c5bf2,#355640f8),var(--cw-paper);
  background-size:auto,300px;border-color:#af9b65;color:#fff2cc;
  box-shadow:inset 0 1px 0 #bdc69788,0 4px 0 #4a4b31,0 12px 25px #18352d59;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

@media(max-width:350px){
  .map-view .wordmark{letter-spacing:1.1px}
  .metric-label{letter-spacing:.8px}
  .booster{background-size:auto,320px}
  .board{background-size:auto,280px}
}
@media(min-width:640px){
  #app{border-color:#cfb780;box-shadow:0 30px 95px #294c3955}
  .board{background-size:auto,460px}
}
@media(prefers-reduced-motion:reduce){
  button{transition-duration:.01ms}
}

.brand-wordmark{display:block;width:clamp(100px,34vw,140px);height:42px;object-fit:contain}
.map-view .brand small{margin-top:0;text-align:center}
@media(max-width:360px){.brand-wordmark{width:105px;height:35px}}

.brand-emblem{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}