/* V3 collectible event card — keeps map and collection data unchanged */
.card-holder {padding: 142px 18px 36px;}
.event-card {
  width:min(520px,100%); max-height:100%; border-radius:19px;
  background:linear-gradient(150deg,#20292b,#111719 70%);
  border:1.5px solid #c58b4c;
  box-shadow:0 28px 90px #000b,0 0 0 4px rgba(197,139,76,.04);
}
.event-card:before {inset:5px;border:1px solid rgba(197,139,76,.18);border-radius:14px;}
.card-art {height:215px;min-height:155px; flex-shrink:1;border-bottom:0;}
.card-art.has-image {background-position:center;}
.card-art::after {background:linear-gradient(0deg,#171d1f 0%,rgba(17,23,26,.08) 70%);}
.card-topline {font-size:10px; font-weight:600;letter-spacing:.14em;}
.card-inner {padding:0 27px 21px;overflow-y:auto; scrollbar-width:thin;}
.card-head {margin-top:-16px;position:relative;z-index:3;}
.eyebrow {text-transform:uppercase;letter-spacing:.14em;color:#e9ab6b;font-size:10px;}
.event-title {font:700 31px/1.14 'Manrope',sans-serif;letter-spacing:-.04em;margin:7px 0 8px;}
.metadata {display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:10px 0 12px;border-bottom:1px solid var(--line);}
.meta-piece {display:flex;align-items:center;gap:6px;font-size:11px;color:#d6ded9;}
.meta-piece .mini-icon {color:#e7a75e;font-size:17px;line-height:1;}
.meta-coords {color:var(--muted);font-size:10px;white-space:nowrap;}
.stats {border-top:0;margin:0;padding:15px 0;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));}
.stat {padding:0 9px;text-align:center;}
.stat:first-child {padding-left:0;}
.stat + .stat {padding-left:9px;border-left:1px solid rgba(231,225,215,.16);}
.stat-ico {display:flex;justify-content:center;align-items:center;height:29px;font-size:22px;color:#e7a75e;margin-bottom:2px;}
.stat strong {font:700 17px/1.3 'Manrope',sans-serif;color:#e7e1d7;}
.stat span {font:500 10px/1.4 'IBM Plex Sans',sans-serif;letter-spacing:.03em;color:#a8b4b5;}
.card-desc {font:400 13px/1.62 'IBM Plex Sans',sans-serif;color:#d1d8d6;margin:14px 0 0;}
.insight {display:flex;gap:11px;align-items:flex-start;margin-top:14px;padding:12px 13px;background:linear-gradient(125deg,rgba(197,139,76,.17),rgba(197,139,76,.04));border-color:rgba(197,139,76,.55);}
.insight-icon {font-size:25px;color:#e3a862;line-height:1.1;flex-shrink:0;}
.insight b {font:700 10px 'IBM Plex Sans',sans-serif;letter-spacing:.13em;color:#e9b47d;}
.insight p {font:400 12px/1.52 'IBM Plex Sans',sans-serif;color:#e0d5c7;margin-top:4px;}
.card-footer {margin-top:14px;gap:10px;}
.source a {display:inline-flex;align-items:center;gap:5px;color:#e9b47d;border:1px solid rgba(197,139,76,.65);padding:8px 12px;border-radius:24px;font-size:12px;text-decoration:none;}
.source a:hover {background:rgba(197,139,76,.1);}
.nav-btns button {border-radius:50%;height:34px;width:34px;color:#e7e1d7;}
.art-icon {opacity:.45;}
@media(max-width:720px){
 .card-holder {padding:154px 10px 12px;}
 .event-card {width:min(420px,100%);}
 .card-art {height:145px;min-height:100px;}
 .card-inner {padding:0 17px 14px;}
 .event-title {font-size:25px;}
 .metadata {gap:8px;padding:7px 0 9px;}
 .meta-piece {font-size:10px;}
 .meta-coords {font-size:9px;}
 .stat {padding:0 5px;}
 .stat + .stat {padding-left:5px;}
 .stat strong {font-size:14px;}
 .stat span {font-size:9px;}
 .stat-ico {height:23px;font-size:19px;}
 .card-desc {font-size:12px;margin-top:10px;}
 .insight {margin-top:10px;padding:9px;}
 .insight p {font-size:11px;}
}

/* Keep the world map within the viewport while retaining scrolling inside cards. */
html,body {height:100%;overflow:hidden;overscroll-behavior:none;}
.card-holder {height:100dvh;bottom:auto;}
.event-card {max-height:100%;}
.card-inner {overscroll-behavior:contain;}
.image-credit {display:inline-block;color:#b6c3bf;font-size:11px;line-height:1.4;}
@media(max-width:720px){.card-holder{height:100dvh;}}

/* Sharing button for individual historical events */
.share-event { flex:0 0 auto; border:1px solid rgba(197,139,76,.55); background:rgba(197,139,76,.08); color:#e9b47d; border-radius:22px; padding:8px 11px; font:500 12px 'IBM Plex Sans',sans-serif; cursor:pointer; }
.share-event:hover { background:rgba(197,139,76,.18); }
.share-event:focus-visible { outline:2px solid #e9b47d; outline-offset:2px; }
.card-footer .source {flex:1; min-width:0;}
@media (max-width:720px) {.card-footer {gap:6px}.share-event {padding:7px 9px;font-size:11px}.nav-btns {gap:4px}.nav-btns button {width:30px;height:30px}}