/* LMEX — mobile first (360px), breakpoints 640px / 1024px. Spec:
   docs/superpowers/specs/2026-11-07-visual-design.md. No external requests. */
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/noto-sans-thai-thai.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/noto-sans-thai-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Theme tokens: light by default; dark from the OS unless the visitor chose
   light, or when the visitor chose dark (data-theme set by the head script). */
:root{
--bg:#f7f8fb;--surface:#ffffff;--surface-2:#eef1f6;--text:#141821;--muted:#5b6475;--border:#dfe3ea;
--brand:#2346d6;--brand-contrast:#ffffff;--gold:#b07a00;--success:#0f8a4b;--danger:#c62828;--border-strong:#7d8696;
--shadow:0 1px 2px rgba(20,24,33,.06),0 2px 8px rgba(20,24,33,.06);
--r:12px;--r-in:8px;--w:48rem;--w-wide:64rem;--tap:44px;
--font:"Noto Sans Thai","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,sans-serif;
color-scheme:light dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
--bg:#0e1116;--surface:#161b22;--surface-2:#1f2630;--text:#e8ecf2;--muted:#9aa4b2;--border:#2a3340;
--brand:#7c97ff;--brand-contrast:#0e1116;--gold:#f2c14e;--success:#3fcf8e;--danger:#ff6b6b;--border-strong:#6b7789;--shadow:none}}
:root[data-theme=dark]{
--bg:#0e1116;--surface:#161b22;--surface-2:#1f2630;--text:#e8ecf2;--muted:#9aa4b2;--border:#2a3340;
--brand:#7c97ff;--brand-contrast:#0e1116;--gold:#f2c14e;--success:#3fcf8e;--danger:#ff6b6b;--border-strong:#6b7789;--shadow:none;color-scheme:dark}
:root[data-theme=light]{color-scheme:light}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:7rem}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--text);background:var(--bg);overflow-wrap:break-word}
@media (min-width:1024px){html{font-size:106.25%;scroll-padding-top:4.5rem}}
h1,h2,h3{line-height:1.35;margin:1.5rem 0 .75rem;font-weight:700}
h1{font-size:clamp(1.5rem,5vw,2.25rem);margin-top:.5rem}
h2{font-size:1.3125rem}
h3{font-size:1.125rem;font-weight:600}
p,ul,ol{margin:0 0 1rem}
a{color:var(--brand);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
img{height:auto}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
main:focus{outline:none}
.skip-link{position:absolute;left:8px;top:-100px;z-index:100;padding:10px 16px;background:var(--brand);color:var(--brand-contrast);border-radius:var(--r-in);font-weight:600;text-decoration:none}
.skip-link:focus{top:8px}

/* Header: sticky. Mobile: brand · language · theme on a 56px row, the nav
   as one horizontally scrollable 44px row below. Desktop: one 56px row. */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border)}
.site-header .bar{max-width:var(--w-wide);margin:0 auto;padding:0 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"brand . lang theme" "nav nav nav nav";align-items:center;column-gap:4px}
.wordmark{display:block;height:24px;width:auto}.wm-b{fill:var(--brand)}.wm-g{fill:var(--gold)}
.brand{grid-area:brand;display:inline-flex;align-items:center;min-height:56px;font-weight:700;font-size:1.25rem;letter-spacing:.04em;color:var(--text);text-decoration:none}
.site-nav{grid-area:nav;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 12px 4px;min-width:0}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a:focus-visible{outline-offset:-3px}
.site-nav a,.lang a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:var(--r-in);white-space:nowrap;text-decoration:none;color:var(--text)}
.site-nav a:hover,.lang a:hover{background:var(--surface-2)}
.site-nav a[aria-current=page]{background:var(--surface-2);color:var(--brand);font-weight:600}
.lang{grid-area:lang;display:flex}
.lang a{font-size:.875rem;color:var(--muted)}
.lang a[aria-current]{display:none}
.theme-toggle{grid-area:theme;visibility:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--tap);min-height:var(--tap);padding:0 10px;font:inherit;font-size:.875rem;color:var(--text);background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-in);cursor:pointer}
[data-theme] .theme-toggle{visibility:visible}
.theme-toggle:hover{background:var(--surface-2)}
[data-theme=light] .theme-icon path{display:none}
[data-theme=dark] .theme-icon circle{fill:currentColor}
@media (min-width:1024px){
.site-header .bar{grid-template-areas:"brand nav lang theme";column-gap:16px}
.site-nav{margin:0;padding:0}}
.root-header .bar{display:flex;justify-content:flex-end;min-height:56px;align-items:center}

/* Layout */
main{display:block;max-width:var(--w);margin:0 auto;padding:8px 16px 32px}
article>:first-child{margin-top:0}
article ul,article ol{padding-left:1.25rem}
article li+li{margin-top:.25rem}

/* Breadcrumb: compact, above the H1 */
.breadcrumb{margin:4px 0 0;font-size:.875rem;color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;min-width:0}
.breadcrumb li+li::before{content:"›";margin:0 8px;color:var(--muted)}
.breadcrumb a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--muted);overflow-wrap:anywhere}
.breadcrumb a[aria-current]{color:var(--text);text-decoration:none}

/* Cards */
.lotto-latest,.lotto-recent,.lotto-first,.lotto-hl,.provider-cards a{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 20px;border-radius:var(--r-in);background:var(--brand);color:var(--brand-contrast);font-weight:600;text-decoration:none}

/* Banner slots keep their reserved sizes; the empty frame blends in. */
[data-slot]:empty{display:none}
[data-slot]{text-align:center;max-width:var(--w);margin:12px auto}
[data-slot] a{display:inline-block;line-height:0}
[data-slot] img{display:block;max-width:100%;height:auto;border-radius:var(--r-in)}
.slot-reserve[data-slot=header],.slot-reserve[data-slot=footer]{aspect-ratio:728/90;max-width:728px;width:calc(100% - 32px)}
.slot-reserve[data-slot=in-content]{min-height:250px;max-width:300px}
.slot-reserve[data-slot]:empty{display:block;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--r-in)}

/* Tools */
.tool{margin:16px 0 24px}
.provider-cards,.game-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.provider-cards{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.game-grid{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.provider-cards a,.game-grid a{display:block;text-decoration:none;color:var(--text)}
.provider-cards a{padding:12px 16px;min-height:var(--tap)}
.provider-cards span{display:block;font-size:.875rem;color:var(--muted)}
.game-grid img,.demo-player img{display:block;max-width:100%;height:auto;border-radius:var(--r-in)}
.game-grid span{display:block;margin-top:4px}
.demo-player{position:relative;margin:0 auto 16px;text-align:center}
.demo-player button,.lotto-check button{min-height:var(--tap);padding:0 20px;font:inherit;font-weight:600;border:0;border-radius:var(--r-in);background:var(--brand);color:var(--brand-contrast);cursor:pointer}
.demo-player button{margin-top:12px}
.table-wrap{overflow-x:auto;margin:0 0 16px}
.facts{border-collapse:collapse;margin:0}
.facts th,.facts td{padding:8px 12px;border:1px solid var(--border);text-align:left}
.facts th{background:var(--surface-2);font-weight:600}

/* Lottery: numbers are the product */
.lotto-draw h2{margin-top:8px}
.lotto-status{margin:0 0 16px;padding:14px 16px;font-weight:600;background:var(--surface);border:2px solid var(--gold);border-radius:var(--r)}
.lotto-hl-nums,.lotto-num,.lotto-grid,.lotto-latest-nums,.lotto-check input{font-variant-numeric:tabular-nums}
.lotto-label,.lotto-amount{display:block}
.lotto-amount{margin:0;color:var(--muted);font-size:.8125rem}
.lotto-highlights{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 16px}
.lotto-hl{padding:10px 6px;text-align:center;border-radius:16px;min-width:0}
.lotto-hl .lotto-label{font-size:.8125rem;font-weight:600;color:var(--muted)}
.lotto-hl-nums{display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px;margin:2px 0}
.lotto-hl strong{font-size:1.375rem;line-height:1.3;letter-spacing:.04em}
.lotto-hl .lotto-amount{font-size:.75rem}
/* First prize: hero card with gold numbers (large text: AA needs 3:1) */
.lotto-hl[data-hl=first]{grid-column:1/-1;padding:20px 12px;border-radius:var(--r);border-width:2px;border-color:var(--gold);background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.lotto-hl[data-hl=first] .lotto-label{font-size:1rem;color:var(--text)}
.lotto-hl[data-hl=first] strong{font-size:clamp(2.5rem,13vw,4rem);line-height:1.15;letter-spacing:.08em;color:var(--gold)}
.lotto-hl[data-hl=first] .lotto-amount{font-size:.875rem}
/* Checker: prominent card */
.lotto-check{margin:0 0 24px;padding:16px;background:var(--surface);border:2px solid var(--brand);border-radius:var(--r);box-shadow:var(--shadow)}
.lotto-check label{display:block;margin-bottom:8px;font-weight:700;font-size:1.0625rem}
.lotto-check-row{display:flex;flex-wrap:wrap;gap:8px}
.lotto-check input{flex:999 1 9rem;min-width:0;min-height:52px;padding:0 12px;font:inherit;font-size:1.5rem;letter-spacing:.12em;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-in)}
.lotto-check input::placeholder{color:var(--muted);letter-spacing:0;font-size:1rem}
.lotto-check button{min-height:52px;flex:1 0 auto}
.lotto-result:empty{display:none}
.lotto-result{margin-top:12px;padding:8px 12px;font-weight:600;border-left:4px solid var(--success);background:var(--surface-2);border-radius:0 var(--r-in) var(--r-in) 0}
.lotto-result p,.lotto-result ul{margin:4px 0}
.lotto-noscript{margin:8px 0 0;color:var(--muted);font-size:.875rem}
/* Full prize table */
.lotto-first{padding:12px 16px;margin:0 0 8px}
.lotto-first h3,.lotto-prize h3{margin:0 0 2px}
.lotto-first-nums{margin:4px 0 0}
.lotto-first .lotto-num{font-size:1.75rem;letter-spacing:.08em;color:var(--gold)}
.lotto-prize{margin:20px 0 0}
.lotto-prize .lotto-amount{margin-bottom:8px}
.lotto-grid{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr))}
article .lotto-grid{padding:0}
article .lotto-grid li+li{margin-top:0}
.lotto-grid li{padding:6px 4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-in);text-align:center;font-size:1.0625rem;letter-spacing:.06em}
.lotto-prize[data-prize=last3f] li,.lotto-prize[data-prize=last3b] li,.lotto-prize[data-prize=last2] li{font-size:1.5rem;font-weight:700}
.lotto-pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:24px 0}
.lotto-pager a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-in);background:var(--surface);text-decoration:none}
.lotto-pager a[rel=next]{margin-left:auto}
.lotto-latest,.lotto-recent{padding:16px}
.lotto-latest p{margin:0 0 4px}
.lotto-latest-nums span{display:inline-block;margin-right:16px}
.lotto-latest-nums strong{font-size:1.375rem;letter-spacing:.06em;color:var(--gold)}
.lotto-recent h2{margin-top:0}
article .lotto-recent ul{list-style:none;padding:0;margin:0}
article .lotto-recent li+li{margin-top:0;border-top:1px solid var(--border)}
.lotto-recent a{display:flex;align-items:center;min-height:var(--tap);padding:6px 0}

/* Football results */
.fb-table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.9375rem}
.fb-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fb-table th{padding:6px 6px;text-align:left;font-size:.8125rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--border-strong)}
.fb-table td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
.fb-time{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.fb-home{text-align:right}
.fb-score{text-align:center;white-space:nowrap}
.fb-score strong{display:block;font-size:1.125rem;font-variant-numeric:tabular-nums}
.fb-score small{display:block;font-size:.75rem;color:var(--muted)}
.fb-live .fb-live-score{color:var(--accent,#c62828)}
.fb-live .fb-live-status{color:var(--accent,#c62828);font-weight:600}
.fb-red{display:inline-block;font-size:.6875rem;color:#fff;background:#c62828;border-radius:3px;padding:0 4px;margin-left:4px}
.fb-matchlive{font-size:1.5rem;font-variant-numeric:tabular-nums;margin:0 0 12px}
.fb-matchlive[hidden]{display:none}
.fb-match{text-align:left}
.fb-odds td small{display:block;font-size:.75rem;color:var(--muted)}
.fb-odds td strong{font-weight:600}
.fb-formrow{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}
.fb-form{display:inline-block;min-width:1.4em;text-align:center;font-size:.75rem;font-weight:700;border-radius:3px;padding:0 3px;color:#fff;background:#6b7280}
.fb-form-w{background:#15803d}.fb-form-d{background:#a16207}.fb-form-l{background:#b91c1c}
.fb-tip,.fb-analysis{border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin:0 0 12px}
.fb-tip p,.fb-analysis p{margin:6px 0}
@media (max-width:480px){.fb-table{font-size:.875rem}.fb-odds td small{font-size:.6875rem}.fb-table th,.fb-table td{padding:8px 3px}.fb-table th:first-child,.fb-table td:first-child{padding-left:0}}

/* Footer */
.site-footer{margin-top:32px;background:var(--surface);border-top:1px solid var(--border);color:var(--muted);font-size:.875rem}
.footer-inner{max-width:var(--w-wide);margin:0 auto;padding:16px 16px 24px}
.footer-nav ul,.footer-lang ul{list-style:none;margin:0 -8px 8px;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.footer-nav a,.footer-lang a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;color:var(--text)}
.footer-lang a[aria-current]{color:var(--muted);text-decoration:none}
.rg-note{display:flex;gap:10px;align-items:flex-start;margin:8px 0 12px}
.rg-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:2px solid var(--danger);border-radius:50%;color:var(--danger);font-weight:700;font-size:.8125rem}
.copyright{margin:0}

/* Root language selector: a clean landing */
.root{text-align:center;padding-top:clamp(24px,8vh,72px)}
.root h1{font-size:clamp(2.5rem,12vw,4rem);letter-spacing:.06em;margin:0 0 8px}
.root-intro{max-width:36rem;margin:0 auto 24px;color:var(--muted)}
.lang-chooser ul{list-style:none;margin:0 auto;padding:0;display:grid;gap:12px;max-width:36rem}
.lang-chooser a{display:flex;align-items:center;justify-content:space-between;min-height:88px;padding:0 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);color:var(--text);text-decoration:none;font-size:1.5rem;font-weight:700}
.lang-chooser a:hover{border-color:var(--brand)}
.lang-go{color:var(--brand)}
@media (min-width:640px){.lang-chooser ul{grid-template-columns:1fr 1fr}}

.notfound{padding:24px 0}