/* ==========================================================================
   CROFT (theme 35) — Bootstrap 5 theme layer
   ดัดแปลงจาก raw ufabomb: ตัดการอ้างรูปจากโฮสต์ต้นทางทั้งหมด —
   พื้นหลัง/ปุ่ม CTA/ไอคอนบริการ/ปุ่มกลาง bottom nav เปลี่ยนเป็น CSS + Font Awesome
   ========================================================================== */

:root {
  /* Brand palette */
  --ub-dark:        #111111;   /* header / footer / dark bands */
  --ub-body:        #3a3636;   /* base colour behind the background */
  --ub-yellow:      #fdca00;   /* primary yellow — headings, links, accents */
  --ub-yellow-2:    #fdd533;   /* lighter yellow — menu bars, hovers */
  --ub-cream:       #fffed5;   /* "egg" cream — large display headings */
  --ub-gold-line:   #ffc87f;   /* hairline borders on cards */
  --ub-white:       #ffffff;

  /* Layout metrics */
  --ub-header-h:    76px;
  --ub-bottomnav-h: 80px;
  --ub-container:   1250px;    /* header container */
  --ub-wrapper:     1200px;    /* content wrapper */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background-color: var(--ub-body);
  /* รูป background ของ raw อยู่บนโฮสต์ต้นทาง — แทนด้วย gradient โทนเดียวกัน */
  background-image:
    radial-gradient(1100px 480px at 50% -120px, rgba(253, 202, 0, .10), transparent 65%),
    radial-gradient(900px 600px at 110% 30%, rgba(255, 200, 127, .05), transparent 60%),
    linear-gradient(180deg, #2b2828 0%, #3a3636 45%, #262323 100%);
  background-attachment: fixed;
  font-family: "Prompt", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ub-white);
  overflow-x: hidden;
}

img { max-width: 100%; }

a { text-decoration: none; }

.ub-container { max-width: var(--ub-container); margin-inline: auto; }
.ub-wrapper   { max-width: var(--ub-wrapper);   margin-inline: auto; }

.bg-dark1     { background-color: var(--ub-dark) !important; }
.text-yellow  { color: var(--ub-yellow) !important; }
.text-cream   { color: var(--ub-cream)  !important; }

/* Translucent bands that sit over the fixed page background */
.ub-band      { background-color: rgba(0, 0, 0, .8); }
.ub-band-soft { background-color: rgba(0, 0, 0, .7); }

/* The thin gold rule used as a section separator */
.ub-gold-rule {
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #7a5c00 0%, var(--ub-yellow) 50%, #7a5c00 100%);
}

/* Shared lift-on-hover used across buttons, cards and logos */
.ub-hover {
  transition: transform .25s ease, filter .25s ease;
}
.ub-hover:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.ub-header {
  background-color: var(--ub-dark);
  min-height: var(--ub-header-h);
}

.ub-header .ub-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  min-height: var(--ub-header-h);
}

/* โลโก้จาก CMS ขนาดไม่แน่นอน — คุมทั้งกว้าง/สูง */
.ub-logo { max-width: 170px; max-height: 56px; width: auto; height: auto; }

/* Outlined "register" pill in the header */
.ub-btn-register {
  display: inline-block;
  text-align: center;
  border: 1px solid var(--ub-yellow);
  color: var(--ub-yellow);
  background: transparent;
  border-radius: 4px;
  padding: 4px 16px;
  font-size: 1rem;
  line-height: 1.6;
  white-space: nowrap;
}
.ub-btn-register:hover { background: var(--ub-yellow); color: #000; }

/* Solid white "login" pill in the header */
.ub-btn-login {
  display: inline-block;
  text-align: center;
  background: var(--ub-white);
  color: #000;
  border: 1px solid var(--ub-white);
  border-radius: 4px;
  padding: 4px 16px;
  font-size: 1rem;
  line-height: 1.6;
  white-space: nowrap;
}
.ub-btn-login:hover { background: var(--ub-yellow); border-color: var(--ub-yellow); color: #000; }

/* Hamburger — three rounded yellow bars that morph into an X */
.ub-burger {
  width: 60px;
  height: 60px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
}
.ub-burger rect {
  fill: var(--ub-yellow-2);
  transform-origin: center;
  transition: transform .3s ease, opacity .3s ease;
}
.ub-burger[aria-expanded="true"] .ub-bar-1 { transform: translateY(9px)  rotate(45deg); }
.ub-burger[aria-expanded="true"] .ub-bar-2 { opacity: 0; }
.ub-burger[aria-expanded="true"] .ub-bar-3 { transform: translateY(-9px) rotate(-45deg); }

/* Offcanvas menu */
.ub-offcanvas {
  background-color: var(--ub-dark);
  color: var(--ub-white);
  border-left: 1px solid rgba(253, 202, 0, .25);
}
.ub-offcanvas .nav-link {
  color: var(--ub-white);
  padding: .75rem .25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ub-offcanvas .nav-link:hover { color: var(--ub-yellow); }
.ub-offcanvas .nav-link i { width: 1.5rem; color: var(--ub-yellow); }

/* --------------------------------------------------------------------------
   Hero carousel
   -------------------------------------------------------------------------- */

.ub-hero { background-color: var(--ub-dark); }

.ub-hero .carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

.ub-hero .carousel-control-prev,
.ub-hero .carousel-control-next {
  width: 56px;
  opacity: 0;
  transition: opacity .25s ease;
}
.ub-hero:hover .carousel-control-prev,
.ub-hero:hover .carousel-control-next { opacity: .9; }

.ub-hero .carousel-control-prev-icon,
.ub-hero .carousel-control-next-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(0, 0, 0, .45);
  border-radius: 50%;
  background-size: 45% 45%;
}

.ub-hero .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background-color: rgba(255, 255, 255, .5);
}
.ub-hero .carousel-indicators .active { background-color: var(--ub-yellow); }

/* --------------------------------------------------------------------------
   Primary call-to-action row (ปุ่ม CSS แทนปุ่มรูปของ raw)
   -------------------------------------------------------------------------- */

.ub-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
}

.ub-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  height: 64px;
  padding: 0 1.75rem;
  border-radius: 14px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1400;
  background: linear-gradient(180deg, #ffe473 0%, var(--ub-yellow) 55%, #d9a400 100%);
  border: 1px solid var(--ub-gold-line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
  white-space: nowrap;
}
.ub-cta-btn i { font-size: 1.5rem; }
.ub-cta-btn--promo {
  background: linear-gradient(180deg, #ff9d5c 0%, #f4511e 60%, #b23310 100%);
  color: #fff;
  border-color: rgba(255, 200, 127, .7);
}
.ub-cta-btn--register {
  background: linear-gradient(180deg, #fffef0 0%, var(--ub-cream) 55%, #e3d98a 100%);
  color: #4a3a00;
}

@media (max-width: 575.98px) {
  .ub-cta-row { gap: .5rem; padding: .75rem .5rem; }
  .ub-cta-btn { height: 44px; padding: 0 .9rem; font-size: .9rem; border-radius: 10px; }
  .ub-cta-btn i { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   Promotion strip — horizontal scroll-snap carousel
   -------------------------------------------------------------------------- */

.ub-section-title {
  color: var(--ub-cream);
  font-size: 1.5rem;
  font-weight: 500;
  padding: .5rem 1.25rem;
  margin: 0;
}
@media (max-width: 575.98px) { .ub-section-title { font-size: 1.05rem; } }

.ub-strip { position: relative; }

.ub-strip-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem 1rem 1rem;
  /* hide the scrollbar but keep the scrolling */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ub-strip-track::-webkit-scrollbar { display: none; }

.ub-strip-track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: calc((100% - 3rem) / 4);
}
@media (max-width: 991.98px) { .ub-strip-track > * { width: calc((100% - 2rem) / 3); } }
@media (max-width: 767.98px) { .ub-strip-track > * { width: calc((100% - 1rem) / 2); } }
@media (max-width: 479.98px) { .ub-strip-track > * { width: 100%; } }

.ub-strip-track img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* การ์ดโปรโมชั่น fallback (ตอนยังไม่ใส่รูปสไลด์ INTRO ใน BO) — CSS ล้วน สัดส่วน 1:1 */
.ub-promo-tile {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--ub-gold-line);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(253, 202, 0, .28), transparent 55%),
    linear-gradient(160deg, #201d1d 0%, #111111 70%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .6rem;
  padding: 1rem;
}
.ub-promo-tile i { font-size: 2.6rem; color: var(--ub-yellow); }
.ub-promo-tile strong { color: var(--ub-cream); font-size: 1.2rem; font-weight: 600; line-height: 1.35; }
.ub-promo-tile span { color: rgba(255, 255, 255, .8); font-weight: 300; font-size: .9rem; }

/* Prev / next arrows for the strip */
.ub-strip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: var(--ub-yellow);
  display: grid;
  place-items: center;
  transition: background .2s ease;
}
.ub-strip-nav:hover { background: var(--ub-yellow); color: #000; }
.ub-strip-nav.prev { left: .25rem; }
.ub-strip-nav.next { right: .25rem; }

/* --------------------------------------------------------------------------
   Service / feature cards (ไอคอน Font Awesome แทนรูป png ของ raw)
   -------------------------------------------------------------------------- */

.ub-service-icon-fa {
  font-size: 72px;
  line-height: 1;
  color: var(--ub-yellow);
  text-shadow: 0 6px 18px rgba(253, 202, 0, .35);
}

.ub-service-box {
  border: 1px solid var(--ub-gold-line);
  border-radius: 10px;
  padding: 1rem;
  max-width: 320px;
  color: var(--ub-yellow);
  font-size: 1.5rem;
  line-height: 1.4;
}
.ub-service-box span {
  color: var(--ub-white);
  font-size: 1rem;
  font-weight: 300;
}

@media (max-width: 767.98px) {
  .ub-service-box { font-size: .875rem; }
  .ub-service-box span { font-size: .75rem; }
  .ub-service-icon-fa { font-size: 44px; }
}

/* --------------------------------------------------------------------------
   Intro band
   -------------------------------------------------------------------------- */

.ub-intro-box {
  border: 1px solid var(--ub-gold-line);
  border-radius: 20px;
  padding: 1.5rem;
  color: var(--ub-cream);
  max-width: 600px;
}
.ub-intro-box p { margin-bottom: 1rem; }
.ub-intro-box p:last-child { margin-bottom: 0; }

.ub-intro-art { max-width: 420px; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Article cards
   -------------------------------------------------------------------------- */

.ub-article {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
}
.ub-article img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ub-article-title {
  color: var(--ub-yellow);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: .35rem;
}
.ub-article-excerpt {
  color: var(--ub-white);
  font-weight: 300;
  font-size: .9375rem;
  max-width: 300px;
  margin: 0;
  /* clamp to a single line the way the reference does */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ub-article-more { color: var(--ub-yellow); font-weight: 600; white-space: nowrap; }

@media (max-width: 575.98px) {
  .ub-article img { width: 110px; height: 84px; }
  .ub-article-title { font-size: .875rem; }
  .ub-article-excerpt { font-size: .8125rem; }
}

/* --------------------------------------------------------------------------
   Game provider logos
   -------------------------------------------------------------------------- */

.ub-providers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem 1rem;
}
.ub-provider {
  width: 150px;
  display: grid;
  place-items: center;
}
.ub-provider img { max-width: 118px; height: auto; border-radius: 8px; }

@media (max-width: 575.98px) {
  .ub-providers { gap: 1rem; }
  .ub-provider { width: 100px; }
  .ub-provider img { max-width: 88px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ub-footer { background-color: var(--ub-dark); padding: 1.5rem 0 2rem; }
.ub-footer .ub-logo { max-width: 190px; max-height: 64px; }
.ub-footer small { color: rgba(255, 255, 255, .75); font-size: .75rem; }
.ub-footer-desc { color: rgba(255, 255, 255, .8); font-weight: 300; font-size: .875rem; max-width: 720px; text-align: center; }

.ub-footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
}
.ub-footer-menu a {
  color: var(--ub-cream);
  font-size: .8125rem;
  border: 1px solid rgba(255, 200, 127, .45);
  border-radius: 999px;
  padding: .25rem .9rem;
  transition: background .2s ease, color .2s ease;
}
.ub-footer-menu a:hover { background: var(--ub-yellow); color: #000; border-color: var(--ub-yellow); }

/* --------------------------------------------------------------------------
   Sticky bottom navigation
   -------------------------------------------------------------------------- */

.ub-bottomnav {
  background-color: var(--ub-dark);
  padding-bottom: 1rem;
  min-height: var(--ub-bottomnav-h);
  display: grid;
  place-items: center;
}

.ub-bottomnav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  max-width: 640px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.ub-bottomnav a,
.ub-bottomnav .ub-navitem {
  color: var(--ub-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .8125rem;
  transition: color .2s ease;
}
.ub-bottomnav a:hover,
.ub-bottomnav .ub-navitem:hover { color: var(--ub-yellow); }
.ub-bottomnav i { font-size: 1.15rem; padding-bottom: .5rem; }

/* Centre item — raised circular button (CSS แทนรูป playmember.png ของ raw) */
.ub-navitem-center { position: relative; }
.ub-center-btn {
  width: 77px;
  height: 77px;
  position: relative;
  top: -28px;
  margin-bottom: -28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fffed5 0%, var(--ub-yellow) 45%, #b8860b 100%);
  border: 3px solid #fff3c4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 22px rgba(253, 202, 0, .45);
  display: grid;
  place-items: center;
  color: #111;
}
.ub-center-btn i { font-size: 1.7rem; padding-bottom: 0 !important; color: #111; }
.ub-navitem-center .ub-navitem-label { position: relative; top: -18px; }

@media (max-width: 575.98px) {
  .ub-bottomnav-inner { gap: .5rem; }
  .ub-bottomnav a, .ub-bottomnav .ub-navitem { font-size: .6875rem; }
  .ub-center-btn { width: 62px; height: 62px; top: -22px; margin-bottom: -22px; }
  .ub-center-btn i { font-size: 1.35rem; }
}