/* Secret Santa: the organiser's page (light, like WhirlPicker) and the gift stage (a snowy night).
   Shares styles.css for buttons, fields, sheets, toasts and the about section. */
:root[data-page="secret"], .sw-page { --accent: #E3467D; --accent-ink: #FFFFFF; --accent-soft: #FCE4EE; --accent-text: #C2185B; }
.sw-page { background: var(--bg); }
.sw-page #swSound .off, .sw-page #swSound[aria-pressed="false"] .on { display: none; }
.sw-page #swSound[aria-pressed="false"] .off { display: block; }

/* ---------- The night: header, hero, invitation and the pile of presents ---------- */
.sw-night {
  position: relative; overflow: hidden; color: #FFF7EC; padding-bottom: 64px;
  background:
    radial-gradient(60% 40% at 50% 100%, rgba(255, 196, 107, .16), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #2C3170 0%, #171A3D 55%, #0E1030 100%);
}
.sw-night::after { /* a soft snowy ground the presents sit on */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 140px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 247, 236, .14), transparent); pointer-events: none;
}
.sw-night > * { position: relative; z-index: 1; }
.sw-night .gift-snow { z-index: 0; }
.sw-night .gift-snow span { animation-name: snow-fall-long, snow-sway; }
@keyframes snow-fall-long { to { translate: 0 1400px; } }

.sw-bar { display: flex; align-items: center; gap: 10px; max-width: 980px; margin: 0 auto; padding: 14px 16px; }
.sw-brand { display: inline-flex; align-items: center; gap: 9px; color: #FFF7EC; text-decoration: none; font: 800 21px var(--f-display); letter-spacing: -.02em; }
.sw-brand svg { width: 28px; height: 28px; }
.sw-by { color: #A9AED0; font-size: 13.5px; font-weight: 600; text-decoration: none; margin-right: auto; }
.sw-brand, .sw-by { white-space: nowrap; }
@media (max-width: 420px) { .sw-by { font-size: 12.5px; } .sw-brand { font-size: 19px; } .sw-brand svg { width: 24px; height: 24px; } }
.sw-by:hover { color: #FFE07A; }
.sw-night .pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #FFF7EC; }
.sw-night .pill:hover { border-color: #FFE07A; color: #FFE07A; }

.sw-main { max-width: 820px; margin: 0 auto; padding: 4px 16px 0; display: grid; gap: 26px; }
.sw-hero { text-align: center; padding: 14px 0 0; }
.sw-hero h1 { margin: 0; font: 800 clamp(32px, 6.4vw, 60px)/1.02 var(--f-display); letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.sw-hero p { margin: 12px auto 0; max-width: 34em; color: #C9CCE6; font-size: clamp(15.5px, 2.2vw, 18px); text-wrap: balance; }
#swApp { display: grid; gap: 26px; }

.sw-switch { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #A9AED0; }
.sw-picker { max-width: 60%; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #FFF7EC; font-weight: 600; }
.sw-picker option { color: var(--ink); }

/* The invitation: a cream card with a bow, filled in like a sentence */
.sw-invite {
  position: relative; justify-self: center; width: min(100%, 560px); padding: 30px 30px 24px; text-align: center; rotate: -1.2deg;
  background: linear-gradient(#FFFCF6, #FFF6E8); color: var(--ink); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(227, 70, 125, .12);
  animation: invite-in .7s var(--spring) backwards;
}
.sw-invite::before { /* the ribbon across the corner */
  content: ""; position: absolute; top: 0; right: 36px; width: 18px; height: 100%;
  background: linear-gradient(transparent, rgba(227, 70, 125, .12) 30%, rgba(227, 70, 125, .12) 70%, transparent); pointer-events: none;
}
@keyframes invite-in { from { opacity: 0; translate: 0 30px; rotate: -6deg; } }
.sw-invite-bow { position: absolute; top: -22px; right: 22px; width: 48px; height: 32px; }
.sw-invite-bow i { position: absolute; bottom: 0; width: 26px; height: 28px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse 34% 30% at 50% 52%, transparent 96%, #E3467D 100%); }
.sw-invite-bow i:first-child { left: 0; rotate: -24deg; }
.sw-invite-bow i:last-child { right: 0; rotate: 24deg; }
.sw-invite-kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.sw-title {
  display: block; width: 100%; margin: 6px 0 10px; padding: 0 0 4px; border: 0; border-bottom: 2px dashed #EAD9C6; background: transparent;
  font: 800 clamp(26px, 5vw, 38px)/1.15 var(--f-display); letter-spacing: -.03em; text-align: center; color: var(--ink);
}
.sw-title::placeholder { color: #C9B9A6; }
.sw-title:focus { outline: none; border-bottom-color: var(--accent); }
.sw-invite-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 6px; font-size: 17px; color: #3D4256; }
.sw-invite-dot { margin: 0 6px; color: #C9B9A6; }
.sw-inline {
  min-width: 4ch; padding: 2px 4px; border: 0; border-bottom: 2px dashed #EAD9C6; border-radius: 0; background: transparent;
  font: 700 17px var(--f-body); color: var(--ink); text-align: center;
}
.sw-inline[type="date"] { width: auto; }
.sw-inline::placeholder { color: #C9B9A6; }
.sw-inline:focus { outline: none; border-bottom-color: var(--accent); background: var(--accent-soft); border-radius: 6px 6px 0 0; }
.sw-note-slot { margin-top: 12px; display: flex; justify-content: center; align-items: baseline; gap: 6px; }
.sw-note-mark { color: var(--accent-text); }
.sw-note { font-weight: 600; font-style: italic; max-width: 100%; }
.sw-add-note { border: 0; background: none; padding: 4px 8px; color: var(--accent-text); font-weight: 700; font-size: 14px; cursor: pointer; border-radius: 8px; }
.sw-add-note:hover { background: var(--accent-soft); }

/* The pile of presents */
.sw-stage-card { display: grid; gap: 18px; justify-items: center; text-align: center; }
.sw-pile-head { display: flex; align-items: baseline; gap: 10px; }
.sw-pile-head h2 { margin: 0; font: 800 clamp(22px, 3.6vw, 28px) var(--f-display); letter-spacing: -.02em; }
.sw-count { font-size: 14px; font-weight: 700; color: #FFE07A; font-variant-numeric: tabular-nums; }
.sw-pile { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 18px 14px; width: 100%; min-height: 120px; }
.sw-gift {
  position: relative; display: grid; justify-items: center; gap: 6px; width: 92px; padding: 6px 2px 4px; border: 0; border-radius: 16px;
  background: none; color: #FFF7EC; cursor: pointer; transition: background .15s;
}
.sw-gift:hover { background: rgba(255, 255, 255, .07); }
.sw-gift:hover .gift-art { animation: gift-bob 1.1s ease-in-out infinite; }
.sw-gift:focus-visible { outline: 2px solid #FFE07A; outline-offset: 2px; }
.sw-gift-art { position: relative; width: 70px; height: 70px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .3)); }
.sw-gift-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }
.sw-gift.dropping { animation: gift-drop .65s var(--spring) backwards; animation-delay: var(--d, 0ms); }
@keyframes gift-drop { 0% { opacity: 0; translate: 0 -120px; rotate: -12deg; } 60% { opacity: 1; translate: 0 6px; rotate: 4deg; } 100% { translate: 0 0; rotate: 0deg; } }
.sw-badge { position: absolute; top: 2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.sw-badge-hint { left: 8px; background: #FFF7EC; color: var(--accent-text); }
.sw-badge-apart { right: 8px; background: #E3467D; color: #FFFFFF; }
.sw-pile.many .sw-gift { width: 74px; }
.sw-pile.many .sw-gift-art { width: 50px; height: 50px; }
.sw-pile.many .sw-gift-name { font-size: 12.5px; }

/* The add-a-name present: an empty dashed box with a name tag to type on */
.sw-add { display: grid; justify-items: center; gap: 6px; width: 150px; }
.sw-add-box {
  display: grid; place-items: center; width: 70px; height: 70px; border-radius: 14px; border: 2px dashed rgba(255, 247, 236, .45);
  color: #FFE07A; font: 800 34px var(--f-display); animation: add-breathe 2.6s ease-in-out infinite;
}
@keyframes add-breathe { 0%, 100% { border-color: rgba(255, 247, 236, .3); } 50% { border-color: rgba(255, 224, 122, .8); } }
.sw-add-input {
  width: 100%; padding: 7px 12px; border: 0; border-radius: 999px; background: #FFF7EC; color: var(--ink);
  font: 700 14.5px var(--f-body); text-align: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.sw-add-input::placeholder { color: #A99A87; }
.sw-add-input:focus { outline: 3px solid #FFE07A; }
.sw-pile-hint { margin: -4px 0 0; color: #A9AED0; font-size: 14.5px; }
.sw-list-btn { border: 0; background: none; padding: 2px 4px; color: #FFE07A; font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sw-list-btn:hover { color: #FFF4C2; }
.sheet .sw-list-count { margin-right: auto; align-self: center; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }

/* Rules as chips */
.sw-rules { display: grid; gap: 8px; justify-items: center; }
.sw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sw-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: #E8E9F3; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s;
}
.sw-chip:hover { border-color: #FFE07A; }
.sw-chip[aria-pressed="true"] { background: #FFE07A; border-color: #FFE07A; color: var(--ink); }
.sw-chip-icon svg { display: block; width: 16px; height: 16px; }
.sw-pair { cursor: default; background: rgba(227, 70, 125, .22); border-color: rgba(227, 70, 125, .5); padding-right: 6px; }
.sw-pair button { border: 0; background: rgba(255, 255, 255, .14); color: inherit; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px; }
.sw-heart { color: #FF8AB3; }
.sw-chip-add { border-style: dashed; }
.sw-rule-note { margin: 0; max-width: 34em; color: #A9AED0; font-size: 13.5px; }
.sw-error { display: grid; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #FFF6E5; color: var(--warn); font-weight: 600; }
.sw-error p { margin: 0; }
.sw-error .btn { justify-self: center; }

/* The big button: a glowing ribbon you can't miss */
.sw-go {
  position: relative; height: 64px; padding: 0 40px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #F0679A, #E3467D 55%, #C93A6C); color: #FFFFFF; font: 800 21px var(--f-display); letter-spacing: -.01em;
  box-shadow: 0 0 0 4px rgba(255, 224, 122, .0), 0 14px 34px rgba(227, 70, 125, .45); transition: transform .15s var(--ease-out), box-shadow .3s, opacity .2s;
}
.sw-go:disabled { opacity: .45; cursor: default; box-shadow: none; }
.sw-go.ready { animation: go-glow 2.4s ease-in-out infinite; }
.sw-go.ready:hover { transform: translateY(-2px) scale(1.03); }
.sw-go:active { transform: scale(.96); }
@keyframes go-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 122, .55), 0 14px 34px rgba(227, 70, 125, .45); } 50% { box-shadow: 0 0 0 10px rgba(255, 224, 122, 0), 0 14px 34px rgba(227, 70, 125, .45); } }
.sw-stage-card.drawing .sw-add, .sw-stage-card.drawing .sw-rules, .sw-stage-card.drawing .sw-go { opacity: 0; pointer-events: none; transition: opacity .25s; }
.sw-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* The edit sheet for one present */
.sw-edit-head { display: flex; align-items: center; gap: 12px; }
.sw-edit-head h3 { overflow-wrap: anywhere; }
.sheet .field-label { display: grid; gap: 6px; }
.sw-apart-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sw-apart-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer; }
.sw-apart-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.sw-apart-chip[aria-pressed="true"]::after { content: "♥"; color: var(--accent); }
.sw-mini { position: relative; display: inline-block; flex: none; width: 26px; height: 26px; }

/* ---------- After the draw: the links, on a cream card ---------- */
.sw-result { width: min(100%, 640px); justify-self: center; padding: 24px 22px; border-radius: 24px; background: #FFFCF6; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); animation: invite-in .6s var(--spring) backwards; }
.sw-result-head { display: grid; gap: 6px; }
.sw-result-kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.sw-result-head h2 { margin: 0; font: 800 clamp(28px, 5vw, 40px) var(--f-display); letter-spacing: -.03em; }
.sw-result-head p { margin: 0; color: #3D4256; }
.sw-result-head .warn { color: var(--warn); font-size: 14px; }
.sw-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; }
.sw-link { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-radius: 16px; background: color-mix(in srgb, var(--box) 16%, #FFFFFF); animation: rise .4s var(--ease-out) backwards; }
.sw-link:nth-child(2) { animation-delay: .05s; } .sw-link:nth-child(3) { animation-delay: .1s; } .sw-link:nth-child(4) { animation-delay: .15s; } .sw-link:nth-child(n+5) { animation-delay: .2s; }
.sw-link-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-link-actions { display: flex; gap: 6px; }
.sw-link .btn { height: 38px; padding: 0 14px; font-size: 14px; }
.sw-privacy { margin: 0; font-size: 13.5px; color: var(--muted); }
.sw-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

@media (max-width: 560px) {
  .sw-invite { padding: 26px 18px 20px; rotate: -.6deg; }
  .sw-gift { width: 80px; }
  .sw-gift-art { width: 58px; height: 58px; }
  .sw-add { width: 132px; }
  .sw-add-box { width: 58px; height: 58px; }
  .sw-result { padding: 20px 14px; }
  .sw-link { flex-wrap: wrap; }
  .sw-link-actions { width: 100%; }
  .sw-link-actions .btn { flex: 1; justify-content: center; }
  .sw-actions .btn { flex: 1 1 40%; justify-content: center; }
}

/* ---------- The gift (used on the stage, in buttons and in Pass the phone) ---------- */
.gift-art { position: absolute; inset: 0; display: block; --box: #E3467D; --ribbon: #FFE07A; }
.gift-box {
  position: absolute; left: 8%; right: 8%; bottom: 0; height: 62%; border-radius: 9% / 12%;
  background:
    linear-gradient(90deg, transparent 43%, var(--ribbon) 43% 57%, transparent 57%),
    radial-gradient(rgba(255, 255, 255, .28) 14%, transparent 15%) 0 0 / 22% 22%,
    linear-gradient(var(--box), color-mix(in srgb, var(--box) 78%, #1B2033));
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .1), 0 14px 30px rgba(0, 0, 0, .28);
}
.gift-lid {
  position: absolute; left: 2%; right: 2%; top: 26%; height: 17%; border-radius: 12% / 40%;
  background: linear-gradient(90deg, transparent 43%, var(--ribbon) 43% 57%, transparent 57%), color-mix(in srgb, var(--box) 88%, #FFFFFF);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .1);
}
.gift-bow { position: absolute; left: 50%; bottom: 92%; width: 46%; height: 70%; translate: -50% 0; }
.gift-bow i { position: absolute; bottom: 0; width: 52%; height: 100%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse 34% 30% at 50% 52%, transparent 96%, var(--ribbon) 100%); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12)); }
.gift-bow::after { content: ""; position: absolute; left: 50%; bottom: -8%; width: 24%; aspect-ratio: 1; translate: -50% 0; border-radius: 40%; background: color-mix(in srgb, var(--ribbon) 85%, #C98A00); }
.gift-bow i:first-child { left: 0; rotate: -28deg; transform-origin: 100% 100%; }
.gift-bow i:last-child { right: 0; rotate: 28deg; transform-origin: 0 100%; }
.gift-tag {
  position: absolute; right: -14%; top: 50%; padding: .35em .7em; rotate: 8deg; transform-origin: 0 0;
  background: #FFF7EC; color: #1B2033; border-radius: 6px; font: 700 clamp(11px, 1.6vh, 14px) var(--f-body);
  white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); animation: tag-swing 2.6s ease-in-out infinite;
}
.gift-tag::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 2px; background: var(--ribbon); }
.gift-glow { position: absolute; left: 50%; top: 40%; width: 10%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, #FFF7D6, rgba(255, 224, 122, .55) 45%, transparent); }
@keyframes tag-swing { 0%, 100% { rotate: 8deg; } 50% { rotate: 14deg; } }
@keyframes gift-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6%; } }

/* ---------- The stage ---------- */
body.gift-open { overflow: hidden; }
.gift-stage {
  position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; overflow: hidden auto;
  padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 90% at 50% 30%, #2C3170 0%, #171A3D 50%, #0B0D20 100%);
  color: #FFF7EC; animation: fade .35s;
}
.gift-stage.leaving { animation: fade .28s reverse forwards; }
.gift-snow { position: absolute; inset: 0; pointer-events: none; }
.gift-snow span { position: absolute; top: -10px; border-radius: 50%; background: #FFFFFF; animation-name: snow-fall, snow-sway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; }
@keyframes snow-fall { to { translate: 0 calc(100vh + 20px); } }
@keyframes snow-sway { 0%, 100% { margin-left: -12px; } 50% { margin-left: 12px; } }
.gift-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.gift-scene { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4vh; text-align: center; transition: opacity .4s, translate .5s var(--ease-out), scale .5s var(--ease-out); }
.gift-scene.dimmed { opacity: .3; scale: .9; }
.gift-scene.done { position: absolute; opacity: 0; pointer-events: none; }
.gift-hello { margin: 0; font: 800 clamp(26px, 5.5vh, 48px)/1.1 var(--f-display); letter-spacing: -.03em; text-wrap: balance; animation: rise .6s var(--ease-out) backwards; }
.gift { position: relative; width: min(52vw, 34vh, 260px); aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; animation: gift-bob 2.4s ease-in-out infinite; }
.gift::before { content: ""; position: absolute; inset: -30% -40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 224, 122, .22), transparent); pointer-events: none; }
.gift:focus-visible { outline: 3px solid #FFE07A; outline-offset: 10px; border-radius: 20px; }
.gift:disabled { cursor: default; animation: none; }
.gift-hint { margin: 0; font-size: clamp(15px, 2.2vh, 19px); font-weight: 600; color: #C9CCE6; animation: hint-pulse 1.8s ease-in-out infinite; transition: opacity .2s; }
.gift-hint.gone { animation: none; opacity: 0; }
@keyframes hint-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* Opening: the bow and lid fly off, light bursts out */
.gift-art.opening .gift-lid { animation: lid-off .7s cubic-bezier(.2, .8, .3, 1) forwards; }
.gift-art.opening .gift-glow { animation: glow-burst .8s var(--ease-out) forwards; }
.gift-art.opening .gift-tag { animation: none; opacity: 0; transition: opacity .2s; }
@keyframes lid-off { 30% { translate: -6% -70%; rotate: -16deg; } 100% { translate: -55% -260%; rotate: -48deg; opacity: 0; } }
@keyframes glow-burst { 0% { opacity: 1; scale: 1; } 60% { opacity: .9; } 100% { opacity: 0; scale: 16; } }

/* The hero moment: the name fills the screen */
.gift-moment { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; text-align: center; padding: 0 5vw; font: 800 120px/1.05 var(--f-display); letter-spacing: -.04em; color: #FFF7EC; text-shadow: 0 6px 40px rgba(0, 0, 0, .45); }
.gift-moment span, .gift-name span {
  padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-wrap: balance;
  background: linear-gradient(transparent 66%, color-mix(in srgb, var(--win) 80%, transparent) 66% 90%, transparent 90%);
}

/* The card */
.gift-card {
  position: relative; z-index: 2; width: min(100%, 460px); display: grid; gap: 14px; padding: 26px 24px 22px; border-radius: 26px;
  background: #FFFCF6; color: var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.gift-card.arriving { animation: pop-in .45s var(--spring); }
.gift-card.arriving > * { animation: rise .5s var(--ease-out) backwards; }
.gift-card.arriving > :nth-child(2) { animation-delay: .05s; }
.gift-card.arriving > :nth-child(4) { animation-delay: .25s; }
.gift-card.arriving > :nth-child(5) { animation-delay: .4s; }
.gift-event { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.gift-kicker { margin: 0; font-size: 16px; font-weight: 600; color: #3D4256; }
.gift-name { margin: 0; font: 800 clamp(38px, 9vw, 60px)/1.05 var(--f-display); letter-spacing: -.035em; outline: none; overflow-wrap: anywhere; }
.gift-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--sunk); text-align: left; font-size: 15px; }
.gift-details dt { font-weight: 700; color: var(--muted); }
.gift-details dd { margin: 0; font-weight: 600; }
.gift-details dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: break-word; }
.gift-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gift-actions .btn { text-decoration: none; }
.gift-card.secret-hidden .gift-name, .gift-card.secret-hidden .gift-details { filter: blur(14px); user-select: none; pointer-events: none; }
.gift-card .gift-name, .gift-card .gift-details { transition: filter .25s; }

/* ---------- Pass the phone ---------- */
.pass-inner { position: relative; z-index: 1; width: min(100%, 900px); display: grid; justify-items: center; gap: 14px; text-align: center; }
.pass-sub { margin: 0; color: #C9CCE6; }
.pass-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100%; margin-top: 8px; }
.pass-grid > .pass-tag { width: 128px; }
@media (max-width: 420px) { .pass-grid > .pass-tag { width: calc(50% - 7px); } }
.pass-tag {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; border: 0; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: #FFF7EC; font-weight: 700; font-size: 15px; transition: background .15s, transform .14s var(--ease-out);
}
.pass-tag:hover { background: rgba(255, 255, 255, .13); }
.pass-tag:active { transform: scale(.95); }
.pass-tag .gift-art { position: relative; width: 72px; height: 72px; }
.pass-tag:hover .gift-art { animation: gift-bob 1.2s ease-in-out infinite; }
.pass-tag > span:not(.gift-art) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-tag.done { opacity: .45; }
.pass-tick { position: absolute; top: 8px; right: 10px; color: #8EDBB0; font-size: 18px; }
.pass-status { margin: 6px 0 0; color: #C9CCE6; font-weight: 600; }
.pass-status.all { font: 800 clamp(22px, 4vh, 34px) var(--f-display); color: #FFE07A; animation: chip-pop .6s var(--spring); }
.pass-exit { background: transparent; border-color: #4A5080; color: #E8E9F3; }
.pass-exit:hover { background: #2C3158; border-color: #4A5080; }