/* ==========================================================================
   SELENE theme for Rise227  (v1)
   Loaded AFTER each page's inline <style>, so it re-maps the existing design
   tokens and overrides the few components that hard-code colours.
   Palette / type taken from src/selene/src/index.css:
     void #05070c · void-2 #0b0f18 · regolith #c9ccd3 · dust #8b909b
     earth #6fb6ff · sunlit #f2e6c9
   Display: Michroma (Latin caps only)   Text: Manrope + IBM Plex Sans Thai
   Telemetry: IBM Plex Mono
   ========================================================================== */

:root {
  --void: #07060a;
  --void-2: #0f0b0c;
  --regolith: #c9ccd3;
  --dust: #8b909b;
  --earth: #f5b935;
  --earth-2: #ffd36a;
  --earth-deep: #c48910;
  --sunlit: #f2e6c9;
  --red: #e1352c;
  --red-deep: #8a1a14;
  --line-green: #16a34a;
  --line-green-deep: #15803d;

  --f-display: "Chakra Petch", "Prompt", "Kanit", sans-serif;
  --f-text: "Prompt", "Chakra Petch", "Kanit", system-ui, sans-serif;
  --f-mono: "Chakra Petch", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ---- re-map the site's existing tokens (index.html naming) ---- */
  --bg: var(--void);
  --bg-2: var(--void-2);
  --panel: #130e0e;
  --panel-2: #1b1212;
  --line: rgba(245, 185, 53, 0.16);
  --gold: var(--earth);
  --gold-2: var(--earth-2);
  --gold-deep: var(--earth-deep);
  --text: #eceef2;
  --text-mute: #9aa0ac; /* 7.4:1 on --void, AA */
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 30px 80px -30px rgba(245, 185, 53, 0.35);

  /* ---- same, sub-page naming (static_pages.py) ---- */
  --bg2: var(--void-2);
  --panel2: #1b1212;
  --gold2: var(--earth-2);
  --mute: #9aa0ac;
}

html { background: var(--void); -webkit-text-size-adjust: 100%; }

body {
  background: var(--void) !important;
  color: var(--text);
  font-family: var(--f-text);
  font-weight: 400;
  line-height: 1.7; /* Thai needs the room */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* faint star-dust behind everything: pure CSS, no request */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 8%, #dfe6f2 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 36%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 52%, #dfe6f2 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 71%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 83%, #dfe6f2 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 92%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 61%, #fff 50%, transparent 51%);
}

::selection { background: var(--earth); color: var(--void); }
:focus-visible { outline: 1.5px solid var(--earth); outline-offset: 3px; border-radius: 4px; }

/* ---------- type ---------- */
.display, .logo, .brand, .hero-h1, .section-title, .mg-title, .muay-faq h2,
.sports-today h1, h1 {
  font-family: var(--f-display), var(--f-text);
}
/* Michroma is wide + Latin-only: Thai falls through to Plex Thai, so keep Thai
   headings bold-ish and tight instead of tracked-out. */
.sports-today h1, .mg-title, .muay-faq h2, .prose h2, .ev-head h2, .st-card h2,
.summary h2, h1 {
  font-family: var(--f-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo, .brand { font-family: var(--f-display); letter-spacing: 0.22em; font-size: 15px; }
.hero-h1, .section-title { letter-spacing: 0.04em; }

/* mono "telemetry" labels */
.st-card header span, .st-sum, .chip, .tag, .crumbs, .sport-label, .sport-count,
.badge, .nav-links a, .nav-cta, .st-links a, .eyebrow, .slide-eyebrow, th,
.day small, .rec, .mg-link {
  font-family: var(--f-mono);
  letter-spacing: 0.06em;
}
.nav-links a, .nav-cta, .badge, .sport-label, .slide-eyebrow, .st-links a { text-transform: uppercase; font-size: 11px; }

/* ---------- accent re-colour for hard-coded gold ---------- */
a { color: var(--earth); }
a:hover { color: var(--earth-2); }
h1 em, .mg-title em, .muay-faq h2 em { color: var(--earth); }
.st-sum, .st-more, .st-card li a b, .mg-link, .chip b { color: var(--earth) !important; }
.st-card li a:hover span { color: #fff; }

/* ---------- navigation ---------- */
.nav:has(> .nav-inner), header.top {
  background: linear-gradient(180deg, rgba(7, 6, 10, 0.92), rgba(7, 6, 10, 0.55)) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line) !important;
}
.nav-links a { color: rgba(236, 238, 242, 0.75) !important; transition: color 0.2s; }
.nav-links a:hover { color: #fff !important; }
.nav-cta {
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--void) !important;
  font-weight: 500;
  box-shadow: none !important;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--earth) !important; }

/* ---------- buttons ---------- */
.btn, .btn-primary, .btn-green, .btn-indigo {
  border-radius: 4px !important;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.3s;
}
.btn-primary { background: #fff !important; color: var(--void) !important; border: 1px solid #fff !important; box-shadow: none !important; }
.btn-primary:hover { background: var(--earth) !important; border-color: var(--earth) !important; }
.btn-indigo {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(201, 204, 211, 0.35) !important;
  box-shadow: none !important;
}
.btn-indigo:hover { border-color: var(--earth) !important; color: var(--earth) !important; }
/* ปุ่ม "ติดต่อสอบถาม" (LINE) = สีเขียวทุกที่ */
.btn-green {
  background: linear-gradient(180deg, var(--line-green), var(--line-green-deep)) !important;
  color: #fff !important;
  border: 1px solid var(--line-green) !important;
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.28) !important;
}
.btn-green:hover { background: var(--line-green-deep) !important; border-color: var(--line-green-deep) !important; color: #fff !important; transform: translateY(-2px); }
a.sl-contact { color: var(--line-green) !important; }
a.sl-contact:hover { color: #4ade80 !important; }

/* ---------- cards ---------- */
.st-card, .mg-card, .faq-item, .day, .chip, .summary, section.event, .card, .panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
}
.st-card:hover, .mg-card:hover, .day:hover, .card:hover { border-color: rgba(245, 185, 53, 0.5) !important; }
.st-card:hover, .mg-card:hover { box-shadow: 0 30px 80px -30px rgba(245, 185, 53, 0.35); }
.st-card { position: relative; }
/* HUD corner brackets on live cards */
.st-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  color: rgba(201, 204, 211, 0.28);
  background:
    linear-gradient(currentColor, currentColor) top left / 12px 1px,
    linear-gradient(currentColor, currentColor) top left / 1px 12px,
    linear-gradient(currentColor, currentColor) top right / 12px 1px,
    linear-gradient(currentColor, currentColor) top right / 1px 12px,
    linear-gradient(currentColor, currentColor) bottom left / 12px 1px,
    linear-gradient(currentColor, currentColor) bottom left / 1px 12px,
    linear-gradient(currentColor, currentColor) bottom right / 12px 1px,
    linear-gradient(currentColor, currentColor) bottom right / 1px 12px;
  background-repeat: no-repeat;
}
.mg-card::before { background: linear-gradient(90deg, var(--earth-deep), var(--earth-2)) !important; }
.mg-ico { background: rgba(245, 185, 53, 0.08) !important; border-color: rgba(245, 185, 53, 0.28) !important; border-radius: 4px !important; }
.st-links a { border-radius: 4px !important; background: transparent; border-color: var(--line) !important; }
.st-links a:hover { border-color: rgba(245, 185, 53, 0.55) !important; color: #fff; }
.an { border-left-color: var(--earth) !important; background: rgba(245, 185, 53, 0.05) !important; }
.tag { background: rgba(245, 185, 53, 0.12) !important; color: var(--earth) !important; border-color: rgba(245, 185, 53, 0.3) !important; border-radius: 3px !important; }

.sports-today { background: linear-gradient(180deg, rgba(245, 185, 53, 0.05), transparent) !important; }
.muay-guide { background: radial-gradient(1200px 500px at 85% 0%, rgba(245, 185, 53, 0.07), transparent 60%), var(--void-2) !important; }

footer, .footer { background: var(--void) !important; border-top: 1px solid var(--line) !important; }

/* ---------- scroll reveal (class added by selene.js, so no-JS shows all) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.1, 1), transform 1s cubic-bezier(0.2, 0.7, 0.1, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   HERO — "Earthrise" (Rise227 → the Earth rising)
   ========================================================================== */
.sl-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 980px;
  overflow: hidden;
  background: var(--void);
  color: #fff;
  isolation: isolate;
  margin-top: 0;
}
.sl-layer { position: absolute; inset: 0; will-change: transform, opacity; }
.sl-layer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 50%;
  display: block; max-width: none;
}
@media (min-width: 768px) { .sl-layer img { object-position: center; } }
.sl-hero::after { /* hero melts into the void below */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 6, 10, 0), var(--void));
}
.sl-apron { position: absolute; left: 0; right: 0; top: 100%; height: 110vh; background: var(--void); }

.sl-title {
  position: absolute; left: 0; right: 0; top: 22%;
  text-align: center; padding: 0 16px;
  z-index: 3; will-change: transform, opacity;
}
.sl-word {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 9.4vw, 9rem);
  line-height: 1;
  letter-spacing: 0.2em;
  margin-right: -0.2em; /* optically re-centre tracked caps */
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
  font-weight: 400;
}
.sl-title::before { /* soft scrim so the kicker stays AA-legible over the bright Earth */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 58%;
  width: min(92vw, 760px); height: 190px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(7, 6, 10, 0.72), rgba(7, 6, 10, 0));
  pointer-events: none;
}
.sl-kicker {
  margin: 18px 0 0;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 14px #000, 0 0 2px rgba(0, 0, 0, 0.9);
}
.sl-cta {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 26px; pointer-events: auto;
}
.sl-cta a {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; border-radius: 4px;
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: rgba(7, 6, 10, 0.45);
  border: 1px solid rgba(201, 204, 211, 0.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sl-cta a:first-child { background: #fff; color: var(--void); border-color: #fff; }
.sl-cta a:hover { background: var(--earth); border-color: var(--earth); color: var(--void); }

.sl-veil {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(170, 184, 210, 0.55), transparent 70%),
    radial-gradient(50% 60% at 75% 60%, rgba(120, 140, 180, 0.5), transparent 70%),
    radial-gradient(80% 80% at 50% 50%, rgba(20, 26, 40, 0.85), rgba(7, 6, 10, 0.95));
}
.sl-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }

.sl-hud {
  position: absolute; inset: 14px; z-index: 7; pointer-events: none;
  font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(201, 204, 211, 0.78);
}
@media (min-width: 768px) { .sl-hud { inset: 24px; font-size: 0.6875rem; } }
.sl-hud .brackets { position: absolute; inset: 0; color: rgba(201, 204, 211, 0.4);
  background:
    linear-gradient(currentColor, currentColor) top left / 14px 1px,
    linear-gradient(currentColor, currentColor) top left / 1px 14px,
    linear-gradient(currentColor, currentColor) top right / 14px 1px,
    linear-gradient(currentColor, currentColor) top right / 1px 14px,
    linear-gradient(currentColor, currentColor) bottom left / 14px 1px,
    linear-gradient(currentColor, currentColor) bottom left / 1px 14px,
    linear-gradient(currentColor, currentColor) bottom right / 14px 1px,
    linear-gradient(currentColor, currentColor) bottom right / 1px 14px;
  background-repeat: no-repeat; }
.sl-hud p, .sl-hud .bl, .sl-hud .br { margin: 0; line-height: 1.5; text-shadow: 0 1px 8px #000; }
.sl-hud .dim { color: rgba(201, 204, 211, 0.5); }
.sl-hud .hi { color: var(--earth); }
.sl-hud .tl { position: absolute; top: 64px; left: 12px; }
.sl-hud .tr { position: absolute; top: 64px; right: 12px; text-align: right; }
.sl-hud .bl { position: absolute; bottom: 12px; left: 12px; }
.sl-hud .br { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 8px; align-items: center; }
@media (min-width: 768px) { .sl-hud .tl, .sl-hud .tr { top: 76px; } .sl-hud .tl, .sl-hud .bl { left: 16px; } .sl-hud .tr, .sl-hud .br { right: 16px; } }
.sl-hud .bounce { display: inline-block; animation: sl-bounce 1.6s ease-in-out infinite; }
@keyframes sl-bounce { 50% { transform: translateY(4px); } }

/* sports content directly follows the hero: drop the old fixed-nav offset */
#selene-hero ~ #sports-today { padding-top: 64px !important; }
#selene-hero ~ #hero { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .sl-hud .bounce { animation: none; }
  .sl-veil, .sl-dust { display: none; }
}
@media (max-width: 480px) {
  .sl-title { top: 19%; }
  .sl-cta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sl-cta a { padding: 0 8px; justify-content: center; font-size: 0.6875rem; letter-spacing: 0.04em; }
  .sl-cta a span { display: none; }
}

/* ==========================================================================
   DOCK — banners + today's fight card, overlapping the hero's black ground
   ========================================================================== */
.sl-dock { position: relative; z-index: 9; margin-top: -104px; padding: 0 16px 12px; }
.sl-dock-in { max-width: 1180px; margin: 0 auto; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sl-dock { margin-top: -120px; padding: 0 24px 16px; } .sl-dock-in { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; } }
.sl-mono { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.sl-dim { color: var(--dust); }

.sl-banners { position: relative; min-width: 0; }
.sl-ad-label { margin: 0 0 6px; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.12em; color: var(--dust); }
.sl-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: 8px; background: var(--void-2);
  aspect-ratio: 3 / 1; -webkit-overflow-scrolling: touch;
}
.sl-track::-webkit-scrollbar { display: none; }
.sl-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.sl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.sl-dots i { width: 18px; height: 2px; background: rgba(201, 204, 211, 0.3); transition: background 0.3s, width 0.3s; }
.sl-dots i.on { background: var(--earth); width: 30px; }

.sl-fight {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 176px;
  padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 21, 31, 0.9), rgba(11, 15, 24, 0.92));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@media (min-width: 900px) { .sl-fight { margin-top: 22px; } }
.sl-fight-h { display: flex; align-items: center; gap: 8px; }
.sl-live { width: 8px; height: 8px; border-radius: 50%; background: #7ee2a8; flex: none; }
.sl-live.on { background: #ff4d42; box-shadow: 0 0 0 0 rgba(255, 77, 66, 0.6); animation: sl-pulse 1.6s infinite; }
@keyframes sl-pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 77, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 66, 0); } }
.sl-fight-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sl-fight-nav button {
  width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--line); background: transparent;
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.sl-fight-nav button:hover { border-color: var(--earth); color: var(--earth); }
.sl-fight-b { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 10px 0 8px; min-height: 84px; transition: opacity 0.25s; }
.sl-fight-b.sw { opacity: 0; }
.sl-fight-ev { margin: 0; font-size: 0.8125rem; color: var(--regolith); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.sl-corner { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; min-width: 0; }
.sl-corner span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sl-corner i { width: 3px; align-self: stretch; min-height: 22px; border-radius: 2px; flex: none; }
.sl-red i { background: #ff5a4f; } .sl-blue { justify-content: flex-end; text-align: right; } .sl-blue i { background: #5aa2ff; }
.sl-vs-t { margin: 0; font-family: var(--f-mono); font-size: 0.8125rem; color: var(--earth); letter-spacing: 0.08em; }
.sl-fight-st { margin: 0; color: var(--dust); }
.sl-fight-st b { color: #7ee2a8; font-weight: 500; }
.sl-fight-st.on b { color: #ff8a80; }
.sl-bar { height: 2px; background: rgba(201, 204, 211, 0.14); overflow: hidden; border-radius: 2px; }
.sl-bar span { display: block; height: 100%; width: 0; background: var(--earth); }
.sl-bar span.run { width: 100%; transition: width 5s linear; }
.sl-fight-more { margin-top: 10px; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--earth); }
.sl-fight-more:hover { color: #fff; }
.sl-fight[data-empty] .sl-fight-nav, .sl-fight[data-empty] .sl-bar { display: none; }

/* HUD bottom labels sit above the dock */
.sl-hud .bl, .sl-hud .br { bottom: 112px; }
@media (min-width: 900px) { .sl-hud .bl, .sl-hud .br { bottom: 128px; } }
@media (prefers-reduced-motion: reduce) { .sl-live.on { animation: none; } .sl-bar span.run { transition: none; } }

/* dock above the fold: shorten the hero so banners + fight card peek in at first view */
.sl-hero { height: calc(100svh - 150px); min-height: 520px; }
@media (max-width: 899px) { .sl-hero { height: calc(100svh - 250px); min-height: 500px; } }
.sl-fight-h { flex-wrap: nowrap; min-width: 0; }
.sl-fight-h .sl-mono { white-space: nowrap; }
.sl-fight-h [data-fdate] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sl-fight-nav { flex: none; }
@media (max-width: 480px) { .sl-hud .tl, .sl-hud .tr { display: none; } }

/* ==========================================================================
   RED · BLACK · GOLD  (overrides the blue "earth" accents above)
   ========================================================================== */
body::before {
  opacity: 1;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(225, 53, 44, 0.20), transparent 62%),
    radial-gradient(900px 520px at 92% 8%, rgba(245, 185, 53, 0.14), transparent 62%),
    radial-gradient(700px 500px at 50% 110%, rgba(138, 26, 20, 0.22), transparent 65%),
    radial-gradient(1px 1px at 12% 18%, rgba(255, 220, 160, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 8%, rgba(255, 220, 160, .7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 36%, rgba(255, 220, 160, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 52%, rgba(255, 220, 160, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 71%, rgba(255, 220, 160, .8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 83%, rgba(255, 220, 160, .6) 50%, transparent 51%);
}
::selection { background: var(--earth); color: #000; }
/* hero photo: warm it into a red/gold duotone-ish grade so it matches the site */
.sl-layer img { filter: sepia(0.85) saturate(2.1) hue-rotate(-24deg) brightness(0.95) contrast(1.08); }
.sl-hero::before { /* red ember wash over the scene */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(70% 60% at 70% 30%, rgba(225, 53, 44, 0.55), transparent 70%),
              linear-gradient(180deg, rgba(245, 185, 53, 0.18), rgba(138, 26, 20, 0.35));
}
.sl-word { text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(245, 185, 53, 0.35); }
.sl-cta a:first-child { background: linear-gradient(180deg, #ffd36a, #f5b935 60%, #c48910); color: #1a0f00; border-color: #ffd36a; }
.sl-cta a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.nav-cta, .btn-primary { background: linear-gradient(180deg, #ffd36a, #f5b935 60%, #c48910) !important; color: #1a0f00 !important; border-color: #ffd36a !important; }
.nav-cta:hover, .btn-primary:hover { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.sl-veil { background:
    radial-gradient(60% 50% at 30% 40%, rgba(225, 120, 60, 0.5), transparent 70%),
    radial-gradient(50% 60% at 75% 60%, rgba(180, 40, 30, 0.5), transparent 70%),
    radial-gradient(80% 80% at 50% 50%, rgba(30, 14, 10, 0.88), rgba(7, 6, 10, 0.96)); }
.sports-today { background: linear-gradient(180deg, rgba(225, 53, 44, 0.07), transparent) !important; }
.st-card:hover, .mg-card:hover { box-shadow: 0 30px 80px -30px rgba(225, 53, 44, 0.45); }
.st-card h2::before { content: ""; display: inline-block; width: 3px; height: 0.9em; margin-right: 10px; background: var(--red); vertical-align: -0.05em; border-radius: 2px; }
.sl-hud .hi, .sl-vs-t, .sl-fight-more { color: var(--earth); }
.sl-dots i.on, .sl-bar span { background: var(--earth); }
.nav:has(> .nav-inner), header.top { border-bottom-color: rgba(245, 185, 53, 0.22) !important; }
.sl-layer img { filter: sepia(0.9) saturate(2.4) hue-rotate(-38deg) brightness(0.92) contrast(1.12); }
.sl-hero::before { background: radial-gradient(75% 65% at 68% 32%, rgba(225, 40, 30, 0.75), transparent 72%),
                               linear-gradient(180deg, rgba(245, 185, 53, 0.16), rgba(138, 20, 16, 0.5)); }
.sl-fight { background: linear-gradient(180deg, rgba(34, 16, 14, 0.92), rgba(14, 9, 9, 0.94)); border-color: rgba(245, 185, 53, 0.25); }
.sl-fight-nav button, .sl-track { border-color: rgba(245, 185, 53, 0.25); }
.sl-fight::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--red), var(--earth)); border-radius: 8px 0 0 8px; }

/* ===== Muay Thai ring scene (SVG layers) — drop the photo colour-grade hacks ===== */
.sl-layer img { filter: none; object-position: center; }
.sl-hero::before { background: radial-gradient(70% 55% at 50% 40%, rgba(225, 53, 44, 0.18), transparent 70%); mix-blend-mode: screen; }
.sl-title { top: 12%; }
@media (max-width: 480px) { .sl-title { top: 11%; } .sl-layer img { object-position: 52% 50%; } }
@media (max-width: 480px) { .sl-title { top: 92px; } }


/* ==========================================================================
   RISE227 HERO v3 — pinned scroll scene: football stadium → Muay Thai arena →
   athlete steps forward → wordmark → hands over to banners/programmes.
   Fonts: Chakra Petch (display, Thai+Latin) · Prompt (text)
   ========================================================================== */
.sl-hero, .sl-title, .sl-hud, .sl-veil, .sl-dust { all: revert; } /* retire v2 hero rules */
body { font-family: var(--f-text); }
.logo, .brand, .section-title, .hero-h1, .mg-title, .muay-faq h2, .sports-today h1, .st-card h2, .prose h2, .ev-head h2, .summary h2, h1 {
  font-family: var(--f-display) !important; font-weight: 700; letter-spacing: 0.01em;
}
.logo, .brand { letter-spacing: 0.14em; font-size: 16px; }
.nav-links a, .nav-cta, .btn, .st-links a, .sl-mono, .sl-ad-label, .sl-fight-more, .sl-cta a { font-family: var(--f-display); letter-spacing: 0.06em; }

.r7-hero { position: relative; height: 360svh; background: var(--void); }
.r7-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: var(--void); }
.r7-layer { position: absolute; inset: 0; will-change: transform, opacity; }
.r7-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; max-width: none; }
.r7-arena { opacity: 0; }
.r7-beams i { position: absolute; top: -30%; left: 50%; width: 22vw; max-width: 360px; height: 140%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255,220,120,.42), rgba(255,180,60,.10) 55%, transparent 85%); filter: blur(14px); mix-blend-mode: screen; opacity: .8; }
.r7-beams .b1 { margin-left: -38vw; transform: rotate(14deg); animation: r7-sw1 11s ease-in-out infinite alternate; }
.r7-beams .b2 { margin-left: -8vw; width: 16vw; background: linear-gradient(180deg, rgba(255,80,60,.40), rgba(229,9,20,.10) 55%, transparent 85%); transform: rotate(-4deg); animation: r7-sw2 9s ease-in-out infinite alternate; }
.r7-beams .b3 { margin-left: 22vw; transform: rotate(-16deg); animation: r7-sw3 13s ease-in-out infinite alternate; }
@keyframes r7-sw1 { to { transform: rotate(6deg); } } @keyframes r7-sw2 { to { transform: rotate(5deg); } } @keyframes r7-sw3 { to { transform: rotate(-7deg); } }
.r7-grade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 45%, rgba(225,53,44,.16), transparent 70%), linear-gradient(180deg, rgba(7,6,10,.6), rgba(7,6,10,.05) 28%, rgba(7,6,10,.1) 60%, var(--void) 100%); }
/* wordmark sits BEHIND the athlete */
.r7-word { position: absolute; left: 0; right: 0; top: 12%; z-index: 2; text-align: center; pointer-events: none; opacity: 0;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(5rem, 22vw, 22rem); line-height: .85; letter-spacing: .04em; color: #fff;
  text-shadow: 0 10px 60px rgba(0,0,0,.6); white-space: nowrap; }
.r7-word .g { background: linear-gradient(180deg, #fff0a8, #f5b935 55%, #c48910); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 8px 40px rgba(245,185,53,.35)); }
.r7-athlete { z-index: 3; transform: translate3d(0, 70vh, 0); opacity: 0; }
.r7-athlete img { object-fit: contain; object-position: 50% 100%; width: auto; height: 86svh; left: 50%; right: auto; top: auto; bottom: -2svh; transform: translateX(-50%);
  filter: drop-shadow(0 0 40px rgba(245,185,53,.35)) drop-shadow(-12px 0 30px rgba(225,53,44,.45)); }
@media (min-width: 900px) { .r7-athlete img { left: 62%; height: 92svh; } }
.r7-embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; mix-blend-mode: screen; }
.r7-vig { z-index: 5; } .r7-vig img { opacity: .85; }
.r7-veil { position: absolute; inset: 0; z-index: 8; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(60% 50% at 30% 40%, rgba(200,120,70,.5), transparent 70%), radial-gradient(50% 60% at 75% 60%, rgba(150,40,30,.5), transparent 70%), radial-gradient(80% 80% at 50% 50%, rgba(30,14,10,.9), rgba(7,6,10,.97));
  font-family: var(--f-display); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--earth); }
.r7-veil .s { font-family: var(--f-text); letter-spacing: .04em; text-transform: none; font-size: 14px; color: rgba(255,255,255,.8); }
.r7-copy { position: absolute; z-index: 6; left: 5vw; right: 5vw; bottom: 9svh; opacity: 0; pointer-events: none; }
.r7-copy a { pointer-events: auto; }
@media (min-width: 900px) { .r7-copy { right: auto; width: 46vw; bottom: 12svh; } }
.r7-kicker { margin: 0 0 10px; font-family: var(--f-display); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--earth); }
.r7-h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.75rem, 4.2vw, 3.6rem); line-height: 1.12; color: #fff; text-shadow: 0 2px 24px #000; }
.r7-h1 em { font-style: normal; color: var(--earth-2); }
.r7-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.r7-cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 4px; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: .06em;
  color: #fff; border: 1px solid rgba(245,185,53,.55); background: rgba(7,6,10,.5); backdrop-filter: blur(8px); transition: transform .25s, background .25s, color .25s; }
.r7-cta a:first-child { background: linear-gradient(180deg, #ffd36a, #f5b935 60%, #c48910); color: #1a0f00; border-color: #ffd36a; box-shadow: 0 0 28px rgba(245,185,53,.3); }
.r7-cta a:hover { transform: translateY(-2px); background: var(--red); border-color: var(--red); color: #fff; }
/* แถวที่ 2: สมัคร (แดง) + ติดต่อสอบถาม LINE (เขียว) */
.r7-cta2 { margin-top: 10px; }
.r7-cta a.r7-reg { background: linear-gradient(180deg, #f0473d, var(--red) 60%, #b4241c); color: #fff; border-color: #f0473d; box-shadow: 0 0 28px rgba(225,53,44,.35); }
.r7-cta a.r7-reg:hover { background: #b4241c; border-color: #b4241c; color: #fff; }
.r7-cta a.r7-line { background: linear-gradient(180deg, #22c55e, var(--line-green) 60%, var(--line-green-deep)); color: #fff; border-color: #22c55e; box-shadow: 0 0 28px rgba(34,197,94,.3); }
.r7-cta a.r7-line:hover { background: var(--line-green-deep); border-color: var(--line-green-deep); color: #fff; }
.r7-hud { position: absolute; inset: 18px; z-index: 7; pointer-events: none; font-family: var(--f-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); opacity: 0; }
.r7-hud p { margin: 0; line-height: 1.5; text-shadow: 0 1px 8px #000; } .r7-hud .dim { color: rgba(255,255,255,.45); } .r7-hud .hi { color: var(--earth); }
.r7-hud .r7-br { position: absolute; inset: 0; color: rgba(245,185,53,.5);
  background: linear-gradient(currentColor,currentColor) top left/16px 1px, linear-gradient(currentColor,currentColor) top left/1px 16px, linear-gradient(currentColor,currentColor) top right/16px 1px, linear-gradient(currentColor,currentColor) top right/1px 16px, linear-gradient(currentColor,currentColor) bottom left/16px 1px, linear-gradient(currentColor,currentColor) bottom left/1px 16px, linear-gradient(currentColor,currentColor) bottom right/16px 1px, linear-gradient(currentColor,currentColor) bottom right/1px 16px; background-repeat: no-repeat; }
.r7-hud .tl { position: absolute; top: 70px; left: 14px; } .r7-hud .tr { position: absolute; top: 70px; right: 14px; text-align: right; } .r7-hud .bl { position: absolute; bottom: 14px; left: 14px; } .r7-hud .br { position: absolute; bottom: 14px; right: 14px; }
.r7-hud .bounce { display: inline-block; animation: r7-bounce 1.6s ease-in-out infinite; } @keyframes r7-bounce { 50% { transform: translateY(4px); } }
.r7-exit { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: var(--void); opacity: 0; }
#selene-hero ~ #selene-dock { margin-top: 0; padding-top: 24px; }
#selene-hero ~ #sports-today { padding-top: 48px !important; }
@media (max-width: 899px) { .r7-word { top: 16%; font-size: clamp(4rem, 24vw, 9rem); } .r7-copy { bottom: 7svh; text-align: center; } .r7-cta { justify-content: center; } .r7-athlete img { height: 74svh; } .r7-h1 { font-size: clamp(1.5rem, 7vw, 2.4rem); } }
@media (max-width: 480px) { .r7-hud .tl, .r7-hud .tr { display: none; } .r7-cta a { padding: 0 14px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .r7-hero { height: 100svh; } .r7-veil, .r7-embers, .r7-exit { display: none; } .r7-arena, .r7-athlete, .r7-word, .r7-copy, .r7-hud { transform: none !important; opacity: 1 !important; } .r7-beams i { animation: none; } }
/* overflow-x:hidden on html/body turns body into a scroll container and breaks position:sticky; clip does not */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
.r7-hero { height: 330svh; }
.r7-word { font-size: clamp(5rem, 19vw, 19rem); }
@media (max-width: 899px) { .r7-word { font-size: clamp(4rem, 22vw, 9rem); } }
.sl-dock { margin-top: -40px; }
@media (min-width: 900px) { .sl-dock { margin-top: -56px; } }

/* ---------- ปุ่มลอยขวาล่าง (2026-11-01): ติดต่อสอบถาม (LINE เขียว) + สมัคร (แดง) ลอยคู่กันตลอดเวลา ---------- */
.sl-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 26px;
  background: rgba(14, 11, 18, .62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0; transform: translateX(28px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .25, 1.15); }
.sl-float.is-in { opacity: 1; transform: none; }
.sl-float a { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px 0 7px;
  border-radius: 999px; font-family: var(--f-display); font-weight: 700; font-size: 15.5px; letter-spacing: .03em; line-height: 1; white-space: nowrap;
  color: #fff !important; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; -webkit-tap-highlight-color: transparent; }
.sl-float a::before { content: ""; position: absolute; inset: 0 0 50% 0; z-index: -1; border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none; }   /* แสงเงาด้านบน */
.sl-float a:hover { transform: translateY(-2px); filter: brightness(1.08); }
.sl-float a:active { transform: translateY(0) scale(.98); }
.sl-float a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sl-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-style: normal;
  background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.sl-ic svg { width: 20px; height: 20px; display: block; }
.sl-float-line { background: linear-gradient(180deg, #2bd46a 0%, var(--line-green) 55%, var(--line-green-deep) 100%);
  box-shadow: 0 10px 24px -8px rgba(34, 197, 94, .65), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sl-float-reg { background: linear-gradient(180deg, #ff5a4f 0%, var(--red) 55%, #b4241c 100%);
  box-shadow: 0 10px 24px -8px rgba(225, 53, 44, .7), inset 0 0 0 1px rgba(255, 255, 255, .14); animation: sl-pulse 2.6s ease-in-out infinite; }
.sl-float-reg::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: sl-shine 3.6s ease-in-out infinite 1.2s; }
@keyframes sl-pulse { 0%, 100% { box-shadow: 0 10px 24px -8px rgba(225, 53, 44, .7), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 0 rgba(225, 53, 44, .5); }
  50% { box-shadow: 0 10px 24px -8px rgba(225, 53, 44, .7), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 9px rgba(225, 53, 44, 0); } }
@keyframes sl-shine { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.sl-float-spacer { height: 150px; }
@media (max-width: 600px) {
  .sl-float { right: max(10px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); gap: 7px; padding: 7px; border-radius: 24px; }
  .sl-float a { height: 46px; padding: 0 16px 0 6px; font-size: 14.5px; gap: 8px; }
  .sl-ic { width: 34px; height: 34px; } .sl-ic svg { width: 18px; height: 18px; }
  .sl-float-spacer { height: 136px; }
}
@media (prefers-reduced-motion: reduce) { .sl-float, .sl-float a { transition: none; } .sl-float-reg, .sl-float-reg::after { animation: none; } }
@media print { .sl-float { display: none; } }