/* ============ THE BIG FARM — chunky candy UI (2026-07 redesign) ============
   Style anchor: docs/ui redesign/* — cream panels with thick chocolate outlines,
   floating header plates, round red X breaking the corner, glossy green pills,
   gold/teal/purple pill variants, sticker icons, star sparkles. */

/* Fredoka (SIL OFL) — the chunky rounded bubble game font (matches the currency/tab mockups).
   Bundled locally in fonts/ so it works offline (CrazyGames zip) with no CDN. */
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/fredoka-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/fredoka-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/fredoka-700.woff2') format('woff2');
}
:root {
  /* color-emoji fonts FIRST for emoji glyphs (Fredoka/Trebuchet/Segoe UI have no colour emoji, and
     plain "Segoe UI" hijacks some emoji to monochrome Segoe UI Symbol — or TOFU for ones it lacks like
     🛒🐄👷). Listing the OS colour-emoji font up front forces every emoji to render in colour. */
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  --font-bubble: 'Fredoka', "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --cream: #f7eed9;
  --cream-dark: #efe0c0;
  --parch: #fdf6e6;
  --panel: #fef8ea;
  --card: #fffdf6;
  --wood: #8a5a33;
  --wood-dark: #6b4223;
  --wood-light: #b07c4a;
  --outline: #3a2b1d;          /* thick chocolate outline on everything */
  --ink: #4a2f1b;
  --ink-soft: #7a5c3e;
  --green: #6fae3d;
  --green-dark: #4e8a2e;
  --green-deep: #3d6e24;
  --gold: #f2b632;
  --gold-dark: #c98f1b;
  --red: #e0483d;
  --red-dark: #b02c22;
  --blue: #5aa7d6;
  --teal: #2eb6bc;             /* gem pills */
  --teal-dark: #17828f;
  --purple: #9a6ad4;           /* ad pills */
  --purple-dark: #6f3fb0;
  --shadow: 0 8px 20px rgba(60, 35, 10, 0.35);
  --pill-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.16), 0 3px 0 var(--outline), 0 5px 8px rgba(60, 35, 10, 0.22);
  --pill-shadow-down: inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.16), 0 1px 0 var(--outline);
  --radius: 18px;
  font-size: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: var(--font-bubble);
  color: var(--ink);
  background: #7ec4e8;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;   /* no gray flash on mobile taps — feels native */
}
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

/* ============ MAIN MENU ============ */
/* scrollable when the card is taller than the viewport (landscape phones) — with align-center +
   overflow:hidden the card used to clip at BOTH ends unreachably. margin:auto on the card gives
   safe centering that degrades into scrolling; env() padding respects notches. */
.screen {
  position: fixed; inset: 0; z-index: 50; display: flex; overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y;   /* body sets touch-action:none for the canvas — the menu must scroll */
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.menu-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #8fd0f0 0%, #b8e3f7 45%, #fdedc4 78%, #fbdc9a 100%);
}
/* ---- KEY ART hero (assets/ui/keyart.webp — Rosa's chicken-run selfie) ----
   `cover / center top` shows the FULL scene (incl. the art's baked title) — the top anchor
   keeps that title intact on short-wide screens, where cover must trim some ground instead. */
.menu-keyart {
  position: absolute; inset: 0; z-index: 1;
  background: url('assets/ui/keyart.webp') center top / cover no-repeat;
}
/* soft dusk vignette at the bottom so the menu card + buttons pop off the busy art */
.menu-keyart::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26, 15, 6, 0) 52%, rgba(26, 15, 6, 0.42) 100%);
}
/* the hand-animated SVG pastoral scene is retired behind the key art (kept in DOM, zero cost) */
.menu-sun, .menu-clouds, .menu-birds, .menu-scene, .menu-petals { display: none; }
.menu-sun {
  position: absolute; right: 12%; top: 12%;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, #ffd95e 55%, rgba(255, 217, 94, 0) 72%);
  box-shadow: 0 0 80px 40px rgba(255, 214, 90, 0.55);
  animation: sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* soft rotating sun rays */
.menu-sun .rays {
  position: absolute; inset: -48%; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 231, 150, 0.5) 0 4deg, transparent 4deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 24%, transparent 60%);
  mask: radial-gradient(circle, #000 24%, transparent 60%);
  animation: sunSpin 80s linear infinite;
}
@keyframes sunSpin { to { transform: rotate(360deg); } }

/* ---- animated pastoral scene (SVG) ---- */
.menu-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.menu-scene svg { width: 100%; height: 100%; display: block; }
/* every animated prop pivots around its own box */
.menu-scene .sway, .menu-scene .sway-soft, .menu-scene .bob,
.menu-scene .peck, .menu-scene .graze, .menu-scene .bee { transform-box: fill-box; }

.menu-scene .sway { transform-origin: 50% 92%; animation: mSway 4.6s ease-in-out infinite; }
.menu-scene .sway-b { animation-duration: 5.7s; animation-delay: -1.3s; }
.menu-scene .sway-c { animation-duration: 6.5s; animation-delay: -2.6s; }
@keyframes mSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.4deg); } }

.menu-scene .sway-soft { transform-origin: 50% 100%; animation: mSwaySoft 3.4s ease-in-out infinite; }
@keyframes mSwaySoft { 0%, 100% { transform: rotate(-4.5deg); } 50% { transform: rotate(4.5deg); } }

.menu-scene .bob { animation: mBob 2.8s ease-in-out infinite; }
.menu-scene .bob-b { animation-duration: 3.4s; animation-delay: -0.8s; }
.menu-scene .bob-c { animation-duration: 3.9s; animation-delay: -1.7s; }
@keyframes mBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

.menu-scene .peck { transform-origin: 12% 55%; animation: mPeck 2.5s ease-in-out infinite; }
@keyframes mPeck { 0%, 52%, 100% { transform: rotate(0); } 66% { transform: rotate(22deg); } 78% { transform: rotate(20deg); } }

.menu-scene .graze { transform-origin: 22% 28%; animation: mGraze 3.6s ease-in-out infinite; }
.menu-scene .graze-b { animation-duration: 4.4s; animation-delay: -1.1s; }
@keyframes mGraze { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }

.menu-scene .bee { animation: mBee 0.5s ease-in-out infinite; }
@keyframes mBee { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* ---- birds gliding across the sky ---- */
.menu-birds { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.menu-birds i { position: absolute; width: 26px; height: 14px; will-change: transform; animation: birdFly linear infinite; }
.menu-birds i::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M2 9 Q7 1 12 7 Q17 1 22 9' fill='none' stroke='%235b6a4f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: birdFlap 0.5s ease-in-out infinite;
}
.menu-birds i:nth-child(1) { top: 16%; animation-duration: 26s; }
.menu-birds i:nth-child(2) { top: 22%; width: 20px; height: 11px; animation-duration: 33s; animation-delay: -9s; }
.menu-birds i:nth-child(3) { top: 10%; width: 31px; height: 17px; animation-duration: 39s; animation-delay: -19s; }
@keyframes birdFly { from { transform: translate(-12vw, 0); } to { transform: translate(116vw, -5vh); } }
@keyframes birdFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }

/* ---- drifting petals / pollen ---- */
.menu-petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.menu-petals span {
  position: absolute; top: -24px; width: 12px; height: 12px;
  background: #f6b7d0; border-radius: 65% 20% 65% 20%; opacity: 0.8; will-change: transform;
  animation: petalFall linear infinite;
}
.menu-petals span:nth-child(1) { left: 12%; animation-duration: 9s; }
.menu-petals span:nth-child(2) { left: 28%; animation-duration: 12s; animation-delay: -3s; background: #fff2f7; }
.menu-petals span:nth-child(3) { left: 47%; animation-duration: 10s; animation-delay: -6s; }
.menu-petals span:nth-child(4) { left: 63%; animation-duration: 13s; animation-delay: -2s; background: #fce9b0; }
.menu-petals span:nth-child(5) { left: 78%; animation-duration: 8.5s; animation-delay: -5s; }
.menu-petals span:nth-child(6) { left: 90%; animation-duration: 11s; animation-delay: -7.5s; background: #fff2f7; }
@keyframes petalFall {
  from { transform: translateY(-30px) rotate(0); }
  to { transform: translateY(104vh) translateX(50px) rotate(420deg); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-birds i, .menu-birds i::before, .menu-petals span, .menu-sun, .menu-sun .rays, .menu-clouds span,
  .menu-scene .sway, .menu-scene .sway-soft, .menu-scene .bob,
  .menu-scene .peck, .menu-scene .graze, .menu-scene .bee { animation: none !important; }
}
.menu-clouds span {
  position: absolute; background: #fff; border-radius: 60px; opacity: 0.9;
  animation: cloudDrift linear infinite;
}
.menu-clouds span:nth-child(1) { width: 130px; height: 38px; top: 14%; left: -140px; animation-duration: 42s; }
.menu-clouds span:nth-child(2) { width: 90px; height: 28px; top: 26%; left: -100px; animation-duration: 55s; animation-delay: -20s; }
.menu-clouds span:nth-child(3) { width: 170px; height: 46px; top: 7%; left: -180px; animation-duration: 68s; animation-delay: -40s; }
.menu-clouds span::before { content: ""; position: absolute; width: 55%; height: 160%; background: #fff; border-radius: 50%; left: 20%; top: -55%; }
@keyframes cloudDrift { to { transform: translateX(calc(100vw + 260px)); } }

.menu-card {
  position: relative; z-index: 2; text-align: center;
  /* docked LOW so Rosa's face in the key art stays visible; top margin stays auto so a
     too-tall card still scrolls (not clips) on short screens */
  margin: auto auto min(6vh, 44px);
  /* painted wood-and-parchment panel, 9-SLICED so the frame never distorts with the card's
     aspect: corners stay true, rails stretch along their length, parchment fills the middle.
     The soft color beneath (clipped to the padding box) is the fallback if the art 404s. */
  background: rgba(253, 247, 232, 0.8);
  background-clip: padding-box;
  border: 30px solid transparent;
  border-image: url('./assets/icons/ui/menu_panel.png') 80 fill / 30px stretch;
  border-radius: 6px;
  padding: 0.5rem 0.8rem 0.6rem;
  filter: drop-shadow(0 10px 16px rgba(26, 15, 6, 0.45));
  animation: cardPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* short viewports (phones in landscape): compact card so the whole menu fits without scrolling */
@media (max-height: 560px) {
  .menu-card { padding: 0.3rem 0.5rem 0.4rem; border-width: 24px; border-image-width: 24px; }
  .btn-big { font-size: 1.05rem; padding: 0.6rem 1.8rem; min-width: 190px; }
  .menu-buttons { gap: 0.45rem; }
  .farm-list { gap: 0.4rem; max-height: 34vh; overflow-y: auto; }
  .menu-credit { display: none; }
  .menu-sun { width: 70px; height: 70px; }
}
@keyframes cardPop { from { transform: scale(0.6) translateY(40px); opacity: 0; } }
.menu-buttons { display: flex; flex-direction: column; gap: 0.7rem; align-items: center; }
.menu-credit {
  position: absolute; bottom: 14px; z-index: 2;
  color: rgba(255, 250, 238, 0.85); font-size: 0.85rem; letter-spacing: 0.2em;
  text-shadow: 0 1px 3px rgba(26, 15, 6, 0.6);   /* readable over the key art */
}

/* ============ BUTTONS — glossy candy pills ============ */
.btn {
  border: 3px solid var(--outline); border-radius: 16px; font-weight: 900; color: #fff;
  padding: 0.55rem 1.4rem; font-size: 1rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, #c99b62, #a3743d);
  box-shadow: var(--pill-shadow);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
  position: relative;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: var(--pill-shadow-down); }
.btn-big { font-size: 1.35rem; padding: 0.85rem 2.6rem; border-radius: 22px; min-width: 240px; }
.btn-small { font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: 12px; }
.btn-green { background: linear-gradient(180deg, #90d558, #5fae2c); }
.btn-tan { background: linear-gradient(180deg, #c99b62, #a3743d); }
.btn-red { background: linear-gradient(180deg, #f07b6b, #cf3d30); }
/* MENU-scoped painted pill art (in-game popups keep the CSS pills). 3-SLICED horizontally:
   the rounded caps keep their painted curve at ANY button width, only the straight middle
   stretches. Gradient stays beneath as the graceful fallback. */
#main-menu .btn-green {
  background: linear-gradient(180deg, #90d558, #5fae2c);
  background-clip: padding-box;
  border-color: transparent;
  border-image: url('./assets/icons/ui/menu_btn_green.png') 0 114 fill / 0 26px stretch;
  box-shadow: 0 5px 8px rgba(60, 35, 10, 0.3);
}
#main-menu .btn-tan {
  background: linear-gradient(180deg, #c99b62, #a3743d);
  background-clip: padding-box;
  border-color: transparent;
  border-image: url('./assets/icons/ui/menu_btn_tan.png') 0 108 fill / 0 22px stretch;
  box-shadow: 0 5px 8px rgba(60, 35, 10, 0.3);
}
#main-menu .btn:active { transform: translateY(3px); box-shadow: 0 2px 4px rgba(40, 30, 16, 0.4); }
.btn:disabled {
  background: #c9c1b2; color: #8b8374; text-shadow: none; cursor: not-allowed;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 2px 0 rgba(58, 43, 29, 0.5);
  filter: none;
}

/* ============ FARM PICKER / NAME FORM (main menu) ============ */
.menu-loading { color: var(--wood-dark); font-weight: 900; font-size: 1.1rem; padding: 1rem 0; }
.menu-loading .ml-label { margin-bottom: 10px; }
/* menu loading bar: painted wooden trough + candy-striped grass fill, a sprout riding the tip.
   Both are 3-sliced so the end caps stay round at any width / fill percentage. */
.ml-bar {
  position: relative;
  width: min(300px, 72vw); height: 28px; margin: 0 auto;
  padding: 6px 10px;
  border: 0 solid transparent;
  border-image: url('./assets/icons/ui/loadbar_frame.png') 0 90 fill / 0 15px stretch;
  overflow: visible;   /* the sprout pokes above the trough */
}
.ml-bar i {
  position: relative; display: block; height: 100%; width: 0%;
  background: linear-gradient(180deg, #a9e46f, #5fae2c);
  background-clip: padding-box;
  border: 0 solid transparent;
  border-image: url('./assets/icons/ui/loadbar_fill.png') 0 86 fill / 0 8px stretch;
  border-radius: 999px;
  transition: width 0.15s linear;
}
.ml-bar i::after {
  content: ""; position: absolute; right: -6px; top: -13px; width: 32px; height: 12px;
  background: url('./assets/icons/ui/loadbar_sprout.png') right bottom / contain no-repeat;
}

.farm-list { display: flex; flex-direction: column; gap: 0.55rem; width: min(360px, 78vw); margin-bottom: 0.4rem; }
.farm-card { display: flex; gap: 0.4rem; align-items: stretch; }
.farm-play {
  flex: 1; display: flex; align-items: center; gap: 0.7rem; text-align: left;
  background: var(--card);
  border: 3px solid var(--outline); border-radius: 16px; padding: 0.55rem 0.8rem;
  cursor: pointer; color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 3px 0 var(--outline);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.farm-play:hover { filter: brightness(1.04); transform: translateY(-1px); }
.farm-play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
.farm-ico { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); }
.farm-ico img, .farm-go img { display: block; width: 34px; height: 34px; object-fit: contain; }
.farm-go img { width: 30px; height: 30px; }
.farm-meta { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.farm-name { font-weight: 900; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.farm-sub { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; }
.farm-go { font-size: 1.15rem; }
.farm-del {
  flex: 0 0 44px; width: 44px; height: 44px; align-self: center; border: none; border-radius: 50%;
  background: url('./assets/icons/ui/menu_btn_red.png') center / 100% 100% no-repeat, linear-gradient(180deg, #f07b6b, #cf3d30);
  color: #fff; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 3px 7px rgba(60, 35, 10, 0.35); transition: transform 0.08s, filter 0.15s;
}
.farm-del:hover { filter: brightness(1.08); }
.farm-del:active { transform: translateY(2px); box-shadow: var(--pill-shadow-down); }

.name-form { display: flex; flex-direction: column; gap: 0.7rem; align-items: center; width: min(340px, 78vw); }
.name-label { font-weight: 900; color: var(--wood-dark); font-size: 1.05rem; }
.farm-name-input {
  width: 100%; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--ink);
  background: #fffdf6; border: 3px solid var(--outline); border-radius: 14px; padding: 0.6rem 0.9rem;
  box-shadow: inset 0 3px 5px rgba(58, 43, 29, 0.15);
}
.farm-name-input:focus { outline: none; box-shadow: inset 0 3px 5px rgba(58, 43, 29, 0.12), 0 0 0 4px rgba(111, 174, 61, 0.4); }
.farm-name-input::placeholder { color: rgba(107, 66, 35, 0.45); font-weight: 700; }
.name-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ============ HUD ============ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }

/* stacked currency chips — big icon breaking out of the pill's left edge,
   value colored per currency, glossy green + button (mockup 9_40PM) */
.hud-stats {
  position: absolute; top: 12px; left: 20px;
  display: flex; flex-direction: column; gap: 9px;
  min-width: 216px;
}
/* character-select button — docked on the LEFT just under the stat bars (moved from top-right) */
#hv-avatar {
  align-self: flex-start; margin-top: 2px;
  width: 58px; height: 58px; padding: 0; border-radius: 50%;
  background: var(--card); border: 3px solid var(--outline);
  box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(60, 35, 10, 0.35);
  overflow: hidden; cursor: pointer; transition: transform 0.12s;
}
#hv-avatar:hover { transform: scale(1.06); }
#hv-avatar:active { transform: scale(0.92); }
#hv-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.stat-chip {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 3px solid var(--outline);
  border-radius: 999px;
  padding: 5px 8px 5px 34px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 3px 0 var(--outline), 0 6px 10px rgba(60, 35, 10, 0.2);
  width: fit-content; min-width: 190px;
}
.chip-ico {
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  font-size: 2rem; line-height: 1;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
}
.chip-ico img { width: 38px; height: 38px; display: block; }
/* chunky BUBBLE numbers: bright colored fill + a darker outline stroke (mockup 9_40PM).
   --vo = the outline shade for each currency; drawn as an 8-way text-shadow + a soft drop. */
.stat-val {
  font-weight: 700; font-size: 1.3rem; flex: 1; letter-spacing: 0.01em; color: var(--ink);
}
.val-coin, .val-gem, .val-beauty {
  text-shadow:
    -1.6px -1.6px 0 var(--vo), 1.6px -1.6px 0 var(--vo), -1.6px 1.6px 0 var(--vo), 1.6px 1.6px 0 var(--vo),
    0 -1.6px 0 var(--vo), 0 1.6px 0 var(--vo), -1.6px 0 0 var(--vo), 1.6px 0 0 var(--vo),
    0 3px 3px rgba(0, 0, 0, 0.22);
}
.val-coin { color: #ffce33; --vo: #a9670c; }   /* gold digits, brown outline */
.val-gem { color: #7fd0ff; --vo: #1f79b8; }    /* sky-blue digits, blue outline */
.val-beauty { color: #ffaadd; --vo: #c94a8a; } /* pink digits, magenta outline */
.chip-plus {
  width: 27px; height: 27px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(180deg, #90d558, #5fae2c);
  border: 2.5px solid var(--outline); color: #fff; font-weight: 900; font-size: 1.05rem;
  line-height: 1; padding: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 0 var(--outline);
  transition: transform 0.1s;
}
.chip-plus:hover { transform: scale(1.12); }
.chip-plus:active { transform: scale(0.95); }
/* meter chips: level star / energy bolt badge + a fat bar with the value inside */
.chip-meter { padding: 5px 10px 5px 30px; width: auto; align-self: stretch; }
.lvl-star {
  position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.lvl-star::before {
  content: "⭐"; position: absolute; inset: 0;
  font-size: 2.5rem; line-height: 52px; text-align: center;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
}
.lvl-star b {
  position: relative; z-index: 1; margin-top: 4px;
  font-size: 0.72rem; font-weight: 900; color: #fff; white-space: nowrap;
  text-shadow: -1.5px -1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px 1.5px 0 var(--outline);
}
.bar-badge {
  position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  font-size: 1.75rem; line-height: 1;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
}
.stat-bar {
  flex: 1; height: 20px; border-radius: 999px;
  background: #ece2ca; border: 2.5px solid var(--outline);
  overflow: hidden; position: relative;
}
.stat-bar > i {
  display: block; height: 100%; border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  transition: width 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.bar-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 900; color: #fff; letter-spacing: 0.02em;
  text-shadow: -1px -1px 0 rgba(58, 43, 29, 0.85), 1px -1px 0 rgba(58, 43, 29, 0.85), -1px 1px 0 rgba(58, 43, 29, 0.85), 1px 1px 0 rgba(58, 43, 29, 0.85);
  pointer-events: none;
}
.bar-xp > i { background: linear-gradient(180deg, #ffc95e, #f0921d); }
.bar-energy > i { background: linear-gradient(180deg, #ffe066, #f2b81f); }
.bar-fish > i { background: linear-gradient(180deg, #6fc7e8, #2f8fc0); }
.stat-lvl {
  background: none; border: none; padding: 0;
}

.hud-day {
  position: absolute; top: 12px; right: 12px;
  background: var(--card); border: 3px solid var(--outline); border-radius: var(--radius);
  padding: 8px 16px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 3px 0 var(--outline), 0 6px 10px rgba(60, 35, 10, 0.2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  font-weight: 900;
}
.hud-day .farm-title {
  flex-basis: 100%; text-align: right; color: var(--wood-dark);
  font-weight: 900; font-size: 0.92rem; letter-spacing: 0.01em;
  max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 2px solid var(--cream-dark); padding-bottom: 3px; margin-bottom: 1px;
}
.hud-day .day-ico { font-size: 1.3rem; }
.hud-day .clock { color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; }
.hud-day .season { font-size: 0.85rem; color: var(--green-dark); }

/* top-center quest pill */
.hud-quest {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--card); border: 3px solid var(--outline); border-radius: 999px;
  padding: 7px 18px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 3px 0 var(--outline), 0 6px 10px rgba(60, 35, 10, 0.2);
  font-weight: 800; font-size: 0.92rem; display: flex; gap: 8px; align-items: center;
  cursor: pointer; transition: transform 0.15s;
  max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-quest:hover { transform: translateX(-50%) scale(1.04); }
.hud-quest .q-prog { color: var(--green-dark); font-weight: 900; }

/* ============ TOOLBAR ============ */
.toolbar {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: flex-end;
  background: var(--panel);
  border: 4px solid var(--outline);
  border-radius: 24px;
  padding: 10px 14px 9px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.7), 0 4px 0 var(--outline), 0 9px 16px rgba(60, 35, 10, 0.3);
}
.tool-btn {
  width: 58px; height: 58px; border-radius: 16px;
  border: 3px solid var(--outline);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.65rem;
  background: linear-gradient(180deg, #ffffff, #efe4c8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 3px 0 var(--outline);
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}
.tool-btn img { width: 32px; height: 32px; display: block; }
.tool-btn small {
  font-size: 0.55rem; font-weight: 900; color: var(--ink-soft); margin-top: -2px;
  letter-spacing: 0.03em;
}
.tool-btn:hover { transform: translateY(-4px) scale(1.06); }
.tool-btn.active {
  background: linear-gradient(180deg, #a8e06c, #74b83e);
  transform: translateY(-6px) scale(1.1);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 5px 0 var(--outline), 0 9px 16px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(168, 224, 108, 0.5);
}
.tool-btn.active small { color: #fff; }
.tool-btn .badge {
  position: absolute; top: -7px; right: -7px;
  background: var(--red); color: #fff; font-size: 0.62rem; font-weight: 900;
  border-radius: 999px; padding: 1px 6px; border: 2px solid #fff;
}
.tool-btn .season-star {
  position: absolute; bottom: -6px; right: -6px; font-size: 0.7rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  animation: starTwinkle 1.6s ease-in-out infinite;
}
@keyframes starTwinkle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25) rotate(12deg); } }
.tool-btn .keycap {
  position: absolute; top: -8px; left: -6px;
  background: var(--outline); color: #fff; font-size: 0.58rem; font-weight: 900;
  border-radius: 6px; padding: 1px 5px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tool-btn .seed-stock {
  position: absolute; bottom: -7px; left: -6px;
  background: var(--green-deep); color: #fff; font-size: 0.56rem; font-weight: 900;
  border-radius: 999px; padding: 1px 5px; border: 2px solid #fff;
  min-width: 8px; text-align: center; line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.tool-btn .seed-stock.empty { background: #b7ae9d; }
.toolbar .tool-sep { width: 3px; align-self: stretch; margin: 4px 2px; background: rgba(58, 43, 29, 0.22); border-radius: 2px; }
/* 🌱 Seed Bag toolbar button — visually distinct from seed slots */
.tool-btn.tool-bag { background: linear-gradient(180deg, #cdeea0, #a6d46e); }
.tool-btn.tool-bag small { color: var(--green-deep); }

/* placement control bar (Rotate / Cancel) — floats above the toolbar while placing */
.place-ctrl {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  display: flex; gap: 10px; pointer-events: none; z-index: 40;
}
.pc-btn {
  pointer-events: auto; cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #efe4c8); border: 3px solid var(--outline);
  color: var(--ink); font-weight: 900; font-size: 0.92rem; border-radius: 14px;
  padding: 9px 16px; box-shadow: var(--pill-shadow);
}
.pc-btn:hover { transform: translateY(-2px); }
.pc-btn:active { transform: translateY(1px); box-shadow: var(--pill-shadow-down); }
.pc-btn.pc-cancel { background: linear-gradient(180deg, #f07b6b, #cf3d30); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
/* 🌿 fertilizer-in-hand chip next to the ✕ Put away button */
.pc-fert-count {
  pointer-events: none; display: flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #e6f4d8, #c8e6ac); border: 3px solid var(--outline);
  color: var(--ink); font-weight: 900; font-size: 0.92rem; border-radius: 14px;
  padding: 6px 12px; box-shadow: var(--pill-shadow);
}

/* Seed Bag (Market → Seeds) */
.seed-bag-head { text-align: center; color: var(--ink-soft); font-size: 0.86rem; padding: 2px 4px 12px; line-height: 1.4; font-weight: 700; }
.seed-bag-head .seed-slot-count { margin-top: 4px; color: var(--green-deep); font-weight: 800; }
.market-row.seed-equipped { background: #eef7df; }
.equip-btn {
  cursor: pointer; white-space: nowrap; min-width: 76px;
  background: var(--card); border: 2.5px solid var(--outline); color: var(--ink-soft);
  font-weight: 900; border-radius: 10px; padding: 4px 9px; font-size: 0.76rem; margin: 0 4px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 2px 0 var(--outline);
}
.equip-btn.on { background: linear-gradient(180deg, #a8e06c, #74b83e); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.equip-btn:disabled { opacity: 0.45; cursor: default; }

/* 🟫 Farm-plot shop bar (Build panel) */
.plot-shop { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 12px;
  background: linear-gradient(180deg, #fbeecb, #f3dda6); border: 3px solid var(--outline); border-radius: 16px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.plot-shop .plot-ico { font-size: 1.7rem; }
.plot-shop .plot-info { flex: 1; font-weight: 800; color: var(--wood-dark); }
.plot-shop .plot-sub { color: var(--ink-soft); font-weight: 700; font-size: 0.78rem; margin-top: 2px; }
.plot-shop .plot-place { width: auto; white-space: nowrap; padding: 4px 12px; }
/* 📦 stored (demolished) buildings in the Build panel — wooden inventory shelf */
.stored-buildings {
  margin-bottom: 12px; padding: 10px 12px;
  background: linear-gradient(180deg, #a3743d, #8a5a33);
  border: 3px solid var(--outline); border-radius: 16px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(255, 255, 255, 0.12);
}
.stored-title { font-weight: 900; color: #ffe9bd; font-size: 0.82rem; margin-bottom: 8px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); text-align: center; letter-spacing: 0.04em; }
.shelf-empty { text-align: center; color: rgba(255, 233, 189, 0.75); font-size: 0.74rem; font-weight: 700; padding: 4px 0 2px; }
.stock-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.stock-chip {
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #ffffff, #efe4c8); border: 2.5px solid var(--outline);
  border-radius: 12px; padding: 6px 10px; box-shadow: 0 2px 0 var(--outline); position: relative;
}
.stock-chip:hover { transform: translateY(-2px); }
.stock-chip .sc-star {
  position: absolute; top: -10px; left: -8px; font-size: 1rem; transform: rotate(-14deg);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}
.stock-chip .sc-ico { font-size: 1.5rem; }
.stock-chip .sc-name { font-weight: 900; font-size: 0.82rem; color: var(--ink); }
.stock-chip .sc-tier { font-size: 0.72rem; font-weight: 900; color: var(--gold-dark); }
.stock-chip .sc-count { background: var(--green-deep); color: #fff; font-size: 0.66rem; font-weight: 900; border-radius: 999px; padding: 1px 6px; border: 2px solid #fff; }
.stock-item { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.stock-sell {
  cursor: pointer; font-weight: 900; font-size: 0.7rem; padding: 3px 8px;
  background: linear-gradient(180deg, #ffd76a, #e8a92f); color: #4a2f10;
  border: 2px solid var(--outline); border-radius: 10px; box-shadow: 0 2px 0 var(--outline);
}
.stock-sell:hover { transform: translateY(-1px); filter: brightness(1.05); }
.stock-sell:active { transform: translateY(1px); box-shadow: none; }

/* side action buttons (right column) — a round WHITE sticker badge holds the emoji, with the
   label in white outlined caps just below (mockup 9_41PM). */
.side-actions {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 5px;
}
.side-btn {
  width: 66px;
  background: transparent; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  transition: transform 0.12s;
  position: relative;
}
/* each tab icon is a sticker PNG extracted from the mockup (its own white outline / blue badge) */
.side-btn .sb-ico {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}
.side-btn .sb-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* the WORKERS sticker (mockup 10_51PM) bakes its own label into the art — drop the HTML label
   and size the art up so its blue circle matches the neighbours' circles */
#sb-workers .sb-ico { width: 72px; height: 72px; }
#sb-workers small { display: none; }
/* SKILLS has no mockup icon → keep the 🎓 emoji, but set it in a matching blue sticker circle */
.side-btn .sb-emoji {
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.55rem;
  background: radial-gradient(circle at 40% 33%, #a6e0f8, #5bb9ec 58%, #3897d4);
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px rgba(32, 48, 58, 0.25), 0 3px 5px rgba(0, 0, 0, 0.3);
}
.side-btn:nth-child(odd) { transform: rotate(-2deg); }
.side-btn:nth-child(even) { transform: rotate(2deg); }
.side-btn small {
  font-size: 0.66rem; font-weight: 700; color: #fff;
  letter-spacing: 0.03em; white-space: nowrap; line-height: 1;
  text-shadow: -2px -2px 0 var(--outline), 2px -2px 0 var(--outline), -2px 2px 0 var(--outline), 2px 2px 0 var(--outline), 0 3px 4px rgba(0, 0, 0, 0.4);
  margin-top: -12px;   /* label overlaps the sticker's bottom edge (ref July 17 1_18AM) — also trims rail height */
  position: relative; z-index: 1;
}
/* the 8-button rail is ~620px tall at full size — on SHORT viewports (embedded/laptop) the top &
   bottom buttons cropped off-screen. Shrink the whole rail in steps so it always fits. */
@media (max-height: 780px) {
  .side-actions { gap: 3px; }
  .side-btn { width: 58px; }
  .side-btn .sb-ico { width: 47px; height: 47px; font-size: 1.65rem; }
  .side-btn .sb-emoji { width: 44px; height: 44px; font-size: 1.3rem; border-width: 3px; }
  .side-btn small { font-size: 0.58rem; margin-top: -10px; }
  #sb-workers .sb-ico { width: 60px; height: 60px; }
}
@media (max-height: 640px) {
  .side-actions { gap: 2px; }
  .side-btn { width: 50px; }
  .side-btn .sb-ico { width: 39px; height: 39px; font-size: 1.35rem; }
  .side-btn .sb-emoji { width: 37px; height: 37px; font-size: 1.1rem; border-width: 3px; }
  .side-btn small { font-size: 0.5rem; margin-top: -8px; }
  .side-btn .notif { width: 17px; height: 17px; font-size: 0.58rem; }
  #sb-workers .sb-ico { width: 50px; height: 50px; }
}
/* (phone-landscape HUD squeeze lives at the END of the file — it must out-cascade the
   later `@media (max-width: 760px)` mobile block, which also touches these rules) */
.side-btn:hover { transform: scale(1.12) rotate(-2deg); }
.side-btn:active { transform: scale(0.94); }
.side-btn .notif {
  position: absolute; top: -4px; right: 2px; width: 22px; height: 22px;
  background: radial-gradient(circle at 34% 28%, #ff8a7d, #e0483d 60%, #c62f24);
  border: 2px solid #fff; border-radius: 50%;
  color: #fff; font-size: 0.7rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: notifBounce 1.2s ease-in-out infinite;
  z-index: 1;
}
@keyframes notifBounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ============ PANELS — cream card, floating title plate, corner X ============ */
.panel-overlay {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(40, 24, 8, 0.5);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s;
  padding: 34px 10px 16px;
}
@keyframes fadeIn { from { opacity: 0; } }
.panel {
  position: relative;
  background: var(--panel);
  border: 5px solid var(--outline);
  border-radius: 28px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.65), var(--shadow);
  width: min(680px, 94vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  animation: panelPop 0.28s cubic-bezier(0.34, 1.45, 0.64, 1);
}
@keyframes panelPop { from { transform: scale(0.75) translateY(30px); opacity: 0; } }
/* soft sunburst rays behind the panel */
.panel::before {
  content: ""; position: absolute; inset: -46px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, rgba(255, 224, 130, 0.35) 0 7deg, transparent 7deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 72%);
  mask: radial-gradient(circle, #000 30%, transparent 72%);
  pointer-events: none;
}
/* twinkle stars near the corners */
.panel::after {
  content: "✦"; position: absolute; top: -26px; left: -30px; z-index: -1;
  color: #ffd95e; font-size: 2rem; text-shadow: 40px 500px 0 #ffd95e, -18px 320px 0 rgba(255, 217, 94, 0.7);
  animation: starTwinkle 2.2s ease-in-out infinite;
  pointer-events: none;
}
/* floating white title plate overlapping the panel's top edge */
.panel-head {
  align-self: center;
  margin-top: -28px;
  background: var(--card);
  border: 4px solid var(--outline);
  border-radius: 999px;
  padding: 8px 30px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.85), 0 4px 0 var(--outline), 0 7px 10px rgba(60, 35, 10, 0.25);
  display: flex; align-items: center; justify-content: center;
  max-width: calc(100% - 70px);
  position: relative; z-index: 2;
}
.panel-head h2 {
  color: var(--ink); font-size: 1.22rem; font-weight: 900; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* gold banner title variant (Build & Upgrade mockup 9_49PM) */
.panel-head.head-gold {
  background: linear-gradient(180deg, #ffd75e, #edab22);
  border-radius: 18px;
}
.panel-head.head-gold h2 { color: #5c3d10; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
/* tilted corner sticker badge (injected by HUD._panelShell) */
.panel-badge {
  position: absolute; top: -34px; left: -24px; z-index: 3;
  width: 74px; height: 74px; border-radius: 22px;
  background: var(--card); border: 4px solid var(--outline);
  box-shadow: 0 0 0 4px #fff, 0 6px 12px rgba(60, 35, 10, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; transform: rotate(-9deg);
  pointer-events: none;
  animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.panel-badge img { width: 52px; height: 52px; }
@keyframes badgePop { from { transform: rotate(-24deg) scale(0.4); opacity: 0; } }
/* big round red X breaking out of the top-right corner */
.panel-close {
  position: absolute; top: -20px; right: -20px; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff8a7d, #e0483d 55%, #c62f24);
  border: 3.5px solid var(--outline); color: #fff; font-weight: 900; font-size: 1.35rem;
  box-shadow: 0 0 0 4px #fff, 0 5px 10px rgba(60, 35, 10, 0.4), inset 0 3px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.1s;
}
.panel-close:hover { transform: scale(1.1) rotate(6deg); }
.panel-close:active { transform: scale(0.94); }
/* folder tabs sitting on a divider — active tab merges into the body (mockup 10_09PM) */
.panel-tabs {
  display: flex; gap: 6px; align-items: flex-end;
  padding: 2px 4px 0; margin-bottom: 14px;
  border-bottom: 3px solid var(--outline);
  background: transparent;
}
.panel-tab {
  border: 3px solid var(--outline); border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: #efe6cf; color: var(--ink-soft);
  font-weight: 900; padding: 8px 17px; font-size: 0.9rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6);
  position: relative; top: 3px;
}
.panel-tab:hover { filter: brightness(1.05); }
.panel-tab.active {
  background: linear-gradient(180deg, #ffb64f, #f28c1d); color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  padding-top: 10px;
}
.panel-tab.locked { opacity: 0.55; filter: grayscale(0.55); cursor: not-allowed; }
/* red count bubble pinned to a tab corner (mockup 9_49PM "2") */
.tab-bubble {
  position: absolute; top: -12px; right: -10px;
  min-width: 22px; height: 22px; padding: 0 5px;
  background: radial-gradient(circle at 34% 28%, #ff8a7d, #e0483d 60%, #c62f24);
  border: 2px solid #fff; border-radius: 999px;
  color: #fff; font-size: 0.7rem; font-weight: 900; line-height: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: inline-block; text-align: center;
}
/* inline ✓/🔒 used to wrap the Orders label to a 3rd line, stretching the tab so it
   LOOKED selected — they live in corner bubbles now, keeping every tab the same height */
.tab-bubble.tab-ok { background: radial-gradient(circle at 34% 28%, #9fe08a, #58ab3c 60%, #3f8a28); }
.tab-bubble.tab-lock { background: radial-gradient(circle at 34% 28%, #cfc6b5, #9d937f 60%, #837a67); font-size: 0.6rem; }
.panel-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.panel-body::-webkit-scrollbar { width: 10px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--wood-light); border-radius: 6px; }
.panel-foot {
  padding: 10px 18px;
  border-top: 3px solid rgba(58, 43, 29, 0.14);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--card);
  border-radius: 0 0 22px 22px;
  font-weight: 900;
}
/* the balance (first item) sits in a soft gray pill chip (mockups 9_49/9_54PM) */
.panel-foot > span:first-child {
  background: #e9e2d2; border: 2px solid rgba(58, 43, 29, 0.35);
  border-radius: 999px; padding: 4px 14px;
  box-shadow: inset 0 2px 3px rgba(58, 43, 29, 0.12);
}

/* ============ TUTORIAL / HELP GUIDE ============ */
.tut-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40, 24, 10, 0.55); backdrop-filter: blur(2px);
  padding: 16px;
}
.tut-card {
  position: relative;
  width: min(440px, 94vw);
  background: var(--panel);
  border: 5px solid var(--outline);
  border-radius: 26px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.65), var(--shadow);
  padding: 26px 24px 18px;
  text-align: center;
  animation: panelPop 0.28s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.tut-skip {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none; color: var(--ink-soft);
  font-weight: 800; font-size: 0.82rem; opacity: 0.75;
}
.tut-skip:hover { opacity: 1; }
.tut-emoji {
  font-size: 3.6rem; line-height: 1;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
  animation: tutBob 2.4s ease-in-out infinite;
}
@keyframes tutBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.tut-title {
  margin: 10px 0 8px; font-size: 1.5rem; font-weight: 900; color: var(--green-dark);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}
.tut-body { font-size: 0.98rem; line-height: 1.5; color: var(--ink); font-weight: 600; }
.tut-body b { color: var(--wood-dark); font-weight: 900; }
.tut-dots { display: flex; gap: 7px; justify-content: center; margin: 16px 0 14px; }
.tut-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cream-dark); border: 2px solid var(--wood-light);
  transition: all 0.2s;
}
.tut-dots i.on { background: var(--green); border-color: var(--green-deep); transform: scale(1.25); }
.tut-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tut-step { font-size: 0.82rem; font-weight: 800; color: var(--ink-soft); }

/* ============ FARM GUIDE — Clementine, the interactive cowgirl mentor ============ */
/* container never eats a tap; only Clementine's own card is interactive */
#farm-guide { position: fixed; inset: 0; z-index: 44; pointer-events: none; transition: opacity 0.25s; }

/* dim spotlight — darkens the whole screen except a bright hole over the target (market/build/…),
   so the player's eye is pulled straight to it. Purely visual (never blocks a tap). */
.guide-dim {
  position: fixed; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(26, 15, 6, 0.62);
  transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.guide-figure {
  position: fixed; left: 14px; pointer-events: auto;
  display: flex; align-items: flex-end; gap: 0;
  width: min(440px, 92vw);
  animation: guidePop 0.34s cubic-bezier(0.34, 1.5, 0.5, 1);
}
/* Clementine lives in the BOTTOM-LEFT corner, on every screen size. She used to sit
   centred — narrative beats dead-centre, action steps bottom-centre — which put her on
   top of the farm you are being told to look at and directly above the toolbar she is
   pointing at. The corner keeps the playfield and the toolbar clear at all times, and
   it matches where the phone layout already put her, so desktop and mobile now read
   the same. `top: auto` is required on pos-center to unset the old vertical centring. */
.guide-figure.pos-center,
.guide-figure.pos-bottom { bottom: 100px; top: auto; transform: none; }   /* clears the toolbar */
.guide-figure.pos-top    { top: 92px; bottom: auto; transform: none; }    /* clears the HUD, for low targets */
/* sideways dodge (JS-toggled): the spotlighted card is in the left half → Clementine flips right
   so she never covers the thing she's pointing at */
.guide-figure.pos-right  { left: auto; right: 14px; transform: none; }
@keyframes guidePop { from { opacity: 0; } }

.guide-portrait {
  flex: 0 0 auto; width: 110px; height: 110px; border-radius: 50%;
  margin-right: -16px; z-index: 2;
  filter: drop-shadow(0 5px 6px rgba(60, 35, 10, 0.4));
  animation: guideBob 3s ease-in-out infinite;
}
@keyframes guideBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
.guide-portrait img, .guide-portrait .guide-face-svg { width: 100%; height: 100%; border-radius: 50%; display: block; }
.guide-portrait img { object-fit: cover; border: 4px solid var(--outline); background: #fdf6e6; }

.guide-bubble {
  position: relative; flex: 1 1 auto;
  background: var(--panel); border: 4px solid var(--outline); border-radius: 20px;
  padding: 12px 14px 10px 22px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 4px 0 var(--outline), var(--shadow);
}
/* speech-bubble tail pointing at the portrait */
.guide-bubble::before {
  content: ""; position: absolute; left: -13px; bottom: 26px;
  width: 0; height: 0; border: 10px solid transparent;
  border-right-color: var(--outline); border-left: 0;
}
.guide-bubble::after {
  content: ""; position: absolute; left: -7px; bottom: 29px;
  width: 0; height: 0; border: 7px solid transparent;
  border-right-color: var(--panel); border-left: 0;
}
.guide-name {
  font-weight: 900; font-size: 0.98rem; color: var(--green-dark);
  text-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.6); margin-bottom: 3px;
}
.guide-name .guide-hat { font-size: 0.9rem; }
.guide-text { font-size: 0.9rem; line-height: 1.42; color: var(--ink); font-weight: 600; }
.guide-text b { color: var(--wood-dark); font-weight: 900; }
.guide-skip {
  position: absolute; top: 6px; right: 10px;
  background: transparent; border: none; color: var(--ink-soft);
  font-weight: 800; font-size: 0.72rem; opacity: 0.7; cursor: pointer;
}
.guide-skip:hover { opacity: 1; }
.guide-skip.confirm { color: var(--red); opacity: 1; }
.guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.guide-step { font-size: 0.74rem; font-weight: 800; color: var(--ink-soft); }
.guide-next {
  background: linear-gradient(180deg, var(--green), var(--green-dark));
  border: 3px solid var(--outline); border-radius: 13px; color: #fff;
  font-weight: 900; font-size: 0.86rem; padding: 6px 14px; cursor: pointer;
  box-shadow: var(--pill-shadow); font-family: inherit;
}
.guide-next:active { transform: translateY(2px); box-shadow: var(--pill-shadow-down); }
.guide-your-turn { font-size: 0.8rem; font-weight: 800; color: var(--green-dark); animation: guidePulseTxt 1.4s ease-in-out infinite; }
@keyframes guidePulseTxt { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.guide-nextlink {
  background: transparent; border: none; color: var(--ink-soft);
  font-weight: 800; font-size: 0.76rem; cursor: pointer; text-decoration: underline; font-family: inherit;
}
.guide-nextlink:hover { color: var(--ink); }

/* the "tap here" spotlight — never blocks input (parent is pointer-events:none) */
.guide-ring {
  position: fixed; border: 4px dashed var(--gold); border-radius: 16px;
  box-shadow: 0 0 0 3px rgba(242, 182, 50, 0.35), 0 0 18px 4px rgba(242, 182, 50, 0.55);
  animation: guideRing 1.1s ease-in-out infinite; pointer-events: none;
}
@keyframes guideRing {
  0%, 100% { transform: scale(1); border-color: var(--gold); }
  50% { transform: scale(1.06); border-color: #ffe08a; }
}
.guide-hand {
  position: fixed; font-size: 2.5rem; pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
  animation: guideHand 0.9s ease-in-out infinite;
}
@keyframes guideHand { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

@media (max-width: 560px) {
  /* phones: smaller card hugging the LEFT edge so the plots in the middle stay visible */
  .guide-figure { width: min(330px, 86vw); left: 8px; }
  .guide-figure.pos-center,
  .guide-figure.pos-bottom { bottom: 104px; top: auto; transform: none; }   /* clear of the toolbar (it sat ON it at 12px) */
  .guide-figure.pos-top    { top: 8px; left: auto; right: 8px; transform: none; }  /* low targets: dodge the stat stack */
  .guide-portrait { width: 68px; height: 68px; margin-right: -12px; }
  .guide-text { font-size: 0.78rem; }
  .guide-bubble { padding: 8px 10px 7px 16px; }
}

/* shop / build grids — golden reward cards (mockup: build & animals panels) */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shop-item {
  background: linear-gradient(180deg, #ffe9a8, #f5cf6e);
  border: 3px solid var(--outline); border-radius: 18px;
  padding: 12px 10px 10px; text-align: center; position: relative;
  transition: transform 0.12s, box-shadow 0.12s;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), 0 3px 0 var(--outline), 0 6px 8px rgba(60, 35, 10, 0.18);
}
.shop-item:hover { transform: translateY(-3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), 0 6px 0 var(--outline), 0 10px 14px rgba(60, 35, 10, 0.25); }
.shop-item.locked {
  filter: grayscale(0.9);
  background: linear-gradient(180deg, #d9d4c8, #c2bcae);
}
.shop-item .icon { font-size: 2.6rem; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25)); }
.shop-item .name { font-weight: 900; font-size: 0.95rem; color: var(--ink); }
/* owned-count badge, dark pill in the card corner (mockup 9_51PM "×3") */
.shop-item .count-badge {
  position: absolute; top: -10px; right: -8px;
  background: var(--outline); color: #ffe9bd;
  font-size: 0.72rem; font-weight: 900; padding: 3px 9px; border-radius: 999px;
  border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.shop-item .icon .drawn-ico { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.22)); }
/* horizontal build cards — icon left, text right, pill along the bottom (mockup 9_49PM) */
.shop-item.card-h {
  flex-direction: row; flex-wrap: wrap; text-align: left;
  align-items: center; gap: 6px 10px; padding: 12px;
}
.shop-item.card-h .icon { font-size: 2.3rem; flex: 0 0 auto; }
.shop-item.card-h .card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-item.card-h .desc { min-height: 0; }
.shop-item.card-h .buy-btn { flex-basis: 100%; }
.shop-item.card-h .max-ribbon { flex-basis: 100%; text-align: center; margin-top: 2px; }
.stock-chip .sc-ico img, .shop-item .icon img { display: block; }
.shop-item .desc { font-size: 0.7rem; color: var(--ink-soft); line-height: 1.3; min-height: 2.2em; font-weight: 700; }
/* brown hexagonal-feel lock tag with the level requirement */
.shop-item .lock-tag {
  position: absolute; top: -10px; right: -8px;
  background: linear-gradient(180deg, #8a6a4a, #64452a); color: #ffe9bd;
  font-size: 0.66rem; font-weight: 900; padding: 4px 9px; border-radius: 10px;
  border: 2.5px solid var(--outline); transform: rotate(6deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.shop-item .lock-tag::before { content: "🔒 "; font-size: 0.6rem; }

/* primary action pill (green glossy) */
.buy-btn {
  background: linear-gradient(180deg, #90d558, #5fae2c);
  border: 3px solid var(--outline);
  color: #fff; font-weight: 900; border-radius: 999px; padding: 5px 12px; font-size: 0.85rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: var(--pill-shadow); width: 100%;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.12s;
}
.buy-btn:hover:not(:disabled) { filter: brightness(1.07); }
.buy-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: var(--pill-shadow-down); }
.buy-btn:disabled {
  background: #c9c1b2; color: #8b8374; text-shadow: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 2px 0 rgba(58, 43, 29, 0.5);
  cursor: not-allowed;
}
/* dual worker-hire buttons: 💎 gems pill stacked over 💰 coins pill (mockup 9_53PM) */
.hire-opts { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.hire-opts .buy-btn { width: 100%; padding: 5px 6px; }
.buy-btn.wk-gem { background: linear-gradient(180deg, #4fd4d4, #1f9faf); }
.buy-btn.wk-coin { background: linear-gradient(180deg, #ffd75e, #eda822); color: #5c3d10; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

/* market rows — white cards with chocolate outline */
.market-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 3px solid var(--outline); border-radius: 16px;
  padding: 9px 12px; margin-bottom: 9px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 rgba(58, 43, 29, 0.55);
}
.market-row .icon { font-size: 1.6rem; width: 38px; text-align: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18)); }
.drawn-ico { display: inline-block; vertical-align: middle; image-rendering: auto; }
.market-row .name { flex: 1; font-weight: 800; }
.market-row .qty { color: var(--ink-soft); font-weight: 700; font-size: 0.85rem; }
.market-row .price { font-weight: 900; color: var(--gold-dark); min-width: 58px; text-align: right; }
.trend-up { color: #3d9c3d; font-weight: 900; }
.trend-down { color: #c34e33; font-weight: 900; }
.sell-btns { display: flex; gap: 5px; }
/* row action pill (green, like the mockup SELL / CLAIM / DELIVER pills) */
.sell-btn {
  background: linear-gradient(180deg, #90d558, #5fae2c);
  border: 2.5px solid var(--outline);
  color: #fff; font-weight: 900; border-radius: 999px; padding: 4px 11px; font-size: 0.8rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.16), 0 2px 0 var(--outline);
  transition: transform 0.08s, filter 0.12s;
}
.sell-btn:hover:not(:disabled) { filter: brightness(1.07); }
.sell-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 0 0 var(--outline); }
/* can't afford it yet — clearly greyed so seed/decoration buys read as unavailable */
.sell-btn:disabled { background: #c9c1b2; border-color: rgba(58, 43, 29, 0.55); color: #8b8374; text-shadow: none; box-shadow: none; cursor: not-allowed; }

/* skills — big rows with framed sticker icon, star tier, fat price pill (mockup 9_54PM) */
.skill-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 3px solid var(--outline); border-radius: 16px;
  padding: 11px 14px; margin-bottom: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 rgba(58, 43, 29, 0.55);
}
.skill-row.locked { filter: grayscale(0.85); opacity: 0.8; }
.sk-ico {
  position: relative; width: 56px; height: 56px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem;
  background: var(--panel); border: 3px solid var(--outline); border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(58, 43, 29, 0.4);
}
.sk-lv {
  position: absolute; bottom: -10px; left: -12px; transform: rotate(-7deg);
  background: linear-gradient(180deg, #8a6a4a, #64452a); color: #ffe9bd;
  font-size: 0.6rem; font-weight: 900; padding: 3px 7px; border-radius: 8px;
  border: 2px solid var(--outline); white-space: nowrap;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.sk-body { flex: 1; min-width: 0; }
.sk-name { font-weight: 900; font-size: 1.02rem; }
.sk-stars {
  color: var(--gold); letter-spacing: 1px;
  text-shadow: -1px -1px 0 rgba(58, 43, 29, 0.7), 1px -1px 0 rgba(58, 43, 29, 0.7), -1px 1px 0 rgba(58, 43, 29, 0.7), 1px 1px 0 rgba(58, 43, 29, 0.7);
}
.sk-desc { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.sk-desc b { color: var(--green-deep); }
/* per-skill level progress (0–maxLevel) */
.sk-bar {
  margin-top: 6px; height: 7px; border-radius: 6px; overflow: hidden;
  background: rgba(58, 43, 29, 0.16); border: 1.5px solid var(--outline);
}
.sk-bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(180deg, #8fd14a, var(--green-deep)); }
/* CRUCIAL tag + premium tint for the carry skills (cost coins + gems) */
.sk-crux {
  display: inline-block; vertical-align: middle; margin: 0 6px;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.5px; color: #fff;
  background: linear-gradient(180deg, #ff8a4c, #e0561f); border: 2px solid var(--outline);
  border-radius: 7px; padding: 2px 6px; transform: rotate(-2deg); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.skill-row.crucial {
  background: linear-gradient(180deg, #fff6e2, #fde8c6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 3px 0 rgba(58, 43, 29, 0.55), 0 0 0 2px rgba(240, 165, 30, 0.3);
}
.buy-btn.sk-buy { width: auto; min-width: 118px; font-size: 0.98rem; padding: 9px 16px; flex: 0 0 auto; }
.buy-btn.sk-buy.sk-crucial { min-width: 168px; font-size: 0.84rem; }
/* gold MAX ribbon (buttons kit 10_19PM) */
.max-ribbon {
  flex: 0 0 auto; white-space: nowrap;
  background: linear-gradient(180deg, #ffd75e, #edab22);
  border: 3px solid var(--outline); color: #5c3d10;
  font-weight: 900; font-size: 0.92rem; padding: 8px 18px; border-radius: 6px 14px 6px 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 0 var(--outline);
  transform: rotate(-2deg);
}

/* worker cards */
.worker-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 3px solid var(--outline); border-radius: 16px;
  padding: 10px 12px; margin-bottom: 9px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 rgba(58, 43, 29, 0.55);
}
.worker-face {
  width: 50px; height: 50px; border-radius: 50%; font-size: 1.7rem;
  background: linear-gradient(180deg, #cfe8f7, #a8cfe8); border: 3px solid var(--outline);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.worker-info { flex: 1; }
.worker-info .w-name { font-weight: 900; }
.worker-info .w-task { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; }
.worker-info .w-bar {
  height: 12px; background: #ece2ca; border-radius: 999px; margin-top: 5px; overflow: hidden;
  border: 2px solid var(--outline);
}
.worker-info .w-bar > i { display: block; height: 100%; background: linear-gradient(180deg, #90d558, #5fae2c); border-radius: 999px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.4); }
/* per-worker job toggles — icon squares like the mockup's segmented chip (9_53PM) */
.w-tasks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.w-tasks-none, .wtask-none { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; }
.wtask { position: relative; display: inline-flex; }
.wtask.on .wtask-lbl {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1;
  background: linear-gradient(180deg, #7cc44a, #56a02b);
  border: 2.5px solid var(--outline); border-radius: 10px; color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 0 var(--outline);
  cursor: pointer;
}
.wtask-ord {
  position: absolute; top: -7px; left: -7px;
  background: var(--outline); color: #fff; font-size: 0.56rem; font-weight: 900;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff; pointer-events: none;
}
.wtask.on .wtask-up {
  position: absolute; top: -8px; right: -8px;
  width: 17px; height: 17px; padding: 0;
  background: var(--green-deep); color: #fff; border: 1.5px solid #fff; border-radius: 50%;
  font-size: 0.56rem; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.wtask.off {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1;
  border: 2.5px dashed #b7ae9d; background: #efe7d6; border-radius: 10px;
  filter: grayscale(0.9); opacity: 0.75; cursor: pointer;
}
.wtask.off:hover { background: #e6dcc5; filter: grayscale(0.4); opacity: 1; }
.wtask-up:hover { filter: brightness(1.2); }
.wtask-lbl:hover { filter: brightness(1.08); }
.w-carry {
  font-weight: 800; color: var(--wood-dark, #6b4a2a); margin-left: 4px;
  background: var(--panel); border: 2px solid var(--outline); border-radius: 999px;
  padding: 1px 8px; font-size: 0.72rem;
}

/* crew tier banner (worker carry + speed upgrade) — gold shield card */
.crew-tier {
  background: linear-gradient(180deg, #ffe9a8, #f5cf6e);
  border: 3px solid var(--outline); border-radius: 16px;
  padding: 10px 12px; margin-bottom: 10px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), 0 3px 0 rgba(58, 43, 29, 0.55);
}
.crew-tier .crew-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crew-tier .crew-title { font-weight: 900; font-size: 0.98rem; }
.crew-tier .crew-title small { color: #b07708; letter-spacing: 1px; }
.crew-tier .crew-desc { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; margin-top: 3px; }
.crew-tier .crew-next { font-size: 0.74rem; color: var(--green-deep); font-weight: 800; margin-top: 3px; }
.crew-tier .crew-max { font-weight: 900; color: #b07708; }
.crew-tier .crew-up {
  white-space: nowrap;
  background: linear-gradient(180deg, #90d558, #5fae2c);
  color: #fff;
}

/* land-purchase popup (pay coins OR watch a rewarded video) */
.land-buy-overlay {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(40, 24, 8, 0.45);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.18s;
}
/* inline emoji→sticker swaps (💰 → star coin) — sized to the surrounding text */
img.inline-ico {
  width: 1.15em; height: 1.15em;
  vertical-align: -0.18em;
  display: inline-block;
  margin: 0 0.04em;
}

/* parchment "deed" card — the LAND DEED / CONSTRUCTION popup form (gold frame + corner rivets) */
.land-buy-card {
  position: relative;
  background: linear-gradient(180deg, #fbf3dd, #f2e4c2);
  border: 4px solid var(--outline); border-radius: 20px;
  box-shadow:
    inset 0 0 0 3px #f9efd6,
    inset 0 0 0 6px #d9b661,
    inset 0 0 30px rgba(150, 106, 38, 0.18),
    var(--shadow);
  width: min(360px, 92vw); padding: 22px 20px 18px; text-align: center;
  animation: panelPop 0.26s cubic-bezier(0.34, 1.45, 0.64, 1);
}
/* gold corner rivets: one strip along the top + one along the bottom, a dot at each end */
.land-buy-card::before, .land-buy-card::after {
  content: ""; position: absolute; left: 11px; right: 11px; height: 12px; pointer-events: none;
  background:
    radial-gradient(circle at 6px 6px, #ffe9a8 0 2px, #d9a83f 2px 4.5px, #a97c22 4.5px 5.5px, transparent 6px) left center / 12px 12px no-repeat,
    radial-gradient(circle at 6px 6px, #ffe9a8 0 2px, #d9a83f 2px 4.5px, #a97c22 4.5px 5.5px, transparent 6px) right center / 12px 12px no-repeat;
}
.land-buy-card::before { top: 11px; }
.land-buy-card::after { bottom: 11px; }
.deed-head {
  font-size: 0.92rem; font-weight: 900; letter-spacing: 3px;
  color: #7a5024; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* rope band across the card with the header art sitting on it */
.deed-rope { position: relative; height: 40px; margin: 8px -14px 2px; display: flex; align-items: center; justify-content: center; }
.deed-rope::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%);
  background: repeating-linear-gradient(105deg, #cfa25c 0 6px, #b98a44 6px 12px);
  border-top: 2px solid rgba(122, 80, 30, 0.5); border-bottom: 2px solid rgba(122, 80, 30, 0.5);
  border-radius: 4px;
}
.deed-art { position: relative; font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 3px 2px rgba(90, 55, 15, 0.35)); }
/* price / value pill (coin-flanked, pressed into the parchment) */
.deed-pill {
  display: inline-block; margin-top: 12px; padding: 8px 24px; border-radius: 999px;
  background: linear-gradient(180deg, #efe0ba, #e6d2a2);
  border: 3px solid #caa64b;
  box-shadow: inset 0 2px 4px rgba(120, 84, 30, 0.35), inset 0 -2px 0 rgba(255, 255, 255, 0.55);
  font-weight: 900; font-size: 1.18rem; color: #5d4016;
}
/* 🪓 "wild obstacle included" perk line on the land deed */
.lb-wild {
  margin-top: 8px; padding: 5px 12px; border-radius: 10px;
  background: rgba(95, 174, 44, 0.14); border: 1.5px dashed rgba(95, 174, 44, 0.55);
  font-weight: 700; font-size: 0.82rem; color: #3f6d1c;
}
/* two chunky buttons side by side (BUY / CANCEL) */
.lb-actions.deed-row { flex-direction: row; }
.lb-actions.deed-row .btn { flex: 1; }
.deed-alt { display: flex; gap: 8px; margin-top: 9px; }
.deed-alt .btn { flex: 1; padding: 8px 8px; font-size: 0.8rem; font-weight: 900; }
.deed-alt .btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* worker crew: "free" badge on gem-hired (wage-free) workers */
.w-free {
  display: inline-block; padding: 0 6px; border-radius: 999px;
  background: rgba(120, 90, 200, 0.16); border: 1px solid #9a7fd0;
  color: #6b4fb0; font-weight: 900; font-size: 0.62rem; vertical-align: middle;
}

/* build shop: owned-count chip next to the building name (duplicate cap) */
.build-count {
  display: inline-block; padding: 1px 7px; margin-left: 4px; border-radius: 999px;
  background: rgba(143, 201, 87, 0.25); border: 1.5px solid #9bb05e;
  font-size: 0.68rem; font-weight: 900; color: #55712c; vertical-align: middle;
}

/* chunk deal band: several plots in one purchase (level-gated) */
.deed-chunk {
  margin-top: 12px; padding: 9px 10px 10px; border-radius: 12px;
  background: rgba(143, 201, 87, 0.16);
  border: 2px dashed #9bb05e;
}
.deed-chunk-head {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 1.5px;
  color: #55712c; margin-bottom: 6px;
}
.deed-chunk .deed-row { margin-top: 0; }
.deed-chunk .lb-chunk-coins { width: 100%; font-size: 0.86rem; }
/* construction site row: dark building silhouette + stopwatch pill */
.deed-site { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.deed-silhouette { font-size: 2.7rem; line-height: 1; filter: brightness(0) sepia(1) saturate(3) hue-rotate(-18deg) brightness(0.42); }
.deed-timer {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px;
  background: #fdf6e3; border: 3px solid var(--outline);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 2px 0 var(--outline);
  font-weight: 900; font-size: 1.08rem; color: #4a3413;
}
.btn-teal { background: linear-gradient(180deg, #58cfcc, #26a3a5); }
.btn-gray { background: linear-gradient(180deg, #b9bcc2, #8a8f98); }
.land-buy-card .lb-title { font-size: 1.35rem; font-weight: 900; }
.land-buy-card .lb-sub { font-size: 0.86rem; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.land-buy-card .lb-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.land-buy-card .lb-actions .btn { width: 100%; padding: 11px 14px; font-size: 0.98rem; font-weight: 900; }
.land-buy-card .lb-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.land-buy-card .lb-ad-play { display: inline-block; margin-right: 4px; }
.land-buy-card .lb-note { font-size: 0.76rem; color: var(--ink-soft); font-weight: 700; margin-top: 11px; }
.land-buy-card .lb-x {
  position: absolute; top: -16px; right: -16px; width: 40px; height: 40px;
  border: 3px solid var(--outline); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff8a7d, #e0483d 55%, #c62f24); color: #fff;
  font-weight: 900; cursor: pointer; line-height: 1;
  box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(60, 35, 10, 0.35);
}
.land-buy-card .lb-x:hover { transform: scale(1.08); }

/* ---- recipe building panel (multi-recipe picker + craft) ---- */
.bp-panel { width: min(460px, 94vw); }
.bp-stars { color: var(--gold); font-size: 0.9rem; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.bp-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 48px;
  border-radius: 14px; border: 3px solid var(--outline); background: var(--card);
  font-weight: 800; cursor: pointer; font-size: 0.9rem; color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 2px 0 var(--outline);
}
.bp-chip .bp-chip-ic { font-size: 1.2rem; }
.bp-chip.active { background: linear-gradient(180deg, #a7e072, #83c24f); color: #23400f; }
.bp-chip.locked { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.6); }
.bp-chip-lv { font-size: 0.7rem; background: var(--outline); color: #ffe9bd; border-radius: 6px; padding: 1px 5px; }
.bp-recipe {
  background: #f2ecf8; border: 3px solid var(--outline); border-radius: 16px; padding: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.bp-flow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.bp-ing, .bp-output { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.bp-ing-ic, .bp-out-ic { font-size: 1.5rem; }
.bp-ing.short, .bp-ing.short .bp-ing-have { color: var(--red-dark); }
.bp-plus, .bp-arrow { color: var(--ink-soft); font-weight: 900; margin: 0 2px; }
.bp-arrow { font-size: 1.2rem; }
.bp-output { flex-direction: column; gap: 0; }
.bp-out-nm { font-size: 0.82rem; }
.bp-out-val { font-size: 0.78rem; color: var(--gold-dark, #b8860b); }
.bp-meta { text-align: center; color: var(--ink-soft); font-size: 0.8rem; font-weight: 700; margin-top: 8px; }
.bp-action { margin-top: 12px; }
.bp-btn { width: 100%; padding: 12px; font-size: 1rem; font-weight: 900; }
.bp-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* level badge in the panel head */
.bp-lvl { display: inline-block; margin-left: 6px; background: var(--gold, #f2b632); color: var(--outline);
  border: 2.5px solid var(--outline); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); vertical-align: middle; }

/* production loading bar + gem rush */
.bp-load { position: relative; height: 26px; margin: 10px 0 8px; border-radius: 999px;
  background: #e7dcc2; border: 3px solid var(--outline); overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(60,35,10,0.25); }
.bp-load-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(180deg, #7fe08a, #4bb264); border-right: 2px solid rgba(0,0,0,0.15);
  transition: width 0.25s linear; }
.bp-load-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.85rem; color: #fff;
  text-shadow: -1.2px -1.2px 0 var(--outline), 1.2px -1.2px 0 var(--outline), -1.2px 1.2px 0 var(--outline), 1.2px 1.2px 0 var(--outline); }
.bp-rush { width: 100%; padding: 9px; font-size: 0.92rem; font-weight: 900; }
.btn-gem { background: linear-gradient(180deg, #6fd0f4, #2f9bd6); }
.btn-red { background: linear-gradient(180deg, #e8664f, #c33d2c); }

/* automation toggle + level-up row */
.bp-tools { margin-top: 12px; display: flex; }
.bp-auto { flex: 1; padding: 9px 10px; border: 3px solid var(--outline); border-radius: 14px; cursor: pointer;
  font-weight: 800; font-size: 0.88rem; color: var(--outline);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 var(--outline); }
.bp-auto.on { background: linear-gradient(180deg, #bfe9a0, #94ce6e); }
.bp-auto.off { background: linear-gradient(180deg, #e9d7bb, #cdb188); filter: grayscale(0.25); }
.bp-auto:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 1px 0 var(--outline); }
/* 🍳 Hire-a-Chef button (kitchen panel) */
.bp-chef { width: 100%; margin-top: 10px; padding: 10px 12px; border: 3px solid var(--outline); border-radius: 14px;
  cursor: pointer; font-weight: 900; font-size: 0.9rem; color: var(--outline); display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: linear-gradient(180deg, #ffe6a8, #f6c862); box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 var(--outline); }
.bp-chef.on { background: linear-gradient(180deg, #bfe9a0, #94ce6e); }
.bp-chef small { font-weight: 700; font-size: 0.7rem; color: var(--ink-soft); }
.bp-chef:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 1px 0 var(--outline); }
/* 🕵️ Smuggler trade panel */
.smug-sub { text-align: center; color: var(--ink-soft); font-size: 0.82rem; font-weight: 700; margin: 2px 0 10px; line-height: 1.4; }
.smug-meta { font-size: 0.76rem; }
.smug-list { display: flex; flex-direction: column; gap: 8px; }
.smug-offer { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 3px solid var(--outline); border-radius: 14px;
  background: linear-gradient(180deg, #efe6d6, #ddccb2); box-shadow: inset 0 2px 0 rgba(255,255,255,0.5); }
.smug-offer.used { filter: grayscale(0.5); opacity: 0.6; }
.smug-give { flex: 1; display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 0.82rem; color: var(--outline); }
.smug-give .inline-ico { vertical-align: middle; }
.smug-have { color: var(--ink-soft); font-weight: 700; font-size: 0.72rem; }
.smug-arrow { color: var(--ink-soft); font-weight: 900; }
.smug-get { font-weight: 900; font-size: 0.92rem; color: #2b7fb0; white-space: nowrap; }
.smug-btn { padding: 7px 12px; font-size: 0.8rem; }
.bp-levelwrap { margin-top: 10px; }
.bp-level { width: 100%; padding: 10px; font-size: 0.92rem; font-weight: 900; }
.bp-level-note { text-align: center; color: var(--ink-soft); font-size: 0.76rem; font-weight: 700; margin-top: 6px; }
.bp-level-note.maxed { color: #b8860b; }

/* animal home popup */
.ap-cap { text-align: center; font-weight: 800; color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 8px; }
.ap-list { display: flex; flex-direction: column; gap: 7px; }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fffdf6; border: 2.5px solid var(--outline); border-radius: 12px; padding: 7px 10px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.7); }
.ap-animal { font-size: 1.15rem; font-weight: 900; display: inline-flex; align-items: center; gap: 3px; }
.ap-flow { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 0.9rem; }
.ap-feed { color: var(--ink-soft); font-weight: 700; font-size: 0.8rem; }
.ap-feed.short, .ap-feed.short b { color: var(--red-dark); }   /* out of feed → flag the shortfall */
.ap-status { font-size: 0.82rem; font-weight: 800; }
.ap-ready { color: #3f9d38; }
.ap-hungry { color: #d06a2c; }
.ap-idle { color: var(--ink-soft); font-weight: 700; }
.ap-empty { text-align: center; color: var(--ink-soft); font-weight: 700; padding: 14px 6px; }

/* hauler keep toggle (market) + goods cost on build cards */
.keep-btn { background: transparent; border: none; font-size: 1.15rem; cursor: pointer; padding: 2px 4px; filter: grayscale(0.35); }
.keep-btn.kept { filter: none; }
.keep-btn:hover { transform: scale(1.12); }

/* market SELL tab — item tile grid with corner star badges (mockup 9_43PM) */
.sell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 12px; padding-top: 6px; }
.sell-tile { display: flex; flex-direction: column; gap: 6px; }
.st-frame {
  position: relative; height: 76px;
  background: linear-gradient(180deg, #efeaf8, #dcd2ee);
  border: 3px solid var(--outline); border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 3px 0 rgba(58, 43, 29, 0.55);
  font-size: 2.4rem;
}
.st-frame .drawn-ico { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2)); }
.st-star {
  position: absolute; top: -12px; left: -9px; font-size: 1.25rem; transform: rotate(-14deg);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}
.st-frame .st-lock {
  position: absolute; top: -9px; right: -7px; font-size: 0.85rem;
  background: var(--card); border: 2px solid var(--outline); border-radius: 999px;
  padding: 2px 4px; line-height: 1; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}
.st-qty {
  position: absolute; bottom: -9px; right: -6px;
  background: var(--outline); color: #ffe9bd; font-size: 0.68rem; font-weight: 900;
  border-radius: 999px; padding: 2px 8px; border: 2px solid #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}
.st-name { text-align: center; font-weight: 900; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-btns { display: flex; gap: 5px; }
.st-btns .sell-btn { flex: 1; padding: 5px 4px; white-space: nowrap; }
.st-btns .st-all { flex: 0 0 auto; background: linear-gradient(180deg, #ffd75e, #eda822); color: #5c3d10; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

/* 📅 slim Daily Login row in the Gem Shop (replaces the old full-size bundle card) */
.streak-slim {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 3px solid var(--outline); border-radius: 14px;
  padding: 6px 12px; margin: 0 0 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 3px 0 rgba(58, 43, 29, 0.45);
}
.streak-slim .ss-art { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.streak-slim .ss-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.2; font-size: 0.92rem; }
.streak-slim .ss-txt small { color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; }
.streak-slim .ss-btn { width: auto; flex: 0 0 auto; padding: 6px 16px; }

/* 🌿 usable bag items (fertilizer…): green-tinted frame + teal USE pill instead of prices */
.use-tile .st-frame { background: linear-gradient(180deg, #e6f4d8, #c8e6ac); }
.use-btn { background: linear-gradient(180deg, #63d3a2, #2f9068); }
/* 🌿 fertilizer-in-hand: the seed bag rides the pointer EVERYWHERE (beats inline cursors) */
.fert-mode, .fert-mode * { cursor: url("assets/icons/ui/fertilizer_cursor.png") 22 30, pointer !important; }
.build-goods { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; }
.build-goods.short { color: var(--red-dark); }

/* ---- gems (premium currency, teal like the mockup pills) ---- */
.stat-gem { margin-left: 12px; }
.floater.gem { color: #52e0e4; font-weight: 900; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); }
.quest-card .q-gem { color: var(--teal-dark); font-weight: 900; }
.lb-gems { background: linear-gradient(180deg, #4fd4d4, #1f9faf); color: #fff; }
.gem-row .icon { font-size: 1.5rem; }

/* ---- GEM SHOP: real-money bundles (docs/gems mockup) ---- */
.gemshop-banner {
  width: fit-content; margin: 0 auto 12px;
  background: linear-gradient(180deg, #ffd75e, #edab22);
  border: 3px solid var(--outline); border-radius: 14px;
  padding: 6px 26px; font-weight: 900; font-size: 1.05rem; color: #5c3d10;
  letter-spacing: 0.06em; text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 var(--outline);
}
.bundle-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 14px 10px; margin-bottom: 14px; padding-top: 8px;
}
.bundle-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--card); border: 3px solid var(--outline); border-radius: 18px;
  padding: 12px 8px 10px; text-align: center;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 var(--outline), 0 6px 8px rgba(60, 35, 10, 0.18);
  transition: transform 0.12s;
}
.bundle-card:hover { transform: translateY(-3px); }
.bundle-name { font-weight: 900; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; }
/* red corner bonus ribbon */
.bundle-bonus {
  position: absolute; top: 34px; left: -9px;
  background: linear-gradient(180deg, #f4726b, #d23c33);
  border: 2.5px solid var(--outline); border-radius: 8px;
  color: #fff; font-weight: 900; font-size: 0.72rem; line-height: 1.05;
  padding: 3px 8px; transform: rotate(-8deg);
  display: flex; flex-direction: column; align-items: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.bundle-bonus small { font-size: 0.5rem; letter-spacing: 0.06em; }
/* card with a diagonal POPULAR! ribbon: drop the bonus ribbon below it */
.bundle-card:has(.bundle-tag) .bundle-bonus { top: 64px; }
/* diagonal red POPULAR! ribbon across the top-left corner */
.bundle-tag {
  position: absolute; top: 10px; left: -26px;
  background: linear-gradient(180deg, #f4726b, #d23c33);
  border-top: 2px solid var(--outline); border-bottom: 2px solid var(--outline);
  color: #fff; font-weight: 900; font-size: 0.6rem; letter-spacing: 0.08em;
  padding: 3px 26px; transform: rotate(-32deg);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
/* gold BEST VALUE banner across the card top */
.bundle-banner {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  background: linear-gradient(180deg, #ffd75e, #edab22);
  border: 2.5px solid var(--outline); border-radius: 6px 12px 6px 12px;
  color: #5c3d10; font-weight: 900; font-size: 0.62rem; letter-spacing: 0.05em;
  padding: 3px 10px; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.bundle-art { width: 84px; height: 84px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); margin-top: 2px; }
.bundle-gems {
  font-weight: 900; font-size: 1.12rem; color: #17919c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.buy-btn.bundle-buy { font-size: 0.95rem; padding: 6px 10px; }
/* Coin Shop variants: red WATCH-AD card (reference mockup), gold amounts, teal gem-price pills */
.bundle-card.bundle-ad {
  background: linear-gradient(180deg, #e0584d, #b93227);
  border-color: var(--outline);
}
.bundle-card.bundle-ad .bundle-name { color: #ffe9bd; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.bundle-card.bundle-ad .coin-amt { color: #ffd75e; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.bundle-gems.coin-amt { color: #dd9410; }
.buy-btn.gem-price { background: linear-gradient(180deg, #4fd4d4, #1f9faf); }
.buy-btn.ad-watch { background: linear-gradient(180deg, #b98ce6, #8a5cc4); }
/* gold COIN SHOP ribbon with an overlapping coin medallion (docs/coins mockup) */
.coinshop-banner {
  position: relative;
  width: fit-content; margin: 4px 0 16px 30px;
  background: linear-gradient(180deg, #ffd75e, #edab22);
  border: 3px solid var(--outline); border-radius: 6px 16px 16px 6px;
  padding: 6px 28px 6px 36px; font-weight: 900; font-size: 1.05rem; color: #5c3d10;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 var(--outline);
}
.csb-coin {
  position: absolute; left: -28px; top: 50%; transform: translateY(-52%);
  width: 54px; height: 54px;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
}
/* one-line angled bonus ribbon over the art's bottom-right corner (coin cards) */
.bundle-bonus.bonus-strip {
  top: auto; left: auto; bottom: 76px; right: -8px;
  flex-direction: row; white-space: nowrap;
  font-size: 0.62rem; letter-spacing: 0.04em;
  padding: 3px 10px; transform: rotate(-5deg);
  border-radius: 7px;
}
.bundle-card:has(.bundle-tag) .bundle-bonus.bonus-strip { top: auto; }

/* ---- ⚡ ENERGY SHOP (energy tab) ---- */
/* electric-blue ribbon, same shape as the gold COIN SHOP one */
.energyshop-banner {
  position: relative;
  width: fit-content; margin: 4px 0 16px 8px;
  background: linear-gradient(180deg, #8fe0ff, #35a7e0);
  border: 3px solid var(--outline); border-radius: 6px 16px 16px 6px;
  padding: 6px 28px; font-weight: 900; font-size: 1.05rem; color: #0e4a6e;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 var(--outline);
}
/* emoji stand-in while the generated card art is pending (same box as .bundle-art) */
.bundle-art.art-emoji {
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
}
.bundle-gems.energy-amt { color: #1e88c9; }
.bundle-card.energy-card { background: linear-gradient(180deg, #eaf7ff, #cfeaf8); }

/* ---- 💎 GEM TAB extras: free-gems ad card + violet boost cards ---- */
.bundle-gems.gem-amt { color: #9ff5ef; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); font-size: 0.98rem; }
.bundle-card.boost-card { background: linear-gradient(180deg, #f4edff, #e0d2f6); }
.bundle-card.boost-card .bundle-name { color: #5d3d8f; }
.bundle-sub {
  font-weight: 700; font-size: 0.68rem; line-height: 1.25;
  color: var(--ink-soft); min-height: 2.1em;
  display: flex; align-items: center; justify-content: center;
}
.bundle-card.streak-entry { background: linear-gradient(180deg, #fff6d8, #ffe28a); }
.bundle-card.streak-entry .bundle-name { color: #7a5024; }
.bundle-card.streak-entry .bundle-art { width: 60px; height: 60px; }
.bundle-card.streak-entry .art-emoji { font-size: 40px; }

/* ---- 📅 Daily Login Streak popup (extends .land-buy-card / .land-buy-overlay) ---- */
.streak-card { width: min(400px, 94vw); padding-top: 30px; }
.streak-badge-wrap { display: flex; justify-content: center; margin: -46px 0 2px; }
.streak-badge-art { width: 60px; height: 60px; filter: drop-shadow(0 4px 4px rgba(60, 35, 10, 0.35)); }
.streak-badge-wrap .art-emoji { font-size: 46px; filter: drop-shadow(0 4px 4px rgba(60, 35, 10, 0.35)); }
.streak-flame {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 4px 0 12px; font-weight: 900; font-size: 0.92rem; color: var(--gold-dark);
}
.streak-flame .art-emoji { font-size: 20px; }
.streak-grid { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 4px 0 14px; }
.streak-tile {
  width: 72px; padding: 7px 4px 6px; border-radius: 14px; text-align: center; position: relative;
  background: linear-gradient(180deg, #ffffff, #efe4c8); border: 3px solid var(--outline);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 3px 0 var(--outline);
}
.streak-tile.today {
  background: linear-gradient(180deg, #fff6d8, #ffe28a); border-color: var(--gold-dark);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 3px 0 var(--gold-dark), 0 0 0 4px rgba(242, 182, 50, 0.4);
  animation: streakPulse 1.1s ease-in-out infinite;
}
.streak-tile.locked { opacity: 0.55; filter: grayscale(0.4); }
.streak-tile.done { opacity: 0.88; }
.streak-tile.big { width: 100%; padding: 10px 4px 8px; }
.streak-tile.big .streak-tile-art img { width: 40px; height: 40px; }
.streak-tile.big .streak-tile-art .art-emoji { font-size: 2.1rem; }
.streak-tile-day {
  display: block; font-size: 0.6rem; font-weight: 900; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.streak-tile-art { display: flex; align-items: center; justify-content: center; min-height: 32px; margin: 3px 0 1px; font-size: 1.6rem; line-height: 1; }
.streak-tile-art img { width: 30px; height: 30px; object-fit: contain; }
.streak-tile-art .art-emoji { font-size: 1.7rem; line-height: 1; }
.streak-tile-reward { display: block; font-size: 0.68rem; font-weight: 900; color: #5d4016; }
.streak-tile-check {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-deep); border: 2.5px solid #fff; color: #fff; font-size: 0.72rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
@keyframes streakPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.05); }
}
.streak-claim { width: 100%; margin-top: 2px; font-size: 1.02rem; }
.streak-claim:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- decorations (Gem Shop catalog + Farm Beauty) ---- */
.stat-beauty { margin-left: 12px; }
.beauty-summary {
  text-align: center; background: linear-gradient(90deg, #f9d3e6, #f2b6d6);
  border: 3px solid var(--outline);
  border-radius: 14px; padding: 7px 10px; font-weight: 800; color: #7a2f5a;
  margin-bottom: 8px; font-size: 0.85rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.decor-cat {
  font-weight: 900; color: var(--wood-dark, #6b4a2a);
  margin: 12px 0 6px; padding-bottom: 3px; border-bottom: 2px solid var(--cream-dark);
}
.decor-row .qty { font-size: 0.72rem; }
.decor-row.locked { opacity: 0.62; }
.decor-buy { min-width: 60px; white-space: nowrap; }

/* ---- Player Profile & Perks (Characters panel header, mockup 9_46PM) ---- */
.profile-wrap {
  display: flex; gap: 16px; align-items: stretch;
  margin-bottom: 12px;
}
.profile-left {
  flex: 0 0 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--card); border: 3px solid var(--outline); border-radius: 18px;
  padding: 14px 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 rgba(58, 43, 29, 0.55);
}
.profile-face {
  width: 108px; height: 108px; border-radius: 26px; object-fit: cover; object-position: center 12%;
  background: linear-gradient(180deg, #cfe8f7, #a8cfe8);
  border: 3.5px solid var(--outline);
  box-shadow: 0 0 0 3px #fff, 0 5px 10px rgba(60, 35, 10, 0.3);
}
.profile-face-emoji { display: flex; align-items: center; justify-content: center; font-size: 3.4rem; }
.profile-name { font-weight: 900; font-size: 1.1rem; margin-top: 2px; }
.profile-lvl {
  font-weight: 900; font-size: 0.86rem; color: #dd9410;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* the bar lives in a COLUMN flex card — kill .stat-bar's flex:1 or it grows vertically */
.profile-xp { flex: 0 0 auto; width: 100%; height: 18px; }
.perks-grid {
  flex: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-content: start;
}
.perk-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, #fff8e4, #f3e3bb);
  border: 3px solid var(--outline); border-radius: 14px;
  padding: 12px 8px 9px; text-align: center; min-height: 84px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 3px 0 rgba(58, 43, 29, 0.5);
}
.perk-tile.locked {
  filter: grayscale(0.9); opacity: 0.75;
  background: linear-gradient(180deg, #ddd8cc, #c8c2b3);
}
.perk-badge {
  position: absolute; top: -10px; left: -8px;
  width: 24px; height: 24px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #90d558, #5fae2c);
  border: 2px solid #fff; color: #fff; font-size: 0.8rem; font-weight: 900;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transform: rotate(-8deg);
}
.perk-tile.locked .perk-badge { background: linear-gradient(180deg, #9a948a, #6f6a60); font-size: 0.7rem; }
.perk-ico { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.perk-txt { font-size: 0.72rem; font-weight: 900; line-height: 1.2; }
.perk-sub { font-size: 0.62rem; font-weight: 700; color: var(--ink-soft); }

/* quest board — white rows, fat green progress pill; done = golden */
.quest-card {
  background: var(--card); border: 3px solid var(--outline); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 rgba(58, 43, 29, 0.55);
}
.quest-card.done { background: linear-gradient(180deg, #ffe9a8, #f5cf6e); }
/* task icon in its own white framed square (mockup 10_09PM) */
.quest-card .q-ico-frame {
  width: 48px; height: 48px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  background: var(--panel); border: 2.5px solid var(--outline); border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.quest-card .q-body { flex: 1; }
.quest-card .q-title { font-weight: 900; font-size: 0.95rem; }
/* teal reward chip on the right */
.q-gem-chip {
  flex: 0 0 auto; white-space: nowrap;
  background: linear-gradient(180deg, #4fd4d4, #1f9faf);
  border: 2.5px solid var(--outline); color: #fff;
  font-weight: 900; font-size: 0.82rem; border-radius: 999px; padding: 5px 11px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 0 var(--outline);
}
.qbar {
  height: 18px; background: #ece2ca; border-radius: 999px; margin-top: 6px; overflow: hidden;
  border: 2.5px solid var(--outline); position: relative;
}
.qbar > i {
  display: block; height: 100%;
  background: linear-gradient(180deg, #90d558, #5fae2c);
  border-radius: 999px; transition: width 0.4s;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
/* % progress text INSIDE the bar (mockup 9_45PM / bars kit 10_22PM) */
.q-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 900; color: #fff; letter-spacing: 0.03em;
  text-shadow: -1px -1px 0 rgba(58, 43, 29, 0.85), 1px -1px 0 rgba(58, 43, 29, 0.85), -1px 1px 0 rgba(58, 43, 29, 0.85), 1px 1px 0 rgba(58, 43, 29, 0.85);
  pointer-events: none;
}

/* ============ ACHIEVEMENTS panel (🏆 Awards) — matches the 3_05PM mockup ============ */
.ach-summary { text-align: center; font-weight: 800; color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 12px; }
.ach-summary b { color: var(--gold-dark); }
.ach-ready { color: #3f9d38; font-weight: 900; }
.ach-card {
  background: var(--card); border: 3px solid var(--outline); border-radius: 18px;
  margin-bottom: 10px; display: flex; align-items: stretch; overflow: hidden; min-height: 76px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 3px 0 rgba(58, 43, 29, 0.5);
}
/* left tier-coloured medal panel holding the round badge (mockup) */
.ach-medal {
  flex: 0 0 84px; display: flex; align-items: center; justify-content: center;
  border-right: 3px solid var(--outline);
}
.ach-card.ach-basic   .ach-medal { background: linear-gradient(180deg, #cf9a3f, #a9700f); }   /* bronze = coins */
.ach-card.ach-rare    .ach-medal { background: linear-gradient(180deg, #f2c14e, #cf8a12); }   /* gold = big coins (500-1,000) */
.ach-card.ach-medium  .ach-medal { background: linear-gradient(180deg, #5aa6e6, #2f7fc4); }   /* blue = 3-4 gems */
.ach-card.ach-special .ach-medal { background: linear-gradient(180deg, #b07fe6, #8a4fc4); }   /* purple = 4-5 gems */
.ach-ico {
  width: 62px; height: 62px; display: flex; align-items: center; justify-content: center;
  background: #fdf7ea; border: 3px solid var(--outline); border-radius: 50%;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
}
.ach-ico .drawn-ico { width: 54px; height: 54px; }
.ach-card.claimed { opacity: 0.66; filter: saturate(0.72); }
/* claimable → whole card glows gold like the mockup's Farmhand row */
.ach-card.claimable { background: linear-gradient(180deg, #ffeeb2, #f7c94e); animation: achGlow 1.5s ease-in-out infinite; }
.ach-card.claimable .ach-medal { background: linear-gradient(180deg, #f7cf5f, #e39a17); }
@keyframes achGlow {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 rgba(58,43,29,0.5), 0 0 0 rgba(242,182,50,0); }
  50%      { box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 rgba(58,43,29,0.5), 0 0 15px rgba(242,182,50,0.9); }
}
.ach-body { flex: 1 1 auto; min-width: 0; padding: 9px 13px; display: flex; flex-direction: column; justify-content: center; }
.ach-top { display: flex; align-items: center; gap: 7px; }
.ach-name { font-size: 0.98rem; font-weight: 900; color: var(--ink); }
.ach-tier {
  font-size: 0.58rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); background: #efe6cf; border: 2px solid var(--outline);
  border-radius: 999px; padding: 1px 7px;
}
.ach-desc { font-size: 0.76rem; color: var(--ink-soft); font-weight: 700; margin: 2px 0 6px; }
.ach-bar {
  height: 18px; background: #e6dcc2; border-radius: 999px; overflow: hidden;
  border: 2.5px solid var(--outline); position: relative;
}
.ach-bar > i { display: block; height: 100%; background: linear-gradient(180deg, #90d558, #5fae2c); border-radius: 999px; transition: width 0.4s; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.ach-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 900; color: #fff; letter-spacing: 0.03em;
  text-shadow: -1px -1px 0 rgba(58,43,29,0.85), 1px -1px 0 rgba(58,43,29,0.85), -1px 1px 0 rgba(58,43,29,0.85), 1px 1px 0 rgba(58,43,29,0.85);
}
.ach-rew {
  margin-left: auto; white-space: nowrap; border: 2px solid var(--outline); border-radius: 999px;
  font-weight: 900; font-size: 0.72rem; color: #fff; padding: 1px 8px;
}
.ach-rew.coin { background: linear-gradient(180deg, #f7cf5f, #d79a1a); }
.ach-rew.gem  { background: linear-gradient(180deg, #4fd4d4, #1f9faf); }
.ach-act { flex: 0 0 auto; display: flex; align-items: center; padding: 0 12px; }
.ach-claim {
  background: linear-gradient(180deg, #8ade63, #4aa838); border: 3px solid var(--outline);
  border-radius: 14px; color: #fff; font-weight: 900; font-size: 0.82rem; padding: 6px 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--outline); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.ach-claim:hover { filter: brightness(1.08); }
.ach-claim:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--outline); }
.ach-claim-rew { font-size: 0.72rem; font-weight: 900; }
.ach-claimed { font-size: 1.3rem; font-weight: 900; color: #3f9d38; text-shadow: 0 1px 0 #fff; }
.ach-claimall {
  background: linear-gradient(180deg, #8ade63, #4aa838); border: 3px solid var(--outline);
  border-radius: 999px; color: #fff; font-weight: 900; font-size: 0.9rem; padding: 8px 20px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--outline); cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); letter-spacing: 0.02em;
}
.ach-claimall:hover { filter: brightness(1.08); }
.ach-claimall:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--outline); }

/* ============ AD BUTTONS — purple "watch ad" pills ============ */
.ad-btn {
  background: linear-gradient(180deg, #b98ce6, #8a5cc4);
  border: 2.5px solid var(--outline); border-radius: 999px;
  font-weight: 900; font-size: 0.72rem; color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  padding: 3px 9px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 2px 0 var(--outline);
  white-space: nowrap;
}
.ad-btn:hover { filter: brightness(1.1); }
.ad-pulse { animation: adPulse 0.9s ease-in-out 3; }
@keyframes adPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 2px 0 var(--outline), 0 0 14px 4px rgba(154, 106, 212, 0.7); }
}
.sell-btn.ad-x2 { background: linear-gradient(180deg, #b98ce6, #8a5cc4); color: #fff; }

/* ============ AD SCRIM ============ */
#ad-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 12, 4, 0.55);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s;
}
.ad-scrim-card {
  background: var(--panel); border: 4px solid var(--outline); border-radius: 18px;
  padding: 14px 28px; font-weight: 900; font-size: 1.1rem;
  box-shadow: var(--shadow);
  animation: adPulse 1.2s ease-in-out infinite;
}

/* ============ MILKING MINIGAME ============ */
.milking-overlay {
  position: fixed; inset: 0; z-index: 35;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40, 24, 8, 0.35);
  animation: fadeIn 0.15s;
}
.milking-card {
  background: var(--panel); border: 5px solid var(--outline); border-radius: 24px;
  padding: 18px 26px 20px; text-align: center;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.65), var(--shadow);
  animation: panelPop 0.25s cubic-bezier(0.34, 1.45, 0.64, 1);
  width: min(420px, 92vw);
}
.milking-card h3 { font-size: 1.2rem; font-weight: 900; }
.milking-sub { color: var(--ink-soft); font-size: 0.85rem; margin: 2px 0 12px; font-weight: 700; }
.milk-track {
  position: relative; height: 32px; border-radius: 999px;
  background: #ece2ca; border: 3px solid var(--outline);
  overflow: hidden; margin-bottom: 14px;
}
.milk-zone { position: absolute; top: 0; bottom: 0; }
.milk-zone.green { left: 36%; width: 28%; background: #a5d477; }
.milk-zone.gold { left: 46.5%; width: 7%; background: linear-gradient(180deg, #ffd35e, #eda822); }
.milk-marker {
  position: absolute; top: -3px; bottom: -3px; width: 10px; margin-left: -5px;
  background: #fff; border: 2px solid var(--outline); border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
}
.milk-marker.hit { background: #3d9c3d; box-shadow: 0 0 12px 3px rgba(120, 220, 90, 0.8); }
.milk-marker.miss { background: #c34e33; }
.milking-btn { font-size: 1.05rem; }

/* ============ TOASTS & FLOATERS ============ */
#toasts { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.toast {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* sits just above the toolbar; stacked siblings step up via --stack (set in HUD.toast) */
  bottom: calc(var(--toast-base, 110px) + var(--stack, 0) * var(--toast-gap, 46px));
  pointer-events: none;   /* a message must NEVER eat the tap underneath it */
  background: linear-gradient(180deg, #8e9aab, #6b7789);
  border: 3px solid var(--outline); border-radius: 999px;
  color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  padding: 9px 22px; font-weight: 900;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 var(--outline), 0 8px 14px rgba(60, 35, 10, 0.3);
  animation: toastPop 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  white-space: nowrap;
}
.toast.good { background: linear-gradient(180deg, #90d558, #5fae2c); }
.toast.bad { background: linear-gradient(180deg, #f07b6b, #cf3d30); }
/* pop in, hold, fade out IN PLACE — no upward drift into the middle of the screen */
@keyframes toastPop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
  10% { opacity: 1; transform: translateX(-50%) scale(1.03); }
  16% { transform: translateX(-50%) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; }
}
.floater {
  position: absolute; pointer-events: none; font-weight: 900; font-size: 1.1rem;
  text-shadow:
    -2px -2px 0 var(--outline), 2px -2px 0 var(--outline),
    -2px 2px 0 var(--outline), 2px 2px 0 var(--outline),
    0 3px 5px rgba(0, 0, 0, 0.35);
  animation: floatUp 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  white-space: nowrap;
  z-index: 41;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  30% { transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(0.9); }
}
.floater.coin { color: #ffd35e; }
.floater.xp { color: #9fd6ff; }
.floater.bad { color: #ff8a70; }

/* ============ LEVEL UP — celebration popup (starry panel + confetti + NEW! cards) ============ */
.levelup-overlay { z-index: 46; background: rgba(16, 10, 34, 0.55); }
.lvl-panel {
  position: relative; width: min(400px, 94vw); max-height: 92vh; overflow: hidden;
  border-radius: 24px; padding: 26px 16px 20px; text-align: center;
  background:
    radial-gradient(circle 1.5px at 12% 26%, rgba(255,255,255,0.8) 99%, transparent),
    radial-gradient(circle 1px at 84% 18%, rgba(255,255,255,0.7) 99%, transparent),
    radial-gradient(circle 1.5px at 68% 40%, rgba(255,255,255,0.55) 99%, transparent),
    radial-gradient(circle 1px at 24% 54%, rgba(255,255,255,0.5) 99%, transparent),
    radial-gradient(circle 1.5px at 90% 62%, rgba(255,255,255,0.45) 99%, transparent),
    radial-gradient(circle 1px at 8% 78%, rgba(255,255,255,0.4) 99%, transparent),
    radial-gradient(120% 95% at 50% 0%, #33477f 0%, #1d2a55 55%, #141c3e 100%);
  border: 5px solid var(--outline);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.16), var(--shadow);
  animation: panelPop 0.3s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.lvl-rays {
  position: absolute; left: 50%; top: 92px; width: 340px; height: 340px;
  transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 4deg, rgba(255, 220, 110, 0.3) 0 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%);
  mask: radial-gradient(circle, #000 12%, transparent 62%);
  animation: sunSpin 16s linear infinite;
}
.lvl-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lvl-confetti i {
  position: absolute; top: -14px; left: var(--x); width: 7px; height: 11px;
  background: var(--c); border-radius: 2px;
  animation: confFall var(--d) linear var(--dl) infinite;
}
@keyframes confFall {
  0% { transform: translateY(-12px) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(560px) rotate(560deg); opacity: 0.3; }
}
.lvp-star {   /* NOT .lvl-star — that's the HUD level badge */
  position: relative; font-size: 4.4rem; line-height: 1;
  filter: drop-shadow(0 0 16px rgba(255, 214, 90, 0.85)) drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
  animation: lvlStarIn 0.55s cubic-bezier(0.34, 1.6, 0.64, 1) backwards;
}
@keyframes lvlStarIn {
  0% { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.lvl-ribbon {
  position: relative; display: inline-block; margin-top: 2px; padding: 9px 32px;
  background: linear-gradient(180deg, #ffd257, #f0a92c);
  border: 3px solid var(--outline); border-radius: 12px; transform: rotate(-2deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.55);
  animation: lvlStarIn 0.5s 0.12s cubic-bezier(0.34, 1.6, 0.64, 1) backwards;
}
.lvl-ribbon::before, .lvl-ribbon::after {
  content: ""; position: absolute; top: 9px; width: 26px; height: 74%;
  background: #c98a1c; border: 3px solid var(--outline); z-index: -1;
}
.lvl-ribbon::before { left: -22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }
.lvl-ribbon::after { right: -22px; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }
.lvl-ribbon span {
  font-size: 1.65rem; font-weight: 900; color: #fff; letter-spacing: 1px;
  -webkit-text-stroke: 1.5px #8a5a12;
  text-shadow: 0 2px 0 #b97f18;
}
.lvl-cards {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 18px 2px 2px; max-height: 236px; overflow-y: auto; padding: 2px;
}
.lvl-card {
  position: relative; width: 98px; padding: 12px 6px 8px; overflow: hidden;
  background: linear-gradient(180deg, #fbf3dd, #efe0ba);
  border: 3px solid var(--outline); border-radius: 13px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 3px 0 var(--outline);
  animation: lvlStarIn 0.4s backwards;
}
.lvl-card:nth-child(1) { animation-delay: 0.22s; }
.lvl-card:nth-child(2) { animation-delay: 0.32s; }
.lvl-card:nth-child(3) { animation-delay: 0.42s; }
.lvl-card:nth-child(n+4) { animation-delay: 0.52s; }
.lvl-card-art { display: flex; align-items: center; justify-content: center; min-height: 46px; font-size: 2.1rem; line-height: 1; }
.lvl-card-art img { width: 44px; height: 44px; object-fit: contain; }
.lvl-card b { display: block; margin-top: 5px; font-size: 0.72rem; font-weight: 900; color: #5d4016; line-height: 1.15; }
.lvl-card em { display: block; margin-top: 2px; font-size: 0.6rem; font-weight: 800; font-style: normal; color: #a3814a; letter-spacing: 0.5px; text-transform: uppercase; }
.lvl-new {
  position: absolute; top: 9px; right: -25px; transform: rotate(38deg);
  padding: 2px 26px; font-size: 0.58rem; font-weight: 900; font-style: normal;
  letter-spacing: 1px; color: #fff;
  background: linear-gradient(180deg, #ff6a5e, #d92f23);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.lvl-continue { margin-top: 16px; min-width: 180px; font-size: 1.05rem; }
/* short screens (phone landscape): compact celebration so star, cards AND the CONTINUE
   button all fit — the panel clips overflow (confetti), so it must never exceed the viewport */
@media (max-height: 560px) {
  .lvl-panel { padding: 12px 12px 12px; max-height: 96vh; }
  .lvp-star { font-size: 2.5rem; }
  .lvl-ribbon { padding: 5px 22px; }
  .lvl-ribbon span { font-size: 1.15rem; }
  .lvl-rays { top: 54px; width: 220px; height: 220px; }
  .lvl-cards { margin: 8px 2px 2px; gap: 7px; max-height: 27vh; }
  .lvl-card { width: 84px; padding: 8px 5px 6px; }
  .lvl-card-art { min-height: 34px; font-size: 1.6rem; }
  .lvl-card-art img { width: 32px; height: 32px; }
  .lvl-continue { margin-top: 8px; min-width: 150px; font-size: 0.92rem; padding: 0.45rem 1.2rem; }
}

/* ============ ZOOM BUTTONS — bottom-left, EVERY device ============ */
/* Were touch-only on the assumption that a mouse has the wheel. Plenty of desktop players
   never think to scroll on a canvas, and trackpad wheel events are erratic, so the buttons
   are now the visible, discoverable control on both. Bottom-left is the one free corner:
   the avatar + gift stack sits top-left, the tool bar is bottom-centre, the side rail is
   right. */
.zoom-ctrl {
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 7px; z-index: 12;
}
.zc-btn {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(180deg, #fffdf6, #efe4c8);
  border: 3px solid var(--outline); color: var(--ink);
  font-size: 1.5rem; font-weight: 900; line-height: 1;
  box-shadow: var(--pill-shadow); cursor: pointer;
}
.zc-btn:active { transform: translateY(2px); box-shadow: var(--pill-shadow-down); }
.zc-btn:hover { background: linear-gradient(180deg, #fff, #f6eeda); }
.zc-btn:focus-visible { outline: 3px solid var(--accent, #ffb43d); outline-offset: 2px; }
/* The tool bar is a fixed ~581px wide and centred, so once the viewport drops below ~765px its
   left end reaches the corner and the buttons would sit ON it (measured: on a 414×830 phone the
   bar spans the full width and overlaps them by 55px). Lift clear of it — 78px clears the 69px
   bar with a margin. Above that width the bar never reaches this corner and 14px is right. */
@media (max-width: 765px) {
  .zoom-ctrl { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* tile tooltip */
.tile-tip {
  position: fixed; pointer-events: none; z-index: 25;
  background: rgba(35, 22, 8, 0.9); color: var(--cream);
  border-radius: 12px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700;
  transform: translate(-50%, -130%);
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, 0.18);
}
.tile-tip .tip-sub { color: #cbb27f; font-size: 0.72rem; font-weight: 600; }

/* rewarded-video auto-farm offer + live countdown (bottom-right) */
/* one bottom-right column: whatever is visible (offer cards / countdown banners) stacks cleanly */
.boost-offers-col {
  position: absolute; right: 14px; bottom: 16px; z-index: 14;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.auto-farm-wrap, .speed-boost-wrap { position: static; }
/* square boost card — mirrors the Gem Shop's Auto-Farm / Speed Boost cards
   (.bundle-card.boost-card: same frame, violet gradient, same boost_*.png art) */
.boost-offer-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 122px; padding: 9px 6px 8px; text-align: center;
  background: linear-gradient(180deg, #f4edff, #e0d2f6);
  border: 3px solid var(--outline); border-radius: 18px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 var(--outline), 0 6px 8px rgba(60, 35, 10, 0.18);
  animation: afPop 0.4s cubic-bezier(0.34, 1.45, 0.64, 1), afPulse 2.2s ease-in-out 0.5s infinite;
}
@keyframes afPop { from { transform: translateY(24px) scale(0.8); opacity: 0; } }
@keyframes afPulse {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 var(--outline), 0 0 0 3px rgba(242, 182, 50, 0.2); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 0 var(--outline), 0 0 0 7px rgba(242, 182, 50, 0.5); }
}
.boost-offer-card:hover { filter: brightness(1.06); transform: translateY(-2px); }
.boost-offer-card .bo-name {
  font-weight: 900; font-size: 0.72rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: #5d3d8f;
}
.boost-offer-card .bo-art { width: 64px; height: 64px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); }
.boost-offer-card .bo-art.bo-emoji {
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; line-height: 1;
}
.boost-offer-card .bo-sub { font-weight: 800; font-size: 0.62rem; color: var(--ink-soft); }
.boost-offer-card .bo-watch {
  margin-top: 2px; padding: 4px 12px; border-radius: 12px;
  border: 2.5px solid var(--outline);
  background: linear-gradient(180deg, #b98ce6, #8a5cc4);   /* same as the shop's 📺 WATCH pill */
  color: #fff; font-weight: 900; font-size: 0.74rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 2px 0 var(--outline);
}
.boost-offer-card .af-x {
  position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%;
  background: #40454e; border: 2px solid #fff; color: #fff; font-size: 0.68rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.auto-farm-banner {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #90d558, #5fae2c);
  border: 3px solid var(--outline); border-radius: 16px;
  padding: 8px 14px; color: #fff; font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 0 var(--outline), var(--shadow);
}
.auto-farm-banner .af-time {
  background: rgba(0, 0, 0, 0.28); border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: 0.02em;
}

/* 2×-speed video offer — same square boost card, stacks above the auto-farm one */
.speed-banner {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #4aa3e8, #2f7fc4);
  border: 3px solid var(--outline); border-radius: 16px;
  padding: 8px 14px; color: #fff; font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--outline), var(--shadow);
}
.speed-banner .af-time {
  background: rgba(0, 0, 0, 0.28); border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: 0.02em;
}

/* 🎁 daily gift box — sits in the top-left stats column, right under the character
   portrait; pops in once per real-world day */
.gift-box {
  position: relative; align-self: flex-start;
  margin: 2px 0 0 -2px; width: 66px; height: 66px; padding: 0;
  border: none; background: none; cursor: pointer;
  filter: drop-shadow(0 4px 5px rgba(40, 24, 8, 0.35));
  animation: giftPop 0.5s cubic-bezier(0.34, 1.55, 0.64, 1), giftWiggle 3.4s ease-in-out 1.2s infinite;
}
.gift-box img { width: 100%; height: 100%; object-fit: contain; }
.gift-box .gift-emoji { font-size: 48px; line-height: 66px; }
.gift-box:hover { filter: drop-shadow(0 4px 5px rgba(40, 24, 8, 0.35)) brightness(1.08); }
.gift-box .gift-ping {
  position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: #e8563f; border: 2px solid #fff; color: #fff;
  font-size: 0.74rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  animation: giftPing 1.6s ease-in-out infinite;
}
@keyframes giftPop { from { transform: scale(0) rotate(-24deg); opacity: 0; } }
@keyframes giftWiggle {
  0%, 100% { transform: rotate(0); }
  4% { transform: rotate(-9deg) scale(1.04); }
  8% { transform: rotate(8deg) scale(1.04); }
  12% { transform: rotate(-6deg); }
  16% { transform: rotate(0); }
}
@keyframes giftPing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
/* recharging: the box STAYS in place — grayed + still, a live countdown chip on it.
   Dropping the cooldown class restarts giftPop, a nice "it's back!" moment. */
.gift-box.cooldown { animation: none; }
.gift-box.cooldown img, .gift-box.cooldown .gift-emoji { filter: grayscale(0.8) brightness(0.85); }
.gift-box.cooldown:hover { filter: drop-shadow(0 4px 5px rgba(40, 24, 8, 0.35)); }
.gift-box .gift-timer {
  position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  background: rgba(40, 24, 8, 0.85); color: #ffd76a;
  border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 999px;
  padding: 1px 7px; font-size: 0.62rem; font-weight: 900;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}

/* 🎁 gift claim popup (extends .land-buy-card / .land-buy-overlay) — styled after the
   docs mockup: red ribbon banner, big gift art, round parchment reward medallions */
.gift-card { padding-top: 34px; }
.gift-ribbon {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 9px 28px; white-space: nowrap;
  background: linear-gradient(180deg, #ea6045, #cd3d2b);
  border: 3px solid var(--outline); border-radius: 10px;
  color: #fff; font-weight: 900; font-size: 0.95rem; letter-spacing: 3px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--outline);
}
/* folded ribbon tails poking out behind each end */
.gift-ribbon::before, .gift-ribbon::after {
  content: ""; position: absolute; top: 9px; z-index: -1;
  border: 15px solid #a92f1f;
}
.gift-ribbon::before { left: -22px; border-left-color: transparent; }
.gift-ribbon::after { right: -22px; border-right-color: transparent; }
.gift-card .gift-art-wrap { margin: 2px 0 0; }
.gift-card .gift-art {
  width: 118px; height: 118px; object-fit: contain;
  filter: drop-shadow(0 6px 5px rgba(90, 55, 15, 0.35));
  animation: giftWiggle 2.8s ease-in-out 0.4s infinite;
}
.gift-card .gift-art.art-emoji { font-size: 80px; line-height: 118px; display: inline-block; }
.gift-rewards { display: flex; gap: 22px; justify-content: center; margin: 12px 0 8px; }
.gift-medal {
  position: relative; width: 94px; height: 94px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #f9efd4, #e7d3a4);
  border: 3px solid #b8935a;
  box-shadow:
    inset 0 0 0 4px #f4e7c6,
    inset 0 0 0 6px #d9b661,
    inset 0 3px 7px rgba(120, 84, 30, 0.28),
    0 2px 0 rgba(150, 106, 38, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.gift-medal .gm-ico { font-size: 46px; line-height: 1; }
.gift-medal img.gm-ico { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(90, 55, 15, 0.3)); }
.gift-medal .gm-count {
  position: absolute; bottom: -7px; right: -7px; min-width: 34px; height: 34px;
  padding: 0 4px; border-radius: 999px;
  background: linear-gradient(180deg, #fffdf4, #efe3c2);
  border: 3px solid #b8935a; color: #5d4016;
  font-weight: 900; font-size: 0.88rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(150, 106, 38, 0.4);
}
.gift-card .gift-claim { width: 92%; margin-top: 14px; font-size: 1.1rem; padding: 12px 10px; }
/* Sell-tab usable tile: emoji stand-in while an item's PNG art is missing */
.use-tile .use-emoji { font-size: 36px; line-height: 46px; text-align: center; }

/* short screens (phone landscape): any parchment popup taller than the viewport must
   scroll instead of clipping both ends — flex-start + margin:auto keeps small cards
   centered while tall ones get reachable edges. Top padding leaves the gift ribbon room. */
@media (max-height: 700px) {
  .land-buy-overlay { align-items: flex-start; overflow-y: auto; padding: 30px 10px; }
  .land-buy-card { margin: auto; }
}
/* compact gift card so it fits a ~390px-tall phone-landscape viewport WITHOUT scrolling */
@media (max-height: 560px) {
  .gift-card { padding-top: 22px; padding-bottom: 12px; }
  .gift-ribbon { top: -15px; padding: 5px 18px; font-size: 0.8rem; letter-spacing: 2px; }
  .gift-ribbon::before, .gift-ribbon::after { top: 7px; border-width: 11px; }
  .gift-ribbon::before { left: -16px; }
  .gift-ribbon::after { right: -16px; }
  .gift-card .gift-art { width: 72px; height: 72px; }
  .gift-card .gift-art.art-emoji { font-size: 50px; line-height: 72px; }
  .gift-card .lb-title { font-size: 1rem; margin-top: 2px; }
  .gift-rewards { gap: 16px; margin: 8px 0 4px; }
  .gift-medal { width: 64px; height: 64px; border-width: 2.5px; box-shadow: inset 0 0 0 3px #f4e7c6, inset 0 0 0 4.5px #d9b661, inset 0 2px 5px rgba(120, 84, 30, 0.28), 0 2px 0 rgba(150, 106, 38, 0.4); }
  .gift-medal .gm-ico { font-size: 30px; }
  .gift-medal img.gm-ico { width: 40px; height: 40px; }
  .gift-medal .gm-count { min-width: 26px; height: 26px; font-size: 0.72rem; border-width: 2.5px; bottom: -5px; right: -5px; }
  .gift-card .gift-claim { margin-top: 8px; font-size: 0.95rem; padding: 8px 10px; }
  .gift-card .lb-note { font-size: 0.62rem; line-height: 1.35; }
}

/* mobile */
@media (max-width: 760px) {
  :root { font-size: 14px; }
  .logo-big { font-size: 3rem; }
  .menu-card { padding: 1.6rem 1.8rem; }
  .toolbar { bottom: 8px; gap: 6px; padding: 7px 10px 6px; border-width: 3px; border-radius: 20px; }
  .tool-btn { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 13px; border-width: 2.5px; }
  .tool-btn img { width: 24px; height: 24px; }
  .tool-btn small { font-size: 0.48rem; }
  .side-btn { width: 58px; height: 62px; }
  .side-btn .sb-ico { width: 44px; height: 44px; font-size: 1.5rem; }
  .side-btn small { font-size: 0.54rem; }
  #sb-workers .sb-ico { width: 56px; height: 56px; }
  .hud-stats { min-width: 0; width: 172px; left: 16px; gap: 7px; }
  .stat-chip { min-width: 150px; padding: 4px 6px 4px 26px; }
  .chip-ico { font-size: 1.6rem; left: -11px; }
  .chip-ico img { width: 30px; height: 30px; }
  .stat-val { font-size: 0.98rem; }
  .lvl-star { width: 42px; height: 42px; left: -16px; }
  .lvl-star::before { font-size: 2rem; line-height: 42px; }
  .bar-badge { font-size: 1.4rem; left: -10px; }
  .hud-day { padding: 6px 9px; gap: 6px; font-size: 0.85rem; max-width: 46vw; }
  .hud-day .clock { display: none; }
  /* keep the goal loop visible: quest pill docks UNDER the whole stat stack (5 chips + avatar —
     128px was tuned for the old 3-chip stack and overlapped the Lv bar) */
  .hud-quest {
    top: 310px; left: 12px; transform: none;
    max-width: 62vw; font-size: 0.8rem; padding: 5px 12px;
  }
  .hud-quest:hover { transform: scale(1.02); }
  /* phones: small pill tucked right above the toolbar — never mid-screen, never in the way */
  .toast {
    max-width: 88vw; white-space: normal; text-align: center;
    --toast-base: 64px; --toast-gap: 36px;
    font-size: 0.78rem; padding: 5px 14px; border-width: 2.5px;
  }
  /* popups: shrink the chrome + the cards so a first-timer sees everything (the Well!) without scrolling */
  .panel-overlay { padding: 26px 6px 8px; }
  .panel { width: 96vw; max-height: calc(100vh - 30px); border-width: 4px; border-radius: 22px; }
  .panel-head { margin-top: -20px; padding: 5px 20px; border-width: 3px; }
  .panel-head h2 { font-size: 1rem; }
  .panel-tabs { margin-bottom: 8px; }
  .panel-tab { padding: 6px 11px; font-size: 0.78rem; }
  .panel-body { padding: 8px 10px; }
  .panel-foot { padding: 7px 12px; }
  .panel-badge { width: 50px; height: 50px; font-size: 1.7rem; top: -22px; left: -10px; }
  .panel-badge img { width: 40px; height: 40px; }
  .panel-close { width: 40px; height: 40px; top: -14px; right: -10px; font-size: 1.1rem; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .shop-item { padding: 8px 7px 7px; border-radius: 14px; }
  .shop-item .icon { font-size: 2rem; }
  .shop-item .name { font-size: 0.82rem; }
  .shop-item .desc { font-size: 0.62rem; min-height: 0; }
  .buy-btn { padding: 4px 9px; font-size: 0.76rem; }
  .market-row { padding: 6px 9px; margin-bottom: 6px; gap: 7px; }
  /* workers panel: compact crew card + rows so the hire cards stay in reach */
  .crew-tier { padding: 7px 10px; margin-bottom: 7px; }
  .crew-tier .crew-title { font-size: 0.88rem; }
  .worker-row { padding: 7px 9px; margin-bottom: 6px; gap: 8px; }
  .worker-face { width: 40px; height: 40px; font-size: 1.35rem; }
  .hire-opts { gap: 4px; }
  .profile-wrap { flex-direction: column; }
  .profile-left { flex: none; }
  .perks-grid { grid-template-columns: repeat(2, 1fr); }
  /* keep the video-offer column clear of the bottom toolbar on small screens —
     and PHONE-sized: the desktop cards read like billboards on a 390px screen */
  .boost-offers-col { bottom: 96px; right: 8px; gap: 6px; }
  .boost-offer-card { width: 84px; padding: 6px 4px; border-radius: 14px; border-width: 2.5px; }
  .boost-offer-card .bo-name { font-size: 0.58rem; letter-spacing: 0.02em; }
  .boost-offer-card .bo-art { width: 38px; height: 38px; }
  .boost-offer-card .bo-art.bo-emoji { font-size: 26px; }
  .boost-offer-card .bo-sub { font-size: 0.5rem; }
  .boost-offer-card .bo-watch { padding: 3px 8px; font-size: 0.6rem; border-radius: 9px; border-width: 2px; }
  .boost-offer-card .af-x { width: 18px; height: 18px; font-size: 0.56rem; top: -7px; right: -7px; }
  /* active-boost countdown banners shrink with them */
  .auto-farm-banner, .speed-banner { padding: 5px 9px; font-size: 0.72rem; gap: 5px; border-width: 2.5px; border-radius: 12px; }
  .auto-farm-banner .af-time, .speed-banner .af-time { padding: 1px 7px; font-size: 0.72rem; }
  /* 🎁 smaller gift box under the avatar */
  .gift-box { width: 54px; height: 54px; }
  .gift-box .gift-emoji { font-size: 38px; line-height: 54px; }
}
/* touch devices: keyboard hints are noise */
@media (hover: none) {
  .tool-btn .keycap { display: none; }
}

/* phone LANDSCAPE (~360-460px tall): the final squeeze so every HUD rail fits with room to play.
   MUST stay after the `max-width: 760px` mobile block — same specificity, cascade order decides. */
@media (max-height: 470px) {
  .side-actions { gap: 1px; right: max(8px, env(safe-area-inset-right)); }
  .side-btn { width: 42px; height: auto; }
  .side-btn .sb-ico { width: 33px; height: 33px; font-size: 1.1rem; }
  #sb-workers .sb-ico { width: 42px; height: 42px; }
  .side-btn .sb-emoji { width: 31px; height: 31px; font-size: 0.95rem; border-width: 2px; }
  .side-btn small { display: none; }   /* the stickers read on their own this small */
  .side-btn .notif { width: 15px; height: 15px; font-size: 0.52rem; top: -2px; }
  .hud-stats { top: 6px; left: max(10px, env(safe-area-inset-left)); gap: 4px; width: 156px; }
  .stat-chip { min-width: 144px; padding: 2px 6px 2px 26px; border-width: 2.5px; }
  .stat-val { font-size: 0.95rem; }
  .chip-ico { font-size: 1.45rem; left: -11px; }
  .chip-ico img { width: 27px; height: 27px; }
  .chip-plus { width: 20px; height: 20px; }
  .lvl-star { width: 34px; height: 34px; left: -13px; }
  .lvl-star::before { font-size: 1.6rem; line-height: 34px; }
  #hv-avatar { width: 42px; height: 42px; }
  .hud-day { transform: scale(0.85); transform-origin: top right; }
  .hud-quest { display: none; }        /* quests stay reachable from the side rail */
  /* popups fill the short screen edge-to-edge; card descriptions go — every build card
     (incl. the Well the tutorial points at) must be reachable without scrolling */
  .panel-overlay { padding: 20px 6px 6px; }
  .panel { max-height: calc(100vh - 24px); }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; }
  .shop-item .desc { display: none; }
  /* toolbar: icon-only, small — it was eating a third of the view height */
  .toolbar { bottom: 6px; gap: 5px; padding: 6px 8px 5px; border-radius: 17px; }
  .tool-btn { width: 40px; height: 40px; font-size: 1.2rem; }
  .tool-btn img { width: 24px; height: 24px; }
  .tool-btn small { display: none; }
  /* Clementine compact, hugging the LEFT edge so she never covers the plots */
  .guide-figure { width: min(280px, 46vw); left: max(8px, env(safe-area-inset-left)); }
  .guide-figure.pos-center,
  .guide-figure.pos-bottom { bottom: 62px; top: auto; transform: none; }
  .guide-figure.pos-top { top: 6px; left: auto; right: 58px; transform: none; }   /* dodge stats (L) + side rail (R) */
  .guide-figure.pos-right { right: 58px; }   /* clear of the icon side rail */
  .guide-portrait { width: 54px; height: 54px; margin-right: -11px; }
  .guide-text { font-size: 0.74rem; line-height: 1.34; }
  .guide-bubble { padding: 7px 9px 7px 15px; border-width: 3px; }
  .guide-name { font-size: 0.8rem; margin-bottom: 1px; }
  /* zoom: horizontal pair on SHORT screens (landscape phones) — stacked would eat the height.
     Portrait phones keep the base vertical stack in the same bottom-left corner.
     `bottom` is deliberately NOT set here: it is already correct from the base rule (wide
     landscape, bar centred and clear) or the max-width:765px rule (narrow, lifted above it),
     and overriding it here would put the buttons back under the bar on small landscape. */
  .zoom-ctrl { flex-direction: row; gap: 6px; left: max(10px, env(safe-area-inset-left)); }
  .zc-btn { width: 38px; height: 38px; font-size: 1.2rem; }
  .toast { --toast-base: 58px; --toast-gap: 32px; font-size: 0.74rem; max-width: 70vw; }
  /* 🎁 gift box shrinks with the 42px avatar above it */
  .gift-box { width: 44px; height: 44px; margin-top: 1px; }
  .gift-box .gift-emoji { font-size: 30px; line-height: 44px; }
  .gift-box .gift-ping { width: 17px; height: 17px; font-size: 0.58rem; }
  /* video-offer cards: tiniest tier for short landscape phones */
  .boost-offers-col { bottom: 52px; gap: 5px; }
  .boost-offer-card { width: 76px; }
  .boost-offer-card .bo-art { width: 32px; height: 32px; }
  .boost-offer-card .bo-art.bo-emoji { font-size: 22px; }
}