/* ============================================================
   Dragon Boat — system skin: the pieces every page shares.
   Forms, buttons, tabs, tables, pagination, toasts, dialogs,
   the consent board, the onboarding tour, empty states, policy
   pages, auth forms and the error pages.

   Loaded in <head> from functions.php (dragonboat_skin_links()), so page
   and component CSS printed later in <body> would win on order alone;
   every rule is scoped "html body …" (or "html.dark body …") to win on
   specificity instead. Page content lives in main#px-spa-content.
   ============================================================ */

/* ── A lane rope as a panel's top edge ── */
html body .db-sheet { position: relative; }
html body .db-sheet::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 2; pointer-events: none;
  background: var(--lane-rope);
  border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* The small float line, as a rule */
html body .db-rule { display: block; height: 10px; background: var(--lane-rope-sm); }

/* A label behind a little finish buoy, the way the section eyebrows are */
html body .db-cap {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--theme-600);
}
html body .db-cap::before {
  content: ''; flex-shrink: 0; width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, .95) 40% 60%, transparent 60%), radial-gradient(circle at 34% 30%, #ffe3a0, #ff9b4a 55%, #c9622a);
}

/* ── Fields ──
   White paddle-blade wood with a fine edge; on focus the edge takes the
   jade and a ring of still water comes up round it. Only fields that
   carry their own border or input classes are touched, so bespoke
   inputs (search pills, game boards) keep their looks. */
html body #px-spa-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select):is([class*="border"], [class*="input"], [class*="form-"], [class*="field"]) {
  background-color: var(--paper-2);
  border-color: var(--rule);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--font-ui);
}
html body #px-spa-content :is(input, textarea, select):is([class*="border"], [class*="input"], [class*="form-"], [class*="field"]):focus {
  border-color: var(--theme-500);
  box-shadow: 0 0 0 3px rgba(26, 135, 99, .18), 0 0 0 6px rgba(26, 135, 99, .07);
  outline: none;
}
html body #px-spa-content :is(input, textarea)::placeholder { color: var(--ink-soft); opacity: .85; }
html body :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--db-jade); }
html body #px-spa-content label:not([class*="hidden"]) { font-family: var(--font-ui); }
html.dark body #px-spa-content :is(input, textarea, select):is([class*="border"], [class*="input"], [class*="form-"], [class*="field"]):focus {
  border-color: var(--theme-500) !important;
  box-shadow: 0 0 0 3px rgba(127, 214, 174, .2), 0 0 0 6px rgba(127, 214, 174, .07);
}

/* ── Headings: page titles in the race board's wide capitals ── */
html body #px-spa-content :is(h1, h2):is(.font-bold, .font-extrabold, .font-black, .font-semibold) {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ── Tabs and pills ──
   Shared filter rows (orders, bids, tickets, transactions) are rows of
   rounded buttons; the chosen one is the jade button with a gold trim
   line run just inside it, like the gunwale of a hull. */
html body .db-pill-on,
html body #px-spa-content :is(button, a):is(.bg-theme-600, .bg-theme-500, .bg-gray-900, .bg-black, .bg-slate-900):is(.rounded-full, .rounded-xl, .rounded-lg):not(.w-full):not([class*="py-3"]):not([class*="py-4"]) {
  position: relative;
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow), inset 0 -3px 0 -1px rgba(240, 193, 75, .9);
}
html.dark body #px-spa-content :is(button, a):is(.bg-gray-900, .bg-black, .bg-slate-900, .dark\:bg-white) { color: var(--btn-ink) !important; }

/* ── Tables: the race results board. The head is a boat's hull, jade
   lacquer painted with scales and lettered in rice white, the gold
   gunwale along its foot; rows are ruled by dashed lane lines, every
   other lane washed with river water, the first cell marked by a lane
   float, and an empty table shows the finish board with its lanes
   still blank. ── */
html body #px-spa-content table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
html body #px-spa-content thead,
html.dark body #px-spa-content thead { background: var(--db-hull) !important; }
/* some head rows (membership comparison) paint their own paper fill inline */
html body #px-spa-content thead tr { background: transparent !important; }
html body #px-spa-content thead th {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #f4fbf6 !important;
  border-bottom: 0;
  background: var(--db-gunwale) left bottom / 100% 3px no-repeat;
}
html.dark body #px-spa-content thead th { color: #ffe3a0 !important; }
html body #px-spa-content tbody tr { transition: background .15s ease; }
html body #px-spa-content tbody tr + tr > td { border-top: 1px dashed rgba(27, 111, 125, .22); }
html.dark body #px-spa-content tbody tr + tr > td { border-top-color: rgba(127, 214, 174, .14); }
html body #px-spa-content tbody td:first-child { position: relative; padding-inline-start: max(1.8rem, 28px) !important; }
html body #px-spa-content tbody td:first-child::before {
  content: ''; position: absolute; inset-inline-start: 10px; top: 50%; width: 9px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--db-jade); opacity: .55;
}
html body #px-spa-content tbody tr:nth-child(even) > td:first-child::before { background: var(--db-bamboo); }
html body #px-spa-content tbody tr:nth-child(even) > td { background-color: var(--db-river-soft); }
html.dark body #px-spa-content tbody tr:nth-child(even) > td { background-color: rgba(111, 207, 217, .05); }
html body #px-spa-content tbody tr:hover > td { background-color: var(--db-jade-soft); }
html body #px-spa-content tbody td :is(span, div).rounded-full:is([class*="bg-green-"], [class*="bg-emerald-"], [class*="bg-yellow-"], [class*="bg-amber-"], [class*="bg-red-"], [class*="bg-blue-"], [class*="bg-gray-"], [class*="bg-orange-"]):is(.text-xs, .text-\[10px\], .text-\[11px\]) {
  border-radius: 999px !important; font-weight: 800; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
html body #px-spa-content tbody tr:only-child > td[colspan] {
  padding: 2.2rem 1rem 2.4rem !important; text-align: center;
  background: var(--db-lanes), var(--db-board-paper) !important;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink-soft);
}
html body #px-spa-content tbody tr:only-child > td[colspan]::before {
  content: ''; position: static; display: block; width: 128px; height: 96px; margin: 0 auto .5rem; border-radius: 0; opacity: 1;
  background: var(--art-board) center / contain no-repeat;
}
html body #px-spa-content :is(.overflow-x-auto, .overflow-auto):has(> table) { border-radius: 14px; border: 1px solid var(--rule); background: var(--db-board-paper); }

/* ── Pagination ──
   The current page is the drum, struck; the rest are plain numbers in
   the UI face. */
html body :is(.pagination, nav[aria-label*="agination"], [class*="pagination"]) :is(a, button, span):is([class*="rounded"], .page-link, .page-btn) {
  font-family: var(--font-ui); font-weight: 800;
  border-radius: 999px;
}
html body :is(.pagination, nav[aria-label*="agination"], [class*="pagination"]) :is(a, span, button):is([aria-current="page"], .active, .is-active, .bg-theme-600, .bg-theme-500, .bg-gray-900) {
  background: var(--db-drum) !important;
  color: #6e1d22 !important;
  border-color: transparent !important;
  border-radius: 50% !important;
  min-width: 2.6rem; min-height: 2.6rem;
  box-shadow: 0 3px 0 rgba(142, 47, 37, .35) !important;
}

/* ── Breadcrumbs: a lane float between the crumbs ── */
html body nav[aria-label*="readcrumb"] :is(svg, .sep, [aria-hidden="true"]):not(:has(path[d*="M3 12"])) { color: var(--db-jade); }
html body nav[aria-label*="readcrumb"] a:hover { color: var(--theme-600); }

/* ── Badges and chips: little floats in the race colours, a fine ring
   of their own colour round each ── */
html body #px-spa-content :is(.bg-green-100, .bg-emerald-100):is(.text-green-700, .text-green-800, .text-emerald-700, .text-emerald-800) { background: var(--db-jade-soft) !important; color: var(--db-jade-ink) !important; }
html body #px-spa-content :is(.bg-yellow-100, .bg-amber-100):is(.text-yellow-700, .text-yellow-800, .text-amber-700, .text-amber-800) { background: var(--db-gold-soft) !important; color: var(--db-gold-ink) !important; }
html body #px-spa-content .bg-red-100:is(.text-red-700, .text-red-800, .text-red-600) { background: var(--db-lacquer-soft) !important; color: var(--db-lacquer-ink) !important; }
html body #px-spa-content .bg-blue-100:is(.text-blue-700, .text-blue-800) { background: var(--db-river-soft) !important; color: var(--db-river-ink) !important; }
html body #px-spa-content :is(.bg-green-100, .bg-emerald-100, .bg-yellow-100, .bg-amber-100, .bg-red-100, .bg-blue-100):is(.rounded-full, .rounded-md, .rounded-lg, .rounded):is(.text-xs, .text-\[10px\], .text-\[11px\]) {
  border-radius: 999px !important;
  font-weight: 800; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 45%, transparent);
}

/* Stock greens, ambers and reds used for status text take the race colours */
html body #px-spa-content :is(.text-green-500, .text-green-600, .text-emerald-500, .text-emerald-600) { color: var(--db-jade-ink); }
html body #px-spa-content :is(.text-red-500, .text-red-600) { color: var(--db-lacquer-ink); }
html body #px-spa-content :is(.text-yellow-500, .text-yellow-600, .text-amber-500, .text-amber-600) { color: var(--db-gold-ink); }

/* ── Account cards ──
   The account and seller pages build their panels from one Tailwind
   recipe (white, a grey hairline, #121218 after dark). Here they are
   paddle-blade white with a fine edge. */
html body #px-spa-content :is(.rounded-2xl, .rounded-3xl, .rounded-xl):is([class*="dark:bg-[#121218]"], [class*="dark:bg-[#0f0f14]"], [class*="dark:bg-[#16161d]"]):is(.bg-white, [class*="border-gray-100"]) {
  background-color: var(--paper-2) !important;
  border-color: var(--rule) !important;
  box-shadow: var(--shadow);
}

/* Stat cards: small finish boards hung from a bamboo rod, ruled in lane
   lines, a lane float of a new colour on each. The number is set in the
   UI face so every figure reads at once. */
html body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black, .font-bold)):not(:has(img)):not(.ed-value-box),
html body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> div > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black)):not(:has(img)):not(.ed-value-box) {
  --m: var(--db-jade);
  position: relative;
  background:
    radial-gradient(circle, var(--m) 0 5px, transparent 5.5px) calc(100% - 16px) 26px / 12px 12px no-repeat,
    var(--bamboo-rod-img) 0 0 / 72px 12px repeat-x,
    var(--db-lanes),
    var(--db-board-paper) !important;
  border-color: var(--rule) !important;
  border-radius: 8px 8px 16px 16px !important;
  padding-top: max(1.4rem, 22px) !important;
}
html[dir="rtl"] body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black, .font-bold)):not(:has(img)):not(.ed-value-box),
html[dir="rtl"] body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> div > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black)):not(:has(img)):not(.ed-value-box) {
  background:
    radial-gradient(circle, var(--m) 0 5px, transparent 5.5px) 16px 26px / 12px 12px no-repeat,
    var(--bamboo-rod-img) 0 0 / 72px 12px repeat-x,
    var(--db-lanes),
    var(--db-board-paper) !important;
}
html body #px-spa-content .grid > :is(.rounded-2xl, .rounded-xl):nth-child(4n+2) { --m: var(--db-lacquer); }
html body #px-spa-content .grid > :is(.rounded-2xl, .rounded-xl):nth-child(4n+3) { --m: var(--db-river); }
html body #px-spa-content .grid > :is(.rounded-2xl, .rounded-xl):nth-child(4n+4) { --m: var(--db-gold); }
html body #px-spa-content :is(.rounded-2xl, .rounded-xl) > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black),
html body #px-spa-content :is(.rounded-2xl, .rounded-xl) > div > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black) {
  font-family: var(--font-ui); font-weight: 800; letter-spacing: -.01em;
  overflow-wrap: normal;
}

/* Icon tiles: the little rounded squares holding an icon become plates
   of lacquered hull, painted with scales and edged in gold leaf, the
   icon in rice white. The lacquer is tinted by the colour the markup
   asked for. */
html body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14).rounded-xl:is(.flex, .grid):has(> :is(i, svg)):not(:has(img)):not(.ed-value-box),
html body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14).rounded-2xl:is(.flex, .grid):has(> :is(i, svg)):not(:has(img)):not(.ed-value-box),
html body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14).rounded-full:is(.flex, .grid):has(> :is(i, svg)):not(:has(img)):not(.ed-value-box):is([class*="bg-"]) {
  --tint: transparent;
  background: linear-gradient(var(--tint), var(--tint)), var(--db-tile) !important;
  color: #f4fbf6 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--db-tile-relief) !important;
}
html body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14):is(.rounded-xl, .rounded-2xl, .rounded-full):has(> :is(i, svg)) > :is(i, svg) { color: #f4fbf6 !important; position: relative; filter: drop-shadow(0 1px 0 rgba(4, 30, 24, .45)); }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl, .rounded-full):has(> :is(i, svg)):is([class*="blue"], [class*="sky"], [class*="cyan"], [class*="indigo"]) { --tint: rgba(27, 111, 125, .55); }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl, .rounded-full):has(> :is(i, svg)):is([class*="red"], [class*="rose"], [class*="pink"], [class*="fuchsia"], [class*="purple"], [class*="violet"]) { --tint: rgba(201, 76, 60, .72); }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl, .rounded-full):has(> :is(i, svg)):is([class*="amber"], [class*="yellow"], [class*="orange"]) { --tint: rgba(214, 150, 30, .7); }

/* Avatars: ringed like a drum, a gold line inside the vermilion */
html body #px-spa-content img.rounded-full:is(.w-16, .w-20, .w-24, .w-28, .w-32, [class*="w-["]):not(.no-ring) {
  border: 0 !important;
  box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 5px #f0c14b, 0 0 0 8px var(--db-lacquer), 0 10px 18px -8px rgba(14, 42, 40, .5) !important;
}

/* ── Skeletons: still water, ripples drifting on it ── */
html body .animate-pulse :is(.bg-gray-200, .bg-gray-100, .bg-gray-300, [class*="bg-white/"]),
html body .animate-pulse:is(.bg-gray-200, .bg-gray-100, .bg-gray-300),
html body [class*="skeleton"]:not(svg):not(:has(img, h1, h2, h3, p, a, button, span)) {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'><g fill='none' stroke='%231a8763' stroke-opacity='.16' stroke-width='1.3' stroke-linecap='round'><path d='M6 10q6-4 12 0t12 0'/><path d='M38 24q5-3 10 0t10 0'/></g></svg>") 0 0 / 64px 32px,
    linear-gradient(180deg, #e6f2ec, #d6ebe1) !important;
}
html.dark body .animate-pulse :is(.bg-gray-200, .bg-gray-100, .bg-gray-300, [class*="bg-white/"]),
html.dark body .animate-pulse:is(.bg-gray-200, .bg-gray-100, .bg-gray-300),
html.dark body [class*="skeleton"]:not(svg):not(:has(img, h1, h2, h3, p, a, button, span)) {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'><g fill='none' stroke='%237fd6ae' stroke-opacity='.12' stroke-width='1.3' stroke-linecap='round'><path d='M6 10q6-4 12 0t12 0'/></g><path d='M46 18v8' stroke='%23ffcf6b' stroke-opacity='.18' stroke-width='1.6' stroke-linecap='round'/></svg>") 0 0 / 64px 32px,
    linear-gradient(180deg, #123238, #0d272c) !important;
}
@media (prefers-reduced-motion: no-preference) {
  html body .animate-pulse :is(.bg-gray-200, .bg-gray-100, .bg-gray-300),
  html body .animate-pulse:is(.bg-gray-200, .bg-gray-100, .bg-gray-300) { animation: db-drift 2.4s linear infinite; }
}
@keyframes db-drift { from { background-position: 0 0, 0 0; } to { background-position: 64px 0, 0 0; } }

/* ── Tooltips: a scrap of the night harbour, lettered in lamplight ── */
html body [role="tooltip"]:not(#ob-tooltip) {
  background: #08262b; color: #ffe3a0;
  border: 1px solid rgba(255, 207, 107, .3);
  border-radius: 10px;
  font-family: var(--font-ui);
}

/* ── Toasts ──
   Each one is a white paddle blade with the five silk threads run down
   its leading edge, the icon on a plate of lacquered hull tinted in the
   type's colour, and the time left running out along a twisted cord. */
html body .px-toast {
  font-family: var(--font-ui);
  font-size: .95rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px 18px 18px 8px;
  padding-inline-start: 1.3rem;
  box-shadow: 0 2px 0 rgba(14, 42, 40, .06), 0 18px 34px -16px rgba(14, 42, 40, .5);
}
html[dir="rtl"] body .px-toast { border-radius: 18px 8px 8px 18px; }
html body .px-toast::before { width: 7px; background: var(--silk-v); opacity: 1; }
html body .px-toast--success::before { background: linear-gradient(90deg, #1f8a5c 0 50%, #b9d36a 50%); }
html body .px-toast--error::before { background: linear-gradient(90deg, #c94c3c 0 50%, #f2c14e 50%); }
html body .px-toast--warning::before { background: linear-gradient(90deg, #f2c14e 0 50%, #ff9b4a 50%); }
html body .px-toast--info::before { background: linear-gradient(90deg, #2f7fb5 0 50%, #f7f2e4 50%); }
html body .px-toast__icon {
  --tint: transparent;
  flex-basis: 40px; width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(var(--tint), var(--tint)), var(--db-tile);
  box-shadow: var(--db-tile-relief);
  color: #f4fbf6 !important;
}
html body .px-toast__icon svg { width: 17px; height: 17px; }
html body .px-toast--error .px-toast__icon { --tint: rgba(201, 76, 60, .78); }
html body .px-toast--warning .px-toast__icon { --tint: rgba(214, 150, 30, .72); }
html body .px-toast--info .px-toast__icon { --tint: rgba(27, 111, 125, .6); }
html body .px-toast__message { line-height: 1.45; font-weight: 700; }
html body .px-toast__progress { height: 3px; background: var(--paper-3); }
html body .px-toast__progress > i { background: var(--db-thread); opacity: 1; }

/* ── Confirm dialog: a white board under the lane rope ── */
html body .px-confirm__backdrop { background: rgba(4, 22, 26, .62); }
html body .px-confirm__card {
  font-family: var(--font-ui);
  padding-top: 2.3rem;
  border-radius: 18px;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--lane-rope), var(--paper-2);
  background-position: left 8px, 0 0; background-size: 64px 14px, auto; background-repeat: repeat-x, no-repeat;
}
html body .px-confirm__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-top: .6rem; }
html body .px-confirm__btn { border-radius: 999px; font-family: var(--font-ui); font-weight: 800; }
html body .px-confirm__btn--ok { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); }
html body .px-confirm__btn--ok.px-confirm__btn--destructive { background: #b4402f; color: #fff; box-shadow: 0 2px 0 #6e1d22; }

/* ── Modals ──
   Shared Tailwind dialogs (fixed overlays with a white panel) dim the
   page to the river at night; .db-modal-band runs the lane rope across
   a panel's top. */
html body :is(.fixed.inset-0) > :is(.absolute.inset-0, .fixed.inset-0):is(.bg-black\/50, .bg-black\/60, .bg-black\/40, .bg-gray-900\/50, .bg-black\/70, [class*="bg-black/"]) { background-color: rgba(4, 22, 26, .62) !important; }
html body .db-modal-band { position: relative; padding-top: 1.8rem !important; }
html body .db-modal-band::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 2; pointer-events: none;
  background: var(--lane-rope);
  border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/* ── Cookie consent: a finish board hung from its bamboo rod, ruled in
   lanes, a zongzi tied up in its corner ── */
html body .px-consent {
  background: var(--db-lanes), #fffdf6;
  color: #0e2a28;
  border: 1px solid rgba(26, 135, 99, .22);
  border-radius: 8px 8px 18px 18px;
  font-family: var(--font-ui);
  box-shadow: 0 22px 48px -20px rgba(14, 42, 40, .6);
  --ink: #0e2a28; --ink-2: #2c4a46; --ink-soft: #5f7a74;
  overflow: hidden;
}
html.dark body .px-consent { background: var(--db-lanes), #f1f7f1; border-color: rgba(255, 207, 107, .4); }
html body .px-consent::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; pointer-events: none;
  background: var(--bamboo-rod);
}
html body .px-consent::after {
  content: ''; position: absolute; top: 20px; inset-inline-end: 16px; width: 38px; height: 36px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'><path d='M32 4L60 54H4Z' fill='%235f9a3e' stroke='%233d6e2a' stroke-width='2' stroke-linejoin='round'/><path d='M32 4L41 54H60Z' fill='%233d6e2a' fill-opacity='.45'/><path d='M14 36C26 40 40 40 50 35M9 46C24 51 42 51 56 45' fill='none' stroke='%23e9d6a8' stroke-width='2.8' stroke-linecap='round'/><path d='M32 4c4-2 7 0 8 3' fill='none' stroke='%23e9d6a8' stroke-width='2' stroke-linecap='round'/></svg>") center / contain no-repeat;
  transform: rotate(10deg);
}
html body .px-consent__inner { position: relative; z-index: 1; padding: 24px 18px 18px; }
html body .px-consent__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #0e2a28; padding-inline-end: 2.8rem; }
html body .px-consent :is(p, .px-consent__text) { color: #2c4a46; }
html body .px-consent a { color: #0e6a4c; }
html body .px-consent__btn { border-radius: 999px; font-family: var(--font-ui); font-weight: 800; }
html body .px-consent__btn--accept { background: #0f6b50; color: #ffffff; border-color: transparent; box-shadow: 0 2px 0 #094534; }
html body .px-consent__btn--reject { background: #ffffff; color: #0e2a28; border: 1.5px solid #0e2a28; box-shadow: 0 2px 0 rgba(14, 42, 40, .18); }

/* ── Onboarding: the welcome card under the lane rope with the river
   running along its foot, the emoji on a drum, the tour tooltip a scrap
   of the night harbour ── */
html body #ob-backdrop { background: rgba(4, 22, 26, .62); }
html body #ob-card {
  position: relative;
  padding-top: 2.3rem; padding-bottom: 2.6rem;
  background: var(--paper-2);
  border-radius: 20px;
  overflow: hidden;
  font-family: var(--font-ui);
}
html body #ob-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--lane-rope); pointer-events: none; }
html body #ob-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--db-waves); pointer-events: none; }
html body .ob-emoji { width: 92px; height: 92px; border-radius: 50%; background: var(--db-drum); }
html body .ob-h { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
html body .ob-h b { color: var(--theme-600); }
html body .ob-pill.is-active { background: var(--db-jade-soft); border-color: var(--db-jade); }
html body .ob-pill.is-active .ob-pill-num { background: var(--db-lacquer); color: #fffaf0; }
html body .ob-btn-primary { background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; box-shadow: var(--btn-shadow); font-family: var(--font-ui); font-weight: 800; }
html body .ob-btn-ghost { border-radius: 999px; font-family: var(--font-ui); }
html body #ob-tooltip {
  background: var(--night-bg);
  color: #eef6ee;
  border: 1px solid rgba(255, 207, 107, .3);
  border-radius: 16px;
  font-family: var(--font-ui);
}
html body #ob-tooltip .ob-tt-title { color: #ffcf6b; font-family: var(--font-display); font-weight: 700; }
html body #ob-tooltip .ob-tt-desc { color: rgba(238, 246, 238, .84); }
html body #ob-tooltip .ob-badge { color: #0b2a22; background: #b9d36a; }
html body #ob-spotlight { box-shadow: 0 0 0 4px #f0c14b, 0 0 0 7px var(--db-jade), 0 0 0 9999px rgba(4, 22, 26, .62) !important; }

/* ── Upload progress ──
   The auction and shop listing forms include the core
   components/upload-progress-modal.php by path, so the theme's own copy
   only reaches pages that ask theme_component() for it; here the core
   overlay's inline styles are dressed the same way: a white board under
   the lane rope, the icon on a hull plate and the progress paid out
   along the five-colour cord. */
html body #uploadProgressOverlay { background: rgba(4, 22, 26, .64) !important; }
html body #uploadProgressOverlay [role="dialog"] {
  position: relative; overflow: hidden;
  background: var(--lane-rope), var(--paper-2) !important;
  background-position: left top, 0 0 !important; background-size: 64px 14px, auto !important; background-repeat: repeat-x, no-repeat !important;
  border: 1px solid var(--rule);
  border-radius: 18px !important;
  padding-top: 2.3rem !important;
  font-family: var(--font-ui);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .45) !important;
}
html body #uploadProgressOverlay [role="dialog"] > div:first-child > span:first-child {
  width: 46px !important; height: 46px !important;
  background: var(--db-tile) !important; box-shadow: var(--db-tile-relief);
  color: #f4fbf6 !important; border-radius: 12px !important;
}
html body #uploadProgressOverlay #upTitle { color: var(--ink) !important; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem !important; line-height: 1.25; }
html body #uploadProgressOverlay #upSub, html body #uploadProgressOverlay #upMsg { color: var(--ink-soft) !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
html body #uploadProgressOverlay #upBar { background: var(--db-thread) !important; border-radius: 4px !important; }
html body #uploadProgressOverlay div:has(> #upBar) { background: var(--paper-3) !important; height: 8px !important; border-radius: 4px !important; }
html body #uploadProgressOverlay #upPct { color: var(--theme-600) !important; font-family: var(--font-ui); font-weight: 800 !important; font-size: .85rem !important; }

/* ── Empty states (components/cards/empty-state.php) ──
   A white board under the lane rope, the river along its foot; the
   drawing in the middle sits in a ring of ripples, the caller's icon on
   a hull plate at its corner. */
html body .db-es {
  position: relative; isolation: isolate;
  text-align: center;
  padding: 2.5rem 1.5rem 2.6rem;
  background: var(--db-waves), var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
html body .db-es::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--lane-rope); pointer-events: none; }
html body .db-es--compact { padding: 2.2rem 1.25rem 2.2rem; }
html body .db-es__art { position: relative; width: min(230px, 70%); margin: .6rem auto .7rem; }
html body .db-es--compact .db-es__art { width: min(170px, 58%); }
html body .db-es__art::before {
  content: ''; position: absolute; left: 50%; top: 58%; width: 120%; aspect-ratio: 2.2; z-index: -1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, transparent 62%, var(--db-jade-soft) 64%, transparent 70%, transparent 80%, var(--db-river-soft) 82%, transparent 88%);
}
html body .db-es__art .db-art { display: block; width: 100%; height: auto; }
html body .db-es__icon {
  position: absolute; inset-inline-end: -10px; top: -4px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--db-tile);
  box-shadow: var(--db-tile-relief);
  border-radius: 12px;
  color: #f4fbf6;
  transform: rotate(6deg);
}
html body .db-es__icon :is(svg) { width: 18px; height: 18px; }
html body .db-es__icon i { font-size: 15px; }
html body .db-es__icon img { width: 20px; height: 20px; }
html body .db-es__eyebrow { margin: 0 0 .45rem; }
html body .db-es__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 700; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
html body .db-es__title::after { content: ''; display: block; width: 120px; height: 10px; margin: .6rem auto 0; background: var(--lane-rope-sm); }
html body .db-es__desc { margin: .5rem auto 0; max-width: 26rem; font-size: .96rem; line-height: 1.55; color: var(--ink-2); }
html body .db-es__cta { margin-top: 1.4rem; }

/* ── Policy pages (pages/policy-page.css) ──
   Headings in the race board's capitals behind a lane float in the race
   colours; links in jade; notices are finish boards on their rods. */
html body .policy-prose { font-family: var(--font-ui); font-size: 1.02rem; line-height: 1.75; color: var(--ink-2); }
html body .policy-prose :is(h2, h3) {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  color: var(--ink);
  padding-inline-start: 1.8rem;
}
html body .policy-prose :is(h2, h3)::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .32em; width: 1.05em; height: .78em; border-radius: 50%;
  background: radial-gradient(ellipse at 36% 34%, rgba(255, 255, 255, .7) 0 18%, transparent 30%), var(--db-jade);
}
html body .policy-prose h2:nth-of-type(4n+2)::before { background-color: var(--db-lacquer); background-image: radial-gradient(ellipse at 36% 34%, rgba(255, 255, 255, .7) 0 18%, transparent 30%); }
html body .policy-prose h2:nth-of-type(4n+3)::before { background-color: var(--db-river); background-image: radial-gradient(ellipse at 36% 34%, rgba(255, 255, 255, .7) 0 18%, transparent 30%); }
html body .policy-prose h2:nth-of-type(4n+4)::before { background-color: var(--db-gold); background-image: radial-gradient(ellipse at 36% 34%, rgba(255, 255, 255, .7) 0 18%, transparent 30%); }
html body .policy-prose a { color: var(--db-jade-ink); text-decoration-color: color-mix(in srgb, var(--db-jade) 45%, transparent); text-underline-offset: 3px; }
html body .policy-prose :is(ul) > li::marker { color: var(--db-jade); }
html body .policy-prose img { border-radius: 14px; }
html body .policy-notice, html body .policy-preferences, html body .policy-processors {
  position: relative;
  background: var(--db-lanes), var(--db-board-paper);
  border: 1px solid var(--rule);
  border-radius: 8px 8px 16px 16px;
  padding-top: 1.9rem;
  overflow: hidden;
}
html body :is(.policy-notice, .policy-preferences, .policy-processors)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--bamboo-rod); }
/* The contents list and help card beside the policy text take the same face. */
html body :is(.policy-toc, .policy-help) {
  background: var(--db-lanes), var(--db-board-paper);
  border: 1px solid var(--rule);
  border-radius: 8px 8px 16px 16px;
}

/* ── Back to top ── */
html body #backToTop, html body .back-to-top { font-family: var(--font-ui); }

/* ── Auth pages (login, register, forgot, reset, step-up) ──
   The form is a white board under the lane rope with the river along
   its foot; the brand panel is the night harbour (theme.css) with the
   skyline, buoys and a boat racing past, the features on finish boards. */
html:has(> body.db-auth) { background: var(--paper); }
html body.db-auth { background: var(--page-bg) !important; font-family: var(--font-ui); }
html body.db-auth h1 { font-family: var(--font-display); font-weight: 700 !important; letter-spacing: -.01em !important; }
html body .db-auth-sheet {
  position: relative;
  padding: 2.6rem 1.6rem 2.6rem;
  background: var(--db-waves), var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .db-auth-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--lane-rope); pointer-events: none; }
@media (max-width: 420px) { html body .db-auth-sheet { padding-inline: 1.1rem; } }
html body.db-auth .auth-input {
  border-radius: 12px;
  border: 1.5px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--font-ui);
}
html body.db-auth .auth-input:focus { border-color: var(--theme-500); box-shadow: 0 0 0 3px rgba(26, 135, 99, .18); }
html.dark body.db-auth .auth-input { background: #04161a; border-color: rgba(232, 243, 236, .2); color: #e8f3ec; }
html.dark body.db-auth .auth-input:focus { border-color: var(--theme-500); box-shadow: 0 0 0 3px rgba(127, 214, 174, .2); }
html body.db-auth .auth-btn {
  border-radius: 999px !important;
  background: var(--btn-bg) !important; color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
  font-size: 1.02rem; font-weight: 800;
}
html body.db-auth .auth-btn:hover { background: var(--btn-bg-hover) !important; transform: translateY(-1px); box-shadow: var(--btn-shadow-hover) !important; }
html body.db-auth .social-btn { width: 48px; height: 48px; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--paper-2); }
html body.db-auth .social-btn:hover { border-color: var(--db-jade); box-shadow: 0 0 0 4px var(--db-jade-soft); }
html body.db-auth .brand-panel { isolation: isolate; }
html body .db-auth-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html body .db-auth-scene__shore { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: var(--skyline-night) no-repeat center bottom / auto 130px; }
html body .db-auth-scene__rope { position: absolute; left: 0; right: 0; bottom: 18px; height: 14px; background: var(--lane-rope-night); opacity: .9; }
html body .db-auth-scene .db-buoy { bottom: 22px; }
html body .db-auth-scene .db-glint { bottom: 2px; }
html body .db-auth-boat { position: absolute; bottom: 24px; inset-inline-start: 5%; width: min(250px, 50%); --hull: #1f8a6c; --hull-2: #0e4f42; --trim: #f0c14b; --scale: #9fe0c4; --wake: #ffffff; }
[dir="rtl"] body .db-auth-boat { transform: scaleX(-1); }
html body .db-auth-art { display: block; width: 210px; height: auto; margin: 0 auto 1.1rem; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .4)); --db-art-floor: rgba(0, 0, 0, .35); --db-art-water: #134249; --db-art-ripple: #2f6f68; }
html body.db-auth .brand-panel::after { display: none !important; }
html body.db-auth .brand-panel h2 { font-size: 2.2rem; font-weight: 700 !important; letter-spacing: -.01em !important; }
html body.db-auth .brand-panel .space-y-3 > div {
  position: relative;
  background: var(--bamboo-rod-img) 0 0 / 72px 10px repeat-x, var(--db-lanes), #fffdf6 !important;
  border: 0 !important;
  border-radius: 6px 6px 14px 14px !important;
  box-shadow: 0 12px 22px -14px rgba(0, 0, 0, .7);
  backdrop-filter: none;
  padding-top: 1.1rem !important;
}
html body.db-auth .brand-panel .space-y-3 > div .text-white { color: #0e2a28 !important; }
html body.db-auth .brand-panel .space-y-3 > div [class*="text-purple-200"] { color: #2c4a46 !important; }
html body.db-auth .brand-panel .space-y-3 > div > div:first-child {
  width: 2.6rem; height: 2.6rem;
  background: var(--db-tile) !important;
  box-shadow: var(--db-tile-relief);
  border-radius: 12px !important;
}
html body.db-auth .brand-panel .space-y-3 > div:nth-child(2) > div:first-child { background: linear-gradient(rgba(201, 76, 60, .75), rgba(201, 76, 60, .75)), var(--db-tile) !important; }
html body.db-auth .brand-panel .space-y-3 > div:nth-child(3) > div:first-child { background: linear-gradient(rgba(27, 111, 125, .6), rgba(27, 111, 125, .6)), var(--db-tile) !important; }
html body.db-auth .brand-panel .space-y-3 > div > div:first-child svg { color: #f4fbf6 !important; width: 16px; height: 16px; }
html body.db-auth .brand-panel > div > .flex.justify-center:first-child { display: none; }

/* ── Standalone pages (age check, change language, unsubscribe) ── */
html body .db-standalone-card {
  position: relative; overflow: hidden;
  background: var(--db-waves), var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
html body .db-standalone-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--lane-rope); }

/* ── Error scenes (errors/maintenance, rate-limited, banned,
   session-expired): the night harbour in both modes, like the footer,
   the lit shore and a lane rope along the foot, buoys bobbing and one
   small scene in the middle. ── */
html body .db-err {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 70vh;
  display: grid; place-items: center;
  padding: 4.2rem 1.25rem 9rem;
  background: var(--night-bg);
  color: #eef6ee;
  font-family: var(--font-ui);
  text-align: center;
}
html body .db-err__shore { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: -1; background: var(--skyline-night) no-repeat center bottom / auto 130px; }
html body .db-err__shore::after { content: ''; position: absolute; left: 0; right: 0; bottom: 30px; height: 14px; background: var(--lane-rope-night); }
html body .db-err .db-buoy { bottom: 36px; z-index: -1; }
html body .db-err .db-glint { bottom: 8px; z-index: -1; }
html body .db-err__card { position: relative; z-index: 1; max-width: 34rem; }
html body .db-err__art {
  width: min(240px, 64vw); height: auto; margin: 0 auto 1.1rem; display: block;
  padding: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 246, 238, .1) 0 60%, transparent 70%);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45));
  --db-art-floor: rgba(0, 0, 0, .35); --db-art-water: #134249; --db-art-ripple: #2f6f68; --db-art-steam: #6d8a7c;
}
html body .db-err__kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 .9rem; padding: .4rem 1rem;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #0b2a22;
  background: #b9d36a;
  border-radius: 999px;
  box-shadow: inset 0 -3px 0 -1px rgba(14, 42, 40, .25);
}
html body .db-err__title { margin: 0 0 .8rem; font-family: var(--font-display); font-size: clamp(1.7rem, 6vw, 2.7rem); font-weight: 700; line-height: 1.15; color: #f4fbf6; overflow-wrap: anywhere; }
html body .db-err__text { margin: 0 auto 1.6rem; max-width: 28rem; font-size: 1.05rem; line-height: 1.6; color: rgba(238, 246, 238, .86); }
html body .db-err__meta { margin-top: 1rem; font-size: .9rem; color: rgba(238, 246, 238, .72); }
html body .db-err__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
html body .db-err__form { display: grid; gap: .7rem; max-width: 22rem; margin: 0 auto; text-align: start; }
html body .db-err__input { width: 100%; padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid rgba(238, 246, 238, .25); background: rgba(4, 22, 26, .6); color: #eef6ee; font-family: var(--font-ui); }
html body .db-err__input:focus { outline: none; border-color: #b9d36a; box-shadow: 0 0 0 3px rgba(185, 211, 106, .25); }
html body .db-err__error { margin: 0; font-size: .9rem; font-weight: 800; color: #ffab98; }
html body .db-err .ed-btn-primary { justify-content: center; background: #b9d36a; color: #0b2a22; box-shadow: 0 2px 0 #7f9a3c, 0 10px 26px -10px rgba(185, 211, 106, .45); }
html body .db-err .ed-btn-secondary { color: #eef6ee; border-color: rgba(238, 246, 238, .45); background: transparent; }
html body > main.db-err { min-height: 100vh; }

@media (prefers-reduced-motion: reduce) {
  html body .db-es *, html body .db-err *, html body .db-auth-scene * { animation: none !important; transition: none !important; }
}

/* Some language files wrap a heading word in a stock Tailwind gradient
   (text-transparent bg-clip-text bg-gradient-to-r …) that the compiled sheet
   doesn't fully carry, leaving a coloured box; here it is plain jade like
   the English .text-gradient-theme. */
html body .bg-clip-text.text-transparent { background: none !important; color: var(--theme-500) !important; -webkit-text-fill-color: currentColor; }

/* ── Bare empty notices ──
   A few pages print their own one-line "nothing here" (search with no
   results, offerwalls with none set up, the slot arena with no game)
   instead of the shared empty state; they get the same white board and
   drawings, as images (--art-*, printed by functions.php). */
html body #px-spa-content .text-center.py-20.text-gray-500:has(> h2 + p),
html body .earn-card.text-center.py-16:has(> i.fa-clipboard-list),
html body .min-h-screen.flex > .text-center.py-12:has(> img[src*="sad.svg"]) {
  position: relative; overflow: hidden;
  max-width: 34rem; margin-inline: auto;
  padding: 2.8rem 1.5rem 2.6rem !important;
  background: var(--db-waves), var(--paper-2);
  border: 1px solid var(--rule); border-radius: 20px;
  box-shadow: var(--shadow);
  color: var(--ink-soft) !important;
}
html body #px-spa-content .text-center.py-20.text-gray-500:has(> h2 + p)::after,
html body .min-h-screen.flex > .text-center.py-12:has(> img[src*="sad.svg"])::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--lane-rope);
}
html body #px-spa-content .text-center.py-20.text-gray-500:has(> h2 + p)::before,
html body .earn-card.text-center.py-16:has(> i.fa-clipboard-list)::after,
html body .min-h-screen.flex > .text-center.py-12:has(> img[src*="sad.svg"])::before {
  content: ''; display: block; width: 190px; height: 142px; margin: 0 auto .8rem;
  background: var(--art-boat) center / contain no-repeat;
}
html body .earn-card.text-center.py-16:has(> i.fa-clipboard-list) { display: flex; flex-direction: column-reverse; align-items: center; }
html body .earn-card.text-center.py-16:has(> i.fa-clipboard-list)::after { position: static; background-image: var(--art-buoys); }
html body .earn-card.text-center.py-16 > i.fa-clipboard-list { display: none; }
html body .min-h-screen.flex > .text-center.py-12:has(> img[src*="sad.svg"])::before { background-image: var(--art-buoys); }
html body .min-h-screen.flex > .text-center.py-12 > img[src*="sad.svg"] { display: none; }
html body #px-spa-content .text-center.py-20.text-gray-500 > h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); overflow-wrap: anywhere; }
html body .min-h-screen.flex > .text-center.py-12 > h3 { font-family: var(--font-display); font-weight: 700; }

/* Category pages' own dashed "nothing live" boxes (lottery, auction,
   mystery-box categories): the same white board with the buoys on an
   empty course */
html body #px-spa-content .border-2.border-dashed.text-center:has(> .relative > .w-20.h-20 > svg) {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule) !important; border-radius: 20px !important;
  background: var(--db-waves), var(--paper-2) !important;
  box-shadow: var(--shadow);
  padding-top: 2.5rem !important;
}
html body #px-spa-content .border-2.border-dashed.text-center:has(> .relative > .w-20.h-20 > svg)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--lane-rope); }
html body #px-spa-content .border-2.border-dashed.text-center > .relative > .w-20.h-20:has(> svg) {
  width: 190px !important; height: 142px !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  background: var(--art-buoys) center / contain no-repeat !important;
}
html body #px-spa-content .border-2.border-dashed.text-center > .relative > .w-20.h-20 > svg { display: none; }
html body #px-spa-content .border-2.border-dashed.text-center > .relative > h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }

/* Policy page heroes: the title in the race board's capitals, the lane
   rope along the foot of the band instead of a hairline */
html body section.relative.overflow-hidden.border-b:has(h1.font-display) { border-bottom: 0 !important; padding-bottom: 14px; }
html body section.relative.overflow-hidden.border-b:has(h1.font-display)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--lane-rope); }
html body section.relative.overflow-hidden.border-b h1.font-display, html body #px-spa-content section.relative.overflow-hidden.border-b h1.font-display { font-family: var(--font-display); font-weight: 700; line-height: 1.2 !important; }

/* ── Phone language sheet: the small float line along its top edge ── */
html body #langSheet { background-image: var(--lane-rope-sm-img); background-size: 40px 10px; background-repeat: repeat-x; background-position: left 4px; padding-top: 14px; }
html.dark body #langSheet { background-color: var(--paper-2) !important; border-top-color: var(--rule); }
html body #langSheet .lang-row-active { background: var(--db-jade-soft) !important; }

/* ── The night harbour panel ──
   The race after dark, the lit shore and the lane rope along its foot:
   the games hero, the flash-sale hero and the arena hero are built on
   it. The panel sets position: relative. */
html body .db-night {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--night-bg);
  color: #eef6ee;
}
html body .db-night__shore { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 0; background: var(--skyline-night) no-repeat center bottom / auto 110px; pointer-events: none; }
html body .db-night__shore::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--lane-rope-night); }
html body .db-night > :not([aria-hidden="true"]) { position: relative; z-index: 1; }
html body .db-night .db-buoy, html body .db-night .db-glint { z-index: 0; }
/* The river by day, its counterpart: jade water seen from the bank, the
   ripples catching the light */
html body .db-river {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    var(--ripples) repeat,
    radial-gradient(120% 90% at 50% 0%, #2b93a0, #1b6f7d 55%, #0f5a52);
  color: #f4fbf6;
}
html.dark body .db-river { background: var(--ripples) repeat, radial-gradient(120% 90% at 50% 0%, #134249, #0d333a 60%, #08262b); }

/* Seller and account panels drawn white by day with a faint white wash
   after dark (dark:bg-white/[0.04]); header.css lays its own near-black
   under that wash. After dark they are the theme's harbour instead. */
html.dark body .bg-white:is([class*="dark:bg-white/"], [class*="dark:bg-[#161b22]"]) { background-color: var(--paper-2) !important; border-color: var(--rule) !important; }

/* Stock solid amber, orange and green action buttons (the bulk-offer
   Send, confirm buttons in plugin forms) are the theme's main button */
html body :is(#px-spa-content, [x-show]) :is(button, a):is(.bg-amber-600, .bg-amber-500, .bg-orange-500, .bg-orange-600, .bg-emerald-600, .bg-green-600).text-white {
  background: var(--btn-bg) !important; color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow);
}

/* ── Change language: each language on a little finish board hung from
   a bamboo rod, a lane float in a new colour board by board; the chosen
   one is washed in jade and its tick struck on the drum ── */
html body .lang-card {
  --m: var(--db-jade);
  border-radius: 6px 6px 14px 14px !important;
  background: var(--bamboo-rod-img) 0 0 / 72px 8px repeat-x, var(--paper-2) !important;
  border-color: var(--rule) !important;
  padding-top: .95rem !important;
}
html body .lang-card:nth-child(4n+2) { --m: var(--db-lacquer); }
html body .lang-card:nth-child(4n+3) { --m: var(--db-river); }
html body .lang-card:nth-child(4n+4) { --m: var(--db-gold); }
html body .lang-card:hover { border-color: var(--theme-500) !important; }
html body .lang-card.is-active { background: var(--bamboo-rod-img) 0 0 / 72px 8px repeat-x, var(--db-jade-soft) !important; border-color: var(--db-jade) !important; box-shadow: 0 0 0 2px var(--db-jade) !important; }
html body .lang-card .font-semibold.text-sm { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
html body .lang-card > span.rounded-full:last-child { background: var(--db-drum) !important; color: #8e2f25 !important; box-shadow: none !important; width: 2rem !important; height: 2rem !important; }
html body:has(.lang-card) h1.font-bold { font-family: var(--font-display); font-size: clamp(1.8rem, 4.4vw, 2.6rem); font-weight: 700; }

/* ── Age check: a white board under the lane rope, the river at its foot ── */
html body.age-check-body { background: var(--page-bg); font-family: var(--font-ui); }
html body .age-check-card {
  position: relative; overflow: hidden;
  background: var(--db-waves), var(--paper-2) !important;
  border: 1px solid var(--rule); border-radius: 20px;
  padding-top: 2.5rem !important; padding-bottom: 2.8rem !important;
}
html body .age-check-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--lane-rope); }
html body .age-check-logo { border-radius: 12px; background: #f6f9f2; box-shadow: inset 0 0 0 1.5px rgba(26, 135, 99, .3), 0 0 0 1px var(--rule); padding: 10px 14px; }
html body .age-check-title { font-family: var(--font-display); font-weight: 700; }
html body .age-check-input { border-radius: 12px; border: 1.5px solid var(--rule); background: var(--paper-2); font-family: var(--font-ui); font-weight: 800; }
html body .age-check-input:focus { border-color: var(--theme-500); box-shadow: 0 0 0 3px rgba(26, 135, 99, .18); outline: none; }
html body .age-check-submit { border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); font-family: var(--font-ui); font-weight: 800; }
html body .age-check-foot a { color: var(--theme-600); }

/* ── PWA install sheet (layout/pwa-install.php): a white board under the
   lane rope with a dragon boat paddling along its foot, the shop's icon
   in a drum's ring, the benefits ticked on the drum and the steps on
   little finish boards ── */
html body .pwa-modal { background: rgba(4, 22, 26, .62); }
html body .pwa-sheet {
  position: relative;
  padding-top: 2.3rem;
  background: var(--lane-rope), var(--paper-2);
  background-position: left top, 0 0; background-size: 64px 14px, auto; background-repeat: repeat-x, no-repeat;
  border-radius: 22px 22px 0 0;
  font-family: var(--font-ui);
  overflow: hidden;
}
@media (min-width: 480px) { html body .pwa-sheet { border-radius: 22px; } }
html body .pwa-sheet { padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); }
html body .pwa-sheet::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--db-waves); pointer-events: none; }
html body .pwa-sheet__grip { position: relative; z-index: 3; margin-top: -.6rem; margin-bottom: 1.2rem; }
html body .pwa-brand__icon { border-radius: 50%; box-shadow: 0 0 0 4px #fffaf0, 0 0 0 6px #f0c14b, 0 0 0 10px var(--db-lacquer), 0 10px 20px -8px rgba(14, 42, 40, .5); }
html body .pwa-brand__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
html body .pwa-benefits li { padding-bottom: .45rem; border-bottom: 1px dashed rgba(27, 111, 125, .2); }
html body .pwa-benefits li::before { border-radius: 50%; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e2f25' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat, var(--db-drum); }
html body .pwa-panel__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
html body .pwa-steps li { border-radius: 6px 6px 14px 14px; background: var(--bamboo-rod-img) 0 0 / 72px 8px repeat-x, var(--db-lanes), var(--db-board-paper); padding-top: 1rem; }
html body .pwa-steps__ic { border-radius: 12px; background: var(--db-tile); box-shadow: var(--db-tile-relief); color: #f4fbf6; }
html body .pwa-steps__ic::after { border-radius: 50%; background: #f0c14b; color: #0b2a22; }
html body .pwa-later { border-radius: 999px; }
html body .pwa-toast > * { border-radius: 14px !important; background: var(--night-bg) !important; color: #ffcf6b !important; border: 1px solid rgba(255, 207, 107, .3); }

/* Shared gradient buttons in the accent ramp (from-theme-600 to-theme-500)
   letter themselves in white, which has no contrast on pale jade after
   dark; they are the theme's main button instead. */
html body :is(a, button).bg-gradient-to-r.from-theme-600.text-white {
  background: var(--btn-bg) !important; color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html body :is(a, button).bg-gradient-to-r.from-theme-600.text-white:hover { background: var(--btn-bg-hover) !important; }