@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root { --red-950:#650000; --tcl-red:#d9161f; --gold:#ffd683; --cream:#fff9eb; --ink:#241313; --ink-soft:#725f5f; --paper:#fff9eb; --card:#fff; --line:#ead8cc; --gold-soft:#fff2d2; --font-display:"Inter",sans-serif; --font-body:"Noto Sans Thai",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
.info-chip {
  font-size: 11.5px;
  font-weight: 600;
  /* padding: 6px 12px; */
  border-radius: 999px;
  /* background: var(--card); */
  /* color: var(--ink-soft); */
  /* border: 1px solid var(--line); */
  text-align: center;
}
.info-chip b {
  color: var(--tcl-red);
  font-family: var(--font-display);
}
.campaign-shell { min-height:100svh; overflow:hidden; color:var(--cream); background:var(--red-950); font-family:"Noto Sans Thai","Inter",sans-serif; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; min-height:92px; display:flex; align-items:center; gap:clamp(28px,5vw,92px); padding:14px clamp(24px,4vw,72px); background:linear-gradient(90deg,rgba(124,0,0,.96),rgba(179,0,7,.9),rgba(112,0,0,.95)); border-bottom:1px solid rgba(255,220,170,.14); border-radius:0 0 52px 52px; box-shadow:0 14px 40px rgba(50,0,0,.2); backdrop-filter:blur(14px); }
.brand { flex:0 0 auto; display:inline-flex; align-items:center; color:#fff; text-decoration:none; }
.brand-logo { display:block; width:auto; height:clamp(42px,5vw,64px); object-fit:contain; }
.brand-mark { font:800 clamp(2rem,3.1vw,3.35rem)/1 "Inter",sans-serif; letter-spacing:-.07em; }
.brand-divider { width:1px; height:48px; background:rgba(255,255,255,.7); }
.brand-event { font:600 1rem/1 "Inter",sans-serif; letter-spacing:-.04em; }
.brand-event em { display:block; color:var(--gold); font-size:.72rem; font-style:normal; letter-spacing:.12em; margin-top:6px; }
.desktop-nav { margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:clamp(20px,2.6vw,48px); }
.desktop-nav a,.mobile-menu nav a { display:inline-flex; align-items:center; gap:9px; color:#fff8e8; text-decoration:none; font-weight:600; white-space:nowrap; transition:color .2s ease,transform .2s ease; }
.desktop-nav a:hover { color:var(--gold); transform:translateY(-2px); }
.desktop-nav svg { width:21px; height:21px; stroke-width:1.8; }
.mobile-menu { display:none; margin-left:auto; position:relative; }
.mobile-menu summary { list-style:none; cursor:pointer; padding:10px; border:1px solid rgba(255,255,255,.35); border-radius:12px; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu summary svg { display:block; width:28px; height:28px; }
.mobile-menu nav { position:absolute; top:calc(100% + 12px); right:0; width:min(310px,calc(100vw - 32px)); display:grid; padding:10px; background:rgba(103,0,0,.98); border:1px solid rgba(255,214,131,.25); border-radius:20px; box-shadow:0 20px 55px rgba(35,0,0,.42); }
.mobile-menu nav a { padding:13px 14px; border-radius:12px; }
.mobile-menu nav a:hover { background:rgba(255,255,255,.1); color:var(--gold); }
.mobile-menu nav svg { width:20px; }
.hero { position:relative; min-height:100svh; isolation:isolate; display:grid; align-items:center; padding:132px clamp(26px,7vw,142px) 60px; background-image:url('../images/desktop.webp'); background-size:cover; background-position:center; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(105,0,0,.94) 0,rgba(105,0,0,.05) 23%,transparent 48%),linear-gradient(90deg,rgba(78,0,0,.92) 0%,rgba(110,0,0,.7) 28%,rgba(110,0,0,.12) 57%,transparent 78%); }
.hero-shade { position:absolute; inset:auto 0 0; z-index:-1; height:28%; background:linear-gradient(transparent,rgba(70,0,0,.38)); }
.hero-copy { width:min(680px,47vw); margin-top:-10vh; text-shadow:0 3px 22px rgba(72,0,0,.75); text-align:center; }
.hero-headline { display:block; width:min(850px,100%); max-width:100%; height:auto; margin:0 auto 22px; filter:drop-shadow(0 4px 26px rgba(72,0,0,.55)); }
.hero-lead { max-width:520px; margin:28px auto 30px; font-size:clamp(1rem,1.25vw,1.28rem); line-height:1.7; color:rgba(255,250,239,.92); }
.primary-cta { width:fit-content; display:inline-flex; align-items:center; gap:14px; padding:13px 28px; color:#fff; text-decoration:none; font-size:clamp(1.05rem,1.45vw,1.45rem); font-weight:700; background:linear-gradient(135deg,#d9161f,#a80006); border:1.5px solid var(--gold); border-radius:999px; box-shadow:0 12px 32px rgba(78,0,0,.4),inset 0 1px rgba(255,255,255,.25); transition:transform .2s ease,box-shadow .2s ease; }
.primary-cta:hover { transform:translateY(-3px); box-shadow:0 18px 36px rgba(78,0,0,.5),0 0 22px rgba(255,199,77,.18); }
.primary-cta svg { width:28px; height:28px; }
.quick-links { position:absolute; left:clamp(26px,7vw,142px); bottom:38px; display:flex; gap:10px; }
.quick-links a { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; color:#fff; text-decoration:none; font-size:.88rem; background:rgba(91,0,0,.6); border:1px solid rgba(255,228,180,.3); border-radius:999px; backdrop-filter:blur(7px); }
.quick-links svg { width:17px; }
.disclaimer { position:absolute; right:4vw; top:112px; bottom:auto; margin:0; font-size:.7rem; color:rgba(225, 225, 225, 0.5); z-index:15; }
.register-modal { width:min(680px,calc(100vw - 28px)); height:min(780px,calc(100svh - 28px)); padding:0; border:0; border-radius:18px; background:#f5f5f5; box-shadow:0 24px 80px rgba(35,0,0,.5); overflow:hidden; }
.register-modal::backdrop { background:rgba(35,0,0,.68); backdrop-filter:blur(5px); }
.modal-shell { display:flex; flex-direction:column; height:100%; }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; background:linear-gradient(135deg,#d9161f,#a80006); color:#fff; }
.modal-header h2 { margin:0; font:600 1rem/1.4 "Noto Sans Thai",sans-serif; }
.modal-close { width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:transparent; color:#fff; font-size:25px; line-height:1; cursor:pointer; }
.modal-close:hover { background:var(--tcl-red); border-color:var(--tcl-red); }
.register-frame { width:100%; flex:1; border:0; background:#f5f5f5; }
.history-modal { width:min(700px,calc(100vw - 28px)); }
.leaderboard-modal { width:min(720px,calc(100vw - 28px)); height:min(820px,calc(100svh - 28px)); }
.rules-modal { width:min(720px,calc(100vw - 28px)); height:min(820px,calc(100svh - 28px)); }
.leaderboard-modal .modal-header { flex:0 0 auto; }
.leaderboard-modal .register-frame { background:var(--paper); }

.hero-headline-wrap {
  position: relative;
  width: min(850px,100%);
  margin: 0 auto 22px;
}
.hero-headline {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  animation: headline-glow 3.4s ease-in-out infinite;
}
/* ชั้นแสงวิบวับ ตัดด้วย mask ตามรูปทรงโลโก้ */
.hero-headline-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,.85) 45%,
    rgba(255,214,131,1) 50%,
    rgba(255,255,255,.85) 55%,
    transparent 70%
  );
  background-size: 250% 100%;
  -webkit-mask-image: url('../images/headline.png');
          mask-image: url('../images/headline.png');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  mix-blend-mode: screen;
  animation: headline-shimmer 3.4s ease-in-out infinite;
}

@keyframes headline-shimmer {
  0%   { background-position: 160% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
@keyframes headline-glow {
  0%, 100% {
    filter: drop-shadow(0 4px 26px rgba(72,0,0,.55)) drop-shadow(0 0 0px rgba(255,214,131,0));
  }
  50% {
    filter: drop-shadow(0 4px 26px rgba(72,0,0,.55)) drop-shadow(0 0 26px rgba(255,214,131,.6));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline,
  .hero-headline-wrap::after { animation: none; }
}



@media (max-width:1180px) { .site-header{min-height:82px;border-radius:0 0 36px 36px}.desktop-nav{gap:17px}.desktop-nav a{font-size:.9rem}.desktop-nav svg{display:none}.hero{padding-top:112px;background-position:55% center}.hero-copy{width:51vw}.hero-headline{width:min(480px,84%)}.disclaimer{top:100px} }
@media (max-width:820px) { .site-header{min-height:74px;padding:11px 22px;border-radius:0 0 28px 28px}.brand-divider{height:36px}.desktop-nav{display:none}.mobile-menu{display:block}.hero{min-height:100svh;align-items:end;padding:108px 28px 105px;background-image:url('../images/mobile_bg.webp');background-position:64% center}.hero::before{background:linear-gradient(180deg,rgba(91,0,0,.9) 0,transparent 27%,rgba(73,0,0,.1) 48%,rgba(70,0,0,.94) 82%,#570000 100%)}.hero-copy{width:min(620px,100%);margin:0 auto;text-align:center}.hero-headline{width:min(420px,68%);margin:0 auto 18px}.hero-lead{max-width:550px;margin:18px auto 24px}.primary-cta{margin-inline:auto}.quick-links{left:28px;right:28px;bottom:48px;overflow-x:auto;scrollbar-width:none}.quick-links::-webkit-scrollbar{display:none}.quick-links a{flex:0 0 auto}.disclaimer{right:28px;top:92px} }
@media (max-width:520px) { .site-header{padding-inline:16px}.brand-logo{height:38px}.hero{min-height:100svh;padding:94px 20px 143px;background-size:auto 78%;background-repeat:no-repeat;background-position:61% 14%;background-color:#790004}.hero::before{background:linear-gradient(180deg,rgba(88,0,0,.72),transparent 34%,rgba(75,0,0,.42) 54%,#6d0002 72%)}.hero-copy{text-align:center}.hero-headline{width:min(320px,84%);margin:0 auto 14px}.hero-lead{font-size:.94rem;line-height:1.55;margin:14px auto 20px}.primary-cta{margin-inline:auto;padding:12px 22px;font-size:1rem}.primary-cta svg{width:23px}.quick-links{left:14px;right:14px;bottom:35px;flex-wrap:wrap;justify-content:center;gap:7px}.quick-links a{padding:6px 9px;font-size:.7rem}.info-chip{font-size:9.5px}.quick-links svg{display:none}.disclaimer{right:16px;top:82px;font-size:.6rem}.register-modal{width:calc(100vw - 16px);height:calc(100svh - 16px);border-radius:14px}.modal-header{padding:11px 14px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition:none!important} }