/* Thành phần dùng chung: nút, chip, công tắc đèn, ảnh in + băng dính, phiếu studio, dải màu, mẫu màu, quầng đèn,
   tấm trượt từ đáy, ô nhập tên. Chỉ chuyển động transform/opacity; :hover chỉ khi có chuột thật. */

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .9em 1.5em; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; white-space: nowrap;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) ease, color var(--d-fast) ease, border-color var(--d-fast) ease, box-shadow var(--d-fast) ease;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.btn--lamp { background: var(--cr-lamp); color: var(--cr-lamp-ink); }
/* Nút đèn chưa dùng được là đèn chưa bật: nền trong, viền mảnh, chữ mờ. Làm mờ cả nút vàng thì ra màu ô liu, trông như bẩn. */
.btn--lamp:disabled, .btn--lamp[aria-disabled="true"] {
  opacity: 1; background: transparent; color: var(--you-muted);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--you-muted) 55%, transparent);
}
.btn--lamp:is(:disabled, [aria-disabled="true"])::after { animation: none; }
.btn--you { background: var(--you-1); color: var(--you-on-1); }
.btn--ghost { border: 1px solid var(--cr-line-strong); color: var(--you-text); }
.btn--quiet { min-height: 44px; padding: .6em .4em; font-weight: 500; color: var(--you-muted); }
.btn--block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--lamp:hover:not(:disabled, [aria-disabled="true"]) { background: var(--cr-lamp-hi); }
  .btn--ghost:hover { border-color: var(--you-text); }
  .btn--quiet:hover { color: var(--you-text); }
}
/* Nút chính ở đầu màn: viền sáng thở chậm để mắt tìm ra (lamp-breathe của trang chủ). Chỉ một nút mỗi màn. */
.btn--breathe { position: relative; }
.btn--breathe::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; pointer-events: none;
  border: 2px solid rgb(242 193 78 / .8); opacity: 0;
  animation: cr-breathe 2.8s ease-out 1.6s infinite;
}
@keyframes cr-breathe { 0% { opacity: 0; transform: scale(.95); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.12, 1.35); } }

/* ---------- Chip chọn (một chạm) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .55em 1.1em;
  border: 1px solid var(--you-line); border-radius: var(--r-pill); color: var(--you-text); font-size: .95rem;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) ease, border-color var(--d-fast) ease, color var(--d-fast) ease;
}
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--you-text); color: var(--you-bg); border-color: var(--you-text); }
.chip--lamp[aria-pressed="true"] { background: var(--cr-lamp); color: var(--cr-lamp-ink); border-color: var(--cr-lamp); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--cr-line-strong); } }

/* ---------- Công tắc đèn (đồng ý từng mục) ---------- */
.switch {
  position: relative; flex: none; width: 52px; height: 32px; border-radius: var(--r-pill);
  background: var(--cr-ink-3); border: 1px solid var(--cr-line-strong);
  transition: background-color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cr-dim); transition: transform var(--d-ui) var(--ease-out), background-color var(--d-fast) ease, box-shadow var(--d-fast) ease;
}
.switch[aria-checked="true"] { background: rgb(242 193 78 / .22); border-color: var(--cr-lamp); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--cr-lamp); box-shadow: 0 0 14px rgb(242 193 78 / .7); }
.switch[aria-disabled="true"] { opacity: .45; }
.switch::before { content: ""; position: absolute; inset: -8px; }   /* vùng chạm 68x48 */

/* ---------- Ảnh in + băng dính (moodboard, tường ghim) ----------
   Ảnh quán, ảnh có giấy phép và hình vẽ bằng code đều được "in" ra cùng một kiểu giấy: nhiều nguồn mà vẫn một bảng. */
.print {
  position: relative; display: block; padding: 5px; border-radius: var(--r-paper);
  background: var(--cr-print); box-shadow: var(--shadow-print);
  transform: rotate(var(--rot, 0deg));
  transition: transform var(--d-ui) var(--ease-out), opacity var(--d-fast) ease;
}
.print > img, .print > .print__art { display: block; width: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; border-radius: 1px; background-color: var(--cr-print-edge); }
.print:active { transform: rotate(var(--rot, 0deg)) scale(.97); }
.print[aria-pressed="true"] { transform: rotate(0deg) scale(1.02); box-shadow: var(--shadow-lift); }
.print.is-dim { opacity: .45; }
.print__tape {
  position: absolute; top: -9px; left: 50%; width: 68px; height: 20px; margin-left: -34px;
  background: var(--tape, var(--you-1)); opacity: .82; transform: rotate(-3deg);
  /* mép băng dính răng cưa hai đầu */
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px);
  -webkit-mask-composite: source-over;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-fast) var(--ease-out);
}
.print[aria-pressed="true"] .print__tape { clip-path: inset(0 0 0 0); }
.print__no {
  position: absolute; right: 10px; bottom: 10px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-pill);
  display: grid; place-items: center; font: 500 .8rem/1 var(--font-label); background: var(--cr-ink); color: var(--cr-lamp);
  opacity: 0; transform: scale(.8); transition: opacity var(--d-fast) ease, transform var(--d-fast) var(--ease-out);
}
.print[aria-pressed="true"] .print__no { opacity: 1; transform: none; }
.print__credit { display: block; margin-top: 4px; font: 400 .6875rem/1.3 var(--font-label); color: #6b6152; letter-spacing: .02em; }

/* ---------- Phiếu studio (dải nhãn đầu phiếu) ---------- */
.ticket {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35em .9em; padding: .7em 0;
  border-block: 1px dashed var(--cr-line-strong);
  font: 450 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--you-muted);
}
.ticket b { color: var(--you-text); font-weight: 500; }
.lamps { display: inline-flex; gap: 6px; }
.lamp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cr-dim); transition: background-color var(--d-fast) ease, box-shadow var(--d-fast) ease; }
.lamp-dot.is-on { background: var(--cr-lamp); box-shadow: 0 0 10px rgb(242 193 78 / .75); }

/* ---------- Dải màu của một người ----------
   1–3 màu: giọt tròn chồng nhau. Từ 4 màu: thanh chia khúc. Mỗi ô màu đặt bằng style="--c: #hex". */
.band { display: flex; align-items: center; }
.band--drops .swatch { width: var(--drop, 56px); aspect-ratio: 1; border-radius: 50%; margin-left: calc(var(--drop, 56px) * -.28); box-shadow: 0 0 0 3px var(--you-bg); }
.band--drops .swatch:first-child { margin-left: 0; }
.band--bar { height: var(--bar, 14px); border-radius: var(--r-pill); overflow: hidden; gap: 2px; }
.band--bar .swatch { flex: 1 1 0; height: 100%; }
.swatch { background: var(--c, var(--you-1)); }

/* Mẫu màu kiểu thẻ sơn: màu phía trên, nhãn phía dưới (khoảnh khắc mở ra, thẻ 9:16, danh sách "xem từng màu"). */
.paint-chip { display: grid; grid-template-rows: 1fr auto; width: var(--chip-w, 88px); aspect-ratio: 3 / 4.4; padding: 5px; border-radius: var(--r-paper); background: var(--cr-print); box-shadow: var(--shadow-print); }
.paint-chip > i { display: block; background: var(--c); border-radius: 1px; }
.paint-chip > span { padding: 6px 2px 2px; font: 450 .6875rem/1.25 var(--font-label); letter-spacing: .02em; color: var(--cr-print-ink); }

/* ---------- Quầng đèn ----------
   Lớp sáng đặt sau nội dung. Muốn đi theo ngón tay: motion.js poolFollow() ghi transform thẳng lên phần tử này. */
.pool { position: absolute; inset: -20%; pointer-events: none; background: var(--cr-pool); will-change: transform; }
.pool--soft { background: var(--cr-pool-soft); }
[data-mode="sang"] .pool { opacity: .55; }

/* ---------- Tấm trượt từ đáy ---------- */
/* touch-action none: vuốt trên nền tối không kéo trang phía sau cuộn theo. */
.scrim { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgb(8 7 6 / .62); opacity: 0; pointer-events: none; touch-action: none; transition: opacity var(--d-ui) ease; }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1); max-height: 88dvh; overflow: auto; overscroll-behavior: contain;
  padding: var(--sp-3) var(--gut) max(var(--sp-5), env(safe-area-inset-bottom, 0px));
  background: var(--you-surface); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-sheet);
  transform: translateY(100%); visibility: hidden;
  /* Đóng xong mới ẩn hẳn (không còn nhận Tab, không ló mép trên máy tính). */
  transition: transform var(--d-sheet) var(--ease-drawer), visibility 0s linear var(--d-sheet);
}
.sheet.is-open { transform: translateY(0); visibility: visible; transition: transform var(--d-sheet) var(--ease-drawer), visibility 0s; }
.sheet__grip { width: 40px; height: 5px; margin: 0 auto var(--sp-4); border-radius: var(--r-pill); background: var(--cr-line-strong); touch-action: none; position: relative; z-index: 1; }
/* Thanh nắm chỉ 40×5px; vùng chạm 120×44px: lên tới mép trên tấm, lấn 11px xuống phần đầu tấm (chỉ có chữ, nút đóng nằm ngoài). */
.sheet__grip::before { content: ""; position: absolute; top: calc(-1 * var(--sp-3)); bottom: -27px; left: -40px; right: -40px; }
@media (min-width: 768px) {
  .sheet { left: 50%; right: auto; width: min(520px, 100%); translate: -50% 0; border-radius: var(--r-lg); bottom: var(--sp-6); transform: translateY(calc(100% + var(--sp-7))); }
  .sheet.is-open { transform: translateY(0); }
}
/* Giảm chuyển động: tấm hiện/ẩn bằng mờ dần, không trượt. */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.is-open { transform: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .sheet.is-open { opacity: 1; transition: opacity 200ms ease, visibility 0s; }
}
[data-motion="reduce"] .sheet, [data-motion="reduce"] .sheet.is-open { transform: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
[data-motion="reduce"] .sheet.is-open { opacity: 1; transition: opacity 200ms ease, visibility 0s; }

/* ---------- Ô nhập tên: chữ to như tên gõ lên phiếu ---------- */
.field { display: grid; gap: var(--sp-2); }
.field__label { font: 450 var(--fs-label)/1.4 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--you-muted); }
.field__input {
  width: 100%; min-height: 56px; padding: .1em 0 .15em; border: 0; border-bottom: 2px solid var(--cr-line-strong); background: transparent;
  font-family: var(--font-display); font-weight: 800; font-size: max(16px, var(--fs-2)); letter-spacing: var(--track-2); line-height: 1.15;
  caret-color: var(--cr-lamp); transition: border-color var(--d-fast) ease;
}
.field__input:focus { border-bottom-color: var(--cr-lamp); }
.field__input::placeholder { color: var(--cr-dim); }
.field__hint { font-size: var(--fs-small); color: var(--you-muted); }
.field__error { font-size: var(--fs-small); color: #f19a7c; }

/* ---------- Chạm là sáng (motion.js initTapGlow, giống hệt trang chủ) ---------- */
.tap-glow {
  position: fixed; z-index: var(--z-tap); width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(255 214 120 / .6) 0%, rgb(242 193 78 / .22) 38%, rgb(242 193 78 / 0) 70%);
  animation: tap-glow 650ms var(--ease-cr) forwards;
}
@keyframes tap-glow { from { transform: scale(.25); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ---------- Cửa đèn chuyển trang (motion.js doorTo/doorIn) ----------
   Chép đúng hình của .page-door trang chủ (lamp-effects.css) để đi từ trang chủ sang chiến dịch và ngược lại không lộ
   chỗ nối. Khung tối phải giữ nguyên chuỗi màu này: trang chủ và chon-rieng-ops cũng dùng đúng chuỗi đó. */
.cr-door { position: fixed; inset: 0; z-index: var(--z-door, 300); pointer-events: auto; }
.cr-door::before, .cr-door__room {
  position: absolute; inset: 0;
  clip-path: circle(0px at var(--x) var(--y));
  transition: clip-path var(--d-door) var(--ease-door);
}
.cr-door::before { content: ""; background: var(--cr-lamp); }
.cr-door__room { background: var(--cr-door-frame); transition-delay: 90ms; }
.cr-door.is-open::before, .cr-door.is-open .cr-door__room { clip-path: circle(150vmax at var(--x) var(--y)); }
/* Trang đích: mở bằng đúng khung tối đó rồi tan dần trong 450ms. */
html.door-in::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-door, 300); pointer-events: none;
  background: var(--cr-door-frame); opacity: 1; transition: opacity 450ms var(--ease-out);
}
html.door-in--out::after { opacity: 0; }

/* ---------- Trang chưa mở được (shared/open-error.js) ----------
   Phủ kín màn bằng nền tối của quán, trên cả khung cửa đèn. Màu cố định: lỗi có thể xảy ra sau khi trang đã đổi sang
   màu khách (chế độ sáng), câu báo vẫn phải đọc được. */
.open-error {
  --you-text: var(--cr-paper); --you-muted: var(--cr-muted);
  position: fixed; inset: 0; z-index: calc(var(--z-tap) + 1);
  display: grid; align-content: center; justify-items: start; gap: var(--sp-4);
  padding: var(--sp-7) max(var(--gut), calc((100vw - 32rem) / 2));
  background: var(--cr-ink); color: var(--cr-paper);
}
.open-error__title { margin-bottom: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  .btn--breathe::after { animation: none; }
}
[data-motion="reduce"] .btn--breathe::after { animation: none; }