/* =========================================================
   SUK555 — แคนดี้เงาวาว : ชมพู / ฟ้า
   ========================================================= */
:root {
  --pink:   #F0409B;
  --pink-d: #A80B58;
  --cyan:   #3BC8F5;
  --cyan-d: #1060C8;
  --cream:  #FFE9F4;
  --ink:    #5A0A2E;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background-color: #3A0620;
  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(58,6,32,.72) 0%,
      rgba(58,6,32,0)   20%,
      rgba(58,6,32,0)   46%,
      rgba(74,7,36,.70) 60%,
      var(--ink)        74%,   /* ครึ่งล่างเป็นสีพื้นล้วน ซ่อนลายพื้นหลังที่ตัดขอบ */
      var(--ink)        100%);
}

/* แสงนวลหลังตัวละคร */
.bg_glow {
  position: absolute;
  top: 32%;
  left: 50%;
  width: 135%;
  height: 46%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(48% 50% at 50% 50%, rgba(255,190,230,.40) 0%, rgba(255,190,230,0) 70%),
    radial-gradient(30% 36% at 72% 45%, rgba(59,200,245,.32) 0%, rgba(59,200,245,0) 70%);
  animation: glowPulse 6s ease-in-out infinite;
}

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

/* ฟองลอย */
.bubble {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 70%);
  animation: bubbleRise linear infinite;
}

.bubble--1 { width: 16px; height: 16px; left:  8%; bottom: -8%; animation-duration: 14s; animation-delay: 0s;   }
.bubble--2 { width: 10px; height: 10px; left: 26%; bottom: -8%; animation-duration: 18s; animation-delay: 3s;   }
.bubble--3 { width: 22px; height: 22px; left: 72%; bottom: -8%; animation-duration: 16s; animation-delay: 1.5s; }
.bubble--4 { width: 13px; height: 13px; left: 88%; bottom: -8%; animation-duration: 20s; animation-delay: 5s;   }

@keyframes bubbleRise {
  0%   { transform: translateY(0)      scale(1);   opacity: 0; }
  12%  { opacity: .85; }
  88%  { opacity: .55; }
  100% { transform: translateY(-115vh) scale(1.25); opacity: 0; }
}

/* ===================== 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,.6))
          drop-shadow(0 0 26px rgba(255,120,200,.6));
  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: 92%;
  gap: 11px;
  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 #fff;

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

/* ไฮไลต์เงาวาวด้านบนแบบลูกอม */
.act_btn::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 12%;
  width: 76%;
  height: 36%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 2;
}

/* เข้าสู่ระบบ : ฟ้าสดตามสีเลข 555 ในโลโก้ ตัดกับปุ่มสมัครสีชมพู */
.act_btn--login {
  background: linear-gradient(180deg, #8FE6FF 0%, #29B6F0 45%, #0E6ECC 100%);
  box-shadow:
    0 0 26px rgba(41,182,240,.9),
    0 5px 14px rgba(0,0,0,.45);
}
.act_btn--login .act_btn_txt {
  color: #fff;
  text-shadow: 0 2px 4px rgba(12,60,110,.6);
}

/* สมัครสมาชิก : พื้นชมพูเต็ม */
.act_btn--register {
  background: linear-gradient(180deg, #FF8FC6 0%, var(--pink) 45%, var(--pink-d) 100%);
  box-shadow: 0 0 18px rgba(240,64,155,.6), 0 5px 14px rgba(0,0,0,.4);
  animation: btnPulse 2s ease-in-out infinite;
}
.act_btn--register .act_btn_txt { color: #fff; }

.act_btn:hover  { filter: brightness(1.08); 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: 3;
  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,.7) 50%, transparent);
  filter: blur(10px);
  transform: skewX(-25deg);
  animation: shineSweep 3s 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: 5px;
  margin-bottom: 2px;
  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,.5));
  }
  50% {
    transform: translateY(10px);
    filter: drop-shadow(0 10px 32px rgba(255,140,210,.6));
  }
}

/* ===================== FOOTER ===================== */
.footer_container {
  display: flex;
  justify-content: center;
  width: 90%;
}

.footer_app {
  width: 76%;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
}

/* ===================== 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--v21 ด้านล่าง
   ============================================================ */
.dl_bar {
    --c1: #F0409B;   /* สีหลักของแบรนด์ */
    --c2: #3BC8F5;   /* สีรอง */
    --c3: #FFE9F4;   /* สีไฮไลต์ */
    --bg1: #5A0A2E; /* พื้นแถบด้านบน */
    --bg2: #2A0418; /* พื้นแถบด้านล่าง */
    --ink: #FFFFFF; /* สีตัวอักษรบนปุ่ม */

    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; }
}

/* --- v21 : แคนดี้เงาวาว ขอบขาว ชมพู-ฟ้า (SUK555) --- */
.dl_bar--v21 {
    background: linear-gradient(100deg, var(--c1) 0%, #B0248C 48%, var(--c2) 100%);
    background-size: 200% 100%;
    animation: dlFlow 9s linear infinite;
    border-radius: 0 0 20px 20px;
    border-bottom: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.42);
}
.dl_bar--v21::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
    border-radius: 0 0 20px 20px;
    pointer-events: none;
}
.dl_bar--v21 .dl_bar_icon {
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.35);
}
.dl_bar--v21 .dl_bar_name { color: #fff; text-shadow: 0 2px 4px rgba(120,10,70,.55); }
.dl_bar--v21 .dl_bar_meta { color: rgba(255,255,255,.88); }
.dl_bar--v21 .dl_bar_btn {
    border-radius: 999px;
    background: linear-gradient(180deg, #FFF6FB 0%, #FFD3E8 100%);
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 2px 4px rgba(255,255,255,.9);
    animation: dlPulse 2.3s ease-in-out infinite;
}
.dl_bar--v21 .dl_bar_btn_txt { color: #B0248C; text-shadow: none; }
.dl_bar--v21 .dl_bar_btn_ico { stroke: #B0248C; }