:root{
  --pink:#ff9ac8; --violet:#c77dff; --rose:#ff6fa3;
  --ticker-speed: 34s; /* ปรับความเร็วข้อความวิ่ง */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:#fff;
  font-family: ui-monospace, "JetBrains Mono", Consolas, "Courier New", monospace;
  overflow:hidden;
}

/* ===== BG: ไล่สี + ก้อนหมอก + จุดกะพริบ ===== */
.bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(60vmax 60vmax at 18% 20%, rgba(255,154,200,.35), transparent 55%),
    radial-gradient(60vmax 60vmax at 82% 25%, rgba(199,125,255,.35), transparent 60%),
    linear-gradient(135deg, var(--pink), var(--violet));
  filter: saturate(1.06);
  animation: hueflow 18s ease-in-out infinite alternate;
}
@keyframes hueflow{ to{ filter: saturate(1.1) hue-rotate(10deg); } }

/* ก้อนหมอกเบลอเล็กน้อย */
.bg::before, .bg::after{
  content:""; position:absolute; inset:-12vmax;
  background:
    radial-gradient(30vmax 20vmax at 20% 60%, rgba(255,180,210,.28), transparent 60%),
    radial-gradient(24vmax 18vmax at 80% 40%, rgba(199,125,255,.25), transparent 60%);
  filter: blur(10px);
  animation: drift 30s ease-in-out infinite alternate;
}
.bg::after{ animation-duration: 36s; animation-direction: alternate-reverse; }
@keyframes drift{ to{ transform: translate3d(2vw,-1vh,0) scale(1.02); } }

/* จุดกะพริบ */
.tw{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.0) 70%);
  opacity:.0; filter: blur(0.5px);
  animation: twinkle var(--dur,3.4s) ease-in-out var(--delay,0s) infinite;
}
@keyframes twinkle{
  0%,100% { opacity:0; transform: translate3d(0,0,0) scale(.6); }
  45%     { opacity:.9; transform: translate3d(0,-6px,0) scale(1.1); }
}

/* ===== TICKER: ข้อความวิ่งแนวนอนหลังการ์ด ===== */
.ticker{
  position:fixed; left:0; right:0; top:12vh;
  height: clamp(42px, 6vw, 64px);
  z-index:0; pointer-events:none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  opacity:.75;
}
.ticker__viewport{
  width:100%; height:100%; overflow:hidden;
}
.ticker__track{
  display:flex; width:max-content;
  will-change: transform;
  animation: ticker var(--ticker-speed) linear infinite;
}
.ticker__segment{
  white-space: nowrap;
  padding-right: 3rem;
  font-weight: 900;
  letter-spacing: .22em;
  font-size: clamp(18px, 3.2vw, 42px);

  /* ทำให้ “ตัดกับพื้นหลัง” แต่ยังละมุน */
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.45);
  background: linear-gradient(90deg,
              rgba(255,255,255,0.95),
              rgba(255,200,220,0.9),
              rgba(255,120,150,0.9));
  -webkit-background-clip: text;
          background-clip: text;
  text-shadow:
    0 0 8px rgba(255,140,170,.18),
    0 0 18px rgba(255,60,100,.12),
    0 2px 8px rgba(0,0,0,.25);
  opacity: .18;
}
@keyframes ticker{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ===== Stack/ Cards ===== */
.stack{
  position:relative; z-index:2;
  height:100%;
  display:grid; place-items:center;
  padding: clamp(12px, 3vw, 28px);
}
.card{
  position:absolute; inset:auto;
  width:min(92vw, 720px);
  border-radius:22px;
  padding: clamp(18px, 3vw, 34px);
  text-align:center;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  opacity:0; transform: translateY(12px) scale(.98);
  pointer-events:none;
}
.card.active{ opacity:1; transform:none; pointer-events:auto; }

.ascii{
  position: relative;
  isolation: isolate;            /* แยกเลเยอร์ไม่ให้ไปรวมกับ BG */
  margin: 0 0 clamp(8px, 1.6vw, 14px);
  white-space: pre;
  line-height: .92;
  letter-spacing: .02em;
  font-weight: 900;
  font-size: clamp(9px, 1.1vw + 7px, 18px);

  /* เติมสีแบบไล่เฉดในตัวอักษร */
  color: transparent;
  background:
    radial-gradient(circle at 50% 38%,
      #ffffff 0 8%, #ffd6e8 24%, #ff8ab3 46%, #ff477e 63%, #c9184a 86%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: shine 10s linear infinite;

  /* ✅ ขอบตัวอักษรให้เด้งจากพื้นหลัง */
  -webkit-text-stroke: 0.8px rgba(0,0,0,.55);

  /* ✅ เงาหลายชั้น สร้างทั้งขอบเข้มและกลิ่นโกลว์ชมพู */
  text-shadow:
    0 0 1px rgba(0,0,0,.85),
    0 0 3px rgba(0,0,0,.75),
    0 2px 8px rgba(0,0,0,.65),
    0 8px 22px rgba(0,0,0,.55),
    0 0 16px rgba(255,120,160,.35);
}
/* แอนิเมชันเงาวาวของ ASCII */
@keyframes shine{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ✅ แผ่นมืดเบลอเฉพาะหลัง ASCII ให้ตัดฉากหลังชัดขึ้น */
.ascii::before{
  content: "";
  position: absolute;
  inset: -8px -10px;             /* ขยายขอบรอบ ASCII นิดหน่อย */
  z-index: -1;
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 50% 45%,
      rgba(10,7,20,.50),
      rgba(10,7,20,.28) 40%,
      transparent 68%);
  filter: blur(6px);
  opacity: .95;
}

h2{ margin:.2rem 0 .2rem; font-size: clamp(22px, 2.2vw + 12px, 40px); }
p{  margin:.2rem 0 0; font-size: clamp(14px, 1vw + 10px, 20px); opacity:.95; }
.hint{ opacity:.9; font-weight:700; color:#fff; text-shadow:0 1px 8px rgba(255,255,255,.2); }

/* ปุ่มนำทาง */
.nav{ position:fixed; inset:auto 16px 16px auto; display:flex; gap:8px; z-index:2; }
.nav button{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color:#fff; font-size:26px; cursor:pointer; backdrop-filter: blur(8px);
}
@media (max-width:560px){ .nav{ display:none; } }

/* ความคืบหน้า */
.progress{
  position:fixed; top:14px; right:16px; z-index:2;
  padding:6px 10px; border-radius:10px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  font-weight:700; font-size:13px;
}

/* แอนิเมชันเข้า/ออกการ์ด */
.card.leave-left{ animation: fadeOutLeft .42s ease forwards; z-index:3; }
.card.leave-right{ animation: fadeOutRight .42s ease forwards; z-index:3; }
.card.enter-right{ animation: fadeInRight .42s ease forwards; z-index:2; }
.card.enter-left{  animation: fadeInLeft  .42s ease forwards; z-index:2; }

@keyframes fadeOutLeft{ to{ opacity:0; transform: translateX(-40px) scale(.98); filter: blur(3px);} }
@keyframes fadeOutRight{to{ opacity:0; transform: translateX( 40px) scale(.98); filter: blur(3px);} }
@keyframes fadeInRight{ from{ opacity:0; transform: translateX(30px)  scale(.98); filter: blur(2px);} to{ opacity:1; transform:none; filter:none;} }
@keyframes fadeInLeft{  from{ opacity:0; transform: translateX(-30px) scale(.98); filter: blur(2px);} to{ opacity:1; transform:none; filter:none;} }