/* WUBBO Pop — บัตรเชิญปาร์ตี้เปิดตัว
   ลายเซ็น: สีหูฟังที่แขกเลือก = ธีมของทั้งหน้า = ช่องเพลงใน Silent Disco = สีบัตรเข้างาน */

:root {
  --ink: #17131F;
  --paper: #FFFDF7;
  --line: 2.5px solid var(--ink);
  --pop: 5px 5px 0 var(--ink);
  --pop-sm: 3px 3px 0 var(--ink);
  --f-body: 'Prompt', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', 'Prompt', ui-monospace, monospace; /* Plex ไม่มีอักษรไทย ให้ไทยตกไปที่ Prompt */
  --gutter: clamp(16px, 5vw, 48px);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* ลายพื้นหลัง — สีหมึกโปร่งใส วางทับสีธีมได้ทุกสี
     waves: คลื่นเสียง + แท่งอีควอไลเซอร์ + จุด (ลายของหูฟัง) · dots: ฮาล์ฟโทน */
  --tex-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%2317131F' stroke-opacity='.13' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 34q7-11 14 0t14 0t14 0t14 0'/%3E%3Cpath d='M86 112q7-11 14 0t14 0t14 0t14 0'/%3E%3Cpath d='M112 18v16M120 12v28M128 18v16M136 22v8'/%3E%3Cpath d='M24 94v8M32 86v24M40 90v16M48 95v6'/%3E%3Ccircle cx='82' cy='64' r='4.5'/%3E%3Ccircle cx='146' cy='70' r='2' fill='%2317131F' fill-opacity='.13'/%3E%3Ccircle cx='60' cy='140' r='2' fill='%2317131F' fill-opacity='.13'/%3E%3Cpath d='M14 140l8-8M14 132l8 8'/%3E%3Cpath d='M140 132v12M134 138h12'/%3E%3C/svg%3E");
  --tex-dots: radial-gradient(rgba(23, 19, 31, .11) 1.3px, transparent 1.8px);
}
/* ธีมตามสีหูฟัง: --c สีหลัก, --soft พื้นอ่อน, --hl สีไฮไลต์ (ต้องต่างจากสีหลักเสมอ) */
[data-color="butter"]    { --c: #FFD83D; --soft: #FFF4BF; --hl: #FF6FB1; }
[data-color="bubblegum"] { --c: #FF6FB1; --soft: #FFDDEE; --hl: #FFD83D; }
[data-color="soda"]      { --c: #3EC5FF; --soft: #D2F1FF; --hl: #FFD83D; }
[data-color="matcha"]    { --c: #8EDB5A; --soft: #E3F7D4; --hl: #FF6FB1; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  background-color: var(--soft);
  background-image: var(--tex-dots);
  background-size: 18px 18px;
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .4s;
}
body.is-gated { overflow: hidden; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
mark { background: none; color: inherit; position: relative; z-index: 0; white-space: nowrap; }
mark::before { /* ปากกาไฮไลต์เอียงๆ */
  content: ''; position: absolute; z-index: -1; left: -.1em; right: -.1em; top: .4em; bottom: .14em;
  background: var(--hl); border-radius: .2em; transform: rotate(-1.5deg);
}
.wrap { width: min(1100px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { width: min(580px, 100%); }

/* ---------- ชิ้นส่วนร่วม ---------- */
.logo { font: italic 900 22px/1 var(--f-body); letter-spacing: -.02em; }
.logo--sm { font-size: 17px; }
.sticker {
  display: inline-block; padding: 6px 14px; border: var(--line); border-radius: 999px;
  background: #fff; box-shadow: var(--pop-sm);
  font: 800 13px/1.2 var(--f-body); letter-spacing: .02em; white-space: nowrap;
  transform: rotate(var(--r, 0deg));
}
.sticker--ink { background: var(--ink); color: #fff; box-shadow: none; }
.sticker--hl { background: var(--hl); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border: var(--line); border-radius: 16px; cursor: pointer;
  font-weight: 800; font-size: 16px; text-decoration: none; color: var(--ink); background: #fff;
  box-shadow: var(--pop); transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--hl); border-color: var(--ink); }
.btn--ink:hover { box-shadow: 7px 7px 0 var(--hl); }
.btn--line { background: transparent; box-shadow: none; }
.btn--line:hover { box-shadow: var(--pop-sm); }
.btn--big { min-height: 60px; font-size: 18px; padding: 0 32px; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- ประตูเปิดบัตร ---------- */
.gate {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px var(--gutter);
  background-color: var(--c);
  background-image: var(--tex-waves);
  background-size: 160px 160px;
  transition: transform .55s cubic-bezier(.7, 0, .3, 1);
}
.gate-card {
  width: min(400px, 100%); padding: 30px 26px 28px; text-align: center;
  background: #fff; border: var(--line); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-2deg); display: grid; justify-items: center; gap: 14px;
  animation: drop-in .7s var(--ease-pop) both;
}
.gate-card { position: relative; }
.sound-toggle {
  position: absolute; top: -16px; right: 14px; transform: rotate(4deg);
  padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; cursor: pointer;
  background: var(--hl); font-size: 12.5px; font-weight: 800; box-shadow: var(--pop-sm);
}
.sound-toggle[aria-pressed="false"] { background: #fff; text-decoration: line-through; text-decoration-thickness: 2px; }
.gate-hi { font: 900 clamp(34px, 10vw, 46px)/1.1 var(--f-body); letter-spacing: -.02em; }
.gate-msg { font-size: 17px; font-weight: 500; }
.gate .btn { margin-top: 8px; width: 100%; }
.beat {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 16px; text-align: center;
  font: italic 900 clamp(52px, 16vw, 150px)/1 var(--f-body); letter-spacing: -.03em;
  pointer-events: none;
}
.beat:empty { display: none; }
.beat.hit { animation: slam .36s var(--ease-pop); }
.gate.is-beating .gate-card { display: none; }
.gate.is-gone { transform: translateY(-105%); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-40px) rotate(-8deg) scale(.9); } }
@keyframes slam { 0% { transform: scale(1.6) rotate(-6deg); opacity: 0; } 60% { transform: scale(.94) rotate(1deg); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- hero ---------- */
.hero {
  background-color: var(--c); border-bottom: var(--line);
  background-image: var(--tex-waves);
  background-size: 160px 160px;
  padding: 16px var(--gutter) 40px; display: grid; gap: 22px; overflow: hidden;
  transition: background-color .4s;
}
.topbar { display: flex; justify-content: space-between; align-items: center; }
.hero-grid { display: grid; gap: 8px; }
.kinetic { font: 900 clamp(50px, 14vw, 96px)/1.02 var(--f-body); letter-spacing: -.035em; margin-top: 10px; }
.kinetic .w { display: block; }
body.is-live .kinetic .w { animation: word-in .6s var(--ease-pop) both; animation-delay: calc(var(--i) * .14s + .05s); }
@keyframes word-in { from { opacity: 0; transform: translateY(40px) rotate(-5deg) scale(.8); } }
.lede { margin-top: 20px; font-size: 17px; max-width: 30em; }
.when { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.when li {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px;
  background: #fff; border: var(--line); border-radius: 12px; font-weight: 700; font-size: 15px;
}
.when .k { font: 600 11px/1 var(--f-mono); opacity: .6; }

.product { position: relative; width: min(100%, 460px); margin: 6px auto 0; padding: 14px 18px 0; }
.phones { display: block; width: 100%; height: auto; overflow: visible; transform: rotate(-7deg); }
body.is-live .phones { animation: float 3.2s ease-in-out infinite; }
@keyframes float { 50% { transform: rotate(-4deg) translateY(-10px); } }
.phones .waves { animation: pulse 1.1s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 50% { opacity: .25; } }
.product .sticker { position: absolute; z-index: 2; font-size: 15px; }
.photo { display: none; }
.product.has-photo .photo {
  display: block; border: var(--line); border-radius: 28px; overflow: hidden; background: var(--c);
  box-shadow: 8px 8px 0 var(--ink); transform: rotate(-2deg);
}
.product.has-photo .photo img { display: block; width: 100%; height: auto; transition: opacity .25s; }
.product.has-photo .photo img.is-swapping { opacity: .2; }
.product.has-photo .phones { display: none; }
body.is-live .product.has-photo .photo { animation: photo-in .7s var(--ease-pop) both .2s; }
@keyframes photo-in { from { opacity: 0; transform: rotate(-9deg) scale(.85); } }
body.is-live .bob { animation: bob 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 50% { transform: rotate(calc(var(--r) * -1)) translateY(-4px); } }
.product-name { margin-top: 6px; text-align: center; font-size: 15px; }

.picker { background: #fff; border: var(--line); border-radius: 22px; padding: 18px; box-shadow: var(--pop); }
.picker h2 { font-size: 20px; font-weight: 800; line-height: 1.3; }
.picker-note { font-size: 14px; margin-top: 2px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.swatch {
  display: grid; justify-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 700;
}
.swatch i {
  width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 50%; border: var(--line);
  background: var(--sw); transition: transform .2s var(--ease-pop), box-shadow .2s;
}
.swatch:hover i { transform: scale(1.06) rotate(-6deg); }
.swatch[aria-pressed="true"] i { transform: scale(1.1); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink); }
.channel { margin-top: 14px; font-weight: 700; min-height: 1.6em; }
.channel span { font-family: var(--f-mono); font-weight: 600; font-size: 13px; padding: 2px 8px; border-radius: 6px; background: var(--ink); color: #fff; margin-right: 6px; }

.hero > .btn { justify-self: start; }
.countdown { font: 600 13px/1.4 var(--f-mono); margin-top: -8px; }

/* ---------- ticker ---------- */
.ticker { background: var(--ink); color: #fff; overflow: hidden; border-bottom: var(--line); }
.ticker-track {
  display: flex; gap: 18px; width: max-content; padding: 12px 0; white-space: nowrap;
  font: italic 800 17px/1 var(--f-body); letter-spacing: .01em;
  animation: marquee 22s linear infinite;
}
.ticker i { font-style: normal; color: var(--c); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- กำหนดการ ---------- */
.agenda { padding: 56px 0 24px; }
.agenda .sec-title { text-align: center; }
.sec-title { font: 900 clamp(32px, 8vw, 52px)/1.1 var(--f-body); letter-spacing: -.025em; }
.sec-note { margin-top: 8px; font-size: 16px; }
.timeline { display: grid; gap: 14px; margin: 28px auto 0; max-width: 720px; }
.timeline li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: #fff; border: var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--pop-sm);
  transform: rotate(var(--r));
}
.timeline time {
  font: 600 15px/1 var(--f-mono); background: var(--c); border: var(--line); border-radius: 10px; padding: 8px 8px;
}
.timeline h3 { font-size: 19px; font-weight: 800; line-height: 1.3; }
.timeline p { margin-top: 2px; font-size: 15px; }
.timeline .is-main { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--hl); }
.timeline .is-main time { color: var(--ink); }
.channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.channels li {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: var(--sw); color: var(--ink); border: 2px solid #fff; transform: none; box-shadow: none;
  font-size: 13.5px; font-weight: 700; line-height: 1.3;
}
.channels li.is-mine { outline: 3px solid var(--hl); outline-offset: 2px; }

/* ---------- รายละเอียด ---------- */
.details { padding: 24px 0 56px; }
.details-grid { display: grid; gap: 16px; }
.card { background: #fff; border: var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--pop-sm); transform: rotate(var(--r)); }
.card h3 { display: inline-block; font-size: 14px; font-weight: 800; background: var(--c); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 10px; }
.card p { margin-top: 10px; font-size: 15.5px; }
.link { display: inline-block; margin-top: 10px; font-weight: 800; color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--hl); text-underline-offset: 4px; }
@media (min-width: 760px) { .details-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- ตอบรับ ---------- */
.rsvp { padding: 8px 0 64px; }
.panel { background: #fff; border: var(--line); border-radius: 28px; padding: 26px 20px; box-shadow: 8px 8px 0 var(--ink); }
#rsvpForm { margin-top: 24px; display: grid; gap: 20px; }
.choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.choice legend { width: 100%; margin-bottom: 8px; font-weight: 800; }
.choice label { flex: 1 1 120px; position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 14px;
  border: var(--line); border-radius: 16px; background: #fff; font-weight: 800; font-size: 17px;
  transition: transform .15s var(--ease-pop), background .15s;
}
.choice input:checked + span { background: var(--c); box-shadow: var(--pop-sm); transform: rotate(-1.5deg); }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.choice--small span { min-height: 48px; font-size: 16px; }
.choice--colors label { flex: 1 1 calc(50% - 10px); }
.choice--colors span { justify-content: flex-start; font-size: 15px; }
.choice--colors span i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sw); flex: none; }
.choice--colors input:checked + span { background: var(--sw); }

.field { display: grid; gap: 6px; }
.field label { font-weight: 800; }
.field small { font-weight: 400; font-size: 13px; }
.field input {
  width: 100%; min-height: 52px; padding: 0 14px; border-radius: 14px; border: var(--line); background: var(--paper);
}
.field input:focus { outline: none; box-shadow: 0 0 0 4px var(--c); }
.ig-wrap { position: relative; }
.ig-wrap span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 800; }
.ig-wrap input { padding-left: 32px; }
.hint { font-size: 13.5px; }
.only-yes { display: grid; gap: 20px; }
.choice.only-yes { display: flex; }
.form-error { font-weight: 800; background: #FFE1E1; border: 2px solid #C0233B; color: #9E1730; border-radius: 12px; padding: 10px 14px; }
#rsvpForm .btn { width: 100%; }

/* ---------- บัตรเข้างาน ---------- */
.pass-wrap { display: grid; justify-items: center; text-align: center; }
.pass {
  position: relative; width: min(380px, 100%); padding: 22px 22px 24px; border-radius: 28px;
  background: var(--c); border: var(--line); box-shadow: 8px 8px 0 var(--ink);
  animation: drop-in .7s var(--ease-pop) both;
}
.pass-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: right; }
.pass-kind { font: 600 10.5px/1.35 var(--f-mono); }
.pass-qr { width: 76%; margin: 22px auto 0; aspect-ratio: 1; padding: 12px; background: #fff; border: var(--line); border-radius: 20px; }
.pass-qr svg { display: block; width: 100%; height: 100%; }
.pass-code { margin-top: 12px; font: 600 17px/1 var(--f-mono); letter-spacing: .16em; }
.pass-name { margin-top: 18px; font: 900 26px/1.2 var(--f-body); letter-spacing: -.02em; }
.pass-meta { margin-top: 2px; font-size: 14.5px; }
.pass-channel {
  display: inline-block; margin-top: 14px; padding: 6px 14px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 14px;
}
.pass-state { margin-top: 12px; font: 600 12px/1.4 var(--f-mono); }
/* ห้ามทับ QR — ทับแล้วสแกนไม่ติด */
.pass-sticker { position: absolute; right: -12px; top: -16px; font-size: 14px; }
.pass-tip { margin-top: 22px; font-weight: 500; }
.pass-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }
.declined { text-align: center; display: grid; gap: 10px; justify-items: center; }
.declined .btn { margin-top: 10px; }

.foot { text-align: center; padding: 0 var(--gutter) 40px; font-size: 13px; }

/* ปุ่มเพลงลอยมุมซ้ายล่าง — แท่งอีควอไลเซอร์เต้นตอนเพลงเล่น */
.music-fab {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 55;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border: var(--line); border-radius: 999px; background: #fff; box-shadow: var(--pop-sm);
  font-weight: 800; font-size: 14px; cursor: pointer; transform: rotate(-2deg);
}
.music-fab[aria-pressed="true"] { background: var(--hl); }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i { width: 4px; height: 5px; border-radius: 2px; background: var(--ink); }
.music-fab[aria-pressed="true"] .eq i { animation: eq .9s ease-in-out infinite; }
.music-fab[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; }
.music-fab[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, calc(100% + 48px)); visibility: hidden; transition: transform .35s var(--ease-pop), visibility .35s;
  max-width: calc(100% - 32px); padding: 12px 20px; border: var(--line); border-radius: 16px;
  background: #fff; font-weight: 700; box-shadow: var(--pop);
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }

/* ---------- จอกว้าง ---------- */
@media (min-width: 900px) {
  .hero { padding: 22px var(--gutter) 48px; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .topbar { grid-column: 1 / -1; }
  .hero-grid { display: contents; }
  .hero-copy { grid-column: 1; grid-row: 2; align-self: end; }
  .product { grid-column: 2; grid-row: 2 / span 4; align-self: center; justify-self: center; width: min(100%, 470px); }
  .picker { grid-column: 1; grid-row: 3; align-self: start; }
  .hero > .btn { grid-column: 1; grid-row: 4; align-self: start; }
  .countdown { grid-column: 1; grid-row: 5; margin-top: 0; }
  .panel { padding: 34px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}