/* A foil Trainer card: gold frame, illustrated window, and the original invitation. */
.trainer-invitation{
  width:410px;max-width:calc(100vw - 34px);max-height:calc(100dvh - 104px);
  border:11px solid #e5b83d;border-radius:17px;padding:12px 17px 13px;
  background:linear-gradient(130deg,#fff2b8,#fff9df 35%,#f6e9aa 70%,#fff3c5);
  box-shadow:0 0 0 1px #ffeda6,0 0 0 3px #b5812a,0 32px 85px #03152699,inset 0 0 0 1px #9e76134d;
  overflow:auto;isolation:isolate;
}
.trainer-invitation:before{content:'';position:absolute;inset:5px;border:1px solid #b8934090;border-radius:4px;pointer-events:none}
.invitation-topline{padding:0 0 7px;gap:7px;min-height:22px}
.invitation-topline>svg{width:20px;height:20px}
.invitation-topline>span{font-size:8px;letter-spacing:1.1px;color:#766429;font-weight:900}
.invitation-topline .invite-number{font-size:9px;color:#80692d;font-weight:700;letter-spacing:.3px}
.trainer-invitation h2{font-size:34px;letter-spacing:-1.5px;line-height:1.08;margin:2px 0 11px;text-align:left;white-space:nowrap}
.trainer-invitation h2>span{color:#c23230}
.card-art{height:180px;position:relative;border:4px solid #c0a24d;outline:1px solid #856b2d;box-shadow:inset 0 0 22px #1b566734,0 2px 0 #fff5ce;overflow:hidden;background:radial-gradient(ellipse at 46% 58%,#f5f2a5 0,transparent 47%),conic-gradient(from 65deg at 45% 60%,#b4ded2,#d9edbd,#adc9df,#b6e3cf,#e5e7a8,#b4ded2);margin-bottom:13px}
.card-art:before{content:'';position:absolute;inset:-60%;background:repeating-linear-gradient(128deg,transparent 0 35px,#fff7d32b 36px 38px,transparent 40px 70px);transform:rotate(4deg);pointer-events:none}
.card-art:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#fffde936 45%,transparent 60%);pointer-events:none}
.card-energy{position:absolute;font-family:Georgia,serif;font-size:205px;line-height:1;left:27%;top:-10px;transform:rotate(8deg);color:#fffbd678;text-shadow:0 0 25px #ffeb8a70}
#card-portrait{position:relative;width:100%;height:100%;display:block;z-index:1}
#card-portrait[hidden]{display:none}
.card-art>i{position:absolute;width:5px;height:19px;background:#fffbe3;left:12%;top:21%;transform:rotate(15deg);opacity:.8;border-radius:70%;z-index:2}
.card-art>i:after{content:'';position:absolute;left:-7px;top:7px;width:19px;height:5px;background:inherit;border-radius:70%}
.card-art>i:nth-last-child(2){left:83%;top:65%;transform:scale(.7) rotate(-8deg)}
.card-art>i:last-child{left:78%;top:16%;transform:scale(.45)}
.trainer-invitation .personal-invite{font-size:15px;line-height:1.45;margin:0 0 13px;color:#455048}
.you-highlight:after{background:#edbe40a8}
.invite-event{border-top:1px solid #baa152;border-bottom:1px solid #baa152;padding:12px 0;margin-bottom:13px;background:#fff8db45}
.invite-event>strong{font-size:12px;color:#344a4d}
.invite-event>span{margin:7px 0 5px;font-size:13px;color:#344a4d}
.invite-event>small{font-size:9px;color:#646b55;line-height:1.4}
.trainer-invitation .primary{font-size:14px;padding:13px 17px;border-radius:7px;box-shadow:0 3px 0 #8d2a25}
.invitation-signoff{font-size:8px;line-height:1.3;color:#806c35;margin-top:13px;letter-spacing:.1px}
@keyframes invitation-reveal{0%{opacity:0;transform:perspective(1000px) translateY(45px) rotateY(-25deg) rotateZ(-7deg) scale(.7);filter:blur(4px)}50%{opacity:1;filter:blur(0)}100%{opacity:1;transform:perspective(1000px) translateY(0) rotateY(0) rotateZ(0) scale(1);filter:blur(0)}}
@media(max-width:700px){
  .trainer-invitation{width:370px;border-width:10px;padding:10px 13px 12px;max-height:calc(100dvh - 96px)}
  .trainer-invitation h2{font-size:31px;letter-spacing:-1.4px;margin-bottom:10px}
  .invitation-topline>span{font-size:7px;letter-spacing:.75px}.invitation-topline .invite-number{font-size:8px;display:block}
  .card-art{height:164px}.trainer-invitation .personal-invite{font-size:14px}
  .invite-event>strong{font-size:11px}.invite-event>small{font-size:8px}
}
@media(max-height:700px){
  .trainer-invitation{padding:8px 12px 10px;margin-top:25px;border-width:9px;max-height:calc(100dvh - 86px)}
  .trainer-invitation h2{font-size:28px;margin:0 0 8px}.invitation-topline{padding-bottom:5px}
  .card-art{height:108px;margin-bottom:10px}.card-energy{font-size:155px}
  .trainer-invitation .personal-invite{font-size:13px;margin-bottom:9px;line-height:1.4}
  .invite-event{padding:9px 0;margin-bottom:10px}.invite-event>strong{font-size:10px}
  .trainer-invitation .primary{padding:11px 14px;font-size:13px}.invitation-signoff{margin-top:10px;font-size:7px}
}
@media(prefers-reduced-motion:reduce){.trainer-invitation{animation:none!important;transform:none!important}}

/* The RSVP uses the invitation's card finish, with the form in place of artwork. */
.rsvp-dialog{
  width:590px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 32px);
  padding:0;text-align:left;
  border:11px solid #e5b83d;border-radius:17px;
  background:linear-gradient(130deg,#fff2b8,#fff9df 35%,#f6e9aa 70%,#fff3c5);
  box-shadow:0 0 0 1px #ffeda6,0 0 0 3px #b5812a,0 32px 85px #03152699,inset 0 0 0 1px #9e76134d;
  scrollbar-width:thin;scrollbar-color:#b89340 #fff3c5;scroll-padding-block:20px;
}

/* The invitation opens straight into the full-screen adventure. */
body[data-mode=invitation],body[data-mode=loading]{overflow:hidden;height:100dvh;background:#12253d}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#world-wrap{position:fixed;inset:0;width:100%;height:100dvh;margin:0;z-index:5}
body[data-mode=invitation] #world-wrap{visibility:hidden}
.intro-sound{position:absolute;top:max(28px,env(safe-area-inset-top));left:34px;z-index:12;min-height:44px;color:#cbd5dc;border-color:#9fb3c048;background:#f8f6ee08}
.intro-sound:hover{color:#fffaf0;background:#f8f6ee15}
.intro-sound span{display:inline}
.intro-skip[hidden]{display:none}
.invite-event .invite-venue{display:block;margin:7px auto 5px;padding:8px 12px;min-height:44px;background:transparent;border-radius:6px;color:#344a4d;font-size:13px;font-weight:700;text-decoration:underline;text-decoration-color:#baa152;text-underline-offset:4px;white-space:normal}
.invite-event .invite-venue:hover{background:#f3e4a080}
#exit-game{width:auto;min-width:82px;padding:0 13px;font-size:12px}
#pause-button{width:auto;min-width:72px;padding:0 12px;font-size:12px}
.drive-controls button{font-size:13px;font-weight:800}
.drive-controls .go-control{font-size:17px}
.adventure-loading-dialog{width:420px;padding:32px;text-align:center;border:9px solid #e5b83d;background:linear-gradient(130deg,#fff2b8,#fff9df 35%,#f6e9aa 70%,#fff3c5)}
.adventure-loading-dialog h2{font-size:29px;line-height:1.15;margin:18px 0 13px}
.adventure-loading-dialog p{font-size:15px;line-height:1.55;margin-bottom:20px;color:#455048}
.adventure-loading-dialog .text-button{min-height:44px;margin-top:10px;font-size:13px}
.adventure-loading-dialog::backdrop{background:#122b42d9;backdrop-filter:blur(7px)}
.adventure-loading-dialog :is(button):focus-visible,.intro-sound:focus-visible,.invite-venue:focus-visible{outline:3px solid #326478;outline-offset:3px}

/* The saved reservation uses the same frame and paper as the entry form. */
.success-dialog.rsvp-dialog{padding:0;text-align:left}
.success-dialog .reservation-details{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:18px 0 22px}
.reservation-details>div{min-width:0}
.reservation-details dt{font-size:12px;font-weight:700;color:#344a4d;margin-bottom:7px}
.reservation-details dd{margin:0;min-height:44px;padding:10px 11px;border:1px solid #c4ab61;border-radius:6px;background:#fffdf2;box-shadow:inset 0 1px 3px #8a69130c;font-size:15px;line-height:1.5;color:#344a4d;overflow-wrap:anywhere;white-space:pre-wrap}
.success-dialog .success-actions{gap:16px;flex-wrap:wrap;justify-content:space-between}
.success-dialog .success-actions button{min-height:44px;font-size:13px}
@media(max-width:600px){
  .intro-sound{top:max(18px,env(safe-area-inset-top));left:18px;width:auto;padding:10px 13px}
  #exit-game{min-width:75px;padding:0 9px;font-size:11px}
  #pause-button{min-width:65px;padding:0 10px;font-size:11px}
  .game-bottom{left:12px;right:12px;gap:10px}
  .drive-controls{gap:6px}
  .drive-controls button{width:44px;min-width:44px;font-size:11px}
  .drive-controls .go-control{width:50px;font-size:15px}
  .assist-controls{width:136px;max-width:calc(100vw - 184px)}
  .assist-controls .primary{padding:13px 10px;font-size:11px;white-space:normal}
  .success-dialog .reservation-details{grid-template-columns:1fr}
  .adventure-loading-dialog{padding:24px 19px}
}
.rsvp-dialog::backdrop{background:#122b42b0;backdrop-filter:blur(7px)}
.rsvp-dialog .rsvp-banner{min-height:54px;padding:12px 62px 12px 22px;justify-content:flex-start;background:transparent;border-bottom:1px solid #baa152}
.rsvp-dialog .rsvp-banner strong{font-size:10px;letter-spacing:1.1px;font-weight:900;text-transform:uppercase;color:#766429}
.rsvp-dialog .close-button{width:44px;height:44px;top:5px;right:5px;background:#fff8db;border:1px solid #c6a654;color:#766429}
.rsvp-dialog .close-button:hover{background:#f4dfa0}
.rsvp-dialog .rsvp-content{padding:18px 22px 20px}
.rsvp-dialog h2{font-size:32px;line-height:1.12;margin:0 0 8px;color:#20344c}
.rsvp-dialog .form-intro{font-size:13px;color:#455048}
.rsvp-dialog .form-party-summary{margin:13px 0 18px;padding:10px 0;border-block:1px solid #baa152;border-radius:0;background:#fff8db45;font-size:12px;color:#344a4d}
.rsvp-dialog .form-grid{gap:13px}
.rsvp-dialog form label{color:#344a4d}
.rsvp-dialog input:not([type=checkbox]),.rsvp-dialog textarea{border-color:#c4ab61;background:#fffdf2;border-radius:6px;box-shadow:inset 0 1px 3px #8a69130c;padding:10px 11px;font-size:16px}
.rsvp-dialog input::placeholder,.rsvp-dialog textarea::placeholder{color:#74765b}
.rsvp-dialog :is(button,input,textarea):focus-visible{outline:3px solid #326478;outline-offset:3px}
.rsvp-dialog .crew-title{margin:18px 0 10px}.rsvp-dialog .crew-title span{font-size:11px;color:#646b55}
.rsvp-dialog .crew-grid{grid-template-columns:1fr 1fr;gap:10px}
.rsvp-dialog .crew-stepper{border:1px solid #c4ab61;border-radius:7px;background:#fff7d3;padding:10px;gap:8px}
.rsvp-dialog .crew-stepper>div>span{font-size:10px;color:#646b55;line-height:1.3}
.rsvp-dialog .stepper{gap:6px}.rsvp-dialog .stepper button{width:44px;height:44px;min-width:44px;background:#fffdf2;border:1px solid #c4ab61;border-radius:5px;color:#766429}
.rsvp-dialog .notes-label{margin-top:17px}.rsvp-dialog textarea{min-height:64px}
.rsvp-dialog .consent{font-size:12px;color:#455048;margin:17px 0}.rsvp-dialog .consent input{width:20px;height:20px;accent-color:#c23230}
.rsvp-dialog .primary{min-height:46px;border-radius:7px;padding:13px 17px;box-shadow:0 3px 0 #8d2a25}
.rsvp-dialog .form-note{font-size:11px;color:#646b55;line-height:1.5;margin-top:13px}
@media(max-width:600px){
  .rsvp-dialog{border-width:9px;max-width:calc(100vw - 24px)}
  .rsvp-dialog .rsvp-content{padding:18px 16px 20px}
  .rsvp-dialog .rsvp-banner{padding-left:16px}
  .rsvp-dialog h2{font-size:29px;letter-spacing:-1.1px}
  .rsvp-dialog .form-grid,.rsvp-dialog .crew-grid{grid-template-columns:1fr}
  .rsvp-dialog .crew-title{align-items:flex-start;flex-direction:column;gap:5px}
  .rsvp-dialog .crew-stepper{padding:10px 12px}.rsvp-dialog .stepper{gap:10px}
  .rsvp-dialog .form-party-summary{font-size:11px;line-height:1.5}
  .rsvp-dialog #submit-rsvp{flex-wrap:wrap;column-gap:10px;row-gap:3px;white-space:normal}
}