/* Supplied passport artwork is the visual authority. All illustrations are clipped windows onto its unchanged JPEG. */
#passportDialog{width:min(1200px,calc(100% - 32px));max-width:none;max-height:94dvh;padding:0;border:0;border-radius:24px;background:#7f181c;color:#2f1b11;box-shadow:0 24px 80px #0009;overflow:auto}
#passportDialog::backdrop{background:#051323b8}
#passportDialog *{box-sizing:border-box}
.passport-book{display:grid;grid-template-columns:1fr 1fr;min-width:0}
.passport-leather{min-width:0;padding:0 7% 8%;background:radial-gradient(ellipse at 30% 20%,#b62b30,#8e171e 65%,#651218);border:7px solid #651619;border-right:0;border-radius:24px 0 0 24px;box-shadow:inset 0 0 14px #3009}
.passport-cover-art{margin:0 -8%;aspect-ratio:600/390;background:url('/assets/img/world/passport-authority.jpg') 0 0/200% auto no-repeat}
.passport-paper{min-width:0;padding:28px 5% 38px;background:linear-gradient(100deg,#d9bc83,#f4e5bf 8%,#f0dfb7 85%,#d2b379);border:8px solid #6c191b;border-left:3px solid #9c7548;border-radius:0 24px 24px 0;box-shadow:inset 0 0 0 3px #c7ab78,inset 0 0 30px #99794460}
.passport-heading{text-align:center;margin:0 20px 22px}
.passport-heading p{margin:0 0 3px;color:#6d2119;font-size:15px;font-weight:900;text-transform:uppercase}
#passportTitle{margin:0;color:#941d19;font-family:Georgia,serif;font-size:clamp(25px,3vw,43px);line-height:1.1;text-shadow:1px 1px #fff2c6,2px 2px #b28b52}
.passport-close{position:sticky;float:right;top:12px;right:12px;margin:12px 12px -56px 0;width:44px;height:44px;z-index:3;display:grid;place-items:center;border:2px solid #fff0c4;border-radius:12px;background:repeating-linear-gradient(45deg,#a51d26 0 9px,#fff3d8 9px 18px);color:#65101b;font-size:34px;font-weight:900;text-shadow:0 0 3px white;box-shadow:0 2px 4px #0006;cursor:pointer}
.passport-overview{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#passportDialog .passport-card,#passportDialog .passport-progress{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;background:#f4e6c6;border:2px solid #c3a56e;border-radius:14px;color:#301d12;box-shadow:0 3px 4px #8c704333}
#passportDialog .passport-card svg{display:none}
#passportDialog strong{color:#301d12;font-size:15px;line-height:1.2}
#passportDialog p{line-height:1.3}
.passport-card p,.passport-progress p{margin:4px 0 0;font-size:12px}
.passport-summary-art{flex:0 0 58px;height:70px;background:url('/assets/img/world/passport-authority.jpg') 58.8% 20.2%/1500% auto no-repeat}
.passport-progress-ring{flex:0 0 62px;height:62px;display:grid;place-items:center;border:4px solid #b18e46;border-radius:50%;background:conic-gradient(#cdac57 var(--passport-progress,0deg),#f0dfb6 0);color:#682019;font-weight:900;font-size:14px}
.passport-section{margin-top:20px;padding:0;border:0}
.passport-section-heading{text-align:center;margin-bottom:12px}
#passportDialog h3{margin:0;color:#352115;font-size:21px;text-transform:uppercase;font-weight:900}
.passport-section-heading p{margin:4px 0 0;font-size:14px}
.passport-stamp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
#passportDialog .passport-stamp{display:block;position:relative;min-width:0;padding:0;border:0;border-radius:0;background:none;color:#321e11;text-decoration:none;opacity:1;filter:none;min-height:0;transition:transform .15s}
.passport-stamp-art{display:block;position:relative;overflow:hidden;width:100%;filter:drop-shadow(0 3px 2px #321c1140)}
.passport-stamp-art img{position:absolute;max-width:none;height:auto;pointer-events:none}
#passportDialog .passport-stamp strong{position:absolute;bottom:2%;left:7%;right:7%;height:27%;display:flex;align-items:center;justify-content:center;padding:3px 2px;background:#f0e4c5;color:#281d14;text-align:center;font-size:clamp(12px,1.3vw,16px);line-height:1.05}
#passportDialog .passport-stamp small{position:absolute;right:3%;top:53%;width:37%;min-height:26%;display:flex;align-items:center;justify-content:center;padding:3px;background:#e9d7ad;border:1px solid #ae905a;border-radius:50%;color:#59401d;font-size:clamp(9px,.9vw,11px);line-height:1.05;text-align:center;box-shadow:0 1px 3px #5332}
#passportDialog .passport-stamp.is-earned small{background:#286345;color:#fff6ce;border-color:#b69c50}
.passport-stamp:hover{transform:translateY(-3px)}
#passportDialog a:focus-visible,#passportDialog button:focus-visible{outline:4px solid #186d91;outline-offset:4px}
.passport-achievement-list{display:grid;gap:10px}
#passportDialog .passport-achievement{display:flex;align-items:center;gap:16px;min-width:0;padding:12px;border:1px solid #c3a574;border-radius:12px;background:#ebd8ae;opacity:1;color:#3b2716}
.passport-treasure-art{flex:0 0 112px;height:110px;background:url('/assets/img/world/passport-authority.jpg') 62.2% 84.4%/857% auto no-repeat}
.passport-achievement small{display:block;margin-top:5px;font-size:14px;line-height:1.3}
#passportDialog .passport-achievement.is-earned{background:#e3dab0;border-color:#718246}
.passport-actions{display:flex;align-items:center;gap:14px;margin-top:16px}
.passport-actions p{flex:1;margin:0;text-align:right;font-size:12px}
#clearPassportButton{flex:0 0 203px;min-height:53px;border:0;border-radius:12px;background:url('/assets/img/world/passport-authority.jpg') 92.78% 91.81%/591.13% 1690.57% no-repeat;color:transparent;cursor:pointer}
.passport-discovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;list-style:none}
#passportDialog .passport-discovery-grid li{display:flex;align-items:center;gap:8px;padding:10px;background:#e7d3a5;border:1px solid #c3a574;border-radius:10px}
.passport-discovery-grid small{display:block;font-size:12px}
@media(max-width:1000px){.passport-book{grid-template-columns:1fr}.passport-leather{border-radius:24px 24px 0 0;border-right:7px solid #651619;padding:0 8% 28px}.passport-cover-art{max-height:300px;margin:0 auto;width:100%;background-size:200% auto;aspect-ratio:600/390}.passport-paper{border-left:8px solid #6c191b;border-top:0;border-radius:0 0 24px 24px;padding:24px 6% 30px}.passport-heading{margin-right:30px}.passport-stamp-grid{gap:18px}.passport-left-stamps{max-width:600px;margin:auto}#passportDialog .passport-stamp strong{font-size:16px}#passportDialog .passport-stamp small{font-size:12px}}
@media(max-width:480px){#passportDialog{width:calc(100% - 16px);max-height:95dvh;border-radius:18px}.passport-leather{padding:0 6% 20px;border-width:4px}.passport-cover-art{aspect-ratio:600/390;max-height:none}.passport-paper{padding:22px 5% 25px;border-width:4px}.passport-heading{margin:0 24px 20px 0}.passport-heading p{font-size:12px}#passportTitle{font-size:29px}.passport-overview{grid-template-columns:1fr;gap:10px}.passport-card p,.passport-progress p{font-size:13px}.passport-stamp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}#passportDialog .passport-stamp strong{font-size:14px}#passportDialog .passport-stamp small{font-size:10px}.passport-section-heading p{font-size:13px}.passport-treasure-art{flex-basis:82px;height:88px;background-size:1120% auto}.passport-achievement small{font-size:13px}.passport-actions{flex-direction:column;align-items:center}.passport-actions p{text-align:center;font-size:13px}.passport-actions #clearPassportButton{flex-basis:auto;width:203px}.passport-discovery-grid{grid-template-columns:1fr}.passport-close{top:8px;margin:8px 8px -52px 0}}
@media(prefers-reduced-motion:reduce){.passport-stamp{transition:none}.passport-stamp:hover{transform:none}}

#passportDialog strong,#passportDialog small{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* Keep the native text over the original illustration windows. */
#passportDialog .passport-card{margin:0}
.passport-summary-art{background-size:1714.285% 1054.117%;background-position:57.61% 20.84%}
.passport-treasure-art{background-size:827.586% 716.8%;background-position:61.99% 81.71%}
.passport-book::after{content:"";grid-column:1/-1;display:block;height:42px;margin-top:-43px;position:relative;pointer-events:none;background:url('/assets/img/world/passport-authority.jpg') 50% 97.5%/105.45% 2240% no-repeat}
.passport-leather{padding-bottom:48px}
.passport-paper{padding-bottom:65px}
@media(max-width:1000px){.passport-book::after{background-size:210.9% 2240%;background-position:98% 97.5%}.passport-leather{padding-bottom:28px}}
@media(max-width:600px){#passportButton{display:inline-flex}}

@media(min-width:481px) and (max-width:1000px){.passport-cover-art{width:min(100%,461px);max-height:none}}
#passportDialog .passport-stamp small{top:50%;min-height:22%}

/* Desktop sizing refinement after David's scale review. */
@media(min-width:1001px){
 #passportDialog{width:min(960px,calc(100% - 48px));max-height:88dvh}
 .passport-leather{padding-bottom:34px}
 .passport-cover-art{width:min(100%,400px);margin:0 auto}
 .passport-paper{padding:18px 5% 54px}
 .passport-heading{margin:0 20px 14px}
 .passport-heading p{font-size:12px}
 #passportTitle{font-size:32px}
 .passport-overview{gap:10px}
 #passportDialog .passport-card,#passportDialog .passport-progress{gap:6px;padding:8px}
 #passportDialog strong{font-size:14px}
 .passport-summary-art{flex-basis:42px;height:54px}
 .passport-progress-ring{flex-basis:48px;height:48px;font-size:12px}
 .passport-card p,.passport-progress p{font-size:12px}
 .passport-section{margin-top:14px}
 .passport-section-heading{margin-bottom:9px}
 #passportDialog h3{font-size:18px}
 .passport-section-heading p{font-size:12px}
 #passportDialog .passport-stamp strong{font-size:13px}
 .passport-stamp-grid{gap:10px}
 #passportDialog .passport-achievement{gap:12px;padding:8px}
 .passport-treasure-art{flex-basis:82px;height:80px}
 .passport-achievement small{font-size:12px}
 .passport-actions{gap:10px;margin-top:12px}
 .passport-actions p{font-size:11px}
}

/* A permanent ink impression; new earned stamps land once when visible. */
#passportDialog .passport-ink{--stamp-angle:-11deg;position:absolute;z-index:2;left:8%;top:18%;width:84%;box-sizing:border-box;padding:7px 3px;border:4px double #8c181c;border-radius:5px;color:#8c181c;background:rgba(255,244,207,.92);text-align:center;transform:rotate(var(--stamp-angle));opacity:.96;pointer-events:none;font:900 clamp(11px,1vw,12px)/1.15 Georgia,serif;letter-spacing:.025em;box-shadow:0 1px 2px #48151630}
.passport-ink>span{display:block}
.passport-ink>span:last-child{margin-top:3px;font-size:1.05em}
#passportDialog .passport-ink--round,#passportDialog .passport-ink--square{left:18%;top:8%;width:64%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;padding:5px}
#passportDialog .passport-ink--round{border-radius:50%;--stamp-angle:-9deg}
#passportDialog .passport-ink--square{border-radius:3px;--stamp-angle:10deg}
#passportDialog [data-stamp-id="elf-workshop"] .passport-ink{--stamp-angle:7deg}
#passportDialog [data-stamp-id="npnn"] .passport-ink{--stamp-angle:6deg}
#passportDialog [data-stamp-id="christmas-clock"] .passport-ink{--stamp-angle:-5deg}
#passportDialog [data-stamp-id="snowman-workshop"] .passport-ink{--stamp-angle:-8deg}
#passportDialog [data-stamp-id="joke-show"] .passport-ink{--stamp-angle:-12deg}
#passportDialog [data-stamp-id="flight-tower"] .passport-ink{--stamp-angle:12deg}
#passportDialog .passport-ink.is-stamping{animation:passport-ink-land 700ms cubic-bezier(.16,.7,.2,1) var(--stamp-delay,0ms) both}
@keyframes passport-ink-land{0%{opacity:0;transform:rotate(var(--stamp-angle)) scale(2.1);filter:blur(2px)}55%{opacity:1;transform:rotate(var(--stamp-angle)) scale(.93);filter:blur(0)}74%{opacity:.96;transform:rotate(var(--stamp-angle)) scale(1.04)}100%{opacity:.96;transform:rotate(var(--stamp-angle)) scale(1)}}
.passport-stamp-announcement{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.reduce-motion #passportDialog .passport-ink.is-stamping{animation:none}
@media(prefers-reduced-motion:reduce){#passportDialog .passport-ink.is-stamping{animation:none}}

#passportDialog .passport-stamp{overflow:clip}
#passportDialog .passport-ink.is-pending{opacity:0}

/* Illustrated official impressions follow the supplied stamp authority. */
#passportDialog .passport-ink--official{left:5%;top:1%;width:90%;aspect-ratio:1;padding:0;border:0;border-radius:0;background:none;box-shadow:none;display:block;font-size:12px}
.passport-ink--official>img,.passport-ink--official>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.stamp-lettering{fill:#9e2418;stroke:#fff3cf;stroke-width:2px;paint-order:stroke;font-family:Georgia,serif;font-weight:900;letter-spacing:1.5px}
.stamp-lettering--upper{font-size:36px}
.stamp-lettering--lower{font-size:29px;letter-spacing:.5px}
#passportDialog .passport-location-name{display:block;position:static;padding:3px 4px 6px;color:#7e211e;font:700 11px/1.2 system-ui,sans-serif;text-align:center;overflow-wrap:normal}

#passportDialog .passport-stamp.is-earned .stamp-seal{top:52%;z-index:3;min-height:20%;font-size:10px}

#passportDialog .passport-ink--official{--stamp-angle:-6deg}
#passportDialog [data-stamp-id="elf-workshop"] .passport-ink--official{--stamp-angle:7deg}
#passportDialog [data-stamp-id="npnn"] .passport-ink--official{--stamp-angle:6deg}
#passportDialog [data-stamp-id="christmas-clock"] .passport-ink--official{--stamp-angle:-5deg}
#passportDialog [data-stamp-id="snowman-workshop"] .passport-ink--official{--stamp-angle:-6deg}
#passportDialog [data-stamp-id="joke-show"] .passport-ink--official{--stamp-angle:-7deg}
#passportDialog [data-stamp-id="flight-tower"] .passport-ink--official{--stamp-angle:7deg}

/* Earned cards reserve a real caption area below the official impression. */
#passportDialog .passport-stamp.is-earned{background:#f0e4c5;border:1px dashed #ba986b;border-radius:4px;padding-bottom:4px}
#passportDialog .passport-stamp.is-earned .passport-stamp-art{aspect-ratio:1!important;filter:none}
#passportDialog .passport-stamp.is-earned .passport-stamp-art img{opacity:1}
#passportDialog .passport-stamp.is-earned strong{position:static;height:auto;min-height:40px;padding:3px 5px;background:none;display:flex}
#passportDialog .passport-stamp.is-earned .stamp-seal{position:static;display:block;width:auto;min-height:0;margin:2px 8px 3px;padding:3px;border-radius:8px;font-size:10px}
#passportDialog .passport-stamp.is-earned .passport-location-name{position:static;color:#79211c;padding:3px 5px;min-height:26px}

/* Earned impressions sit on the original activity illustration. */
#passportDialog .passport-ink--official{left:14%;top:5%;width:72%;mix-blend-mode:multiply}
