/* webold3-img image skin — docs/themelog/webold3-img.md, plan docs/featurelog/image-skin-plan-20260927.md (5.2, 6, 9).
   Linked only from this theme's pages/index.ejs, right after its inline style block. Served at /themes/webold3-img/css/skin.css,
   so url('../images/skin/x.webp') is /themes/webold3-img/images/skin/x.webp.
   Every rule hangs on a skin-* hook class that exists only in this theme's pages/index.ejs and partials/lottery-section.ejs
   (or on a container that holds one, via :has()), and this file is linked only from this theme.

   Art (owner, 2026-09-28): ready-made images from docs/design/webold3-img/art/ — five buttons with text and icon baked in,
   one card background (frame included), one title pill (ornamented caps), one result box. Trimmed to the visible edge and
   converted to WebP with alpha (the conversion is logged in the themelog). LINE has no art and is hidden (owner 2026-09-28).
   - Buttons: the image IS the button. It sits on ::before above the HTML label (the label and icon stay in the DOM for
     screen readers, hidden under the opaque face of the art; if the image is missing or still loading, the label shows).
     Below 992 px the width comes from the art's ratio at 50 px height (a narrower column shrinks width and height together);
     at 992 px and wider the desktop row sets one height for all five (PANEL LAYOUT).
   - Title pill and result box: horizontal 3-slice (border-image): the caps keep their shape, the middle stretches.
   - Card background: stretched to the card (100% 100%) for now; the distortion per card type is measured in the log.

   Colour-law option B (owner, 2026-09-27): the ART applies only on the default palette, i.e. when no demo-panel preview (a
   non-empty style#dp-overrides) and no published palette (style#mh-theme-seeds) is on the page. Under either, the clone renders
   like webold3 (HTML labels, gradients) except the ALWAYS ON changes below.
   Timing: the layout echoes the whole page inside the head; the preview / published style elements are spliced at the first
   literal head-closing tag, and the theme class arrives with the body tag, both after the page. So the gate has two parts:
   - GEOMETRY (sizes, borders, fallback surfaces, light label ink) uses a bare "body": on the default palette the panel has its
     final geometry from the first paint, and nothing moves when the images arrive;
   - IMAGES (every url()) also need "body.theme-webold3-img": no image is requested before the page can know about a stored
     preview or a published palette (review r2: otherwise a 5 s image flash at 1.6 Mbps under a preset).
   Under a stored preview or a published palette the geometry starts as on the default palette and switches back to webold3's
   when that style element is parsed (one jump, no image). No palette is published for this theme.
   Browsers without :has() drop every gated rule: the webold3 look plus the always-on changes, never a broken one. */

/* ── ALWAYS ON ─────────────────────────────────────────────────────────────── */
:root body .skin-btn{
  position:relative; isolation:isolate; color:var(--skin-ink, var(--ink-on-light)); border-color:var(--skin-edge, transparent);
  --bs-btn-color:var(--skin-ink, var(--ink-on-light)); --bs-btn-hover-color:var(--skin-ink, var(--ink-on-light)); --bs-btn-active-color:var(--skin-ink, var(--ink-on-light)); --bs-btn-disabled-color:var(--skin-ink, var(--ink-on-light));
  --bs-btn-hover-bg:transparent; --bs-btn-active-bg:transparent; --bs-btn-disabled-bg:transparent;
  --bs-btn-hover-border-color:var(--skin-edge, transparent); --bs-btn-active-border-color:var(--skin-edge, transparent); --bs-btn-disabled-border-color:var(--skin-edge, transparent);
}
:root body .skin-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:transparent;transition:background-color .15s ease}
/* The tint variables are set only where a tint applies (LINE and info, below). */
:root body .skin-btn:hover::after{background:var(--skin-tint-hover, transparent)}
:root body .skin-btn:active::after{background:var(--skin-tint-active, transparent)}
:root body .skin-btn:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px}
:root body #login .skin-btn--login{--skin-ink:var(--ink-on-light);--skin-edge:var(--accent-bright)}
:root body #login .skin-btn--register{--skin-ink:var(--ink-on-light);--skin-edge:var(--accent-bright)}
:root body .skin-btn--forgot{--skin-ink:var(--ink-on-light);--skin-edge:var(--ink-bright)}
/* LINE: light text on the LINE brand green was 2.10:1 in webold3. The fallback is darkened toward --seed-ink (tokens only):
   55% gives 6.46:1 on the shipped seeds and stays >= 4.5 for any --seed-ink up to a mid-dark grey. The var() fallback on
   --line-color (declared only in shared /assets/v2/main.css:13) keeps themeDeclGraph at blocking=0. LINE has no art yet:
   it keeps this look on every palette. */
:root body .skin-btn--line{--skin-ink:var(--ink-bright);--skin-edge:transparent;height:50px;border-radius:1rem;
  --skin-fb:color-mix(in srgb,var(--line-color, var(--state-success)) 55%,var(--seed-ink));
  --bs-btn-bg:var(--skin-fb, var(--state-success));--bs-btn-hover-bg:var(--skin-fb, var(--state-success));--bs-btn-active-bg:var(--skin-fb, var(--state-success));
  background:var(--skin-fb, var(--state-success))}
/* info (อัตราจ่าย, กฎกติกา): light text (forced by a Bootstrap text utility) on --state-success was 3.30:1 in webold3; 70% gives 6.03:1. */
:root body .skin-btn--info{--skin-ink:var(--ink-bright);--skin-edge:var(--ink-bright);
  --skin-fb:color-mix(in srgb,var(--state-success) 70%,var(--seed-ink));
  background:var(--skin-fb, var(--state-success))}
/* Light-ink slots: dark hover/press tints only raise contrast, so they apply under every palette. */
:root body .skin-btn--line,
:root body .skin-btn--info{
  --skin-tint-hover:color-mix(in srgb,var(--seed-ink) 14%,transparent); --skin-tint-active:color-mix(in srgb,var(--seed-ink) 28%,transparent)}
/* red pill: dark text on the shared literal red (assets/css/main.css:94-97) was 4.09:1 in webold3; the fixed light pole gives 5.13:1. */
:root body .skin-pill{color:var(--skin-ink, var(--ink-on-light))}
:root body .skin-pill--thai{--skin-ink:var(--ink-on-light)}
:root body .skin-pill--intl{--skin-ink:var(--ink-bright)}

/* LINE (สมัครผ่านแอดมิน): dropped by the owner (2026-09-28 23:0x). Hidden at every width and under every palette; the markup
   stays. Its wrapper goes too (no empty gap in the mobile column). The LINE colour rules above stay for a later re-enable. */
:root body .skin-btn--line{display:none !important}
:root body .d-flex:has(> .skin-btn--line){display:none !important}
/* the same wrapper without :has() (older browsers; it matches only the LINE wrapper), and webold3's desktop row 2 without it */
:root body #login + .row .flex-column.flex-lg-row > .d-flex.flex-fill{display:none !important}
@media (min-width: 992px){
  :root body #login + .row .flex-column.flex-lg-row > .d-flex:first-child{flex:1 1 auto}
  :root body #login + .row{column-gap:.5rem; flex-wrap:nowrap}
}

/* Button aspect ratios (the trimmed art, width/height). Used by the image geometry (default palette) and by the desktop row in
   both states (images, or HTML labels under a preset / published palette). */
:root body #login .skin-btn--login{--skin-ar:463/140}
:root body #login .skin-btn--register{--skin-ar:486/146}
:root body .skin-btn--forgot{--skin-ar:1059/125}
:root body .skin-btn--info[data-bs-target="#price-rate"]{--skin-ar:466/131}
:root body .skin-btn--info[data-bs-target="#policy"]{--skin-ar:478/132}

/* Home-page logo over the site's own background art (IMG-LOGO, 2026-09-30), phones only (< 576 px; tablet and desktop unchanged).
   The page background is the site's admin art, set by partials/banner-home.ejs:3-5 as `center center / cover repeat fixed`: its
   scale and crop follow the phone's width AND height, while the logo (pages/index.ejs:82-86) sits at a fixed 0-88 px, so the gold
   ribbon lands on the logo on some phones and not on others. Here the art is anchored to the top and scaled with the width, and
   the logo is sized and placed in vw, so it tracks the art: on sabaideelotto's art (841x1870, ribbon ornament from row ~203 =
   24.1vw) the emblem (the logo file's rows 69-367 of 368) runs from 5.1vw to 23.1vw, over the temples and between the two
   8-balls. no-repeat: iOS Safari ignores `fixed` and would otherwise tile the width-scaled art down the page. */
@media not all and (min-width: 576px){
  :root body{background-size:100% auto !important; background-position:center top !important; background-repeat:no-repeat !important}
  :root body .container:has(> div > #login) > .col-8 > img{display:block; width:30vw; max-width:none !important; margin:1vw auto 0}
}

/* ── PANEL LAYOUT (both states; owner 2026-09-28 23:0x) ──────────────────────── */
/* Below 992 px: today's mobile rows. 576-991 px (fixed Bootstrap containers of 540 and 720 px): the panel is as wide as its
   widest row, ลืมรหัสผ่าน at 50 px (1059/125 x 50 = 423.6 px of content), and centred, so the rows do not float; the
   forgot/info row loses webold3's -12 px gutter outset and the form row its 4 px column padding there, so every row is flush
   with the card's content box. */
@media (min-width: 576px) and (max-width: 991.98px){
  :root body div:has(> #login .skin-btn--login){max-width:calc(424px + 2rem); margin-inline:auto}
  :root body div:has(> #login .skin-btn--login) > .row:has(.skin-btn--info),
  :root body div:has(> #login .skin-btn--login) > #login > .row{--bs-gutter-x:0}
}
/* Desktop (>= 992 px): row 1 = the two inputs, row 2 = เข้าสู่ระบบ · สมัครสมาชิก · ลืมรหัสผ่าน · อัตราจ่าย · กฎกติกา.
   The panel is one grid of five columns whose widths are proportional to the five aspect ratios (463/140 + 486/146 + 1059/125
   + 466/131 + 478/132 = 22.286), so every button is the same height H = (content width - 4 gaps of 8 px) / 22.286 and each
   image scales proportionally only. Row 1 spans the same five columns (both rows share their left and right edges) and is as
   tall as row 2 (1fr rows). The boxes in between (the form, Bootstrap rows and columns, flex rows) are display:contents: the
   form still owns its inputs and submit button, and no markup, attribute or handler changes. H is capped at 58 px: past that
   the content box stops growing and is centred (with Bootstrap's 1320 px container H peaks at 55.3 px, so the cap only guards
   a wider container). Visually login, register, forgot, rate, rules; the focusable ones (login, register, forgot; rate and
   rules are span[role=button] without tabindex, as in webold3) keep the DOM order, so Tab goes left to right. A screen
   reader follows the DOM: login, register, rate, rules, forgot (CSS cannot change that).
   Browsers without :has() skip the whole block (webold3's two-row desktop layout). */
@supports selector(:has(a)){
@media (min-width: 992px){
  :root body div:has(> #login .skin-btn--login){
    /* the 8 px gaps are fixed (Bootstrap .gap-2 is .5rem !important, which grows with a larger browser text size) */
    display:grid !important; gap:8px !important; container-type:inline-size;
    grid-template-columns:minmax(0,3.30714fr) minmax(0,3.32877fr) minmax(0,8.472fr) minmax(0,3.55725fr) minmax(0,3.62121fr);
    grid-template-rows:1fr 1fr; align-items:stretch;
    padding-inline:max(1rem, calc((100% - 1324.6px) / 2)) !important}
  :root body div:has(> #login .skin-btn--login) > #login,
  :root body div:has(> #login .skin-btn--login) > #login > .row,
  :root body div:has(> #login .skin-btn--login) > #login > .row > [class*="col-"],
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> .d-flex > .skin-btn--login),
  :root body div:has(> #login .skin-btn--login) > .row:has(.skin-btn--info),
  :root body div:has(> #login .skin-btn--login) > .row:has(.skin-btn--info) > [class*="col-"],
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> .skin-btn--info),
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> .d-flex > .skin-btn--forgot){display:contents !important}
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> .d-flex > #username){grid-row:1; grid-column:1 / -1; gap:8px !important}
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> .skin-btn--login){grid-row:2; grid-column:1}
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> .skin-btn--register){grid-row:2; grid-column:2}
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> .skin-btn--forgot){grid-row:2; grid-column:3}
  :root body div:has(> #login .skin-btn--login) .skin-btn--info[data-bs-target="#price-rate"]{grid-row:2; grid-column:4}
  :root body div:has(> #login .skin-btn--login) .skin-btn--info[data-bs-target="#policy"]{grid-row:2; grid-column:5}
  /* inputs as tall as the buttons at any text size (no vertical padding), and the user / lock icons inside the white boxes,
     so the two boxes span exactly row 2's edges with an 8 px seam (below 992 px the icons stay outside, as today) */
  :root body div:has(> #login .skin-btn--login) #username,
  :root body div:has(> #login .skin-btn--login) #password{align-self:stretch; padding-block:0; padding-left:calc(26px + .875em); border-radius:10px}
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> #username),
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> #password){position:relative}
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> #username) > i,
  :root body div:has(> #login .skin-btn--login) .d-flex:has(> #password) > i{position:absolute; left:14px; top:50%; translate:0 -50%; z-index:1; pointer-events:none;
    color:var(--ink-on-light) !important; color:color-mix(in srgb, var(--ink-on-light) 55%, transparent) !important}
  /* each button fills its column; the height follows from its aspect ratio (the inline heights of 50 px give way). The HTML
     label (shown under a preset / published palette, or while an image is missing) stays on one line: 16 px, or smaller
     when a larger browser text size would not fit สมัครสมาชิก's column (icon + gap + text = 6.4 em; 6.9 em with spare;
     100cqi = the panel's content width, so (100cqi - 32px) / 22.286 = H and H x 3.32877 = that column). */
  :root body div:has(> #login .skin-btn--login) #login .skin-btn--login,
  :root body div:has(> #login .skin-btn--login) #login .skin-btn--register,
  :root body div:has(> #login .skin-btn--login) .skin-btn--forgot,
  :root body div:has(> #login .skin-btn--login) .skin-btn--info{width:100%; max-width:100%; height:auto; aspect-ratio:var(--skin-ar, 3); align-self:center;
    white-space:nowrap; padding-block:0; padding-inline:.25em;
    font-size:min(1rem, 16px); font-size:min(1rem, calc(((100cqi - 32px) / 22.286 * 3.32877 - 2px - .5rem) / 6.9))}
  /* the info spans carry Bootstrap .p-1 (!important): its vertical padding would make them taller than H at a large text size */
  :root body div:has(> #login .skin-btn--login) .skin-btn--info{padding-block:0 !important}
}
}

/* ── DEFAULT PALETTE ONLY (option B gate), 1: GEOMETRY — bare "body", from the first paint ─────────── */

/* Buttons: sizes are the trimmed art (the --skin-ar ratios above). */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body #login .skin-btn--login,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body #login .skin-btn--register,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .skin-btn--forgot,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .skin-btn--info{
  /* the label is the fallback while the image is missing or not yet requested: dark ink on the light panel (IMG-SKIN2; the
     panel's sky art, or its light fallback surface). !important: the info spans carry Bootstrap .text-white (!important). */
  --skin-ink:var(--ink-on-light); color:var(--ink-on-light) !important; --skin-edge:transparent; --skin-tint-hover:transparent; --skin-tint-active:transparent;
  /* Bootstrap .flex-fill (flex:1 1 auto !important) would grow the button past its 50 px height on wide columns */
  flex:0 1 auto !important; min-width:0; max-width:100%; height:auto; aspect-ratio:var(--skin-ar, 3);
  padding:0; border-width:0; border-radius:12px; background:none; overflow:hidden; white-space:nowrap;
  /* the inline rules in pages/index.ejs and Bootstrap .shadow-sm set a box-shadow with !important; the art has its own */
  box-shadow:none !important}

/* Panel layout. Mobile keeps today's rows; each button is centred in its slot. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .d-flex:has(> .skin-btn--login),
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .d-flex:has(> .skin-btn--register),
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .d-flex:has(> .skin-btn--forgot),
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .d-flex:has(> .skin-btn--info){justify-content:center}
/* Login and register sit together as a centred pair. Their wrappers (.flex-fill, !important) stop growing, and may shrink
   below the art's width (min-width:0) so a narrow phone scales both buttons down instead of pushing register off the panel. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .d-flex:has(> .d-flex > .skin-btn--login){justify-content:center}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .d-flex:has(> .skin-btn--login),
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .d-flex:has(> .skin-btn--register){flex:0 1 auto !important;min-width:0}
/* Below 992 px each image button is 50 px high where its row allows (the desktop row sizes them in PANEL LAYOUT). The query is
   the exact complement of the desktop one, so no fractional viewport width falls between the two. */
@media not all and (min-width: 992px){
  :root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body #login .skin-btn--login,
  :root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body #login .skin-btn--register,
  :root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .skin-btn--forgot,
  :root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .skin-btn--info{width:calc(50px * var(--skin-ar, 3))}
}

/* Title pill: 3-slice. Art 711x147: left cap 180 px, right cap 181 px (ornament + the rounded blue end), middle 350 px.
   At the pill's 46 px height the caps are drawn 180*46/147 = 56.33 px and 181*46/147 = 56.64 px wide (border-image-width).
   The line box is pinned to 30 px so the height (and the cap scale) never changes.
   Layout borders are only the ornament outside the blue body (over the glyph rows the blue runs from art x 144 to 548:
   144*46/147 = 45.06 px and 162*46/147 = 50.69 px), so the content box is the blue body and the title centres in it. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .skin-pill{
  --skin-ink:var(--ink-bright);
  border-style:solid; border-color:transparent; border-width:0 50.69px 0 45.06px;
  /* .p-2 is !important; its 8 px sides would push the title off the blue body */
  padding-left:0 !important; padding-right:0 !important; line-height:30px; white-space:nowrap;
  /* One title size per card width: 20 px (webold3's size) where it fits, else the size at which the longest title,
     หวยลาวพัฒนา (จ,พ,ศ) (9.05 px of text per px of font; 9.23 with 2% spare), fits the blue body beside the flag
     (measured spare 1.6 px or more, 360-1400 px). Pill width = (card content + 8) * 5/6 - 8 (.col next to .col-2, g-2
     gutters); 100cqi = card content. Without container units the declaration drops, the title stays 20 px, and a title too
     long for the blue body pushes its column below the flag (nowrap: the pill's min width is title + blue insets) instead of
     running over the ornament. */
  font-size:clamp(12px, calc(((100cqi + 8px) * 5 / 6 - 8px - 95.75px - 6px) / 9.23), 20px);
  /* fallback under the art (image missing or not yet requested): a dark surface behind the light title, inside the blue body */
  background:color-mix(in srgb,var(--seed-canvas) 85%,var(--seed-fg)) content-box;
  box-shadow:none !important}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .skin-card{container-type:inline-size}
/* The intl pills keep the shared .bg-red colour (it is !important): clipped to the content box, under the opaque blue body. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .skin-pill--intl{background-clip:content-box}

/* Result boxes: 3-slice. Art 329x82: caps 24 px each side (the rounded ends), middle stretched. At the box's 30 px height the
   caps are 24*30/82 = 8.78 px. The text turns light (owner D13: contrast report-only). The shared .bg-white colour is
   !important and would show through the art's transparent corners and edge rows, so it is replaced by a dark fallback
   drawn inside the caps and 2 px in from the top and bottom edges. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body .skin-box{
  color:var(--ink-bright);
  border-style:solid; border-color:transparent; border-width:0 8.78px;
  background-color:transparent !important;
  background-image:linear-gradient(color-mix(in srgb,var(--seed-canvas) 85%,var(--seed-fg)),color-mix(in srgb,var(--seed-canvas) 85%,var(--seed-fg)));
  background-clip:content-box; background-origin:content-box; background-size:100% calc(100% - 4px); background-position:center; background-repeat:no-repeat}

/* Login panel (IMG-SKIN2, owner art bglongin.png): the panel turns light, a sky inside a thin gold frame (9-slice, IMAGES below).
   The frame is drawn inside the panel's existing 16 px ring: a 7 px transparent border (the gold line at the art's 0.5 scale)
   + 9 px padding, so every control keeps its IMG-LAYOUT position, 16 px from the panel's edge and 9 px inside the gold line.
   The light fallback surface (art missing or not yet requested) sits inside that border (padding-box), so it never shows
   outside the frame's rounded corners. Ink on the panel turns dark: labels (above), the phone icons, the focus ring. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> #login .skin-btn--login){
  position:relative; isolation:isolate;
  /* longhands: the border shorthand would also reset border-image (with !important, over the art rule below) */
  border-width:7px !important; border-style:solid !important; border-color:transparent !important; border-radius:18px !important; padding:9px !important;
  /* fixed-polarity inks (the art it stands in for is a fixed light sky, whatever the seeds) */
  background-color:color-mix(in srgb,var(--ink-bright) 92%,var(--ink-on-light)) !important; background-clip:padding-box;
  box-shadow:none !important; color:var(--ink-on-light) !important}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> #login .skin-btn--login) .skin-btn:focus-visible{outline-color:var(--ink-on-light)}
@media not all and (min-width: 992px){
  /* the user / lock icons sit on the panel below 992 px (inside the white inputs at 992 px and wider) */
  :root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> #login .skin-btn--login) #login i{color:var(--ink-on-light) !important}
}
@media not all and (min-width: 576px){
  /* phones: the forgot / info row loses webold3's -12 px gutter outset and the form row its 4 px column padding, so no control
     reaches into the gold frame (576-991 px already do this, PANEL LAYOUT) */
  :root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> #login .skin-btn--login) > .row:has(.skin-btn--info),
  :root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> #login .skin-btn--login) > #login > .row{--bs-gutter-x:0}
}
@media (min-width: 992px){
  /* the desktop 58 px cap, with the 7 px border: content = min(width - 32, 1324.6) */
  :root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> #login .skin-btn--login){padding-inline:max(9px, calc((100% - 1338.6px) / 2)) !important}
}

/* Section headers (IMG-SKIN2, owner art tab_cr.png): the four lottery-section headers of the home page (pages/index.ejs Thai
   section and partials/lottery-section.ejs x 3; the only ones in this theme). The marquee bar (.bg-dark-gold without .fs-4,
   not inside a section) keeps its look. Horizontal 3-slice on ::before (IMAGES below): art 795x98, lotus ends 152 art px
   each, plain blue middle; the bar is 2.2 em tall (art scale 2.2em/98), so each end is 152 x 2.2/98 = 3.412 em wide.
   The art sits on a pseudo-element of fixed height, so a badge that does not fit wraps BELOW the bar instead of stretching
   the ends. Text centred (the ends are symmetric) and kept 4 px clear of both ends by the padding.
   One size per header width: 1.5rem (today's fs-4) where it fits, else the size at which the longest header, the icon +
   หวยหุ้นต่างประเทศ VIP (10.875 em) + the รอผลหวย badge (5.4 em at 0.8 x) + 2 gaps of 8 px, fits between the ends:
   width >= 15.195 f + 16 + 2 x (3.412 f + 4) = 22.02 f + 24 (22.5 with spare), 100cqi = the header's width. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> .row .skin-card){container-type:inline-size}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> .row .skin-card) > .bg-dark-gold.fs-4{
  position:relative; isolation:isolate; color:var(--ink-bright); background:none; box-shadow:none !important;
  justify-content:center !important; line-height:1.5; min-height:2.2em;
  font-size:min(1.5rem, calc(1.275rem + .3vw), calc((100cqi - 24px) / 22.5)) !important;
  padding:.35em calc(3.412em + 4px) !important}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> .row .skin-card) > .bg-dark-gold.fs-4 > .badge{font-size:.8em !important}
/* the gaps stay 8 px (Bootstrap .gap-2 is .5rem !important, which grows with a larger browser text size and breaks the fit);
   a badge that wraps starts .35 em + 6 px below the title line, i.e. 6 px below the 2.2 em bar */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> .row .skin-card) > .bg-dark-gold.fs-4{column-gap:8px !important; row-gap:calc(.35em + 6px) !important}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> .row .skin-card) > .bg-dark-gold.fs-4 > .d-flex{gap:8px !important}
/* the fallback bar (art missing or not yet requested): a dark pill inset .15 em, inside the art's opaque shape (fixed-polarity
   inks: the art it stands in for is a fixed blue, whatever the seeds) */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body div:has(> .row .skin-card) > .bg-dark-gold.fs-4::before{
  content:""; position:absolute; z-index:-1; left:0; right:0; top:0; height:2.2em; pointer-events:none;
  border-radius:1.1em; padding:.15em; background:color-mix(in srgb,var(--ink-on-light) 80%,var(--ink-bright)) content-box}

/* ── DEFAULT PALETTE ONLY (option B gate), 2: IMAGES — "body.theme-webold3-img", from the body tag ───── */

/* Buttons: the art on ::before, whole (contain in a box of the art's own aspect ratio), above the label. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img #login .skin-btn--login::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img #login .skin-btn--register::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--forgot::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--info::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-position:center; background-size:contain; background-repeat:no-repeat; transition:filter .15s ease}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img #login .skin-btn--login::before{background-image:url('../images/skin/btn-login-v1.webp')}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img #login .skin-btn--register::before{background-image:url('../images/skin/btn-register-v1.webp')}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--forgot::before{background-image:url('../images/skin/btn-forgot-v1.webp')}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--info[data-bs-target="#price-rate"]::before{background-image:url('../images/skin/btn-rate-v1.webp')}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--info[data-bs-target="#policy"]::before{background-image:url('../images/skin/btn-rules-v1.webp')}
/* hover / press: a small brightness change on the art; the focus ring (always on) stays */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img #login .skin-btn--login:hover::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img #login .skin-btn--register:hover::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--forgot:hover::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--info:hover::before{filter:brightness(1.08)}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img #login .skin-btn--login:active::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img #login .skin-btn--register:active::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--forgot:active::before,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-btn--info:active::before{filter:brightness(.92)}

/* Cards: the frame is part of the image, so it is never cropped: stretched to the card for now (distortion in the log). */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-card--thai4,
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-card--thai{
  background:url('../images/skin/card-v1.webp') center / 100% 100% no-repeat, linear-gradient(0deg,var(--state-info) 0%,var(--accent-text) 79%)}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-card--intl{
  background:url('../images/skin/card-v1.webp') center / 100% 100% no-repeat, linear-gradient(0deg,var(--state-danger) 0%,var(--accent-text) 79%)}

/* Title pill and result boxes: the 3-slice art over the geometry above. */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-pill{
  border-image:url('../images/skin/pill-v1.webp') 0 181 0 180 fill / 0 56.64px 0 56.33px / 0 stretch}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img .skin-box{
  border-image:url('../images/skin/box-v1.webp') 0 24 fill / 0 8.78px / 0 stretch}

/* Login panel frame: 9-slice, 44 art px slices drawn at 22 px (0.5 scale): the corners never stretch, the plain edges and the
   soft sky do. The crest (cut out of the top band, the band refilled from the plain edge next to it) is its own piece,
   centred on the top edge at the same scale (77x26 art px = 38.5x13 px). */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img div:has(> #login .skin-btn--login){border-image:url('../images/skin/login-panel-v1.webp') 44 fill / 22px / 0 stretch}
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img div:has(> #login .skin-btn--login)::before{content:""; position:absolute; z-index:1; top:-7px; left:calc(50% - 19.25px); width:38.5px; height:13px; pointer-events:none;
  background:url('../images/skin/login-crest-v1.webp') center / 100% 100% no-repeat}
/* Section headers: the bar art on the fixed-height ::before (3-slice: the lotus ends keep their shape, the blue middle stretches). */
:root:not(:has(style#dp-overrides:not(:empty))):not(:has(style#mh-theme-seeds)) body.theme-webold3-img div:has(> .row .skin-card) > .bg-dark-gold.fs-4::before{border-width:0; border-style:solid; border-color:transparent; border-image:url('../images/skin/section-head-v1.webp') 0 152 fill / 0 3.412em / 0 stretch}