.app{overflow:clip}
.app[data-view="loading"] .scene{opacity:0;pointer-events:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app[data-view="choose"] .wheel-scene,.app[data-view="choose"] .result-scene,.app[data-view="choose"] .opening-scene,.app[data-view="booking"] .wheel-scene,.app[data-view="booking"] .result-scene,.app[data-view="booking"] .opening-scene,.app[data-view="booked"] .wheel-scene,.app[data-view="booked"] .result-scene,.app[data-view="booked"] .opening-scene{opacity:0;pointer-events:none}
.flow-scene{display:none;overflow:hidden;overscroll-behavior:none}
.app[data-view="choose"] .choose-scene,.app[data-view="booking"] .booking-scene,.app[data-view="booked"] .booked-scene{display:block}
.flow-layout{position:relative;display:flex;flex-direction:column;min-height:100%;padding:32px 32px 32px;margin:0}
.flow-steps{display:flex;align-items:center;justify-content:center;gap:4px;height:24px;flex:none}
.step{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#333;color:#fff;font-size:14px;font-weight:500;line-height:1}
.step.active{background:#fff;color:#000}.step.done{background:transparent url('assets/check-done.webp') center/24px 24px no-repeat}.step-line{width:16px;border-top:1px dashed #777}
.flow-heading{margin-top:40px;text-align:center;flex:none}
.flow-heading h2{margin:0;font-size:32px;line-height:37px;font-weight:400}
.flow-heading p{margin:13px 0 0;color:#8c8c8c;font-size:14px;line-height:20px}
.gift-list{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.gift-option{position:relative;min-height:105px;border:1px solid transparent;border-radius:16px;background:#141414;padding:13px 48px 12px 20px;text-align:left;color:#fff;font-size:14px;line-height:19px}
.gift-option.selected{border-color:#fff}
button.gift-option{width:100%;cursor:pointer}
.gift-option strong{display:block;font-weight:500;line-height:22px}
.gift-option span{display:block;color:#999}
.gift-option .gift-terms{display:block;width:max-content;border:0;padding:0;margin-top:7px;background:none;color:#fff;text-decoration:underline;cursor:pointer;font-size:14px;line-height:19px}
.gift-radio{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#3b3b3b;font-size:17px;color:#000}
.gift-option.selected .gift-radio{background:transparent url('assets/check-selected.webp') center/24px 24px no-repeat}
.flow-primary{display:block;width:100%;height:40px;min-height:40px;border:0;border-radius:12px;background:#fff;color:#000;font-size:14px;font-weight:500;cursor:pointer}
.choose-scene .flow-primary{margin-top:auto}
.booking-fields{display:flex;flex-direction:column;gap:15px;margin-top:40px}
.booking-fields input{height:48px;width:100%;border:0;border-radius:12px;padding:0 16px;background:#141414;color:#fff;font:400 16px Suisse,Arial,sans-serif;outline:none}
.booking-fields input::placeholder{color:#999}.booking-fields input:focus-visible{outline:2px solid #fff}
.phone-field{display:flex;align-items:center;height:48px;border-radius:12px;background:#141414;padding:0 16px}.phone-field:focus-within{outline:2px solid #fff}.phone-field .phone-prefix{display:none;color:#999;font-size:16px;white-space:pre}.phone-field.active .phone-prefix{display:block}.phone-field.confirmed .phone-prefix{color:#fff}.booking-fields .phone-field input{height:100%;width:100%;min-width:0;padding:0;background:transparent;outline:none}.booking-fields .phone-field input:focus-visible{outline:none}.phone-field.active input::placeholder{color:transparent}
.selected-gift{margin-top:17px}.selected-gift h3{font-size:18px;line-height:21px;font-weight:500;margin:0 0 12px}.selected-gift .gift-option{padding:12px 16px;min-height:110px}.selected-gift .gift-option button{height:32px;border:0;border-radius:24px;background:#262626;color:#fff;padding:0 16px;margin-top:8px;font:inherit;cursor:pointer}
.booking-bottom{margin-top:auto;padding-top:28px}.consent{display:flex;align-items:flex-start;gap:8px;color:#999;font-size:14px;line-height:19px;cursor:pointer}.consent input{appearance:none;display:grid;place-items:center;width:20px;height:20px;min-width:20px;margin:0;border:0;border-radius:50%;background:#3b3b3b;cursor:pointer}.consent input:checked{background:#fff}.consent input:checked::after{content:'✓';color:#000;font:600 14px Arial,sans-serif}.consent a{color:#fff;text-decoration:underline}.booking-bottom .flow-primary{margin-top:24px}
.success-layout{align-items:center;text-align:center}.success-content{display:flex;flex-direction:column;align-items:center;max-width:311px;margin:auto 0}.success-mark{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#fff}.success-mark::after{content:'✓';color:#000;font:600 38px Arial,sans-serif}.success-layout h2{font-size:32px;line-height:37px;font-weight:400;margin:24px 0}.success-layout p{font-size:14px;line-height:20px;color:#aaa;margin:8px 0}
.result-background{display:none;position:absolute;inset:0;background-position:center;background-size:100% 100%;pointer-events:none}
.result-scene[data-art="face"] .result-background{display:block}
.result-scene[data-art="numeric"] .result-card-art{overflow:visible}
.result-scene.face-gradient::before{content:'';position:absolute;inset:auto 0 0;height:41%;background:linear-gradient(transparent,rgba(0,0,0,.4));pointer-events:none;z-index:2}
.result-scene[data-art="face"] .result-card-art{overflow:visible}
/* The new full-size Figma art is already 17% larger than the old face layer.
   This final 2.5% brings the visible face card to 120% of its former size. */
.result-scene[data-art="face"] .result-card-art img.card-primary{transform:scale(1.025)}
.result-scene[data-art="face"] .result-card-art{z-index:1}.result-scene[data-art="face"] .result-header,.result-scene[data-art="face"] .result-badge,.result-scene[data-art="face"] .result-copy,.result-scene[data-art="face"] .details-link,.result-scene[data-art="face"] .remaining-button,.result-scene[data-art="face"] .expiry{z-index:2}
.result-scene[data-art="face"] .result-copy h2{text-shadow:0 1px 8px #000}
.result-copy h2 s{font-size:20px;color:#aaa;font-weight:400;text-decoration-thickness:1px;white-space:nowrap}
.details-overlay{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.78);display:grid;place-items:end center;padding:0}.details-overlay[hidden],.flow-toast[hidden]{display:none}.details-dialog{position:relative;width:100%;max-height:80%;overflow-y:auto;border-radius:22px 22px 0 0;background:#141414;padding:30px 24px max(32px,env(safe-area-inset-bottom))}.details-eyebrow{color:#999;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}.details-dialog h2{font-size:24px;line-height:28px;font-weight:500;margin:0 35px 18px 0}.details-dialog p{font-size:14px;line-height:21px;color:#ddd;white-space:pre-wrap;margin:0}.close-details{position:absolute;top:12px;right:16px;border:0;background:transparent;color:#fff;font-size:30px;cursor:pointer}
.flow-toast{position:absolute;left:24px;right:24px;bottom:24px;z-index:60;padding:12px 16px;border-radius:12px;background:#342020;color:#fff;text-align:center;font-size:14px}
@media(max-height:700px){.flow-layout{padding-top:20px;padding-bottom:20px}.flow-heading{margin-top:24px}.gift-list,.booking-fields{margin-top:24px}.booking-bottom{padding-top:20px}.booking-bottom .flow-primary{margin-top:16px}}
@media(max-height:650px){.flow-layout{padding:16px 32px}.flow-heading{margin-top:16px}.gift-list,.booking-fields{margin-top:16px}.gift-list{gap:8px}.gift-list .gift-option{min-height:80px;padding:10px 48px 10px 16px}.gift-option .gift-terms{margin-top:6px}.booking-fields{gap:8px}.selected-gift{margin-top:8px}.selected-gift h3{margin-bottom:8px}.selected-gift .gift-option{min-height:84px}.booking-bottom{padding-top:12px}.booking-bottom .flow-primary{margin-top:12px}}
@media(max-width:359px){.flow-layout{padding-left:16px;padding-right:16px}.gift-list .gift-option{padding-right:40px}}
@media(max-width:359px) and (max-height:650px){.flow-layout{padding-top:8px;padding-bottom:8px}.flow-heading{margin-top:8px}.flow-heading p{margin-top:6px}.gift-list,.booking-fields{margin-top:8px}.gift-list{gap:6px}}
