/* =========================================================
   RK39 — นีออนอาร์เคด : น้ำเงิน / แดง / ทอง
   ========================================================= */
:root {
  --blue:  #20C8FF;
  --blue-d:#20C8FF;
  --red:   #8A32E0;
  --red-d: #8A32E0;
  --gold:  #FFC21A;
  --gold-l:#FFF0A0;
  --ink:   #0C0A06;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background-color: #050403;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
  font-family: 'Prompt', sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 420px;
  max-width: 100%;
  min-height: 100vh;
  /* clip ไม่สร้าง scroll container -> แถบดาวน์โหลด sticky ยังทำงาน */
  overflow-x: clip;
  background: var(--ink);
}

/* ===================== BACKGROUND ===================== */
.background_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  pointer-events: none;
}

.bg_vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,4,3,.75) 0%, rgba(5,4,3,0) 18%,
                            rgba(5,4,3,0) 72%, rgba(5,4,3,.92) 100%);
}

/* ลำแสงนีออนหลังตัวละคร */
.bg_beam {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 140%;
  height: 46%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(48% 50% at 50% 50%, rgba(32,200,255,.42) 0%, rgba(32,200,255,0) 70%),
    radial-gradient(34% 40% at 70% 45%, rgba(138,50,224,.30) 0%, rgba(138,50,224,0) 70%);
  animation: beamPulse 6s ease-in-out infinite;
}

@keyframes beamPulse {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.08); }
}

/* ===================== CONTENT ===================== */
.content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px 0 145px;  /* เว้นที่ให้ปุ่ม LINE ลอย ไม่ทับท้ายหน้า */
  box-sizing: border-box;
}

/* ===================== LOGO ===================== */
.logo_top {
  pointer-events: none;
  margin-bottom: 22px;
  width: 58%;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.75))
          drop-shadow(0 0 26px rgba(32,200,255,.55));
  animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-6px) scale(1.02); }
}

/* ===================== ACTION BUTTONS ===================== */
.action_container {
  position: relative;
  z-index: 5;
  display: flex;
  width: 94%;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.act_btn {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: clamp(44px, 12vw, 52px);
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;

  border-radius: 999px;
  border: 3px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;

  box-shadow: 0 5px 16px rgba(0,0,0,.55);
  transition: transform .18s ease, filter .18s ease;
}

/* ทางเข้าเล่น : ฟ้าสดตัดกับพื้นหลัง ขอบทอง */
.act_btn--login {
  background-image:
    linear-gradient(180deg, #8FE6FF 0%, #20C8FF 42%, #0A7DC8 100%),
    linear-gradient(180deg, #FFF0A0 0%, var(--gold) 45%, #B88200 100%);
  box-shadow:
    0 0 26px rgba(32,200,255,.9),
    0 0 10px rgba(143,230,255,.7),
    0 5px 16px rgba(0,0,0,.55),
    inset 0 2px 5px rgba(255,255,255,.45);
}
.act_btn--login .act_btn_txt {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.55);
}

/* สมัครสมาชิก : พื้นทองเต็ม ตัวอักษรน้ำเงินเข้ม */
.act_btn--register {
  background-image:
    linear-gradient(180deg, #FFF0A0 0%, var(--gold) 48%, #B88200 100%),
    linear-gradient(180deg, #FFF0A0 0%, #FFC21A 45%, #B88200 100%);
  animation: btnPulse 2s ease-in-out infinite;
}
.act_btn--register .act_btn_txt {
  color: #3A1170;
}

.act_btn:hover  { filter: brightness(1.1); transform: translateY(-2px); }
.act_btn:active { transform: scale(.97); }

@keyframes btnPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.act_btn_txt {
  position: relative;
  z-index: 2;
  font-weight: 800;
  font-size: clamp(16px, 4.8vw, 20px);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* แสงวิ่งบนปุ่ม */
.act_btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -160%;
  width: 160%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6) 50%, transparent);
  filter: blur(10px);
  transform: skewX(-25deg);
  animation: shineSweep 2.8s linear infinite;
  pointer-events: none;
}

@keyframes shineSweep {
  0%   { left: -160%; }
  60%  { left: 160%; }
  100% { left: 160%; }
}

/* ===================== CHARACTER ===================== */
.character_img {
  pointer-events: none;
  width: 95%;
  margin-top: 7px;
  margin-bottom: 4px;
  animation: floatGlow 4.5s ease-in-out infinite;
}

@keyframes floatGlow {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 14px 26px rgba(0,0,0,.65));
  }
  50% {
    transform: translateY(10px);
    filter: drop-shadow(0 10px 32px rgba(32,200,255,.55));
  }
}

/* ===================== FOOTER ===================== */
.footer_container {
  display: flex;
  justify-content: center;
  width: 90%;
  gap: 10px;
  align-items: center;
}

.footer_app {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.65));
}

/* ===================== FLOATING LINE BUTTON ===================== */
.line_float_layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.line_float_band {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.line_float_btn {
  position: absolute;
  right: 8px;
  bottom: 12px;
  width: 104px;

  display: block;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;

  animation: lineFloatBob 2.8s ease-in-out infinite;
  transition: transform .25s ease;
}

.line_float_btn:hover  { transform: scale(1.07); }
.line_float_btn:active { transform: scale(0.94); }

.line_float_icon {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(6,199,85,.55))
          drop-shadow(0 5px 10px rgba(0,0,0,.55));
}

/* วงแหวนเรืองแสง วางทับตำแหน่งวงกลม LINE ในรูปพอดี */
.line_float_pulse {
  position: absolute;
  z-index: 1;
  left: 30%;
  top: 3%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(6, 199, 85, .5);
  animation: lineFloatPulse 2.2s ease-out infinite;
}

.line_float_pulse--2 { animation-delay: 1.1s; }

@keyframes lineFloatBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes lineFloatPulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.8); opacity: 0;  }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 360px) {
  .act_btn_txt      { font-size: 15px; }
  .line_float_btn   { width: 88px; right: 6px; bottom: 10px; }
}

/* ===================== DOWNLOAD APP BAR =====================
   แถบดาวน์โหลดแอปติดบนสุด (sticky)
   ดีไซน์ของแบรนด์นี้อยู่ในบล็อก .dl_bar--v20 ด้านล่าง
   ============================================================ */
.dl_bar {
    --c1: #FFC21A;   /* สีหลักของแบรนด์ */
    --c2: #20C8FF;   /* สีรอง */
    --c3: #8A32E0;   /* สีไฮไลต์ */
    --bg1: #3A1170; /* พื้นแถบด้านบน */
    --bg2: #050403; /* พื้นแถบด้านล่าง */
    --ink: #1A1200; /* สีตัวอักษรบนปุ่ม */

    position: sticky;
    top: 0;
    z-index: 200;

    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    text-decoration: none;
    cursor: pointer;
    isolation: isolate;
}

.dl_bar_icon {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.dl_bar_icon svg { width: 22px; height: 22px; display: block; }

.dl_bar_info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dl_bar_name {
    font-family: 'Prompt', sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.dl_bar_meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1.1;
    color: rgba(255,255,255,.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl_bar_meta b { color: var(--c1); font-weight: 800; }

.dl_bar_stars { display: flex; gap: 2px; flex-shrink: 0; }

.dl_bar_stars i {
    width: 10px;
    height: 10px;
    background: var(--c1);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.dl_bar_btn {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    box-sizing: border-box;
}

.dl_bar_btn_txt {
    /* ต้องอยู่เหนือเลเยอร์แสงวิ่ง ไม่งั้นตัวหนังสือจะจาง */
    position: relative;
    z-index: 2;
    font-family: 'Prompt', sans-serif;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .4px;
    white-space: nowrap;
    color: var(--ink);
}

.dl_bar_btn_ico {
    position: relative;
    z-index: 2;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dl_bar:active .dl_bar_btn { transform: scale(.95); }

@keyframes dlShine {
    0%   { left: -160%; }
    60%  { left: 160%; }
    100% { left: 160%; }
}
@keyframes dlFlow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes dlPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes dlBob {
    0%, 100% { transform: translateY(-1px); }
    50%      { transform: translateY(2px); }
}
@keyframes dlSpin { to { transform: rotate(360deg); } }

@media (max-width: 360px) {
    .dl_bar         { padding: 7px 9px; gap: 8px; }
    .dl_bar_icon    { width: 35px; height: 35px; }
    .dl_bar_icon svg{ width: 19px; height: 19px; }
    .dl_bar_name    { font-size: 13px; }
    .dl_bar_meta    { font-size: 9.5px; }
    .dl_bar_btn     { height: 32px; padding: 0 11px; }
    .dl_bar_btn_txt { font-size: 11.5px; }
}

/* --- v20 : อาร์เคดตัดมุมทแยง ไฟน้ำเงิน-แดง (RK39) --- */
.dl_bar--v20 {
    background:
        repeating-linear-gradient(115deg, rgba(255,194,26,.06) 0 8px, transparent 8px 20px),
        linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
    border-bottom: 3px solid var(--c1);
    box-shadow: 0 6px 20px rgba(0,0,0,.6);
}
.dl_bar--v20::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 130% at 18% 50%, rgba(32,200,255,.40) 0%, transparent 70%),
                radial-gradient(50% 120% at 88% 50%, rgba(138,50,224,.35) 0%, transparent 70%);
}
.dl_bar--v20 .dl_bar_icon {
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    border: 0;
    box-shadow: 0 0 12px rgba(255,194,26,.55);
}
.dl_bar--v20 .dl_bar_name {
    color: var(--c1);
    letter-spacing: .8px;
    text-shadow: 0 0 10px rgba(255,194,26,.75), 0 2px 0 rgba(0,0,0,.7);
}
.dl_bar--v20 .dl_bar_stars i { filter: drop-shadow(0 0 4px var(--c1)); }
.dl_bar--v20 .dl_bar_btn {
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    background: linear-gradient(180deg, #FFF0A0 0%, var(--c1) 48%, #B88200 100%);
    box-shadow: 0 0 16px rgba(255,194,26,.6), 0 4px 10px rgba(0,0,0,.6);
    animation: dlPulse 2s ease-in-out infinite;
}
.dl_bar--v20 .dl_bar_btn::before {
    content: ""; position: absolute; top: 0; left: -160%; width: 160%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.85) 50%, transparent);
    filter: blur(8px); transform: skewX(-25deg);
    animation: dlShine 2.6s linear infinite; pointer-events: none;
}
.dl_bar--v20 .dl_bar_btn_ico { animation: dlBob 1.5s ease-in-out infinite; }

/* ===================== TELEGRAM CONTACT ===================== */
.tg_contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  box-sizing: border-box;

  border-radius: 12px;
  text-decoration: none;

  background: linear-gradient(180deg, rgba(41,169,235,.24) 0%, rgba(0,0,0,.50) 100%);
  border: 1.5px solid rgba(62,180,239,.8);
  box-shadow: 0 0 14px rgba(41,169,235,.35), 0 4px 10px rgba(0,0,0,.45);

  transition: transform .18s ease, box-shadow .18s ease;
  flex: 1 1 0;
  min-width: 0;
}

.tg_contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(41,169,235,.65), 0 6px 14px rgba(0,0,0,.5);
}
.tg_contact:active { transform: scale(.97); }

.tg_icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

.tg_info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tg_label {
  font-family: 'Prompt', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.1;
  color: rgba(255,255,255,.80);
  white-space: nowrap;
}

.tg_handle {
  font-family: 'Prompt', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.1;
  color: #7FD6FF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

@media (max-width: 360px) {
  .tg_icon   { width: 26px; height: 26px; }
  .tg_label  { font-size: 8.5px; }
  .tg_handle { font-size: 11px; }
}