/* intro.css — หน้าเข้าเว็บ (ฉากดวงดาว + วงล้อนักษัตร) · ใช้สี accent ของธีมที่เลือก (หวาน = ชมพูม่วง · เท่ = ทอง) */
html.intro-on body > :not(#intro) { visibility: hidden; }
html.intro-on body { overflow: hidden; }

#intro {
  position: fixed; inset: 0; z-index: 100; color: #f3f1fa; overflow: hidden auto;
  background: radial-gradient(ellipse at 50% 120%, #1d1440 0%, #0b0d1c 55%, #05060d 100%);
  display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 64px 16px 16px;
  transition: opacity .6s ease, transform .6s ease;
}
[data-style="cool"] #intro { background: radial-gradient(ellipse at 50% 120%, #1c1a12 0%, #0b0e14 55%, #040508 100%); }
#intro.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.in-sky { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.in-glow { position: fixed; left: 50%; top: 42%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, color-mix(in srgb, var(--accent2) 12%, transparent) 38%, transparent 68%);
  animation: inBreath 6s ease-in-out infinite; }
@keyframes inBreath { 50% { transform: scale(1.08); opacity: .8; } }
.in-stage { position: relative; width: 100%; max-width: 860px; }

.in-skip { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 2; background: rgba(255, 255, 255, .08); color: #d9d6e6;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .85rem; cursor: pointer; backdrop-filter: blur(6px); }
.in-skip:hover { background: rgba(255, 255, 255, .16); }

.in-card { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; justify-items: center; }
@media (min-width: 760px) { .in-card { grid-template-columns: 340px 1fr; gap: 40px; } }

/* วงล้อ */
.in-wheel { position: relative; width: min(300px, 76vw); aspect-ratio: 1; animation: inFloat 7s ease-in-out infinite; }
@keyframes inFloat { 50% { transform: translateY(-6px); } }
.in-wheel svg { width: 100%; height: 100%; overflow: visible; }
.in-pin { position: absolute; left: 50%; top: -14px; margin-left: -9px; width: 0; height: 0; z-index: 1;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid var(--accent);
  filter: drop-shadow(0 0 8px var(--accent)); }
.in-ring { fill: rgba(255, 255, 255, .03); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.5; }
.in-ring2 { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.in-ticks line { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.in-rot { transform-box: view-box; transform-origin: 150px 150px; }
.in-card:not(.spinning) .in-rot { animation: inIdle 60s linear infinite; }
@keyframes inIdle { to { transform: rotate(-360deg); } }
.in-card:not(.spinning) .in-up { animation: inIdleUp 60s linear infinite; }
@keyframes inIdleUp { to { transform: rotate(360deg); } }
.in-an { fill: #cfcbe0; font: 600 10px "IBM Plex Sans Thai", sans-serif; }
.in-seg.hit .in-an { fill: var(--accent); font-size: 11px; }
.in-seg.hit text:first-child { filter: drop-shadow(0 0 6px var(--accent)); }
.in-core { fill: rgba(8, 9, 20, .82); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.2; }
.in-c1 { fill: var(--accent); font: 700 22px "Noto Serif SC", serif; }
.in-c2 { fill: #f3f1fa; font: 600 13px "IBM Plex Sans Thai", sans-serif; }

/* ฟอร์ม + ข้อความ */
.in-form { width: min(420px, 100%); text-align: center; transition: opacity .35s ease, transform .35s ease; }
@media (min-width: 760px) { .in-form { text-align: left; } }
.in-form.gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
.in-kicker { margin: 0; color: color-mix(in srgb, var(--accent) 70%, #fff); font-weight: 600; letter-spacing: .04em; }
.in-title { margin: 2px 0 6px; font: 700 clamp(2rem, 7vw, 2.8rem)/1.2 var(--fh), "IBM Plex Sans Thai", sans-serif; color: #fff;
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
.in-sub { margin: 0 0 14px; color: #cfcbe0; }
.in-sub b { color: var(--accent); font-family: "Noto Serif SC", serif; font-size: 1.15em; }
.in-form label { display: block; text-align: left; color: #d9d6e6; font-weight: 500; font-size: .9rem; margin: 10px 0 0; }
.in-form label small { color: #9994b0; font-weight: 400; }
.in-form input { display: block; width: 100%; margin-top: 4px; padding: 11px 14px; font: inherit; color: #fff; color-scheme: dark;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; }
.in-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.in-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.in-go { display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 12px; padding: 13px 20px; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 6px 26px color-mix(in srgb, var(--accent) 40%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.in-go:hover { transform: translateY(-2px); box-shadow: 0 10px 32px color-mix(in srgb, var(--accent) 55%, transparent); }
.in-go:active { transform: scale(.98); }
.in-err { min-height: 1.2em; margin: 8px 0 0; color: #ff8f8f; font-size: .88rem; }
.in-note { margin: 6px 0 0; color: #8f8aa6; font-size: .8rem; }


@media (prefers-reduced-motion: reduce) {
  .in-glow, .in-wheel, .in-card:not(.spinning) .in-rot, .in-card:not(.spinning) .in-up { animation: none !important; }
}
.in-music { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 16px; z-index: 2; background: rgba(255, 255, 255, .08); color: #d9d6e6;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .85rem; cursor: pointer; backdrop-filter: blur(6px); }
.in-music.on { border-color: var(--accent); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.in-powered { position: relative; margin: 14px 0 max(0px, env(safe-area-inset-bottom)); text-align: center; font-size: .78rem; letter-spacing: .06em; color: #8f8aa6; pointer-events: none; }
.in-powered b { color: color-mix(in srgb, var(--accent) 75%, #fff); font-family: var(--fh), sans-serif; }