/* Invitation letter */
    .overlay { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: rgba(28, 33, 42, 0.94);
      padding: max(28px, env(safe-area-inset-top)) 16px max(40px, env(safe-area-inset-bottom));
      display: grid; justify-items: center; align-content: start; gap: 18px;
      --paper-l: #f7f5ef; --line-l: #d9d3c4; --ink-l: #1e2a3d; --soft-l: #5d6677; --air-red: #cf3a2f; --air-blue: #1f4aa8; --wax: #a8261d;
      --type: "Special Elite", "Courier New", monospace; --pen: "Nanum Pen Script", "Bradley Hand", cursive; }
    .env { width: min(100%, 520px); aspect-ratio: 1.55; background: var(--paper-l); border-radius: 6px; padding: 14px; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.45); margin-top: 6vh; }
    .env::before { content: ""; position: absolute; inset: 0; border-radius: 6px; padding: 10px;
      background: repeating-linear-gradient(-45deg, var(--air-red) 0 14px, var(--paper-l) 14px 22px, var(--air-blue) 22px 36px, var(--paper-l) 36px 44px);
      -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
    .env-face { position: relative; height: 100%; padding: 18px 22px; display: grid; grid-template-rows: auto 1fr auto; }
    .par-avion { font: 12px var(--type); color: var(--air-blue); letter-spacing: 0.08em; border: 1.5px solid var(--air-blue); padding: 3px 8px; justify-self: start; }
    .env-stamp { position: absolute; top: 14px; right: 18px; width: 68px; height: 80px; background: #fff; border: 2px dashed #b9b2a2; padding: 5px; }
    .env-stamp div { height: 100%; background: var(--p-bg); color: var(--p-fg); display: grid; place-content: center; text-align: center; font: 10px/1.1 var(--type); text-transform: uppercase; }
    .env-stamp b { font-size: 20px; display: block; }
    .env-to { align-self: center; justify-self: center; text-align: center; color: var(--ink-l); }
    .env-to small { font: 13px var(--type); color: var(--soft-l); display: block; }
    .env-to span { font: clamp(44px, 12vw, 64px)/0.9 var(--pen); }
    .wax { justify-self: center; font: 700 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; background: var(--wax); color: #fff; border: 0; border-radius: 50%; width: 72px; height: 72px; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25), 0 6px 14px rgba(0,0,0,0.3); }
    .letter { width: min(100%, 560px); background-color: var(--paper-l); color: var(--ink-l); border-radius: 4px; box-shadow: 0 30px 60px rgba(0,0,0,0.45); padding: 30px 26px 26px;
      background-image: repeating-linear-gradient(transparent 0 31px, var(--line-l) 31px 32px); background-position: 0 18px; }
    .letter .meta { font: 13px var(--type); color: var(--soft-l); display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 14px; }
    .letter h2 { font: 54px/1 var(--pen); margin: 0 0 14px; }
    .letter h3 { font: 700 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft-l); margin: 22px 0 8px; }
    .letter ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: t; }
    .letter ol li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; font: 28px/1.15 var(--pen); color: var(--air-blue); }
    .letter ol li::before { counter-increment: t; content: counter(t, upper-roman); font: 13px var(--type); color: var(--soft-l); padding-top: 8px; }
    .letter .sign { font: 34px var(--pen); margin: 16px 0 0; }
    .letter dl { background: rgba(255,255,255,0.75); padding: 14px 16px; margin: 0; display: grid; gap: 8px; }
    .letter dt { font: 700 10px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft-l); }
    .letter dd { margin: 0; font-size: 15px; line-height: 1.4; }
    .letter .country-line { font: 900 26px/1 var(--display); text-transform: uppercase; }
    .letter .rsvp { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
    .letter .rsvp button { font: 600 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid var(--ink-l); background: none; color: var(--ink-l); padding: 10px 14px; cursor: pointer; }
    .letter .rsvp .solid { background: var(--wax); border-color: var(--wax); color: #fff; }
    .letter .answer { font: 30px var(--pen); color: var(--wax); }
    .closer { font: 600 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #c9cfd8; border: 1.5px solid #c9cfd8; background: none; padding: 9px 14px; cursor: pointer; }

    
    .gate-mode .env { aspect-ratio: auto; min-height: 320px; }
    .gate-mode .env-to span { font-size: clamp(32px, 8vw, 46px); line-height: 1; }
    .gate-text { font: 14px/1.45 var(--type); color: var(--soft-l); text-align: center; margin: 8px 0 14px; }
    .gate { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
    .gate input { font: 18px var(--type); letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 12px; border: 2px solid var(--ink-l); background: #fff; width: 200px; max-width: 100%; }
    .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

    /* Season pass */
    .sp-scene { width: min(100%, 560px); position: relative; margin-top: 8vh; }
    .sp { display: grid; grid-template-columns: minmax(0, 1fr) 128px; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.35)); color: #1f2430; }
    .sp-piece { background: #fff; position: relative; }
    .sp-main { border-radius: 14px 0 0 14px; padding: 16px 18px 18px; display: grid; gap: 10px; overflow: hidden; }
    .sp-band { background: #b3261e; color: #fff4ec; margin: -16px -18px 4px; padding: 10px 18px; display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between; font: 600 11px var(--mono); letter-spacing: 0.1em; }
    .sp-route { display: flex; align-items: center; gap: 12px; }
    .sp-route b { font: 900 44px/1 var(--display); }
    .sp-route i { flex: 1; border-top: 2px dashed #bbb; }
    .sp-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font: 600 10px var(--mono); letter-spacing: 0.08em; color: #888; }
    .sp-kv .wide { grid-column: span 2; }
    .sp-kv strong { display: block; font: 700 15px var(--sans); color: #111; letter-spacing: 0; }
    .sp-note span { font: 600 10px var(--mono); letter-spacing: 0.08em; color: #888; }
    .sp-note p { margin: 2px 0 0; font: 20px/1.25 var(--hand); color: #1f3a6b; }
    .sp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
    .sp-btns button { font: 700 13px var(--sans); border-radius: 999px; padding: 10px 16px; border: 1.5px solid #b3261e; background: #b3261e; color: #fff; cursor: pointer; }
    .sp-btns .sp-ghost { background: none; color: #b3261e; }
    .sp-done { display: none; margin: 0; max-width: 58%; font: 700 15px var(--sans); color: #b3261e; }
    .sp-stub { border-radius: 0 14px 14px 0; padding: 16px 10px; display: grid; align-content: space-between; justify-items: center; text-align: center; background: #faf7f2;
      border-left: 2px dashed #d6d0c4; cursor: grab; touch-action: none; user-select: none; transform-origin: 0% 100%; will-change: transform; }
    .sp-stub:active { cursor: grabbing; }
    .sp-small { font: 600 10px var(--mono); letter-spacing: 0.08em; }
    .sp-gate { font: 900 26px/1 var(--display); }
    .sp-barcode { font: 400 30px/1 "Libre Barcode 39 Text", monospace; transform: rotate(90deg); white-space: nowrap; margin: 50px -34px 56px; }
    .sp-keep { font: 700 15px var(--hand); color: #b3261e; opacity: 0; transition: opacity 0.4s 0.5s; margin-top: 6px; }
    .sp-pull { position: absolute; right: -6px; top: 50%; translate: 100% -50%; font: 700 14px var(--hand); color: #c9cfd8; white-space: nowrap; transition: opacity 0.3s; }
    .sp-stamp { position: absolute; right: 16px; bottom: 8px; border: 3px double #b3261e; color: #b3261e; font: 900 22px/1 var(--display); letter-spacing: 0.06em; padding: 8px 10px; text-align: center; transform: rotate(-10deg) scale(1.6); opacity: 0; pointer-events: none; }
    .sp-stamp small { display: block; font: 600 9px var(--mono); letter-spacing: 0.1em; margin-top: 3px; }
    .sp-torn .sp-stub { transition: transform 0.9s cubic-bezier(.2,.7,.3,1); transform: translate(70px, 60px) rotate(14deg); border-left-color: transparent; cursor: default; }
    .sp-torn .sp-keep { opacity: 1; }
    .sp-torn .sp-stamp { opacity: 0.9; transform: rotate(-10deg) scale(1); transition: transform 0.25s 0.35s cubic-bezier(.3,1.6,.5,1), opacity 0.15s 0.35s; }
    .sp-torn .sp-btns { display: none; }
    .sp-torn .sp-done { display: block; }
    .sp-scene-torn .sp-pull { opacity: 0; }
    .sp-instant .sp-stub, .sp-instant .sp-stamp, .sp-instant .sp-keep { transition: none !important; }
    @media (prefers-reduced-motion: reduce) { .sp-torn .sp-stub, .sp-torn .sp-stamp, .sp-keep { transition: none; } }
    @media (max-width: 560px) {
      .sp { grid-template-columns: minmax(0, 1fr) 92px; }
      .sp-route b { font-size: 32px; }
      .sp-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sp-barcode { font-size: 24px; }
      .sp-pull { display: none; }
      .sp-torn .sp-stub { transform: translate(24px, 70px) rotate(10deg); }
    }

    .sp-counter { width: min(100%, 520px); margin-top: 10vh; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.35); color: #1f2430; padding: 0 22px 22px; display: grid; gap: 12px; }
    .sp-counter .sp-band { margin: 0 -22px 6px; }
    .sp-counter h2 { margin: 4px 0 0; font: 800 26px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
    .sp-counter p { margin: 0; font: 15px/1.45 var(--sans); color: #555; }
    .sp-codeform { display: grid; gap: 6px; border-top: 2px dashed #ddd; padding-top: 14px; }
    .sp-codeform label { font: 600 10px var(--mono); letter-spacing: 0.1em; color: #888; }
    .sp-coderow { display: flex; gap: 8px; flex-wrap: wrap; }
    .sp-coderow input { flex: 1 1 180px; min-width: 0; font: 600 18px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 12px; border: 2px solid #1f2430; border-radius: 8px; background: #faf7f2; }
    .sp-coderow .sp-yes { font: 700 14px var(--sans); border-radius: 999px; padding: 10px 18px; border: 0; background: #b3261e; color: #fff; cursor: pointer; }

    .toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: #1b1c1f; color: #eee; font: 500 12px var(--mono);
      padding: 10px 16px; border-radius: 999px; z-index: 30; max-width: calc(100% - 32px); }