/* Promised Lands SKIN, part 5: the OLD Bible World styles that the native review and learn screens (src/vendor/land) rely on, as a SCOPED verbatim extract (made by tools/vendor-css.mjs; never edit by hand).
   Everything here is under the .vh scope class so it cannot touch the city HUD. Owner: verses helper (WP-9V).
   source: Prototypes/bible-land/styles.css sha256 160ae80377dd, read against 272 vendored files; the scope is :where(.vh) so every rule weighs what it weighed in the old page (see the tool). */
/* the old :root tokens the screens read, and what the old body gave them */
:where(.vh) {
  --ink: #4a2712;
  --ink-2: #6b3b1c;
  --cream-2: #ffe7a6;
  --green: #59d13a;
  --green-d: #24851a;
  --green-l: #b2f77a;
  --orange: #ffa02e;
  --orange-d: #bf5a08;
  --orange-l: #ffd684;
  --blue: #3db4ff;
  --blue-d: #1670c4;
  --blue-l: #a5e0ff;
  --grey: #c9ccd6;
  --grey-d: #7a7f90;
  --grey-l: #eceef3;
  --gold: #ffd23f;
  --font: "Arial Rounded MT Bold", ui-rounded, "SF Pro Rounded", "Baloo 2", "Nunito", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --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);
  --bar-h: 96px;
  font-family: var(--font);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* HOST LINES (written in tools/vendor-css.mjs, not copied): the old body gave its screens the browser's own size and line height, and the old page had none of the city's page-wide resets.
   The city sets 16px/1.3 on body, margin and padding 0 on everything, borderless transparent buttons and block svg: inside the scope all of that is rolled back to the browser's defaults. */
:where(.vh) { font-size: 16px; line-height: normal; font-weight: 400; text-align: start; }
:where(.vh) * { margin: revert; padding: revert; }
:where(.vh) button { font: revert; color: revert; border: revert; background: revert; cursor: revert; }
:where(.vh) svg { display: revert; }
/* the old rules (verbatim bodies) */
:where(.vh) * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:where(.vh) img { -webkit-user-drag: none; pointer-events: none; }
:where(.vh) [hidden] { display: none !important; }
:where(.vh) button { font-family: inherit; }
:where(.vh) .btn span { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
:where(.vh) .btn {
  --c1: var(--green-l); --c2: var(--green); --c3: #3fb126; --dark: var(--green-d);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 56px; min-height: 56px; padding: 8px 14px; margin: 0; border: 3px solid var(--ink); border-radius: 22px; cursor: pointer;
  font: 900 19px/1 var(--font); letter-spacing: 0.5px; color: #fff; text-align: center; touch-action: manipulation;
  background: linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%);
  box-shadow: 0 6px 0 var(--dark), 0 6px 0 3px var(--ink), 0 12px 16px rgba(58, 22, 8, 0.32), inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s;
}
:where(.vh) .btn::before { content: ""; position: absolute; left: 8%; right: 8%; top: 4px; height: 38%; border-radius: 16px 16px 40% 40%; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)); pointer-events: none; }
:where(.vh) .btn:active, :where(.vh) .btn.pressed { transform: translateY(5px); box-shadow: 0 1px 0 var(--dark), 0 1px 0 3px var(--ink), 0 4px 8px rgba(58, 22, 8, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
:where(.vh) .btn:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
:where(.vh) .btn img { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.35)); }
:where(.vh) .btn.orange { --c1: var(--orange-l); --c2: var(--orange); --c3: #ec8410; --dark: var(--orange-d); }
:where(.vh) .btn.blue { --c1: var(--blue-l); --c2: var(--blue); --c3: #2a9ae8; --dark: var(--blue-d); }
:where(.vh) .btn.grey { --c1: var(--grey-l); --c2: var(--grey); --c3: #b3b7c4; --dark: var(--grey-d); color: #fff; filter: saturate(0.85); }
:where(.vh) .btn:disabled { filter: grayscale(0.55) brightness(0.98); cursor: default; }
:where(.vh) .sec { margin: 6px 0 10px; }
:where(.vh) .sec h3 { margin: 4px 4px 8px; font: 900 16px/1 var(--font); color: var(--ink-2); letter-spacing: 1.5px; text-transform: uppercase; }
@media (max-height: 480px) and (orientation: landscape) {
  :where(.vh) { --bar-h: 64px; }
  :where(.vh) .sec h3 { margin: 2px 4px 6px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.vh) .btn { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.vh) *, :where(.vh) *::before, :where(.vh) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
@media (max-height: 340px) and (orientation: landscape) {
  :where(.vh) { --bar-h: 54px; }
}
/* the old @keyframes the injected styles ask for */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes buySpin { to { transform: rotate(360deg); } }