/* Promised Lands SKIN, part 1 of 4: the shared look of Bible World. Chunky candy buttons, cream pills with a thick brown outline and a "step" under them,
   white letters with a brown outline, painted icons. The numbers are the SAME as Prototypes/bible-land/styles.css (tokens, .btn, .chip, .era-badge, .goal) so the two games feel like one.
   Loaded AFTER styles.css, then skin-hud.css, skin-trays.css, skin-sheets.css (one owner each). Those files restyle the existing selectors of styles.css
   and may use the k- classes below on elements they create. Nothing here moves anything: it only says how things look. Never reference a file by an absolute path; assets/ui/*.webp is painted (hammer, icon_oil, icon_water). */
:root {
  --k-ink: #4a2712; --k-ink2: #6b3b1c;
  --k-cream: #fff6dc; --k-cream2: #ffe7a6; --k-cream3: #f7d68a; --k-shade: rgba(58, 22, 8, 0.38);
  --k-green: #59d13a; --k-green-d: #24851a; --k-green-l: #b2f77a;
  --k-orange: #ffa02e; --k-orange-d: #bf5a08; --k-orange-l: #ffd684;
  --k-blue: #3db4ff; --k-blue-d: #1670c4; --k-blue-l: #a5e0ff;
  --k-purple: #b56be6; --k-purple-d: #71349f; --k-purple-l: #e3bcff;
  --k-red: #ff5d4a; --k-red-d: #b3271a; --k-red-l: #ffab9e;
  --k-grey: #c9ccd6; --k-grey-d: #7a7f90; --k-grey-l: #eceef3;
  --k-gold: #ffd23f;
  --k-navy-1: #5b6f9c; --k-navy-2: #34456e;
  --k-font: "Arial Rounded MT Bold", ui-rounded, "SF Pro Rounded", "Baloo 2", "Nunito", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --k-drop: 0 8px 12px rgba(58, 22, 8, 0.3);                                     /* the soft shadow every raised thing casts */
}

/* ---------- white letters with a brown outline (labels on colour, numbers on chips) ---------- */
.k-text { color: #fff; font-family: var(--k-font); font-weight: 900; -webkit-text-stroke: 4px var(--k-ink); paint-order: stroke fill; letter-spacing: 0.3px; }
.k-text.s3 { -webkit-text-stroke-width: 3px; }   /* small print: a thinner outline so the letters stay open */

/* ---------- the cream pill / panel: info that sits on the map ---------- */
.k-cream {
  border: 3px solid var(--k-ink); border-radius: 22px; color: var(--k-ink); font-family: var(--k-font);
  background: linear-gradient(#fffbe9, var(--k-cream2));
  box-shadow: 0 4px 0 var(--k-ink), var(--k-drop), inset 0 2px 0 #fff;
}
.k-cream.big { border-radius: 30px; }
.k-navy {   /* the dark blue counter chip (resources, small numbers) */
  border: 3px solid var(--k-ink); border-radius: 22px; color: #fff; font-family: var(--k-font); font-weight: 900;
  background: linear-gradient(var(--k-navy-1), var(--k-navy-2));
  box-shadow: 0 3px 0 var(--k-ink), 0 6px 10px rgba(58, 22, 8, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

/* ---------- the candy button: every thing the child presses to DO something ---------- */
.k-candy {
  isolation: isolate;
  --c1: var(--k-green-l); --c2: var(--k-green); --c3: #3fb126; --dark: var(--k-green-d);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 56px; min-height: 56px; padding: 8px 14px; margin: 0; border: 3px solid var(--k-ink); border-radius: 22px; cursor: pointer;
  font: 900 19px/1 var(--k-font); letter-spacing: 0.5px; color: #fff; text-align: center; touch-action: manipulation;
  background: linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%);
  box-shadow: 0 6px 0 var(--dark), 0 6px 0 3px var(--k-ink), 0 12px 16px rgba(58, 22, 8, 0.32), inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s;
}
.k-candy::before { z-index: -1; content: ""; position: absolute; left: 8%; right: 8%; top: 4px; height: 38%; border-radius: 16px 16px 40% 40%; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)); pointer-events: none; }   /* the gloss */
.k-candy:active, .k-candy.pressed { transform: translateY(5px); box-shadow: 0 1px 0 var(--dark), 0 1px 0 3px var(--k-ink), 0 4px 8px rgba(58, 22, 8, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.k-candy:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.k-candy > span, .k-candy > b { position: relative; -webkit-text-stroke: 4px var(--k-ink); paint-order: stroke fill; }   /* a label sits above the gloss and gets the outline */
.k-candy img, .k-candy svg { position: relative; flex: none; width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.35)); }
.k-candy.k-orange { --c1: var(--k-orange-l); --c2: var(--k-orange); --c3: #ec8410; --dark: var(--k-orange-d); }
.k-candy.k-blue { --c1: var(--k-blue-l); --c2: var(--k-blue); --c3: #2a9ae8; --dark: var(--k-blue-d); }
.k-candy.k-purple { --c1: var(--k-purple-l); --c2: var(--k-purple); --c3: #9a4fd0; --dark: var(--k-purple-d); }
.k-candy.k-red { --c1: var(--k-red-l); --c2: var(--k-red); --c3: #ec4030; --dark: var(--k-red-d); }
.k-candy.k-grey { --c1: var(--k-grey-l); --c2: var(--k-grey); --c3: #b3b7c4; --dark: var(--k-grey-d); filter: saturate(0.85); }
.k-candy.k-gold { --c1: #fff0a0; --c2: var(--k-gold); --c3: #f0a21e; --dark: #b97a0c; }
.k-candy.round { border-radius: 50%; width: 64px; height: 64px; padding: 0; }
.k-candy.small { min-height: 48px; font-size: 16px; padding: 6px 12px; border-radius: 18px; }
.k-candy.wide { width: 100%; }
.k-candy:disabled, .k-candy.disabled { filter: grayscale(0.55) brightness(0.98); cursor: default; }

/* ---------- a progress bar with a gloss (the lamp oil, a goal, a coverage): <span class="k-bar"><i style="width:40%"></i></span> ---------- */
.k-bar { --bar-1: var(--k-green-l); --bar-2: var(--k-green); --bar-3: #3fb126;
  position: relative; display: block; height: 20px; border-radius: 12px; border: 3px solid var(--k-ink); background: #fff1cf; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1); }
.k-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 10px; background: linear-gradient(var(--bar-1), var(--bar-2) 55%, var(--bar-3)); transition: width 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.k-bar > i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.55); }
.k-bar.gold { --bar-1: #fff0a0; --bar-2: var(--k-gold); --bar-3: #f0a21e; }
.k-bar.amber { --bar-1: var(--k-orange-l); --bar-2: var(--k-orange); --bar-3: #ec8410; }
.k-bar.red { --bar-1: var(--k-red-l); --bar-2: var(--k-red); --bar-3: #ec4030; }

/* ---------- small orange tag ("NEXT GOAL" style) and a round count badge ---------- */
.k-tag { display: inline-block; padding: 5px 9px; border-radius: 12px; font: 900 11px/1 var(--k-font); letter-spacing: 0.6px; color: #fff; background: linear-gradient(#ffb95a, #ff8a1e); border: 2.5px solid var(--k-ink); -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.k-badge { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; border: 3px solid var(--k-ink); background: linear-gradient(var(--k-red-l), var(--k-red)); color: #fff; font: 900 14px/1 var(--k-font); -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; }

/* ---------- a big window: cream card with a coloured ribbon on top (sheets, cards, the Elder) ---------- */
.k-window { border: 3.5px solid var(--k-ink); border-radius: 26px; color: var(--k-ink); font-family: var(--k-font); background: linear-gradient(#fffbe9, var(--k-cream2) 70%, var(--k-cream3)); box-shadow: 0 6px 0 var(--k-ink), 0 14px 24px rgba(58, 22, 8, 0.4), inset 0 3px 0 #fff; overflow: hidden; }
.k-ribbon { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; color: #fff; font: 900 20px/1 var(--k-font); border-bottom: 3.5px solid var(--k-ink);
  background: linear-gradient(var(--k-orange-l), var(--k-orange) 50%, #ec8410); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55); }
.k-ribbon > span, .k-ribbon > h2, .k-ribbon > b { -webkit-text-stroke: 4px var(--k-ink); paint-order: stroke fill; }
.k-ribbon.blue { background: linear-gradient(var(--k-blue-l), var(--k-blue) 50%, #2a9ae8); }
.k-ribbon.purple { background: linear-gradient(var(--k-purple-l), var(--k-purple) 50%, #9a4fd0); }
.k-ribbon.green { background: linear-gradient(var(--k-green-l), var(--k-green) 50%, #3fb126); }

/* a sticker-style painted icon (img) next to text */
.k-ico { width: 34px; height: 34px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.35)); pointer-events: none; }

/* ---------- the shared action buttons of styles.css (.bt, .bt.gold, .bt.done, .bt.hold, .tick, .xbtn): the SAME markup, now candy buttons. Blue = a plain action, orange (.gold) = the main action, green (.done) = confirm ---------- */
.bt {
  isolation: isolate;   /* the gloss (::before, z-index -1) stays behind the label */
  --c1: var(--k-blue-l); --c2: var(--k-blue); --c3: #2a9ae8; --dark: var(--k-blue-d);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 3px solid var(--k-ink); border-radius: 18px;
  font: 900 16px/1 var(--k-font); letter-spacing: 0.4px; color: #fff; white-space: nowrap; touch-action: manipulation;
  -webkit-text-stroke: 3.5px var(--k-ink); paint-order: stroke fill;
  background: linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%);
  box-shadow: 0 5px 0 var(--dark), 0 5px 0 3px var(--k-ink), 0 10px 14px rgba(58, 22, 8, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s;
}
.bt::before { z-index: -1; content: ""; position: absolute; left: 8%; right: 8%; top: 3px; height: 38%; border-radius: 14px 14px 40% 40%; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)); pointer-events: none; }
.bt:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--dark), 0 1px 0 3px var(--k-ink), 0 3px 6px rgba(58, 22, 8, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.bt:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.bt svg, .bt img { position: relative; width: 26px; height: 26px; flex: none; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.35)); }
.bt.gold, .bt.done { background: linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%); }   /* styles.css gives .bt.gold / .bt.done their own flat gradient at a higher specificity than .bt: put the candy one back */
.bt.gold { --c1: var(--k-orange-l); --c2: var(--k-orange); --c3: #ec8410; --dark: var(--k-orange-d); border-color: var(--k-ink); }
.bt.done { --c1: var(--k-green-l); --c2: var(--k-green); --c3: #3fb126; --dark: var(--k-green-d); border-color: var(--k-ink); color: #fff; }
.bt:disabled, .bt.off { filter: grayscale(0.55) brightness(0.98); }
.bt.hold.holding { background: linear-gradient(90deg, var(--k-red), var(--k-red)) no-repeat, linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%); background-size: 0 100%, 100% 100%; animation: k-fill 3s linear forwards; }
@keyframes k-fill { to { background-size: 100% 100%, 100% 100%; } }
.tick { position: relative; width: 56px; height: 52px; border-radius: 18px; border: 3px solid var(--k-ink); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(var(--k-green-l) 0%, var(--k-green) 46%, #3fb126 54%, var(--k-green) 100%); box-shadow: 0 5px 0 var(--k-green-d), 0 5px 0 3px var(--k-ink), 0 10px 14px rgba(58, 22, 8, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.6); }
.tick:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--k-green-d), 0 1px 0 3px var(--k-ink); }
.tick svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.4)); }
.xbtn::before { inset: 2px; border: 3px solid var(--k-ink); background: linear-gradient(#fffbe9, var(--k-cream2)); box-shadow: 0 3px 0 var(--k-ink), inset 0 2px 0 #fff; }
.xbtn:active::before { transform: translateY(3px); box-shadow: 0 0 0 var(--k-ink); }
.xbtn svg { width: 22px; height: 22px; }