/* =====================================================================
   MULAQAT — LIQUID GLASS (clear, glossy, smooth corners)
   Loads AFTER styles.css.
   - html.lg-canvas  → refract.js is drawing the real lens into each card
                       (clear glass, bent edges, rainbow fringe).
   - otherwise       → frosted smoked glass (fallback / while loading).
   - The glare position follows --tx / --ty on <html>, set by tilt.js.
   To switch it all off, delete the <link> to this file in index.html.
   ===================================================================== */

/* =====================================================================
   ROLE COLOURS FOR THE GLASS
   Every burgundy / pink used by the glass (buttons, glows, edges, pickers,
   envelope) is a variable here. Before a role is chosen they keep their
   original burgundy values. When a boy or girl is chosen, <html> gets the
   class theme-boy / theme-girl and styles.css slides --t from 0 to 1 over
   3 seconds, so every one of these slides to blue / rose in step with the
   background. (Older browsers just switch at once.)
   ===================================================================== */
:root {
  --lg-c1: 255, 110, 145;
  --lg-c2: 20, 6, 10;
  --lg-c3: 30, 0, 6;
  --lg-c4: 255, 70, 110;
  --lg-c5: 10, 0, 3;
  --lg-c6: 12, 0, 3;
  --lg-c7: 255, 170, 190;
  --lg-c8: 255, 235, 240;
  --lg-c9: 255, 120, 150;
  --lg-c10: 255, 225, 232;
  --lg-c11: 255, 190, 205;
  --lg-c12: 255, 150, 175;
  --lg-c13: 255, 160, 185;
  --lg-c14: 200, 40, 80;
  --lg-c15: 255, 200, 215;
  --lg-c16: 25, 8, 14;
  --lg-c17: 28, 6, 12;
  --lg-c18: 255, 140, 185;
  --lg-c19: 255, 159, 182;
  --lg-h20: #5d111f;
  --lg-h21: #33070f;
  --lg-h22: #110104;
  --lg-h23: #1a0206;
  --lg-h24: #ff9fb6;
  --lg-h25: #6b1424;
  --lg-h26: #3a0811;
  --lg-h27: #1a0307;
  --lg-h28: #7a1729;
  --lg-h29: #44091a;
  --lg-h30: #8f1a30;
}
html.theme-boy {
  --lg-c1: calc(255 + (110 - 255) * var(--t)), calc(110 + (181 - 110) * var(--t)), calc(145 + (255 - 145) * var(--t));
  --lg-c2: calc(20 + (6 - 20) * var(--t)), calc(6 + (14 - 6) * var(--t)), calc(10 + (20 - 10) * var(--t));
  --lg-c3: calc(30 + (0 - 30) * var(--t)), calc(0 + (13 - 0) * var(--t)), calc(6 + (30 - 6) * var(--t));
  --lg-c4: calc(255 + (70 - 255) * var(--t)), calc(70 + (156 - 70) * var(--t)), calc(110 + (255 - 110) * var(--t));
  --lg-c5: calc(10 + (0 - 10) * var(--t)), calc(0 + (6 - 0) * var(--t)), calc(3 + (10 - 3) * var(--t));
  --lg-c6: calc(12 + (0 - 12) * var(--t)), calc(0 + (6 - 0) * var(--t)), calc(3 + (12 - 3) * var(--t));
  --lg-c7: calc(255 + (170 - 255) * var(--t)), calc(170 + (211 - 170) * var(--t)), calc(190 + (255 - 190) * var(--t));
  --lg-c8: calc(255 + (235 - 255) * var(--t)), calc(235 + (245 - 235) * var(--t)), calc(240 + (255 - 240) * var(--t));
  --lg-c9: calc(255 + (120 - 255) * var(--t)), calc(120 + (184 - 120) * var(--t)), calc(150 + (255 - 150) * var(--t));
  --lg-c10: calc(255 + (225 - 255) * var(--t)), calc(225 + (240 - 225) * var(--t)), calc(232 + (255 - 232) * var(--t));
  --lg-c11: calc(255 + (190 - 255) * var(--t)), calc(190 + (221 - 190) * var(--t)), calc(205 + (255 - 205) * var(--t));
  --lg-c12: calc(255 + (150 - 255) * var(--t)), calc(150 + (201 - 150) * var(--t)), calc(175 + (255 - 175) * var(--t));
  --lg-c13: calc(255 + (160 - 255) * var(--t)), calc(160 + (209 - 160) * var(--t)), calc(185 + (255 - 185) * var(--t));
  --lg-c14: calc(200 + (40 - 200) * var(--t)), calc(40 + (120 - 40) * var(--t)), calc(80 + (200 - 80) * var(--t));
  --lg-c15: calc(255 + (200 - 255) * var(--t)), calc(200 + (229 - 200) * var(--t)), calc(215 + (255 - 215) * var(--t));
  --lg-c16: calc(25 + (8 - 25) * var(--t)), calc(8 + (18 - 8) * var(--t)), calc(14 + (25 - 14) * var(--t));
  --lg-c17: calc(28 + (6 - 28) * var(--t)), calc(6 + (17 - 6) * var(--t)), calc(12 + (28 - 12) * var(--t));
  --lg-c18: calc(255 + (140 - 255) * var(--t)), calc(140 + (214 - 140) * var(--t)), calc(185 + (255 - 185) * var(--t));
  --lg-c19: calc(255 + (159 - 255) * var(--t)), calc(159 + (206 - 159) * var(--t)), calc(182 + (255 - 182) * var(--t));
  --lg-h20: rgb(calc(93 + (17 - 93) * var(--t)), calc(17 + (50 - 17) * var(--t)), calc(31 + (93 - 31) * var(--t)));
  --lg-h21: rgb(calc(51 + (7 - 51) * var(--t)), calc(7 + (26 - 7) * var(--t)), calc(15 + (51 - 15) * var(--t)));
  --lg-h22: rgb(calc(17 + (1 - 17) * var(--t)), calc(1 + (8 - 1) * var(--t)), calc(4 + (17 - 4) * var(--t)));
  --lg-h23: rgb(calc(26 + (2 - 26) * var(--t)), calc(2 + (12 - 2) * var(--t)), calc(6 + (26 - 6) * var(--t)));
  --lg-h24: rgb(calc(255 + (159 - 255) * var(--t)), calc(159 + (206 - 159) * var(--t)), calc(182 + (255 - 182) * var(--t)));
  --lg-h25: rgb(calc(107 + (20 - 107) * var(--t)), calc(20 + (58 - 20) * var(--t)), calc(36 + (107 - 36) * var(--t)));
  --lg-h26: rgb(calc(58 + (8 - 58) * var(--t)), calc(8 + (29 - 8) * var(--t)), calc(17 + (58 - 17) * var(--t)));
  --lg-h27: rgb(calc(26 + (3 - 26) * var(--t)), calc(3 + (13 - 3) * var(--t)), calc(7 + (26 - 7) * var(--t)));
  --lg-h28: rgb(calc(122 + (23 - 122) * var(--t)), calc(23 + (66 - 23) * var(--t)), calc(41 + (122 - 41) * var(--t)));
  --lg-h29: rgb(calc(68 + (9 - 68) * var(--t)), calc(9 + (41 - 9) * var(--t)), calc(26 + (68 - 26) * var(--t)));
  --lg-h30: rgb(calc(143 + (26 - 143) * var(--t)), calc(26 + (77 - 26) * var(--t)), calc(48 + (143 - 48) * var(--t)));
}
html.theme-girl {
  --lg-c1: calc(255 + (255 - 255) * var(--t)), calc(110 + (110 - 110) * var(--t)), calc(145 + (198 - 145) * var(--t));
  --lg-c2: calc(20 + (20 - 20) * var(--t)), calc(6 + (6 - 6) * var(--t)), calc(10 + (15 - 10) * var(--t));
  --lg-c3: calc(30 + (30 - 30) * var(--t)), calc(0 + (0 - 0) * var(--t)), calc(6 + (17 - 6) * var(--t));
  --lg-c4: calc(255 + (255 - 255) * var(--t)), calc(70 + (70 - 70) * var(--t)), calc(110 + (178 - 110) * var(--t));
  --lg-c5: calc(10 + (10 - 10) * var(--t)), calc(0 + (0 - 0) * var(--t)), calc(3 + (7 - 3) * var(--t));
  --lg-c6: calc(12 + (12 - 12) * var(--t)), calc(0 + (0 - 0) * var(--t)), calc(3 + (7 - 3) * var(--t));
  --lg-c7: calc(255 + (255 - 255) * var(--t)), calc(170 + (170 - 170) * var(--t)), calc(190 + (221 - 190) * var(--t));
  --lg-c8: calc(255 + (255 - 255) * var(--t)), calc(235 + (235 - 235) * var(--t)), calc(240 + (247 - 240) * var(--t));
  --lg-c9: calc(255 + (255 - 255) * var(--t)), calc(120 + (120 - 120) * var(--t)), calc(150 + (200 - 150) * var(--t));
  --lg-c10: calc(255 + (255 - 255) * var(--t)), calc(225 + (225 - 225) * var(--t)), calc(232 + (243 - 232) * var(--t));
  --lg-c11: calc(255 + (255 - 255) * var(--t)), calc(190 + (190 - 190) * var(--t)), calc(205 + (229 - 205) * var(--t));
  --lg-c12: calc(255 + (255 - 255) * var(--t)), calc(150 + (150 - 150) * var(--t)), calc(175 + (214 - 175) * var(--t));
  --lg-c13: calc(255 + (255 - 255) * var(--t)), calc(160 + (160 - 160) * var(--t)), calc(185 + (220 - 185) * var(--t));
  --lg-c14: calc(200 + (200 - 200) * var(--t)), calc(40 + (40 - 40) * var(--t)), calc(80 + (139 - 80) * var(--t));
  --lg-c15: calc(255 + (255 - 255) * var(--t)), calc(200 + (200 - 200) * var(--t)), calc(215 + (235 - 215) * var(--t));
  --lg-c16: calc(25 + (25 - 25) * var(--t)), calc(8 + (8 - 8) * var(--t)), calc(14 + (20 - 14) * var(--t));
  --lg-c17: calc(28 + (28 - 28) * var(--t)), calc(6 + (6 - 6) * var(--t)), calc(12 + (20 - 12) * var(--t));
  --lg-c18: calc(255 + (255 - 255) * var(--t)), calc(140 + (140 - 140) * var(--t)), calc(185 + (227 - 185) * var(--t));
  --lg-c19: calc(255 + (255 - 255) * var(--t)), calc(159 + (159 - 159) * var(--t)), calc(182 + (217 - 182) * var(--t));
  --lg-h20: rgb(calc(93 + (93 - 93) * var(--t)), calc(17 + (17 - 17) * var(--t)), calc(31 + (59 - 31) * var(--t)));
  --lg-h21: rgb(calc(51 + (51 - 51) * var(--t)), calc(7 + (7 - 7) * var(--t)), calc(15 + (31 - 15) * var(--t)));
  --lg-h22: rgb(calc(17 + (17 - 17) * var(--t)), calc(1 + (1 - 1) * var(--t)), calc(4 + (10 - 4) * var(--t)));
  --lg-h23: rgb(calc(26 + (26 - 26) * var(--t)), calc(2 + (2 - 2) * var(--t)), calc(6 + (15 - 6) * var(--t)));
  --lg-h24: rgb(calc(255 + (255 - 255) * var(--t)), calc(159 + (159 - 159) * var(--t)), calc(182 + (217 - 182) * var(--t)));
  --lg-h25: rgb(calc(107 + (107 - 107) * var(--t)), calc(20 + (20 - 20) * var(--t)), calc(36 + (68 - 36) * var(--t)));
  --lg-h26: rgb(calc(58 + (58 - 58) * var(--t)), calc(8 + (8 - 8) * var(--t)), calc(17 + (35 - 17) * var(--t)));
  --lg-h27: rgb(calc(26 + (26 - 26) * var(--t)), calc(3 + (3 - 3) * var(--t)), calc(7 + (15 - 7) * var(--t)));
  --lg-h28: rgb(calc(122 + (122 - 122) * var(--t)), calc(23 + (23 - 23) * var(--t)), calc(41 + (77 - 41) * var(--t)));
  --lg-h29: rgb(calc(68 + (68 - 68) * var(--t)), calc(9 + (9 - 9) * var(--t)), calc(26 + (48 - 26) * var(--t)));
  --lg-h30: rgb(calc(143 + (143 - 143) * var(--t)), calc(26 + (26 - 26) * var(--t)), calc(48 + (91 - 48) * var(--t)));
}

:root {
  --tx: 0;
  --ty: 0;
  --lg-corner: 34px;                               /* corner roundness — raise for curvier */
  --lg-tint: transparent;                          /* 100% clear glass */
  --lg-fallback-tint: rgba(var(--lg-c2, 20, 6, 10), 0.40);       /* smoked glass (fallback) */
  --lg-blur: 22px;                                 /* frost (fallback only) */
  --lg-saturate: 170%;
}

/* ---------- Base: frosted smoked glass (fallback + before JS runs) ---------- */
:is(.liquid-glass, .role-card, .popup-card, .payment-card, .live-status-card,
    .ticket-card, .tip-card, .privacy-note-box, .inner-card, .photo-card, .back-btn, .step-chip, .list-option, .btn-ghost, .day-chip, .chat-icon-btn, .quiz-option, .btn-primary, .photo-icon) {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.09) 100%),
    var(--lg-fallback-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid transparent;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.30),
    inset 2px 3px 1px -1px rgba(255, 255, 255, 0.70),
    inset -2px -3px 1px -1px rgba(255, 255, 255, 0.35),
    inset 0 0 12px rgba(0, 0, 0, 0.20);
}

/* ---------- Smooth, curvy corners ---------- */
:is(.liquid-glass, .role-card, .popup-card, .payment-card, .live-status-card,
    .ticket-card, .tip-card, .privacy-note-box, .inner-card, .photo-card) {
  border-radius: var(--lg-corner) !important;
}

/* ---------- Lens mode: clear glass (refract.js draws the bent video) ---------- */
html.lg-canvas :is(.liquid-glass, .role-card, .popup-card, .payment-card, .live-status-card,
    .ticket-card, .tip-card, .privacy-note-box, .inner-card, .photo-card, .back-btn, .step-chip, .list-option, .btn-ghost, .day-chip, .chat-icon-btn, .quiz-option, .btn-primary, .photo-icon) {
  background: var(--lg-tint);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30);    /* outer drop shadow is safe in lens mode */
}

/* The lens layer refract.js inserts into each card */
.lg-layer {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}
.lg-layer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.lg-layer .lg-tint {
  position: absolute;
  pointer-events: none;
}

/* ---------- Rim light: bold white, top-left + bottom-right, turns with tilt ---------- */
:is(.liquid-glass, .role-card, .popup-card, .payment-card, .live-status-card,
    .ticket-card, .tip-card, .privacy-note-box, .inner-card, .photo-card, .back-btn, .step-chip, .list-option, .btn-ghost, .day-chip, .chat-icon-btn, .quiz-option, .btn-primary, .photo-icon)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;                 /* rim thickness — thin + soft = clean edge */
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(calc(135deg + var(--tx) * 35deg),
    rgba(255, 255, 255, 0.80) 0%,
    rgba(255, 255, 255, 0.30) 18%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.08) 58%,
    rgba(255, 255, 255, 0.28) 84%,
    rgba(255, 255, 255, 0.65) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ---------- Glare + glossy 3D dome ---------- */
:is(.liquid-glass, .role-card, .popup-card, .payment-card, .live-status-card,
    .ticket-card, .tip-card, .privacy-note-box, .inner-card, .photo-card, .back-btn, .step-chip, .list-option, .btn-ghost, .day-chip, .chat-icon-btn, .quiz-option, .btn-primary, .photo-icon)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 35% at calc(22% + var(--tx) * 18%) calc(4% + var(--ty) * 8%), rgba(255, 255, 255, 0.28) 0%, transparent 70%),
    radial-gradient(35% 22% at calc(84% - var(--tx) * 10%) 98%, rgba(255, 255, 255, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 14%, transparent 30%, transparent 82%, rgba(255, 255, 255, 0.06) 100%);
}

/* In lens mode the thick-glass edge lighting lives on ::after,
   so it sits ON TOP of the lens picture instead of under it. */
html.lg-canvas :is(.liquid-glass, .role-card, .popup-card, .payment-card, .live-status-card,
    .ticket-card, .tip-card, .privacy-note-box, .inner-card, .photo-card, .back-btn, .step-chip, .list-option, .btn-ghost, .day-chip, .chat-icon-btn, .quiz-option, .btn-primary, .photo-icon)::after {
  /* 100% clear: no white wash, no dark band — only a small glint + crisp edge */
  background:
    radial-gradient(40% 22% at calc(18% + var(--tx) * 18%) calc(2% + var(--ty) * 6%), rgba(255, 255, 255, 0.14) 0%, transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),            /* one smooth glass edge line */
    inset 0 1px 0 rgba(255, 255, 255, 0.35);               /* soft top highlight */
}

/* ---------- Gold rim for the "live" and ticket cards ---------- */
.live-status-card::before,
.ticket-card::before {
  background: linear-gradient(calc(135deg + var(--tx) * 35deg),
    rgba(255, 228, 176, 0.95) 0%, rgba(240, 194, 123, 0.22) 20%, rgba(240, 194, 123, 0.05) 50%,
    rgba(240, 194, 123, 0.25) 80%, rgba(255, 228, 176, 0.80) 100%);
}

/* ---------- Quiz answers: frosted + smoked (no lens) ---------- */
.quiz-option::after { opacity: 0.6; }
html.lg-canvas .quiz-option::after { opacity: 1; }

/* ---------- Accessibility / old browsers ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html:not(.lg-canvas) :is(.liquid-glass, .role-card, .popup-card, .payment-card, .live-status-card,
      .ticket-card, .tip-card, .privacy-note-box, .inner-card, .photo-card, .back-btn, .step-chip, .list-option, .btn-ghost, .day-chip, .chat-icon-btn, .quiz-option, .btn-primary, .photo-icon) {
    background: rgba(var(--lg-c2, 20, 6, 10), 0.72);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :is(.liquid-glass, .role-card, .popup-card, .payment-card, .live-status-card,
      .ticket-card, .tip-card, .privacy-note-box, .inner-card, .photo-card, .back-btn, .step-chip, .list-option, .btn-ghost, .day-chip, .chat-icon-btn, .quiz-option, .btn-primary, .photo-icon) {
    background: rgba(var(--lg-c2, 20, 6, 10), 0.80) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =====================================================================
   BURGUNDY LIQUID-GLASS BUTTONS (every .btn-primary: Continue, Create account,
   Apply, Send ...). They use the SAME lens as the glass cards (refract.js draws
   the moving background video into the button and bends it at the edges), with
   a see-through wine tint on top. The tint follows the theme (wine / blue / rose).
   TO CHANGE HOW SEE-THROUGH IT IS: edit the two percentages below
   (--glass-btn-a = top, --glass-btn-b = bottom). Lower = clearer glass.
   ===================================================================== */
.btn-primary { --glass-btn-a: 40%; --glass-btn-b: 52%; color: #fff; font-weight: 500; text-shadow: 0 1px 2px rgba(40, 0, 10, 0.35); border: 0; background: var(--btn-dark); }
html.lg-canvas .btn-primary,
html.lg-canvas .btn-primary:hover { background: transparent; }
html.lg-canvas .btn-primary:hover { filter: brightness(1.07); }
html.lg-canvas .btn-primary:disabled { filter: saturate(0.5) brightness(0.8); }
.btn-primary .lg-layer::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-dark) var(--glass-btn-a), transparent),
    color-mix(in srgb, var(--btn-dark) var(--glass-btn-b), transparent));
}
/* no white spots on buttons: only a thin soft edge line */
html.lg-canvas .btn-primary::after {
  left: 0; top: 0; width: auto; height: auto; transform: none; transition: none;
  background: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
html.lg-canvas .btn-primary:hover::after { left: 0; }
html.lg-canvas .btn-primary { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); }
/* if the lens can't run (old phone / no WebGL), keep a plain wine button */
html.lg-fallback .btn-primary { background: var(--btn-dark); }

/* =====================================================================
   FORM POLISH (inputs, spacing, footer links) — main site only
   ===================================================================== */

/* ---------- Glass input fields inside glass cards ---------- */
:is(.inner-card, .liquid-glass) .field-label {
  display: block;
  font-weight: 700;
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 8px 4px;
}
:is(.inner-card, .liquid-glass) .field-input {
  display: block;
  width: 100%;
  padding: 0 20px;
  margin: 0 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;                               /* 100% clear field — no fill */
  box-shadow: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);           /* readable over bright silk */
  font: 500 16px "Poppins", sans-serif;       /* 16px also stops iPhone zooming in */
  letter-spacing: 0.3px;
  outline: none;
  color-scheme: dark;                          /* white calendar / dropdown icons */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
/* same height for every single-line field */
:is(.inner-card, .liquid-glass) :is(input, select).field-input { height: 52px; }
/* multi-line box */
:is(.inner-card, .liquid-glass) textarea.field-input { min-height: 110px; padding: 14px 20px; resize: vertical; }
/* dropdown arrow for selects (appearance:none removes the default one) */
:is(.inner-card, .liquid-glass) select.field-input {
  padding-right: 40px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 16px center,
    transparent;
}
:is(.inner-card, .liquid-glass) select.field-input option { color: var(--lg-h23, #1a0206); background: #fff; }
/* last field in a card has no gap below */
:is(.inner-card, .liquid-glass) .field-input:last-child { margin-bottom: 0; }
:is(.inner-card, .liquid-glass) .field-row .field-input { margin-bottom: 0; }
:is(.inner-card, .liquid-glass) .field-row { margin-bottom: 18px; }
:is(.inner-card, .liquid-glass) .field-row:last-child { margin-bottom: 0; }

:is(.inner-card, .liquid-glass) .field-input::placeholder { color: rgba(255, 255, 255, 0.45); }
:is(.inner-card, .liquid-glass) .field-input:focus {
  border-color: rgba(var(--lg-c7, 255, 170, 190), 0.70);
  background-color: transparent;
  box-shadow: 0 0 0 3px rgba(var(--lg-c14, 200, 40, 80), 0.28);
}
/* Chrome autofill: Chrome paints saved usernames/PINs with its own blue-grey
   box. Clip that box to the text only, so the field stays 100% clear. */
:is(.inner-card, .liquid-glass) :is(input, select, textarea).field-input:-webkit-autofill,
:is(.inner-card, .liquid-glass) :is(input, select, textarea).field-input:-webkit-autofill:hover,
:is(.inner-card, .liquid-glass) :is(input, select, textarea).field-input:-webkit-autofill:focus,
:is(.inner-card, .liquid-glass) :is(input, select, textarea).field-input:autofill {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  transition: background-color 99999s ease 0s;
}

/* ---------- Even card padding ---------- */
.inner-card { padding: 24px 22px !important; }

/* ---------- Footer links: brighter + 44px tap targets ---------- */
.link-row { text-align: center; margin: 8px 0 0; }
.link-row + .link-row { margin-top: 0; }
.link-row .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ffd9a8;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 217, 168, 0.45);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}
.link-row .text-link:hover,
.link-row .text-link:active { background: rgba(255, 255, 255, 0.08); }
.link-row .muted-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  font-size: 13.5px;
  font-style: italic;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
.refund-policy-line a {
  display: inline-block;
  padding: 12px 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

/* =====================================================================
   SMALL GLASS PIECES: back button, step chips, "A Boy / A Girl" options
   They keep their own shape (circle / pill / rounded) from styles.css.
   ===================================================================== */
html.lg-canvas :is(.back-btn, .step-chip, .list-option, .btn-ghost, .day-chip, .chat-icon-btn, .quiz-option, .btn-primary, .photo-icon) {
  border-color: transparent !important;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
/* tiny pieces: thinner rim so the edge stays crisp */
:is(.back-btn, .step-chip, .day-chip, .chat-icon-btn)::before { padding: 1px; }
/* a chosen option / day / answer stays visibly chosen (drawn on top of the glass) */
html.lg-canvas :is(.list-option, .day-chip, .quiz-option):is(.selected, .is-selected, .active, [aria-pressed="true"], [aria-checked="true"])::after {
  background: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 0 0 1.5px rgba(var(--lg-c15, 255, 200, 215), 0.90),
    inset 0 0 18px rgba(var(--lg-c9, 255, 120, 150), 0.30);
}

/* Wine buttons: white reflections removed (top shine + white spots) */
.wg-btn > .wg-window,
.wg-btn > .wg-spec { display: none !important; }

/* =====================================================================
   NEW GLASS PLACES
   ===================================================================== */

/* ---------- Confirmations: one curvy glass card behind the 3 checkboxes ---------- */
.consent-card .consent-check-3d:last-child { margin-bottom: 0; }

/* ---------- Quiz text answers ("What can't you accept in a partner?") ---------- */
.liquid-glass.quiz-input-glass {
  border-radius: 999px !important;             /* fully round pill */
  margin: 8px 0 8px;
  padding: 0;
}
.quiz-input-glass .field-input.quiz-text-input {
  height: 56px;
  margin: 0;
  padding: 0 24px;
  border-radius: 999px;
  border-color: transparent;                   /* the glass rim is the outline */
}
.quiz-input-glass .field-input.quiz-text-input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(var(--lg-c14, 200, 40, 80), 0.28);
}

/* ---------- Uploaded photo: smoky frosted glass over it ---------- */
.photo-preview-box.has-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 150px;
}
/* 1) the same photo, heavily blurred, fades in over the sharp one */
.photo-preview-box.has-photo::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: -1;
  background: inherit;                          /* same photo */
  filter: blur(18px) saturate(1.1) brightness(0.85);
  animation: smoke-frost-in 1.4s ease both;
  pointer-events: none;
}
/* 2) drifting smoke / mist on top */
.photo-preview-box.has-photo::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 28% 62%, rgba(255, 255, 255, 0.46) 0%, transparent 70%),
    radial-gradient(34% 26% at 72% 38%, rgba(255, 255, 255, 0.38) 0%, transparent 70%),
    radial-gradient(52% 34% at 50% 88%, rgba(235, 230, 235, 0.42) 0%, transparent 70%),
    radial-gradient(30% 22% at 50% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 70%),
    linear-gradient(rgba(var(--lg-c16, 25, 8, 14), 0.28), rgba(var(--lg-c16, 25, 8, 14), 0.28));
  filter: blur(12px);
  animation: smoke-roll-in 1.6s ease 0.2s both, smoke-drift 9s ease-in-out 1.8s infinite alternate;
}
@keyframes smoke-frost-in {
  from { opacity: 0; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.06); }
}
@keyframes smoke-roll-in {
  from { opacity: 0; transform: translateY(25%) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes smoke-drift {
  from { transform: translate(-6%, 2%) scale(1); }
  to   { transform: translate(6%, -3%) scale(1.05); }
}

/* =====================================================================
   BOUNCY TAPS — swipe.js springs the size; these stop the old
   press-shrink in styles.css from fighting it.
   ===================================================================== */
.btn.is-pressed, .back-btn.is-pressed, .role-card.is-pressed, .list-option.is-pressed,
.quiz-option.is-pressed, .day-chip.is-pressed, .time-chip.is-pressed { transform: none; }
.wg-btn.is-pressed,
.wg-btn:active { transform: perspective(800px) rotateX(calc(var(--ty) * -4deg)) rotateY(calc(var(--tx) * 5deg)); }

/* =====================================================================
   SWIPE-UP INTRO (swipe.js)
   ===================================================================== */
.phone-frame.swipe-active { touch-action: none; overscroll-behavior: none; }
.phone-frame.swipe-active #screen-splash { cursor: grab; }

/* the age screen, revealed inside the glass */
.screen.swipe-reveal {
  position: absolute !important;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* bent-silk edge (WebGL) — sits under the colour tint, like the video */
.swipe-lens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* glass rim + soft shadow around the dome */
.swipe-rim-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 4;
  pointer-events: none;
}
.swipe-rim {
  position: absolute;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  opacity: 0;
}
.swipe-rim::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.28) 22%,
    rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.22) 80%, rgba(255, 255, 255, 0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* "Swipe up to enter" */
.swipe-hint {
  position: absolute;
  left: 0; right: 0;
  z-index: 5;
  text-align: center;
  color: #fff;
  font: 600 13px "Poppins", sans-serif;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.swipe-hint.on { opacity: 0.92; }
.swipe-hint b { font-weight: 600; }
.swipe-arrow {
  display: block;
  width: 11px; height: 11px;
  margin: 0 auto 8px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
  animation: swipe-bob 1.6s ease-in-out infinite;
}
@keyframes swipe-bob {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(-6px) rotate(45deg); }
}

/* =====================================================================
   GIRL DAY + TIME PAGE (extras.js) — day strip with liquid-glass bead,
   iOS time wheels with a jelly glass bead. Both cards the same size.
   ===================================================================== */
.inner-card.day-picker, .inner-card.tp-card { padding: 22px 16px 16px !important; margin-bottom: 16px; }
.inner-card.tp-card { margin-bottom: 22px; }

  .dp-head { display:flex; align-items:flex-end; justify-content:space-between; padding: 0 6px; margin-bottom: 16px; min-height: 46px; }
  .dp-word { position: relative; height: 44px; flex: 1; overflow: visible; }
  .dp-layer { position: absolute; left: 0; bottom: 0; white-space: nowrap;
    font: italic 800 34px/1 "Poppins", sans-serif; letter-spacing: -.5px; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
  .dp-layer.placeholder { font-size: 24px; color: rgba(255,255,255,.55); }
  .dp-layer span { display: inline-block; white-space: pre; }
  .dp-layer.in span  { animation: letter-in .55s cubic-bezier(.2,.9,.25,1.15) both; }
  .dp-layer.out span { animation: letter-out .35s ease-in both; }
  @keyframes letter-in  { from { opacity: 0; transform: translateY(70%) scale(.9); filter: blur(8px); }
                          to   { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes letter-out { from { opacity: 1; transform: none; filter: blur(0); }
                          to   { opacity: 0; transform: translateY(-70%) scale(.95); filter: blur(8px); } }
  .dp-date { font: italic 600 12.5px "Poppins"; color: rgba(255,255,255,.7); padding-bottom: 5px; white-space: nowrap;
             transition: opacity .3s; }

  .dp-strip { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; touch-action: pan-y; user-select: none; }
  .dp-pill {                                           /* the glass bead that slides to the chosen day */
    position: absolute; top: 0; bottom: 0; left: 0; width: 40px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.6),
                inset 0 -8px 14px -8px rgba(var(--lg-c1, 255, 110, 145), .55), 0 6px 16px rgba(0,0,0,.35);
    opacity: 0; transition: opacity .25s; pointer-events: none; transform-origin: center;
  }
  .dp-pill.on { opacity: 1; }
  .dp-day { position: relative; z-index: 1; border: 0; background: none; color: #fff; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 10px; border-radius: 18px;
            -webkit-tap-highlight-color: transparent; font-family: "Poppins"; }
  .dp-m { font: 600 8.5px "Poppins"; letter-spacing: .6px; color: rgba(255,255,255,.5); }
  .dp-n { font: 700 18px/1 "Poppins"; color: rgba(255,255,255,.72); transition: color .25s, transform .35s cubic-bezier(.2,.9,.25,1.4); }
  .dp-w { font: 600 9px "Poppins"; letter-spacing: .6px; color: rgba(255,255,255,.55); transition: color .25s; }
  .dp-day[aria-checked="true"] .dp-n { color: #fff; transform: scale(1.12); }
  .dp-day[aria-checked="true"] .dp-w { color: var(--lg-h24, #ff9fb6); }
  .dp-day[aria-checked="true"] .dp-m { color: rgba(255,255,255,.8); }
  .dp-day:focus-visible { outline: 2px solid rgba(var(--lg-c11, 255, 190, 205), .8); outline-offset: -2px; }



  /* scrollable day strip */
  .dp-scroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
               -webkit-overflow-scrolling: touch; touch-action: pan-x; margin: -10px -4px; padding: 10px 4px;
               -webkit-mask-image: linear-gradient(90deg, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent);
                       mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); }
  .dp-scroll::-webkit-scrollbar { display: none; }
  .dp-scroll.dragging { scroll-snap-type: none; cursor: grabbing; }
  .dp-strip { display: flex !important; gap: 0 !important; width: max-content; }
  .dp-day { flex: 0 0 var(--cell, 44px); scroll-snap-align: start; }
  .dp-more { display:flex; justify-content:center; gap:5px; margin-top: 10px; }
  .dp-more i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.28); transition: background .3s, width .3s; }
  .dp-more i.on { width: 14px; border-radius: 3px; background: rgba(255,255,255,.75); }

  /* ===== the liquid-glass bead / lens ===== */
  .dp-pill { --lift: 0; overflow: hidden; z-index: 2; background: none !important; box-shadow: none !important;
             transition: opacity .25s; will-change: transform; }
  .dp-lens-tint { position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    -webkit-backdrop-filter: blur(calc(var(--lift) * 6px)); backdrop-filter: blur(calc(var(--lift) * 6px)); }
  .dp-lens-tint::after { content:""; position:absolute; inset:0; border-radius:inherit; background: rgba(var(--lg-c17, 28, 6, 12), .55); opacity: var(--lift); }
  .dp-lens-copy { position: absolute; top: 0; left: 0; height: 100%; display: flex; opacity: var(--lift); pointer-events: none; }
  .dp-lens-copy .dp-day { flex: 0 0 var(--cell, 44px); }
  .dp-lens-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,calc(.35 + var(--lift) * .4)),
                inset 0 1px 0 rgba(255,255,255,.65),
                inset 0 -8px 14px -8px rgba(var(--lg-c1, 255, 110, 145), calc(.55 - var(--lift) * .3)),
                inset 0 0 calc(var(--lift) * 14px) rgba(255,255,255,calc(var(--lift) * .25)); }
  .dp-pill.on { box-shadow: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
  .dp-day[aria-checked="true"] { touch-action: none; cursor: grab; }
  .dp-strip .dp-day { z-index: 1; }

  /* ===================== TIME PICKER ===================== */
  .tp-big .dp-layer .ampm { font-size: 18px; margin-left: 6px; color: var(--lg-h24, #ff9fb6); }
  .tp-big .dp-layer.bad { color: rgba(255,255,255,.45); }
  .tp-wheels { position: relative; display: flex; justify-content: center; align-items: stretch; height: 84px;
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
            mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); overflow: visible; }
  .tp-col { position: relative; width: 74px; touch-action: none; cursor: grab; user-select: none; outline: none; }
  .tp-col-ampm { width: 70px; margin-left: 8px; }
  .tp-colon { align-self: center; font: 700 22px "Poppins"; color: #fff; width: 10px; text-align: center; margin-top: -3px; position: relative; z-index: 2; }
  .tp-drum { position: absolute; inset: 0; perspective: 260px; z-index: 2; }
  .tp-item { position: absolute; left: 0; right: 0; top: 50%; height: 32px; margin-top: -16px; display: grid; place-items: center;
             font: 700 20px "Poppins"; color: #fff; backface-visibility: hidden; will-change: transform, opacity; }
  .tp-col-ampm .tp-item { font-size: 15px; }
  /* one shared glass bead across all three wheels */
  .tp-bead { --lift: 0; position: absolute; left: 50%; top: 50%; width: 240px; height: 36px; margin: -18px 0 0 -120px; border-radius: 16px; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,calc(.32 + var(--lift) * .4)), inset 0 1px 0 rgba(255,255,255,.6),
                inset 0 -8px 14px -8px rgba(var(--lg-c1, 255, 110, 145), .5), 0 6px 16px rgba(0,0,0,.3);
    will-change: transform; }
  .tp-card .dp-date.bad { color: var(--lg-h24, #ff9fb6); }
/* =====================================================================
   "PICK ONE" GLASS BEAD (Girl / Boy, A Boy / A Girl) — extras.js
   ===================================================================== */
.lookingfor-list, .role-cards { position: relative; }
.pick-bead { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1.5px rgba(var(--lg-c15, 255, 200, 215), .85), inset 0 1px 0 rgba(255,255,255,.6),
              inset 0 0 22px rgba(var(--lg-c9, 255, 120, 150), .28), 0 10px 24px rgba(0,0,0,.35);
  will-change: transform; }
.pick-bead.on { opacity: 1; }

/* =====================================================================
   TIPS — roll in and out smoothly (waiting screen) — extras.js
   ===================================================================== */
.tip-card.tip-roll { position: relative; height: 54px; padding: 0 18px; overflow: hidden; }
.tip-roll .tip-line { position: absolute; inset: 0 14px; display: grid; place-items: center; text-align: center;
  font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.88); }
.tip-roll .tip-line.in  { animation: tip-in .7s cubic-bezier(.22,1,.36,1) both; }
.tip-roll .tip-line.out { animation: tip-out .45s ease-in both; }
@keyframes tip-in  { from { opacity: 0; transform: translateY(70%); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes tip-out { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-70%); filter: blur(8px); } }

/* =====================================================================
   ENVELOPE → TICKET (extras.js). The date, place and code are written
   by script.js from Supabase exactly as before — only the look changed.
   ===================================================================== */
#screen-waiting.ticket-mode .approval-progress,
#screen-waiting.ticket-mode #live-status-card,
#screen-waiting.ticket-mode .waiting-footer-note { display: none !important; }
#screen-waiting.ticket-mode .tk-tip-enter { animation: tk-tip-rise 1.7s cubic-bezier(.16,1,.3,1) .15s both; }
@keyframes tk-tip-rise { from { opacity: 0; transform: translateY(260px); } to { opacity: 1; transform: none; } }
#waiting-headline, #waiting-subtext { transition: opacity .5s ease, filter .5s ease, transform .5s ease; }
.tk-swap { opacity: 0 !important; filter: blur(6px); transform: translateY(-6px); }

.tk-stage { position: relative; height: 462px; perspective: 1000px; margin: 6px 0 4px; }
.tk-stage[hidden] { display: none; }

/* envelope */
.env { position: absolute; z-index: 3; left: 50%; top: 92px; width: 300px; max-width: 92%; height: 196px; transform: translateX(-50%);
       cursor: pointer; opacity: 0; -webkit-tap-highlight-color: transparent; }
.env.enter { opacity: 1; animation: env-enter 1.7s cubic-bezier(.16,1,.3,1) both, env-float 4s ease-in-out 1.7s infinite; }
@keyframes env-enter { 0% { opacity: 0; transform: translateX(-50%) translateY(560px) rotate(-10deg) scale(.92); } 25% { opacity: 1; }
                       100% { opacity: 1; transform: translateX(-50%); } }
@keyframes env-float { 0%,100% { transform: translateX(-50%) translateY(0) rotate(0deg); } 25% { transform: translateX(-50%) translateY(-7px) rotate(1.2deg); }
                       75% { transform: translateX(-50%) translateY(5px) rotate(-1.2deg); } }
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; border-radius: 22px; }
.env-back { inset: 0; background: radial-gradient(120% 120% at 50% 100%, var(--lg-h20, #5d111f), var(--lg-h21, #33070f) 55%, var(--lg-h22, #110104));
            box-shadow: 0 26px 50px rgba(0,0,0,.6), inset 0 0 0 1px rgba(var(--lg-c15, 255, 200, 215), .18); }
.env-front { inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(155deg, transparent 49.6%, rgba(0,0,0,.25) 50%, transparent 50.4%) left/50% 100% no-repeat,
              linear-gradient(205deg, transparent 49.6%, rgba(0,0,0,.25) 50%, transparent 50.4%) right/50% 100% no-repeat,
              radial-gradient(120% 90% at 50% 120%, var(--lg-h25, #6b1424), var(--lg-h26, #3a0811) 60%, var(--lg-h27, #1a0307));
  clip-path: polygon(0 34%, 50% 70%, 100% 34%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(var(--lg-c15, 255, 200, 215), .15); }
.env-flap { top: 0; height: 64%; z-index: 4; transform-origin: top; transition: transform 1s cubic-bezier(.45,0,.2,1), z-index 0s .5s;
  background: linear-gradient(180deg, var(--lg-h28, #7a1729), var(--lg-h29, #44091a)); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 22px 22px 0 0;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.env::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; z-index: 6;
  background: linear-gradient(calc(110deg + var(--tx) * 30deg), transparent 35%, rgba(255,255,255,.10) 45%, transparent 55%); }
.env-seal { position: absolute; left: 50%; top: 64%; width: 62px; height: 62px; margin: -31px 0 0 -31px; z-index: 5; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; color: #ffe4b0; font-style: normal !important;
  background: radial-gradient(circle at 35% 30%, #e9b878, #b8823f 45%, #7a4f1f 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.35);
  animation: seal-pulse 1.8s ease-in-out infinite; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease; }
.env-seal::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,214,150,.5); animation: seal-ring 1.8s ease-out infinite; }
@keyframes seal-pulse { 50% { transform: scale(1.06); } }
@keyframes seal-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.tk-tap { position: absolute; left: 0; right: 0; top: 312px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.8); opacity: 0; transition: opacity .6s ease; }
.tk-tap b { color: #ffe4b0; }
.tk-stage.ready .tk-tap { opacity: 1; }
.tk-stage.opening .env-seal { transform: scale(1.35); opacity: 0; animation: none; }
.tk-stage.opening .env-flap { transform: rotateX(180deg); z-index: 1; }
.tk-stage.opening .env { opacity: 1; animation: env-drop 1.4s cubic-bezier(.55,0,.35,1) 1.25s both; }
@keyframes env-drop { from { transform: translateX(-50%); opacity: 1; } to { transform: translateX(-50%) translateY(300px) rotate(5deg) scale(.96); opacity: 0; } }
.tk-stage.opening .tk-tap { opacity: 0; }

/* the ticket */
.tk-wrap { position: absolute; left: 50%; top: 0; width: 330px; max-width: 100%; margin-left: -165px; z-index: 2; opacity: 0; pointer-events: none;
           transform: translateY(120px) scale(.86); }
@media (max-width: 360px) { .tk-wrap { margin-left: -50%; } }
.tk-stage.opening .tk-wrap { animation: tk-out 2.1s cubic-bezier(.22,1,.36,1) .7s forwards; }
@keyframes tk-out { 0% { opacity: 1; transform: translateY(120px) scale(.86); z-index: 1; } 49% { z-index: 1; }
                    50% { opacity: 1; transform: translateY(-34px) scale(.92); z-index: 6; } 75% { transform: translateY(6px) scale(1.01); }
                    100% { opacity: 1; transform: translateY(0) scale(1); z-index: 6; } }
.tk-stage.open .tk-wrap { opacity: 1; transform: none; pointer-events: auto; z-index: 6; }
.ticket-card.tk { --notch: 13px; --cut: 70%; display: block; text-align: left; border-radius: 28px !important; padding: 22px 22px 18px; margin: 0;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut), transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% var(--cut), transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 var(--cut), transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% var(--cut), transparent 98%, #000) right / 51% 100% no-repeat;
  transform: rotateX(calc(var(--ty) * -7deg)) rotateY(calc(var(--tx) * 9deg)); transition: transform .2s ease-out; }
.ticket-card.tk[hidden] { display: block; }       /* script.js un-hides it; extras.js shows the envelope first */
.tk-holo { position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(calc(115deg + var(--tx) * 25deg), transparent 28%, rgba(255,214,170,.13) 40%, rgba(var(--lg-c18, 255, 140, 185), .15) 48%, rgba(160,180,255,.12) 56%, transparent 68%);
  background-size: 220% 100%; background-position: calc(50% - var(--tx) * 45%) 0; }
.tk-row { display: flex; align-items: center; justify-content: space-between; }
.tk-badge { display: inline-flex; gap: 6px; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #ffe4b0; font-style: normal !important;
  padding: 6px 11px; border-radius: 999px; background: rgba(240,194,123,.12); box-shadow: inset 0 0 0 1px rgba(255,228,176,.35); }
.tk-brand { font-size: 12px; color: rgba(255,255,255,.6); }
.ticket-card.tk .ticket-congrats { font-size: 27px; margin: 12px 0 14px;
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #ffe4b0 50%, #fff 60%, #fff 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: tk-shimmer 3.4s ease-in-out infinite; }
@keyframes tk-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.tk-when { display: flex; gap: 14px; align-items: center; }
.tk-cal { width: 70px; flex: none; border-radius: 18px; overflow: hidden; text-align: center; box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18); }
.tk-cal[hidden] { display: none; }
.tk-cal-m { font-size: 10px; letter-spacing: 2px; padding: 5px 0 4px; color: #fff; font-style: normal !important; background: linear-gradient(180deg, var(--lg-h30, #8f1a30), var(--lg-h20, #5d111f)); }
.tk-cal-d { font-size: 30px; line-height: 1; padding: 8px 0 9px; color: #fff; font-style: normal !important; background: rgba(255,255,255,.06); }
.tk-day { font-size: 19px; font-weight: 800; font-style: italic; }
.tk-time { display: inline-block; margin-top: 6px; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; color: #fff;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.tk-time[hidden] { display: none; }
.tk-where { display: flex; align-items: center; gap: 8px; margin: 16px 0 26px; font-size: 13px; color: rgba(255,255,255,.85); }
.tk-where i { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--lg-c19, 255, 159, 182), .15); box-shadow: inset 0 0 0 1px rgba(var(--lg-c19, 255, 159, 182), .35); }
.tk-where i::before { content: ""; width: 12px; height: 12px; background: var(--lg-h24, #ff9fb6);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center/contain no-repeat; }
.tk-tear { position: absolute; left: 20px; right: 20px; top: var(--cut); border-top: 2px dashed rgba(255,228,176,.35); }
.tk-stub { display: flex; align-items: center; gap: 14px; padding-top: 16px; }
.tk-admit { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: 2px; color: rgba(255,228,176,.75); font-style: normal !important; }
.tk-code-box { flex: 1; text-align: center; }
.tk-code-label { font-size: 9px; letter-spacing: 2px; color: rgba(255,255,255,.55); font-style: normal !important; }
.ticket-card.tk .ticket-code { font-size: 25px; line-height: 1.2; letter-spacing: 6px; color: #ffe4b0; margin-top: 3px; font-style: normal !important;
  text-shadow: 0 0 18px rgba(240,194,123,.4); perspective: 300px; }
.ticket-code span { display: inline-block; }
.tk-bars { height: 22px; margin: 8px auto 0; width: 86%; opacity: .45; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px, #fff 8px 11px, transparent 11px 13px); }
.tk-spark { position: absolute; color: #ffe4b0; font-size: 12px; pointer-events: none; animation: tk-tw 2.4s ease-in-out infinite; text-shadow: 0 0 8px rgba(240,194,123,.9); }
@keyframes tk-tw { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25) rotate(25deg); } }
.tk-stage .tk-in { opacity: 0; }
.tk-stage.opening .tk-in { animation: tk-fin .7s cubic-bezier(.2,.9,.25,1.15) both; }
@keyframes tk-fin { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.tk-stage.opening .ticket-code span { animation: tk-flip .55s cubic-bezier(.2,.9,.25,1.3) both; }
@keyframes tk-flip { from { opacity: 0; transform: rotateX(90deg) translateY(40%); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
.tk-stage.opening .tk-tear { animation: tk-tear .9s cubic-bezier(.22,1,.36,1) 1.85s both; transform-origin: left; }
@keyframes tk-tear { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tk-burst { position: absolute; left: 50%; top: 190px; width: 0; height: 0; pointer-events: none; z-index: 9; }
.tk-burst i { position: absolute; font-style: normal; animation: tk-bst 2s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes tk-bst { 0% { transform: translate(0,0) scale(.3) rotate(0); opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; }
                    100% { transform: translate(var(--bx), calc(var(--by) + 60px)) scale(1) rotate(var(--br)); opacity: 0; } }
#screen-waiting.ticket-mode .ticket-footer-note { text-align: center; font-size: 11px; color: rgba(255,255,255,.7); margin: 0 6px 6px; line-height: 1.5;
  opacity: 0; transition: opacity .6s 1.6s; }
.tk-stage.open ~ .ticket-footer-note { opacity: 1 !important; }

/* =====================================================================
   PHOTO UPLOAD ICON — a round wine liquid-glass button with an upload arrow
   (replaces the old camera emoji on Photo 1 / Photo 2)
   ===================================================================== */
.photo-icon {
  width: 78px; height: 78px; border-radius: 50% !important; opacity: 1; font-size: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; margin: 4px 0 2px;
}
.photo-icon svg { width: 32px; height: 32px; display: block; position: relative; z-index: 1; stroke: #ff8aa0; stroke: color-mix(in srgb, rgb(var(--lg-c4, 255, 70, 110)) 70%, #fff); }
/* no glow: just the glass circle. It is a button, so reset the browser's button look and show it is tappable */
html.lg-canvas .photo-icon,
.photo-icon { box-shadow: none; padding: 0; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.photo-icon:active { transform: scale(0.94); }
/* wine tint over the lens, light in the middle like a glass ball */
.photo-icon .lg-layer::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--btn-dark) 30%, transparent), color-mix(in srgb, var(--btn-dark) 62%, transparent));
}
html.lg-canvas .photo-icon::after { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.30); }
html.lg-fallback .photo-icon { background: color-mix(in srgb, var(--btn-dark) 70%, transparent); }