.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(68,55,110,.28);backdrop-filter:blur(10px);z-index:20}.modal.open{display:flex}.modalbox{position:relative;width:min(860px,100%);padding:18px;border:1px solid var(--line);border-radius:21px;background:var(--surface2);box-shadow:0 30px 90px rgba(72,54,117,.25)}.modal.open .modalbox{animation:modal-in .4s cubic-bezier(.22,.85,.3,1.2)}
@keyframes modal-in{from{opacity:0;transform:scale(.88) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
.close{position:absolute;right:12px;top:12px;width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font-size:20px;z-index:6;display:inline-flex;align-items:center;justify-content:center}.modalgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.modalimg{position:relative;height:410px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(135deg,#efe4ff,#fff1f7);display:grid;place-items:center;overflow:hidden;perspective:1000px}
#modalMedia{width:100%;height:100%;display:grid;place-items:center}
#modalMedia img{width:100%;height:100%;object-fit:contain}
.envelope-flap{position:absolute;inset:0;z-index:5;pointer-events:none;transform-origin:top center;display:grid;place-items:center;opacity:0;background:linear-gradient(160deg,#efe4ff 0%,#d9c2f2 55%,#a988e0 100%)}
.envelope-flap:after{content:"";width:56px;height:56px;position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e4d5fb 60%,#b79ae8);border:3px solid #6e52b8;box-shadow:0 8px 22px rgba(70,45,120,.3)}
.modal.open .envelope-flap{opacity:1;animation:flap-open .7s cubic-bezier(.6,-.25,.3,1.25) .12s forwards}
@keyframes flap-open{0%{transform:rotateX(0deg);opacity:1}55%{transform:rotateX(-8deg);opacity:1}100%{transform:rotateX(-150deg);opacity:0}}
.modal.open #modalMedia{animation:reveal-pop .5s ease .5s both}
@keyframes reveal-pop{from{opacity:0;transform:scale(.88) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-paper{width:70%;height:72%;background:#fff;border:5px solid #d9c2eb;box-shadow:0 12px 30px rgba(65,45,100,.15);display:grid;place-items:center;text-align:center;transform:rotate(-2deg)}.modal-paper strong{font-size:18px;color:#69518e}.modal-paper span{font-size:10px;color:#a091b0}
.modal-paper-error{border-color:#d9a8a8;transform:rotate(0deg)}.modal-paper-error strong{font-size:26px;color:#a5605f}.modal-paper-error span{color:#b07f7e}.modalname{font-size:25px;font-weight:700;font-family:var(--font-display)}.modaldate{margin-top:6px;color:#8964d2;font-size:9px}.modaldetails{margin-top:16px;color:var(--muted);font-size:11px;line-height:1.75}.gallery{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.gallery button{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--muted);font-size:20px;display:inline-flex;align-items:center;justify-content:center}.gallery span{font-size:9px;color:var(--soft);font-weight:900}
.infomodalbox{width:min(520px,100%);max-height:100%;overflow-y:auto}.infomodalbox .modalname{padding-right:44px}.infomodalintro{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
.infotimeline{list-style:none;margin:18px 0 4px 6px;padding:0 0 0 18px;border-left:2px solid var(--line)}.infotimeline li{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 0 16px 14px;font-size:13px;line-height:1.5;color:var(--ink)}.infotimeline li:last-child{padding-bottom:0}.infotimeline li:before{content:"";position:absolute;left:-25px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--surface2)}.infowhen{font-size:11px;font-weight:900;color:var(--accent)}
.infoplaces,.infolist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}.infoplaces li,.infolist li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13px;line-height:1.55}.infoplaces strong,.infolist strong{font-size:14px;color:var(--ink)}.infoplaces span,.infolist span{color:var(--muted)}
.infomap{align-self:flex-start;margin-top:8px;padding:7px 13px;border-radius:99px;background:linear-gradient(90deg,#8e6ce7,#b77ee9);color:#fff;font-size:12px;font-weight:800;text-decoration:none}.infomap:focus-visible{outline:2px solid #8d68df;outline-offset:2px}