/* ============================================================================================
   Bet25 TH — SIDEBAR family (templates/sidebar-shell), own skin.

   Differs from the family demo and from every other SIDEBAR land in the fleet on purpose:
   the demo and all eight siblings are dark end to end. Here only the CHROME is dark — the rail,
   the phone top bar and the bottom bar, i.e. everything that carries the logo, whose "Bet" is
   white. The reading pane is light "paper", because long Thai text with stacked vowels and tone
   marks reads better dark-on-light, and it makes the land structurally unlike its neighbours
   rather than a recolour of them.

   Tokens:  --sh-*  chrome (dark)      --mp-*  reading pane (light)
   Thai:    no letter-spacing, no text-transform, line-height >= 1.8 (land-fixes-log FIX-178).
   ============================================================================================ */

:root {
  /* ---- chrome (dark) ---------------------------------------------------------------------- */
  --sh-bg:          #13111b;
  --sh-surface:     #1a1726;
  --sh-surface-2:   #242036;
  --sh-line:        #322c49;
  --sh-ink:         #f3f0fc;
  --sh-ink-2:       #c3bcdc;
  --sh-ink-3:       #9a93b8;
  --sh-brand:       #b69dff;   /* violet as TEXT on the dark chrome */
  --sh-brand-deep:  #6a3bd6;   /* violet as FILL under white ink */
  --sh-brand-ink:   #ffffff;
  --sh-brand-soft:  rgba(124, 76, 229, 0.16);
  --sh-brand-line:  rgba(182, 157, 255, 0.34);
  --sh-accent:      #ff7a59;   /* coral: the one action colour of the land */
  --sh-accent-ink:  #2b0b02;

  /* ---- reading pane (light) --------------------------------------------------------------- */
  --mp-paper:       #f6f4fb;
  --mp-card:        #ffffff;
  --mp-tint:        #efeafc;
  --mp-line:        #e1dbf0;
  --mp-ink:         #1c1830;
  --mp-ink-2:       #4b4563;
  --mp-ink-3:       #625b7c;
  --mp-brand:       #5b2fd0;   /* violet as TEXT on paper */
  --mp-brand-deep:  #4a22b5;
  --mp-brand-fill:  #6a3bd6;
  --mp-coral:       #ff7a59;
  --mp-coral-deep:  #f0603c;
  --mp-coral-ink:   #2b0b02;
  --mp-ok:          #147a4a;
  --mp-on-fill:     #ffffff;   /* ink on the violet fills */

  --mp-radius:      16px;
  --mp-radius-sm:   10px;
  --mp-measure:     44rem;
  --sh-side-w:      272px;
  --sh-bar-h:       64px;
  --sh-radius:      14px;
  --sh-radius-sm:   9px;
  --sh-gap:         16px;

  --f-text:  "Sarabun", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --f-head:  "Prompt", "Sarabun", "Leelawadee UI", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--mp-paper);
  color: var(--mp-ink);
  font: 400 1.0625rem/1.85 var(--f-text);
  letter-spacing: normal;
  hyphens: none;
  overflow-wrap: break-word;   /* NOT anywhere: that lets Thai break mid-word; ICU dictionary breaks need normal */
  word-break: normal;
  line-break: auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mp-brand); text-underline-offset: 3px; }
a:hover { color: var(--mp-brand-deep); }
:focus-visible { outline: 3px solid var(--mp-coral); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-head); color: var(--mp-ink); letter-spacing: normal; text-transform: none; }
h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.35; margin: 0 0 .5rem; font-weight: 700; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.4; margin: 0 0 .9rem; font-weight: 700; }
h3 { font-size: 1.15rem; line-height: 1.45; margin: 1.6rem 0 .6rem; font-weight: 600; }
p { margin: 0 0 1rem; }
[id] { scroll-margin-top: 84px; }
@media (max-width: 1080px) { [id] { scroll-margin-top: 72px; } }

.mp-skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--sh-accent); color: var(--sh-accent-ink); font-weight: 700; text-decoration: none;
}
.mp-skip-link:focus { top: 12px; }

/* ============================================================ shell ======================== */
.mp-sh {
  display: grid;
  grid-template-columns: var(--sh-side-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
}
.mp-sh-main { min-width: 0; background: var(--mp-paper); }

.mp-sh-side {
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 16px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--sh-surface);
  border-right: 1px solid var(--sh-line);
  color: var(--sh-ink);
}
.mp-sh-brand { display: inline-flex; align-items: center; padding: 4px 6px; text-decoration: none; }
.mp-sh-brand img { width: 150px; height: auto; }

.mp-sh-offer {
  position: relative;
  padding: 16px 14px 14px;
  border-radius: var(--sh-radius);
  background: linear-gradient(160deg, rgba(124, 76, 229, .34), rgba(124, 76, 229, .10) 70%), var(--sh-surface-2);
  border: 1px solid var(--sh-brand-line);
}
.mp-sh-offer-eyebrow { margin: 0 0 4px; font-size: .8rem; font-weight: 600; color: var(--sh-brand); }
.mp-sh-offer-h { margin: 0 0 4px; font: 700 1.5rem/1.25 var(--f-head); color: var(--sh-ink); }
.mp-sh-offer-p { margin: 0 0 12px; font-size: .86rem; line-height: 1.6; color: var(--sh-ink-2); }
.mp-sh-offer .mp-btn { width: 100%; }

.mp-sh-navgroup { margin: 4px 0 -8px; padding: 0 8px; font-size: .8rem; font-weight: 600; color: var(--sh-ink-3); }
.mp-sh-nav { display: flex; flex-direction: column; gap: 2px; }
.mp-sh-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--sh-radius-sm);
  font-size: .95rem; line-height: 1.5; font-weight: 500;
  color: var(--sh-ink-2); text-decoration: none;
}
.mp-sh-nav a svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--sh-ink-3); }
.mp-sh-nav a:hover { background: var(--sh-brand-soft); color: var(--sh-ink); }
.mp-sh-nav a:hover svg { color: var(--sh-brand); }
.mp-sh-side-foot {
  margin-top: auto; padding: 12px;
  border-radius: var(--sh-radius);
  background: var(--sh-bg); border: 1px solid var(--sh-line);
}
.mp-sh-side-foot p { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--sh-ink-2); }
.mp-sh-side-foot strong { color: var(--sh-ink); }

/* drawer: checkbox hack, position FIXED (see templates/sidebar-shell/shell.css for why) */
.mp-sh-drawer {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0; opacity: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap; pointer-events: none;
}
.mp-sh-burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: var(--sh-radius-sm);
  border: 1px solid var(--sh-line); background: var(--sh-surface-2); color: var(--sh-ink);
  cursor: pointer;
}
.mp-sh-burger svg { width: 22px; height: 22px; }
.mp-sh-drawer:focus-visible ~ .mp-sh .mp-sh-burger { outline: 3px solid var(--sh-accent); outline-offset: 2px; }
.mp-sh-overlay { display: none; }

/* top bar: dark on every width — it is where the logo lives on phones */
.mp-sh-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 28px;
  background: var(--sh-surface);
  border-bottom: 1px solid var(--sh-line);
}
.mp-sh-topbar-logo { display: none; }
.mp-sh-topbar-logo img { width: 112px; height: auto; }
.mp-sh-topbar-t {
  min-width: 0; margin: 0;
  font-size: .95rem; line-height: 1.5; color: var(--sh-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-sh-topbar-t b { color: var(--sh-ink); }
.mp-sh-topbar-cta { margin-left: auto; flex: 0 0 auto; }

/* bottom bar (phones): four labelled slots around a raised coral action */
.mp-sh-bar { display: none; }
.mp-sh-bar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 46px; padding: 4px 2px;
  font-size: .72rem; font-weight: 600; line-height: 1.4;
  color: var(--sh-ink-2); text-decoration: none; cursor: pointer;
}
.mp-sh-bar-item svg { width: 21px; height: 21px; }
.mp-sh-bar-item:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: -2px; }
.mp-sh-fab {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-top: -22px;
  border-radius: 34%;
  background: var(--sh-accent); color: var(--sh-accent-ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 0 0 4px var(--sh-surface), 0 0 0 5px var(--sh-brand-line);
}
.mp-sh-fab svg { width: 26px; height: 26px; }
.mp-sh-bar-center .mp-sh-bar-label { color: var(--sh-ink); }

/* ============================================================ buttons ====================== */
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px;
  border: 0; border-radius: 12px;
  font: 700 1rem/1.3 var(--f-head); text-decoration: none; text-align: center;
  background: linear-gradient(180deg, var(--mp-coral), var(--mp-coral-deep));
  color: var(--mp-coral-ink);
  box-shadow: 0 6px 16px rgba(240, 96, 60, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mp-btn:hover { color: var(--mp-coral-ink); transform: translateY(-1px); box-shadow: 0 9px 22px rgba(240, 96, 60, .36); }
.mp-btn--violet { background: var(--mp-brand-fill); color: var(--mp-on-fill); box-shadow: 0 6px 16px rgba(106, 59, 214, .28); }
.mp-btn--violet:hover { color: var(--mp-on-fill); background: var(--mp-brand-deep); }
.mp-btn--ghost { background: transparent; color: var(--mp-brand); box-shadow: inset 0 0 0 2px var(--mp-brand); }
.mp-btn--ghost:hover { color: var(--mp-brand-deep); background: var(--mp-tint); }
.mp-btn--sm { min-height: 40px; padding: 7px 16px; font-size: .92rem; }
.mp-btn--lg { min-height: 54px; padding: 12px 30px; font-size: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .mp-btn { transition: none; } .mp-btn:hover { transform: none; } }

/* ============================================================ page body ==================== */
.mp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.mp-sect { padding: 38px 0 6px; }
.mp-sect--band { background: var(--mp-card); border-block: 1px solid var(--mp-line); padding-bottom: 30px; }
.mp-sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mp-sect-head h2 { margin-bottom: .6rem; }
.mp-sect-head a { font-weight: 600; font-size: .95rem; }
.mp-prose { max-width: var(--mp-measure); }
.mp-prose > * { max-width: var(--mp-measure); }
.mp-prose ul, .mp-prose ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.mp-prose li { margin: .25rem 0; }
.mp-prose strong { color: var(--mp-ink); font-weight: 700; }
.mp-lead { font-size: 1.12rem; color: var(--mp-ink-2); }

/* ---- hero -------------------------------------------------------------------------------- */
.mp-hero { padding: 34px 0 28px; background:
  radial-gradient(90% 120% at 100% 0%, rgba(124, 76, 229, .16), transparent 60%),
  linear-gradient(180deg, var(--mp-card), var(--mp-paper)); border-bottom: 1px solid var(--mp-line); }
.mp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 32px; align-items: start; }
.mp-hero-eyebrow { margin: 0 0 .4rem; font-weight: 600; color: var(--mp-brand); }
.mp-hero-sub { font-size: 1.1rem; color: var(--mp-ink-2); margin-bottom: 1.1rem; }
.mp-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.1rem; }
.mp-hero-art { position: relative; }
.mp-hero-art img { width: 250px; border-radius: 18px; box-shadow: 0 20px 44px rgba(28, 24, 48, .28); }
.mp-score {
  position: absolute; left: -18px; bottom: 22px;
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--mp-brand-fill); color: #fff; box-shadow: 0 0 0 5px var(--mp-card);
  font: 700 1.55rem/1 var(--f-head); text-align: center;
}
.mp-score small { display: block; font: 600 .72rem/1.3 var(--f-text); color: #fff; }

.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 1rem; list-style: none; }
.mp-chips li {
  padding: 4px 12px; border-radius: 999px;
  background: var(--mp-tint); color: var(--mp-ink); border: 1px solid var(--mp-line);
  font-size: .9rem; line-height: 1.6; font-weight: 600;
}

/* «ลิงก์ที่ใช้งานได้» widget */
.mp-link {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 12px 14px; margin: 0 0 1rem;
  border-radius: var(--mp-radius-sm); border: 1px solid #bfe5d0; background: #f0faf4;
}
.mp-link-dot { width: 10px; height: 10px; border-radius: 50%; background: #1f9d62; box-shadow: 0 0 0 4px rgba(31, 157, 98, .18); }
.mp-link-status { font-weight: 700; color: var(--mp-ok); }
.mp-link-date { font-size: .9rem; color: var(--mp-ink-2); }
.mp-link .mp-btn { margin-left: auto; }

.mp-byline { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--mp-ink-2); }
.mp-byline a { font-weight: 600; }
.mp-updated { display: inline; }

/* ---- games -------------------------------------------------------------------------------- */
.mp-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
  margin: 6px 0 18px; padding: 0; list-style: none;
}
.mp-tile { position: relative; display: block; border-radius: 14px; overflow: hidden; text-decoration: none;
  background: var(--sh-surface); box-shadow: 0 6px 16px rgba(28, 24, 48, .14); }
.mp-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mp-tile-cap { display: block; padding: 8px 10px 10px; background: var(--sh-surface); }
.mp-tile-name { display: block; font: 600 .92rem/1.4 var(--f-head); color: var(--sh-ink); }
.mp-tile-meta { display: block; font-size: .8rem; line-height: 1.5; color: var(--sh-ink-2); }
.mp-tile:hover { box-shadow: 0 0 0 3px var(--mp-brand-fill), 0 10px 22px rgba(28, 24, 48, .2); }

.mp-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 0 18px; }
.mp-live-card { display: block; border-radius: 14px; overflow: hidden; text-decoration: none; background: var(--sh-surface); }
.mp-live-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mp-live-card span { display: block; padding: 8px 12px 10px; font: 600 .92rem/1.4 var(--f-head); color: var(--sh-ink); }
.mp-live-card:hover { box-shadow: 0 0 0 3px var(--mp-brand-fill); }

.mp-provs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; padding: 0; list-style: none; }
.mp-provs li { padding: 6px 14px; border-radius: 10px; background: var(--mp-card); border: 1px solid var(--mp-line);
  font-weight: 600; font-size: .92rem; color: var(--mp-ink); }

/* ---- offer cards (skill rule 15) ---------------------------------------------------------- */
.mp-offer {
  position: relative; max-width: var(--mp-measure);
  margin: 1.6rem 0; padding: 26px 22px 20px;
  border-radius: var(--mp-radius);
  background: var(--mp-card); border: 1px solid var(--mp-line);
  box-shadow: 0 10px 26px rgba(28, 24, 48, .08);
}
.mp-offer[data-badge]::before {
  content: attr(data-badge);
  position: absolute; top: -13px; left: 20px;
  padding: 2px 12px; border-radius: 999px;
  background: var(--mp-brand-fill); color: #fff;
  font: 600 .82rem/1.7 var(--f-text); letter-spacing: normal; text-transform: none;
}
.mp-offer-h { margin: 0 0 .3rem; font: 700 1.3rem/1.4 var(--f-head); color: var(--mp-ink); }
.mp-offer-sub { margin: 0 0 1rem; font-size: .95rem; color: var(--mp-ink-2); }
.mp-offer .mp-btn { width: 100%; }
.mp-offer--spot { background: linear-gradient(150deg, #2a1f4f, #1a1726 70%); border-color: transparent; }
.mp-offer--spot .mp-offer-h { font-size: 1.6rem; color: #fff; }
.mp-offer--spot .mp-offer-sub { color: var(--sh-ink-2); }
.mp-offer--spot[data-badge]::before { background: var(--mp-coral); color: var(--mp-coral-ink); }

/* ---- tables, steps, specs, pros/cons ----------------------------------------------------- */
.mp-table-wrap { overflow-x: auto; margin: 1rem 0 1.4rem; border-radius: var(--mp-radius-sm); border: 1px solid var(--mp-line); background: var(--mp-card); }
.mp-table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.65; }
.mp-table caption { caption-side: top; text-align: left; padding: 12px 14px 4px; font-weight: 700; color: var(--mp-ink); }
.mp-table th, .mp-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--mp-line); }
.mp-table th { background: var(--mp-tint); color: var(--mp-ink); font-weight: 700; letter-spacing: normal; text-transform: none; }
.mp-table td:first-child { font-weight: 600; color: var(--mp-ink); white-space: nowrap; }
@media (max-width: 640px) { .mp-table td:first-child { white-space: normal; } }

.mp-prose .mp-steps { list-style: none; counter-reset: st; padding: 0; margin: .6rem 0 1.4rem; display: grid; gap: 10px; }
.mp-step { counter-increment: st; position: relative; padding: 12px 14px 12px 60px; border-radius: var(--mp-radius-sm);
  background: var(--mp-card); border: 1px solid var(--mp-line); }
.mp-step::before { content: counter(st); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; background: var(--mp-tint); color: var(--mp-brand); font: 700 1rem/1 var(--f-head); }
.mp-step-t { display: block; font-family: var(--f-head); font-weight: 600; color: var(--mp-ink); }
.mp-step p { margin: .15rem 0 0; font-size: .96rem; color: var(--mp-ink-2); }

.mp-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1rem 0 1.4rem;
  max-width: var(--mp-measure); border-radius: var(--mp-radius-sm); overflow: hidden; border: 1px solid var(--mp-line); background: var(--mp-card); }
.mp-specs div { padding: 10px 14px; border-top: 1px solid var(--mp-line); }
.mp-specs div:nth-child(-n+2) { border-top: 0; }
.mp-specs div:nth-child(odd) { border-right: 1px solid var(--mp-line); }
.mp-specs dt { font-size: .85rem; color: var(--mp-ink-3); font-weight: 600; }
.mp-specs dd { margin: 0; font-weight: 700; color: var(--mp-ink); }
.mp-specs dd small { display: block; font-weight: 400; font-size: .85rem; color: var(--mp-ink-2); }
@media (max-width: 640px) { .mp-specs { grid-template-columns: 1fr; } .mp-specs div:nth-child(2) { border-top: 1px solid var(--mp-line); } .mp-specs div:nth-child(odd) { border-right: 0; } }

.mp-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: var(--mp-measure); margin: 1rem 0 1.4rem; }
.mp-pc > div { padding: 14px 16px; border-radius: var(--mp-radius-sm); background: var(--mp-card); border: 1px solid var(--mp-line); }
.mp-pc h3 { margin-top: 0; }
.mp-prose .mp-pros, .mp-prose .mp-cons { list-style: none; padding: 0; margin: 0; }
.mp-pros li, .mp-cons li { position: relative; padding-left: 26px; margin: .4rem 0; font-size: .96rem; }
.mp-pros li::before, .mp-cons li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.mp-pros li::before { content: "+"; color: var(--mp-ok); }
.mp-cons li::before { content: "–"; color: #b3261e; }
@media (max-width: 760px) { .mp-pc { grid-template-columns: 1fr; } }

/* payment marks: every mark on the same dark plate, dark-ink marks turned white */
.mp-pay { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px;
  list-style: none; padding: 0; margin: 1rem 0 1.4rem; max-width: var(--mp-measure); }
.mp-pay li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px;
  border-radius: var(--mp-radius-sm); background: var(--sh-surface); }
.mp-pay img { width: 84px; height: 28px; object-fit: contain; }
.mp-pay img.is-dark { filter: brightness(0) invert(1); }
.mp-pay span { font-size: .8rem; line-height: 1.4; color: var(--sh-ink-2); text-align: center; }

/* ---- FAQ, notes, footer ------------------------------------------------------------------- */
.mp-faq { max-width: var(--mp-measure); display: grid; gap: 10px; margin-bottom: 1.4rem; }
.mp-q { border-radius: var(--mp-radius-sm); background: var(--mp-card); border: 1px solid var(--mp-line); }
.mp-q summary { cursor: pointer; padding: 12px 44px 12px 16px; position: relative; list-style: none;
  font: 600 1.02rem/1.55 var(--f-head); color: var(--mp-ink); }
.mp-q summary::-webkit-details-marker { display: none; }
.mp-q summary::after { content: "+"; position: absolute; right: 16px; top: 10px; font-size: 1.4rem; color: var(--mp-brand); }
.mp-q[open] summary::after { content: "−"; }
.mp-q > div { padding: 0 16px 12px; }
.mp-q p { margin: 0; color: var(--mp-ink-2); }

.mp-note { max-width: var(--mp-measure); padding: 12px 16px; border-radius: var(--mp-radius-sm);
  background: var(--mp-tint); color: var(--mp-ink-2); font-size: .93rem; }
.mp-note strong { color: var(--mp-ink); }

.mp-foot { margin-top: 40px; padding: 34px 0 26px; background: var(--sh-bg); color: var(--sh-ink-2); font-size: .93rem; }
.mp-foot a { color: var(--sh-ink); }
.mp-foot a:hover { color: var(--sh-brand); }
.mp-foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }
.mp-foot-h { margin: 0 0 .5rem; font: 600 1rem/1.5 var(--f-head); color: var(--sh-ink); }
.mp-foot ul { list-style: none; padding: 0; margin: 0; }
.mp-foot li { margin: .2rem 0; }
.mp-foot-age { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--sh-line); background: var(--sh-surface); }
.mp-foot-age b { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--sh-accent); color: var(--sh-ink); font: 700 1rem/1 var(--f-head); }
.mp-foot-age p { margin: 0; }
.mp-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--sh-line); font-size: .86rem; color: var(--sh-ink-3); }
@media (max-width: 860px) { .mp-foot-top { grid-template-columns: 1fr; } }

/* desktop sticky offer (the phone gets the bottom bar instead) — rule 15: on every breakpoint */
.mp-dock {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 10px 20px; background: rgba(26, 23, 38, .96); border-top: 1px solid var(--sh-line);
}
.mp-dock p { margin: 0; color: var(--sh-ink-2); font-size: .95rem; }
.mp-dock b { color: #fff; }

/* ============================================================ ≤1080px: drawer + bottom bar = */
@media (max-width: 1080px) {
  .mp-sh { grid-template-columns: 1fr; }
  .mp-sh-side {
    position: fixed; top: 0; left: 0; z-index: 80;
    width: 284px; height: 100vh; height: 100svh;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .mp-sh-drawer:checked ~ .mp-sh .mp-sh-side { transform: translateX(0); }
  .mp-sh-drawer:checked ~ .mp-sh-overlay { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .66); }
  .mp-sh-burger { display: inline-flex; }
  .mp-sh-topbar { padding: 8px 14px; }
  .mp-sh-topbar-logo { display: block; }
  .mp-sh-topbar-t { display: none; }
  .mp-sh-main { padding-bottom: calc(var(--sh-bar-h) + env(safe-area-inset-bottom) + 12px); }
  .mp-sh-bar {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--sh-surface); border-top: 1px solid var(--sh-line);
  }
  .mp-dock { display: none; }
  .mp-wrap { padding: 0 16px; }
  .mp-hero-grid { grid-template-columns: minmax(0, 1fr) 150px; gap: 18px; }
  .mp-hero-art img { width: 150px; }
  .mp-score { width: 64px; height: 64px; left: -12px; bottom: 12px; font-size: 1.2rem; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .mp-hero-grid { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; }
  .mp-hero-art img { width: 104px; border-radius: 12px; }
  .mp-score { width: 52px; height: 52px; left: -10px; bottom: 8px; font-size: 1rem; }
  .mp-score small { font-size: .6rem; }
  .mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mp-live { grid-template-columns: 1fr 1fr; }
  .mp-live-card:last-child { display: none; }
  .mp-hero-btns .mp-btn { flex: 1 1 100%; }
  .mp-sh-topbar-cta.mp-btn { padding: 6px 12px; font-size: .86rem; min-height: 38px; }
}
@media (max-width: 380px) { .mp-sh-bar-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .mp-sh-side { transition: none; } }

/* responsible-gaming / legal pages: no offer anywhere in the chrome */
.mp-rg .mp-sh-offer, .mp-rg .mp-sh-topbar-cta, .mp-rg .mp-sh-bar, .mp-rg .mp-dock { display: none !important; }
.mp-rg .mp-sh-main { padding-bottom: 0; }

/* utility pages (author, legal, 404): same chrome, no bottom bar */
.mp-util .mp-sh-main { padding-bottom: 0; }
.mp-util main.mp-sect { padding-bottom: 20px; }
.mp-nw { white-space: nowrap; }