/* Harvest Hollow UI foundation: fonts, tokens (visual-ux-juice.md §5.2 verbatim + GDD §8.2), base and the shared
   components (wood, paper, btn, pill, xp, badge, outlined, tip). The ui-shell lane owns this file; panels.css (ui-panels)
   builds on these classes. HUD layout lives in shell.css. */

@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../assets/fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../assets/fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cyrillic (wave 4b: "Мила"): Fredoka and Baloo 2 have none, so the Cyrillic letters come from Nunito (OFL, the same
   rounded friendliness) under both family names. Keep each family's own Latin weight range: a face with other
   descriptors wins the match for its weights and pushes ALL Latin text to the system font. unicode-range: the file
   only loads when a page shows Cyrillic. */
/* Bulgarian (i18n lane A): size-adjust matches Nunito's x-height (0.484) to each Latin face's own (Fredoka 0.500, Baloo 2
   0.460), so a mixed line stays level and Bulgarian text sits as tall as English (docs/agent-briefs/i18n-inventory.md,
   "Fonts"); the digits and punctuation still come from the Latin faces, so numbers look the same in both languages. */
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 103%;
}
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../assets/fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 95%;
}

:root {
  /* type */
  --font-display: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
  --font-ui: 'Fredoka', system-ui, sans-serif;

  /* honey wood */
  --wood-50: #F7D9A0; --wood-100: #EDBE72; --wood-300: #D99A4A;
  --wood-500: #B87533; --wood-700: #8A5224; --wood-900: #5A3215;

  /* parchment */
  --paper-50: #FFFBEE; --paper-100: #FFF4D6; --paper-200: #F8E6B8;
  --paper-300: #EFD49A; --paper-edge: #D9B677;

  /* ink */
  --ink-900: #3E2612; --ink-700: #5C3B1E; --ink-500: #6E4B2B; --ink-inverse: #FFFFFF;   /* ink-500 >= 4.5:1 on paper-200 (QA wave 1 UI-21) */

  /* action colours: 300 highlight, 500 face, 700 body, 900 lip/outline */
  --go-300: #9BE06A;   --go-500: #5DBB3F;   --go-700: #3F8F2A;   --go-900: #2A6A1C;
  --sun-300: #FFE58A;  --sun-500: #FFC83D;  --sun-700: #E39A1E;  --sun-900: #A86A10;
  --sun-ink: #8A560C;   /* amber WORDS on paper and cream: >= 5.5:1 (sun-900 is 4.1-4.4; QA2 UI-06) */
  --stop-300: #FF9B8F; --stop-500: #E8554A; --stop-700: #B83A30; --stop-900: #7E2620;
  --sky-300: #9ED8FF;  --sky-500: #4AA8E8;  --sky-700: #2B78B5;  --sky-900: #1C5283;

  /* currencies and progress */
  --coin: #FFC83D; --coin-shade: #D9931F;
  --xp: #4AA8E8;   --xp-shade: #2B78B5;   --xp-track: #2B4A66;
  --ribbon-gold: #F5C542; --ribbon-red: #E8556E; --ribbon-blue: #4A7FE8;

  /* players (GDD §8.2) */
  --p1: #2BB3A3; --p1-dark: #1F7A70;
  --p2: #FF7A6B; --p2-dark: #C2483C;
  --p3: #FFC83D; --p3-dark: #A86A10;
  --p4: #4AA8E8; --p4-dark: #1C5283;

  /* world tokens the UI echoes (GDD §8.2) */
  --grass-lit: #7CC243; --leaf-mid: #4C9A3E; --sky-horizon: #D6F1FF; --sky-top: #4FA8EE; --barn-red: #C8473A;

  /* shape and depth */
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;
  --drop: 0 6px 14px rgba(62, 38, 18, .28);
  --drop-soft: 0 3px 8px rgba(62, 38, 18, .22);
  --lip: 4px;

  /* motion (60/120/240 BPM grid) */
  --t-micro: 120ms; --t-beat: 250ms; --t-half: 500ms; --t-full: 1000ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);

  --ui-scale: 1;
  --safe: 16px;
  /* notches and home bars (index.html viewport-fit=cover); 0 on a desktop. Only css/mobile.css reads them */
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}

/* UI scale 80-130 % (GDD §7.5): CSS zoom on the UI layers scales px and rem alike (one rule for every module and for
   the panels); positions measured with getBoundingClientRect stay in screen px. */
html { font-size: 16px; }
#hud, #panels, #celebrate, .modal-layer { zoom: var(--ui-scale); }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--sky-horizon);
  font: 500 1rem/1.3 var(--font-ui); color: var(--ink-900);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#overlay { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
button, input, select, textarea { font-family: inherit; }
/* keyboard focus: a dark sky ring (>= 3:1 on paper, wood and grass) with a white halo inside it (QA wave 1 UI-20) */
:focus-visible { outline: 3px solid var(--sky-900); outline-offset: 2px; }
#hud button:focus-visible, #hud [role="button"]:focus-visible, .hh-panel button:not(.btn):focus-visible,
.hh-panel [role="tab"]:focus-visible, .modal-layer button:not(.btn):focus-visible { box-shadow: 0 0 0 8px #fff; }
img.ic { display: inline-block; vertical-align: middle; object-fit: contain; flex: none; }
svg.glyph { display: block; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ---- outlined display text (multi-shadow beats -webkit-text-stroke for thick outlines) ---------------------- */
.outlined {
  --o: var(--wood-900);
  color: #fff;
  text-shadow:
    -2px -2px 0 var(--o), 0 -2px 0 var(--o), 2px -2px 0 var(--o),
    -2px 0 0 var(--o), 2px 0 0 var(--o),
    -2px 2px 0 var(--o), 0 2px 0 var(--o), 2px 2px 0 var(--o),
    0 4px 0 var(--o);
}
.outlined-thin {
  --o: var(--wood-900);
  color: #fff;
  text-shadow: -1.5px -1.5px 0 var(--o), 1.5px -1.5px 0 var(--o), -1.5px 1.5px 0 var(--o), 1.5px 1.5px 0 var(--o),
    0 2.5px 0 var(--o);
}

/* ---- honey-wood frame (planks + grain + bevel + nail heads) ---------------------------------------------- */
.wood {
  position: relative;
  border-radius: var(--r-l);
  background:
    repeating-linear-gradient(180deg, transparent 0 44px, rgba(90, 50, 21, .28) 44px 46px),
    repeating-linear-gradient(90deg, rgba(90, 50, 21, .08) 0 2px, transparent 2px 19px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 37px),
    linear-gradient(180deg, var(--wood-100), var(--wood-300) 55%, var(--wood-500));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -3px 0 rgba(90, 50, 21, .35),
    0 0 0 2.5px var(--wood-900),
    var(--drop);
}
.wood.nails::after {
  content: ''; position: absolute; inset: 7px; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at 4px 4px, #6B4A2A 0 2.6px, rgba(255, 255, 255, .35) 2.7px 3.2px, transparent 3.4px) top left / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #6B4A2A 0 2.6px, rgba(255, 255, 255, .35) 2.7px 3.2px, transparent 3.4px) top right / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #6B4A2A 0 2.6px, rgba(255, 255, 255, .35) 2.7px 3.2px, transparent 3.4px) bottom left / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #6B4A2A 0 2.6px, rgba(255, 255, 255, .35) 2.7px 3.2px, transparent 3.4px) bottom right / 9px 9px no-repeat;
}

/* ---- parchment card (radial warmth + inset edge + fibre noise at 10 %) ------------------------------------ */
.paper {
  position: relative;
  color: var(--ink-900);
  border-radius: var(--r-m);
  /* the art lane's parchment tile (1024 px at 512 CSS px) under the warm edge tint */
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(239, 212, 154, .55) 85%, var(--paper-300) 100%),
    url('../assets/art/parchment.webp') 0 0 / 512px 512px repeat,
    var(--paper-100);
  box-shadow: inset 0 0 0 2px var(--paper-edge), inset 0 0 24px rgba(160, 110, 40, .22);
}
.paper::before {
  content: none; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: .10; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .30 0 0 0 0 .12 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.paper > * { position: relative; }

/* ---- 3D pill button with a lip (white labels outlined in the 900 shade: WCAG AA) --------------------------- */
.btn {
  --top: var(--go-300); --face: var(--go-500); --body: var(--go-700); --lipc: var(--go-900);
  --o: var(--go-900);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 1.125rem/1 var(--font-ui);
  color: #fff;
  padding: 10px 22px 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--top) 0%, var(--face) 42%, var(--body) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(0, 0, 0, .12),
    0 var(--lip) 0 var(--lipc),
    0 calc(var(--lip) + 3px) 8px rgba(0, 0, 0, .25);
  text-shadow: -1.5px -1.5px 0 var(--o), 1.5px -1.5px 0 var(--o), -1.5px 1.5px 0 var(--o),
               1.5px 1.5px 0 var(--o), 0 2.5px 0 var(--o);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out), filter var(--t-micro);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.05); }
.btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 1px 0 var(--lipc), 0 2px 4px rgba(0, 0, 0, .25);
}
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--sky-700), 0 var(--lip) 0 var(--lipc); }
.btn:disabled, .btn[aria-disabled="true"] { filter: grayscale(.85) brightness(.95); cursor: not-allowed; transform: none; }
.btn--sun  { --top: var(--sun-300);  --face: var(--sun-500);  --body: var(--sun-700);  --lipc: var(--sun-900);
             color: var(--ink-900); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.btn--stop { --top: var(--stop-300); --face: var(--stop-500); --body: var(--stop-700); --lipc: var(--stop-900); --o: var(--stop-900); }
.btn--sky  { --top: var(--sky-300);  --face: var(--sky-500);  --body: var(--sky-700);  --lipc: var(--sky-900);  --o: var(--sky-900); }
.btn--wood { --top: var(--wood-50);  --face: var(--wood-100); --body: var(--wood-300); --lipc: var(--wood-700);
             color: var(--ink-900); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.btn--paper { --top: var(--paper-50); --face: var(--paper-100); --body: var(--paper-300); --lipc: var(--paper-edge);
              color: var(--ink-900); text-shadow: none; }
.btn--small { font-size: .9375rem; padding: 7px 14px 9px; --lip: 3px; }
.btn--round { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; }
.btn--round.btn--small { width: 38px; height: 38px; }

/* ---- HUD currency pill: big icon overlaps the left end; .more = small go-button ---------------------------- */
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 40px; min-width: 118px; padding: 0 6px 0 50px;
  border: 0; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--paper-50), var(--paper-200));
  box-shadow: inset 0 0 0 2px var(--paper-edge), 0 3px 0 rgba(62, 38, 18, .35), 0 6px 12px rgba(62, 38, 18, .18);
  font: 700 1.25rem/1 var(--font-ui); color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.pill > .icon { position: absolute; left: -10px; top: 50%; width: 54px; height: 54px; transform: translateY(-50%);
                filter: drop-shadow(0 2px 0 rgba(62, 38, 18, .4)); pointer-events: none; }
.pill > .more { margin-left: auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
                font: 800 1.25rem/1 var(--font-display); color: #fff;
                background: linear-gradient(180deg, var(--go-500), var(--go-700) 45%, var(--go-900));
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--go-900);
                text-shadow: 0 1.5px 0 var(--go-900); }
.pill.bump { animation: bump var(--t-beat) var(--ease-back); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---- XP bar --------------------------------------------------------------------------------------------- */
.xp { position: relative; width: 200px; height: 22px; border-radius: var(--r-pill); overflow: hidden;
      background: var(--xp-track); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4), 0 0 0 2px var(--paper-edge); }
.xp > .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0));
              background: linear-gradient(180deg, #8FD3FF, var(--xp) 60%, var(--xp-shade));
              transition: transform 600ms var(--ease-out); }
.xp > .fill::after { content: ''; position: absolute; inset: 3px 6px auto; height: 5px; border-radius: 9px;
                     background: rgba(255, 255, 255, .45); }

/* ---- counter badge -------------------------------------------------------------------------------------- */
.badge { display: inline-block; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); text-align: center;
         background: var(--stop-700); color: #fff; font: 700 .875rem/22px var(--font-ui);
         box-shadow: 0 0 0 2px #fff, 0 2px 0 var(--stop-900); }
.badge--new { background: var(--sky-700); box-shadow: 0 0 0 2px #fff, 0 2px 0 var(--sky-900); }
.badge--gold { background: var(--sun-500); color: var(--ink-900); box-shadow: 0 0 0 2px #fff, 0 2px 0 var(--sun-900); }
/* a calm badge (QA2 UI-03): something can be done there, nothing is urgent. Red stays for "look now" (a partner waits,
   the Barn spills, the week closes within a day); ink on cream is 12:1 */
.badge--calm { min-width: 20px; height: 20px; padding: 0 5px; font: 800 .8125rem/20px var(--font-ui); color: var(--ink-900);
  background: #FFF3C4; box-shadow: 0 0 0 2px var(--wood-700), 0 2px 0 var(--wood-900); }

/* ---- a farmer's mark (dom.js playerMark): initial in a ringed badge; farmer 2 is a rounded square (UI-05) ------ */
.pmark { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; vertical-align: -3px;
  background: #fff; color: var(--ink-900); font: 800 .8125rem/1 var(--font-display); box-shadow: 0 0 0 2.5px var(--pc, var(--wood-500)); }
.pmark[data-slot="p2"] { border-radius: 4px; }

/* ---- tooltip bubble with tail --------------------------------------------------------------------------- */
.tip { position: fixed; left: 0; top: 0; z-index: 200; max-width: 280px; padding: 8px 12px; border-radius: var(--r-m);
       background: var(--paper-50); color: var(--ink-900); font: 600 .9375rem/1.25 var(--font-ui);
       box-shadow: 0 0 0 2px var(--paper-edge), var(--drop); pointer-events: none;
       transform-origin: 50% 100%; animation: tip-in var(--t-micro) var(--ease-out); }
.tip::after { content: ''; position: absolute; left: var(--tail-x, 50%); bottom: -7px; width: 14px; height: 14px;
              transform: translateX(-50%) rotate(45deg); background: inherit; box-shadow: 2px 2px 0 var(--paper-edge); }
.tip.below::after { bottom: auto; top: -7px; box-shadow: -2px -2px 0 var(--paper-edge); }
/* a touch player's long-press card with a button (hud.js createTips: "Pull it up"; never on a mouse) takes the finger */
.tip.has-act { pointer-events: auto; }
.tip .tip-act { display: block; width: 100%; min-height: 44px; margin-top: 10px; }
/* a growing crop's "Finish now" (ui/hud.js finishRow; live requests 2026-10-04): an Acorn button, the field-level one
   under it, each with its reason when it cannot go; a mouse that only hovers reads the hint line instead */
.tip.has-act { max-width: 300px; }
.tip.pinned { box-shadow: 0 0 0 2px var(--sun-700), var(--drop); }
.tip .tip-finish { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tip .tip-finish .btn { width: 100%; min-height: 40px; white-space: normal; line-height: 1.15; text-align: center; gap: 5px; }
.tip .tip-finish .btn .glyph { flex: none; }
.tip .tip-finish-all { flex-direction: column; gap: 1px; font-size: .875rem; padding: 6px 10px 8px; }
.tip .tip-finish-sub { display: inline-flex; align-items: center; gap: 4px; font: 700 .8125rem/1 var(--font-ui); color: var(--ink-700); }
.tip .tip-finish-all[hidden] { display: none; }
.tip .tip-why { margin: -2px 0 2px; font: 600 .8125rem/1.2 var(--font-ui); color: var(--stop-900); text-align: center; }
.tip .tip-finish-hint { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--sun-ink); font-weight: 700; }
/* wave 4 (wish 2): "Spread Fertilizer" under Finish now */
.tip .tip-fert { margin-top: 6px; }
.tip .tip-fert-text { display: grid; justify-items: center; gap: 1px; }
/* `scale`, not `transform`: the bubble is placed by an inline translate3d, which a transform keyframe would override
   (it flew in from the top-left corner, and a finger aiming at a card's button could miss it) */
@keyframes tip-in { from { opacity: 0; scale: .95; } }

.empty-note { color: var(--ink-500); font-style: italic; margin: 0; }

/* The device's reduced-motion setting holds only until settings.js has applied the player's own choice (body.motion-set):
   from then on body.motion-reduced says it. "Like this device" mirrors the device into that class; a "Full" pick plays
   every animation (QA r2 S-15, ap#3: under the device's setting "Full" reached the 3D view and nothing else) */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-set) *, body:not(.motion-set) *::before, body:not(.motion-set) *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
/* In-game "reduce motion" / "still" toggles (settings) and "Like this device" under the device's setting. */
body.motion-reduced *, body.motion-reduced *::before, body.motion-reduced *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
}

/* ---- language (i18n lane A) ----------------------------------------------------------------------------------------
   "English · Български": the loading screen, the farmer picker, the farm gate and the landing page (ui/lang-toggle.js;
   index.html has the loading screen's copy). Each language in its own words, never a flag. */
.lang-pick { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  background: rgba(255, 248, 230, .92); box-shadow: inset 0 0 0 2px var(--paper-edge), 0 3px 0 rgba(62, 38, 18, .25); }
.lang-pick .lang-opt { border: 0; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill); background: none; cursor: pointer;
  font: 700 1rem/1.1 var(--font-ui); color: var(--ink-700); }
.lang-pick .lang-opt[aria-pressed="true"] { color: var(--ink-900); background: #fff; box-shadow: 0 2px 0 var(--paper-edge), inset 0 0 0 2px var(--sun-700); }
.lang-pick .lang-opt:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 1px; }
.lang-pick .lang-dot { color: var(--ink-500); font-weight: 700; padding: 0 2px; }
@media (pointer: coarse) { .lang-pick .lang-opt { min-height: 44px; padding: 8px 16px; } }
/* the farmer picker and the farm gate: the toggle sits at the top of the paper card */
.slot-paper > .lang-pick { margin: 0 auto 12px; }
/* the landing page waits (a second at most, landing.html) for its Bulgarian words instead of flashing English */
html.i18n-wait body { visibility: hidden; }


/* wave 5: a pet's world card (its face, where it is) and its "Stay home" / "Come with me" */
.wtip-pet .t { gap: 10px; }
.tip-pet-face { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #F3E2BE; overflow: hidden; }
.tip-pet-face svg, .tip-pet-face img { width: 34px; height: 34px; }